/* Панель «Вет Кап» в духе macOS 26 (Liquid Glass), 26.10.2026.
   Фон — мягкие цветовые пятна в фирменных индиго и розовом: стеклу нужно,
   что преломлять. Поверх — полупрозрачные слои с размытием, светлой кромкой
   и бликом сверху: шапка плавает над страницей, карточки — стеклянные листы.
   Элементы — как в системе: кнопки-капсулы, всплывающие меню со стрелками,
   переключатели и флажки, раскрывающиеся блоки с треугольником, фокус —
   кольцо акцентного цвета. Шрифт системный: на Mac это SF Pro. */
:root {
  --accent: #5b5bd6;          /* индиго vetkap, высветленный под системный акцент */
  --accent-strong: #4646b8;
  --pink: #de60be;
  --ink: #1d1d1f;
  --muted: #6e6e80;
  --line: rgba(60, 60, 90, .12);
  --frame: rgba(60, 60, 90, .18);
  --wall-1: #e9e7ff; --wall-2: #ffe3f4; --wall-3: #dff1ff; --wall-base: #f5f5fa;
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-edge: rgba(255, 255, 255, .85);
  --glass-shine: rgba(255, 255, 255, .55);
  --fill: rgba(118, 118, 128, .10);   /* подложка полей и плиток, как systemFill */
  --fill-hover: rgba(118, 118, 128, .16);
  --field: rgba(255, 255, 255, .72);
  --link: #3a5ccc;
  --ok: #248a3d;   --ok-bg: rgba(52, 199, 89, .16);
  --warn: #9a6200; --warn-bg: rgba(255, 159, 10, .18);
  --err: #c9302c;  --err-bg: rgba(255, 59, 48, .14);
  --shadow: 0 12px 40px rgba(40, 40, 90, .10), 0 2px 6px rgba(40, 40, 90, .06);
  --shadow-soft: 0 1px 2px rgba(40, 40, 90, .08);
  --ring: 0 0 0 3.5px color-mix(in srgb, var(--accent) 38%, transparent);
  --blur: blur(28px) saturate(180%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI",
          "Open Sans", Roboto, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
             "Segoe UI", "Open Sans", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #8e8cff; --accent-strong: #a4a2ff; --pink: #f08bd6;
    --ink: #f2f2f7; --muted: #a1a1b5; --line: rgba(255, 255, 255, .09);
    --frame: rgba(255, 255, 255, .14);
    --wall-1: #2a2160; --wall-2: #4a1d47; --wall-3: #0f2f4d; --wall-base: #0d0d18;
    --glass: rgba(40, 40, 58, .52); --glass-strong: rgba(48, 48, 66, .74);
    --glass-edge: rgba(255, 255, 255, .14); --glass-shine: rgba(255, 255, 255, .08);
    --fill: rgba(120, 120, 128, .22); --fill-hover: rgba(120, 120, 128, .30);
    --field: rgba(20, 20, 32, .55); --link: #8fb0ff;
    --ok: #4fd06d; --ok-bg: rgba(48, 209, 88, .18);
    --warn: #ffbf47; --warn-bg: rgba(255, 159, 10, .2);
    --err: #ff6b62; --err-bg: rgba(255, 69, 58, .2);
    --shadow: 0 16px 48px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --accent: #8e8cff; --accent-strong: #a4a2ff; --pink: #f08bd6;
  --ink: #f2f2f7; --muted: #a1a1b5; --line: rgba(255, 255, 255, .09);
  --frame: rgba(255, 255, 255, .14);
  --wall-1: #2a2160; --wall-2: #4a1d47; --wall-3: #0f2f4d; --wall-base: #0d0d18;
  --glass: rgba(40, 40, 58, .52); --glass-strong: rgba(48, 48, 66, .74);
  --glass-edge: rgba(255, 255, 255, .14); --glass-shine: rgba(255, 255, 255, .08);
  --fill: rgba(120, 120, 128, .22); --fill-hover: rgba(120, 120, 128, .30);
  --field: rgba(20, 20, 32, .55); --link: #8fb0ff;
  --ok: #4fd06d; --ok-bg: rgba(48, 209, 88, .18);
  --warn: #ffbf47; --warn-bg: rgba(255, 159, 10, .2);
  --err: #ff6b62; --err-bg: rgba(255, 69, 58, .2);
  --shadow: 0 16px 48px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 15px/1.5 var(--font);
       -webkit-font-smoothing: antialiased; letter-spacing: -.005em;
       background-color: var(--wall-base);
       background-image:
         radial-gradient(60vmax 50vmax at 8% -6%, var(--wall-1), transparent 62%),
         radial-gradient(52vmax 46vmax at 102% 12%, var(--wall-2), transparent 60%),
         radial-gradient(70vmax 60vmax at 40% 112%, var(--wall-3), transparent 64%);
       background-attachment: fixed; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 10px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--ink);
             text-wrap: balance; margin: 0; line-height: 1.2; letter-spacing: -.02em; }
h1 { font-size: 30px; }
h2 { font-size: 17px; letter-spacing: -.01em; }
h3 { font-size: 15px; }
p { margin: 0; }
code, .mono { font-family: var(--mono); font-size: 12.5px; }

/* --- Стекло: общий рецепт слоя -------------------------------------------- */
.top .inner, .card, .flash, .company, .people li, .todo li, details, .book, .progress {
  position: relative; }
.top .inner, .card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-shine);
}
/* Блик по верхней кромке — как свет на толстом стекле. */
.top .inner::before, .card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-shine), transparent 42%);
  opacity: .9; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top .inner, .card { background: var(--glass-strong); }
}

/* --- Шапка: плавающая стеклянная панель, как тулбар macOS ------------------ */
.top { position: sticky; top: 0; z-index: 10; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 0
       max(16px, env(safe-area-inset-left, 0px)); }
.top .inner { max-width: 1040px; margin: 0 auto; display: flex; align-items: center;
              justify-content: space-between; gap: 16px; padding: 8px 10px 8px 14px;
              border-radius: 22px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
         min-width: 0; position: relative; }
.brand img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 6px rgba(60, 60, 140, .25)); }
.brand .words { display: grid; gap: 0; min-width: 0; }
.brand .name { font: 700 17px/1.15 var(--display); letter-spacing: -.01em; }
.brand .sub { font-size: 12px; line-height: 1.25; color: var(--muted); }
.top form { position: relative; }

main { max-width: 1040px; margin: 0 auto; display: grid; gap: 18px;
       padding-block: 24px 56px;
       padding-left: max(16px, env(safe-area-inset-left, 0px));
       padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             flex-wrap: wrap; padding: 4px 6px 0; }
.page-head .lead { color: var(--muted); margin-top: 6px; max-width: 70ch; }
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500;
        text-decoration: none; color: var(--accent); margin-bottom: 6px; }

/* --- Карточки ---------------------------------------------------------------- */
.card { border-radius: 24px; padding: 22px 24px; display: grid; gap: 14px; min-width: 0;
        align-content: start; }
.card > * { position: relative; }
.card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                 flex-wrap: wrap; }
.card.narrow { max-width: 420px; width: 100%; margin: 8vh auto 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.cols > * { min-width: 0; }
.cols > .wide, .cols > .wide ~ .card { grid-column: 1 / -1; }
.muted { color: var(--muted); }
small, .hint { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.danger-zone { border-color: color-mix(in srgb, var(--err) 30%, var(--glass-edge)); }

/* --- Список компаний: строки как в списке Finder ------------------------------ */
.companies { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.company { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px;
           align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--fill);
           border: 1px solid transparent; transition: background .15s ease, transform .15s ease; }
/* Вся строка компании — ссылка на её карточку, а не только название. */
.company a.title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.company:has(a.title) { cursor: pointer; }
.company:hover { background: var(--fill-hover); }
.company:active { transform: scale(.995); }
.company .title { font: 600 16px/1.3 var(--display); color: var(--ink); text-decoration: none;
                  min-width: 0; overflow-wrap: anywhere; }
a.title:hover { color: var(--accent); }
.company .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.empty { text-align: center; padding: 28px 12px; color: var(--muted); display: grid; gap: 14px;
         justify-items: center; }

/* --- Чипы состояния: капсулы с точкой ----------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
        font-size: 12px; font-weight: 600; background: var(--fill); color: var(--muted);
        white-space: nowrap; font-variant-numeric: tabular-nums; border: 0; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.plain::before { display: none; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.error { background: var(--err-bg); color: var(--err); }
.chip.run { background: var(--warn-bg); color: var(--warn); }
.chip.run::before { animation: pulse 1.2s ease-in-out infinite; }
.chip.badge { color: #fff; background: linear-gradient(100deg, var(--pink), var(--accent));
              box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.chip.badge::before { display: none; }
@keyframes pulse { 50% { opacity: .25; } }

/* --- Кнопки: капсулы, как в macOS 26 ------------------------------------------- */
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
                  min-height: 34px; padding: 6px 16px; border-radius: 999px;
                  border: 0; background: var(--glass-strong);
                  color: var(--ink); font: 500 14px/1 var(--font); cursor: pointer;
                  text-decoration: none; letter-spacing: -.005em;
                  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
                  box-shadow: 0 0 0 .5px var(--frame), var(--shadow-soft), inset 0 1px 0 var(--glass-shine);
                  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, filter .15s ease; }
button:hover, .button:hover { background: color-mix(in srgb, var(--glass-strong) 80%, var(--accent) 6%); }
button:active, .button:active { transform: scale(.97); filter: brightness(.96); }
.primary { border-color: transparent; color: #fff;
           background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
           box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent),
                       inset 0 1px 0 rgba(255, 255, 255, .35); }
.primary:hover { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }
.danger { color: var(--err); }
.danger:hover { background: var(--err-bg); }
.link { border: 0; background: none; padding: 0; min-height: 0; color: var(--link); box-shadow: none;
        font: inherit; font-size: 14px; -webkit-backdrop-filter: none; backdrop-filter: none;
        text-decoration: none; border-radius: 6px; }
.link:hover { background: none; text-decoration: underline; }
.link.danger { color: var(--err); }
button:disabled { opacity: .45; cursor: default; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --- Формы ----------------------------------------------------------------------- */
form.stack { display: grid; gap: 18px; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
/* float выносит подпись из кромки fieldset: иначе разделитель проходит через неё. */
legend { float: left; width: 100%; font: 600 15px/1.3 var(--display); color: var(--ink);
         padding: 0; margin: 0; display: flex; align-items: baseline; gap: 8px; }
legend .opt { font: 400 12.5px var(--font); color: var(--muted); }
.step { display: grid; gap: 12px; padding-top: 18px; box-shadow: 0 -1px 0 var(--line); }
.step:first-of-type { box-shadow: none; padding-top: 0; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
label { display: grid; gap: 6px; font-weight: 500; font-size: 13.5px; min-width: 0;
        align-content: start; color: var(--ink); }
input, select, textarea { width: 100%; padding: 8px 12px; font: 400 14.5px/1.4 var(--font);
        color: var(--ink); background: var(--field); border: 1px solid var(--frame);
        border-radius: 10px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
        transition: border-color .15s ease, box-shadow .15s ease; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent);
        box-shadow: var(--ring); }
/* Всплывающее меню macOS: поле со сдвоенной стрелкой в акцентном квадратике справа. */
select { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
         background-repeat: no-repeat; background-position: right 8px center;
         background-size: 18px 18px;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='5' fill='%235b5bd6'/%3E%3Cpath d='M6 7.2 9 4.6l3 2.6M6 10.8 9 13.4l3-2.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Выбор задания: вариант — строка с названием и пояснением, когда он нужен. */
.choices label { grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px;
        padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
        cursor: pointer; font-weight: 400; }
.choices label:has(input:checked) { border-color: var(--accent); box-shadow: var(--ring); }
.choices input[type="radio"] { width: 16px; height: 16px; margin: 2px 0 0; padding: 0;
        grid-row: span 2; accent-color: var(--accent); box-shadow: none; cursor: pointer; }
.choices b { font-weight: 600; }
.choices small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline input, form.inline select { width: auto; flex: 1 1 220px; min-width: 0; max-width: 100%; }

/* Флажок macOS: скруглённый квадрат, акцентная заливка с галочкой. */
input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
        flex: none; padding: 0; margin: 0; border-radius: 4px; border: 1px solid var(--frame);
        background: var(--field); cursor: pointer; display: inline-grid; place-content: center;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06); }
input[type="checkbox"]::after { content: ""; width: 8px; height: 5px; margin-top: -2px;
        border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0);
        transition: transform .12s ease; }
input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; }
label.check input { width: 16px; }

/* Переключатель macOS: капсула с белым бегунком, зелёная во включённом виде. */
.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px;
          cursor: pointer; user-select: none; }
.switch input[type="checkbox"] { position: relative; display: block; width: 42px; height: 25px;
        border-radius: 999px; border: 0; background: var(--fill-hover);
        box-shadow: inset 0 0 0 1px var(--line); transition: background .2s ease; }
.switch input[type="checkbox"]::after { position: absolute; top: 2px; left: 2px; width: 21px;
        height: 21px; margin: 0; border: 0; border-radius: 50%; background: #fff; transform: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .06);
        transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), width .15s ease; }
.switch input[type="checkbox"]:active::after { width: 25px; }
.switch input[type="checkbox"]:checked { background: #34c759; box-shadow: none; }
.switch input[type="checkbox"]:checked::after { transform: translateX(17px); }
.switch input[type="checkbox"]:checked:active::after { transform: translateX(13px); }
.switch input[type="checkbox"]:disabled { opacity: .5; cursor: default; }
.switch input[type="checkbox"]:focus-visible { box-shadow: var(--ring); }

/* --- Почты чипами ------------------------------------------------------------------ */
.emails { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px;
          padding: 5px 7px; border: 1px solid var(--frame); border-radius: 10px;
          background: var(--field); cursor: text; }
.emails:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.emails input { border: 0; box-shadow: none; padding: 5px; flex: 1 1 200px; min-width: 120px;
                background: transparent; }
.emails input:focus { box-shadow: none; }
.email { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px;
         border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent);
         color: var(--ink); font-size: 13.5px; font-weight: 400; max-width: 100%;
         overflow-wrap: anywhere; }
.roles .email { padding-right: 11px; }
.email.bad { background: var(--err-bg); color: var(--err); }
.email button { min-height: 0; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
                background: transparent; color: inherit; font: 400 15px/1 var(--font);
                box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.email button:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.roles { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- Сообщения: стеклянные плашки с цветной подсветкой ------------------------------ */
.flash { padding: 12px 16px; border-radius: 16px; font-weight: 500; background: var(--ok-bg);
         color: var(--ok); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
         border: 1px solid color-mix(in srgb, var(--ok) 22%, transparent); }
.flash.error { background: var(--err-bg); color: var(--err);
               border-color: color-mix(in srgb, var(--err) 22%, transparent); }
.flash.note { background: var(--warn-bg); color: var(--warn);
              border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.flash ul { margin: 6px 0; padding-left: 20px; }

/* --- Ссылки на таблицы: плитки ------------------------------------------------------- */
.books { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.book { display: grid; gap: 3px; padding: 13px 15px; border-radius: 16px; text-decoration: none;
        background: var(--fill); color: var(--ink); border: 1px solid transparent;
        transition: background .15s ease, transform .15s ease; }
.book:hover { background: var(--fill-hover); }
.book:active { transform: scale(.98); }
.book b { font: 600 15px/1.3 var(--display); color: var(--accent); }
.book span { font-size: 12px; color: var(--muted); }

/* --- Шаги задания ------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 6px 0;
            align-items: start; }
.steps .dot { width: 14px; height: 14px; margin-top: 4px; border-radius: 50%;
              border: 2px solid var(--frame); background: var(--field); }
.steps .ok .dot { background: #34c759; border-color: #34c759; }
.steps .error .dot { background: #ff3b30; border-color: #ff3b30; }
.steps .running .dot { border-color: #ff9f0a; background: var(--warn-bg);
                       animation: pulse 1.2s ease-in-out infinite; }
.steps .state { color: var(--muted); font-size: 12.5px; }

/* --- Ключи: сгруппированный список, как в Системных настройках ------------------- */
.kv { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 0; margin: 0;
      border-radius: 14px; overflow: hidden; background: var(--fill); }
.kv dt, .kv dd { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
.kv dt { color: var(--ink); font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.kv dt small { font-weight: 400; font-size: 11px; margin-top: 1px; }
.kv dd { margin: 0; overflow-wrap: anywhere; font-size: 14px; }
.kv dd small { display: inline; }

/* --- Инструкция подключения Google --------------------------------------------------- */
.guide { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.guide li { padding-left: 4px; }
.guide li::marker { font-weight: 700; color: var(--accent); }
.guide b { display: block; }
.guide .copy { margin-top: 6px; }

/* --- Раскрывающиеся блоки: треугольник, как в Finder ------------------------------- */
details { border-radius: 14px; padding: 9px 14px; background: var(--fill); }
details[open] { padding-bottom: 14px; }
summary { cursor: pointer; font: 500 14px/1.4 var(--font); color: var(--ink); list-style: none;
          display: flex; align-items: center; gap: 8px; border-radius: 8px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ""; width: 0; height: 0; flex: none; border-style: solid;
                  border-width: 4.5px 0 4.5px 7px;
                  border-color: transparent transparent transparent var(--muted);
                  transition: transform .18s ease; }
details[open] > summary::before { transform: rotate(90deg); }
details > *:not(summary) { margin-top: 12px; }
pre { margin: 0; padding: 12px 14px; border-radius: 12px;
      background: color-mix(in srgb, var(--wall-base) 70%, transparent);
      font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
      max-height: 360px; overflow: auto; }
.copy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copy code { padding: 6px 10px; border-radius: 8px; background: var(--fill);
             overflow-wrap: anywhere; min-width: 0; }
.copy button { min-height: 28px; padding: 4px 12px; font-size: 12.5px; }

/* --- Получатели Telegram и ссылки-приглашения ------------------------------------- */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-radius: 14px;
          overflow: hidden; background: var(--fill); }
.people li { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px;
             flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.people li:last-child { border-bottom: 0; }
.people li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.people form { margin: 0; }
.people button { min-height: 28px; padding: 4px 12px; font-size: 12.5px; }
details .people { background: transparent; }

/* --- Таблицы: список в стиле macOS, чередование строк ------------------------------ */
.table-wrap { overflow-x: auto; margin: 12px 0; border-radius: 14px; background: var(--fill); }
table.groups, table.journal { width: 100%; border-collapse: collapse; }
table.groups { font-size: 13.5px; }
table.journal { font-size: 12.5px; }
table.groups th, table.journal th { text-align: left; color: var(--muted); font-weight: 600;
        font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.groups td, table.journal td { padding: 6px 10px; vertical-align: middle; }
table.journal td { vertical-align: top; overflow-wrap: anywhere; }
table.groups tbody tr:nth-child(even) td, table.journal tbody tr:nth-child(even) td {
        background: var(--fill); }
table.groups .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.groups tr.bad td { background: var(--err-bg); }
table.groups select { width: 100%; min-width: 220px; padding-block: 5px; }
table.journal tr.bad td { background: var(--err-bg); color: var(--err); }
table.journal tr.warn td { background: var(--warn-bg); color: var(--warn); }
.nowrap { white-space: nowrap; }
details.raw { margin-top: 6px; }

/* --- Ход загрузки истории: тонкий индикатор macOS ---------------------------------- */
.progress { margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px; background: var(--fill); }
.progress-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.progress-head span { color: var(--muted); }
.bar { height: 6px; border-radius: 999px; background: var(--fill-hover); margin: 10px 0 6px;
       overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 999px; background: var(--accent);
            transition: width .4s; }
.progress-note { margin: 0; font-size: 12.5px; color: var(--muted); }
.warn-text { color: var(--warn); }

/* --- Что осталось сделать: круглые флажки, как в «Напоминаниях» -------------------- */
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-radius: 14px;
        overflow: hidden; background: var(--fill); }
.todo li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px;
           border-bottom: 1px solid var(--line); }
.todo li:last-child { border-bottom: 0; }
.todo .mark { width: 20px; height: 20px; flex: none; border-radius: 50%;
              border: 1.5px solid color-mix(in srgb, var(--muted) 60%, transparent);
              display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
              font-size: 11px; color: #fff; }
.todo li.done .mark { border-color: var(--accent); background: var(--accent); }
.todo li.done .what { color: var(--muted); }
.todo .what { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.todo .what a { color: var(--ink); text-decoration: none; }
.todo .what a:hover { color: var(--accent); }
.todo .what a::after { content: " ›"; color: var(--muted); }
.todo form { margin: 0; }
.note-inline { background: var(--warn-bg); color: var(--warn); border-radius: 12px; padding: 9px 12px;
               font-size: 13.5px; margin: 10px 0 0; }
ol.plain { padding-left: 20px; display: grid; gap: 8px; margin: 8px 0; }
ol.plain .copy { margin: 6px 0; }

@media (max-width: 560px) {
  h1 { font-size: 25px; }
  .card { padding: 18px; border-radius: 20px; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt { border-bottom: 0; padding-bottom: 0; }
  .brand img { width: 34px; height: 34px; }
  .brand .name { font-size: 16px; }
  .brand .sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .top .inner, .card, .flash, button, .button { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .top .inner, .card { background: var(--glass-strong); }
}

/* --- Подключение «Данных» к дашбордам DataLens (01.11.2026) ---------------------
   Схемы интерфейса DataLens нарисованы, а не сняты: тёмная тема DataLens,
   нужная кнопка обведена акцентным кольцом. Под ними — карта: строка списка
   в DataLens → лист «Данных» → ссылка → галочка. */
.key { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 6px; text-align: center;
       font: 600 12px/1.7 var(--font); background: var(--fill); box-shadow: inset 0 -1px 0 var(--line); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dl-progress { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--fill); }
.dl-progress-text { font-size: 14px; font-variant-numeric: tabular-nums; }
.dl-progress-text b { font: 600 20px/1 var(--display); }
.dl-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.dl-bar span { display: block; height: 100%; border-radius: inherit;
               background: linear-gradient(90deg, var(--pink), var(--accent)); transition: width .35s ease; }

.dl-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px;
          grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dl-how li { display: grid; gap: 10px; align-content: start; }
.dl-how p { margin: 0; font-size: 14px; }
.dl-num { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px;
          border-radius: 50%; color: #fff; font: 700 12px/1 var(--font); vertical-align: 1px;
          background: linear-gradient(135deg, var(--pink), var(--accent)); }
.dl-shot { margin: 0; height: 176px; border-radius: 14px; padding: 14px; display: grid; place-items: center;
           background: #1f1f24; box-shadow: 0 0 0 .5px var(--frame), var(--shadow-soft); overflow: hidden; }
.dl-shot:has(.dl-list) { place-items: start center; }
.dl-ui { width: 100%; max-width: 250px; color: #e4e4ea; font: 12.5px/1.3 var(--font); position: relative; }
.dl-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; color: #c9c9d3;
          white-space: nowrap; overflow: hidden; }
.dl-row span { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.dl-row.is-hot { background: #2f3446; color: #fff; }
.dl-file { width: 10px; height: 12px; border-radius: 2px; border: 1.5px solid #8b8ba0; flex: none; }
.dl-dots { flex: none; padding: 0 5px; border-radius: 6px; font-weight: 700; color: #fff; }
.dl-menu { position: absolute; right: -6px; top: 58px; display: grid; min-width: 128px; padding: 5px;
           border-radius: 10px; background: #2b2b33; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.dl-menu span { padding: 5px 8px; border-radius: 6px; }
.dl-red { color: #ff6b62; }
.dl-dialog { padding: 14px; border-radius: 12px; background: #2b2b33; box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
             display: grid; gap: 12px; }
.dl-dialog-title { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; }
.dl-dialog-title span { color: #8b8ba0; }
.dl-input { padding: 7px 9px; border-radius: 8px; background: #1b1b20; color: #c9c9d3; font-size: 11px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-input i { display: inline-block; width: 1px; height: 12px; margin-left: 2px; vertical-align: -2px;
              background: #fff; animation: dl-caret 1s steps(1) infinite; }
.dl-actions { display: flex; justify-content: flex-end; gap: 14px; align-items: center; }
.dl-primary { padding: 6px 12px; border-radius: 8px; background: #ffdb4d; color: #1f1f24; font-weight: 600; }
.dl-save { display: grid; gap: 14px; justify-items: start; }
.dl-check { display: flex; align-items: center; gap: 8px; color: #e4e4ea; }
.dl-check i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px;
              background: #ffdb4d; color: #1f1f24; font: 700 11px/1 var(--font); font-style: normal; }
.dl-ring { outline: 2px solid var(--pink); outline-offset: 2px; animation: dl-ring 1.6s ease-in-out infinite; }
@keyframes dl-ring { 50% { outline-color: color-mix(in srgb, var(--pink) 30%, transparent); } }
@keyframes dl-caret { 50% { opacity: 0; } }
.dl-disclaimer { margin-top: -4px; font-size: 12.5px; }

.dl-conn { display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--fill); }
.dl-conn > header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.dl-conn h3 { margin: 0; display: grid; gap: 2px; }
.dl-step { font: 600 11.5px/1 var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dl-conn.is-complete h3::after { content: "Готово"; justify-self: start; margin-top: 4px; padding: 2px 9px;
                                 border-radius: 999px; font: 600 12px/1.4 var(--font);
                                 background: var(--ok-bg); color: var(--ok); }
.dl-table { display: grid; }
.dl-head, .dl-line { display: grid; align-items: center; gap: 10px;
                     grid-template-columns: 44px minmax(0, 1fr) minmax(150px, 1fr) auto 52px; }
.dl-head { padding: 0 8px 6px; font-size: 11.5px; color: var(--muted); text-transform: uppercase;
           letter-spacing: .04em; }
.dl-head span:first-child, .dl-head span:last-child { text-align: center; }
.dl-line { padding: 8px; border-radius: 12px; border-top: 1px solid var(--line);
           transition: background .2s ease, opacity .2s ease; }
.dl-line.is-current { background: color-mix(in srgb, var(--accent) 12%, transparent); border-top-color: transparent; }
.dl-line.is-done { opacity: .62; }
.dl-line.is-done .dl-pos { background: var(--ok-bg); color: var(--ok); }
.dl-pos { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
          background: var(--glass-strong); font: 600 13px/1 var(--display); font-variant-numeric: tabular-nums;
          box-shadow: 0 0 0 .5px var(--frame); }
.dl-label { display: grid; gap: 1px; font-size: 13.5px; min-width: 0; }
.dl-shown { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-label small { color: var(--muted); font-size: 11.5px; }
.dl-sheet { font-size: 13px; overflow-wrap: normal; word-break: keep-all; }
.dl-final .dl-label { grid-column: 2 / 5; }
.dl-final .dl-label > span { white-space: normal; }
.dl-tick { display: grid; place-items: center; cursor: pointer; }
.dl-tick input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
@media (max-width: 720px) {
  .dl-head { display: none; }
  .dl-line { grid-template-columns: 36px minmax(0, 1fr) 40px; }
  .dl-line > :nth-child(3) { grid-column: 2; }
  .dl-line > :nth-child(4) { grid-column: 2; justify-self: start; }
  .dl-line > .dl-tick { grid-column: 3; grid-row: 1 / span 3; }
  .dl-final .dl-label { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .dl-ring, .dl-input i { animation: none; } }