/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Loupe — оформление.

   Визуальный язык — по системе shadcn/ui (те же величины, что у Vercel и Linear): нейтральная
   гамма zinc, тонкие рамки вместо теней, один «чернильный» акцент — основная кнопка чёрная в
   светлой теме и белая в тёмной. Никаких градиентов, свечения и стекла: интерфейс — рабочий
   инструмент, в котором кыргызский текст читают часами. Цвет означает только состояние
   (зелёный, янтарный, красный) и пометки в тексте ответа.

   Шрифты — Geist Sans и Geist Mono (Vercel, OFL), свои, не из сети. Значки — Lucide (app.js).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── шрифты ──────────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: Geist; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/geist-sans.woff2) format('woff2');
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/geist-mono.woff2) format('woff2');
}

/* ── величины: светлая тема (zinc) ───────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --фон:        #fafafa;
  --поверх:     #ffffff;
  --поверх-2:   #fafafa;
  --вдавлено:   #f4f4f5;
  --рамка:      #e4e4e7;
  --рамка-ярче: #d4d4d8;
  --текст:      #09090b;
  --текст-2:    #52525b;
  --текст-3:    #71717a;

  --акцент:      #18181b;
  --акцент-ярче: #3f3f46;
  --акцент-фон:  #f4f4f5;
  --акцент-край: #d4d4d8;
  --на-акценте:  #fafafa;
  --ссылка:      #2650d8;   /* фирменный синий Airun */

  --добро: #15803d;  --добро-фон: #f0fdf4;  --добро-край: #bbf7d0;  --добро-знак: #22c55e;
  --тревога: #b45309; --тревога-фон: #fffbeb; --тревога-край: #fde68a; --тревога-знак: #f59e0b;
  --беда:  #dc2626;  --беда-фон:  #fef2f2;  --беда-край:  #fecaca;  --беда-знак: #ef4444;

  /* Пометки в тексте ответа: что сделала модель. Их цвета — рабочие, по ним ищут места. */
  --пм-правка:       #10b981;
  --пм-особый:       #f59e0b;
  --пм-предложено:   #d97706;
  --пм-подозрение:   #8b5cf6;

  /* Графики: последовательная шкала — один синий тон. */
  --гр-1: #2563eb;  --гр-слабо: #bfdbfe;  --гр-сетка: #f1f1f3;  --гр-ось: #e4e4e7;
  --гр-крит: #dc2626;  --гр-норма: #16a34a;

  --тень-1: 0 1px 2px 0 rgb(0 0 0 / .04);
  --тень-2: 0 4px 6px -1px rgb(0 0 0 / .07), 0 2px 4px -2px rgb(0 0 0 / .05);
  --тень-3: 0 20px 25px -5px rgb(0 0 0 / .10), 0 8px 10px -6px rgb(0 0 0 / .08);
  --кольцо: 0 0 0 3px rgb(161 161 170 / .35);

  /* Шаг сетки — 4 пиксела. Все отступы кратны ему. */
  --ш1: 4px; --ш2: 8px; --ш3: 12px; --ш4: 16px; --ш5: 24px; --ш6: 32px; --ш7: 48px;
  --радиус:   10px;
  --радиус-2: 8px;
  --радиус-3: 12px;
  --высота-поля: 36px;

  --шрифт: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --моно: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --бок: 240px;
  --бок-узкий: 60px;
  --высота-шапки: 0px;
}

/* ── тёмная тема (zinc) ──────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-тема="светлая"]) {
    color-scheme: dark;
    --фон: #09090b;  --поверх: #111113;  --поверх-2: #18181b;  --вдавлено: #1f1f23;
    --рамка: #27272a;  --рамка-ярче: #3f3f46;
    --текст: #fafafa;  --текст-2: #a1a1aa;  --текст-3: #8b8b94;
    --акцент: #fafafa;  --акцент-ярче: #d4d4d8;  --акцент-фон: #27272a;  --акцент-край: #3f3f46;
    --на-акценте: #18181b;  --ссылка: #7d97ff;
    --добро: #4ade80;  --добро-фон: #052e16;  --добро-край: #14532d;  --добро-знак: #22c55e;
    --тревога: #fbbf24; --тревога-фон: #2b1d05; --тревога-край: #78350f; --тревога-знак: #f59e0b;
    --беда: #f87171;  --беда-фон: #2a0f0f;  --беда-край: #7f1d1d;  --беда-знак: #ef4444;
    --пм-правка: #34d399;  --пм-особый: #fbbf24;  --пм-предложено: #f59e0b;  --пм-подозрение: #a78bfa;
    --гр-1: #3b82f6;  --гр-слабо: #1e3a8a;  --гр-сетка: #1f1f23;  --гр-ось: #27272a;
    --тень-1: 0 1px 2px 0 rgb(0 0 0 / .4);
    --тень-2: 0 4px 6px -1px rgb(0 0 0 / .45);
    --тень-3: 0 20px 25px -5px rgb(0 0 0 / .6), 0 8px 10px -6px rgb(0 0 0 / .5);
    --кольцо: 0 0 0 3px rgb(113 113 122 / .45);
  }
}
:root[data-тема="тёмная"] {
  color-scheme: dark;
  --фон: #09090b;  --поверх: #111113;  --поверх-2: #18181b;  --вдавлено: #1f1f23;
  --рамка: #27272a;  --рамка-ярче: #3f3f46;
  --текст: #fafafa;  --текст-2: #a1a1aa;  --текст-3: #8b8b94;
  --акцент: #fafafa;  --акцент-ярче: #d4d4d8;  --акцент-фон: #27272a;  --акцент-край: #3f3f46;
  --на-акценте: #18181b;  --ссылка: #7d97ff;
  --добро: #4ade80;  --добро-фон: #052e16;  --добро-край: #14532d;  --добро-знак: #22c55e;
  --тревога: #fbbf24; --тревога-фон: #2b1d05; --тревога-край: #78350f; --тревога-знак: #f59e0b;
  --беда: #f87171;  --беда-фон: #2a0f0f;  --беда-край: #7f1d1d;  --беда-знак: #ef4444;
  --пм-правка: #34d399;  --пм-особый: #fbbf24;  --пм-предложено: #f59e0b;  --пм-подозрение: #a78bfa;
  --гр-1: #3b82f6;  --гр-слабо: #1e3a8a;  --гр-сетка: #1f1f23;  --гр-ось: #27272a;
  --тень-1: 0 1px 2px 0 rgb(0 0 0 / .4);
  --тень-2: 0 4px 6px -1px rgb(0 0 0 / .45);
  --тень-3: 0 20px 25px -5px rgb(0 0 0 / .6), 0 8px 10px -6px rgb(0 0 0 / .5);
  --кольцо: 0 0 0 3px rgb(113 113 122 / .45);
}

/* ── основа ──────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` должен прятать всегда: иначе любое `display` у кнопки или карточки его перебивает. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--фон); color: var(--текст);
  font-family: var(--шрифт); font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.число, td.число, th.число, .счёт, .моно, .итог b { font-variant-numeric: tabular-nums; }
a { color: var(--ссылка); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--рамка-ярче); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--ссылка) 20%, transparent); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── оболочка: боковая панель + холст ──────────────────────────────────────────────────────
   Широкая панель — на доске и в аналитике: значок и подпись. Узкая — на экране разметки: только
   значки, все одного размера и на одной оси. */
.бок {
  position: fixed; inset: 0 auto 0 0; width: var(--бок); z-index: 40;
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 12px 12px;
  background: var(--поверх); border-right: 1px solid var(--рамка);
}
.холст { margin-left: var(--бок); min-height: 100vh; }
body.узко .бок { width: var(--бок-узкий); padding: 14px 8px 10px; align-items: center; }
body.узко .холст { margin-left: var(--бок-узкий); }

/* Знак: чёрный квадрат со значком и слово «Loupe» — без цветных половинок. */
.знак { display: flex; align-items: center; gap: 10px; padding: 2px 6px 16px;
        font-weight: 600; font-size: 15px; letter-spacing: -.02em; color: var(--текст); }
/* Знак — логотип Airun: Loupe — его инструмент. */
.знак .лого { flex: none; width: 26px; height: 26px; display: block; }
.знак .от { font-size: 12px; font-weight: 500; color: var(--текст-3); letter-spacing: 0; margin-left: -4px; }
body.узко .знак { padding: 2px 0 16px; }
body.узко .знак b { display: none; }

.бок nav { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.бок nav a {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  border-radius: 6px; color: var(--текст-2); font-weight: 500; font-size: 14px;
  transition: background .12s, color .12s; text-decoration: none;
}
.бок nav a svg { flex: none; width: 16px; height: 16px; }
.бок nav a:hover { background: var(--вдавлено); color: var(--текст); text-decoration: none; }
.бок nav a.тут { background: var(--вдавлено); color: var(--текст); font-weight: 550; }
body.узко .бок nav { align-items: center; }
body.узко .бок nav a { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 8px; }
body.узко .бок nav a span { display: none; }
body.узко .бок nav a.тут { background: var(--вдавлено); color: var(--текст); }
.бок .раздел { font-size: 12px; font-weight: 500; color: var(--текст-3); padding: var(--ш4) 10px var(--ш1); }
body.узко .бок .раздел { display: none; }
.бок .толкач { flex: 1; }

/* Кто вошёл. Только в панели: «.кто» на экране разметки — ещё и подпись реплики. */
.бок .кто { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px 0 0;
            border-top: 1px solid var(--рамка); }
.бок .кто .лицо-строка { display: flex; align-items: center; gap: 10px; padding: 0 4px; min-width: 0; }
.бок .кто .лицо {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 12px; color: var(--текст-2);
  background: var(--вдавлено); border: 1px solid var(--рамка);
}
.бок .кто .имя { min-width: 0; flex: 1; line-height: 1.3; }
.бок .кто .имя b { display: block; font-size: 13px; font-weight: 550; white-space: nowrap;
                   overflow: hidden; text-overflow: ellipsis; }
.бок .кто .имя span { font-size: 12px; color: var(--текст-3); }
.бок .кто .кнопки { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.бок .кто .кнопки button { width: 100%; height: 32px; min-height: 0; padding: 0; border-radius: 6px;
                           color: var(--текст-3); border: none; background: none; box-shadow: none; }
.бок .кто .кнопки button svg { width: 16px; height: 16px; }
.бок .кто .кнопки button:hover:not(:disabled) { background: var(--вдавлено); color: var(--текст); }
button.язык-кн { font-family: var(--моно); font-size: 11px; font-weight: 600; letter-spacing: .04em; }
body.узко .бок .кто { align-items: center; padding-top: 12px; }
body.узко .бок .кто .лицо-строка { padding: 0; }
body.узко .бок .кто .имя { display: none; }
body.узко .бок .кто .кнопки { grid-template-columns: 1fr; width: 40px; }
body.узко .бок .кто .кнопки button { height: 34px; }

main { max-width: 1240px; margin: 0 auto; padding: var(--ш6) var(--ш6) var(--ш7); }
main.широко { max-width: 1520px; }

/* ── заголовок страницы ──────────────────────────────────────────────────────────────────── */
.заголовок { display: flex; align-items: flex-end; gap: var(--ш4); flex-wrap: wrap;
             margin-bottom: var(--ш6); }
.заголовок .слева { flex: 1; min-width: 240px; }
.заголовок .справа { display: flex; align-items: center; gap: var(--ш2); flex-wrap: wrap; min-width: 0; max-width: 100%; }
h1 { font-size: 24px; line-height: 1.2; margin: 0; font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: 15px; margin: var(--ш6) 0 var(--ш3); font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -.005em; }
.подзаголовок { color: var(--текст-3); margin: 6px 0 0; font-size: 14px; }

/* ── кнопки ──────────────────────────────────────────────────────────────────────────────── */
button, .кнопка {
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ш2);
  padding: 0 14px; min-height: 36px; border-radius: var(--радиус-2);
  border: 1px solid var(--рамка); background: var(--поверх); color: var(--текст);
  box-shadow: var(--тень-1);
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
  white-space: nowrap; text-decoration: none;
}
button:hover:not(:disabled), .кнопка:hover { background: var(--вдавлено); text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
button:focus-visible, .кнопка:focus-visible { outline: none; box-shadow: var(--кольцо); border-color: var(--рамка-ярче); }
button svg { width: 16px; height: 16px; flex: none; }
button.главная, .кнопка.главная {
  background: var(--акцент); border-color: var(--акцент); color: var(--на-акценте); box-shadow: var(--тень-1);
}
button.главная:hover:not(:disabled), .кнопка.главная:hover { background: var(--акцент); opacity: .88; }
button.мягкая { background: var(--вдавлено); color: var(--текст); border-color: transparent; box-shadow: none; }
button.мягкая:hover:not(:disabled) { background: var(--рамка); }
button.тихая { border-color: transparent; background: transparent; box-shadow: none; color: var(--текст-2); }
button.тихая:hover:not(:disabled) { background: var(--вдавлено); color: var(--текст); }
button.опасная { color: var(--беда); }
button.опасная:hover:not(:disabled) { background: var(--беда-фон); border-color: var(--беда-край); }
button.добрая { background: #16a34a; color: #fff; border-color: #16a34a; }
button.добрая:hover:not(:disabled) { background: #16a34a; opacity: .88; }
button.мал { padding: 0 10px; min-height: 30px; font-size: 13px; border-radius: 6px; }
button.крупная { padding: 0 20px; min-height: 42px; font-size: 14.5px; }
button.значок-кн { padding: 0; width: 32px; min-height: 32px; }
button.значок-кн svg { display: block; }

/* ── поля ────────────────────────────────────────────────────────────────────────────────── */
input, select, textarea {
  font: inherit; font-size: 14px; color: var(--текст); background: var(--поверх);
  border: 1px solid var(--рамка); border-radius: var(--радиус-2);
  padding: 6px 12px; min-height: var(--высота-поля); box-shadow: var(--тень-1);
  transition: border-color .12s, box-shadow .12s;
}
textarea { line-height: 1.6; padding: 8px 12px; }
input::placeholder, textarea::placeholder { color: var(--текст-3); }
input:hover, select:hover, textarea:hover { border-color: var(--рамка-ярче); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--рамка-ярче); box-shadow: var(--кольцо); }
select {
  appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
label.поле { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500;
             color: var(--текст); }
input[type=checkbox] { accent-color: var(--акцент); min-height: 0; width: 16px; height: 16px; box-shadow: none;
                       margin: 0 4px 0 0; vertical-align: -3px; cursor: pointer; }
label:has(input[type=checkbox]) { cursor: pointer; user-select: none; }

/* Сегментированный переключатель (shadcn Tabs): серая подложка, выбранный — белая плашка. */
.сегменты { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--радиус-2);
            background: var(--вдавлено); }
.сегменты button { min-height: 28px; padding: 0 12px; font-size: 13px; border: none; font-weight: 500;
                   background: transparent; box-shadow: none; color: var(--текст-3); border-radius: 6px; }
.сегменты button:hover:not(:disabled) { background: transparent; color: var(--текст); }
.сегменты button.тут { background: var(--поверх); color: var(--текст); box-shadow: var(--тень-1); }
.сегменты button .сч { font-size: 12px; color: var(--текст-3); font-weight: 500; }

/* ── карточки ────────────────────────────────────────────────────────────────────────────── */
.карточка {
  background: var(--поверх); border: 1px solid var(--рамка); border-radius: var(--радиус);
  box-shadow: var(--тень-1); min-width: 0; max-width: 100%;
}
.карточка pre, .карточка code { font-family: var(--моно); font-size: .9em;
  background: var(--вдавлено); border-radius: 4px; padding: 1px 5px; }
.карточка pre { padding: var(--ш3); overflow-x: auto; white-space: pre; }
.карточка > .шапка { display: flex; align-items: center; gap: var(--ш3); flex-wrap: wrap;
                     padding: 14px var(--ш5); border-bottom: 1px solid var(--рамка); }
.карточка > .шапка h3 { flex: 1; }
.карточка > .нутро { padding: var(--ш4) var(--ш5); }
.сетка { display: grid; gap: var(--ш3); }
.сетка.коллекции { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.сетка.пакеты    { grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); }
.сетка.две { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--ш4); }

/* ── плитки-показатели ───────────────────────────────────────────────────────────────────── */
.итоги { display: grid; gap: var(--ш3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
         margin-bottom: var(--ш5); }
.итог { padding: var(--ш4) var(--ш5); position: relative; overflow: hidden; }
.итог .подпись { display: flex; align-items: center; gap: 8px; color: var(--текст-2);
                 font-size: 13px; font-weight: 500; }
.итог .подпись i { width: 6px; height: 6px; border-radius: 50%; background: var(--текст-3); }
.итог b { display: block; margin-top: 6px; font-size: 26px; font-weight: 600; letter-spacing: -.03em;
          line-height: 1.15; }
.итог b small { font-size: 13px; font-weight: 500; color: var(--текст-3); letter-spacing: 0; }
.итог .снизу { margin-top: 4px; font-size: 12px; color: var(--текст-3); }

/* ── полоса прогресса ────────────────────────────────────────────────────────────────────── */
.полоса { height: 6px; border-radius: 99px; background: var(--вдавлено); overflow: hidden; }
.полоса i { display: block; height: 100%; border-radius: 99px; background: var(--акцент);
            transition: width .45s cubic-bezier(.4,0,.2,1); }
.полоса.готова i { background: var(--добро-знак); }
.полоса.тонкая { height: 4px; }
.полоска { display: inline-block; height: 6px; border-radius: 99px; background: var(--вдавлено);
           width: 88px; vertical-align: middle; overflow: hidden; }
.полоска i { display: block; height: 100%; background: var(--акцент); border-radius: 99px; }

/* ── значки-статусы (shadcn Badge) ───────────────────────────────────────────────────────── */
.значок {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; min-height: 22px;
  border-radius: 6px; font-size: 12px; font-weight: 500;
  background: var(--вдавлено); color: var(--текст-2); border: 1px solid var(--рамка); white-space: nowrap;
}
.значок::before { content: none; }
.значок.свободен, .значок.добро { background: var(--добро-фон); color: var(--добро); border-color: var(--добро-край); }
.значок.занят, .значок.акцент { background: var(--поверх); color: var(--текст); border-color: var(--рамка-ярче); }
.значок.готов   { background: var(--вдавлено); color: var(--текст-3); border-color: transparent; }
.значок.тревога { background: var(--тревога-фон); color: var(--тревога); border-color: var(--тревога-край); }
.значок.молчит, .значок.беда { background: var(--беда-фон); color: var(--беда); border-color: var(--беда-край); }
.значок.моё { background: var(--акцент); color: var(--на-акценте); border-color: var(--акцент); }
.значок.точка::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.значок.живой::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--добро-знак);
                        animation: пульс 1.8s ease-in-out infinite; }
@keyframes пульс { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ── баннер (shadcn Alert) ───────────────────────────────────────────────────────────────── */
.баннер { display: flex; align-items: center; gap: var(--ш4); flex-wrap: wrap;
          padding: var(--ш4) var(--ш5); border-radius: var(--радиус); margin-bottom: var(--ш5);
          background: var(--поверх); border: 1px solid var(--рамка); box-shadow: var(--тень-1); }
.баннер .значок-круг { flex: none; width: 36px; height: 36px; border-radius: 8px; display: grid;
                       place-items: center; background: var(--вдавлено); color: var(--текст);
                       border: 1px solid var(--рамка); }
.баннер .значок-круг svg { width: 18px; height: 18px; }
.баннер .что { flex: 1; min-width: 220px; }
.баннер .что b { font-size: 14px; font-weight: 600; }
.баннер .что div { color: var(--текст-3); font-size: 13px; margin-top: 2px; }
.баннер .полоса { width: 100%; }
.баннер.тревога { background: var(--тревога-фон); border-color: var(--тревога-край); }
.баннер.тревога .значок-круг { background: transparent; color: var(--тревога); border-color: var(--тревога-край); }

/* ── таблицы ─────────────────────────────────────────────────────────────────────────────── */
.прокрутка { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
th {
  text-align: left; font-weight: 500; font-size: 12.5px; color: var(--текст-3);
  height: 40px; padding: 0 var(--ш3); background: var(--поверх); border-bottom: 1px solid var(--рамка);
  position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
th:first-child { padding-left: var(--ш5); }  td:first-child { padding-left: var(--ш5); }
th:last-child { padding-right: var(--ш5); }  td:last-child { padding-right: var(--ш5); }
td { padding: 11px var(--ш3); border-bottom: 1px solid var(--рамка); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--поверх-2); }
tbody tr.можно { cursor: pointer; }
td.число, th.число { text-align: right; white-space: nowrap; }

/* ── мелочи ──────────────────────────────────────────────────────────────────────────────── */
.тускло { color: var(--текст-2); }
.бледно { color: var(--текст-3); }
.мелко { font-size: 13px; }
.моно { font-family: var(--моно); font-size: 12.5px; }
.ряд { display: flex; align-items: center; gap: var(--ш2); flex-wrap: wrap; }
.толкач { flex: 1; }
.пусто { padding: var(--ш7) var(--ш5); text-align: center; color: var(--текст-3); }
.ошибка { color: var(--беда); background: var(--беда-фон); border: 1px solid var(--беда-край);
          padding: var(--ш2) var(--ш3); border-radius: var(--радиус-2); font-size: 13px; }
kbd { font-family: var(--моно); font-size: 11px; font-weight: 500; padding: 0 5px; min-width: 20px;
      display: inline-block; text-align: center;
      border-radius: 4px; border: 1px solid var(--рамка); background: var(--вдавлено);
      color: var(--текст-2); line-height: 18px; }
button.главная kbd { background: color-mix(in srgb, var(--на-акценте) 16%, transparent);
                     border-color: color-mix(in srgb, var(--на-акценте) 24%, transparent);
                     color: var(--на-акценте); }
.низ { display: flex; gap: var(--ш2); align-items: center; justify-content: center;
       flex-wrap: wrap; margin: var(--ш5) 0 var(--ш3); }
.низ input[type=number] { width: 78px; text-align: center; }

/* ── вкладки (подчёркнутые, как навигация Vercel) ────────────────────────────────────────── */
.вкладки { display: flex; gap: var(--ш1); border-bottom: 1px solid var(--рамка);
           margin-bottom: var(--ш5); overflow-x: auto; }
.вкладки button { border: none; background: none; box-shadow: none; border-radius: 0;
                  min-height: 40px; padding: 0 var(--ш3); color: var(--текст-3); font-weight: 500;
                  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.вкладки button:hover:not(:disabled) { background: none; color: var(--текст); }
.вкладки button.тут { color: var(--текст); border-bottom-color: var(--текст); }
.вкладки button .сч { font-size: 11px; font-weight: 600; background: var(--беда-фон); color: var(--беда);
                      border-radius: 99px; padding: 0 6px; line-height: 18px; }
.лист { display: none; }  .лист.видно { display: block; }

/* ── уровень доверия ─────────────────────────────────────────────────────────────────────── */
.доверие { display: inline-flex; align-items: center; gap: 8px; }
.доверие .шкала-д { width: 64px; height: 6px; border-radius: 99px; overflow: hidden;
                    background: var(--вдавлено); }
.доверие .шкала-д i { display: block; height: 100%; border-radius: 99px; }
.доверие.высокий .шкала-д i { background: var(--добро-знак); }
.доверие.средний .шкала-д i { background: var(--тревога-знак); }
.доверие.низкий .шкала-д i { background: var(--беда-знак); }
.доверие b { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 2ch; }
.доверие .ур { white-space: nowrap; font-size: 12px; font-weight: 500; }
.доверие.высокий .ур { color: var(--добро); }  .доверие.средний .ур { color: var(--тревога); }
.доверие.низкий .ур { color: var(--беда); }   .доверие.мало { opacity: .6; }

/* ── графики ─────────────────────────────────────────────────────────────────────────────── */
.график { position: relative; }
.график svg { display: block; width: 100%; overflow: visible; }
.график .ось text, .график text.ось { fill: var(--текст-3); font-size: 11px; font-family: var(--шрифт); }
.график .сетка-л { stroke: var(--гр-сетка); stroke-width: 1; }
.график .база { stroke: var(--гр-ось); stroke-width: 1; }
.график .столб { fill: var(--гр-1); }
.график .столб.крит { fill: var(--гр-крит); }
.график .столб.тихий { fill: var(--гр-слабо); }
.график .мишень { fill: transparent; cursor: default; }
.график .мишень:hover + .столб, .график g.св:hover .столб { opacity: .82; }
.подсказка-гр {
  position: absolute; pointer-events: none; z-index: 5; padding: 6px 10px; border-radius: 6px;
  background: var(--поверх); color: var(--текст); border: 1px solid var(--рамка);
  font-size: 12px; line-height: 1.45; box-shadow: var(--тень-2);
  white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .1s;
}
.подсказка-гр.видна { opacity: 1; }
.подсказка-гр b { font-weight: 600; }
.тепло { display: grid; grid-template-columns: 28px repeat(24, 1fr); gap: 2px; font-size: 10.5px;
         color: var(--текст-3); }
.тепло div { aspect-ratio: 1; border-radius: 3px; background: var(--вдавлено); min-width: 0; }
.тепло .п { aspect-ratio: auto; background: none; display: flex; align-items: center; }
.тепло .ч { aspect-ratio: auto; background: none; text-align: center; }

/* ── загрузка (shadcn Skeleton): ровное мерцание, без бегущего блика ─────────────────────── */
.скелет {
  background: var(--вдавлено); animation: мерцание 1.6s ease-in-out infinite;
  border-radius: var(--радиус); color: transparent !important; border-color: transparent !important;
  box-shadow: none !important;
}
@keyframes мерцание { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ── всплывающее уведомление (как Sonner) ────────────────────────────────────────────────── */
.тост {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 8px); z-index: 99;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--радиус);
  background: var(--поверх); color: var(--текст); border: 1px solid var(--рамка); box-shadow: var(--тень-3);
  font-weight: 500; font-size: 13.5px; max-width: min(560px, 90vw); pointer-events: none;
  opacity: 0; transition: opacity .18s, transform .18s;
}
.тост.видно { opacity: 1; transform: translate(-50%, 0); }
.тост.беда { background: var(--беда-фон); color: var(--беда); border-color: var(--беда-край); }
.тост.тревога { background: var(--тревога-фон); color: var(--тревога); border-color: var(--тревога-край); }

/* ── окно поверх экрана (shadcn Dialog) ──────────────────────────────────────────────────── */
.шторка { position: fixed; inset: 0; z-index: 60; display: none; place-items: center;
          padding: var(--ш5); background: rgb(0 0 0 / .5); }
.шторка.видна { display: grid; }
.шторка .окно { width: min(680px, 100%); max-height: 88vh; display: flex; flex-direction: column;
                background: var(--поверх); border-radius: var(--радиус-3); box-shadow: var(--тень-3);
                border: 1px solid var(--рамка); overflow: hidden; }
.шторка .окно > header { padding: var(--ш5) var(--ш5) var(--ш4); border-bottom: 1px solid var(--рамка); }
.шторка .окно > header h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.шторка .окно > .нутро { padding: var(--ш4) var(--ш5); overflow-y: auto; }
.шторка .окно > footer { display: flex; gap: var(--ш2); align-items: center; flex-wrap: wrap;
                         padding: var(--ш4) var(--ш5); border-top: 1px solid var(--рамка);
                         background: var(--поверх-2); }

/* ── узкие экраны ────────────────────────────────────────────────────────────────────────── */
/* Панель превращается в верхнюю строку: знак, значки разделов, профиль. */
@media (max-width: 900px) {
  .бок, body.узко .бок {
    position: sticky; top: 0; inset: auto; width: 100%; height: 56px; flex-direction: row; gap: var(--ш1);
    align-items: center; padding: 0 var(--ш3); border-right: none; border-bottom: 1px solid var(--рамка);
  }
  .холст, body.узко .холст { margin-left: 0; }
  .знак { padding: 0; }  .знак b { display: none; }
  .бок nav { flex-direction: row; width: auto; }
  .бок nav a { padding: 8px 10px; }  .бок nav a span { display: none; }
  .бок .раздел, .бок .толкач { display: none; }
  .бок .кто, body.узко .бок .кто { flex-direction: row; border-top: none; margin: 0 0 0 auto;
                                   padding: 0; width: auto; align-items: center; }
  .бок .кто .имя { display: none; }
  .бок .кто .кнопки, body.узко .бок .кто .кнопки { grid-template-columns: repeat(4, 36px); width: auto; }
  body.узко .бок nav a, .бок nav a { width: 40px; height: 40px; padding: 0; justify-content: center; }
  main { padding: var(--ш5) var(--ш4) var(--ш6); }
  h1 { font-size: 22px; }
  /* Разделов шесть: на узком телефоне строка значков прокручивается, а не распирает страницу. */
  .бок nav { min-width: 0; flex-shrink: 1; overflow-x: auto; scrollbar-width: none; }
  .бок .кто { flex-shrink: 0; }
  .сегменты { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .сегменты button { flex-shrink: 0; }
  .сетка.две { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .бок .знак { display: none; }
  body.узко .бок nav a, .бок nav a { width: 36px; }
  .бок .кто .кнопки, body.узко .бок .кто .кнопки { grid-template-columns: repeat(4, 32px); }
}
@media (max-width: 620px) {
  body { font-size: 14px; }
  main { padding: var(--ш4) var(--ш3) var(--ш6); }
  .сетка.коллекции, .сетка.пакеты { grid-template-columns: 1fr; }
  .итоги { grid-template-columns: repeat(2, 1fr); }
  .итог b { font-size: 21px; }
  .подсказки { display: none; }
}
@media print {
  .бок, .действия, .подсказки, .низ { display: none !important; }
  .холст { margin: 0; }
  body { background: #fff; color: #000; }
  .карточка { box-shadow: none; border: 1px solid #ccc; }
}

/* Сенсорный экран: палец — не курсор. Мелкие кнопки (в строках таблиц, на странице проверки)
   получают высоту, в которую можно попасть, не задев соседнюю. */
@media (pointer: coarse) {
  button.мал, .кнопка.мал, .сегменты button { min-height: 38px; padding-inline: 12px; }
  .строка .действия-строки { gap: var(--ш3); }
  a.мелко { display: inline-block; padding-block: 9px; }
}

/* Поле пароля с кнопкой-глазом: кнопка внутри поля справа, текст под неё не заходит. */
.пароль-поле { position: relative; display: block; }
.пароль-поле input { width: 100%; padding-right: 44px; }
.пароль-поле .глаз { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; min-height: 0; padding: 0; display: grid; place-items: center;
  background: none; border: none; box-shadow: none; color: var(--текст-3); border-radius: 8px; cursor: pointer; }
.пароль-поле .глаз:hover { color: var(--текст); background: var(--вдавлено); }
.пароль-поле .глаз:focus-visible { outline: none; box-shadow: var(--кольцо); }
.пароль-поле input::-ms-reveal { display: none; }

/* Окно без шапки и подвала (вход заново, смена пароля, «открыт в другой вкладке»): поля внутри. */
.шторка .окно.простое { padding: var(--ш5) var(--ш6) var(--ш6); gap: var(--ш3); overflow-y: auto; }
.шторка .окно.простое h2 { margin: 0; font-size: 17px; font-weight: 600; }
.шторка .окно.простое p { margin: 0; }