/* Fix Price VPN — client cabinet design system (sidebar / cards / sage-teal) */
:root{
  --acc:#3bb3cf; --acclt:#84d7e9;
  --brand-coral:var(--coral); --brand-cyan:var(--acclt);
  --card:var(--surface); --card2:var(--surface-2); --line:var(--border);
  --tx:var(--text); --mut:var(--muted);
  --green:#10b981; --amber:#f97316; --red:#f26d6d;
  --coral:#ff6476;
  --bg:#0b0f17; --surface:#141c2b; --surface-2:#0f1520; --field:#0d121c;
  --text:#e2e8f0; --muted:#8899a8; --dim:#5a6a7d;
  --border:rgba(255,255,255,.06); --border-2:rgba(255,255,255,.10);
  --success:var(--green); --danger:var(--red); --warn:var(--amber);
  --radius:12px; --radius-lg:18px; --radius-sm:10px;
  --gap:14px;
  --sidebar-w:250px; --topbar-h:64px;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-h:'Montserrat',system-ui,sans-serif;
}
:root[data-theme="light"]{
  --brand-cyan:#0e94ba;
  /* тёмные варианты циан-акцентов: ссылки/nav/idlink используют --acclt/--acc, иначе бледно на белом */
  --acc:#1596b3; --acclt:#0e8fa8;
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#eef1f5; --field:#f0f3f7;
  --text:#141a22; --muted:#5b6773; --dim:#8a97a4;
  --border:rgba(0,0,0,.09); --border-2:rgba(0,0,0,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;touch-action:manipulation}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--acclt);text-decoration:none}
button{font-family:var(--font);cursor:pointer;color:inherit}
button,.fp-navitem,.btn,.btn-acc,.btn-red,.chip,.pill,.fp-btn,.fp-info,.fp-burger,.fp-iconbtn,.cta,.radio,.toggle,.pm,.tab,.fp-tab,[data-nav],[data-act],[data-buy],[data-pm],[data-amt]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.h{font-family:var(--font-h);letter-spacing:-.01em}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.hidden{display:none!important}

/* layout */
.fp-app{min-height:100vh;display:flex}
.fp-sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--surface-2);border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.fp-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fp-topbar{height:var(--topbar-h);flex:0 0 var(--topbar-h);display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 24px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;background:var(--bg)}
.fp-ptitle{margin:0 auto 0 0;font-family:var(--font-h);font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.fp-content{flex:1;padding:4px 32px 36px;max-width:1120px;width:100%;margin:0 auto}
.fp-burger{display:none;width:38px;height:38px;margin-left:-6px;border-radius:10px;border:none;background:transparent;color:var(--text);align-items:center;justify-content:center;flex:0 0 auto}
.fp-burger:hover{background:rgba(255,255,255,.05)}
.fp-burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fp-backdrop{display:none}
@media(max-width:900px){
  .fp-content{padding:6px 16px 32px}.fp-topbar{padding:0 14px}.fp-uinfo-email{display:none}
  .fp-burger{display:inline-flex}
  .fp-sidebar{display:flex;position:fixed;top:0;left:0;height:100vh;z-index:120;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 18px 50px rgba(0,0,0,.45)}
  .fp-sidebar.open{transform:translateX(0)}
  .fp-backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:110}
}

/* brand */
.fp-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:4px 8px}
.fp-logo{width:52px;height:52px;color:#eafffb;display:flex;align-items:center;justify-content:center;flex:0 0 52px}
.fp-logo svg{width:26px;height:26px}
.fp-logo img{width:100%;height:100%;object-fit:contain;display:block}
.fp-brand-name{font-weight:700;font-size:16px}
.fp-brand-sub{font-size:13px;color:var(--muted);margin-top:2px}
/* wordmark FIX PRICE VPN — цвета основного сайта */
.fp-wm{font-weight:800;letter-spacing:.02em}
.fp-wm-p{color:var(--brand-coral)}
.fp-wm-v{color:var(--brand-cyan)}

/* nav */
.fp-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.fp-navitem{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:11px;color:var(--muted);font-weight:500;font-size:14px;transition:.13s;cursor:pointer;border:none;background:transparent;text-align:left;width:100%}
.fp-navitem .ico{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;color:var(--dim)}
.fp-navitem .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fp-navitem:hover{background:rgba(255,255,255,.045);color:var(--text)}
.fp-navitem:hover .ico{color:var(--muted)}
.fp-navitem.active{background:rgba(132,215,233,.16);color:var(--acclt)}
.fp-navitem.active .ico{color:var(--acclt)}
.fp-nav-dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--coral);flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,100,118,.18)}
/* FAQ-аккордеон (раздел «Помощь») */
.fp-faq-item{border:1px solid var(--border);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--surface);transition:border-color .15s}
.fp-faq-item.open{border-color:rgba(59,179,207,.4)}
.fp-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:transparent;border:none;text-align:left;font-weight:600;font-size:14.5px;color:var(--text);cursor:pointer;overflow-wrap:anywhere}
.fp-faq-q svg{flex:0 0 auto;color:var(--muted);transition:transform .2s}
.fp-faq-item.open .fp-faq-q{color:var(--acc)}
.fp-faq-item.open .fp-faq-q svg{transform:rotate(180deg);color:var(--acc)}
.fp-faq-a{padding:2px 16px 16px;font-size:14px;line-height:1.65;color:var(--tx)}
.fp-faq-a a{color:var(--acclt);text-decoration:none;font-weight:600}
.fp-faq-a b{color:var(--text)}
.fp-faq-a code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:13px;background:var(--surface-2);border:1px solid var(--border);padding:2px 8px;border-radius:7px;cursor:pointer;transition:.12s;line-height:2;display:inline-block;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.fp-faq-a code::after{content:"⧉";font-size:11px;opacity:.5;margin-left:6px}
.fp-faq-a code:hover{border-color:var(--coral);color:var(--coral)}
.fp-faq-a code.copied{background:rgba(16,185,129,.15);border-color:var(--green);color:var(--green)}
.fp-faq-a code.copied::after{content:"✓";opacity:1}
.fp-code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:14px;background:var(--surface-2);border:1px solid var(--border);padding:1px 7px;border-radius:6px;cursor:pointer;transition:.12s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.fp-code:hover{border-color:var(--coral);color:var(--coral)}
.fp-code.copied{background:rgba(16,185,129,.15);border-color:var(--green);color:var(--green)}
.fp-faq-imgs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fp-faq-thumb{width:84px;height:84px;object-fit:cover;border-radius:10px;cursor:zoom-in;border:1px solid var(--border);background:var(--surface-2);transition:transform .12s,border-color .12s}
.fp-faq-thumb:hover{transform:scale(1.05);border-color:rgba(59,179,207,.5)}
/* кликабельный id подписки в уведомлениях */
.fp-idlink{color:var(--acclt);border-bottom:1px dashed currentColor;cursor:pointer;font-weight:600;white-space:nowrap}
.fp-idlink:hover{color:var(--acc)}
/* подсветка карточки при переходе из уведомления */
@keyframes fpflash{0%{box-shadow:0 0 0 2px var(--acc) inset,0 0 0 4px rgba(255,100,118,.25)}100%{box-shadow:0 0 0 0 transparent}}
.fp-flash{animation:fpflash 1.8s ease}
.fp-avatar{width:34px;height:34px;border-radius:9px;background:rgba(132,215,233,.14);color:var(--acclt);font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 34px}

/* util cluster (top-right) */
.fp-uinfo{color:var(--muted);font-size:14px}
.fp-uinfo b{color:var(--text);font-weight:700}
#fp-logout{color:var(--coral)}
#fp-bal{transition:color .13s}
#fp-bal:hover b{color:var(--coral)}

/* cards / panels */
.fp-card,.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px}
.fp-card-title{font-family:var(--font-h);font-size:17px;font-weight:600}
.fp-card-sub{font-size:14px;color:var(--muted);margin-top:6px}
.fp-panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;gap:12px}

/* grid */
.fp-grid{display:grid;gap:var(--gap)}
.fp-grid-2{grid-template-columns:1fr 1fr}
.fp-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fp-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.fp-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.fp-grid-2,.fp-grid-3,.fp-grid-4{grid-template-columns:1fr}}
/* нижний таб-бар (мобильный) — отдельные плавающие кнопки */
.fp-tabbar{display:none}
.fp-tab-item{flex:0 0 auto;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:color .13s,border-color .13s;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.fp-tab-item.active{color:var(--acclt);border-color:rgba(132,215,233,.5)}
/* нижний таб-бар скрыт (навигация — через бургер-меню) */
.fp-tabbar{display:none!important}
@media(max-width:900px){
  .fp-content{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
/* «как выбрать тариф» — подсветка колонки */
.guide-hi{box-shadow:0 0 0 2px var(--coral) inset;transition:box-shadow .18s}
/* чипы опросника: текст по левому краю, иконка к верху первой строки */
[data-sit]{text-align:left;align-items:flex-start;line-height:1.35}
[data-sit] svg{flex:0 0 auto;margin-top:1px}
/* быстрые действия — всегда вертикальный список (иконка + текст в строку) */
.fp-quick{display:flex;flex-direction:column;gap:10px}
.fp-quick-t{display:flex;align-items:center;gap:14px;text-align:left;transition:border-color .13s,background .13s}
.fp-quick-t:hover{border-color:rgba(132,215,233,.5);background:rgba(255,255,255,.035)}
.fp-quick-ic{color:var(--acclt);display:flex;justify-content:flex-start;flex:0 0 auto;transition:transform .15s}
.fp-quick-t:hover .fp-quick-ic{transform:scale(1.14)}
/* steps timeline */
.fp-steps{display:flex;gap:20px}
.fp-step{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.fp-step .gnum{margin:0}
.fp-step-body{margin-top:16px}
.fp-step:not(:last-child)::before{content:'';position:absolute;top:20px;left:50%;width:100%;height:1px;background:var(--line);z-index:0}
@media(max-width:640px){
  .fp-steps{flex-direction:column;gap:0}
  .fp-step{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding-bottom:26px}
  .fp-step .gnum{flex:0 0 40px}
  .fp-step-body{margin-top:0;padding-top:7px}
  .fp-step:not(:last-child)::before{top:40px;left:20px;width:1px;height:100%}
}

/* tiles / rows */
.fp-tile{background:transparent;border:1px solid var(--border);border-radius:13px;padding:12px}
.fp-tile-label{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.fp-tile-val{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-metric{font-family:var(--font-h);font-size:26px;font-weight:700}
.fp-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.fp-row:last-child{border-bottom:none}

/* buttons — .fp-btn* are now aliases of the canonical .btn / .btn-acc family
   (defined in the mockup-component section below). Base geometry, hover and the
   coral/aqua fills are folded into those rules; only the .fp-btn-sm size and the
   disabled state remain fp-specific and live right after the canonical block. */
/* кнопка «Показать ещё» (класс вместо инлайна) */
.fp-more{display:block;width:100%;height:38px;background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--mut);font-size:13.5px;cursor:pointer}

/* badges — .fp-badge* now alias the canonical .badge* family (defined in the mockup-component section below) */

/* inputs */
.fp-input{width:100%;height:42px;padding:0 16px;border-radius:12px;background:var(--field);border:1px solid var(--border);color:var(--text);font-size:14px;font-family:var(--font);outline:none;transition:.13s}
.fp-input:focus{border-color:var(--acc)}
.fp-label{font-size:13px;color:var(--muted);display:block;margin-bottom:8px}
.fp-field{margin-bottom:16px}

/* полосы расхода в подписках (трафик / время) */
.fp-bar{height:7px;border-radius:999px;background:var(--border-2);overflow:hidden}
.fp-bar > i{display:block;height:100%;border-radius:999px;background:var(--green);transition:width .35s ease}
.fp-bar > i.a{background:var(--amber)}
.fp-bar > i.r{background:var(--red)}
.fp-bar.unlim{background:linear-gradient(90deg,rgba(132,215,233,.35),rgba(132,215,233,.12))}

/* modal (login) */
.fp-modal-overlay{position:fixed;inset:0;background:rgba(4,7,12,.72);backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;z-index:100;padding:16px;overflow-y:auto}
.fp-modal-overlay > .fp-modal{margin:auto 0}  /* центр когда влезает, скролл когда нет */
.fp-modal{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border-2);border-radius:20px;padding:32px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.fp-modal-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:16px}
.fp-tabs{display:flex;gap:4px;padding:5px;border-radius:12px;background:rgba(255,255,255,.04);margin-bottom:20px}
.fp-tab{flex:1;padding:10px;border-radius:9px;border:none;background:transparent;color:var(--muted);font-weight:600;font-size:14px}
.fp-tab.active{background:var(--acc);color:#0c1512}
.fp-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.fp-divider::before,.fp-divider::after{content:"";flex:1;height:1px;background:var(--border)}
/* компактная модалка входа */
.fp-modal{padding:22px}
.fp-modal .fp-logo{width:44px;height:44px;flex:0 0 44px}
.fp-modal .fp-tabs{margin-bottom:14px;padding:4px}
.fp-modal .fp-tab{padding:8px}
.fp-modal .fp-field{margin-bottom:11px}
.fp-modal .fp-label{margin-bottom:5px;font-size:12.5px}
.fp-modal .fp-input{height:42px}
.fp-modal .fp-btn{min-height:42px}
.fp-modal .fp-btn-sm{min-height:38px}
.fp-modal .fp-divider{margin:14px 0}

/* misc */
.fp-iconbtn{width:36px;height:36px;border-radius:10px;border:none;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:15px;transition:.13s}
.fp-iconbtn:hover{background:rgba(255,255,255,.05);color:var(--text)}
.fp-iconbtn:hover{color:var(--text);background:rgba(255,255,255,.04)}
.fp-iconbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fp-page-title{font-family:var(--font-h);font-size:28px;font-weight:700}
.fp-empty{text-align:center;color:var(--dim);padding:36px 0;font-size:14px}
.fp-spinner{width:24px;height:24px;border:3px solid rgba(255,255,255,.15);border-top-color:var(--coral);border-radius:50%;animation:fpspin .7s linear infinite;margin:24px auto}
.fp-info{width:19px;height:19px;flex:0 0 19px;border-radius:50%;border:1.5px solid var(--dim);background:transparent;color:var(--dim);font-size:12px;font-weight:700;font-style:italic;font-family:Georgia,'Times New Roman',serif;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.13s;padding:0}
.fp-info:hover{border-color:var(--coral);color:var(--coral)}
.fp-pop{display:none;position:absolute;top:28px;left:0;z-index:40;width:min(280px,78vw);background:var(--surface-2);border:1px solid var(--border-2);border-radius:12px;padding:12px 14px;box-shadow:0 14px 38px rgba(0,0,0,.4);font-size:13px;line-height:1.5;color:var(--tx);font-weight:400}
.fp-pop.show{display:block}
.fp-pop ul{margin:0;padding-left:18px}
.fp-pop li{margin:4px 0}
/* невидимый «мостик» между иконкой и поповером, чтобы hover не прерывался */
.fp-pop::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
/* десктоп (есть мышь) — раскрытие по наведению на «i» */
@media(hover:hover) and (pointer:fine){
  .fp-info:hover + .fp-pop,.fp-pop:hover{display:block}
}
/* детект автозаполнения (в т.ч. биометрия) для авто-submit логина */
@keyframes fp-autofill{from{}to{}}
input:-webkit-autofill{animation-name:fp-autofill;animation-duration:.01s}
.fp-loading{position:fixed;top:var(--topbar-h);right:0;bottom:0;left:var(--sidebar-w);display:flex;align-items:center;justify-content:center;z-index:60;pointer-events:none}
@media(max-width:900px){ .fp-loading{left:0} }
.fp-loading .fp-spinner{margin:0}
/* стартовый/пред-логин загрузчик — по центру всего экрана (без сайдбара/топбара) */
.fp-boot{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;pointer-events:none}
.fp-boot .fp-spinner{margin:0}
@keyframes fpspin{to{transform:rotate(360deg)}}
.fp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface-2);border:1px solid var(--border-2);border-radius:12px;padding:12px 20px;z-index:200;box-shadow:0 12px 40px rgba(0,0,0,.4);font-weight:600}

/* ===== mockup component classes (Capybara-style screens) ===== */
.subtitle{text-align:center;color:var(--dim);font-size:14px;padding:6px 0 26px}
/* .card is served from the unified .fp-card,.card rule above; radius unified to --radius-lg (18px) — was 16px */
.kicker{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.kicker.acc{color:var(--acclt)}
.acc{color:var(--acclt)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
/* canonical buttons — .fp-btn / .fp-btn-ghost alias .btn; .fp-btn-coral / .fp-btn-aqua alias .btn-acc */
.btn,.fp-btn,.fp-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:12px;font-weight:600;font-size:14px;border:1px solid var(--line);background:transparent;color:var(--tx);cursor:pointer}
.btn:hover,.fp-btn:hover,.fp-btn-ghost:hover{background:rgba(255,255,255,.04)}
.btn-acc,.fp-btn-coral,.fp-btn-aqua{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:12px;font-weight:600;font-size:14px;background:var(--acc);border:none;color:#0c1512;cursor:pointer}
.fp-btn-aqua{background:var(--acclt)}
.btn-acc:hover{}
.btn-red{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border-radius:12px;font-weight:600;font-size:13.5px;color:var(--red);border:1px solid rgba(242,109,109,.4);background:rgba(242,109,109,.07);cursor:pointer}
/* fp-btn size + state modifiers — must follow the canonical rules to override height:42px */
.fp-btn-sm{height:36px;padding:0 14px;font-size:13px;border-radius:10px}
.fp-btn:disabled{opacity:.5;cursor:default}
.badge,.fp-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 11px;border-radius:999px}
.badge-green,.fp-badge-green{color:var(--green);background:rgba(16,185,129,.12)}
.badge-amber,.fp-badge-amber{color:var(--amber);background:rgba(249,115,22,.14)}
.badge-teal,.fp-badge-coral{color:var(--acclt);background:rgba(132,215,233,.14)}
.badge-coral{color:var(--coral);background:rgba(255,100,118,.13)}
.badge-muted,.fp-badge-muted{color:var(--muted);background:rgba(255,255,255,.06)}
.kv{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:none}
.tile{border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:center;cursor:pointer}
.tile.on{border-color:rgba(132,215,233,.5)}
.tile .ti{color:var(--acclt);margin-bottom:12px;display:flex;justify-content:center}
.mini{flex:1}
.mini .l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.mini .v{font-weight:600;font-size:16px}
.urlfield{flex:1;min-width:0;height:42px;display:flex;align-items:center;padding:0 18px;border-radius:12px;background:var(--field);border:1px solid var(--line);color:var(--tx);font-family:ui-monospace,monospace;font-size:14px;overflow:hidden;text-overflow:clip;white-space:nowrap;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;cursor:text}
/* компактные кнопки действий в карточке подписки */
.fp-subacts .btn,.fp-subacts .btn-acc{height:38px;min-height:0;padding:0 14px;font-size:13px;border-radius:10px;gap:6px}
.fp-subacts .btn svg,.fp-subacts .btn-acc svg{width:16px;height:16px}
@media(max-width:640px){ .fp-subacts{gap:6px}.fp-subacts .btn,.fp-subacts .btn-acc{height:36px;padding:0 12px;font-size:12.5px} }
input.urlfield{display:block;width:100%;height:42px;min-height:42px;line-height:normal;text-overflow:clip;outline:none;-webkit-appearance:none;appearance:none;background:var(--field);-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;cursor:text}
.chip{height:42px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--tx);font-weight:600;font-size:14px;cursor:pointer;display:inline-flex;align-items:center}
.chip.on{border-color:rgba(132,215,233,.55);color:var(--acclt)}
.pm{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;cursor:pointer}
.pm.on{border-color:rgba(132,215,233,.55)}
.radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--dim);flex:0 0 20px;display:flex;align-items:center;justify-content:center}
.radio.on{border-color:var(--acc)}
.radio.on::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--acc)}
.toggle{width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.10);position:relative;flex:0 0 44px;cursor:pointer;transition:background .22s ease}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--muted);transform:translateX(0);will-change:transform;transition:transform .22s cubic-bezier(.4,0,.2,1),background .22s ease}
.step{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.step button{width:44px;height:46px;background:transparent;border:none;color:var(--tx);font-size:20px;cursor:pointer}
.step .n{width:44px;text-align:center;font-weight:600}
.gtile{border:1px solid var(--line);border-radius:14px;padding:20px}
.note{padding:15px 18px;border:1px dashed var(--line);border-radius:12px;color:var(--mut);font-size:14px}
.sel{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-radius:12px;background:var(--field);border:1px solid var(--line)}
.ilabel{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;display:block}
.ilab2{font-size:13px;color:var(--mut);margin-bottom:8px;display:block}
.inp{width:100%;height:42px;padding:0 16px;border-radius:12px;background:var(--field);border:1px solid var(--line);color:var(--tx);font-size:14px;font-family:var(--font);outline:none;display:flex;align-items:center}
.inp:focus{border-color:var(--acc)}
.inppw{width:100%;height:42px;padding:0 44px 0 16px;border-radius:12px;background:var(--field);border:1px solid var(--line);color:var(--tx);font-size:14px;font-family:var(--font);outline:none;position:relative}
.eye{position:absolute;right:14px;top:0;bottom:0;margin:auto 0;height:20px;width:20px;display:flex;align-items:center;justify-content:center;color:var(--dim);cursor:pointer;transition:color .15s}
.eye:hover{color:var(--mut)}
.eye svg{display:block}
.gnum{width:40px;height:40px;border-radius:50%;background:var(--acc);color:#0c1512;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative;z-index:1}
.meta{display:flex;align-items:center;gap:9px;color:var(--mut);font-size:13.5px}
.page-title{font-size:30px;font-weight:700;letter-spacing:-.02em}
.toggle.on{background:var(--acc)}
.toggle.on::after{transform:translateX(18px);background:#0c1512}

/* ===== unified interactions ===== */
:root{ --t:.15s; --ease:cubic-bezier(.4,0,.2,1); }
.fp-btn,.btn,.btn-acc,.fp-btn-coral,.fp-btn-aqua,.fp-btn-ghost,.btn-red,.pill,.chip,.fp-iconbtn{
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
/* ховер — внутренняя тень (лёгкое «вдавливание») */
.fp-btn:hover,.btn:hover,.btn-acc:hover,.fp-btn-coral:hover,.fp-btn-aqua:hover,.btn-red:hover,.pill:hover,.chip:hover{
  box-shadow: inset 0 0 0 999px rgba(0,0,0,.17);
}
.fp-btn:active,.btn:active,.btn-acc:active,.pill:active,.btn-red:active,.chip:active,.fp-iconbtn:active{ transform: translateY(1px); box-shadow: inset 0 0 0 999px rgba(0,0,0,.26); }
.fp-input,.inp,.inppw,.sel,.urlfield{ transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
input.inp:focus,textarea.inp:focus,.inppw:focus{ border-color: var(--acc); }
a,.acc{ transition: color var(--t) var(--ease), filter var(--t) var(--ease); }
.tile,.pm,.gtile{ transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.pm:hover,.tile:hover{ border-color: var(--border-2); }
/* a11y: видимый фокус с клавиатуры для кастомных контролов и кнопок */
button:focus-visible,.btn:focus-visible,.btn-acc:focus-visible,.btn-red:focus-visible,.fp-btn:focus-visible,.fp-navitem:focus-visible,.fp-tab:focus-visible,.chip:focus-visible,.fp-iconbtn:focus-visible,.pm:focus-visible,.toggle:focus-visible,.radio:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;
}

/* native select fallback theming (until enhanced) */
select.inp,select.fp-input{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;line-height:normal;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b97a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:42px;cursor:pointer;
}
select option{ background:var(--surface); color:var(--text); }

/* ===== custom themed dropdown ===== */
.fp-dd{position:relative}
.fp-dd > select{display:none !important}
.fp-dd-btn{width:100%;height:42px;padding:0 42px 0 16px;border-radius:12px;background:var(--field);border:1px solid var(--line);color:var(--tx);font-size:14px;font-family:var(--font);text-align:left;display:flex;align-items:center;cursor:pointer;position:relative;transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.fp-dd-btn:hover{border-color:var(--border-2)}
.fp-dd.open .fp-dd-btn{border-color:var(--acc)}
.fp-dd-btn > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-dd-btn svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--mut);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.fp-dd.open .fp-dd-btn svg{transform:translateY(-50%) rotate(180deg)}
.fp-dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border-2);border-radius:12px;padding:5px;box-shadow:0 16px 44px rgba(0,0,0,.45);z-index:80;max-height:264px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
.fp-dd.open .fp-dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.fp-dd-item{display:flex;align-items:center;height:40px;padding:0 12px;border-radius:8px;font-size:14px;line-height:1;color:var(--tx);cursor:pointer;transition:background .12s var(--ease),color .12s var(--ease)}
.fp-dd-item:hover{background:rgba(255,255,255,.05)}
.fp-dd-item.sel{color:var(--acclt);font-weight:600}
:root[data-theme="light"] .fp-dd-item:hover{background:rgba(0,0,0,.045)}

/* кнопка сразу после поля ввода — той же высоты, что и поле */
.inp + .btn,.inp + .btn-acc,.inp + .btn-red,.inp + .fp-btn,.inp + .fp-btn-coral,.inp + .fp-btn-aqua,.inp + .fp-btn-ghost,.inp + .pill,.inp + .fp-iconbtn,
.fp-input + .btn,.fp-input + .btn-acc,.fp-input + .btn-red,.fp-input + .fp-btn,.fp-input + .fp-btn-coral,.fp-input + .fp-btn-aqua,.fp-input + .fp-btn-ghost,.fp-input + .fp-iconbtn{
  height:42px;min-height:42px;
}
.urlfield + .btn,.urlfield + .btn-acc,.urlfield + .btn-red,.urlfield + .fp-btn,.urlfield + .fp-btn-coral,.urlfield + .fp-iconbtn{
  height:42px;min-height:42px;
}

/* ===== без обводок: карточки, поля ввода, дропдауны ===== */
:root{ --field2:#141d28 }
:root[data-theme="light"]{ --field2:#e9eef3 }
.fp-card,.card{border:none}
.fp-input,.inp,.inppw,.urlfield,.sel{border:none;box-shadow:none}
.fp-input:focus,input.inp:focus,textarea.inp:focus,.inppw:focus{border:none;box-shadow:none;background:var(--field2)}
.fp-dd-btn,.fp-dd-btn:hover,.fp-dd.open .fp-dd-btn{border:none}
.fp-dd.open .fp-dd-btn,.fp-dd-btn:hover{background:var(--field2)}
.fp-dd-menu{border:none}

#fp-bal{transition:color .15s}
#fp-bal:hover b{color:var(--acclt)}

/* анимация «идёт расчёт цены» */
.fp-calc{display:inline-flex;gap:6px;align-items:center;vertical-align:middle;height:1em}
.fp-calc i{width:9px;height:9px;border-radius:50%;background:var(--acclt);opacity:.35;animation:fpcalc .9s infinite ease-in-out}
.fp-calc i:nth-child(2){animation-delay:.15s}
.fp-calc i:nth-child(3){animation-delay:.3s}
@keyframes fpcalc{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* --- партнёрка: плашка текущего способа вывода --- */
.pt-cur{display:flex;align-items:center;gap:12px;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin-bottom:16px}
.pt-cur .pt-ci{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:rgba(59,179,207,.12);display:flex;align-items:center;justify-content:center;color:var(--acclt)}
.pt-cur .pt-ci svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pt-cur .pt-cm{min-width:0;flex:1}
.pt-cur .pt-cm-l{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.pt-cur .pt-cm-v{font-size:15px;font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-cur .pt-cm-v .mono{color:var(--mut);font-weight:500;letter-spacing:.03em}
.pt-cedit{font-size:12.5px;font-weight:600;color:var(--acclt);flex:0 0 auto;border:none;background:transparent;cursor:pointer;font-family:inherit;padding:4px 2px}
.pt-cedit:hover{color:var(--tx)}

/* ==== Помощь / FAQ — единый стиль кабинета (переиспользуем .chip/.fp-card/.btn-acc) ==== */

/* поиск с иконкой */
.fp-help-search{position:relative}
.fp-help-search .fp-input{height:44px;padding-left:42px}
.fp-help-sicon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--dim);pointer-events:none}
.fp-help-sicon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}

/* чипы категорий = родной .chip; тут только компактная высота под строку фильтра */
.chip.fp-cat{height:38px;padding:0 15px;font-size:13.5px;gap:6px}

/* CTA «Не нашли ответ?» */
.fp-help-cta{margin-top:26px;display:flex;align-items:center;gap:14px}
.fp-help-cta-txt{flex:1;min-width:0}
.fp-help-cta .btn-acc{flex:0 0 auto}
.fp-help-cta-ic{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:var(--surface-2);color:var(--acclt);display:flex;align-items:center;justify-content:center}
.fp-help-cta-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){
  .fp-help-cta{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .fp-help-cta-txt{flex:none;width:100%}
  .fp-help-cta .btn-acc{width:100%}
}

/* компактные тела ответов + списки/подсветки в тоне кабинета */
.fp-faq-a{padding:2px 16px 16px;font-size:14px;line-height:1.6;color:var(--tx)}
.fp-faq-a > :first-child{margin-top:0}
.fp-faq-a > :last-child{margin-bottom:0}
.fp-faq-a p{margin:0 0 10px}
.fp-faq-a ul,.fp-faq-a ol{margin:10px 0;padding-left:22px}
.fp-faq-a li{margin:5px 0}
.fp-faq-a li::marker{color:var(--dim)}
.fp-faq-a ol li::marker{color:var(--acclt);font-weight:700}
.fp-faq-a b,.fp-faq-a strong{color:var(--text);font-weight:700}

/* внутренние ссылки в ответах — цвет+вес, без подчёркиваний (как везде в кабинете) */
.fp-faq-a a{color:var(--acclt);font-weight:600;text-decoration:none;border-bottom:none}
.fp-faq-a a:hover{color:var(--acc)}
/* если ссылка обёрнута в <b> — жирный наследует цвет ссылки, а не белый */
.fp-faq-a a b,.fp-faq-a a strong{color:inherit}

/* инлайн-callout'ы (класс переживает санитайзер) — в тоне кабинета */
.fp-faq-note,.fp-faq-warn{display:flex;gap:10px;align-items:flex-start;margin:12px 0;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.5}
.fp-faq-note::before,.fp-faq-warn::before{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:Georgia,serif;margin-top:1px}
.fp-faq-note{background:var(--surface-2);color:var(--muted)}
.fp-faq-note::before{content:"i";font-style:italic;color:var(--dim)}
.fp-faq-warn{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.fp-faq-warn::before{content:"!"}
.fp-faq-note b,.fp-faq-warn b{color:var(--text)}

@media(max-width:600px){
  .fp-card > .fp-help-cta-ic + div + .btn-acc,
  .fp-card .btn-acc[data-contact]{width:100%}
}

/* ==== Модалка логина (минимал, компактная) ==== */
.fp-login-modal{max-width:380px;padding:22px 22px}
.fp-login-head{text-align:center;margin-bottom:14px}
.fp-login-head .fp-logo{width:52px;height:52px;margin:0 auto 8px;flex:0 0 52px}
.fp-login-title{font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.fp-login-sub{color:var(--muted);font-size:13px;margin-top:3px}
.fp-login-err{color:var(--danger);font-size:13px;margin-bottom:10px;text-align:center}
.fp-login-modal .fp-tabs{margin-bottom:12px}
.fp-login-modal .kicker{display:block;margin-bottom:5px}
.fp-lblrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.fp-lblrow .kicker{margin-bottom:0}
.fp-lblrow .fp-linkbtn{font-size:12px}
.fp-login-modal .fp-field{margin-bottom:10px}
.fp-inwrap{position:relative}
.fp-inwrap .fp-input{padding-right:44px}
.fp-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;background:transparent;color:var(--dim);display:flex;align-items:center;justify-content:center;cursor:pointer}
.fp-eye svg{width:19px;height:19px}
.fp-eye:hover{color:var(--muted)}
.fp-eye.on{color:var(--acclt)}
.fp-login-primary{width:100%;height:44px;font-size:15px;margin-top:2px}
.fp-login-links{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px}
.fp-linkbtn{background:transparent;border:none;color:var(--acclt);font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none}
.fp-linkbtn:hover{color:var(--acc)}
.fp-login-modal .fp-divider{margin:11px 0}
/* соц-входы — компактный ряд иконок (текст скрыт, есть title при наведении) */
.fp-oauth-list{display:flex;flex-direction:row;gap:10px}
.fp-oauth{flex:1;display:flex;align-items:center;justify-content:center;height:46px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:border-color var(--t,.15s) var(--ease,ease)}
.fp-oauth:hover{border-color:var(--border-2)}
.fp-oauth > span:not(.fp-oauth-ic){display:none}  /* текст «Войти через X» скрыт в компактном ряду */
.fp-oauth-ic{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:0 0 26px}
.fp-oauth-ic svg{width:17px;height:17px;display:block}
.fp-login-foot{text-align:center;margin-top:12px}
.fp-login-foot a{color:var(--acclt);font-size:14px;font-weight:600;text-decoration:none}
.fp-login-foot a:hover{color:var(--acc)}
@media(max-width:480px){ .fp-login-modal{padding:20px 18px} .fp-login-title{font-size:20px} }

/* ============ АДМИН-РАЗДЕЛ (навигация + общие компоненты экранов) ============ */
.fp-nav-sep{margin:14px 8px 6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);user-select:none}
.fp-nav-sep::before{content:"";display:block;height:1px;background:var(--border);margin:0 -4px 8px}
/* тулбар над списком: поиск + действия */
.fp-adm-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.fp-adm-toolbar .fp-input{flex:1;min-width:200px;margin:0}
.fp-adm-spacer{flex:1}
/* в-экранные вкладки (домены дашборда, разделы) */
.fp-tabs2{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:0}
.fp-tab2{padding:9px 15px;border:none;background:transparent;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.13s;white-space:nowrap}
.fp-tab2:hover{color:var(--text)}
.fp-tab2.on{color:var(--acclt);border-bottom-color:var(--acc)}
/* шапка колонок для «табличных» списков (поверх .fp-row) */
.fp-th{display:flex;justify-content:space-between;gap:12px;padding:6px 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--border)}
/* KPI-плитка дашборда */
.fp-kpi{background:var(--surface);border-radius:var(--radius-lg);padding:16px 18px}
.fp-kpi .k-lbl{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fp-kpi .k-val{font-size:26px;font-weight:700;line-height:1;font-family:var(--font-h)}
.fp-kpi .k-sub{font-size:12px;color:var(--dim);margin-top:6px}
.fp-kpi .k-val.pos{color:var(--success)} .fp-kpi .k-val.neg{color:var(--coral)}
/* мини столбчатый график (revenue/users series) */
.fp-spark{display:flex;align-items:flex-end;gap:3px;height:64px;margin-top:12px}
.fp-spark i{flex:1;min-width:2px;background:linear-gradient(180deg,var(--acclt),var(--acc));border-radius:3px 3px 0 0;opacity:.85;transition:.15s}
.fp-spark i:hover{opacity:1}
/* компактная пилюля-статус для админ-списков */
.fp-tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:7px;background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.fp-tag.ok{color:var(--success)} .fp-tag.warn{color:var(--warn)} .fp-tag.bad{color:var(--coral)}
/* операторский тред тикета */
.fp-chat{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;padding:4px 2px}
.fp-msg{max-width:78%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.fp-msg.in{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:5px}
.fp-msg.out{align-self:flex-end;background:var(--acc);color:#07222b;border-bottom-right-radius:5px}
.fp-msg.note{align-self:center;background:transparent;border:1px dashed var(--warn);color:var(--warn);font-size:12.5px;max-width:92%}
.fp-msg .m-meta{display:block;font-size:11px;opacity:.7;margin-top:5px}
/* мастер-деталь для операторки (список слева, тред справа) */
.fp-md{display:grid;grid-template-columns:340px 1fr;gap:16px}
@media(max-width:900px){ .fp-md{grid-template-columns:1fr} }

/* ============ Telegram-style операторская поддержка ============ */
.tg-wrap{display:grid;grid-template-columns:clamp(280px,32%,360px) 1fr;height:calc(100dvh - 96px);min-height:420px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.tg-col{display:flex;flex-direction:column;min-height:0;min-width:0}
.tg-list{border-right:1px solid var(--border)}
.tg-lhead{flex:0 0 auto;padding:12px 12px 10px}
.tg-lhead .t{font-weight:700;font-size:15px;margin:0 4px 10px}
.tg-search{width:100%;height:38px;border:none;border-radius:10px;background:var(--field);color:var(--text);padding:0 14px;font-family:var(--font);font-size:14px;outline:none}
.tg-chats{flex:1;overflow-y:auto;padding:4px 6px 8px}
.tg-chat{display:flex;gap:11px;align-items:center;padding:9px 10px;border-radius:11px;cursor:pointer;transition:.1s}
.tg-chat:hover{background:var(--surface-2)}
.tg-chat.on{background:var(--acc)}
.tg-chat.on .tg-nm,.tg-chat.on .tg-snip,.tg-chat.on .tg-when{color:#07222b}
.tg-av{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;color:#fff;text-transform:uppercase}
.tg-cmain{flex:1;min-width:0}
.tg-crow{display:flex;align-items:baseline;gap:8px}
.tg-nm{font-weight:600;font-size:14.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.tg-when{font-size:12px;color:var(--dim);flex:0 0 auto}
.tg-srow{display:flex;align-items:center;gap:8px;margin-top:3px}
.tg-snip{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.tg-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--acc);color:#07222b;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.tg-badge.dot{min-width:10px;width:10px;height:10px;padding:0;border-radius:50%}
.tg-chat.on .tg-badge{background:rgba(255,255,255,.4);color:#fff}
/* правая колонка */
.tg-chat-pane{background:var(--bg)}
.tg-head{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:10px 14px;border-bottom:1px solid var(--border)}
.tg-htitle{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-hsub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-iconbtn{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:.12s}
.tg-iconbtn:hover{background:var(--surface-2);color:var(--text)}
.tg-msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.tg-date{align-self:center;font-size:12px;color:var(--muted);background:var(--surface-2);padding:3px 12px;border-radius:12px;margin:12px 0 8px}
.tg-b{max-width:74%;padding:7px 11px 6px;border-radius:14px;font-size:14px;line-height:1.42;word-break:break-word;white-space:pre-wrap;margin-top:2px}
.tg-b.in{align-self:flex-start;background:var(--surface-2);border-bottom-left-radius:5px}
.tg-b.out{align-self:flex-end;background:var(--acc);color:#07222b;border-bottom-right-radius:5px}
.tg-b.note{align-self:center;background:transparent;border:1px dashed var(--warn);color:var(--warn);font-size:12.5px;max-width:82%;border-radius:12px}
.tg-meta{float:right;margin:7px 0 -2px 12px;font-size:11px;color:var(--dim);white-space:nowrap;user-select:none}
.tg-b.out .tg-meta{color:rgba(7,34,43,.6)}
.tg-tick{margin-left:3px;font-size:11px}
.tg-img{max-width:230px;max-height:230px;border-radius:11px;display:block;margin-bottom:4px;cursor:pointer}
.tg-file{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px;background:rgba(0,0,0,.14);margin-bottom:5px;text-decoration:none;color:inherit;max-width:260px}
.tg-b.out .tg-file{background:rgba(255,255,255,.22)}
.tg-file .fi{flex:0 0 auto;width:38px;height:38px;border-radius:9px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center}
.tg-b.out .tg-file .fi{background:rgba(7,34,43,.25)}
.tg-fn{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* строка ввода */
.tg-input{flex:0 0 auto;border-top:1px solid var(--border);padding:9px 12px}
.tg-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:7px;min-height:0}
.tg-notetoggle{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer}
.tg-canned{height:32px;border:none;border-radius:8px;background:var(--field);color:var(--text);font-family:var(--font);font-size:13px;padding:0 8px;max-width:200px;outline:none;cursor:pointer}
.tg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.tg-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:4px 8px;color:var(--muted)}
.tg-chip b{cursor:pointer;color:var(--coral);font-weight:700}
.tg-irow{display:flex;align-items:flex-end;gap:8px}
.tg-attach,.tg-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:.12s}
.tg-attach{background:transparent;color:var(--muted)}
.tg-attach:hover{background:var(--surface-2);color:var(--text)}
.tg-send{background:var(--acc);color:#07222b}
.tg-send:hover{filter:brightness(1.06)}
.tg-ta{flex:1;min-height:42px;max-height:150px;border:none;border-radius:12px;background:var(--field);color:var(--text);padding:11px 14px;font-family:var(--font);font-size:14px;resize:none;outline:none;line-height:1.4}
.tg-emptypane{flex:1;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:14px;padding:20px;text-align:center}
.tg-back{display:none}
@media(max-width:820px){
  .tg-wrap{grid-template-columns:1fr}
  .tg-chat-pane{display:none}
  .tg-wrap[data-view="chat"] .tg-list{display:none}
  .tg-wrap[data-view="chat"] .tg-chat-pane{display:flex}
  .tg-back{display:flex}
}
/* аватар-картинка поверх инициалов (нет фото → JS убирает img, видны инициалы) */
.tg-av{position:relative;overflow:hidden}
.tg-av-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ===== Telegram-поддержка: скроллбар / якорь низ / формат / ввод ===== */
.tg-chats,.tg-msgs,.tg-canned-menu{scrollbar-width:thin;scrollbar-color:rgba(140,140,140,.35) transparent}
.tg-chats::-webkit-scrollbar,.tg-msgs::-webkit-scrollbar,.tg-canned-menu::-webkit-scrollbar{width:9px}
.tg-chats::-webkit-scrollbar-track,.tg-msgs::-webkit-scrollbar-track,.tg-canned-menu::-webkit-scrollbar-track{background:transparent}
.tg-chats::-webkit-scrollbar-thumb,.tg-msgs::-webkit-scrollbar-thumb,.tg-canned-menu::-webkit-scrollbar-thumb{background:rgba(140,140,140,.3);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
.tg-chats::-webkit-scrollbar-thumb:hover,.tg-msgs::-webkit-scrollbar-thumb:hover{background:rgba(140,140,140,.5);background-clip:padding-box}
/* сообщения прижаты к низу (как в Telegram) */
.tg-inner{margin-top:auto;display:flex;flex-direction:column;gap:2px}
/* формат внутри пузырей */
.tg-b b,.tg-b strong{font-weight:700}
.tg-b i,.tg-b em{font-style:italic}
.tg-b code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:rgba(0,0,0,.2);padding:1px 5px;border-radius:5px}
.tg-b.out code{background:rgba(7,34,43,.18)}
/* code/pre — копирование по нажатию (как в Telegram) */
.tg-b .tg-code{cursor:pointer;position:relative;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:filter .12s}
.tg-b .tg-code:hover{filter:brightness(1.18)}
.tg-b pre.tg-code{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:rgba(0,0,0,.24);padding:8px 10px;border-radius:8px;margin:3px 0;overflow-x:auto;white-space:pre}
.tg-b.out pre.tg-code{background:rgba(7,34,43,.18)}
/* цитата */
.tg-b .tg-quote{display:block;border-left:3px solid currentColor;padding:2px 0 2px 10px;margin:3px 0;opacity:.85;font-style:normal}
.tg-b.in .tg-quote{border-left-color:var(--acclt,var(--acc));opacity:.9}
/* спойлер (скрытый текст) — раскрывается по нажатию */
.tg-spoiler{background:currentColor;color:transparent!important;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background .18s,color .18s}
.tg-spoiler *{color:transparent!important}
.tg-spoiler.shown{background:transparent;color:inherit!important;user-select:auto;cursor:auto}
.tg-spoiler.shown *{color:inherit!important}
.tg-b a{color:var(--acclt);text-decoration:underline}
.tg-b.out a{color:#063b47}
/* строка ввода — редизайн */
.tg-input{border-top:1px solid var(--border);padding:10px 14px 12px;transition:background .15s;position:relative}
.tg-input[data-note="1"]{background:rgba(249,115,22,.06)}
.tg-irow{display:flex;align-items:flex-end;gap:6px}
.tg-ibtn{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted);cursor:pointer;transition:.12s}
.tg-ibtn:hover{background:var(--surface-2);color:var(--text)}
.tg-ibtn.on{color:var(--acclt)}
.tg-ta{flex:1;min-height:42px;max-height:150px;border:none;border-radius:14px;background:var(--field);color:var(--text);padding:11px 15px;font-family:var(--font);font-size:14px;resize:none;outline:none;line-height:1.4}
.tg-send{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:.14s;background:var(--acc);color:#07222b}
.tg-send:hover{filter:brightness(1.08)}
.tg-input[data-note="1"] .tg-send{background:var(--warn);color:#2a1400}
/* свитч «внутренняя заметка» */
.tg-noterow{display:flex;align-items:center;margin-bottom:9px}
.tg-switch{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.tg-switch input{position:absolute;opacity:0;width:0;height:0}
.tg-switch .sw{width:34px;height:20px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);position:relative;transition:.15s;flex:0 0 auto}
.tg-switch .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:.15s}
.tg-switch input:checked + .sw{background:var(--warn);border-color:var(--warn)}
.tg-switch input:checked + .sw::after{left:16px;background:#fff}
.tg-switch input:checked ~ .lbl{color:var(--warn)}
/* меню быстрых ответов */
.tg-canned-wrap{position:relative;flex:0 0 auto}
.tg-canned-menu{position:absolute;bottom:52px;right:0;width:300px;max-height:320px;overflow-y:auto;background:var(--surface);border:1px solid var(--border-2);border-radius:14px;box-shadow:0 14px 44px -10px rgba(0,0,0,.55);padding:6px;z-index:60}
.tg-canned-menu[hidden]{display:none}
.tg-canned-head{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);padding:8px 10px 6px}
.tg-canned-item{padding:9px 11px;border-radius:9px;cursor:pointer;transition:.1s}
.tg-canned-item:hover{background:var(--surface-2)}
.tg-canned-item .ct{font-weight:600;font-size:13.5px;color:var(--text);overflow-wrap:anywhere}
.tg-canned-item .cb{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tg-canned-empty{padding:14px;color:var(--dim);font-size:13px;text-align:center}

/* мобильное боковое меню: прокрутка при переполнении (иначе нижние пункты — /help,/support — недоступны) */
.fp-nav{overflow-y:auto;min-height:0;scrollbar-width:thin}
.fp-nav::-webkit-scrollbar{width:6px}
.fp-nav::-webkit-scrollbar-thumb{background:rgba(140,140,140,.3);border-radius:3px}
@media(max-width:900px){ .fp-sidebar{height:100dvh} }

/* ===== тонкий скроллбар ВЕЗДЕ (десктоп), как в Telegram ===== */
*{scrollbar-width:thin;scrollbar-color:rgba(140,140,140,.32) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(140,140,140,.3);border-radius:7px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(140,140,140,.5);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* галочки прочтения: ✓ отправлено (тусклее), ✓✓ прочитано (ярче) */
.tg-tick{opacity:.7} .tg-tick.read{opacity:1}
.tg-b.out .tg-tick.read{color:#04323d}
/* крестик очистки в поиске диалогов */
.tg-searchwrap{position:relative}
.tg-searchwrap .tg-search{padding-right:36px}
.tg-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:none;border-radius:50%;background:var(--surface-2);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;padding:0}
.tg-search-clear:hover{color:var(--text);background:var(--border-2)}
.tg-search-clear[hidden]{display:none}

/* ===== контраст операторского чата (шапка/ввод/иконки/обводки) ===== */
.tg-head{background:var(--surface);border-bottom:1px solid var(--border-2)}
.tg-input{background:var(--surface);border-top:1px solid var(--border-2)}
.tg-ta{background:var(--field);border:1px solid var(--border-2)}
.tg-ta:focus{border-color:var(--acc)}
.tg-ibtn{background:var(--surface-2);color:var(--text)}
.tg-ibtn:hover{background:var(--border-2);color:var(--acclt)}
.tg-switch .sw{border-color:var(--border-2)}
.tg-canned-menu{border-color:var(--border-2)}
.tg-search{background:var(--field);border:1px solid var(--border-2)}
.tg-list{border-right:1px solid var(--border-2)}
.tg-b.in{border:1px solid var(--border)}

/* ===== ФИКС скроллбара: scrollbar-width:thin глушил кастом ::-webkit-scrollbar на Chrome 121+.
   Возвращаем auto (ре-активирует webkit-кастом на всех Chrome/Safari), Firefox — отдельно ===== */
*{scrollbar-width:auto}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(150,150,150,.32);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(150,150,150,.55);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){ *{scrollbar-width:thin;scrollbar-color:rgba(150,150,150,.42) transparent} }

/* точечный override: у чат-элементов был scrollbar-width:thin (специфичнее *), из-за него глушился ::-webkit-scrollbar */
.tg-chats,.tg-msgs,.tg-canned-menu,.fp-nav{scrollbar-width:auto}
.tg-chats::-webkit-scrollbar,.tg-msgs::-webkit-scrollbar,.tg-canned-menu::-webkit-scrollbar,.fp-nav::-webkit-scrollbar{width:8px;height:8px}
.tg-chats::-webkit-scrollbar-thumb,.tg-msgs::-webkit-scrollbar-thumb,.tg-canned-menu::-webkit-scrollbar-thumb,.fp-nav::-webkit-scrollbar-thumb{background:rgba(150,150,150,.35);border-radius:8px;border:2px solid transparent;background-clip:padding-box}

/* мобилка: чат жёстко зафиксирован (шапка/поиск/ввод не двигаются при перетаскивании пальцем) */
@media(max-width:820px){
  .tg-wrap{position:fixed;left:0;right:0;top:var(--topbar-h);bottom:0;height:auto;min-height:0;border:none;border-radius:0;z-index:40}
  .tg-msgs,.tg-chats{overscroll-behavior:contain}
}
/* иконка типа вложения в превью списка (контурная, как на сайте) */
.att-ic{display:inline-flex;align-items:center;vertical-align:-3px;margin-right:5px;color:var(--muted)}
.att-ic svg{width:15px;height:15px}
.tg-chat.unread .att-ic{color:var(--text)}
/* карточка файла: контурная иконка типа + подпись типа */
.tg-file .fi{background:var(--surface-2);color:var(--muted);display:flex;align-items:center;justify-content:center;line-height:1}
.tg-file .fi svg{width:22px;height:22px}
.tg-b.out .tg-file .fi{background:rgba(7,34,43,.18);color:rgba(7,34,43,.78)}
.tg-fk{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.tg-b.out .tg-fk{color:rgba(7,34,43,.6)}
/* выравнивание кружков композера: все 44px, по низу с полем ввода */
.tg-irow{align-items:flex-end}
.tg-ibtn{width:44px;height:44px}
.tg-ta{min-height:44px}
/* кликабельная шапка чата → профиль клиента */
.tg-headmain{display:flex;align-items:center;gap:11px;flex:1;min-width:0;border-radius:10px;padding:3px 6px;margin:-3px -6px;transition:.12s}
.tg-headmain[data-profile]{cursor:pointer}
.tg-headmain[data-profile]:hover{background:var(--surface-2)}
/* непрочитанные оператором диалоги: ярче + коралловый бейдж (как в Telegram) */
.tg-chat.unread .tg-nm,.tg-chat.unread .tg-snip{color:var(--text)}
.tg-chat.unread .tg-nm{font-weight:700}
.tg-chat.unread .tg-badge{background:var(--coral);color:#fff}
.tg-chat.unread.on .tg-badge{background:rgba(255,255,255,.4)}
/* кнопка «отметить обработанным» (ответ не требуется) — не закрытие тикета */
.tg-ack{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--coral);background:transparent;color:var(--coral);font-size:12px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.12s}
.tg-ack:hover{background:var(--coral);color:#fff}
.tg-chat.on .tg-ack{border-color:rgba(255,255,255,.7);color:#fff}
.tg-chat.on .tg-ack:hover{background:rgba(255,255,255,.25)}
/* кликабельно-копируемые ID / @username в шапке профиля */
.fp-copyable{cursor:pointer;transition:.12s}
code.fp-copyable:hover{background:var(--acclt,var(--acc));color:#07222b}
span.fp-copyable{color:var(--acclt,var(--acc))}
span.fp-copyable:hover{text-decoration:underline}
/* ——— панель форматирования композера ——— */
.tg-fmt{display:flex;gap:3px;flex-wrap:wrap;padding:0 2px 6px}
.tg-fmtbtn{height:30px;min-width:32px;padding:0 8px;border:none;border-radius:8px;background:transparent;color:var(--muted);font-family:var(--font);font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.12s}
.tg-fmtbtn:hover{background:var(--surface-2);color:var(--text)}
.tg-fmtbtn.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.tg-fmtbtn svg{width:17px;height:17px}
/* ——— метки (теги) тикетов ——— */
.tg-tags{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px;margin-top:5px}
.tg-tag{display:inline-flex;align-self:flex-start;flex:0 0 auto;width:-moz-fit-content;width:fit-content;max-width:100%;align-items:center;gap:4px;border-radius:20px;font-weight:600;line-height:1;white-space:nowrap;background:hsla(var(--th,210),60%,50%,.16);color:hsl(var(--th,210),70%,66%);border:1px solid hsla(var(--th,210),60%,50%,.32)}
.tg-tag.mini{font-size:11px;padding:2px 7px}
.tg-tag.lg{font-size:13px;padding:4px 10px}
.tg-tag.pick{font-size:12.5px;padding:3px 9px;cursor:pointer}
.tg-tag.pick:hover{background:hsla(var(--th,210),60%,50%,.28)}
.tg-chat.on .tg-tag{background:rgba(255,255,255,.22);color:#07222b;border-color:rgba(7,34,43,.2)}
.tg-tag.rmable{cursor:pointer}
.tg-tag.rmable:hover{background:hsla(var(--th,210),60%,50%,.30)}
.tg-tag-x{font-weight:700;opacity:.7;font-size:11px;margin-left:1px}
.tg-tag.rmable:hover .tg-tag-x{opacity:1}
/* фильтр по меткам под заголовком «Диалоги» */
.tg-filter{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:0 12px 10px;scrollbar-width:none}
.tg-filter::-webkit-scrollbar{display:none}
.tg-tagf{flex:0 0 auto;height:28px;padding:0 12px;border-radius:16px;border:1px solid var(--border);background:transparent;color:var(--muted);font-family:var(--font);font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:.12s}
.tg-tagf:hover{border-color:var(--acc);color:var(--text)}
.tg-tagf.sel{background:var(--acc);color:#07222b;border-color:var(--acc)}
.tg-tagf[data-tagf]:not([data-tagf=""]).sel{background:hsl(var(--th,210),60%,50%);border-color:hsl(var(--th,210),60%,50%);color:#fff}
/* профиль клиента: строка подписки */
.tg-sub{padding:9px 8px;border-radius:10px;margin:0 -4px}
.tg-sub+.tg-sub{border-top:1px solid var(--border)}
.tg-sub-h{display:flex;align-items:center;gap:8px}
.tg-sub-name{font-weight:600;font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-sub-acts{display:flex;gap:2px;flex:0 0 auto}
.tg-actbtn{width:30px;height:30px;border:none;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s}
.tg-actbtn:hover{background:var(--surface-2);color:var(--acclt,var(--acc))}
.tg-actbtn.on{color:var(--warn)}
.tg-actbtn.copy{color:var(--coral)}
.tg-actbtn.copy:hover{background:rgba(255,100,118,.14);color:var(--coral)}
.tg-sub-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:5px;font-size:12.5px}
.tg-sub-exp{font-weight:600;display:inline-flex;align-items:center}
.tg-sub-meta2{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;font-size:12px;color:var(--muted)}
.tg-sub-dev{cursor:pointer;color:var(--acclt,var(--acc));display:inline-flex;align-items:center;gap:3px}
.tg-sub-dev:hover{text-decoration:underline}
.tg-sub-traf{display:inline-flex;align-items:center;gap:3px}
/* устройства: компактная отвязка красным крестиком + узкая «Отвязать все» */
.dev-x{flex:0 0 auto;width:30px;height:30px;border:none;border-radius:8px;background:transparent;color:var(--coral);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:.12s}
.dev-x:hover{background:rgba(255,100,118,.14)}
.dev-x:disabled{opacity:.5;cursor:default}
.dev-unbindall{flex:0 0 auto;height:28px;padding:0 10px;border:1px solid var(--coral);border-radius:8px;background:transparent;color:var(--coral);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.12s}
.dev-unbindall:hover{background:var(--coral);color:#fff}

/* =========================================================================
   Светлая тема — исправления контраста (WCAG) и протечки тёмной темы.
   Только :root[data-theme="light"]; тёмную тему не затрагивает.
   ========================================================================= */
:root[data-theme="light"]{
  /* семантические цвета калибровались под тёмный фон — на белом провал AA (2.2–2.9). Затемняем. */
  --green:#047857;   /* было #10b981 → 2.5 */
  --amber:#a2530b;   /* было #f97316 → 2.6 */
  --coral:#c02a44;   /* было #ff6476 → 2.7 (ошибки, бейджи, теги, счётчики) */
  --red:#c62828;     /* было #f26d6d → 2.7 */
  --dim:#6c7885;     /* было #8a97a4 → 2.9 (подсказки) */
  /* акцент-как-ТЕКСТ (ссылки/nav/idlink/бейджи) — тёмная бирюза. Заливки используют --acc и не меняются. */
  --acclt:#0a6072;   /* было #0e8fa8 → 3.5 */
}
/* «открытый» FAQ-вопрос использует --acc как текст — затемняем точечно (заливки на --acc не трогаем) */
:root[data-theme="light"] .fp-faq-item.open .fp-faq-q,
:root[data-theme="light"] .fp-faq-item.open .fp-faq-q svg{color:var(--acclt)}
/* единственная заливка на --acclt (hover копирования) — вернуть читаемость после затемнения токена */
:root[data-theme="light"] code.fp-copyable:hover{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acclt)}
/* белые оверлеи невидимы на светлом → чёрные */
:root[data-theme="light"] .fp-burger:hover,
:root[data-theme="light"] .fp-navitem:hover,
:root[data-theme="light"] .fp-iconbtn:hover,
:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .fp-btn:hover,
:root[data-theme="light"] .fp-btn-ghost:hover,
:root[data-theme="light"] .fp-dd-item:hover{background:rgba(0,0,0,.05)}
:root[data-theme="light"] .fp-navitem:hover{color:var(--text)}
:root[data-theme="light"] .fp-quick-t:hover{background:rgba(0,0,0,.04)}
:root[data-theme="light"] .fp-tabs{background:rgba(0,0,0,.045)}
:root[data-theme="light"] .badge-muted,
:root[data-theme="light"] .fp-badge-muted{background:rgba(0,0,0,.06)}
:root[data-theme="light"] .toggle{background:rgba(0,0,0,.13)}
/* спиннер: белый трек на белом невидим → серый */
:root[data-theme="light"] .fp-spinner{border-color:rgba(0,0,0,.12);border-top-color:var(--coral)}
/* оверлей модалки: почти-чёрный слишком резок в светлой теме → мягкий скрим */
:root[data-theme="light"] .fp-modal-overlay{background:rgba(15,23,32,.45)}
/* логотип: почти-белый #eafffb на белом невидим → акцент */
:root[data-theme="light"] .fp-logo{color:var(--acc)}