/* ──────────────────────────────────────────────────────────────────────
   SALESQA — Цифросити-брендинг (красное+чёрное+белое)
   App Store-аутентичная типографика + полноценный desktop-layout
   ────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* ── деловая светлая тема (B2B-софт, 1С/CRM) ── */
  --bg:           #F4F5F7;
  --bg-elevated:  #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #F0F2F5;    /* лёгкая серая заливка / шапки таблиц */
  --surface-3:    #E6E9ED;
  --surface-4:    #D5DAE0;
  --line:         #E2E5EA;
  --line-soft:    #ECEEF1;
  --separator:    #DADEE3;

  /* текстовая иерархия */
  --text:         #1A1D21;
  --text-2:       #41464E;
  --text-3:       #6B717A;
  --text-4:       #A2A8B0;

  /* Цифросити brand (переопределяется per-tenant в app-base.js) */
  --red:          #E30613;
  --red-press:    #B8050F;
  --red-soft:     rgba(227,6,19,.10);
  --red-tint:     rgba(227,6,19,.06);
  --brand:        #E30613;

  /* тёмные плашки (футер / CTA / тёмные шапки) */
  --black:        #1B1E23;
  --black-elev:   #23272D;
  --black-elev-2: #2D323A;
  --black-soft:   rgba(20,25,35,.06);

  /* статусные цвета — деловые */
  --blue:         #2563EB;
  --blue-press:   #1D4FD8;
  --blue-soft:    rgba(37,99,235,.12);
  --green:        #16A34A;
  --green-soft:   #E8F6EE;
  --orange:       #D97A06;
  --orange-soft:  #FBEFDD;
  /* грейды — в точности как на лендинге (good/mid/bad + мягкие фоны) */
  --bad:          #DC2626;
  --bad-soft:     #FBE8E8;
  --indigo:       #4F46E5;
  --indigo-soft:  rgba(79,70,229,.12);
  --teal:         #0E7490;
  --purple:       #7C3AED;

  /* плашки — нейтрализованы (без «iOS-hero» градиентов) */
  --grad-brand:   #1B1E23;
  --grad-red:     #E30613;
  --grad-dark:    #1B1E23;
  --grad-red-light: #E30613;

  /* шрифты — PT Sans (деловой), без apple/плаката */
  --font-display: 'PT Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-rounded: 'PT Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body:    'PT Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* радиусы — деловые, плотнее */
  --r-tag:        5px;
  --r-button:     6px;
  --r-card:       8px;
  --r-card-lg:    10px;
  --r-pill:       980px;

  /* тени — лёгкие, опора на бордеры */
  --shadow-card:  0 1px 2px rgba(20,25,35,.05);
  --shadow:       0 1px 3px rgba(20,25,35,.08);
  --shadow-hero:  0 4px 16px rgba(20,25,35,.10);

  /* типошкала — плотнее */
  --t-largetitle:  32px;
  --t-title1:      26px;
  --t-title2:      21px;
  --t-title3:      18px;
  --t-headline:    16px;
  --t-body:        15px;
  --t-callout:     15px;
  --t-subhead:     14px;
  --t-footnote:    13px;
  --t-caption1:    12px;
  --t-caption2:    11px;

  /* layout breakpoints — desktop */
  --w-mobile:     430px;
  --w-tablet:     720px;
  --w-desktop:    1180px;
  --sidebar-w:    240px;
}

/* legacy-алиасы для совместимости */
:root {
  --border:        var(--line);
  --bg-grid:       var(--surface-2);
  --panel:         var(--surface);
  --panel-2:       var(--bg);
  --ink:           var(--bg);
  --mint:          var(--green);
  --mint-soft:     var(--green-soft);
  --cyan:          var(--red);
  --cyan-soft:     var(--red-soft);
  --purple-soft:   var(--indigo-soft);
  --y:             var(--red);
  --y-soft:        var(--red-soft);
  --y-hot:         var(--red-press);
  --y-dim:         var(--text-3);
  --y-glow:        rgba(227,6,19,.20);
  --g:             var(--green);
  --g-soft:        var(--green-soft);
  --g-dim:         #248A3D;
  --r:             var(--red);
  --r-soft:        var(--red-soft);
  --o:             var(--orange);
  --o-soft:        var(--orange-soft);
  --grad-mint:     #16A34A;
  --grad-purple:   var(--grad-brand);
  --font-tech:     var(--font-mono);
  --line-hot:      var(--red);
  --radius-sm:     8px;
  --radius:        var(--r-card);
  --radius-lg:    var(--r-card-lg);
  --radius-xs:     6px;
  --radius-xl:     12px;
}

/* Тёмная тема отключена намеренно: кабинет всегда светлый, как лендинг.
   Системная prefers-color-scheme:dark больше не инвертирует токены. */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent }

html { color-scheme: light }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: normal;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

a { color: var(--red); text-decoration: none }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; letter-spacing: inherit }
::selection { background: var(--red-soft) }

/* ══════════════════════════════════════════════════════════════════
   ▸ LAYOUT — mobile / tablet / desktop
   ══════════════════════════════════════════════════════════════════ */

/* Mobile (по умолчанию) */
.phone {
  max-width: var(--w-mobile);
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 100px;
  position: relative;
}

/* Desktop: сайдбар + основной контент */
@media (min-width: 1024px) {
  body {
    background: var(--bg);
  }
  .phone {
    max-width: var(--w-desktop);
    margin: 0 auto;
    padding: 0 32px 32px 32px;
    padding-left: calc(var(--sidebar-w) + 32px);
    padding-bottom: 32px;
    min-height: 100vh;
  }
  .phone::before {
    content: '';
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 100vw;
    background: var(--bg);
    z-index: -1;
  }

  /* Sidebar — desktop nav */
  .desktop-sidebar {
    position: fixed;
    top: 0; left: max(0px, calc(50% - var(--w-desktop)/2));
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--black);
    color: #FFFFFF;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
    border-right: 1px solid rgba(255,255,255,.06);
  }
  .desktop-sidebar .brand {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px 24px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .desktop-sidebar .brand-mark {
    width: 36px; height: 36px;
    background: transparent;
    border-radius: 0;
    display: grid; place-items: center;
    overflow: visible;
  }
  .desktop-sidebar .brand-mark img,
  .desktop-sidebar .brand-mark svg {
    width: 100%; height: 100%;
    object-fit: contain;
  }
  .desktop-sidebar .brand-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
    color: #FFFFFF;
  }
  .desktop-sidebar .brand-sub {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
    font-weight: 500;
  }
  .desktop-sidebar .nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    color: rgba(255,255,255,.75);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.015em;
    text-transform: none;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .desktop-sidebar .nav-item:hover {
    background: rgba(255,255,255,.06);
    color: #FFFFFF;
  }
  .desktop-sidebar .nav-item.active {
    background: var(--red);
    color: #FFFFFF;
  }
  .desktop-sidebar .nav-item svg {
    width: 20px; height: 20px; stroke-width: 2;
    flex-shrink: 0;
  }
  .desktop-sidebar .spacer { flex: 1 }
  .desktop-sidebar .nav-item.logout {
    color: rgba(255,255,255,.55);
    font-size: 13px;
  }

  /* В desktop скрываем мобильный tabbar */
  .tabbar { display: none }
}
@media (max-width: 1023px) {
  .desktop-sidebar { display: none }
}

/* ══════════════════════════════════════════════════════════════════
   ▸ HEADER — iOS Large Title
   ══════════════════════════════════════════════════════════════════ */
.header {
  padding: 12px 20px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
@media (min-width: 1024px) {
  .header { padding: 32px 0 28px }
}
.greet { flex: 1; min-width: 0 }
.greet small {
  display: block;
  color: var(--red);
  font-size: var(--t-footnote);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.greet h1 {
  font-family: var(--font-display);
  font-size: var(--t-largetitle);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text);
}
@media (min-width: 1024px) {
  .greet h1 { font-size: 44px }
}
.avatar {
  width: 40px; height: 40px;
  background: var(--black);
  border: none;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-callout);
  color: #FFFFFF;
  flex-shrink: 0;
}

/* topbar для detail-страниц */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  margin-bottom: 4px;
  min-height: 44px;
}
@media (min-width: 1024px) {
  .topbar { padding: 24px 0 16px }
}
.topbar .title {
  font-family: var(--font-display);
  font-size: var(--t-headline);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--text);
}
.topbar .icon-btn {
  background: var(--surface-2);
  border: none;
  color: var(--text);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .12s, background .15s;
}
.topbar .icon-btn:hover { background: var(--surface-3) }
.topbar .icon-btn:active { transform: scale(.92); background: var(--surface-3) }
.topbar .icon-btn svg { width: 16px; height: 16px }

/* ══════════════════════════════════════════════════════════════════
   ▸ HERO — фирменная Цифросити-карточка
   ══════════════════════════════════════════════════════════════════ */
.hero {
  margin: 8px 16px 24px;
  background: var(--grad-brand);
  border-radius: var(--r-card-lg);
  padding: 24px 26px 22px;
  cursor: pointer;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-hero);
  transition: transform .18s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 1024px) {
  .hero { margin: 8px 0 28px; padding: 32px 36px 28px }
}
.hero:active { transform: scale(.985) }
.hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -120px; left: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1 }

.hero .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-caption1);
  font-weight: 600;
  letter-spacing: 0;
  color: #FFFFFF;
  text-transform: none;
}
.hero .badge::before { display: none }
.hero .label {
  font-size: var(--t-footnote);
  font-weight: 600;
  color: rgba(255,255,255,.78);
  margin-top: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero .score {
  display: flex; align-items: baseline; gap: 12px;
  margin-top: 6px;
}
.hero .score b {
  font-family: var(--font-display);
  font-size: 68px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
  .hero .score b { font-size: 84px }
}
.hero .score span {
  font-size: var(--t-subhead);
  font-weight: 500;
  color: rgba(255,255,255,.7);
}
.hero .grade {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  margin-left: auto;
  color: #FFFFFF;
  letter-spacing: -0.025em;
  align-self: center;
}
.hero-row {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 0.5px solid rgba(255,255,255,.30);
  font-size: var(--t-caption1);
  color: rgba(255,255,255,.78);
  letter-spacing: 0;
}
.hero-row > div { display: flex; flex-direction: column; gap: 3px }
.hero-row > div b {
  font-family: var(--font-display);
  font-size: var(--t-subhead);
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════════════════════════════
   ▸ CTA — кнопки записи/файла
   ══════════════════════════════════════════════════════════════════ */
.cta {
  margin: 0 16px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 1024px) {
  .cta { margin: 0 0 28px; max-width: 480px }
}
.cta button, .cta a {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-button);
  padding: 13px 18px;
  font-family: var(--font-display);
  font-size: var(--t-subhead);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, border-color .15s, filter .15s;
  min-height: 46px;
}
.cta button:hover, .cta a:hover { border-color: var(--text-4) }
.cta button:active, .cta a:active {
  background: var(--surface-2);
}
.cta button svg, .cta a svg {
  width: 18px; height: 18px;
  stroke-width: 2.2;
}
.cta .primary {
  background: var(--red);
  color: #FFFFFF;
  border-color: var(--red);
}
.cta .primary:hover { filter: brightness(.94); border-color: var(--red) }
.cta .primary:active { background: var(--red-press) }

/* ══════════════════════════════════════════════════════════════════
   ▸ RECORDER
   ══════════════════════════════════════════════════════════════════ */
#recorder {
  margin: 0 16px 24px;
  background: var(--bg-elevated);
  border-radius: var(--r-card-lg);
  padding: 26px 22px 22px;
  box-shadow: var(--shadow);
}
@media (min-width: 1024px) {
  #recorder { margin: 0 0 28px; max-width: 480px }
}
.rec-head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 18px;
  font-size: var(--t-footnote);
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rec-dot {
  width: 10px; height: 10px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(227,6,19,.18);
  animation: rec-pulse 1.4s infinite ease-in-out;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1) }
  50% { opacity: .55; transform: scale(.82) }
}
#rec-timer {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--text);
  margin-bottom: 22px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#rec-timer.warn { color: var(--orange) }

.rec-actions { display: flex; flex-direction: column; gap: 10px }
.rec-stop {
  width: 100%;
  padding: 16px;
  background: var(--red);
  color: #FFFFFF;
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-headline);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .14s;
  box-shadow: 0 4px 14px rgba(227,6,19,.30);
}
.rec-stop:active { transform: scale(.97); background: var(--red-press) }
.rec-stop .ico {
  width: 14px; height: 14px;
  background: #FFFFFF;
  border-radius: 3px;
  display: inline-block;
}
.rec-cancel {
  width: 100%;
  padding: 13px;
  background: var(--surface-2);
  color: var(--text-2);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-callout);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.rec-cancel:active { background: var(--surface-3) }
#rec-hint {
  margin-top: 14px;
  font-size: var(--t-caption1);
  color: var(--text-3);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   ▸ STATS
   ══════════════════════════════════════════════════════════════════ */
.stats {
  margin: 0 16px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (min-width: 1024px) {
  .stats { margin: 0 0 28px }
}
.stat {
  background: var(--bg-elevated);
  padding: 18px 12px 14px;
  text-align: center;
}
.stat .v {
  font-family: var(--font-display);
  font-size: var(--t-title2);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.stat .v.up { color: var(--green) }
.stat .v.down { color: var(--red) }
.stat .l {
  font-size: var(--t-caption1);
  color: var(--text-3);
  font-weight: 500;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   ▸ SECTION
   ══════════════════════════════════════════════════════════════════ */
.section { margin: 0 16px 24px }
@media (min-width: 1024px) {
  .section { margin: 0 0 28px }
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding: 0 4px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--t-title2);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.025em;
  text-transform: none;
}
.section-head h2::before { display: none }
.section-head a {
  color: var(--red);
  font-size: var(--t-subhead);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section-head .pill {
  background: var(--surface-2);
  color: var(--text-2);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-caption1);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════
   ▸ LIST (recent)
   ══════════════════════════════════════════════════════════════════ */
.list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--bg-elevated);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.item {
  background: var(--bg-elevated);
  border: none;
  border-radius: 0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: background .12s;
  position: relative;
  min-height: 64px;
}
.item + .item::before {
  content: '';
  position: absolute;
  top: 0; left: 72px; right: 0;
  height: 0.5px;
  background: var(--separator);
}
.item:active { background: var(--surface-2) }
.item .ring {
  flex: 0 0 42px; height: 42px;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-callout);
  background: var(--surface-2);
  color: var(--text-3);
}
.item .ring.a, .item .ring.b { background: var(--green-soft); color: var(--green) }
.item .ring.c { background: var(--orange-soft); color: var(--orange) }
.item .ring.d, .item .ring.f { background: var(--red-soft); color: var(--red) }
.item .body { flex: 1; min-width: 0 }
.item .body .title {
  font-weight: 600;
  font-size: var(--t-callout);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.015em;
  color: var(--text);
}
.item .body .meta {
  color: var(--text-3);
  font-size: var(--t-footnote);
  margin-top: 2px;
}
.item .score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-callout);
  letter-spacing: -0.02em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.item::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-4);
  border-bottom: 1.5px solid var(--text-4);
  transform: rotate(-45deg);
  margin-left: 4px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   ▸ DESKTOP — двухколоночный layout для главной
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* main grid: hero+CTA слева (480px) | stats+recent справа */
  .main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .main-grid > .col-left,
  .main-grid > .col-right {
    min-width: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════
   ▸ ADMIN ACTIONS
   ══════════════════════════════════════════════════════════════════ */
.actions {
  margin: 0 16px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 1024px) {
  .actions { margin: 0 0 28px; grid-template-columns: repeat(4, 1fr) }
}
.actions a {
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--r-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  min-height: 116px;
  box-shadow: var(--shadow-card);
  transition: transform .14s;
}
.actions a:active { transform: scale(.97) }
.actions .ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--red-soft);
  color: var(--red);
}
.actions .ico svg { width: 20px; height: 20px }
.actions .ico.green { color: var(--green); background: var(--green-soft) }
.actions .ico.red { color: var(--red); background: var(--red-soft) }
.actions .ico.orange { color: var(--orange); background: var(--orange-soft) }
.actions .ico.cyan { color: var(--red); background: var(--red-soft) }
.actions .ico.purple { color: var(--purple, #7B61FF); background: var(--purple-soft, rgba(123,97,255,.12)) }
.actions .t {
  font-family: var(--font-display);
  font-size: var(--t-headline);
  font-weight: 700;
  margin-top: auto;
  color: var(--text);
  letter-spacing: -0.022em;
}
.actions .d {
  font-size: var(--t-footnote);
  color: var(--text-3);
}
.actions .count {
  position: absolute;
  top: 14px; right: 14px;
  font-size: var(--t-caption2);
  font-weight: 700;
  background: var(--red);
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  min-width: 20px;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════
   ▸ MANAGER CARD
   ══════════════════════════════════════════════════════════════════ */
.mgr {
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--r-card);
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform .12s;
}
.mgr:active { transform: scale(.99) }
.mgr .av {
  flex: 0 0 44px; height: 44px;
  background: var(--red-soft);
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-callout);
  color: var(--red);
}
.mgr .body { flex: 1; min-width: 0 }
.mgr .name { font-size: var(--t-callout); font-weight: 600; letter-spacing: -0.015em }
.mgr .meta {
  color: var(--text-3);
  font-size: var(--t-footnote);
  margin-top: 3px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mgr .meta .up { color: var(--green) }
.mgr .meta .down { color: var(--red) }
.mgr .score {
  font-family: var(--font-display);
  font-size: var(--t-title3);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mgr .score.a, .mgr .score.b { color: var(--green) }
.mgr .score.c { color: var(--orange) }
.mgr .score.d, .mgr .score.f { color: var(--red) }

/* ══════════════════════════════════════════════════════════════════
   ▸ EVAL DETAIL
   ══════════════════════════════════════════════════════════════════ */
.block {
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--r-card);
  padding: 14px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.block .name {
  flex: 1;
  font-size: var(--t-callout);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
}
.block .bar {
  flex: 0 0 80px; height: 6px;
  background: var(--surface-2);
  border: none;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.block .bar .fill {
  height: 100%;
  background: var(--green);
  border-radius: var(--r-pill);
}
.block .bar .fill.mid { background: var(--orange) }
.block .bar .fill.low { background: var(--red) }
.block .pts {
  font-family: var(--font-display);
  font-size: var(--t-footnote);
  font-weight: 700;
  color: var(--text-3);
  width: 54px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mistake {
  background: var(--bg-elevated);
  border: none;
  border-left: 3px solid var(--red);
  border-radius: var(--r-card);
  padding: 16px 18px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}
.mistake.major { border-left-color: var(--orange) }
.mistake.minor { border-left-color: var(--text-4) }
.mistake .sev {
  font-size: var(--t-caption2);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--red-soft);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  display: inline-block;
  margin-bottom: 10px;
}
.mistake.major .sev { color: var(--orange); background: var(--orange-soft) }
.mistake.minor .sev { color: var(--text-3); background: var(--surface-2) }
.mistake .desc {
  font-size: var(--t-callout);
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.4;
  letter-spacing: -0.015em;
}
.mistake .quote {
  font-size: var(--t-footnote);
  color: var(--text-2);
  background: var(--surface-2);
  border-radius: var(--r-button);
  padding: 10px 12px;
  margin-bottom: 10px;
  line-height: 1.5;
  font-style: normal;
}
.mistake .quote::before { content: '“'; color: var(--text-3); margin-right: 2px }
.mistake .quote::after { content: '”'; color: var(--text-3); margin-left: 2px }
.mistake .better {
  font-size: var(--t-footnote);
  background: var(--green-soft);
  color: var(--green);
  padding: 12px 14px;
  border-radius: var(--r-button);
  border: none;
  line-height: 1.5;
}
.mistake .better b {
  display: block;
  font-size: var(--t-caption2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--green);
}

.rec {
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--r-card);
  padding: 16px;
  margin-bottom: 8px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--shadow-card);
}
.rec .n {
  flex: 0 0 30px; height: 30px;
  background: var(--red-soft);
  color: var(--red);
  border: none;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-subhead);
  display: grid;
  place-items: center;
}
.rec p { font-size: var(--t-subhead); line-height: 1.5; color: var(--text) }

.err {
  background: var(--bg-elevated);
  border: none;
  border-radius: var(--r-card);
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.err .n {
  flex: 0 0 36px; height: 36px;
  background: var(--red-soft);
  color: var(--red);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-subhead);
  display: grid;
  place-items: center;
}
.err .body { flex: 1 }
.err .t { font-size: var(--t-subhead); font-weight: 500; line-height: 1.4; color: var(--text) }
.err .m { font-size: var(--t-caption1); color: var(--text-3); margin-top: 3px }

/* ══════════════════════════════════════════════════════════════════
   ▸ TABBAR (mobile only)
   ══════════════════════════════════════════════════════════════════ */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--w-mobile);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  border-top: 0.5px solid var(--separator);
  display: flex;
  justify-content: space-around;
  padding: 6px 0 24px;
  z-index: 10;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 4px;
  text-transform: none;
}
.tab svg { width: 26px; height: 26px; stroke-width: 1.7 }
.tab:hover { color: var(--text-2) }
.tab.active { color: var(--red) }
.tab.active.admin { color: var(--indigo) }

/* ══════════════════════════════════════════════════════════════════
   ▸ STATES
   ══════════════════════════════════════════════════════════════════ */
.loading {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: var(--t-subhead);
  letter-spacing: 0;
  text-transform: none;
}
.loading::before { content: '' }
.empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: var(--t-subhead);
}

/* ══════════════════════════════════════════════════════════════════
   ▸ LOGIN
   ══════════════════════════════════════════════════════════════════ */
.login-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 32px;
  text-align: center;
  background: var(--bg);
}
.login-wrap .logo-mark {
  width: 96px; height: 96px;
  background: var(--red);
  border-radius: 22px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(227,6,19,.30);
  padding: 12px;
}
.login-wrap .logo-mark img,
.login-wrap .logo-mark svg {
  width: 100%; height: 100%;
  object-fit: contain;
}
.login-wrap h1 {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.05;
}
.login-wrap .sub {
  font-size: var(--t-subhead);
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 40px;
}
.login-wrap p {
  color: var(--text-2);
  margin-bottom: 32px;
  max-width: 340px;
  font-size: var(--t-callout);
  line-height: 1.55;
}
.login-wrap .tg-btn {
  background: var(--red);
  color: #FFFFFF;
  padding: 14px 36px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-headline);
  letter-spacing: -0.015em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  box-shadow: 0 6px 18px rgba(227,6,19,.35);
}
.login-wrap .tg-btn:active { background: var(--red-press); transform: scale(.98) }