/* ============================================================================
   site.css — общие стили сайта (вход, хаб). Вариант дизайна «Стекло» (A), выбран 23.09.2026.
   Штаб (/shtab/) свои стили несёт сам — см. shtab_src/styles.css, здесь его нет.
   Палитра — из макета «Вход на сервер и хаб проектов», вариант 1.

   Изменения:
   24.09.2026 · фон привязан к максимальной высоте экрана (100lvh / --bgh), а не к текущей · на телефоне
                панель браузера и клавиатура меняли высоту окна, и фото дёргалось в один кадр · отчёт 24.09 №1
   24.09.2026 · шестерёнка: на узких экранах живёт в шапке (.gear.inhead), на широких — с учётом safe-area · она
                перекрывала карточки и ездила вместе с панелью Safari · отчёт 24.09 №1
   24.09.2026 · боковые панели шире (560px) и без горизонтальной прокрутки; пул фото и превью иконки вписаны в
                ширину · содержимое вылезало за край, иконка обрезалась · отчёт 24.09 №1
   24.09.2026 · стили раздела «Алгоритмы» (/algo) — в отдельном файле algo.css
   24.09.2026 (ночь) · фон — один слой композитора (translateZ, contain; у фото без will-change; ken burns fill backwards; у затемнения
                без transition); --bgh по screen.height · видео владельца: полоса фона справа светлела/темнела после ухода панели Safari
   24.09.2026 (вечер) · фон: height = max(100lvh, --bgh) без перехода, затемнение с запасом −3% · внизу на полсекунды
                светилась полоса без затемнения при уходе панели Safari · шестерёнка: padding 0 (съезжала от центра) ·
                аватар в шапке телефона 30 px
   24.09.2026 · шапка хаба закреплена вне прокрутки; открытая панель занимает видимую область, фон страницы
                блокируется; поля заметок не вызывают масштабирование Safari, крестики центрированы · видео владельца
   ============================================================================ */
:root{
  --paper:#ECEAE4; --card:rgba(255,255,255,.80); --line:#D5D2CA; --line2:#E2DFD7;
  --ink:#14161A; --ink2:#5C5A55; --ink3:#9A9891; --accent:#0A7A6C; --accent-dark:#075E54; --accent-soft:#E2EFEA;
  --warn:#B54A1A; --warn-soft:#FBEDE4; --r-card:22px; --shadow:0 30px 80px -40px rgba(20,22,26,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100%;display:flex;flex-direction:column;position:relative;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)} a:hover{color:var(--accent-dark)}

/* ---- фон: точечная сетка + два пятна (когда фото выключено) и слои фото ---- */
body::before{content:"";position:fixed;inset:0;background-image:radial-gradient(circle at 1px 1px,var(--dots,#D9D6CE) 1px,transparent 1px);background-size:28px 28px;opacity:.8;z-index:0;pointer-events:none}
.blob{position:fixed;border-radius:50%;z-index:0;pointer-events:none;transition:opacity .8s}
.blob.a{width:min(720px,90vw);height:min(720px,90vw);right:-18vw;top:-22vw;background:#DCE7E3}
.blob.b{width:min(520px,70vw);height:min(520px,70vw);left:-18vw;bottom:-20vw;background:#E4E1D8}
body.has-bg .blob{opacity:0}
/* контейнер фона (z 0) и содержимое страницы (z 1): фон никогда не перекроет текст, а стили расширений
   (Dark Reader, принудительная тёмная тема) не спрячут картинку — она настоящий <img> */
/* Высота фона — НЕ текущая высота окна, а максимальная (когда панель браузера убрана): 100lvh, а bg.js
   ещё держит переменную --bgh = наибольшая увиденная высота. Панель Safari/Brave и клавиатура меняют окно,
   а фон стоит на месте — он всегда чуть больше видимой области. Переход по высоте — страховка на случай,
   если браузер всё же изменит размер (поворот экрана): плавно, а не в один кадр. */
.bg-root{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100lvh;height:max(100lvh,var(--bgh,0px));z-index:0;pointer-events:none;overflow:hidden;
  transform:translateZ(0);-webkit-transform:translateZ(0);contain:strict;isolation:isolate}
/* 24.09 (ночь, видео владельца): полоса фона справа от карточек светлела/темнела через ~0,4 с после того, как уезжала
   панель Safari. По кадрам: меняется только фон (фото + затемнение), содержимое неподвижно. Причина — фото и затемнение
   жили в РАЗНЫХ слоях композитора (у фото был will-change), и Safari после скролла перерисовывал их не одновременно.
   Теперь весь фон — один слой (translateZ + contain), у фото нет will-change, высота фиксирована по высоте экрана
   (--bgh = max(innerHeight, screen.height), см. bg.js) — перерисовывать при уходе панели нечего. */
/* 24.09 (вечер): убран переход по высоте — из-за него при уходе панели Safari внизу на полсекунды светилась полоса
   без затемнения («бац — и потемнело»). Теперь высота = наибольшее из lvh и --bgh с первого кадра, меняться ей незачем. */
.page{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column;flex:1}
/* два слоя фото: перекрёстное растворение при смене; появление — плавное, 900 мс */
.bg-layer{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;object-position:center;opacity:0;
  transition:opacity .9s ease-out;pointer-events:none;display:block}
.bg-layer.in{opacity:1}
/* едва заметное движение (масштаб 1.03 → 1 за 18 с) — только когда включено и система не просит убрать анимации */
body.bg-motion .bg-layer.in{animation:bg-kb 18s ease-out backwards}   /* backwards: после движения transform снимается, слой не остаётся «отдельным» */
@keyframes bg-kb{from{transform:scale(1.035)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.bg-layer{transition-duration:.3s}body.bg-motion .bg-layer.in{animation:none}}
/* затемнение поверх фото, чтобы текст читался; сила — из настроек (переменная --bg-dim) */
.bg-dim{position:absolute;inset:-3%;pointer-events:none;background:rgba(14,16,20,var(--bg-dim,.35))}   /* без перехода: затемнение меняется только из настроек, мгновенно и вместе с фото */
body[data-tone="light"] .bg-dim{background:rgba(236,234,228,calc(var(--bg-dim,.35) * .9))}
body.has-bg .card{background:rgba(255,255,255,.86)}
body.has-bg[data-tone="dark"] footer,body.has-bg[data-tone="dark"] .status,body.has-bg[data-tone="dark"] .hint,
body.has-bg[data-tone="dark"] .brand,body.has-bg[data-tone="dark"] .sub{color:#F1EFE9;text-shadow:0 1px 2px rgba(0,0,0,.35)}
body.has-bg[data-tone="dark"] .brand .mark{background:#F1EFE9}
body.has-bg[data-tone="dark"] .brand .mark svg{stroke:#14161A}

/* ---- шапка / подвал ---- */
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:28px 40px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand .mark{width:32px;height:32px;border-radius:10px;background:var(--ink);display:grid;place-items:center}
.status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
footer{padding:20px 40px 28px;font-size:12px;color:var(--ink3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media(max-width:560px){header.top,footer{padding-inline:20px}}

/* ---- карточка входа ---- */
main.center{flex:1;display:grid;place-items:center;padding:16px 20px 40px}
.card{width:100%;max-width:480px;padding:44px 44px 36px;background:var(--card);border:1px solid rgba(255,255,255,.9);border-radius:28px;
  box-shadow:var(--shadow),inset 0 2px 0 rgba(255,255,255,.6);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
h1{margin:0 0 8px;font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.lead{margin:0 0 22px;font-size:15px;color:var(--ink2);line-height:1.5}
form.login{display:flex;flex-direction:column;gap:14px}
label.l{display:block;font-size:12px;font-weight:600;color:var(--ink2);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.field{position:relative}
.inp{width:100%;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:14px;background:#fff;font-size:16px;color:var(--ink)}
.inp:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field .inp.pw{padding-right:48px}
.eye{position:absolute;right:6px;bottom:6px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--ink2);display:grid;place-items:center;cursor:pointer}
.eye:hover{background:#F1EFE9}
.btn{height:50px;border:0;border-radius:14px;background:var(--ink);color:#fff;font-size:16px;font-weight:700;cursor:pointer;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:#000}.btn[disabled]{opacity:.6;cursor:default}
.btn.sec{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.sec:hover{background:#F6F4EF}
.btn.sm{height:36px;font-size:13px;border-radius:10px;padding:0 12px}
.btn.danger{background:#fff;color:var(--warn);border:1px solid #F0CDB9}.btn.danger:hover{background:var(--warn-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--ink2);margin-top:22px;flex-wrap:wrap}
.row label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:500}
.note{margin:0;padding:12px 14px;border-radius:12px;background:#FFF7E6;border:1px solid #F0DDB0;color:#6B4E12;font-size:13.5px;line-height:1.45;display:none}
.note.on{display:block}.note.err{background:#FBEDE4;border-color:#F0CDB9;color:#8A3410}.note.ok{background:var(--accent-soft);border-color:#BFE0D6;color:#075E54}
.hint{max-width:480px;margin:18px auto 0;text-align:center;font-size:13px;color:#7A7872;line-height:1.5}
@media(max-width:560px){.card{padding:32px 24px 28px;border-radius:22px}h1{font-size:30px}}

/* ---- шестерёнка и панель настроек фона ---- */
.gear{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;color:var(--ink2);cursor:pointer;box-shadow:0 10px 30px -18px rgba(0,0,0,.5);transition:transform .25s}
.gear:hover{color:var(--ink);transform:rotate(20deg)}
.gear{padding:0;line-height:0}.gear svg{display:block}   /* Safari даёт кнопкам свои отступы — шестерёнка съезжала от центра */
/* на телефоне шестерёнка переезжает в шапку (bg.js вставляет её туда): не перекрывает карточки и не ездит с панелью браузера */
.gear.inhead{position:static;width:36px;height:36px;border-radius:11px;box-shadow:none;background:rgba(255,255,255,.7);margin-left:8px;flex:none}
.gear.inhead svg{width:18px;height:18px}
.panel{position:fixed;top:var(--panel-top,0px);right:0;height:var(--panel-height,100dvh);width:min(560px,100vw);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-left:1px solid var(--line2);box-shadow:-30px 0 80px -50px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;overflow:hidden}
.panel.open{transform:none}
.panel-bd{position:fixed;top:var(--panel-top,0px);left:0;right:0;height:var(--panel-height,100dvh);z-index:45;background:rgba(20,22,26,.18);opacity:0;pointer-events:none;transition:opacity .3s}
.panel-bd.open{opacity:1;pointer-events:auto}
.panel .ph{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 12px}
.panel .ph h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.panel .x{width:34px;height:34px;border:0;border-radius:10px;background:transparent;cursor:pointer;color:var(--ink2);display:grid;place-items:center;padding:0;line-height:0;flex:none}
.panel .x svg{display:block}
.panel .x:hover{background:#EFEDE7}
.panel .pb{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 22px 28px;min-width:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.panel-lock{position:fixed!important;width:100%;overflow:hidden!important}
.panel .pb img,.panel .pb svg,.panel .pb pre{max-width:100%}
.sec{padding:16px 0;border-top:1px solid var(--line2)}
.sec:first-child{border-top:0;padding-top:4px}
.sec h3{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.sec p.m{margin:8px 0 0;font-size:12.5px;color:var(--ink3);line-height:1.45}
.sw{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:600;padding:6px 0}
.tg{position:relative;width:44px;height:26px;border-radius:13px;background:#D5D2CA;border:0;cursor:pointer;transition:background .2s;flex:none}
.tg::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg[aria-checked="true"]{background:var(--accent)}.tg[aria-checked="true"]::after{transform:translateX(18px)}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:4px;padding:4px;background:var(--seg,#E6E3DB);border-radius:12px}
.seg button{min-width:0;min-height:32px;padding:6px 8px;border:0;border-radius:9px;background:transparent;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;line-height:1.2;white-space:normal;text-align:center}
.seg button.on{background:var(--seg-on,#fff);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:30px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip small{font-weight:500;opacity:.7}
.rng{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:13px;color:var(--ink2);padding:6px 0}
.rng input{width:100%;accent-color:var(--accent)}
.rng b{min-width:34px;text-align:right;font-weight:600;color:var(--ink)}
.cur{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start}
.cur img{width:96px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line2);background:#eee}
.cur .nm{font-size:13.5px;font-weight:700;line-height:1.3;word-break:break-word}
.cur .by{font-size:12px;color:var(--ink3);margin-top:2px}
.cur .acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ib{white-space:nowrap;height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.ib:hover{background:#F6F4EF}.ib.on{background:var(--accent-soft);border-color:#BFE0D6;color:var(--accent-dark)}
.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.pool figure{margin:0;position:relative}
.pool img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;border:1px solid var(--line2);display:block}
.pool .del{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:7px;border:0;background:rgba(255,255,255,.9);cursor:pointer;font-size:14px;line-height:1;color:var(--warn)}
.pool figcaption{font-size:10.5px;color:var(--ink3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upl{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.upl input[type=file]{font-size:12.5px}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:60;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:13.5px;opacity:0;transition:.3s;pointer-events:none;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- хаб ---- */
.hub-top{height:64px;width:100%;max-width:100vw;min-width:0;padding:0 48px;display:flex;align-items:center;gap:16px;border-bottom:1px solid #DDDAD2;background:rgba(255,255,255,.6);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:fixed;top:0;left:0;right:0;z-index:20}
.hub-top .brand .mark{width:28px;height:28px;border-radius:9px}
.hub-top .sp{flex:1;min-width:0}
.me{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.me .av{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;border:0;padding:0;overflow:hidden;cursor:pointer}
.me .av img{width:100%;height:100%;object-fit:cover;display:block}
.avbig{width:96px;height:96px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:36px;font-weight:800;overflow:hidden}
.avbig img{width:100%;height:100%;object-fit:cover}
.it .uav{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:inline-grid;place-items:center;font-size:14px;font-weight:700;overflow:hidden;vertical-align:middle;margin-right:8px;flex:none}
.it .uav img{width:100%;height:100%;object-fit:cover}
.it .h{align-items:center}
.favprev{flex:none;width:64px;height:64px;border-radius:14px;border:1px solid var(--line2);background:#fff;display:grid;place-items:center;overflow:hidden}
.favprev img{width:48px;height:48px;image-rendering:auto}
.me .nm{font-size:13px;font-weight:700;line-height:1.2}.me .rl{font-size:11px;color:var(--ink2)}
.me .out{margin-left:6px;height:30px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:#fff;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink2)}
.me .out:hover{color:var(--ink)}
.hub{flex:1;padding:100px 48px 60px;max-width:1280px;width:100%;margin:0 auto}
.hub .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.hub h1{font-size:32px;margin:0}
.hub .sub{margin:6px 0 0;font-size:14px;color:var(--ink2)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pc{position:relative;text-decoration:none;color:inherit;min-height:200px;min-width:0;padding:22px 24px;background:rgba(255,255,255,.9);border:1px solid var(--line2);border-radius:var(--r-card);
  box-shadow:0 20px 50px -40px rgba(20,22,26,.35);display:flex;flex-direction:column;gap:14px;transition:transform .2s,box-shadow .2s;cursor:pointer;text-align:left}
.pc:hover{transform:translateY(-2px);box-shadow:0 24px 50px -34px rgba(20,22,26,.45)}
.pc.soon{opacity:.62;cursor:default}.pc.soon:hover{transform:none}
.pc .ic{width:44px;height:44px;border-radius:14px;color:#fff;display:grid;place-items:center;font-size:18px;font-weight:800}
.pc .tp{display:flex;align-items:center;justify-content:space-between}
.pill{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;background:#EFEDE7;color:var(--ink2);white-space:nowrap}
.pill.ok{background:var(--accent-soft);color:var(--accent)}.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pc .tt{font-size:18px;font-weight:800;letter-spacing:-.01em}
.pc .ds{font-size:13px;color:var(--ink2);line-height:1.45;margin-top:4px}
.pc .ft{margin-top:auto;font-size:12px;color:#7A7872;display:flex;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.pc .ft span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc .ft span:last-child{flex:none}   /* длинная подпись (напр. «последний: …» у Алгоритмов) обрезается многоточием, «открыть →» не переносится (24.09) */
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hub-top{padding:0 16px}.hub{padding:88px 16px 48px}.grid{grid-template-columns:minmax(0,1fr)}.hub h1{font-size:26px}.me .rl,.me .nm{display:none}.me .av{width:30px;height:30px}}  /* 64px шапки + 24px отступа; карточка не расширяет экран */
@media(max-width:640px){input:not([type=checkbox]):not([type=range]),textarea,select{font-size:16px!important}} /* Safari не приближает любое поле ввода сайта */

/* ---- панели хаба (люди, копии, заметки, сервер) используют .panel; списки ---- */
.list{display:flex;flex-direction:column;gap:8px}
.it{padding:12px 14px;border:1px solid var(--line2);border-radius:14px;background:#fff;display:flex;flex-direction:column;gap:6px}
.it .h{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.it .h b{font-size:14px}
.it .s{font-size:12.5px;color:var(--ink2)}
.it .a{display:flex;gap:6px;flex-wrap:wrap}
.frm{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px dashed var(--line);border-radius:14px;background:rgba(255,255,255,.6)}
.frm .inp{height:40px;font-size:16px;border-radius:10px} /* Safari приближает страницу при фокусе на поле меньше 16px */
.frm textarea.inp{height:auto;min-height:120px;padding:10px 12px;resize:vertical;line-height:1.45}
.frm .inp:focus{outline:0;box-shadow:0 2px 0 var(--accent);border-color:var(--line)} /* без рамки вокруг текста */
.note-editor{min-height:48vh!important;resize:none!important;white-space:pre-wrap}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pwbox{padding:12px 14px;border-radius:12px;background:#FFF7E6;border:1px solid #F0DDB0;font-size:13.5px;line-height:1.5}
.pwbox code{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:15px;font-weight:700;background:#fff;padding:2px 8px;border-radius:6px;user-select:all}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.kv span:nth-child(odd){color:var(--ink2)}
.bar{height:8px;border-radius:4px;background:#E6E3DB;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.bar.warn i{background:var(--warn)}
.nt{padding:14px;border:1px solid var(--line2);border-radius:14px;background:#fff;cursor:pointer}
.nt:hover{border-color:#C9C5BB}
.nt .k{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.nt .t{font-size:15px;font-weight:800;margin:4px 0 2px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nt .b{font-size:13px;color:var(--ink2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.nt .d{font-size:11.5px;color:var(--ink3);margin-top:6px}
.nt.pin{border-color:#BFE0D6;background:#F4FAF8}

/* читаемость подписей на светлых фото */
body.has-bg[data-tone="light"] .hint,body.has-bg[data-tone="light"] footer,body.has-bg[data-tone="light"] .status,body.has-bg[data-tone="light"] .sub{color:#3A3935}
.brand{white-space:nowrap}

/* ---- тёмная тема: следует за системой. Те же токены, другие значения; жёстко заданные белые
   поверхности переопределены ниже. Расширения вроде Dark Reader видят тёмную страницу и не вмешиваются. ---- */
@media(prefers-color-scheme:dark){
  :root{--paper:#15171B;--card:rgba(30,32,37,.80);--line:#3A3D44;--line2:#2C2F35;--ink:#F1EFE9;--ink2:#B3B0A8;--ink3:#7E7B74;
    --accent:#3FB8A5;--accent-dark:#6FD0C0;--accent-soft:#173A35;--warn:#F08A5C;--warn-soft:#3D2418;--dots:#24272D;--seg:#2A2D33;--seg-on:#3A3D44;
    --shadow:0 30px 80px -40px rgba(0,0,0,.8)}
  html{color-scheme:dark}
  .blob.a{background:#1B2A27}.blob.b{background:#22201C}
  .card{border-color:rgba(255,255,255,.06)}
  body.has-bg .card{background:rgba(24,26,30,.86)}
  .inp,.btn.sec,.chip,.ib,.tg::after,.it,.nt,.pool .del,.me .out,.eye:hover,.panel .x:hover,.frm .inp{background:#24272D;color:var(--ink)}
  .tg{background:#3A3D44}.tg::after{background:#F1EFE9}
  .btn{background:#F1EFE9;color:#14161A}.btn:hover{background:#fff}
  .btn.sec{background:#24272D;color:var(--ink)}.btn.sec:hover{background:#2E3138}
  .btn.danger{background:#24272D;border-color:#5A3A2C}
  .chip.on{background:#F1EFE9;color:#14161A;border-color:#F1EFE9}
  .ib:hover,.btn.sec:hover{background:#2E3138}
  .ib.on{background:var(--accent-soft);color:var(--accent-dark)}
  .gear{background:rgba(30,32,37,.85)}.gear.inhead{background:rgba(30,32,37,.6)}
  .panel{background:rgba(24,26,30,.94)}
  .panel-bd{background:rgba(0,0,0,.4)}
  .hub-top{background:rgba(21,23,27,.7);border-bottom-color:#2C2F35}
  .pc{background:rgba(30,32,37,.92)}
  .pill{background:#2A2D33;color:var(--ink2)}.pill.ok{background:var(--accent-soft);color:var(--accent-dark)}.pill.warn{background:var(--warn-soft);color:var(--warn)}
  .note{background:#3A2F14;border-color:#5E4B1E;color:#F2D89A}.note.err{background:#3D2418;border-color:#5A3A2C;color:#F5B79A}.note.ok{background:var(--accent-soft);border-color:#245A52;color:#9FE3D6}
  .pwbox{background:#3A2F14;border-color:#5E4B1E;color:#F2D89A}.pwbox code{background:#15171B;color:var(--ink)}
  .bar{background:#2A2D33}
  .nt.pin{background:#182C29;border-color:#245A52}
  .frm{background:rgba(30,32,37,.6)}
  .pool img,.cur img{border-color:#2C2F35;background:#24272D}
  .toast{background:#F1EFE9;color:#14161A}
  .sheet.ctx-rules{background:#1E2A27}
  body.has-bg[data-tone="light"] .hint,body.has-bg[data-tone="light"] footer,body.has-bg[data-tone="light"] .status,body.has-bg[data-tone="light"] .sub{color:#3A3935}
  body[data-tone="light"] .bg-dim{background:rgba(21,23,27,calc(var(--bg-dim,.35) * .9))}
}

/* Заметка — одно поле без рамки вокруг текста, включая состояние фокуса. */
.frm.note-form{padding:0;border:0;background:transparent}
.frm.note-form .note-editor,.frm.note-form .note-editor:focus{
  padding:12px 2px;border:0;border-radius:0;background:transparent;outline:0;box-shadow:none
}
html.panel-open{overflow:hidden;overscroll-behavior:none}
@media(max-width:640px){
  /* Запас за видимой областью закрывает страницу при сдвиге viewport клавиатурой и инерцией Safari. */
  .panel-bd{top:-100lvh;height:300lvh;background:var(--paper)}
  .panel{background:var(--paper);border-left:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .inp:focus,.inp:focus-visible,textarea:focus,textarea:focus-visible{
    outline:0;box-shadow:none
  }
}