/* Рабочее пространство: графитовые поверхности и фиолетовый акцент. */
:root {
  color-scheme: dark;
  --bg: #0d0e12;
  --surface: #16171d;
  --surface-2: #222332;
  --text: #f1f1f5;
  --muted: #a0a1ae;
  --line: #2b2c36;
  --accent: #9289ff;
  --accent-strong: #b6afff;
  --danger: #ff939d;
  --radius: 15px;
  --shadow: 0 4px 16px rgb(0 0 0 / 8%);
}
html { font-family: "Segoe UI", system-ui, sans-serif; font-size: 16px; }
body { line-height: 1.5; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px 20px; border-radius: 10px; background: var(--accent); color: #11111a; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; width: 230px; display: flex; flex-direction: column; padding: 28px 18px 18px; background: #101116; border-right: 1px solid var(--line); z-index: 20; }
.brand { gap: 12px; padding: 0 10px; }
.brand-mark { width: 40px; height: 40px; flex-shrink: 0; border-radius: 13px; color: #18152f; background: #a29aff; box-shadow: 0 0 25px rgb(146 137 255 / 14%); }
.brand-copy { font-size: 18px; }
.brand-copy small, .account-label small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; margin-top: 2px; }
.app-nav { display: flex; flex-direction: column; gap: 7px; margin-top: 30px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #adaebb; border-radius: 11px; min-height: 44px; }
.nav-item svg { flex-shrink: 0; }
.nav-item:hover { background: #1a1b24; color: var(--text); }
.nav-item.is-active { background: #242435; color: #f0eeff; box-shadow: inset 3px 0 var(--accent); }
.nav-settings { margin-top: auto; }
.sidebar-footer { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 16px 8px 0; margin-top: 18px; }
.account-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid #45465c; border-radius: 11px; background: #35364c; font-size: 12px; }
.account-label { font-size: 13px; }
.sidebar-footer form { margin: 0 0 0 auto; }
.logout-button { display: grid; place-items: center; min-width: 32px; min-height: 40px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; }
.logout-button:hover { color: var(--text); background: var(--surface-2); }
.app-body { margin-left: 230px; min-width: 0; }
.workspace-bar { min-height: 72px; display: flex; align-items: center; gap: 14px; padding: 16px 30px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); background: #101116; }
.workspace-bar strong { color: #dedee8; font-weight: 600; }
.shell { width: min(1280px, 100%); padding: 34px 30px 64px; }
.page-head, .detail-head { gap: 24px; align-items: center; margin-bottom: 26px; }
.page-head h1, .detail-head h1, .project-detail-head h1 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 550; line-height: 1.15; letter-spacing: -.045em; margin: 6px 0 10px; overflow-wrap: anywhere; }
.kicker { color: #b2aaff; font-size: 12px; letter-spacing: .1em; }
.page-head p.muted { margin: 0; font-size: 14px; }
.metric { padding-left: 24px; border-left: 1px solid var(--line); flex-shrink: 0; }
.metric strong { font-size: 2rem; font-weight: 600; }
.metric span { font-size: 12px; }
.filters { grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(110px, 1fr)) auto; padding: 16px; gap: 12px; box-shadow: none; }
label { font-size: 14px; font-weight: 500; }
input, select, textarea { background: #111218; border-radius: 10px; padding: 10px 12px; min-width: 0; }
input, select { min-height: 44px; }
input[type=checkbox], input[type=radio] { min-height: auto; accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: #838492; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.button:not(.primary) { color: #c3c3cf; background: transparent; border: 1px solid var(--line); }
.button:not(.primary):hover { color: var(--text); background: var(--surface-2); }
.button.danger { color: var(--danger); }
.primary, .round-add { background: #8277ef; color: #fff; }
.primary:hover, .round-add:hover { background: #7065d9; }
.ghost { background: var(--surface); color: #c3c3cf; }
.ghost:hover { background: var(--surface-2); }
.call-list { background: var(--surface); }
.call-row { padding: 22px; gap: 22px; }
.call-row:hover { background: #222232; box-shadow: inset 3px 0 var(--accent); }
.call-time { border: 0; padding: 0; gap: 4px; font-variant-numeric: tabular-nums; }
.call-time strong { font-size: 13px; color: #c6c6d2; font-weight: 500; }
.call-time span { font-size: 12px; }
.row-title { gap: 16px; }
.row-title > strong { font-size: 15px; font-weight: 600; }
.call-main p { font-size: 14px; margin: 6px 0; }
.call-main .call-subject { color: #e8e7f1; font-weight: 600; }
.meta { gap: 7px; flex-wrap: wrap; font-size: 12px; }
.meta span { background: #242535; border: 1px solid #313246; color: #c3bfdc; border-radius: 6px; padding: 2px 7px; }
.status { font-size: 12px; font-weight: 500; padding: 4px 9px; background: #292638; color: #c8bfff; flex-shrink: 0; }
.status-completed { background: #143326; color: #8ce0b7; }
.status-needs_review { background: #3a2f19; color: #f1cd84; }
.status-transcription_failed, .status-analysis_failed { background: #3c222b; color: #ff9fac; }
.call-delete-form { border-left: 0; }
.trash-button svg { fill: currentColor; stroke: none; }
.chevron { font-size: 24px; }
.empty { background: var(--surface); color: var(--muted); }
.empty h2 { color: var(--text); }
.back { font-size: 14px; margin-bottom: 20px; }
.detail-grid { gap: 24px; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }
.detail-grid > *, .row-title, .page-head > div:first-child { min-width: 0; }
.content { background: var(--surface); padding: 0 24px; border: 1px solid var(--line); border-radius: var(--radius); }
.content section:first-child { border-top: 0; }
.content section h2 { color: #b9b2fa; font-size: 14px; font-weight: 600; }
.lead { font-size: 18px; line-height: 1.65; letter-spacing: 0; }
.prose, .transcript, .content li { color: #c5c5d0; overflow-wrap: anywhere; }
.side-panel { top: 24px; }
.side-panel h2 { margin-top: 0; }
.player-dock { top: 0; background: color-mix(in srgb, var(--bg) 95%, transparent); }
.player { border-radius: 12px; }
.project-catalog-card:hover { background: #1c1c29; }
.project-links-summary { flex-wrap: wrap; font-size: 14px; }
.organization-avatar, .employee-avatar { background: #303047; color: #d0caff; }
.auth-page .app-sidebar { position: static; width: 100%; border-right: 0; border-bottom: 1px solid var(--line); padding: 20px; }
.auth-page .app-body { margin-left: 0; }
.auth-page .shell { margin: 0 auto; }
.login-wrap { min-height: calc(100dvh - 210px); }
.login-panel { padding: 32px; }
.login-panel h1 { font-size: 2.2rem; line-height: 1.15; }
@media (max-width: 1200px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .button { grid-column: 1 / -1; }
  .detail-grid { grid-template-columns: 1fr; }
  .side-panel { position: static; }
}
@media (max-width: 850px) {
  .app-sidebar { position: static; width: 100%; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; }
  .app-nav { display: flex; flex-direction: row; overflow-x: auto; gap: 6px; margin-top: 16px; padding-bottom: 4px; }
  .nav-item { flex-shrink: 0; font-size: 14px; padding: 9px 12px; gap: 8px; }
  .nav-settings { margin-top: 0; }
  .sidebar-footer { position: absolute; right: 16px; top: 18px; margin: 0; padding: 0; border: 0; }
  .sidebar-footer .account-avatar, .sidebar-footer .account-label { display: none; }
  .app-body { margin-left: 0; }
  .workspace-bar { min-height: 52px; padding: 12px 20px; }
  .shell { width: 100%; padding: 26px 20px 48px; }
  .metric { display: flex; }
  .directory-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body.workspace { padding-bottom: 72px; }
  .app-sidebar { padding: 12px 14px; }
  .app-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 7px 6px max(7px, env(safe-area-inset-bottom)); overflow: visible; border-top: 1px solid var(--line); background: color-mix(in srgb, #101116 96%, transparent); backdrop-filter: blur(14px); }
  .nav-item { min-width: 0; min-height: 54px; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 2px; border-radius: 9px; font-size: 10px; line-height: 1.15; text-align: center; }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-item.is-active { box-shadow: inset 0 2px var(--accent); }
  .brand-copy { display: block; }
  .shell { padding: 24px 14px 40px; }
  .workspace-bar { padding-inline: 14px; }
  .page-head { gap: 12px; }
  .page-head h1, .detail-head h1 { font-size: 2rem; }
  .metric { padding-left: 12px; }
  .metric strong { font-size: 1.6rem; }
  .filters { grid-template-columns: 1fr; padding: 14px; }
  .call-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; }
  .call-time { flex-direction: row; align-items: center; gap: 8px; }
  .row-title { flex-direction: row; align-items: start; gap: 8px; flex-wrap: wrap; }
  .call-main p { max-width: 100%; }
  .detail-actions { flex-wrap: wrap; }
  .detail-actions .button { white-space: normal; }
  .content { padding: 0 16px; }
  .login-panel { padding: 24px; }
  .workspace-bar { flex-wrap: wrap; gap: 8px; }
}