/* Сценарист UFF — дизайн-система (перенесено из прототипа docs/superpowers/specs/2026-07-24-uffgen-redesign-prototype.html) */
  :root{
    --bg:#090C0D; --bg-2:#0B0F10;
    --panel:#12171A; --panel-2:#161C20; --panel-hi:#1A2126;
    --border:#1E2529; --border-2:#252d33;
    --lime:#C4F439; --lime-dim:rgba(196,244,57,.12);
    --glow:0 0 22px rgba(196,244,57,.40); --glow-sm:0 0 12px rgba(196,244,57,.28);
    --gold:#EBC55C; --gold-dim:rgba(235,197,92,.12); --gold-glow:0 0 12px rgba(235,197,92,.30);
    --sky:#5BC0FF; --sky-dim:rgba(91,192,255,.12); --sky-glow:0 0 12px rgba(91,192,255,.30);
    --tx:#F3F6F7; --tx-mid:#8A96A0; --tx-dim:#59646d;
    --good:#5FD08A; --good-bg:rgba(95,208,138,.12);
    --warn:#E7C860; --warn-bg:rgba(231,200,96,.12);
    --bad:#EF6D6D; --bad-bg:rgba(239,109,109,.12);
    --violet:#A79BF0; --violet-bg:rgba(167,155,240,.14);
    --yt:#FF4D4D; --ig:#E06BC8; --grey-line:#AEB6D6;
    --r:16px;
    --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,system-ui,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  }
  /* ── СВЕТЛАЯ ТЕМА (тумблер в сайдбаре, персист в localStorage) ──
     accent-цвета делаем ТЕМНЕЕ: тот же --lime и как фон кнопки (тёмный текст),
     и как текст на белом (читаемо) — правит все lime/sky-надписи разом. */
  :root[data-theme="light"]{
    --bg:#F5F7F8; --bg-2:#FFFFFF;
    --panel:#FFFFFF; --panel-2:#F2F5F6; --panel-hi:#E9EEF0;
    --border:#E4E9EC; --border-2:#D4DBDF;
    --lime:#8CBE00; --lime-dim:rgba(140,190,0,.14);
    --glow:0 0 22px rgba(140,190,0,.22); --glow-sm:0 0 10px rgba(140,190,0,.16);
    --gold:#C79A2E; --gold-dim:rgba(199,154,46,.14); --gold-glow:0 0 10px rgba(199,154,46,.20);
    --sky:#1E90D8; --sky-dim:rgba(30,144,216,.12); --sky-glow:0 0 10px rgba(30,144,216,.20);
    --tx:#0F1518; --tx-mid:#4C5860; --tx-dim:#7C8891;
    --good:#2E9E5B; --good-bg:rgba(46,158,91,.12);
    --warn:#B0850F; --warn-bg:rgba(176,133,15,.12);
    --bad:#D64545; --bad-bg:rgba(214,69,69,.12);
    --violet:#6C5CE0; --violet-bg:rgba(108,92,224,.14);
    --grey-line:#6B7480;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--tx);font-family:var(--font);-webkit-font-smoothing:antialiased}
  body{font-size:14px;line-height:1.45}
  .num{font-variant-numeric:tabular-nums}
  button{font-family:inherit}
  a{color:inherit;text-decoration:none}

  .app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}

  /* ── Sidebar ── */
  .sidebar{background:var(--bg-2);border-right:1px solid var(--border);display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;padding:22px 15px}
  .brand{font-weight:800;font-size:22px;letter-spacing:-.5px;padding:6px 10px 20px}
  .brand b{color:var(--lime);text-shadow:var(--glow-sm)}
  .nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
  .nav-group{font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--tx-dim);text-transform:uppercase;padding:16px 12px 7px}
  /* надписи меню — светлые (не серые); цветными остаются группы «форматы»/«прочее» */
  .nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--tx);font-weight:500;transition:.14s;cursor:pointer;user-select:none}
  .nav-item .ic{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;opacity:.9}
  .nav-item:hover{background:var(--panel);color:var(--tx)}
  .nav-item .soon{margin-left:auto;font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-dim);border:1px solid var(--border-2);border-radius:6px;padding:2px 5px}
  /* default (lime) active */
  .nav-item.active{background:var(--lime-dim);color:var(--lime);font-weight:600;box-shadow:inset 0 0 0 1px rgba(196,244,57,.18),0 0 16px rgba(196,244,57,.10)}
  .nav-item.active .ic{stroke:var(--lime)}
  /* gold group (форматы) */
  .g-gold{color:var(--gold)} .g-gold .ic{stroke:var(--gold)}
  .g-gold:hover{color:var(--gold)}
  .nav-item.g-gold.active{background:var(--gold-dim);color:var(--gold);box-shadow:inset 0 0 0 1px rgba(235,197,92,.22),0 0 16px rgba(235,197,92,.12)}
  .nav-item.g-gold.active .ic{stroke:var(--gold)}
  /* sky group (прочее) */
  .g-sky{color:var(--sky)} .g-sky .ic{stroke:var(--sky)}
  .g-sky:hover{color:var(--sky)}
  .nav-item.g-sky.active{background:var(--sky-dim);color:var(--sky);box-shadow:inset 0 0 0 1px rgba(91,192,255,.22),0 0 16px rgba(91,192,255,.12)}
  .nav-item.g-sky.active .ic{stroke:var(--sky)}
  .yt-ic{stroke:var(--yt)!important} .ig-ic{stroke:var(--ig)!important}
  .user{display:flex;align-items:center;gap:11px;padding:12px 8px 4px;border-top:1px solid var(--border);margin-top:10px}
  .avatar{width:34px;height:34px;border-radius:10px;background:var(--lime-dim);color:var(--lime);display:grid;place-items:center;font-weight:700;flex:none}
  .user .mail{font-size:12.5px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
  .user .role{font-size:10px;letter-spacing:.1em;color:var(--tx-dim);text-transform:uppercase}
  .theme-tgl{margin-left:auto;color:var(--tx-dim);width:30px;height:30px;border:1px solid var(--border-2);border-radius:9px;display:grid;place-items:center;flex:none;cursor:pointer;background:none;transition:.14s}
  .theme-tgl:hover{color:var(--lime);border-color:var(--lime)}
  .theme-tgl .sun{display:none} .theme-tgl .moon{display:block}
  :root[data-theme="light"] .theme-tgl .sun{display:block} :root[data-theme="light"] .theme-tgl .moon{display:none}
  .logout{margin-left:6px;color:var(--tx-dim);width:30px;height:30px;border:1px solid var(--border-2);border-radius:9px;display:grid;place-items:center;flex:none;cursor:pointer}
  .logout:hover{color:var(--bad);border-color:var(--bad)}

  /* ── Main ── */
  .main{padding:30px 34px 48px;max-width:1340px}
  .view{display:none} .view.on{display:block;animation:fade .25s ease}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .page-head{margin-bottom:24px}
  .page-head h1{font-size:29px;font-weight:800;letter-spacing:-.6px;text-wrap:balance}
  .crumb{font-size:12.5px;font-weight:600;letter-spacing:.02em;margin-bottom:6px;color:var(--lime)}
  .crumb.gold{color:var(--gold)} .crumb.sky{color:var(--sky)}
  .page-head p{color:var(--tx-mid);margin-top:7px;max-width:62ch}
  /* Цель канала — по ней видно, какой метрикой канал вообще судят */
  .page-head p.goal{color:var(--tx-hi);font-weight:600;margin-top:10px}
  .tag{display:inline-block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-left:10px;vertical-align:middle}
  .tag.wip{color:var(--gold);background:var(--gold-dim);box-shadow:var(--gold-glow)}
  .tag.emb{color:var(--sky);background:var(--sky-dim);box-shadow:var(--sky-glow)}

  .panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--r)}

  .stat-row{display:grid;gap:15px;margin-bottom:20px}
  .cols-6{grid-template-columns:repeat(6,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)}
  .stat{padding:18px;display:flex;flex-direction:column;gap:12px;transition:.15s}
  .stat:hover{border-color:var(--border-2);background:var(--panel-2)}
  /* плашка под значком — как в согласованном прототипе */
  /* padding/border гасим явно: ниже есть легаси-правило .tile (padding:18px, рамка),
     из-за него значок выдавливало за пределы плашки */
  .stat .tile{width:40px;height:40px;padding:0;border:0;border-radius:11px;
    background:var(--lime-dim);display:grid;place-items:center;flex:none}
  .stat .tile svg{width:20px;height:20px;stroke:var(--lime);fill:none;stroke-width:1.8}
  .stat .val{font-size:30px;font-weight:600;letter-spacing:-1.1px;line-height:1;
    text-shadow:0 0 20px rgba(243,246,247,.22)}
  .stat .lbl{font-size:10.5px;letter-spacing:.07em;color:var(--tx-dim);text-transform:uppercase;margin-top:6px}
  /* дельта под цифрой — рост/падение к прошлому такому же периоду */
  .s-delta{display:inline-flex;align-items:baseline;gap:6px;margin-top:9px;font-size:12.5px;font-weight:700;
    font-variant-numeric:tabular-nums}
  .s-delta.up{color:var(--good)} .s-delta.down{color:var(--bad)} .s-delta.flat{color:var(--tx-dim)}
  .s-delta .s-note{font-size:10.5px;font-weight:500;color:var(--tx-dim);text-transform:none;letter-spacing:0}
  .s-delta.none{color:var(--tx-dim);font-weight:500;font-size:11px}
  /* неоновый ореол под цифрой в цвет метрики */
  .stat .val.v-good{text-shadow:0 0 20px rgba(95,208,138,.45)}
  .stat .val.v-warn{text-shadow:0 0 20px rgba(231,200,96,.45)}
  .stat .val.v-bad{text-shadow:0 0 20px rgba(239,109,109,.45)}
  .v-good{color:var(--good)} .v-warn{color:var(--warn)} .v-bad{color:var(--bad)}
  .v-lime{color:var(--lime);text-shadow:var(--glow-sm)}

  .grid-2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-bottom:20px}
  /* без min-width:0 широкая таблица внутри колонки распирает всю сетку:
     страница уезжает вправо, правая панель обрезается */
  .grid-2>*{min-width:0}
  @media(max-width:1100px){.grid-2{grid-template-columns:1fr}}
  .p-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 8px}
  .p-head h3{font-size:15.5px;font-weight:700}
  .p-head .sub{font-size:12px;color:var(--tx-mid);font-weight:500;margin-top:3px}
  .link{color:var(--lime);font-size:12.5px;font-weight:600;cursor:pointer}

  .chart-wrap{padding:6px 14px 16px}
  .legend{display:flex;gap:18px;padding:2px 8px 0;font-size:12px;color:var(--tx-mid)}
  .legend i{display:inline-block;width:16px;height:3px;border-radius:2px;vertical-align:middle;margin-right:7px}
  .glow-line{filter:drop-shadow(0 0 6px rgba(196,244,57,.55))}
  .chart-x{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:6px 8px 0;font-size:11.5px;color:var(--tx-dim);font-variant-numeric:tabular-nums}

  /* health rows (dashboard + settings) */
  .health{display:flex;flex-direction:column;padding:6px 8px 10px}
  .hrow{border:1px solid transparent;border-radius:12px}
  .hrow summary{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;list-style:none}
  .hrow summary::-webkit-details-marker{display:none}
  .hrow:hover{background:var(--panel-2)}
  .hdot{width:10px;height:10px;border-radius:50%;flex:none}
  .hdot.ok{background:var(--good);box-shadow:0 0 9px var(--good)}
  .hdot.err{background:var(--bad);box-shadow:0 0 9px var(--bad)}
  .hdot.wait{background:var(--tx-dim)}
  .hrow .hname{font-weight:600}
  .hrow .hstat{margin-left:auto;font-size:12px;font-weight:600}
  .hstat.ok{color:var(--good)} .hstat.err{color:var(--bad)} .hstat.wait{color:var(--tx-dim)}
  .hrow .chev{color:var(--tx-dim);transition:.2s;width:15px;height:15px}
  .hrow[open] .chev{transform:rotate(180deg)}
  .hlog{margin:0 14px 12px;padding:12px 14px;background:#0b0f10;border:1px solid var(--border);border-radius:10px;font-family:var(--mono);font-size:12px;color:var(--tx-mid);white-space:pre-wrap;line-height:1.6}
  .hlog .err-l{color:var(--bad)}

  .plist{padding:6px 14px 12px;display:flex;flex-direction:column;gap:6px}
  .prow{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px}
  .prow:hover{background:var(--panel-2)}
  .thumb{width:42px;height:58px;border-radius:9px;flex:none;position:relative;background:linear-gradient(150deg,#1c2a12,#0f1418)}
  .thumb::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:var(--lime);opacity:.85;font-size:12px}
  .prow .t{font-weight:600;font-size:13px} .prow .m{font-size:11.5px;color:var(--tx-dim)}

  .tbl-wrap{overflow-x:auto;padding:2px 4px 6px}
  table{width:100%;border-collapse:collapse;min-width:640px}
  thead th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-dim);font-weight:700;text-align:left;padding:12px 16px;border-bottom:1px solid var(--border)}
  thead th.r,tbody td.r{text-align:right}
  tbody td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
  tbody tr:last-child td{border-bottom:0}
  tbody tr:hover td{background:var(--panel-2)}
  .rk{font-weight:600} .rk .ch{display:block;font-size:11.5px;color:var(--tx-dim);font-weight:500;margin-top:2px}
  .vlink:hover{color:var(--lime);text-shadow:var(--glow-sm)}
  .vlink::after{content:" ↗";font-size:11px;color:var(--tx-dim)}
  .badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
  .b-good{background:var(--good-bg);color:var(--good)} .b-warn{background:var(--warn-bg);color:var(--warn)}
  .b-bad{background:var(--bad-bg);color:var(--bad)}
  .b-lime{background:var(--lime-dim);color:var(--lime);box-shadow:var(--glow-sm)}
  .b-violet{background:var(--violet-bg);color:var(--violet)}
  .trend{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums}
  .t-up{color:var(--good)} .t-dn{color:var(--bad)} .t-flat{color:var(--tx-dim)}

  .btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  /* база .btn = лаймовая кнопка: без этого браузер рисовал её белой системной */
  .btn{padding:9px 16px;border-radius:11px;font-weight:600;font-size:13px;border:1px solid transparent;
    cursor:pointer;background:var(--lime);color:#0c1205;box-shadow:var(--glow);
    display:inline-flex;align-items:center;gap:8px;text-decoration:none}
  .btn:hover{filter:brightness(1.07)}
  .btn-primary{background:var(--lime);color:#0c1205;box-shadow:var(--glow)}
  .btn-primary:hover{filter:brightness(1.07)}
  .btn-sky{background:var(--sky);color:#04141f;box-shadow:var(--sky-glow)}
  .btn-ghost{background:var(--panel-2);color:var(--tx);border-color:var(--border-2)}
  .btn-ghost:hover{background:var(--panel-hi)}

  .chanbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
  .chan{display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:12px;background:var(--panel);border:1px solid var(--border);color:var(--tx-mid);font-weight:600;font-size:13.5px;cursor:pointer;transition:.14s}
  .chan .dot{width:8px;height:8px;border-radius:50%;background:var(--tx-dim)}
  .chan:hover{border-color:var(--border-2);color:var(--tx)}
  .chan.on{background:var(--lime-dim);color:var(--lime);border-color:transparent;box-shadow:inset 0 0 0 1px rgba(196,244,57,.22),0 0 16px rgba(196,244,57,.12)}
  .chan.on .dot{background:var(--lime);box-shadow:var(--glow-sm)}
  .chan.all.on{--x:0} .chan.add{border-style:dashed;color:var(--tx-dim)}
  .chan.add:hover{color:var(--lime);border-color:var(--lime)}

  .seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:4px;gap:2px}
  .seg button,.seg a{background:none;border:0;color:var(--tx-mid);padding:7px 15px;border-radius:9px;font-weight:600;font-size:13px;cursor:pointer;text-decoration:none}
  .seg button.on,.seg a.on{background:var(--lime-dim);color:var(--lime)}

  details.acc,details.fmt-set{margin-bottom:16px}
  .fmt-set summary,.acc>summary{list-style:none;cursor:pointer}
  .fmt-set summary::-webkit-details-marker,.acc>summary::-webkit-details-marker{display:none}
  .fmt-set summary{display:flex;align-items:center;gap:10px;padding:15px 20px;font-weight:600}
  .fmt-set summary .chev{margin-left:auto;transition:.2s;color:var(--tx-dim);width:16px;height:16px}
  .fmt-set[open] summary .chev{transform:rotate(180deg)}
  .set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;padding:4px 20px 20px}
  /* компактный аккордеон настроек голоса — не отдельная панель, а строка со стрелкой */
  .voice-set>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
    font-size:12.5px;font-weight:600;color:var(--tx-mid)}
  .voice-set>summary::-webkit-details-marker{display:none}
  .voice-set>summary:hover{color:var(--tx)}
  .voice-set>summary .chev{width:14px;height:14px;transition:.2s}
  .voice-set[open]>summary .chev{transform:rotate(180deg)}
  .field label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-dim);margin-bottom:6px}
  .field select,.field input,.field textarea{width:100%;background:var(--panel-2);border:1px solid var(--border-2);color:var(--tx);border-radius:10px;padding:9px 11px;font-size:13.5px;font-family:inherit;resize:vertical}
  .field select:focus,.field input:focus,.field textarea:focus{outline:none;border-color:var(--lime);box-shadow:var(--glow-sm)}

  .drop{border:1.5px dashed var(--border-2);border-radius:14px;padding:20px;text-align:center;color:var(--tx-mid);background:var(--panel-2)}
  .drop b{color:var(--tx)}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
  .toggle{display:inline-flex;align-items:center;gap:9px;color:var(--tx-mid);font-size:13.5px}
  .sw{width:38px;height:22px;border-radius:999px;background:var(--lime);position:relative;box-shadow:var(--glow-sm)}
  .sw::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#0c1205;top:3px;right:3px}

  /* watch library */
  .wlib{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;padding:6px 20px 20px}
  .wtile{aspect-ratio:1;border-radius:12px;background:linear-gradient(150deg,#171d16,#0f1418);
    border:1px solid var(--border);display:grid;place-items:center;color:var(--tx-dim);
    font-weight:700;font-size:13px;position:relative;cursor:pointer;overflow:hidden}
  .wtile:hover{border-color:var(--lime);color:var(--lime)}
  /* фото растягиваем по плашке абсолютом — иначе разные пропорции ломали ряд */
  .wtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .wtile .wnum{position:absolute;left:0;right:0;bottom:0;padding:14px 8px 5px;font-size:11px;
    font-weight:700;color:#fff;text-align:center;
    background:linear-gradient(180deg,rgba(9,12,13,0),rgba(9,12,13,.88))}
  .wtile .wdel{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:8px;
    border:1px solid var(--border-2);background:rgba(9,12,13,.75);color:var(--tx-mid);
    display:none;place-items:center;cursor:pointer;font-size:14px;line-height:1;padding:0}
  .wtile:hover .wdel{display:grid}
  .wtile .wdel:hover{color:var(--bad);border-color:var(--bad)}
  /* ячейка библиотеки: плитка + поле «подо что часы» под ней */
  .wcell{display:grid;gap:6px;align-content:start}
  .wnote{width:100%;box-sizing:border-box;padding:5px 7px;border-radius:8px;
    border:1px solid var(--border);background:var(--panel-2);color:var(--tx);
    font:inherit;font-size:11px;line-height:1.25;text-align:center;
    text-overflow:ellipsis}
  .wnote::placeholder{color:var(--tx-dim)}
  .wnote:focus{outline:none;border-color:var(--lime);color:var(--tx)}
  .wnote:disabled{opacity:.6}
  /* плашка «добавить» — такого же размера, пунктиром */
  .wtile.wadd{border-style:dashed;color:var(--tx-mid);background:var(--panel-2);
    flex-direction:column;gap:4px;font-size:12px;text-align:center;padding:8px}
  .wtile.wadd:hover{color:var(--lime);border-color:var(--lime)}
  .wtile.wadd .plus{font-size:22px;font-weight:400;line-height:1}

  /* first&end frames */
  .frames{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:6px 20px 8px}
  .fslot{aspect-ratio:9/12;border:1.5px dashed var(--border-2);border-radius:14px;display:grid;place-items:center;text-align:center;color:var(--tx-mid);background:var(--panel-2)}
  .fslot b{display:block;color:var(--tx);margin-bottom:4px}
  .arrow{color:var(--gold);font-size:26px;text-shadow:var(--gold-glow)}

  /* hook+descrip 3 blocks */
  .three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .mini{padding:18px}
  .mini h4{font-size:14px;font-weight:700;margin-bottom:6px}
  .mini p{font-size:12.5px;color:var(--tx-mid)}
  .mini .ico{width:38px;height:38px;border-radius:11px;background:var(--gold-dim);display:grid;place-items:center;margin-bottom:12px}
  .mini .ico svg{width:19px;height:19px;stroke:var(--gold);fill:none;stroke-width:1.8}
  .vidgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
  .vcell{aspect-ratio:9/13;border-radius:9px;background:linear-gradient(150deg,#1c2a12,#0f1418);position:relative}
  .vcell::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);opacity:.8;font-size:12px}

  .soon-wrap{display:grid;place-items:center;min-height:300px;text-align:center;gap:12px}
  .pill-soon{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sky);background:var(--sky-dim);border-radius:999px;padding:4px 12px;box-shadow:var(--sky-glow)}

  .note{margin-top:26px;padding:16px 18px;border:1px dashed var(--border-2);border-radius:14px;color:var(--tx-mid);font-size:13px}
  .note b{color:var(--lime)}

  @media(max-width:920px){
    .app{grid-template-columns:1fr}.sidebar{position:static;height:auto}
    .stat-row.cols-6,.stat-row.cols-4{grid-template-columns:repeat(2,1fr)}
    .grid-2,.field-row,.three,.frames{grid-template-columns:1fr}.arrow{transform:rotate(90deg)}
    .main{padding:22px 18px}
  }

/* ── Совместимость со старой разметкой (пока шаблоны переезжают) ───────── */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.space{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.muted{color:var(--tx-mid)}
.small{font-size:12.5px}
.error{color:var(--bad)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 12px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border);font-size:13px}
.tablewrap{overflow-x:auto}
/* пороги метрик Данила — классы приходят из Jinja-глобала grade() */
td.m-bad{color:var(--bad)}
td.m-mid{color:var(--warn)}
td.m-good{color:var(--good)}
/* кнопки старой разметки */
.btn.ghost{background:var(--panel-2);color:var(--tx);border:1px solid var(--border-2)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}

/* ── Системные контролы в теме сайта ─────────────────────────────────────────
   Браузер по умолчанию красит галочки, ползунки, кнопку выбора файла и рамку
   фокуса синим. Перекрываем на лайм — везде, а не по одной странице.        */
:root{accent-color:var(--lime);color-scheme:dark}

input,select,textarea{font-family:inherit}
input[type=text],input[type=password],input[type=number],input[type=search],
input[type=email],input[type=url],select,textarea{
  background:var(--panel-2);border:1px solid var(--border-2);color:var(--tx);
  border-radius:10px;padding:9px 11px;font-size:13.5px}
input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,
input[type=search]:focus,input[type=email]:focus,input[type=url]:focus,
select:focus,textarea:focus{outline:none;border-color:var(--lime);box-shadow:var(--glow-sm)}
input::placeholder,textarea::placeholder{color:var(--tx-dim)}

/* фокус с клавиатуры — лаймовый, а не системный синий */
*:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:8px}
summary:focus{outline:none}
summary:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
/* навигация и логотип — свои hover/active-состояния, обводка фокуса не нужна
   (иначе после клика на пункт остаётся лаймовая рамка — «обводит Дашборд») */
.nav-item:focus,.nav-item:focus-visible,.brand:focus,.brand:focus-visible{outline:none}

input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--lime);cursor:pointer}

/* ползунки озвучки */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;
  background:var(--border-2);border-radius:999px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--lime);box-shadow:var(--glow-sm);border:0;cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--lime);border:0;cursor:pointer}
input[type=range]::-moz-range-track{height:4px;background:var(--border-2);border-radius:999px}

/* выбор файла: системная белая кнопка → наша призрачная */
input[type=file]{color:var(--tx-mid);font-size:13px}
input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border-radius:10px;
  border:1px solid var(--border-2);background:var(--panel-2);color:var(--tx);
  font-family:inherit;font-weight:600;font-size:13px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--panel-hi);border-color:var(--lime);color:var(--lime)}
.gen-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
@media(max-width:800px){.gen-grid{grid-template-columns:1fr}}
.sliders{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.scene-card{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px}
.statuses{display:flex;flex-direction:column;gap:8px}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.photo-card{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:8px;text-align:center}
.watch-sec{margin-bottom:18px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
@media(max-width:720px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:18px}
.t-title{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-dim)}
.t-val{font-size:26px;font-weight:800;margin-top:6px}
.t-delta{font-size:12px;margin-top:4px}
.t-sub{font-size:11.5px;color:var(--tx-dim);margin-top:2px}
.pill{display:inline-flex;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600}
.pill.up{background:var(--good-bg);color:var(--good)}
.pill.down{background:var(--bad-bg);color:var(--bad)}
.pill.flat,.pill.none{background:var(--panel-2);color:var(--tx-dim)}
.crep{margin-top:14px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}
.crep-title{font-weight:600}
.crep-stamp,.crep-cnt,.crep-hits{font-size:12px;color:var(--tx-dim)}
.crep-badge{font-size:11px;padding:3px 9px;border-radius:999px;background:var(--lime-dim);color:var(--lime)}
.crep-body{padding:12px 16px}
.crep-sec{margin-bottom:10px}
.crep-h{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-dim);margin-bottom:4px}
.crep-line{font-size:13px;color:var(--tx-mid)}
.crep-line.error{color:var(--bad)}
.crep-nested{margin-top:8px}
.crep-row{display:flex;gap:10px;font-size:12.5px;color:var(--tx-mid)}
.login{width:340px;margin:0 auto;padding:26px 24px}
body.center{display:grid;place-items:center;min-height:100vh}

/* кнопка удаления в лентах роликов (hook/prokrut/история) */
.lenta-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lenta-del{background:none;border:none;cursor:pointer;font-size:15px;opacity:.5;padding:2px 6px;border-radius:6px;line-height:1;color:inherit}
.lenta-del:hover{opacity:1;background:rgba(255,80,80,.14)}
.lenta-del:disabled{opacity:.25;cursor:not-allowed}
.hist-del{background:none;border:1px solid var(--bd,#3a3a3a);cursor:pointer;font-size:12px;opacity:.75;padding:4px 10px;border-radius:8px;color:inherit;margin-left:8px}
.hist-del:hover{opacity:1;border-color:#ff5050;color:#ff6b6b}
.hist-del:disabled{opacity:.3;cursor:not-allowed}

/* ── Бейджи фоновых генераций ─────────────────────────────────────── */
.nav-item { position: relative; }
/* «Дышащий огонёк»: ::before — размытый ореол (пульсирует), ::after — плотное ядро.
   Цвет задаёт статусный класс через currentColor, разметку JS менять не нужно. */
.job-dot {
  position: absolute; top: 6px; right: 8px;
  width: 16px; height: 16px; border-radius: 50%;
}
.job-dot::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: currentColor; filter: blur(4px); opacity: .5;
}
.job-dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 5px currentColor;
}
.job-running { color: var(--gold); }
.job-running::before { animation: jobbreathe 2s ease-in-out infinite; }
.job-done { color: var(--good); }
.job-error { color: var(--bad); }
@keyframes jobbreathe {
  0%, 100% { transform: scale(1); opacity: .5; }
  50%      { transform: scale(1.5); opacity: .8; }
}
/* .job-reset — оформлен вместе с подвалом сайдбара (см. «Подвал сайдбара») */

/* ── Модалка «клип из фото» (редактор хука) ─────────────────────────────── */
.pv-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px}
.pv-box{background:var(--panel,#15161a);border-radius:16px;padding:18px 20px;
  width:min(560px,100%);max-height:88vh;overflow:auto}
.pv-head{display:flex;justify-content:space-between;align-items:center}
.pv-cap{margin:14px 0 6px;font-weight:600;font-size:13px;opacity:.8}
.pv-tabs{display:flex;gap:8px;margin-bottom:8px}
.pv-tab{padding:4px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.15);
  background:transparent;color:inherit;cursor:pointer}
.pv-tab.on{border-color:var(--gold,#d4af6a)}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:8px;max-height:180px;overflow:auto}
.pv-tile{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);aspect-ratio:1}
.pv-tile img{width:100%;height:100%;object-fit:cover}
.pv-num{position:absolute;left:4px;bottom:2px;font-size:11px;
  text-shadow:0 1px 3px #000}
.pv-upload{display:inline-block;margin-top:10px;padding:6px 12px;border-radius:10px;
  border:1px dashed rgba(255,255,255,.25);cursor:pointer;font-size:13px}
.pv-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pv-chip{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;
  background:rgba(255,255,255,.07);font-size:12px}
.pv-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.pv-chipx{background:none;border:none;color:inherit;cursor:pointer;font-size:14px}
.pv-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.pv-durval{min-width:52px;font-size:13px;opacity:.8}
.pv-box #pvPreset,.pv-box #pvExtra{display:block;width:100%;margin-top:6px}

/* ══════════════════════════════════════════════════════════════════════════
   СТЕКЛО + МЕТАЛЛ — визуальный слой поверх базовой системы (02.08.2026)
   Лежит в конце файла намеренно: правила той же специфичности перекрывают
   базовые, ничего выше править не нужно и откатить можно вырезав блок.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Стекло = светлая полупрозрачная плёнка ПОВЕРХ фона (не тёмная заливка):
     панель становится светлее подложки — только тогда читается «стекло». */
  --glass:linear-gradient(163deg,
      rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 42%,
      rgba(255,255,255,.018) 68%, rgba(255,255,255,.05) 100%);
  --glass-hi:rgba(255,255,255,.16);      /* полированная верхняя грань */
  --metal-b:rgba(255,255,255,.10);       /* металлическая кромка (база) */
  /* металлический ободок: ярко на верх-лево, гаснет к центру, снова блик снизу */
  --metal-ring:linear-gradient(145deg,
      rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 26%,
      rgba(255,255,255,.03) 52%, rgba(255,255,255,.09) 76%,
      rgba(255,255,255,.26) 100%);
  --glass-sh:0 12px 34px rgba(0,0,0,.42);
  --blur:blur(20px) saturate(150%);
}
:root[data-theme="light"]{
  /* На светлой белая панель на белом фоне = каша. Поэтому: фон страницы
     ощутимо темнее и с холодным оттенком, панель — стекло с настоящей тенью.
     Разделение держит тень, а не рамка.
     ⚠️ Панель НЕ делать почти непрозрачной (.99/.93): цветная подсветка фона
     перестаёт просвечивать сквозь стекло и вся тема гаснет в молоко.
     Держим ~.90→.68: свечение видно, текст читается за счёт тени. */
  --bg:#E6EBEF; --bg-2:#FFFFFF;
  --glass:linear-gradient(163deg,
      rgba(255,255,255,.60) 0%, rgba(255,255,255,.40) 48%,
      rgba(255,255,255,.34) 72%, rgba(255,255,255,.52) 100%);
  --glass-hi:rgba(255,255,255,1);
  --metal-b:rgba(15,21,24,.10);
  --metal-ring:linear-gradient(145deg,
      rgba(255,255,255,1) 0%, rgba(15,21,24,.13) 32%,
      rgba(15,21,24,.07) 56%, rgba(15,21,24,.12) 78%,
      rgba(255,255,255,.9) 100%);
  --glass-sh:0 1px 2px rgba(15,21,24,.06), 0 10px 26px rgba(15,21,24,.10);
  --blur:blur(26px) saturate(190%);
}

/* Фон-подсветка: без неё стекло не читается — размывать нечего.
   ⚠️ Кладём на <html>, а НЕ на body::before: у body свой фон, и слой с
   z-index:-1 уезжал ПОД него — подсветки не было видно вообще. */
html{
  background:
    radial-gradient(1100px 780px at 8% -12%, rgba(196,244,57,.20), transparent 62%),
    radial-gradient(900px 640px at 95% -6%, rgba(91,192,255,.17), transparent 60%),
    radial-gradient(1000px 720px at 65% 112%, rgba(235,197,92,.12), transparent 62%),
    radial-gradient(700px 500px at 32% 52%, rgba(91,192,255,.06), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
body{background:transparent}
/* ⚠️ ГРАБЛЯ: shorthand `background:` СБРАСЫВАЕТ background-attachment в scroll.
   Без повтора `fixed` пятна растягиваются на всю высоту документа и на длинной
   странице размазываются в ничто — светлая тема выглядела мёртво-серой.
   Цвета пятен на светлой берём насыщеннее тёмной: полупрозрачный лайм на белом
   почти не читается, нужен плотный. */
:root[data-theme="light"]{
  background:
    radial-gradient(1000px 700px at 6% -8%, rgba(124,175,0,.42), transparent 58%),
    radial-gradient(880px 600px at 96% -4%, rgba(30,144,216,.34), transparent 56%),
    radial-gradient(900px 640px at 62% 108%, rgba(199,154,46,.28), transparent 58%),
    radial-gradient(700px 500px at 34% 48%, rgba(30,144,216,.10), transparent 68%),
    var(--bg);
  background-attachment:fixed;
}

/* ── Стеклянные поверхности ───────────────────────────────────────────── */
.panel,.card,.tile,.crep,.scene-card,.photo-card,.pv-box,.hlog,.drop,.seg,.chip{
  position:relative;
  background:var(--glass);
  border:1px solid var(--metal-b);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-sh);
}
/* Металлический ободок: градиентная рамка поверх скруглённых углов.
   border-image радиус не держит, поэтому кольцо рисуем маской по ::before. */
.panel::before,.card::before,.tile::before,.crep::before,.pv-box::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:var(--metal-ring);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.scene-card,.photo-card,.chip,.hlog,.seg{box-shadow:inset 0 1px 0 var(--glass-hi)}
/* Панели, объявленные в <style> внутри шаблонов (трендвотчинг, история).
   Их правила идут ПОСЛЕ этого файла, поэтому нужен префикс body — иначе
   их плоский background:var(--panel) перебьёт стекло. */
body .tw-card,body .tw-chan,body .tw-ch-head,body .tw-stat,body .tw-modal-card,
body .tw-an-panel,body .hist-text{
  background:var(--glass);
  border:1px solid var(--metal-b);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-sh);
}
/* компактные кнопки трендвотчинга: стеклянный корпус + блик, размер не трогаем */
body .tw-btn2,body .tw-ib{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid var(--metal-b);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
:root[data-theme="light"] body .tw-btn2,:root[data-theme="light"] body .tw-ib{
  background:rgba(15,21,24,.045)}
body .tw-btn2::after,body .tw-ib::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,
    transparent 26%, rgba(255,255,255,.05) 40%, rgba(255,255,255,.30) 50%,
    rgba(255,255,255,.05) 60%, transparent 74%);
  transform:translateX(-125%);
}
body .tw-btn2:hover::after,body .tw-ib:hover::after{animation:sheen .72s cubic-bezier(.22,.61,.36,1)}
.sidebar{
  background:linear-gradient(190deg,
    rgba(255,255,255,.075) 0%, rgba(255,255,255,.022) 55%, rgba(255,255,255,.045) 100%);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-right:1px solid var(--metal-b);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05), inset 0 1px 0 var(--glass-hi);
}
:root[data-theme="light"] .sidebar{
  background:linear-gradient(190deg, rgba(255,255,255,.62), rgba(255,255,255,.40));
  box-shadow:1px 0 0 rgba(15,21,24,.06), 6px 0 22px rgba(15,21,24,.05);
}

/* ── Подвал сайдбара: карточка «кто вошёл» + ряд действий ──────────────────
   Было: аватар, имя и три кнопки в один ряд — при ширине сайдбара 204px они
   упирались в край и «выход» обрезало. Стало два яруса: сверху личность,
   снизу равные кнопки на всю ширину.                                        */
.user{
  display:flex;flex-direction:column;align-items:stretch;gap:9px;
  padding:12px 0 2px;border-top:1px solid var(--metal-b);margin-top:10px}
.user-id{display:flex;align-items:center;gap:10px;min-width:0}
.uinfo{flex:1;min-width:0}
.user .mail{max-width:none;font-weight:600}
.user .role{display:flex;align-items:center;gap:5px;margin-top:2px;color:var(--lime);opacity:.75}
.user .role::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--lime);box-shadow:0 0 6px rgba(196,244,57,.8)}
.avatar{
  width:34px;height:34px;border-radius:11px;font-size:14px;
  background:linear-gradient(150deg,rgba(196,244,57,.30),rgba(196,244,57,.08));
  box-shadow:inset 0 0 0 1px rgba(196,244,57,.30),0 3px 12px rgba(196,244,57,.10)}
:root[data-theme="light"] .avatar{
  background:linear-gradient(150deg,rgba(140,190,0,.22),rgba(140,190,0,.07));
  color:#5f8500;box-shadow:inset 0 0 0 1px rgba(140,190,0,.30)}
/* ряд действий: тема / выход / сброс — одинаковые стеклянные плитки */
.user-acts{display:flex;align-items:center;gap:6px}
.theme-tgl,.logout,.job-reset{
  flex:1 1 0;width:auto;min-width:0;height:30px;margin:0;padding:0;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--metal-b);border-radius:10px;
  background:rgba(255,255,255,.035);color:var(--tx-dim);transition:.14s}
:root[data-theme="light"] .theme-tgl,:root[data-theme="light"] .logout,
:root[data-theme="light"] .job-reset{background:rgba(15,21,24,.035)}
.theme-tgl:hover,.job-reset:hover{
  color:var(--lime);border-color:rgba(196,244,57,.45);background:var(--lime-dim)}
.logout:hover{
  color:var(--bad);border-color:rgba(239,109,109,.45);background:rgba(239,109,109,.12)}
.theme-tgl svg,.logout svg,.job-reset svg{width:15px;height:15px}
.job-reset:hover svg{animation:icClock .7s cubic-bezier(.4,.1,.3,1)}
/* вложенные плашки внутри стекла — чуть светлее, без второго блюра */
.stat:hover,.hrow:hover,.prow:hover,tbody tr:hover td{background:rgba(255,255,255,.045)}
:root[data-theme="light"] .stat:hover,:root[data-theme="light"] .hrow:hover,
:root[data-theme="light"] .prow:hover,:root[data-theme="light"] tbody tr:hover td{
  background:rgba(15,21,24,.035)}
.stat{border-radius:var(--r)}

/* металлические разделители: не плоская линия, а кромка с бликом посередине */
thead th,tbody td{
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(255,255,255,.02),var(--metal-b) 22%,var(--metal-b) 78%,rgba(255,255,255,.02)) 1;
}
.user{border-top:1px solid var(--metal-b)}

/* ── Стеклянный блик по наведению (нав, кнопки, чипы каналов) ─────────── */
.nav-item,.btn,.chan,.seg button,.seg a,.gbtn{position:relative;overflow:hidden}
.nav-item::after,.btn::after,.chan::after,.seg button::after,.seg a::after,.gbtn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,
    transparent 26%, rgba(255,255,255,.05) 40%, rgba(255,255,255,.30) 50%,
    rgba(255,255,255,.05) 60%, transparent 74%);
  transform:translateX(-125%);
}
.nav-item:hover::after,.btn:hover::after,.chan:hover::after,
.seg button:hover::after,.seg a:hover::after,.gbtn:hover::after{
  animation:sheen .72s cubic-bezier(.22,.61,.36,1);
}
@keyframes sheen{
  0%  {transform:translateX(-125%);opacity:0}
  10% {opacity:1}
  100%{transform:translateX(125%);opacity:0}
}
/* вместе с бликом на миг вспыхивает и сама кромка — «стеклянная рамка провелась» */
.nav-item:hover,.chan:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 18px rgba(255,255,255,.04)}

/* ── Пилюля .gbtn: копировать / скачать / настройки ───────────────────── */
.gbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:36px;padding:0 22px;border-radius:40px;
  font-family:inherit;font-size:13px;font-weight:500;letter-spacing:-.01em;
  color:var(--tx);cursor:pointer;text-decoration:none;white-space:nowrap;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:background .15s, border-color .15s, transform .18s cubic-bezier(.34,1.4,.64,1);
}
.gbtn:hover{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.12);transform:scale(1.02)}
.gbtn:active{transform:scale(.96)}
.gbtn:disabled{opacity:.45;cursor:not-allowed;transform:none}
:root[data-theme="light"] .gbtn{background:rgba(15,21,24,.045);border-color:rgba(15,21,24,.10)}
:root[data-theme="light"] .gbtn:hover{background:rgba(15,21,24,.07);border-color:rgba(15,21,24,.18)}
.gbtn.sm{height:30px;padding:0 15px;font-size:12px;gap:8px}
/* акцентные варианты — тот же стеклянный корпус, цветная подсветка */
.gbtn.lime{color:var(--lime);border-color:rgba(196,244,57,.28);background:var(--lime-dim)}
.gbtn.gold{color:var(--gold);border-color:rgba(235,197,92,.28);background:var(--gold-dim)}
.gbtn.sky {color:var(--sky); border-color:rgba(91,192,255,.28);background:var(--sky-dim)}

/* морф иконки: две SVG друг над другом, пружинный переход */
.gbtn .gi{position:relative;width:16px;height:16px;flex:none;display:block}
.gbtn .gi svg{
  position:absolute;inset:0;width:16px;height:16px;
  stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .34s cubic-bezier(.34,1.56,.64,1), opacity .18s ease;
}
.gbtn .gi .gi-b{transform:scale(.5);opacity:0}
.gbtn:hover .gi .gi-a,.gbtn.done .gi .gi-a{transform:scale(.5);opacity:0}
.gbtn:hover .gi .gi-b,.gbtn.done .gi .gi-b{transform:scale(1);opacity:1}
/* .done — залипшая галка после реального копирования/скачивания */
.gbtn.done{color:var(--good);border-color:rgba(95,208,138,.34);background:rgba(95,208,138,.10)}
/* вариант «шестерёнка»: не морф, а поворот на 180° */
.gbtn.rot .gi svg{transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.gbtn.rot:hover .gi svg{transform:rotate(180deg)}
/* вариант «удалить»: красная, корзина трясётся 0.4с */
.gbtn.danger{color:var(--bad);border-color:rgba(239,109,109,.28)}
.gbtn.danger:hover{background:rgba(239,109,109,.12);border-color:rgba(239,109,109,.45)}
.gbtn.shake:hover .gi svg{animation:trashshake .4s ease-in-out}
@keyframes trashshake{
  0%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-2px) rotate(-10deg)}
  50%{transform:translateY(0) rotate(10deg)}
  75%{transform:translateY(-2px) rotate(-10deg)}
  100%{transform:translateY(0) rotate(0)}
}
/* переключатель темы в сайдбаре: луна ↔ солнце морфом, а не display:none */
.theme-tgl{position:relative;overflow:hidden}
.theme-tgl svg{
  position:absolute;left:50%;top:50%;margin:-7.5px 0 0 -7.5px;
  transition:transform .34s cubic-bezier(.34,1.56,.64,1), opacity .18s ease;
}
.theme-tgl .sun{display:block;transform:scale(.5);opacity:0}
.theme-tgl .moon{display:block;transform:scale(1);opacity:1}
.theme-tgl:hover .moon{transform:scale(.5);opacity:0}
.theme-tgl:hover .sun{transform:scale(1);opacity:1}
:root[data-theme="light"] .theme-tgl .sun{display:block;transform:scale(1);opacity:1}
:root[data-theme="light"] .theme-tgl .moon{display:block;transform:scale(.5);opacity:0}
:root[data-theme="light"] .theme-tgl:hover .sun{transform:scale(.5);opacity:0}
:root[data-theme="light"] .theme-tgl:hover .moon{transform:scale(1);opacity:1}

/* Выбор файла — своя пилюля вместо системной кнопки браузера.
   Раньше стилизовали нативную ::file-selector-button фоновой картинкой-иконкой,
   и на ховере подменяли её на галку. Так делать нельзя: эту кнопку рисует сам
   браузер, у каждого по-своему, смена background-image заставляет перерисовать
   её целиком — в Safari у Данила это давало мигание и следы галок поверх
   подписи. Теперь ui.js прячет нативную кнопку и кладёт рядом обычную .gbtn:
   клик по <label> открывает тот же диалог, а морф иконки идёт на transform и
   opacity — их браузер гоняет на видеокарте, без перерисовки.
   Разметку собирает UffUI.upgrade(): <span class="fp-row"> = пилюля + имя файла. */
.fp-row{display:inline-flex;align-items:center;gap:12px;max-width:100%;vertical-align:middle;
  position:relative;padding:8px 12px;border-radius:14px;
  border:1.5px dashed transparent;transition:border-color .18s,background .18s}
/* пока файл летит над страницей — все зоны заливки видно, промахнуться сложно */
body.dnd .fp-row{border-color:var(--border-2);background:var(--panel-2)}
body.dnd .fp-row.over{border-color:var(--lime);background:var(--lime-dim);
  box-shadow:0 0 18px rgba(196,244,57,.12)}
.fp-hint{color:var(--tx-dim);font-size:12px;white-space:nowrap}
body.dnd .fp-row.over .fp-hint{color:var(--lime)}
.fp-row.bad{border-color:var(--bad);background:var(--bad-bg)}
.fp-row.bad .fp-hint{color:var(--bad)}
/* пилюля — это <label>, а у полей формы label набран капсом и приглушён:
   гасим наследство, иначе подпись кнопки лезет капсом и серым */
label.gbtn.fp{cursor:pointer;text-transform:none;letter-spacing:-.01em;
  font-size:13px;font-weight:500;color:var(--tx);margin:0;display:inline-flex}
.fp input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fp-name{color:var(--tx-mid);font-size:13px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-name.has{color:var(--tx)}
/* Превью залитого файла: видно сам ролик/кадр, а не строку с именем */
.fp-prev{margin-top:10px;display:flex;flex-direction:column;gap:6px;
  width:min(200px,100%);animation:fpIn .28s cubic-bezier(.22,.61,.36,1)}
@keyframes fpIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fp-prev video,.fp-prev img{display:block;width:100%;max-height:280px;object-fit:contain;
  border-radius:12px;border:1px solid var(--border);background:#000}
:root[data-theme="light"] .fp-prev video,:root[data-theme="light"] .fp-prev img{
  background:rgba(15,21,24,.06)}
.fp-cap{font-size:11px;color:var(--tx-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion: reduce){.fp-prev{animation:none}}
/* «+ фото с компа» в модалке хука — это <label>, иконку тоже даём фоном */
.pv-upload{
  height:36px;display:inline-flex;align-items:center;
  padding:0 20px 0 40px;border:1px solid rgba(255,255,255,.06);border-radius:40px;
  background-color:rgba(255,255,255,.04);background-repeat:no-repeat;
  background-position:16px center;background-size:16px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F6F7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V9m0 0l-4 4m4-4l4 4'/%3E%3Cpath d='M5 5h14'/%3E%3C/svg%3E");
  transition:background-color .15s,border-color .15s,transform .18s cubic-bezier(.34,1.4,.64,1);
}
.pv-upload:hover{
  background-color:rgba(255,255,255,.065);border-color:rgba(255,255,255,.12);transform:scale(1.02);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4F439' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5'/%3E%3C/svg%3E");
}

/* иконки-корзины, которые остаются иконками (лента, плитки часов, трендвотчинг):
   пилюлей их делать нельзя — сломается компактный ряд, поэтому только тряска */
.lenta-del:hover,.wtile .wdel:hover,body .tw-tool.del:hover,body .tw-fold .x:hover{
  animation:trashshake .4s ease-in-out}

/* шестерёнка в сайдбаре крутится так же */
.nav-item .ic{transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.nav-item.rot:hover .ic{transform:rotate(180deg)}

/* ── Живые иконки меню: у каждой свой жест по смыслу пункта ──────────────
   Крутим внутренние path'ы, поэтому нужна система координат самой SVG:
   transform-box:view-box + transform-origin в центре вьюбокса (12 12).   */
.nav-item .ic *{transform-box:view-box;transform-origin:12px 12px}

/* Дашборд — линия графика прочерчивается заново */
.nav-item[href="/"]:hover .ic path:nth-child(2){animation:icDraw .6s ease-out}
/* YouTube — «плей» подпрыгивает вперёд */
.nav-item[href="/analytics/youtube"]:hover .ic path{animation:icPlay .45s cubic-bezier(.34,1.56,.64,1)}
/* Instagram — объектив наводится на резкость */
.nav-item[href="/analytics/instagram"]:hover .ic circle{animation:icFocus .5s ease-in-out}
/* Сценарист — строчки на листе «пишутся» */
.nav-item[href="/generate"]:hover .ic path:nth-child(2){animation:icDraw .55s ease-out}
/* Swap control — кадр уезжает и возвращается (подмена) */
.nav-item[href="/prokrut"]:hover .ic path{animation:icSwap .55s ease-in-out}
/* First & End Frame — метки разъезжаются к краям */
.nav-item[href="/frames"]:hover .ic path:nth-child(2){animation:icDraw .5s ease-out}
.nav-item[href="/frames"]:hover .ic rect{animation:icBreathe .5s ease-in-out}
/* Hook + Descrip — превью и подставка прочерчиваются (плей тут в одном path
   с ножкой монитора, поэтому масштабировать его нельзя — поедет ножка) */
.nav-item[href="/hook"]:hover .ic path:nth-child(2){animation:icDraw .5s ease-out}
.nav-item[href="/hook"]:hover .ic path:nth-child(1){animation:icBreathe .5s ease-in-out}
/* История — стрелка часов делает полный круг */
.nav-item[href="/history"]:hover .ic path{animation:icClock .8s cubic-bezier(.4,.1,.3,1)}
/* Тренд вотчинг — график стреляет вверх-вправо */
.nav-item[href="/trends"]:hover .ic{transform:translate(2px,-2px)}
.nav-item[href="/trends"]:hover .ic path:nth-child(2){animation:icPop .45s cubic-bezier(.34,1.56,.64,1)}
/* Uniq + Copies — копия отделяется от оригинала */
.nav-item[href="/uniq"]:hover .ic rect{animation:icCopyFront .5s cubic-bezier(.34,1.4,.64,1)}
.nav-item[href="/uniq"]:hover .ic path{animation:icCopyBack .5s cubic-bezier(.34,1.4,.64,1)}

@keyframes icDraw{
  from{stroke-dasharray:44;stroke-dashoffset:44}
  to  {stroke-dasharray:44;stroke-dashoffset:0}}
@keyframes icPlay{
  0%{transform:none}45%{transform:translateX(2px) scale(1.18)}100%{transform:none}}
@keyframes icFocus{
  0%,100%{transform:none}50%{transform:scale(.68)}}
@keyframes icSwap{
  0%{transform:none}40%{transform:translateX(3px)}70%{transform:translateX(-1px)}100%{transform:none}}
@keyframes icBreathe{
  0%,100%{transform:none}50%{transform:scale(1.08)}}
@keyframes icClock{
  from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes icPop{
  0%{transform:none}50%{transform:scale(1.25)}100%{transform:none}}
@keyframes icCopyFront{
  0%,100%{transform:none}50%{transform:translate(1.5px,1.5px)}}
@keyframes icCopyBack{
  0%,100%{transform:none}50%{transform:translate(-1.5px,-1.5px)}}

/* ── Лоадер ожидания генерации: 6 кружков дышат по окружности ─────────── */
.uff-loader{position:relative;width:48px;height:48px;flex:none;display:inline-block;vertical-align:middle}
.uff-loader i{
  position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:rgba(196,244,57,.40);
  animation:ub0 3.6s ease-in-out infinite;
}
.uff-loader i:nth-child(2n){background:rgba(196,244,57,.22)}
.uff-loader i:nth-child(2){animation-name:ub1}
.uff-loader i:nth-child(3){animation-name:ub2}
.uff-loader i:nth-child(4){animation-name:ub3}
.uff-loader i:nth-child(5){animation-name:ub4}
.uff-loader i:nth-child(6){animation-name:ub5}
.uff-loader.sm{width:30px;height:30px;transform:scale(.62);margin:-6px}
@keyframes ub0{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(11px,0) scale(1.75)}}
@keyframes ub1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5.5px,9.5px) scale(1.75)}}
@keyframes ub2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5.5px,9.5px) scale(1.75)}}
@keyframes ub3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-11px,0) scale(1.75)}}
@keyframes ub4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5.5px,-9.5px) scale(1.75)}}
@keyframes ub5{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5.5px,-9.5px) scale(1.75)}}
/* строка «идёт генерация»: лоадер + текст в одну линию */
.wait-row{display:flex;align-items:center;gap:10px}

/* ── Карточка «Часы для сборки» ───────────────────────────────────────────
   Панель стоит в grid-2 рядом с высоким «Текстом сценария» и тянется по его
   высоте — поэтому содержимое центрируем по вертикали, иначе под картинкой
   зияла пустая половина панели.                                            */
.watch-panel{display:flex;flex-direction:column}
.watch-box{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:4px 20px 22px}
.watch-frame{
  width:min(260px,100%);aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  display:grid;place-items:center;position:relative;
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--metal-b);box-shadow:inset 0 1px 0 var(--glass-hi)}
:root[data-theme="light"] .watch-frame{
  background:linear-gradient(150deg,#EAF0E2,#E4EAEE);border-color:rgba(15,21,24,.09)}
.watch-frame img{width:100%;height:100%;object-fit:cover;display:block}
.watch-frame.empty{border-style:dashed}
.watch-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--tx-dim);font-size:12.5px;text-align:center;padding:0 16px}
.watch-empty svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.6}
.watch-meta{display:flex;flex-direction:column;align-items:center;gap:12px}
.wtag{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:4px 12px;border-radius:999px;
  color:var(--lime);background:var(--lime-dim);box-shadow:inset 0 0 0 1px rgba(196,244,57,.20)}

/* ── Панель «Результат» (Swap control) ────────────────────────────────────
   Тот же приём, что и «Часы для сборки»: панель тянется по высоте формы
   слева, рамка держит формат — вертикаль 9:16 по умолчанию, горизонталь
   16:9 через класс .wide (ставится по размерам самого видео).             */
.res-panel{display:flex;flex-direction:column}
.res-box{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:4px 20px 22px}
.res-frame{
  width:min(300px,100%);aspect-ratio:9/16;border-radius:16px;overflow:hidden;
  display:grid;place-items:center;position:relative;
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--metal-b);box-shadow:inset 0 1px 0 var(--glass-hi);
  transition:aspect-ratio .2s,width .2s}
.res-frame.wide{width:min(560px,100%);aspect-ratio:16/9}
:root[data-theme="light"] .res-frame{
  background:linear-gradient(150deg,#EAF0E2,#E4EAEE);border-color:rgba(15,21,24,.09)}
.res-frame video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.res-frame.empty{border-style:dashed}
.res-frame.busy{border-style:solid;border-color:var(--lime);box-shadow:0 0 0 1px var(--lime-dim) inset}
.res-empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--tx-dim);font-size:12.5px;text-align:center;padding:0 16px}
.res-empty svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;opacity:.6}
/* пока генерация идёт — рамка дышит, как строка ожидания при сценарии */
.res-frame.busy{animation:resBusy 2.6s ease-in-out infinite}
@keyframes resBusy{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(196,244,57,.12),0 0 16px rgba(196,244,57,.08)}
  50%    {box-shadow:inset 0 0 0 1px rgba(196,244,57,.22),0 0 34px rgba(196,244,57,.20)}}
@media (prefers-reduced-motion: reduce){.res-frame.busy{animation:none}}
.res-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.res-tag{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;padding:4px 12px;border-radius:999px;
  color:var(--lime);background:var(--lime-dim);box-shadow:inset 0 0 0 1px rgba(196,244,57,.20)}

/* лента прокрутов уехала под грид — раскладываем плитками на всю ширину */
.prok-lenta{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:16px;padding:0 20px 20px;align-items:start}
.prok-card{
  border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--panel-2)}
.prok-card-vid{
  width:100%;aspect-ratio:9/16;object-fit:contain;background:#000;
  display:block;border-radius:9px;margin-top:6px}

/* ══ СВЁРНУТЫЙ САЙДБАР (только иконки) ═══════════════════════════════════
   Состояние — атрибут data-sidebar="mini" на <html> (ставится до отрисовки,
   поэтому при перезагрузке меню не «прыгает»). Рабочая область — вторая
   колонка грида, ширину подхватывает сама.                                */
.side-top{display:flex;align-items:center;gap:8px;padding:6px 10px 20px}
.brand{padding:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.side-toggle{
  width:30px;height:30px;flex:none;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--metal-b);border-radius:9px;background:rgba(255,255,255,.04);
  color:var(--tx-mid);transition:.14s}
.side-toggle svg{width:16px;height:16px}
.side-toggle:hover{color:var(--lime);border-color:var(--lime)}
:root[data-theme="light"] .side-toggle{background:rgba(15,21,24,.04)}

.app{transition:grid-template-columns .22s cubic-bezier(.3,.8,.4,1)}
:root[data-sidebar="mini"] .app{grid-template-columns:72px 1fr}
:root[data-sidebar="mini"] .sidebar{padding:22px 11px}
:root[data-sidebar="mini"] .side-top{flex-direction:column;gap:10px;padding:0 0 16px}
:root[data-sidebar="mini"] .brand{display:none}
:root[data-sidebar="mini"] .nav-item{justify-content:center;padding:11px 0;overflow:visible}
:root[data-sidebar="mini"] .nav-item .nl,
:root[data-sidebar="mini"] .nav-item .soon{display:none}
/* блик остаётся внутри кнопки: overflow снят ради всплывашки, режем маской */
:root[data-sidebar="mini"] .nav-item::after{clip-path:inset(0 round 12px)}
/* заголовки групп превращаются в разделительную черту */
:root[data-sidebar="mini"] .nav-group{
  font-size:0;padding:10px 6px;height:auto}
:root[data-sidebar="mini"] .nav-group::before{
  content:"";display:block;height:1px;background:var(--metal-b)}
/* Всплывающая подпись справа от иконки.
   ⚠️ Псевдоэлементом её не сделать: у .nav есть overflow-y:auto, а это заодно
   режет и по горизонтали — подсказку обрезало. Поэтому отдельный слой на body
   с position:fixed, координаты считает JS (base.html). */
.nav-tip{
  position:fixed;z-index:60;white-space:nowrap;pointer-events:none;
  padding:6px 11px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--tx);
  background:var(--panel-hi);border:1px solid var(--metal-b);box-shadow:var(--glass-sh);
  opacity:0;transform:translateY(-50%) translateX(-4px);transition:opacity .14s, transform .14s}
.nav-tip.on{opacity:1;transform:translateY(-50%) translateX(0)}
:root[data-sidebar="mini"] .job-dot{top:3px;right:3px}
/* подвал: аватар и кнопки в столбик — по ширине 50px в ряд не влезают */
:root[data-sidebar="mini"] .user{gap:8px;padding:12px 0 2px}
:root[data-sidebar="mini"] .user-id{justify-content:center}
:root[data-sidebar="mini"] .uinfo{display:none}
:root[data-sidebar="mini"] .user-acts{flex-direction:column;gap:6px}
:root[data-sidebar="mini"] .theme-tgl,:root[data-sidebar="mini"] .logout,
:root[data-sidebar="mini"] .job-reset{flex:none;width:100%}
/* освободившиеся ~180px отдаём контенту: без этого max-width:1340 съедал сдвиг */
:root[data-sidebar="mini"] .main{padding:30px 30px 48px;max-width:1520px}
@media(max-width:920px){   /* на узком экране сайдбар и так горизонтальный */
  :root[data-sidebar="mini"] .app{grid-template-columns:1fr}
  :root[data-sidebar="mini"] .brand{display:block}
  :root[data-sidebar="mini"] .nav-item .nl{display:inline}
}

/* ══ СВЕТЛАЯ ТЕМА: добивка ═══════════════════════════════════════════════
   Тёмная тема строится на свечении, светлая — на тени и плотном цвете.
   Всё, что светилось белым, на белом фоне исчезает: правим адресно.      */
:root[data-theme="light"]{
  /* блик по ховеру: белая полоса на белом не видна — ведём тенью-отражением */
  --sheen:linear-gradient(104deg,
    transparent 26%, rgba(15,21,24,.02) 40%, rgba(15,21,24,.075) 50%,
    rgba(15,21,24,.02) 60%, transparent 74%);
}
:root[data-theme="light"] .nav-item::after,:root[data-theme="light"] .btn::after,
:root[data-theme="light"] .chan::after,:root[data-theme="light"] .seg button::after,
:root[data-theme="light"] .seg a::after,:root[data-theme="light"] .gbtn::after,
:root[data-theme="light"] body .tw-btn2::after,:root[data-theme="light"] body .tw-ib::after{
  background:var(--sheen);
}
:root[data-theme="light"] .nav-item:hover,:root[data-theme="light"] .chan:hover{
  box-shadow:inset 0 0 0 1px rgba(15,21,24,.08), 0 2px 10px rgba(15,21,24,.06)}
/* лоадер: ядовитый лайм на белом не читается — берём тёмный лайм светлой темы */
:root[data-theme="light"] .uff-loader i{background:rgba(140,190,0,.70)}
:root[data-theme="light"] .uff-loader i:nth-child(2n){background:rgba(140,190,0,.38)}
/* ореол под цифрами: белый на белом = грязь, поэтому цветной и мягкий —
   свечение остаётся, но подсвечивает цветом метрики, а не белым туманом */
:root[data-theme="light"] .stat .val{text-shadow:0 0 14px rgba(140,190,0,.28)}
:root[data-theme="light"] .glow-line{filter:drop-shadow(0 1px 3px rgba(140,190,0,.35))}
/* лог статусов был захардкожен чёрным (#0b0f10) — на светлой делаем светлым */
:root[data-theme="light"] .hlog{background:rgba(15,21,24,.04);color:var(--tx-mid)}
/* плитки-заглушки (превью роликов, слоты кадров, библиотека часов) были
   тёмными градиентами — на белом выглядели дырами */
:root[data-theme="light"] .thumb,:root[data-theme="light"] .vcell,
:root[data-theme="light"] .wtile{background:linear-gradient(150deg,#EAF0E2,#E4EAEE)}
:root[data-theme="light"] .wtile.wadd,:root[data-theme="light"] .fslot,
:root[data-theme="light"] .drop{background:rgba(15,21,24,.03)}
:root[data-theme="light"] .wtile .wdel{background:rgba(255,255,255,.9)}
:root[data-theme="light"] .wtile .wnum{
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(15,21,24,.72))}
/* поля ввода: белое на белом стекле сливалось — топим на пару тонов */
:root[data-theme="light"] .field select,:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] input[type=text],:root[data-theme="light"] input[type=password],
:root[data-theme="light"] input[type=number],:root[data-theme="light"] input[type=search],
:root[data-theme="light"] input[type=email],:root[data-theme="light"] input[type=url],
:root[data-theme="light"] select,:root[data-theme="light"] textarea{
  background:rgba(15,21,24,.035);border-color:rgba(15,21,24,.14)}
/* вложенные строки/плашки внутри белой панели */
:root[data-theme="light"] .scene-card,:root[data-theme="light"] .photo-card,
:root[data-theme="light"] .chip,:root[data-theme="light"] .seg{
  background:rgba(15,21,24,.035);box-shadow:none;border-color:rgba(15,21,24,.09)}
/* ядро «дышащего огонька» на светлом фоне должно быть плотнее */
:root[data-theme="light"] .job-dot::before{opacity:.65}

@media (prefers-reduced-motion: reduce){
  .uff-loader i,.job-dot::before{animation:none}
  .nav-item:hover .ic,.nav-item:hover .ic *{animation:none!important;transform:none!important}
  .nav-item:hover::after,.btn:hover::after,.chan:hover::after,.gbtn:hover::after{animation:none}
  .gbtn:hover,.gbtn:active{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   СЛОТЫ ФОТО ДЛЯ СВАПА (12.08.2026)
   Плитка = один ракурс наших часов. Видно картинку и номер референса, а не
   имя файла: порядок слотов = порядок фото в запросе к Seedance.
   ══════════════════════════════════════════════════════════════════════════ */
/* «Промт целиком» — свёрнутый показ того, что уйдёт в модель */
.prompt-peek>summary{display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;color:var(--tx-mid);transition:color .15s}
.prompt-peek>summary:hover{color:var(--tx)}
.prompt-peek>summary .chev{width:14px;height:14px;transition:transform .2s}
.prompt-peek[open]>summary .chev{transform:rotate(180deg)}
.prompt-body{margin:10px 0 0;padding:12px 14px;max-height:220px;overflow:auto;
  font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--tx-mid);
  white-space:pre-wrap;word-break:break-word;
  background:var(--panel-2);border:1px solid var(--border);border-radius:12px}

/* Шапка блока: кнопка разбора + счётчик заполненности */
.slot-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.slot-count{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  padding:5px 12px;border-radius:999px;background:var(--panel-2);color:var(--tx-mid);
  border:1px solid var(--border);transition:.18s}
.slot-count .dot{width:6px;height:6px;border-radius:50%;background:var(--tx-dim);transition:.18s}
.slot-count.done{background:var(--lime-dim);color:var(--lime);border-color:transparent;
  box-shadow:inset 0 0 0 1px rgba(196,244,57,.22),0 0 14px rgba(196,244,57,.10)}
.slot-count.done .dot{background:var(--lime);box-shadow:var(--glow-sm)}

/* Предупреждение «фото многовато» */
.slot-hint{margin:10px 0 0;padding:9px 12px;border-radius:11px;font-size:11.5px;
  line-height:1.45;color:var(--warn);background:var(--warn-bg);
  border:1px solid rgba(231,200,96,.22)}

/* Сетка. align-items:start — подписи разной длины больше не растягивают ряд */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:14px 12px;align-items:start}
.slot{display:flex;flex-direction:column;gap:7px;min-width:0;
  animation:slotIn .34s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay:calc(var(--i,0) * 45ms)}
@keyframes slotIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* Плитка — тот же корпус, что у библиотеки часов (.wtile) */
.slot-pic{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;
  display:grid;place-items:center;color:var(--tx-dim);
  background:linear-gradient(150deg,#171d16,#0f1418);border:1px solid var(--border);
  transition:border-color .18s,color .18s,transform .18s cubic-bezier(.34,1.4,.64,1),box-shadow .18s}
.slot-pic:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.28)}
.slot-pic:active{transform:scale(.97)}
/* пустой слот — пунктиром, как «добавить» в библиотеке часов */
.slot:not(.full) .slot-pic{border-style:dashed;border-color:var(--border-2);background:var(--panel-2)}
.slot:not(.full) .slot-pic:hover{border-color:var(--lime)}
/* заполненный — сплошная лаймовая кромка и мягкое свечение */
.slot.full .slot-pic{border-color:rgba(196,244,57,.45);
  box-shadow:inset 0 0 0 1px rgba(196,244,57,.12),0 0 16px rgba(196,244,57,.07)}
.slot-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slot-plus{font-size:24px;font-weight:300;line-height:1}

/* Номер референса: стеклянный кружок — порядок слотов = порядок фото в запросе */
.slot-num{position:absolute;left:6px;top:6px;z-index:2;min-width:20px;height:20px;
  border-radius:999px;padding:0 6px;font-size:11px;font-weight:700;line-height:20px;
  text-align:center;color:#fff;background:rgba(9,12,13,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.slot.full .slot-num{color:var(--lime)}

/* Кнопки на плитке — проявляются по наведению, как .wdel у библиотеки часов */
.slot-btn{position:absolute;z-index:3;width:24px;height:24px;border-radius:8px;padding:0;
  border:1px solid var(--border-2);background:rgba(9,12,13,.78);color:var(--tx-mid);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;cursor:pointer;font-size:13px;line-height:1;
  opacity:0;transform:scale(.85);
  transition:opacity .16s,transform .18s cubic-bezier(.34,1.4,.64,1),color .16s,border-color .16s}
.slot:hover .slot-btn,.slot-pic:focus-visible .slot-btn{opacity:1;transform:none}
.slot-btn:hover{color:var(--bad);border-color:var(--bad)}
.slot-drop{top:6px;right:6px}                 /* снять фото */
.slot-kill{bottom:6px;right:6px}              /* убрать слот целиком */
.slot-kill:hover{color:var(--warn);border-color:var(--warn)}
/* «заменить» — подсказка по низу картинки, только у заполненных */
.slot-swap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 8px 5px;
  font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#fff;
  text-align:center;pointer-events:none;opacity:0;transition:opacity .16s;
  background:linear-gradient(180deg,rgba(9,12,13,0),rgba(9,12,13,.88))}
.slot.full .slot-pic:hover .slot-swap{opacity:1}

/* Заливка фото: плитка дышит, пока файл едет на сервер */
.slot.up .slot-pic::after{content:"";position:absolute;inset:0;z-index:2;
  background:rgba(9,12,13,.45);animation:slotPulse 1.1s ease-in-out infinite}
@keyframes slotPulse{0%,100%{opacity:.25}50%{opacity:.6}}

/* Подписи */
.slot-name{font-size:12px;font-weight:600;line-height:1.3;color:var(--tx)}
.slot-why{font-size:11px;line-height:1.35;color:var(--tx-dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slot-at{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:10px;
  font-weight:600;padding:1px 6px;border-radius:999px;vertical-align:middle;
  color:var(--sky);background:var(--sky-dim)}

/* Плитка «добавить ракурс»: список лежит прозрачным поверх — нативное меню
   открывается на всю ширину, поэтому названия ракурсов больше не обрезаются */
.slot-add .slot-pic{cursor:pointer;border-style:dashed;color:var(--tx-mid)}
.slot-add .slot-name{color:var(--tx-mid)}
.slot-sel{position:absolute;inset:0;z-index:4;width:100%;height:100%;opacity:0;cursor:pointer;
  border:0;padding:0;-webkit-appearance:none;appearance:none}

@media (prefers-reduced-motion: reduce){
  .slot{animation:none}
  .slot-pic:hover,.slot-pic:active{transform:none}
  .slot.up .slot-pic::after{animation:none;opacity:.45}
  .slot-btn{transition:opacity .16s}
}

/* Светлая тема: тёмный градиент плитки на белом выглядел дырой */
:root[data-theme="light"] .slot-pic{background:linear-gradient(150deg,#EAF0E2,#E4EAEE)}
:root[data-theme="light"] .slot:not(.full) .slot-pic{background:rgba(15,21,24,.03)}
:root[data-theme="light"] .slot-btn{background:rgba(255,255,255,.9)}
:root[data-theme="light"] .slot-num{color:#0F1518;background:rgba(255,255,255,.85);
  box-shadow:inset 0 0 0 1px rgba(15,21,24,.10)}
:root[data-theme="light"] .slot.full .slot-num{color:#5c7d00}