/* ===== LOGIN (FE-A1) ===== */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
.login .blob{display:none}
.login .b1{width:520px;height:520px;top:-160px;left:-120px}
.login .b2{width:460px;height:460px;bottom:-180px;right:-100px}
.login-card{position:relative;z-index:2;width:100%;max-width:430px;background:var(--glass);backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--glass-brd);border-radius:var(--r-xl);padding:38px 34px;box-shadow:var(--shadow-3)}
.login-brand{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:14px;padding-bottom:24px}
.login-mark{width:60px;height:60px;border-radius:7px;flex:none;background:var(--logo-url) center/cover no-repeat;box-shadow:0 14px 34px -12px color-mix(in oklab,var(--iris) 70%,transparent)}
.login-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.login-title{font-size:32px;font-weight:700;letter-spacing:.03em;line-height:1}
.login-tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3)}
.login-ver{text-align:center;font-size:11px;color:var(--txt-3);margin-top:20px;font-family:var(--mono);letter-spacing:.02em}
.login-actions{display:flex;gap:10px;margin-top:8px}
.login-actions .btn{flex:1;height:48px;font-size:14px;margin-top:0}
.btn-back{color:var(--txt-3);opacity:.85} .btn-back:hover{opacity:1;color:var(--txt)}
.btn-back .door-back{transform:scaleX(-1)}

/* ===== Заставка / лоадскрин (после аутентификации, ≤2 c) =====
   Монохромный экран · пульсирующее лого Verba · из него выезжает «АРМ ЮРИСТА» · рассеивание. */
.loadscreen{position:fixed;inset:0;z-index:400;display:none;place-items:center;overflow:hidden;
  background:radial-gradient(130% 130% at 50% 38%, #24262b 0%, #191b1f 58%, #121316 100%)}
.loadscreen.on{display:grid;animation:lsOut .5s var(--ease) 1.4s forwards}   /* рассеивание в конце */
.ls-stage{display:flex;align-items:center}
.ls-mark{width:86px;height:86px;border-radius:15px;flex:none;z-index:2;
  background:var(--logo-url) center/cover no-repeat;
  filter:brightness(1.04) saturate(1.06);
  box-shadow:0 22px 64px -20px rgba(0,0,0,.72)}
.loadscreen.on .ls-mark{animation:lsPop .5s var(--ease) both, lsPulse 1.15s var(--ease) .5s 1}
.ls-lockup{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;
  max-width:0;margin-left:0;opacity:0;overflow:hidden;white-space:nowrap;z-index:1;transform:translateX(-26px)}
.loadscreen.on .ls-lockup{animation:lsReveal .6s var(--ease) .5s both}
.ls-title{font-size:35px;font-weight:700;letter-spacing:.15em;line-height:1;color:#f2f3f5}
.ls-tag{font-size:12px;font-weight:700;letter-spacing:.36em;text-transform:uppercase;color:#98a0aa}
@keyframes lsPop{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes lsPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.075)}}
@keyframes lsReveal{from{max-width:0;opacity:0;margin-left:0;transform:translateX(-26px)}
  to{max-width:360px;opacity:1;margin-left:22px;transform:translateX(0)}}
@keyframes lsOut{to{opacity:0;filter:blur(11px);transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){
  .loadscreen.on{animation:none}
  .loadscreen.on .ls-mark{animation:none}
  .loadscreen.on .ls-lockup{animation:none;max-width:360px;opacity:1;margin-left:22px;transform:none}
}
/* светлая тема — заставка на светлом фоне (иначе тёмный текст лого не читался бы) */
:root[data-theme="light"] .loadscreen{background:radial-gradient(130% 130% at 50% 38%, #f6f8fb 0%, #eef1f6 58%, #e3e8ef 100%)}
:root[data-theme="light"] .ls-mark{box-shadow:0 22px 60px -22px rgba(31,111,194,.38)}
:root[data-theme="light"] .ls-title{color:#182029}
:root[data-theme="light"] .ls-tag{color:#5b6570}
.login-card h1{font-size:21px;font-weight:700;text-align:center;letter-spacing:-.02em}
.login-card .sub{text-align:center;color:var(--txt-2);font-size:13.5px;margin-top:6px;margin-bottom:24px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:650;color:var(--txt-2);margin-bottom:6px}
.input{width:100%;height:46px;padding:0 14px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--hairline);
  color:var(--txt);font-size:14.5px;font-family:inherit;transition:all var(--fast)}
.input:focus{border-color:var(--iris);box-shadow:var(--ring);outline:none}
.input.mono{letter-spacing:.4em}
.login-card .btn{width:100%;height:48px;margin-top:8px;font-size:15px}
.login-step{animation:loginIn var(--med) var(--ease);min-height:252px}
@keyframes loginIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:4px;display:grid;place-items:center;color:var(--txt-3)}
.pw-toggle:hover{color:var(--iris);background:var(--elev)} .pw-toggle svg{width:18px;height:18px}
.twofa-ic{width:54px;height:54px;border-radius:6px;margin:0 auto 4px;display:grid;place-items:center;background:var(--accent-soft);color:var(--iris-300);animation:popIn var(--slow) var(--ease)}
:root[data-theme="light"] .twofa-ic{color:var(--iris-600)} .twofa-ic svg{width:26px;height:26px}
@keyframes popIn{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.otp{display:flex;gap:9px;justify-content:center;margin:6px 0 18px}
.otp input{width:46px;height:56px;text-align:center;font-family:var(--mono);font-size:22px;font-weight:700;color:var(--txt);
  background:var(--surface-2);border:1.5px solid var(--hairline);border-radius:var(--r-sm);transition:all var(--fast);outline:none}
.otp input:focus{border-color:var(--iris);box-shadow:var(--ring);transform:translateY(-2px)}
.otp input.filled{border-color:var(--iris);background:color-mix(in oklab,var(--iris) 10%,var(--surface-2))}
.login-back{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:650;color:var(--txt-3);padding:5px 4px;margin-bottom:6px;border-radius:3px}
.login-back:hover{color:var(--iris)} .login-back .chev-back{width:16px;height:16px;transform:rotate(180deg)}
.gen-note{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-size:11.5px;line-height:1.5;color:var(--txt-3);
  background:color-mix(in oklab,var(--warn) 9%,transparent);border:1px solid color-mix(in oklab,var(--warn) 22%,transparent);border-radius:4px;padding:10px 12px}
.gen-note svg{width:15px;height:15px;color:var(--warn);flex:none;margin-top:1px}
.login-local{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:12px;color:var(--txt-3);font-weight:600}
.login-local svg{width:15px;height:15px;color:var(--ok)}

/* ===== DASHBOARD bento (FE-B*) ===== */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bento > *{min-width:0}
.b-span2{grid-column:span 2}.b-span3{grid-column:span 3}.b-row2{grid-row:span 2}
.hero-rec{position:relative;overflow:hidden;color:#fff;background:var(--accent-grad);padding:26px;display:flex;flex-direction:column;justify-content:space-between;min-height:210px;border:none}
.hero-rec .eyebrow{color:rgba(255,255,255,.8)}
.hero-rec h2{font-size:clamp(20px,2.2vw,27px);font-weight:700;letter-spacing:-.02em;margin-top:8px;max-width:18ch}
.hero-rec p{color:rgba(255,255,255,.82);font-size:13.5px;margin-top:6px;max-width:34ch}
.hero-rec .btn{background:#fff;color:var(--ink-2);margin-top:18px;align-self:flex-start;font-weight:750}
.hero-rec .grain{display:none}
.stat{display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:18px;min-height:0}
.stat .lbl{font-size:12.5px;color:var(--txt-2);font-weight:650;display:flex;align-items:center;gap:8px}
.stat .lbl svg{width:16px;height:16px;opacity:.8}
.stat .big{font-family:var(--mono);font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.04em;line-height:1}
.stat .sm{font-size:11.5px;color:var(--txt-3)}
.disk-track{height:9px;border-radius:9px;background:color-mix(in oklab,var(--txt-3) 20%,transparent);overflow:hidden}
.disk-track > i{display:block;height:100%;background:var(--ok)}
.recent{padding:6px}
.recent .ri{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:var(--r-sm);transition:background var(--fast);cursor:pointer}
.recent .ri:hover{background:var(--elev)}
.recent .ri + .ri{border-top:1px solid var(--hairline-2)}
.ri .ic{width:40px;height:40px;border-radius:4px;background:var(--accent-soft);display:grid;place-items:center;flex:none;color:var(--iris-300)}
:root[data-theme="light"] .ri .ic{color:var(--iris-600)}
.ri .ic svg{width:19px;height:19px}
.ri .meta{flex:1;min-width:0}
.ri .meta b{font-size:14px;font-weight:650;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri .meta span{font-size:11.5px;color:var(--txt-3)}
.ri .dur{font-family:var(--mono);font-size:12px;color:var(--txt-2)}
.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.quick a{display:flex;align-items:center;gap:11px;padding:14px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--hairline-2);font-weight:650;font-size:13.5px;transition:all var(--fast)}
.quick a:hover{border-color:var(--iris);transform:translateY(-2px);background:var(--elev)}
/* function launcher (FE-B8) */
.qlaunch{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.qfn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:104px;padding:13px 13px 10px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--hairline-2);cursor:pointer;text-align:left;transition:transform var(--med) var(--ease),border-color var(--med),box-shadow var(--med)}
.qfn::before{content:"";position:absolute;inset:0;border-radius:var(--r-md);background:var(--accent-soft);opacity:0;transition:opacity var(--med)}
.qfn:hover{border-color:var(--iris);transform:translateY(-3px);box-shadow:var(--shadow-2)}
.qfn:focus-visible{box-shadow:var(--ring);border-color:var(--iris)}
.qfn:hover::before{opacity:.5}
.qfn>*{position:relative;z-index:1}
.qfn-ic{width:38px;height:38px;border-radius:4px;display:grid;place-items:center;background:var(--accent-grad);color:#fff;flex:none;transition:transform var(--med) var(--ease)}
.qfn:hover .qfn-ic{transform:scale(1.09) rotate(-5deg)}
.qfn-ic svg{width:19px;height:19px}
.qfn-t{font-size:13.5px;font-weight:700;color:var(--txt);line-height:1.25}
.qfn-help{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--txt-3);margin-top:auto;padding:2px 2px;border-radius:2px;transition:color var(--fast),background var(--fast)}
.qfn-help:hover{color:var(--iris);background:var(--elev)} .qfn-help svg{width:12px;height:12px}
/* ===== HOME: status strip + services grid (конкурент-стиль) ===== */
.status-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px}
.ss-item{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--hairline);cursor:default;transition:border-color var(--fast),transform var(--fast)}
.ss-item[onclick]{cursor:pointer} .ss-item[onclick]:hover{border-color:var(--iris);transform:translateY(-2px)}
.ss-ic{width:38px;height:38px;border-radius:4px;display:grid;place-items:center;flex:none;background:var(--chip);color:var(--iris-300)}
:root[data-theme="light"] .ss-ic{color:var(--iris-600)}
.ss-ic.ok{background:color-mix(in oklab,var(--ok) 14%,transparent);color:var(--ok)} .ss-ic svg{width:18px;height:18px}
.ss-meta{min-width:0} .ss-meta b{font-size:13.5px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ss-meta span{font-size:11px;color:var(--txt-3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.sec-title{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.sec-title svg{width:19px;height:19px;color:var(--iris-300)} :root[data-theme="light"] .sec-title svg{color:var(--iris-600)}
/* заголовки секций «Недавно» (Записи/Чаты/Документы) — крупнее шрифт и иконка */
.desk-sec-h{font-size:17px;gap:10px} .desk-sec-h svg{width:24px;height:24px;color:var(--iris)}
:root[data-theme="light"] .desk-sec-h svg{color:var(--iris)}
.sec-toggle .chev{transition:transform var(--fast) var(--ease);transform:rotate(90deg)} .sec-toggle.is-collapsed .chev{transform:rotate(0deg)} #deskSvc.is-collapsed{display:none}
/* === Рабочий стол (Главная) === */
.desk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.desk-head h1{font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.02em}
.desk{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.desk-w{min-width:0}
/* drag-n-drop карточек «Недавно»: тащим за карточку — она блёкнет, порядок сохраняется */
.desk [data-deskcard],.desk-recent [data-deskcard]{cursor:grab;transition:opacity var(--fast),transform var(--med) var(--ease)}
.desk [data-deskcard].desk-dragging,.desk-recent [data-deskcard].desk-dragging{opacity:.4;cursor:grabbing;box-shadow:var(--shadow-2)}
.desk [data-deskcard] .dos-item,.desk [data-deskcard] button,.desk [data-deskcard] input,.desk-recent [data-deskcard] .dos-item,.desk-recent [data-deskcard] button,.desk-recent [data-deskcard] input{cursor:pointer}
/* канбан на «Главной» — без внешней .card-обёртки: колонки стоят как самостоятельные карточки */
.kanban{display:flex;gap:14px;padding:2px 2px 14px;overflow-x:auto;scrollbar-width:thin}
.kan-col{flex:1;min-width:170px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:13px;box-shadow:var(--shadow-1)}
.kan-col>.kan-card{background:var(--surface-2)}
.kan-h{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-3);margin-bottom:9px}
.kan-h span{font-family:var(--mono);font-size:11px;background:var(--chip);border-radius:2px;padding:1px 7px;color:var(--txt-2)}
.kan-card{background:var(--surface);border:1px solid var(--hairline);border-radius:4px;padding:10px 11px;margin-bottom:8px;cursor:pointer;transition:all var(--fast)}
.kan-card:last-child{margin-bottom:0}
.kan-card:hover{border-color:var(--iris);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.kan-card b{font-size:13px;font-weight:700;display:block} .kan-card>span{font-size:11.5px;color:var(--txt-3);display:block;margin-top:1px}
.kan-tag{display:inline-block;margin-top:7px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:9px}
.kan-tag.cy{background:color-mix(in oklab,var(--cyan) 16%,transparent);color:var(--cyan-600)} :root[data-theme="dark"] .kan-tag.cy{color:var(--cyan)}
.kan-tag.br{background:color-mix(in oklab,var(--brass) 18%,transparent);color:var(--brass-700)} :root[data-theme="dark"] .kan-tag.br{color:var(--brass)}
.kan-tag.warn{background:color-mix(in oklab,var(--warn) 16%,transparent);color:var(--warn)}
.kan-tag.ok{background:color-mix(in oklab,var(--ok) 15%,transparent);color:var(--ok)}
.cal-item{display:flex;align-items:flex-start;gap:12px;padding:9px 0} .cal-item+.cal-item{border-top:1px solid var(--hairline-2)}
.cal-t{font-size:12.5px;font-weight:700;color:var(--iris-300);flex:none;padding-top:1px} :root[data-theme="light"] .cal-t{color:var(--iris-600)}
.cal-item b{font-size:13px;font-weight:650;display:block} .cal-item span{font-size:11.5px;color:var(--txt-3)}
.doc-item{display:flex;align-items:center;gap:11px;padding:9px 0;cursor:pointer;transition:transform var(--fast)} .doc-item+.doc-item{border-top:1px solid var(--hairline-2)}
.doc-item:hover{transform:translateX(2px)}
.doc-ic{width:40px;height:40px;display:grid;place-items:center;background:none;color:var(--txt-2);flex:none} .doc-ic svg{width:30px;height:30px}
/* min-width:0 на текстовом контейнере — иначе flex-ребёнок не сжимается и заголовок вылезает
   за карточку (видно в «Недавно»). span тоже эллипсим. */
.doc-item>div{min-width:0;flex:1}
.doc-item b{font-size:13px;font-weight:650;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .doc-item span{font-size:11.5px;color:var(--txt-3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(200px,18vw,280px),1fr));gap:clamp(12px,1.3vw,18px)}
.svc{position:relative;display:flex;flex-direction:column;gap:10px;min-height:168px;padding:16px 16px 14px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--hairline);cursor:pointer;
  transition:transform var(--med) var(--ease),border-color var(--med),box-shadow var(--med)}
.svc::after{display:none}
.svc:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--iris) 55%,transparent);box-shadow:var(--shadow-2)}
.svc:hover::after{opacity:1}
.svc:focus-visible{box-shadow:var(--ring);border-color:var(--iris)}
/* drag-n-drop переупорядочивание: тащим плитку — она блёкнет, остальные плавно расступаются */
.svc{cursor:grab}
.svc:active{cursor:grabbing}
.svc.dragging{opacity:.45;box-shadow:var(--shadow-2);cursor:grabbing}
/* во время перетаскивания глушим hover-«подскок» соседей (курсор едет по плиткам — иначе дребезг) */
.svc-grid.svc-dnd .svc:hover{transform:none;box-shadow:none;border-color:var(--hairline)}
.svc-grid.svc-dnd .svc:hover .svc-ic{transform:none}
.svc-grid.svc-dnd .svc.dragging{box-shadow:var(--shadow-2)}
.svc>*{position:relative;z-index:1}
/* шапка плитки: иконка и название стоят рядом */
.svc-hd{display:flex;align-items:center;gap:11px;min-width:0}
.svc-ic{width:42px;height:42px;border-radius:5px;display:grid;place-items:center;background:var(--accent-grad);color:#fff;flex:none;transition:transform var(--med) var(--ease)}
.svc:hover .svc-ic{transform:scale(1.08) rotate(-5deg)} .svc-ic svg{width:21px;height:21px}
.svc{min-width:0}
.svc-hd b{font-size:14px;font-weight:750;letter-spacing:-.01em;line-height:1.2;overflow-wrap:break-word;min-width:0}
.svc p{font-size:12.5px;color:var(--txt-3);line-height:1.5;flex:1;overflow-wrap:break-word;margin:0}
.svc-foot{align-self:flex-end;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:var(--txt-3);padding:6px 11px;border-radius:9px;border:1px solid var(--hairline);background:var(--chip);transition:all var(--fast)}
.svc-foot:hover{color:var(--iris);border-color:var(--iris);background:var(--elev)}
:root[data-theme="light"] .svc-foot{color:var(--iris-600)} .svc-foot svg{width:14px;height:14px}
/* звёздочка избранного — в правом нижнем углу */
.svc-fav{position:absolute;bottom:11px;right:11px;top:auto;z-index:2;width:30px;height:30px;border-radius:4px;display:grid;place-items:center;color:var(--txt-3);transition:all var(--fast)}
.svc-fav:hover{background:var(--elev);color:var(--bad)} .svc-fav.on{color:var(--bad)} .svc-fav svg{width:17px;height:17px}
.svc-fav.on svg,.svc-fav:hover svg{fill:currentColor}
.svc-ver{position:absolute;top:16px;right:52px;z-index:2;font-size:9.5px;font-weight:700;letter-spacing:.04em;color:var(--cyan-600);background:color-mix(in oklab,var(--cyan) 16%,transparent);border:1px solid color-mix(in oklab,var(--cyan) 30%,transparent);border-radius:2px;padding:2px 6px}
:root[data-theme="dark"] .svc-ver{color:var(--cyan)}
.svc .animate-in{animation:bentoIn var(--med) var(--ease) backwards}
/* video card в модалке сервиса */
.video-card{display:flex;align-items:center;gap:13px;margin-top:14px;padding:14px;border-radius:var(--r-md);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--hairline);transition:all var(--fast)}
.video-card:hover{border-color:var(--iris);transform:translateY(-2px)}
.vc-play{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--accent-grad);color:#fff;flex:none}
.vc-play svg{width:18px;height:18px} .video-card b{font-size:13.5px;font-weight:700;display:block} .video-card span{font-size:12px;color:var(--txt-3)}
.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.swap-mid{width:34px;height:34px;border-radius:4px;display:grid;place-items:center;background:var(--chip);color:var(--txt-3);flex:none;margin-bottom:2px} .swap-mid svg{width:16px;height:16px}
.quick a svg{width:20px;height:20px;color:var(--iris-300)}
:root[data-theme="light"] .quick a svg{color:var(--iris-600)}

/* ===== RECORD WORKSPACE (FE-C*, D*, E*, F*) ===== */
/* экран записи: 2 колонки на всю ширину — слева [магнитola + транскрипт], справа ИИ (во всю высоту) */
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.ws-left{min-width:0;display:flex;flex-direction:column}
/* МАГНИТОЛА — компактный «диктофон», не на весь экран */
.magnitola{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:14px;max-width:none}
/* название текущей записи */
.mg-name-row{display:flex;align-items:center;gap:9px;margin-bottom:11px;padding-bottom:11px;border-bottom:1px solid var(--hairline-2)}
.mg-name-ic{width:30px;height:30px;border-radius:4px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--iris-300)} :root[data-theme="light"] .mg-name-ic{color:var(--iris-600)} .mg-name-ic svg{width:16px;height:16px}
.mg-name{flex:1;min-width:0;border:1px solid transparent;background:none;color:var(--txt);font-family:inherit;font-size:15px;font-weight:700;letter-spacing:-.01em;padding:5px 8px;border-radius:var(--r-sm);transition:all var(--fast)}
.mg-name:hover{background:var(--surface-2)}
.mg-name:focus{outline:none;border-color:var(--iris);background:var(--surface-2);box-shadow:var(--ring)}
.mg-name-edit{width:32px;height:32px;border-radius:4px;display:grid;place-items:center;flex:none;color:var(--txt-3);transition:all var(--fast)}
.mg-name-edit:hover{color:var(--iris);background:var(--elev)} .mg-name-edit svg{width:15px;height:15px}
.mg-transport{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
/* единственная кнопка записи — большой красный пульсирующий круг */
.mg-rec-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.mg-circle{position:relative;width:64px;height:64px;border-radius:50%;flex:none;background:var(--rec);border:none;box-shadow:0 8px 22px -8px var(--rec);cursor:pointer;display:grid;place-items:center;transition:transform var(--fast),filter var(--fast)}
.mg-circle:hover{filter:brightness(1.06)}
.mg-circle:active{transform:scale(.97)}
.mg-circle.live{animation:recpulse 1.6s var(--ease) infinite, recblink .85s ease-in-out infinite}
.mg-circle.disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.mg-circle.disabled:hover{filter:grayscale(.5)} .mg-circle.disabled:active{transform:none}
/* пауза — круг замирает, появляются две полоски */
.mg-circle.paused::before,.mg-circle.paused::after{content:"";position:absolute;top:50%;left:50%;width:5px;height:20px;border-radius:2px;background:#fff;z-index:2}
.mg-circle.paused::before{transform:translate(-50%,-50%) translateX(-5px)} .mg-circle.paused::after{transform:translate(-50%,-50%) translateX(5px)}
/* ---- кастомный аудиоплеер воспроизведения записи (#vbPlayer) ---- */
.aplayer{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 14px;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--hairline)}
.aplayer[hidden]{display:none}
.ap-play{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent-grad);color:#fff;box-shadow:0 6px 16px -8px color-mix(in oklab,var(--iris) 80%,transparent);transition:transform var(--fast)}
.ap-play:hover{transform:scale(1.06)} .ap-play svg{width:18px;height:18px}
.ap-time{font-size:12px;color:var(--txt-2);flex:none;font-variant-numeric:tabular-nums}
.ap-track{flex:1;height:6px;border-radius:3px;background:var(--hairline-2);cursor:pointer;position:relative;touch-action:none}
.ap-fill{height:100%;border-radius:3px;background:var(--accent-grad);width:0%;pointer-events:none}
.ap-rate{flex:none;font-size:12px;font-weight:700;color:var(--iris-300);background:var(--chip);border:1px solid var(--hairline);border-radius:7px;padding:5px 9px;min-width:46px;text-align:center}
.ap-rate:hover{border-color:var(--iris);color:var(--iris)} :root[data-theme="light"] .ap-rate{color:var(--iris-600)}
.ap-vol-btn{flex:none;width:30px;height:30px;border-radius:6px;display:grid;place-items:center;color:var(--txt-2);transition:color var(--fast)}
.ap-vol-btn:hover{color:var(--iris)} .ap-vol-btn svg{width:17px;height:17px}
.ap-vol{flex:0 0 64px;width:64px;height:12px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;--vol-track:var(--hairline-2)}
.ap-vol::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--vol-track)}
.ap-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-4px;width:12px;height:12px;border-radius:50%;background:var(--iris);border:none;cursor:pointer}
.ap-vol::-moz-range-track{height:4px;border-radius:2px;background:var(--vol-track)}
.ap-vol::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--iris);border:none;cursor:pointer}
@media(max-width:760px){ .ap-vol{display:none} }   /* на узких экранах прячем ползунок — кнопка mute остаётся */
/* кольцо «удержать, чтобы остановить» — заполняется по кругу за время удержания */
.mg-ring{position:absolute;inset:-6px;border-radius:50%;opacity:0;transition:opacity .12s;pointer-events:none;
  background:conic-gradient(var(--rec) calc(var(--hp,0)*1%), transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px))}
.mg-ring.holding{opacity:1}
@keyframes recpulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--rec) 55%,transparent)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes recblink{0%,100%{opacity:1}50%{opacity:.18}}
/* магнитола — 2 симметричные колонки: [запись+таймер] и [каналы] над двумя тройками кнопок */
.mg-body{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2px}
.mg-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.mg-head{display:flex;align-items:center;gap:14px;min-height:94px;background:var(--bg-2);border:1px solid var(--hairline-2);border-radius:var(--r-md);padding:13px 15px}
.mg-head .mg-readout{flex:1;min-width:0;background:none;border:none;padding:0;border-radius:0}
.mg-col>.mg-scope{flex:none;min-width:0;max-width:none;width:auto;min-height:94px}
.mg-col .cap-modes,.mg-col .rec-tools-r{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mg-body .pbtn{min-width:0;width:100%}
/* МОБИЛЬНАЯ ВЁРСТКА (P1): @media (max-width:600px){ .mg-body{grid-template-columns:1fr} } */
/* цифровой таймер + инфографика места */
.mg-readout{display:flex;flex-direction:column;gap:7px;min-width:188px;background:var(--bg-2);border:1px solid var(--hairline-2);border-radius:var(--r-md);padding:9px 13px}
.rec-timer{font-family:var(--mono);font-size:27px;font-weight:700;letter-spacing:.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.mg-usage{display:flex;flex-direction:column;gap:4px}
.mg-usage-bar{height:7px;border-radius:9px;background:color-mix(in oklab,var(--txt-3) 20%,transparent);overflow:hidden}
.mg-usage-bar>i{display:block;height:100%;border-radius:9px;background:var(--accent-grad);transition:width var(--med) var(--ease)}
.mg-usage-txt{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;color:var(--txt-2)}
/* индикатор уровня — узкие полосы, нарастающие слева→направо, с плоской отметкой пика */
.mg-scope{flex:0 1 230px;min-width:150px;max-width:250px;border-radius:5px;background:var(--bg-2);border:1px solid var(--hairline-2);position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:9px 12px}
.scope-ch{display:flex;align-items:center;gap:7px}
.scope-ch .ch-tag{font-family:var(--mono);font-size:8.5px;font-weight:700;color:var(--txt-3);opacity:.8;letter-spacing:.02em;width:15px;flex:none}
.scope-ch .vu{position:relative;flex:1;height:9px;border-radius:9px;background:color-mix(in oklab,var(--txt-3) 18%,transparent)}
.scope-ch .vu-fill{display:block;height:100%;width:3%;border-radius:9px;transition:width 90ms linear}
.scope-ch.c1 .vu-fill{background:var(--iris)} .scope-ch.c2 .vu-fill{background:var(--brass)} .scope-ch.c3 .vu-fill{background:var(--cyan-600)}
.scope-ch .vu-peak{position:absolute;top:-2px;bottom:-2px;left:3%;width:3px;border-radius:2px;background:var(--txt);opacity:.55;transition:left 180ms linear}
.mg-scope.idle .vu-fill{width:3%!important;background:var(--txt-3)!important;opacity:.45}
.mg-scope.idle .vu-peak{opacity:0}
/* лампочки статуса (зелёный/жёлтый/красный) */
.lamp{width:8px;height:8px;border-radius:50%;flex:none;background:var(--txt-3);opacity:.45}
.lamp.ok{background:var(--ok);opacity:1;box-shadow:0 0 6px -1px var(--ok)}
.lamp.warn{background:var(--warn);opacity:1;box-shadow:0 0 6px -1px var(--warn)}
.lamp.bad{background:var(--bad);opacity:1;box-shadow:0 0 7px -1px var(--bad)}
/* единый стиль кнопок-иконок (как в медиаплеере): режимы + действия */
.cap-modes{display:flex;gap:12px;flex-wrap:wrap}
.pbtn{position:relative;min-width:88px;height:46px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--surface-2);border:1px solid var(--hairline-2);color:var(--txt-2);transition:all var(--fast)}
.pbtn svg{width:24px;height:24px}
.pbtn:hover{border-color:var(--iris);color:var(--txt);transform:translateY(-1px)}
.pbtn.on{background:var(--accent-grad);border-color:transparent;color:#fff}
.pbtn .lamp{position:absolute;top:7px;right:9px;width:7px;height:7px;box-shadow:0 0 0 2px var(--surface)}
/* тех. диагностика — флайаут сбоку/снизу, НЕ растягивает магнитолу */
.rec-tech{position:absolute;top:calc(100% + 8px);right:0;width:min(560px,100%);max-height:62vh;overflow:hidden;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:14px 16px;z-index:30}
.rec-tech[hidden]{display:none}
@media(max-width:860px){.rec-tech{position:static;width:auto;max-height:none;box-shadow:none;border:none;border-top:1px solid var(--hairline-2);border-radius:0;margin-top:12px;padding:12px 0 0}}
.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:7px 20px}
.tech-row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--txt-2);cursor:default}
.tech-row .dl{flex:1}
.tech-row b{font-family:var(--mono);color:var(--txt);font-weight:600}
.tech-row .diag-ok{color:var(--ok)!important}
.mg-badges{display:flex;gap:6px;flex-wrap:wrap}
.mg-progress{display:flex;align-items:center;gap:12px;margin-top:13px}
.mg-seek{flex:1;cursor:pointer;height:8px}
.rec-tools{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;align-items:center}
.sess-head{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline-2)}
.kv{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--txt-2);background:var(--chip);border:1px solid var(--chip-brd);padding:4px 10px;border-radius:9px}
.kv b{font-family:var(--mono);color:var(--txt);font-weight:600}
.model-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:650;padding:4px 10px;border-radius:9px;
  background:color-mix(in oklab,var(--cyan) 14%,transparent);color:var(--cyan-600);border:1px solid color-mix(in oklab,var(--cyan) 30%,transparent)}
:root[data-theme="dark"] .model-badge{color:var(--cyan)}
.model-badge .d{width:6px;height:6px;border-radius:9px;background:currentColor}

/* transcript (FE-D1 split) */
.transcript{padding:18px;max-height:clamp(300px, calc(100vh - 480px), 640px);overflow:auto}
.tr-row{display:flex;margin-bottom:16px;gap:10px}
/* Собеседник 1 («вы») — справа, Собеседник 2 (отвечающий) — слева */
.tr-row.s1{flex-direction:row-reverse}
.tr-av{width:32px;height:32px;border-radius:4px;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff}
.s1 .tr-av{background:var(--iris)}
.s2 .tr-av{background:var(--brass)}
.tr-bub{max-width:78%;background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:6px;padding:11px 14px;position:relative}
.s1 .tr-bub{border-top-right-radius:5px;background:color-mix(in oklab,var(--iris) 8%,var(--surface-2))}
.s2 .tr-bub{border-top-left-radius:5px}
/* нижний колонтитул пузыря: действия (копировать/править/удалить) СЛЕВА, таймкод — справа в углу.
   order:1 на .tr-tc двигает таймкод правее действий, не трогая разметку. Имя говорящего убрано —
   сторону задаёт аватар С1/С2 + цвет. */
.tr-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px;margin-bottom:-5px}
.tr-foot .tr-tc{order:1}
/* роль решает сторону во всех режимах захвата: Юрист (s1) — всегда справа, остальные — слева (схлопывание .tr-mono снято) */
.tr-tc{font-family:var(--mono);font-size:10.5px;color:var(--txt-3);cursor:pointer;padding:1px 5px;border-radius:2px;transition:all var(--fast)}
.tr-tc:hover{background:var(--accent-soft);color:var(--iris-300)}
.tr-txt{font-size:13.5px;line-height:1.55;color:var(--txt)}
.tr-txt .unsure{background:color-mix(in oklab,var(--warn) 22%,transparent);border-bottom:1.5px dashed var(--warn);border-radius:1px;padding:0 1px;cursor:help}
/* действия реплики — в строке колонтитула, справа от таймкода (появляются на hover) */
.tr-actions{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity var(--fast)}
.tr-row:hover .tr-actions,.tr-bub:focus-within .tr-actions{opacity:1}
.tr-act{width:28px;height:28px;border-radius:3px;display:grid;place-items:center;color:var(--txt-3);transition:all var(--fast)}
.tr-act svg{width:14px;height:14px}
.tr-act:hover{background:var(--elev);color:var(--txt)}
.tr-act.del:hover{color:var(--bad);background:color-mix(in oklab,var(--bad) 12%,transparent)}
.tr-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 16px 10px;border-bottom:1px solid var(--hairline-2)}
/* заголовок транскрипта прижат к левому краю (как в чатах): перебиваем общий .tr-toolbar{flex-end}
   ниже по файлу, иначе он сдвигал «Транскрипт» вправо. Кнопки уходят вправо через space-between. */
#wsTr .tr-toolbar{justify-content:space-between} #wsTr .tr-title{margin-right:auto}
.tr-title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700} .tr-title svg{width:18px;height:18px;color:var(--iris-300)} :root[data-theme="light"] .tr-title svg{color:var(--iris-600)}
/* иконка транскрипта — в боксе наравне с иконкой записи (.mg-name-ic, 30×30) сверху */
.tr-title .tr-ic{width:30px;height:30px;border-radius:4px;display:grid;place-items:center;flex:none;background:var(--accent-soft);color:var(--iris-300)} :root[data-theme="light"] .tr-title .tr-ic{color:var(--iris-600)} .tr-title .tr-ic svg{width:18px;height:18px}
.ws-tabs-wrap{margin-bottom:14px}

/* chat panel (FE-F*, H*) */
.chat{display:flex;flex-direction:column;min-height:0;height:100%}
.chat-head{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--hairline)}
/* инструменты чата — отдельными иконками (не во всплывашке) */
.chat-tools{display:flex;align-items:center;gap:6px}
.chat-tools .iconbtn{width:34px;height:34px}
.chat-tools .iconbtn svg{width:17px;height:17px}
/* метрики ответа — мелким шрифтом прямо под ответом ИИ */
/* инфо о токенах: компактная строка БЕЗ верхнего разделителя — живёт в футере сообщения
   (.m-foot), на одной горизонтали с меню действий; во время стрима временно внутри бабла. */
.msg-stats{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;font-family:var(--mono);font-size:10.5px;color:var(--txt-3);min-width:0}
.msg-stats b{color:var(--txt-2);font-weight:600}
/* chat wrap — одна колонка; история диалогов вынесена в модальное окно (openChatHistory) */
.chat-wrap{display:grid;grid-template-columns:1fr;gap:16px;height:clamp(460px, calc(100vh - 130px), 1000px)}
/* тот же чат-виджет внутри экрана записи: справа от транскрипта, тянется по высоте колонки */
/* grid-элемент правой колонки: min-width:0, иначе minmax(auto,1fr) раздувается под min-content
   инлайн-истории диалогов (#recDlgBrowse) и колонка съедает >50% (левая сжимается). */
.chat-wrap--inrec{height:auto;min-width:0}
/* история диалогов вынесена в модальное окно (openChatHistory) — панель скрыта */
.chat-history{display:none!important}
.ch-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.hist-x{width:26px;height:26px;border-radius:3px;display:grid;place-items:center;color:var(--txt-3);transition:all var(--fast)} .hist-x:hover{background:var(--elev);color:var(--txt)} .hist-x svg{width:15px;height:15px;transform:rotate(180deg)}
.ch-list{flex:1;overflow:auto;padding:0 8px;display:flex;flex-direction:column;gap:3px}
.ch-item{padding:10px 12px;border-radius:4px;cursor:pointer;transition:all var(--fast)} .ch-item:hover{background:var(--elev)}
.ch-item.active{background:var(--accent-soft)}
.ch-item b{font-size:13px;font-weight:650;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ch-item span{font-size:11px;color:var(--txt-3)}
.ch-new{display:flex;align-items:center;justify-content:center;gap:7px;margin:8px;padding:10px;border-radius:var(--r-sm);border:1px dashed var(--hairline);color:var(--txt-2);font-size:13px;font-weight:650;transition:all var(--fast)}
.ch-new:hover{border-color:var(--iris);color:var(--iris);background:var(--elev)} .ch-new svg{width:15px;height:15px}
/* «Verba пишет пером» */
/* «Verba пишет»: перо ведёт по строке слева направо, за остриём тянется чернильный след. */
.quill-anim{display:flex;align-items:center;gap:11px;color:var(--iris-300);font-weight:650;font-size:13px}
:root[data-theme="light"] .quill-anim{color:var(--iris-600)}
/* короткая линия (≈⅓ прежней) + перо заметно «пишет»: ведёт штрихами вверх-вниз слева направо */
.quill-write{position:relative;width:32px;height:20px;flex:none}
.quill-write .qline{position:absolute;left:2px;right:2px;bottom:4px;height:2px;border-radius:2px;background:color-mix(in oklab,var(--iris) 16%,transparent);overflow:hidden}
.quill-write .qline::after{content:"";position:absolute;inset:0;border-radius:2px;background:linear-gradient(90deg,var(--iris-600),var(--iris-300));transform-origin:left;animation:qInk 1.6s var(--ease) infinite}
.quill-write .qpen{position:absolute;left:0;bottom:4px;width:15px;height:15px;color:var(--iris);filter:drop-shadow(0 1px 2px color-mix(in oklab,var(--iris) 50%,transparent));animation:qPen 1.6s var(--ease) infinite;transform-origin:bottom left}
@keyframes qInk{0%{transform:scaleX(0)}66%{transform:scaleX(1)}88%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes qPen{
  0%{transform:translateX(0) translateY(0) rotate(-9deg)}
  14%{transform:translateX(3px) translateY(-3px) rotate(-1deg)}
  28%{transform:translateX(6px) translateY(0) rotate(-9deg)}
  42%{transform:translateX(9px) translateY(-3px) rotate(-1deg)}
  56%{transform:translateX(12px) translateY(0) rotate(-9deg)}
  66%{transform:translateX(15px) translateY(-2px) rotate(-5deg)}
  80%{transform:translateX(15px) translateY(0) rotate(-7deg);opacity:1}
  100%{transform:translateX(15px) translateY(0) rotate(-7deg);opacity:0}}
.quill-msg{line-height:1.2}
/* «Verba пишет» — индикатор ожидания ответа ИИ: оставляем его живым даже при
   prefers-reduced-motion (как .mg-circle.live / .name-regen.busy), иначе глобальный
   killer `*{animation:none!important}` (см. ниже) замораживает перо во всех чатах. */
@media (prefers-reduced-motion:reduce){
  .quill-write .qpen{animation:qPen 1.6s var(--ease) infinite !important}
  .quill-write .qline::after{animation:qInk 1.6s var(--ease) infinite !important}
}
.chat-stream{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:16px}
.msg{display:flex;gap:11px;max-width:94%}
/* чат, привязанный к записи (#recChat): пузырь и действия — как в транскрипте (та же ширина 78%) */
#recChat .msg{max-width:78%}
/* инлайн-история диалогов записи: показываем ВМЕСТО пустого чата (#recChat) при выборе записи.
   Ровно одно из двух видно, управляется классом .rec-browsing на #wsAi. */
#recDlgBrowse{display:none;flex-direction:column;min-height:0;min-width:0;flex:1;padding:18px 18px 6px}
#recDlgBrowse .rec-hist-list{flex:1;min-height:0;min-width:0;overflow:auto}
#recDlgBrowse .hist-search input{min-width:0}   /* input не должен распирать колонку */
#wsAi.rec-browsing #recChat{display:none}
#wsAi.rec-browsing #recDlgBrowse{display:flex}
.msg.me{flex-direction:row-reverse;align-self:flex-end}
.msg .m-av{width:30px;height:30px;border-radius:4px;flex:none;display:grid;place-items:center}
.msg.ai .m-av{background:var(--accent-grad)} .msg.ai .m-av svg{width:17px;height:17px;color:#fff}
.msg.me .m-av{background:var(--surface-3);font-size:11px;font-weight:700;color:var(--txt-2)}
.m-body{position:relative;background:var(--surface-2);border:1px solid var(--hairline-2);border-radius:6px;padding:12px 14px;font-size:13.5px;line-height:1.55}
/* SVG-рисунок из ответа ИИ — рендерится прямо в чате */
.svg-render{margin:10px 0;padding:10px;background:#fff;border:1px solid var(--hairline-2);border-radius:6px;display:flex;justify-content:center;overflow:auto}
.svg-render svg{max-width:100%;height:auto}
/* блок кода (не-SVG фенс) */
.md-code{margin:8px 0;padding:10px 12px;background:var(--surface-3,var(--elev));border:1px solid var(--hairline-2);border-radius:6px;overflow:auto;font-family:var(--mono);font-size:12px;line-height:1.5;white-space:pre}
.md-code code{white-space:pre}
/* копировать сообщение — только у длинных реплик (>600 симв.), появляется при наведении.
   Кнопка свисает под пузырём (bottom:-12px); снизу резервируем место, чтобы ей всегда хватало
   пространства и она не наезжала на следующую реплику. */
.m-body:has(> .m-copy),.m-body:has(> .m-srcbtn){margin-bottom:16px}
/* футер реплики чата ИИ: действия (видны при наведении, как у транскрипта) + время.
   Кнопка «источники» переезжает сюда слева и остаётся видимой. */
.m-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:6px;margin-bottom:-5px}
/* токены/источники прижаты влево, меню действий + время — вправо (одна горизонталь) */
.m-actions{display:flex;align-items:center;gap:2px;margin-left:auto;opacity:0;transition:opacity var(--fast)}
.msg:hover .m-actions,.msg:focus-within .m-actions{opacity:1}
.m-time{font-family:var(--mono);font-size:10.5px;color:var(--txt-3);flex:none;    padding: 1px 5px;}
.m-foot .m-srcbtn{position:static;bottom:auto;right:auto;box-shadow:none;height:26px}
.m-copy{position:absolute;bottom:-10px;right:8px;width:24px;height:24px;border-radius:5px;display:grid;place-items:center;color:var(--txt-3);background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--shadow-1);opacity:0;transition:opacity var(--fast),color var(--fast),border-color var(--fast);z-index:3}
.msg.me .m-copy{right:auto;left:8px}
.msg:hover .m-copy,.msg:focus-within .m-copy,.m-copy:focus-visible{opacity:1}
.m-copy:hover{color:var(--iris);border-color:var(--iris)}
.m-copy svg{width:13px;height:13px}
/* источники — свёрнуты по умолчанию, кнопка-переключатель слева от «копировать» */
.m-srcbtn{position:absolute;bottom:-10px;right:38px;height:24px;padding:0 7px;border-radius:5px;display:inline-flex;align-items:center;gap:4px;color:var(--txt-3);background:var(--surface);border:1px solid var(--hairline);box-shadow:var(--shadow-1);font-size:11px;font-weight:700;line-height:1;transition:color var(--fast),border-color var(--fast);z-index:3}
.m-srcbtn svg{width:13px;height:13px}
.m-srcbtn .m-srcn{font-family:var(--mono)}
.m-srcbtn:hover,.m-srcbtn.open{color:var(--cyan-600);border-color:var(--cyan-600)}
.m-sources[hidden]{display:none}
.m-sources .sources{margin-top:10px}
.msg.me .m-body{background:var(--accent-soft);border-color:transparent}
/* P1-12: единые квадратные пузыри — без асимметричного «хвоста»-декорации */
.think{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--cyan-600);font-weight:650}
:root[data-theme="dark"] .think{color:var(--cyan)}
.think .dots{display:inline-flex;gap:3px}
.think .dots i{width:6px;height:6px;border-radius:9px;background:currentColor;animation:blink 1.2s infinite}
.think .dots i:nth-child(2){animation-delay:.2s}.think .dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
/* потоковый рендер (ответ И размышления, см. blockStreamer): завершённые блоки — отрендеренный
   markdown (.t-blk, display:contents не влияет на раскладку), живой растущий блок (.t-tail) —
   сырой дописываемый текст (append-only), pre-wrap сохраняет переносы до финализации в markdown */
.t-blk{display:contents}
.t-tail{white-space:pre-wrap;word-break:break-word}
.reason{margin-top:8px;border:1px dashed var(--hairline);border-radius:4px;overflow:hidden}
.reason summary{font-size:12px;font-weight:650;color:var(--txt-2);padding:8px 12px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:7px}
.reason summary::-webkit-details-marker{display:none}
.reason summary svg{width:14px;height:14px;transition:transform var(--fast);flex:none}
.reason[open] summary svg{transform:rotate(90deg)}
.reason .rc{padding:0 12px 11px;font-size:12px;color:var(--txt-3);line-height:1.6}
/* LM-Studio-style: пока размышления идут — метка «переливается» (класс .streaming ставит app.js).
   Каноничный shiny-text: бегущий блик прогоняем через background-position (надёжно анимируется
   в Chromium при background-clip:text). reduced-motion НЕ глушим — эффект запрошен явно. */
.reason.streaming .rlabel{background:linear-gradient(90deg,var(--txt-3) 20%,var(--txt) 45%,#fff 50%,var(--txt) 55%,var(--txt-3) 80%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:reasonShimmer 1.4s linear infinite;will-change:background-position}
@keyframes reasonShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
/* свёрнутый живой превью: последние ~3.6 строки с затуханием сверху (перебиваем UA-скрытие).
   В новых Chromium тело свёрнутого <details> прячется через ::details-content
   (content-visibility:hidden) — раскрываем именно его, иначе .rc остаётся невидимым.
   В старых Chromium ::details-content нет, а тело прячется display:none на .rc — держим оба. */
.reason.streaming:not([open])::details-content{content-visibility:visible;display:block}
.reason.streaming:not([open]) .rc{display:block;max-height:5.76em;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 2.2em);mask-image:linear-gradient(to bottom,transparent 0,#000 2.2em)}
/* развёрнутый во время стрима — не распираем чат, длинные размышления скроллятся */
.reason.streaming[open] .rc{max-height:40vh;overflow:auto}
.sources{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.src{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:4px;background:var(--surface);border:1px solid var(--hairline-2);font-size:12px;cursor:pointer;transition:all var(--fast)}
.src:hover{border-color:var(--cyan-600);transform:translateX(2px)}
.src .sn{font-family:var(--mono);font-size:10px;font-weight:700;color:#fff;background:var(--cyan-600);border-radius:2px;padding:1px 6px;flex:none;margin-top:1px}
.src b{font-weight:650;display:block} .src span{color:var(--txt-3)}
.src>div{flex:1;min-width:0}
/* «убрать» лишнюю ссылку на нормативку (обогащение) */
.src-x{flex:none;align-self:center;width:20px;height:20px;border-radius:4px;display:grid;place-items:center;color:var(--txt-3);font-size:16px;line-height:1;opacity:0;transition:all var(--fast)}
.src:hover .src-x{opacity:.7} .src-x:hover{opacity:1;color:var(--bad);background:color-mix(in oklab,var(--bad) 14%,transparent)}
.src .score{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--cyan-600)}
.chat-foot{padding:14px 16px 13px;border-top:1px solid var(--hairline)}
.chat-title-sm{font-size:13.5px;font-weight:700;color:var(--txt-2);margin-left:2px}
/* редактируемый заголовок диалога (зеркало .mg-name): тянется на свободное место (НЕ фикс.
   ширина — иначе ломает узкую панель rec-чата в сплит-вью), без хрома инпута пока не в фокусе.
   flex:1 + min-width:0 + own width:auto перебивают дефолтную intrinsic-ширину инпута (~20ch). */
.chat-title-edit{flex:1 1 auto;width:auto;min-width:0;border:1px solid transparent;background:none;font-family:inherit;letter-spacing:-.01em;padding:4px 7px;border-radius:var(--r-sm);transition:background var(--fast),border-color var(--fast),box-shadow var(--fast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-title-edit:hover{background:var(--surface-2)}
.chat-title-edit:focus{outline:none;border-color:var(--iris);background:var(--surface-2);box-shadow:var(--ring);color:var(--txt)}
/* поле имени + кнопка ИИ-регенерации (✨), появляющаяся при наведении на поле (запись/чат) */
.name-field{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
.name-field>input{flex:1 1 auto;min-width:0;padding-right:30px}
.name-regen{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;border:0;background:none;color:var(--txt-2);cursor:pointer;border-radius:5px;opacity:1;pointer-events:auto;transition:opacity var(--fast),color var(--fast),background var(--fast)}
.name-regen:hover{color:var(--iris);background:var(--elev)}
/* ✨ слегка крупнее (17px) + сдвиг влево-вниз: «ink» иконки (большая звезда) смещён вверх-вправо
   в её viewBox, поэтому без сдвига она кажется нецентрированной в кнопке */
.name-regen svg{width:17px;height:17px;transform:translate(-4px,1px)}
/* во время генерации: сама ✨ неподвижна, а ВОКРУГ неё крутится кольцо-спиннер (::after) */
.name-regen.busy{opacity:1;pointer-events:none;color:var(--iris)}
.name-regen.busy::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--hairline);border-top-color:var(--iris);animation:toastspin .7s linear infinite}
.chat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.chat-chips:empty{display:none}
.comp-attach{width:40px;height:40px;border-radius:5px;display:grid;place-items:center;color:var(--txt-2);flex:none;transition:all var(--fast);align-self:flex-end}
.comp-attach:hover{color:var(--iris);background:var(--elev)} .comp-attach svg{width:23px;height:23px}
/* голосовой ввод (press-and-hold): прозрачная кнопка-микрофон слева от «отправить». */
.comp-mic{width:36px;height:36px;border-radius:4px;display:grid;place-items:center;color:var(--txt-3);background:none;flex:none;transition:all var(--fast);align-self:flex-end;touch-action:none;-webkit-user-select:none;user-select:none}
.comp-mic:hover{color:var(--iris);background:var(--elev)} .comp-mic svg{width:18px;height:18px}
.comp-mic.rec{color:#fff;background:var(--bad);animation:recblink .85s ease-in-out infinite}
/* оверлей записи поверх композера: красная точка + таймер + подсказка (как в Telegram) */
.comp-rec{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 12px;background:var(--surface-2);border-radius:var(--r-md);z-index:4;pointer-events:none;font-size:12.5px;color:var(--txt-2)}
.comp-rec-dot{width:10px;height:10px;border-radius:50%;background:var(--bad);flex:none;animation:recblink .85s ease-in-out infinite}
.comp-rec-time{font-weight:700;color:var(--txt)}
.comp-rec-hint{margin-left:auto;color:var(--txt-3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comp-rec.cancel{color:var(--bad)} .comp-rec.cancel .comp-rec-hint{color:var(--bad)} .comp-rec.cancel .comp-rec-dot{background:var(--bad);opacity:.5}
.composer{position:relative;display:flex;align-items:flex-end;gap:6px;background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-md);padding:6px 8px 6px 6px;transition:border var(--fast)}
.composer:focus-within{border-color:var(--iris);box-shadow:0 0 0 3px color-mix(in oklab,var(--iris) 16%,transparent)}
.composer textarea:focus,.composer textarea:focus-visible{box-shadow:none!important;outline:none}
.composer textarea{flex:1;border:none;background:none;color:var(--txt);font-family:inherit;font-size:13.5px;resize:none;max-height:96px;line-height:1.5;padding:7px 0;outline:none}
.composer .send{width:38px;height:38px;border-radius:4px;background:var(--accent-grad);display:grid;place-items:center;flex:none;transition:all var(--fast)}
.composer .send:hover{filter:brightness(1.08);transform:translateY(-1px)} .composer .send svg{width:18px;height:18px;color:#fff;transition:transform var(--med) var(--ease)}
.composer .send:hover svg{transform:translate(1px,-2px) rotate(-10deg)}
.composer .send:active svg{transform:translate(3px,-5px) rotate(-16deg) scale(.9)}
/* режим «Стоп» во время генерации — кнопка отправки превращается в стоп (красная, без анимации) */
.composer .send.is-stop{background:var(--bad)} .composer .send.is-stop:hover{filter:brightness(1.06)}
.composer .send.is-stop svg{fill:#fff;stroke:#fff} .composer .send.is-stop:hover svg,.composer .send.is-stop:active svg{transform:none}
/* пометка об остановленной генерации под частичным ответом */
.gen-stopped{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--txt-3)} .gen-stopped .ico{width:13px;height:13px;color:var(--bad);fill:var(--bad)}
.attach-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:9px;background:var(--accent-soft);color:var(--txt);border:1px solid var(--chip-brd)}
.attach-chip svg{width:14px;height:14px;color:var(--iris-300)} .attach-chip .x{cursor:pointer;opacity:.6} .attach-chip .x:hover{opacity:1}
.attach-chip .att-seg{display:inline-flex;gap:1px;margin-left:2px;border-radius:6px;overflow:hidden;background:var(--chip-brd)}
.attach-chip .att-seg>span{cursor:pointer;font-size:12px;line-height:1;padding:2px 5px;opacity:.5;filter:grayscale(1)} .attach-chip .att-seg>span:hover{opacity:.85;filter:none}
.attach-chip .att-seg>span.on{opacity:1;filter:none;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--iris)}
.attach-chip[onclick]{cursor:pointer} .attach-chip[onclick]:hover{border-color:var(--iris);color:var(--txt)}
/* P2-17: «Контекст» прижат к левому краю — полоса фиксированной ширины (не растягивается на
   всю строку, не расталкивает подпись и счётчик токенов по краям). justify-content:flex-start. */
/* «Контекст» — отдельная нижняя полоса подвала: тонкий разделитель сверху + ОДИНАКОВЫЕ
   отступы сверху (padding-top) и снизу (padding-bottom .chat-foot = 13px). Чуть крупнее шрифт
   и более высокая шкала → строка дышит и заполняет ширину подвала целиком. */
.mem{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--txt-3);margin-top:13px;padding-top:13px;border-top:1px solid var(--hairline)}
/* компактный якорь подсказки — только {AI}+«Контекст»: тултип всплывает прямо над ними,
   а не по центру всей строки (которая тянется на всю ширину подвала). */
.mem .mem-tip{display:inline-flex;align-items:center;gap:11px;flex:none;cursor:help}
.mem .bar{flex:1;height:7px}   /* контекст на всю ширину подвала чата */
/* P2-14: нейтрализуем «коричневый» стоковый аудио-плеер — серый, без ярких акцентов */
audio#vbAudio{filter:grayscale(1);background:var(--bg-2);border:1px solid var(--hairline-2);border-radius:var(--r-md)}
:root[data-theme="dark"] audio#vbAudio{color-scheme:dark}

/* Запись: транскрипт и чат «во всю высоту» — нижний край прижат к низу окна,
   прокрутка внутри каждого. Только для 2-колоночной раскладки (≥1081px); при
   ≤1080px колонки складываются друг под друга, при ≤760px — вкладки. */
@media (min-width:1081px){
  #screen-rec.screen.active{display:flex;flex-direction:column;height:100%;min-height:0}
  #screen-rec .rec-grid{flex:1;min-height:0;grid-template-rows:1fr}
  #screen-rec .ws-left{min-height:0}
  /* левая колонка: карточка транскрипта забирает остаток высоты под магнитолой */
  #screen-rec #wsTr{flex:1;min-height:0;display:flex;flex-direction:column}
  #screen-rec .transcript{flex:1;min-height:0;max-height:none}
  /* правая колонка: чат тянется на всю высоту строки, лента .chat-stream скроллится.
     flex-колонка (а не grid) — единственный надёжный способ растянуть .chat на всю высоту */
  #screen-rec .chat-wrap--inrec{min-height:0;display:flex;flex-direction:column}
  #screen-rec .chat-wrap--inrec>.chat{flex:1;min-height:0;height:auto}

  /* Генератор документов — φ-раскладка (золотое сечение): слева колонка «плитки (сверху) +
     история документов (снизу)», справа во всю высоту чат с юристом. Левая:правая = 1:φ. */
  #screen-docs.screen.active{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}
  #screen-docs .docgen-grid{flex:1;min-height:0;display:grid;grid-template-columns:38.2fr 61.8fr;gap:21px}
  #screen-docs .docgen-left{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:21px}
  #screen-docs #docFeats{min-height:0}
  #screen-docs #docFeats .svc{aspect-ratio:1;min-height:0;height:auto;overflow:hidden}
  #screen-docs #docHistPane{min-height:0;display:flex;flex-direction:column}
  #screen-docs #docHistPane .doc-hist-list{flex:1;min-height:0}
  #screen-docs #docsChatWrap{min-width:0;min-height:0;display:flex;flex-direction:column}
  #screen-docs #docsChatWrap>.chat{flex:1;min-height:0;height:auto}

  /* РАБОЧИЙ СТОЛ — сетка на φ/Фибоначчи. Плашки СТРОГО КВАДРАТНЫЕ (aspect-ratio:1), auto-fill
     заполняет ширину. Канбан заточен под 4 карточки БЕЗ внутреннего скролла; если карточек
     больше — контент растёт и прокручивается СТРАНИЦА целиком (скроллбар справа). */
  #screen-dash.screen.active{display:flex;flex-direction:column;min-height:100%;overflow-y:auto;overflow-x:hidden}
  #screen-dash>.desk-head{flex:none}
  #screen-dash>.dash-bento{flex:1 0 auto;min-height:0;display:grid;
    grid-template-columns:minmax(0,1fr) clamp(288px,21vw,377px);gap:21px;align-content:stretch}
  .dash-main{min-width:0;display:flex;flex-direction:column;gap:21px}
  .dash-main>#deskSvc.svc-grid{grid-auto-rows:auto;align-content:start}
  .dash-main>#deskSvc .svc{aspect-ratio:1;min-height:0;height:auto;overflow:hidden}
  /* канбан заполняет остаток высоты левой колонки: колонки-доски тянутся до низа, карточки
     сверху. Заточен под 4 карточки; если их больше и контент выше вьюпорта — скроллит страница. */
  .dash-main>#deskCasesBody{flex:1 0 auto;min-height:0;display:flex;flex-direction:column}
  .dash-main #deskKanban{flex:1;overflow-x:auto;overflow-y:visible}
  .dash-main #deskKanban .kan-col{max-height:none;overflow:visible;min-height:100%}
  .dash-side{min-width:0;display:flex;flex-direction:column}
  .dash-side>#deskActual{flex:1;min-height:0}
  /* три карточки «Недавно» делят высоту сайдбара поровну; лишние строки скрываются (без скролла) */
  .dash-side .desk-recent .desk-w{flex:1;min-height:0;display:flex;flex-direction:column}
  .dash-side .desk-recent .desk-w .spread{flex:none}
  .dash-side .desk-recent .desk-w>div:last-child{flex:1;min-height:0;overflow:hidden}
}
/* 4 колонки держим весь десктопный диапазон: 16 плиток → ровно 4 ряда (выше, чем при 3 кол.,
   где было бы 6 рядов и описание схлопывалось). По ширине 4 кол. читаемы и на ~1280px. */

/* KB (FE-G*, H3) */
.kb-search{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.search-box{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--hairline);transition:all var(--fast)}
.search-box:focus-within{border-color:var(--iris);box-shadow:var(--ring)}
.search-box svg{width:20px;height:20px;color:var(--txt-3);flex:none}
.search-box input{flex:1;border:none;background:none;color:var(--txt);font-size:14.5px;font-family:inherit;outline:none}
.search-box .kbd{font-family:var(--mono);font-size:11px;color:var(--txt-3);border:1px solid var(--hairline);border-radius:2px;padding:2px 6px}
.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.codex{padding:18px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--hairline);cursor:pointer;transition:all var(--fast);position:relative;overflow:hidden}
.codex:hover{border-color:var(--iris);transform:translateY(-3px);box-shadow:var(--shadow-2)}
.codex .ci{width:42px;height:42px;border-radius:5px;display:grid;place-items:center;margin-bottom:12px;background:var(--accent-soft);color:var(--iris-300)}
:root[data-theme="light"] .codex .ci{color:var(--iris-600)}
.codex .ci svg{width:21px;height:21px}
.codex b{font-size:14.5px;font-weight:700;display:block} .codex span{font-size:12px;color:var(--txt-3)}
.codex .cnt{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:11px;color:var(--txt-3)}
.import-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:18px}
.import-card{padding:18px;border-radius:var(--r-md);border:1.5px dashed var(--hairline);background:var(--surface-2);display:flex;gap:13px;align-items:center;cursor:pointer;transition:all var(--fast)}
.import-card:hover{border-color:var(--iris);background:var(--elev)}
.import-card .ic{width:44px;height:44px;border-radius:5px;display:grid;place-items:center;flex:none}
.import-card .ic svg{width:21px;height:21px}
.import-card b{font-size:14px;font-weight:700;display:block} .import-card span{font-size:12px;color:var(--txt-3)}

/* METRICS (FE-U*, Q1) */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.spark{display:flex;align-items:flex-end;gap:3px;height:46px;margin-top:10px}
.spark i{flex:1;border-radius:1px 1px 0 0;background:var(--accent-grad);opacity:.85;transition:height var(--med) var(--ease)}
.q-item{display:flex;align-items:center;gap:12px;padding:12px 0}
.q-item + .q-item{border-top:1px solid var(--hairline-2)}
.q-item .qn{width:30px;height:30px;border-radius:4px;background:var(--chip);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--txt-2);flex:none}
.q-item .qbar{flex:1;height:7px}
.diag{display:flex;align-items:center;justify-content:space-between;padding:11px 0;font-size:13.5px}
.diag + .diag{border-top:1px solid var(--hairline-2)}
.diag .dl{display:flex;align-items:center;gap:10px;color:var(--txt-2);font-weight:600}
.diag .dl svg{width:17px;height:17px}

/* settings / guide */
.set-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--chip);border:1px solid var(--chip-brd);border-radius:var(--r-pill);margin-bottom:18px;max-width:100%}
.set-tabs button{height:34px;padding:0 16px;border-radius:9px;font-size:13.5px;font-weight:650;color:var(--txt-2);white-space:nowrap;transition:all var(--fast);flex:none}
.set-tabs button.on{background:var(--surface);color:var(--txt);box-shadow:var(--shadow-1)}
:root[data-theme="dark"] .set-tabs button.on{background:var(--surface-3)}
.set-panel{display:none;animation:fade var(--med) var(--ease)}
.set-panel.on{display:block}
.adv-placeholder{text-align:center;padding:26px 20px;display:flex;flex-direction:column;align-items:center;gap:10px}
.adv-ic{width:54px;height:54px;border-radius:6px;display:grid;place-items:center;background:var(--accent-soft);color:var(--iris-300)} :root[data-theme="light"] .adv-ic{color:var(--iris-600)} .adv-ic svg{width:26px;height:26px}
.adv-placeholder b{font-size:16px} .adv-placeholder p{max-width:48ch}
.set-list .set{display:flex;align-items:center;gap:14px;padding:16px 0}
.set-list .set + .set{border-top:1px solid var(--hairline-2)}
.set .si{width:40px;height:40px;border-radius:4px;background:var(--accent-soft);display:grid;place-items:center;color:var(--iris-300);flex:none}
:root[data-theme="light"] .set .si{color:var(--iris-600)} .set .si svg{width:19px;height:19px}
.set .meta{flex:1} .set .meta b{font-size:14.5px;font-weight:650;display:block} .set .meta span{font-size:12.5px;color:var(--txt-3)}
.switch{width:46px;height:27px;border-radius:9px;background:var(--surface-3);border:1px solid var(--hairline);position:relative;transition:background var(--fast);flex:none}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:#fff;transition:transform var(--fast);box-shadow:var(--shadow-1)}
.switch.on{background:var(--accent-grad)} .switch.on::after{transform:translateX(19px)}
.faq{border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden;margin-bottom:10px;background:var(--surface)}
.faq summary{padding:16px 18px;font-weight:650;font-size:14.5px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{width:22px;height:22px;border-radius:3px;background:var(--chip);display:grid;place-items:center;transition:transform var(--fast);flex:none}
.faq[open] summary .pl{transform:rotate(45deg)} .faq summary .pl svg{width:14px;height:14px}
.faq .fc{padding:0 18px 18px;color:var(--txt-2);font-size:13.5px;line-height:1.6}
.step{display:flex;gap:14px;padding:14px 0}
.step .num{width:30px;height:30px;border-radius:4px;background:var(--accent-grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.step b{font-size:14px;font-weight:650;display:block} .step span{font-size:13px;color:var(--txt-3)}