:root{
  --bg:#f1f0f5; --card:#fff; --text:#1c1e21; --muted:#8a8794;
  --line:#ececf1; --line2:#efedf3; --line3:#e7e4ec;
  --pur:#7c3aed; --pur-d:#5b21b6; --pur-bg:#faf5ff; --pur-bd:#ede9fe;
  --ok:#16a34a; --warn:#d97706; --amber:#facc15; --danger:#dc2626; --info:#1d4ed8; --sky:#0ea5e9;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--text);
  font-family:'Onest',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}
.hidden{display:none!important;}
.mono{font-family:'JetBrains Mono',monospace;}

/* ---------- TOPBAR ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;}
.brand-wrap{display:flex;align-items:center;gap:16px;}
.logo{display:flex;align-items:center;}
.logo-img{height:32px;width:auto;display:block;}
.tabs{display:flex;gap:4px;}
.tab{padding:7px 14px;border-radius:9px;border:none;background:transparent;color:var(--muted);
  font-size:14px;cursor:pointer;font-family:inherit;}
.tab:hover{background:#f5f4f8;}
.tab.active{background:var(--pur-bg);color:var(--pur-d);font-weight:700;}
.shopinfo{font-size:13px;color:var(--muted);} .shopinfo b{color:var(--text);}

/* Единое правило отступа контента под липким хедером — одинаково для ВСЕХ вкладок.
   Внутренние обёртки (.hero, .*-wrap) НЕ добавляют свой верхний отступ, чтобы не удваивать. */
.wrap{max-width:1180px;width:100%;margin:0 auto;padding:24px 22px 60px;}
.view.hidden{display:none;}

/* ---------- HERO DASHBOARD ---------- */
.hero{margin:0;padding:18px 22px;border-radius:18px;
  background:linear-gradient(115deg,#7c3aed,#9333ea 52%,#b15cf0);color:#fff;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  box-shadow:0 16px 34px -18px rgba(124,58,237,.85);}
.hero .stat .num{font-family:'Unbounded';font-weight:800;font-size:38px;line-height:1;}
.hero .stat .lab{opacity:.85;font-size:12.5px;margin-top:4px;}
.hero .vline{width:1px;height:42px;background:rgba(255,255,255,.25);}
.hero .winrate{flex:1;min-width:130px;}
.hero .wr-top{display:flex;justify-content:space-between;font-size:12px;opacity:.9;margin-bottom:6px;}
.hero .wr-top b{font-weight:700;}
.hero .wr-bar{height:9px;border-radius:6px;background:rgba(255,255,255,.22);overflow:hidden;}
.hero .wr-fill{height:100%;border-radius:6px;background:var(--amber);transition:width .6s;}
.hero .wr-legacy{margin-top:7px;font-size:11px;opacity:.7;}.hero .wr-legacy:empty{display:none;}
.btn-light{padding:11px 16px;border:none;border-radius:12px;background:#fff;color:var(--pur-d);
  font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;font-family:inherit;}
.btn-light:hover{background:#f3eeff;}
.btn-ghost{padding:11px 16px;border:1px solid rgba(255,255,255,.55);border-radius:12px;
  background:rgba(255,255,255,.12);color:#fff;font-weight:700;font-size:14px;cursor:pointer;
  white-space:nowrap;font-family:inherit;}
.btn-ghost:hover{background:rgba(255,255,255,.22);}
button:disabled{opacity:.55;cursor:not-allowed;}

/* ---------- TOOLBAR / CHIPS ---------- */
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 2px 6px;}
.tlabel{font-size:13px;color:var(--muted);font-weight:600;}
.tsep{width:1px;height:20px;background:#e3e0ea;}
.chips{display:flex;gap:7px;flex-wrap:wrap;}
.chip{padding:7px 13px;border-radius:999px;border:1.5px solid var(--line3);background:#fff;
  color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap;}
.chip:hover{border-color:#c4b5fd;}
.chip.on{border-color:var(--pur);background:var(--pur);color:#fff;}
.chip.on.sky{border-color:var(--sky);background:var(--sky);}
/* чип магазина: чекбокс + иконка + название (дизайн «Боевой пульт») */
.shop-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 8px;border-radius:999px;
  border:1.5px solid var(--line3);background:#fff;color:#9b97a4;font-weight:700;font-size:13px;
  cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color .15s,color .15s;}
.shop-chip:hover{border-color:#c4b5fd;}
.shop-chip .cbox{display:inline-flex;width:18px;height:18px;flex:none;align-items:center;justify-content:center;
  border-radius:6px;border:1.5px solid #dcd8e2;color:#fff;font-size:11px;transition:background .15s,border-color .15s;}
.shop-chip.on{color:#5a5760;border-color:var(--pur);}
.shop-chip.on .cbox{background:#059669;border-color:#059669;}
.shown{margin-left:auto;font-size:13px;color:#9b97a4;}

/* ---------- BULK BAR ---------- */
.bulkbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;
  padding:10px 14px;background:var(--pur-bg);border:1px solid var(--pur-bd);border-radius:14px;}
.bulkbar .sel-all{display:inline-flex;align-items:center;gap:6px;color:var(--muted);cursor:pointer;font-size:13px;}
.bulkbar #selCount{font-weight:700;font-size:13px;}
/* одинаковая высота всех кнопок панели — эмодзи в части кнопок не должны их растягивать */
.bulkbar .btn-sm{display:inline-flex;align-items:center;justify-content:center;height:38px;line-height:1;}
.sel-dd{position:relative;display:inline-flex;}
.sel-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:220px;background:#fff;
  border:1px solid var(--line3);border-radius:12px;box-shadow:0 16px 40px -12px rgba(20,15,30,.4);
  padding:6px;display:flex;flex-direction:column;gap:2px;}
.sel-menu button{text-align:left;padding:9px 12px;border:none;background:transparent;border-radius:8px;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap;}
.sel-menu button:hover{background:var(--pur-bg);color:var(--pur-d);}
.btn-sm{padding:8px 13px;border-radius:10px;border:1.5px solid var(--line3);background:#fff;
  color:var(--text);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;}
.btn-sm.primary{background:var(--pur);color:#fff;border-color:var(--pur);}
.btn-sm.primary:hover{background:var(--pur-d);}

/* ---------- STATUS LINE ---------- */
.status:empty{display:none;}
.status .msg{margin:12px 0;padding:10px 14px;border-radius:11px;font-size:14px;}
.status .msg.info{background:var(--pur-bg);color:var(--pur-d);}
.status .msg.ok{background:#ecfdf5;color:var(--ok);}
.status .msg.err{background:#fef2f2;color:var(--danger);}

/* ---------- FEED / CARDS ---------- */
.feed{display:flex;flex-direction:column;gap:12px;margin-top:6px;}
.review{display:flex;gap:15px;background:#fff;border:1px solid var(--line2);border-radius:16px;padding:15px;
  position:relative;transition:box-shadow .15s,transform .15s;}
.review:hover{box-shadow:0 12px 30px -16px rgba(40,30,60,.35);transform:translateY(-1px);}
.review:has(.photos img:hover){z-index:40;}
.sel-cb{margin-top:2px;width:17px;height:17px;cursor:pointer;flex:none;accent-color:var(--pur);}
.sel-spacer{width:17px;flex:none;}
.thumb{width:88px;height:88px;flex:none;border-radius:13px;overflow:hidden;background:
  repeating-linear-gradient(45deg,#f4f1f8,#f4f1f8 7px,#ece8f3 7px,#ece8f3 14px);
  display:flex;align-items:center;justify-content:center;font:700 9px 'JetBrains Mono',monospace;
  color:#a78bda;text-align:center;line-height:1.3;}
.thumb img{width:100%;height:100%;object-fit:cover;}
.review .body{flex:1;min-width:0;}
.review .top{display:flex;align-items:center;gap:9px;margin-bottom:4px;flex-wrap:wrap;}
.stars{font-size:14px;letter-spacing:1px;}
.stars.neg{color:var(--danger);} .stars.pos{color:var(--ok);}
.product{font-weight:700;font-size:15px;}
.chance-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.chance-badge.high{background:#ecfdf5;color:var(--ok);border:1px solid #a7f3d0;}
.chance-badge.low{background:#f4f4f6;color:#9ca3af;border:1px solid var(--line3);}
.meta{font-size:12px;color:#9ca3af;font-family:'JetBrains Mono',monospace;margin-bottom:8px;}
.pc{font-size:14px;color:#3a3742;margin-top:2px;} .pc b{color:#a9a6b0;font-weight:600;}
.essence{margin-top:9px;display:inline-flex;align-items:center;gap:7px;background:var(--pur-bg);
  border:1px solid var(--pur-bd);border-radius:9px;padding:6px 11px;font-size:12.5px;color:var(--pur-d);}
/* Дубли текста/фото: проверяемый факт для жалобы, а не украшение. Янтарный, а не фиолетовый —
   это находка-улика, её надо отличать от «сути» (`.essence`), которую сочинил ИИ. */
.dupmarks{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.dupmark{display:inline-flex;align-items:center;gap:6px;background:#fff8e6;border:1px solid #f0d79a;
  border-radius:9px;padding:5px 10px;font-size:12px;color:#8a5b00;font-weight:600;}
.dupmark.photo{background:#fdf0f5;border-color:#f0b8ce;color:#9c2b5c;}
.photos{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px;}
.photos img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line3);
  background:#f4f1f8;cursor:zoom-in;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.photos img:hover{transform:scale(3.1);transform-origin:left center;position:relative;z-index:30;
  border-color:var(--pur);box-shadow:0 16px 40px -10px rgba(20,15,30,.55);}

/* card right action column */
.action{display:flex;flex-direction:column;align-items:flex-end;gap:9px;width:182px;flex:none;}
.chances{font-size:11.5px;font-weight:700;white-space:nowrap;}
.chances.high{color:var(--ok);} .chances.low{color:var(--warn);}
.btn-fight{width:100%;padding:11px;border:none;border-radius:12px;background:var(--pur);color:#fff;
  font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 8px 18px -8px rgba(124,58,237,.8);font-family:inherit;}
.btn-fight:hover{background:var(--pur-d);}
.hint{font-size:10.5px;color:#b6b2bf;text-align:right;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;font-weight:700;font-size:13px;}
.pill.sub{background:#eff6ff;color:var(--info);border:1px solid #bfdbfe;}
.pill.approved{background:#ecfdf5;color:var(--ok);border:1px solid #a7f3d0;}
.pill.rejected{background:#fef2f2;color:var(--danger);border:1px solid #fecaca;}
.pill.review{background:#fffbeb;color:var(--warn);border:1px solid #fde68a;}
.pill.reassessed{background:#eff6ff;color:var(--info);border:1px solid #bfdbfe;}
.pill.locked{background:#f4f4f6;color:#9ca3af;}
.regen-tag{font-size:10.5px;color:var(--warn);}

/* ---------- POPOVER ---------- */
.pop-backdrop{position:fixed;inset:0;z-index:60;background:rgba(20,15,30,.5);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:24px;}
.popover{width:440px;max-width:100%;max-height:86vh;overflow-y:auto;background:#fff;border-radius:18px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);padding:20px;}
.pop-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;}
.pop-head .k{font-size:11px;color:#9b97a4;text-transform:uppercase;letter-spacing:.05em;font-weight:700;}
.pop-head .p{font-weight:700;font-size:15px;margin-top:3px;}
.pop-close{border:none;background:#f4f3f6;width:30px;height:30px;border-radius:9px;font-size:17px;
  line-height:1;cursor:pointer;color:var(--muted);flex:none;}
.pop-essence{display:flex;align-items:center;gap:7px;background:var(--pur-bg);border:1px solid var(--pur-bd);
  border-radius:10px;padding:9px 12px;font-size:13px;color:var(--pur-d);margin-bottom:14px;}
.proposal{border:1.5px solid var(--line);border-radius:13px;padding:12px 13px;cursor:pointer;margin-bottom:9px;}
.proposal:hover{border-color:#c4b5fd;}
.proposal.sel{border:2px solid var(--pur);background:var(--pur-bg);}
.proposal .ph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;}
.proposal .reason{font-weight:700;font-size:13.5px;}
.proposal.sel .reason{color:var(--pur-d);}
.proposal .word{font-size:13px;color:#3a3742;line-height:1.5;}
.proposal:not(.sel) .word{color:#6b7280;}
.btn-submit{width:100%;margin-top:14px;padding:13px;border:none;border-radius:13px;background:var(--pur);
  color:#fff;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 10px 22px -10px rgba(124,58,237,.85);font-family:inherit;}
.btn-submit:hover{background:var(--pur-d);}
.btn-regen{width:100%;margin-top:8px;padding:10px;border:1px solid #f0e6c9;border-radius:12px;
  background:#fffbeb;color:#b45309;font-weight:600;font-size:13.5px;cursor:pointer;font-family:inherit;}
.pop-warn{font-size:11px;color:#b6b2bf;text-align:center;margin-top:9px;}

/* ---------- TOAST ---------- */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:9998;background:#15131c;
  color:#fff;padding:14px 24px;border-radius:14px;font-weight:700;font-size:15px;
  box-shadow:0 20px 48px -12px rgba(0,0,0,.6);}

.empty{text-align:center;padding:50px 20px;color:#9b97a4;font-size:15px;}

/* ---------- SHOPS VIEW ---------- */
.shops-wrap{padding:0;}  /* полная ширина — как у остальных вкладок */
.shops-wrap h2{font-size:18px;margin:0 0 4px;font-family:'Unbounded';}
.muted{color:var(--muted);}
.shops-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.btn-sm.danger{color:var(--danger);border-color:#fecaca;}

/* ---------- EXTENSION KEY (Phase 2) ---------- */
.ext-wrap{margin-top:30px;padding-top:22px;border-top:1px dashed var(--line2);}
.ext-wrap h2{font-size:18px;margin:0 0 4px;font-family:'Unbounded';}
.ext-key-row{display:flex;gap:8px;margin:14px 0 8px;flex-wrap:wrap;align-items:center;}
.ext-key-row input{flex:1;min-width:240px;padding:10px 13px;border:1px solid var(--line3);border-radius:11px;
  font-size:13px;font-family:'JetBrains Mono',monospace;background:#faf9fc;color:var(--text);}
.ext-key-row input:focus{outline:none;border-color:var(--pur);}
#extMeta{font-size:12.5px;}
.ext-actions{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap;}
.ext-actions #extConnState{font-size:12.5px;}
#extInstall{display:inline-block;text-decoration:none;text-align:center;margin:10px 0;}
.ext-manual{margin-top:8px;}
.ext-manual summary{cursor:pointer;font-size:12.5px;}
.ext-manual .ext-key-row{margin-top:10px;}

/* ---------- AUTH (вход арендатора, SaaS) ----------
   Два экрана в одном: слева тёмная витрина модулей (слайдер), справа светлая форма.
   Наполнение слайдов живёт в app.js (AUTH_SLIDES) — здесь только оформление. */
.topbar-right{display:flex;align-items:center;gap:12px;}
.auth-overlay{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:1.05fr 1fr;
  background:#111018;overflow:auto;}

/* --- левая колонка: витрина --- */
.auth-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  gap:28px;padding:44px 52px;color:#fff;
  background:radial-gradient(1100px 700px at 12% -8%,#3b2f63 0%,#1a1826 52%,#111018 100%);}
.auth-glow{position:absolute;border-radius:50%;pointer-events:none;}
.auth-glow.one{top:-140px;right:-140px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(124,58,237,.35),transparent 65%);}
.auth-glow.two{bottom:-180px;left:-120px;width:480px;height:480px;
  background:radial-gradient(circle,rgba(124,58,237,.18),transparent 65%);}
.auth-brand{position:relative;display:flex;align-items:center;gap:10px;}
.auth-brand .logo-badge{background:radial-gradient(circle at 50% 30%,#2c2836,#15131c);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 5px 14px -3px rgba(0,0,0,.6);}
.auth-brand .logo-dot{border-color:#1a1826;}
.auth-brand-word{font-family:'Unbounded';font-weight:800;font-size:21px;letter-spacing:-.02em;color:#fff;}
.auth-brand-word b{color:#a78bfa;font-weight:800;}
.auth-pitch{position:relative;max-width:540px;}
.auth-badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 14px;
  font-size:12.5px;font-weight:700;margin-bottom:22px;
  background:rgba(124,58,237,.16);border:1px solid rgba(167,139,250,.3);color:#c4b5fd;}
.auth-badge-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;animation:authPulse 2s infinite;}
.auth-slide{animation:authSlideIn .45s ease;}
.auth-hero-title{font-family:'Unbounded';font-weight:800;font-size:clamp(25px,2.5vw,36px);line-height:1.2;
  letter-spacing:-.01em;margin:0;}
.auth-hero-title span{color:#a78bfa;}
.auth-hero-text{font-size:15.5px;line-height:1.6;color:#b9b4cd;margin:15px 0 0;min-height:74px;}
.auth-stats{display:flex;gap:26px;margin-top:26px;}
.auth-stats .st-num{font-family:'Unbounded';font-weight:800;font-size:23px;color:#fff;white-space:nowrap;}
.auth-stats .st-lab{font-size:12.5px;color:#8f89a8;margin-top:4px;white-space:pre-line;}
.auth-stats .st-sep{width:1px;background:rgba(255,255,255,.1);}
.auth-slider-ctl{display:flex;align-items:center;gap:14px;margin-top:34px;}
.auth-dots{display:flex;gap:7px;}
.auth-dots button{width:8px;height:8px;padding:0;border:none;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.22);transition:all .3s ease;}
.auth-dots button.on{width:26px;background:#a78bfa;}
.auth-pause{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.06);
  color:#b9b4cd;font-size:10px;font-family:inherit;cursor:pointer;}
.auth-pause:hover{background:rgba(255,255,255,.14);}
.auth-tag{font-size:12px;color:#6f6a85;font-weight:600;}
.auth-float{position:relative;display:flex;align-items:center;gap:12px;width:100%;max-width:460px;
  padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);animation:authFloaty 6s ease-in-out infinite;}
.auth-float-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:10px;background:rgba(34,197,94,.15);font-size:17px;}
.auth-float-body{min-width:0;}
.auth-float-title{font-weight:700;font-size:13.5px;color:#fff;}
.auth-float-sub{font-size:12px;color:#8f89a8;margin-top:2px;}

/* --- правая колонка: форма --- */
.auth-pane{background:#f7f6fa;display:flex;align-items:center;justify-content:center;padding:40px 32px;}
.auth-form{width:100%;max-width:400px;display:flex;flex-direction:column;}
.auth-title{font-family:'Unbounded';font-weight:800;font-size:25px;letter-spacing:-.01em;color:#15131c;}
.auth-sub{font-size:14.5px;color:#7a7688;margin-top:8px;line-height:1.5;}
.auth-form input[type=email],.auth-form input[type=password],.auth-form input[type=text]{
  width:100%;height:50px;padding:0 16px;border:1.5px solid var(--line3);border-radius:13px;background:#fff;
  font-size:15px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;}
.auth-form input[type=email]{margin-top:26px;}
.auth-form input:focus{border-color:var(--pur);box-shadow:0 0 0 4px rgba(124,58,237,.1);}
.auth-form input.err{border-color:#f0a8a8;}
.auth-pw{position:relative;margin-top:12px;}
.auth-pw input{padding-right:52px;}
.auth-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;
  border:none;border-radius:10px;background:transparent;color:#9793a6;font-size:16px;cursor:pointer;}
.auth-eye:hover{background:#f3f0fa;}
.auth-remember{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;color:#57536a;
  cursor:pointer;user-select:none;align-self:flex-start;}
.auth-remember input{width:17px;height:17px;accent-color:var(--pur);cursor:pointer;}
.auth-msg{min-height:18px;font-size:12.5px;color:var(--muted);margin-top:10px;}
.auth-msg.err{color:var(--danger);font-weight:600;}
.auth-btn{height:52px;border-radius:13px;border:1.5px solid var(--line3);background:#fff;color:var(--text);
  font-weight:800;font-size:15.5px;cursor:pointer;font-family:inherit;transition:transform .12s ease;}
.auth-btn:hover{border-color:#c4b5fd;}
.auth-btn.primary{background:var(--pur);color:#fff;border-color:var(--pur);
  box-shadow:0 10px 24px -8px rgba(124,58,237,.5);}
.auth-btn.primary:hover{background:var(--pur-d);border-color:var(--pur-d);transform:translateY(-1px);}
.auth-btn.primary:active{transform:translateY(0);}
.auth-btn[disabled]{background:#a78bfa;border-color:#a78bfa;cursor:default;transform:none;}
.auth-switch{text-align:center;margin-top:22px;font-size:14px;color:#7a7688;}
.auth-link{border:none;background:none;padding:0;font:inherit;font-weight:700;color:var(--pur);cursor:pointer;}
.auth-link:hover{color:var(--pur-d);}
/* Вход через общий аккаунт FBOXY. Блок появляется только когда мост настроен на сервере. */
.auth-core{display:flex;flex-direction:column;gap:10px;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--line3);}
.auth-core-sep{align-self:center;margin-top:-31px;padding:0 12px;background:#fff;
  font-size:12px;font-weight:700;color:#9793a6;text-transform:uppercase;letter-spacing:.06em;}
.auth-core-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;}
.auth-core-hint{font-size:12px;line-height:1.5;color:#9793a6;text-align:center;}

.auth-note{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:30px;
  font-size:12px;color:#9793a6;text-align:left;}
.auth-note svg{flex:none;width:14px;height:14px;}

@keyframes authFloaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes authPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
@keyframes authSlideIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}

/* Низкий экран (ноутбук 1280×720 и ниже): витрина не влезала целиком — бренд и заголовок
   уезжали за край. Ужимаем отступы, а не прячем блоки. */
@media (max-height:840px){
  .auth-hero{padding:28px 44px;gap:16px;}
  .auth-hero-text{min-height:0;margin-top:12px;}
  .auth-badge{margin-bottom:16px;}
  .auth-stats{margin-top:20px;}
  .auth-slider-ctl{margin-top:22px;}
  .auth-float{padding:12px 14px;}
  .auth-note{margin-top:22px;}
}
@media (max-height:680px){
  .auth-float,.auth-hero-text{display:none;}
}

/* Узкий экран: витрина ужимается в шапку над формой, форма остаётся целиком. */
@media (max-width:900px){
  .auth-overlay{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .auth-hero{gap:20px;padding:26px 24px 30px;}
  .auth-hero-text{min-height:0;font-size:14.5px;}
  .auth-stats,.auth-float,.auth-slider-ctl{display:none;}
  /* форма прижимается к витрине, а не центрируется в остатке экрана: на высоком узком
     окне центрирование отбрасывало её на пол-экрана вниз */
  .auth-pane{align-items:flex-start;padding:30px 22px 46px;}
  .auth-form input[type=email]{margin-top:20px;}
}
@media (max-width:560px){
  .auth-hero-title{font-size:22px;}
  .auth-hero-text{display:none;}
  .auth-badge{margin-bottom:14px;}
}
@media (prefers-reduced-motion:reduce){
  .auth-float,.auth-badge-dot,.auth-slide{animation:none;}
}

/* ---------- PHASE 2: очередь / «что подано» / режим создателя ---------- */
.pill.queued{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;}
.submitted-text{margin-top:9px;display:flex;align-items:flex-start;gap:7px;background:#f0f6ff;
  border:1px solid #dbeafe;border-radius:9px;padding:7px 11px;font-size:12.5px;color:#1e40af;line-height:1.5;}
#creatorToggle.on{background:var(--pur);color:#fff;border-color:var(--pur);}
.action .btn-sm.dbg{width:100%;text-align:center;background:#faf9fc;border-style:dashed;color:var(--muted);font-size:12px;padding:6px 10px;}
.action .btn-sm.dbg:hover{border-color:#c4b5fd;color:var(--pur-d);}
.action .btn-sm.dbg.profanity{color:var(--danger);border-color:#fecaca;}
.hero #hBilling{margin-top:7px;font-size:11.5px;color:rgba(255,255,255,.85);}
.hero #hBilling:empty{display:none;}

/* ---------- ТАРИФ ---------- */
.bill-wrap{padding:0;}  /* полная ширина — страница «Тариф и оплата» по макету */
.bill-wrap h2{font-size:18px;margin:0 0 12px;font-family:'Unbounded';}
.bill-wrap .bp-title{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0 0 4px;}
.bill-wrap .bp-sub{font-size:14.5px;margin:0 0 22px;}
.bill-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line2);border-radius:12px;overflow:hidden;}
.bill-table th{padding:9px 12px;text-align:left;font-size:11px;color:#9b97a4;text-transform:uppercase;
  letter-spacing:.04em;border-bottom:1px solid var(--line2);background:#faf9fc;}
.bill-table td{padding:8px 12px;font-size:13px;border-bottom:1px solid var(--line2);}
.bill-table tr:last-child td{border-bottom:none;}
.amt-pos{color:var(--ok);font-weight:700;} .amt-neg{color:var(--danger);font-weight:700;}

/* ---------- МОДАЛКА ТАРИФОВ / ПОЗДРАВЛЕНИЕ ---------- */
.popover.plans-pop{width:720px;}
.congrats-pop{text-align:center;}
.congrats-emoji{font-size:44px;}
.congrats-title{font-family:'Unbounded';font-weight:800;font-size:18px;margin:8px 0 6px;}

/* ---------- АДМИН ---------- */
.admin-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line2);
  border-radius:12px;overflow:hidden;margin-top:14px;}
.admin-table th{padding:9px 10px;text-align:left;font-size:11px;color:#9b97a4;text-transform:uppercase;
  letter-spacing:.04em;border-bottom:1px solid var(--line2);background:#faf9fc;}
.admin-table td{padding:8px 10px;font-size:13px;border-bottom:1px solid var(--line2);vertical-align:top;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-actions{display:flex;gap:5px;flex-wrap:wrap;max-width:280px;}
.admin-actions .btn-sm{padding:5px 9px;font-size:11.5px;}
.admin-plan{padding:6px 9px;border:1.5px solid var(--line3);border-radius:9px;font-family:inherit;font-size:12.5px;background:#fff;}
.admin-num{width:86px;padding:5px 7px;border:1px solid var(--line3);border-radius:8px;
  font-size:12.5px;font-family:'JetBrains Mono',monospace;}
.admin-plans{margin-top:26px;}
.admin-plans h3{font-size:15px;margin:0;}

/* ---------- профиль в хедере (дизайн из прототипа «Боевой пульт») ---------- */
.profile-dd { position: relative; }
.avatar-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--pur);
  background: radial-gradient(circle at 50% 35%, #fff4e0, #ffe0b8);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(124,58,237,.5);
  transition: box-shadow .15s, transform .15s;
}
.avatar-btn:hover { box-shadow: 0 6px 16px -4px rgba(124,58,237,.65); transform: translateY(-1px); }

.profile-menu {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 60; width: 290px;
  background: #fff; border: 1px solid #eee7f7; border-radius: 20px;
  box-shadow: 0 30px 70px -20px rgba(40,20,70,.45); overflow: hidden;
}
.pm-head {
  position: relative; padding: 18px 18px 16px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #5b21b6, #7c3aed 55%, #9333ea);
}
.pm-decor { position: absolute; right: -24px; top: -24px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.09); }
.pm-head-row { position: relative; display: flex; align-items: center; gap: 12px; }
.pm-ava {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.85);
  background: radial-gradient(circle at 50% 35%, #fff4e0, #ffd9ac); font-size: 23px;
  box-shadow: 0 6px 14px -5px rgba(0,0,0,.4);
}
.pm-who { min-width: 0; }
.pm-name { font-weight: 800; font-size: 15.5px; }
.pm-mail { font-size: 12px; color: #e6dcff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-pills { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 13px; flex-wrap: wrap; }
.pm-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 3px 10px;
}
.pm-body { padding: 8px; }
.pm-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 11px; border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 600; color: #2c2933; cursor: pointer; background: none; border: 0; text-align: left;
}
.pm-item:hover { background: #f6f4fa; }
.pm-item.out { color: #dc2626; }
.pm-item.out:hover { background: #fef2f2; }
.pm-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px; font-size: 15px;
}
.pm-ico.vio { background: #f3ecff; }
.pm-ico.grn { background: #e7f7ef; }
.pm-ico.amb { background: #fff5e0; }
.pm-ico.red { background: #fef2f2; }
.pm-lab { flex: 1; min-width: 0; }
.pm-arr { margin-left: auto; color: #c4bfce; font-size: 15px; }
.pm-badge {
  margin-left: auto; font-size: 11px; font-weight: 700; color: #059669;
  background: #e7f7ef; border-radius: 999px; padding: 2px 8px;
}
.pm-div { height: 1px; background: #efeaf5; margin: 6px 10px; }

/* модалка профиля (баннер + личные данные + смена пароля) */
.profile-pop { width: 460px; max-width: 100%; padding: 0; overflow: hidden; }
.pf-head {
  position: relative; padding: 22px 24px 20px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, #5b21b6, #7c3aed 55%, #9333ea);
}
.pf-decor { position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.pf-decor.d1 { right: -30px; top: -40px; width: 150px; height: 150px; }
.pf-decor.d2 { right: 60px; bottom: -50px; width: 90px; height: 90px; background: rgba(255,255,255,.07); }
.pf-x {
  position: absolute; top: 16px; right: 16px; z-index: 2; border: none; cursor: pointer;
  background: rgba(255,255,255,.18); width: 32px; height: 32px; border-radius: 10px;
  font-size: 18px; line-height: 1; color: #fff;
}
.pf-x:hover { background: rgba(255,255,255,.3); }
.pf-head-row { position: relative; display: flex; align-items: center; gap: 14px; }
.pf-ava {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 56px; height: 56px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85);
  background: radial-gradient(circle at 50% 35%, #fff4e0, #ffd9ac); font-size: 28px;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.4);
}
.pf-name { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 20px; line-height: 1.1; }
.pf-mail { font-size: 12.5px; color: #e6dcff; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-stats { position: relative; display: flex; gap: 9px; margin-top: 16px; }
.pf-stat { flex: 1; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 9px 12px; }
.pf-stat-l { font-size: 11px; color: #e6dcff; }
.pf-stat-v { font-weight: 800; font-size: 14px; margin-top: 2px; }
.pf-body { padding: 22px 24px 24px; }
.pf-sec { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pur); margin-bottom: 13px; }
.pf-label { font-size: 12.5px; font-weight: 600; color: #8a8698; margin-bottom: 7px; }
.pf-input {
  width: 100%; height: 46px; border: 1.5px solid #e6e1f0; border-radius: 12px; padding: 0 14px;
  font: inherit; font-size: 15px; color: var(--text); background: #faf9fc; margin-bottom: 16px;
}
.pf-input:focus { border-color: var(--pur); background: #fff; outline: none; }
.pf-input[type="password"] { margin-bottom: 10px; }
.pf-mail-ro {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 46px;
  border: 1.5px solid #eeecf2; border-radius: 12px; padding: 0 14px;
  font-size: 15px; color: #9a96a8; background: #f4f3f6; margin-bottom: 18px;
}
.pf-mail-ro span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-save {
  width: 100%; padding: 14px; border: none; border-radius: 13px; cursor: pointer;
  background: var(--pur); color: #fff; font: inherit; font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 22px -10px rgba(124,58,237,.85);
}
.pf-save:hover { background: #6d28d9; }
.pf-div { height: 1px; background: #efeaf5; margin: 22px 0 18px; }
.pf-err { font-size: 12.5px; color: #dc2626; margin: -2px 0 10px; }
.pf-pass {
  width: 100%; padding: 13px; border: 1.5px solid #f0e6c9; border-radius: 12px; cursor: pointer;
  background: #fffbeb; color: #b45309; font: inherit; font-weight: 700; font-size: 14.5px;
}
.pf-pass:hover { background: #fef6dc; }

/* ---------- док-процесс массового оспаривания («заклинания», низ экрана, без блюра) ---------- */
.spell-dock {
  position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 320px; max-width: calc(100vw - 40px);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(20,10,50,.22); padding: 16px 18px 14px; text-align: center;
  animation: dockIn .35s cubic-bezier(.2,.7,.3,1.1);
}
@keyframes dockIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.spell-x {
  position: absolute; top: 6px; right: 10px; border: 0; background: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--muted);
}
.spell-x:hover { color: var(--text); }
.spell-title { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 15px; margin: 4px 0 8px; }
.spell-step { color: var(--muted); font-size: 13px; min-height: 20px; margin-bottom: 12px; }
.spell-step.tick { animation: spellIn .45s ease; }
@keyframes spellIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.spell-bar { height: 8px; border-radius: 6px; background: rgba(124,58,237,.12); overflow: hidden; }
.spell-fill { height: 100%; width: 0%; border-radius: 6px; background: linear-gradient(90deg, var(--pur), #a855f7); transition: width .35s ease; }
.spell-total { color: var(--muted); font-size: 13px; margin: 10px 0 2px; }
.spell-dock .congrats-emoji { font-size: 30px; margin: 2px 0 6px; }
.spell-dock .pc { font-size: 13px; }

/* ---------- «Тариф и оплата» (дизайн-макет) ---------- */
.bp-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 14px; }
@media (max-width: 900px) { .bp-grid { grid-template-columns: 1fr; } .bp-plans-grid { grid-template-columns: 1fr 1fr; } }
.bp-hero { position: relative; border-radius: 20px; padding: 24px 26px; color: #fff; overflow: hidden;
  background: linear-gradient(130deg,#5b21b6,#7c3aed 55%,#9333ea); box-shadow: 0 20px 44px -22px rgba(124,58,237,.9); }
.bp-decor { position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.bp-decor.d1 { right: -40px; top: -50px; width: 190px; height: 190px; }
.bp-decor.d2 { right: 70px; bottom: -70px; width: 120px; height: 120px; background: rgba(255,255,255,.06); }
.bp-hero-in { position: relative; }
.bp-hero-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.bp-chip { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #e2d6ff;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 4px 11px; }
.bp-active { font-size: 12px; color: #e2d6ff; }
.bp-hero-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.bp-hero-title { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 28px; line-height: 1; }
.bp-hero-price { font-size: 15px; color: #e2d6ff; padding-bottom: 3px; }
.bp-hero-price .dim { opacity: .75; }
.bp-hero-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 20px; }
.bp-hstat-v { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 22px; }
.bp-hstat-l { font-size: 11.5px; color: #d6cbf5; margin-top: 2px; }
.bp-hsep { width: 1px; background: rgba(255,255,255,.2); }
.bp-hero-btns { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.bp-btn-white { padding: 12px 18px; border: none; border-radius: 12px; background: #fff; color: #5b21b6; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.bp-btn-ghost { padding: 12px 18px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.bp-side { display: flex; flex-direction: column; gap: 14px; }
.bp-card { background: #fff; border: 1px solid #efedf3; border-radius: 18px; padding: 18px 20px; }
.bp-card.grow { flex: 1; }
.bp-card-t { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pur); margin-bottom: 12px; }
.bp-bar-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; color: #6b6780; }
.bp-bar-row b { color: var(--text); }
.bp-bar { height: 8px; border-radius: 5px; background: #f0ecf6; overflow: hidden; }
.bp-bar-f { height: 100%; border-radius: 5px; }
.bp-bar-f.vio { background: linear-gradient(90deg,#7c3aed,#a855f7); }
.bp-bar-f.grn { background: linear-gradient(90deg,#059669,#34d399); }
.bp-next { display: flex; align-items: baseline; gap: 8px; }
.bp-next-v { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 24px; }
.bp-next-v.vio { color: var(--pur); }
.bp-next-d { font-size: 13px; color: #8a8698; }
.bp-note { font-size: 12.5px; color: #8a8698; margin-top: 6px; }
.bp-plans-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 26px 0 16px; }
.bp-h2 { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 20px; }
.bp-cycle-wrap { display: flex; align-items: center; gap: 10px; }
.bp-dim { font-size: 13px; color: #8a8698; }
.bp-cycle { display: flex; gap: 4px; background: #eceaf2; border-radius: 11px; padding: 4px; }
.bp-cycle button { border: none; background: transparent; color: #6b6780; font: inherit; font-weight: 700; font-size: 13px; padding: 8px 15px; border-radius: 8px; cursor: pointer; }
.bp-cycle button.on { background: var(--pur); color: #fff; }
.bp-cycle .bp-disc { font-size: 11px; color: #16a34a; }
.bp-cycle button.on .bp-disc { color: #fff; opacity: .85; }
.bp-plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.bp-plan { position: relative; background: #fff; border: 2px solid #eae4f5; border-radius: 18px; padding: 22px 20px; display: flex; flex-direction: column; }
.bp-plan.accent { background: linear-gradient(165deg,#4c1d95,#2e1065); border-color: #4c1d95; box-shadow: 0 24px 50px -22px rgba(76,29,149,.8); color: #fff; }
.bp-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 800; font-size: 11px; padding: 5px 13px; border-radius: 999px; white-space: nowrap; }
.bp-badge.cur { background: #16a34a; }
.bp-badge.pop { background: #ff7a00; }
.bp-plan-name { font-weight: 800; font-size: 17px; margin-bottom: 3px; }
.bp-plan-tag { font-size: 12.5px; color: #8a8698; margin-bottom: 15px; }
.bp-plan.accent .bp-plan-tag { color: #c4b5fd; }
.bp-plan-price { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 26px; line-height: 1; }
.bp-plan-note { font-size: 12px; color: #8a8698; margin: 6px 0 16px; min-height: 32px; }
.bp-plan.accent .bp-plan-note { color: #c4b5fd; }
.bp-plan-feats { display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: #4a4658; flex: 1; }
.bp-plan.accent .bp-plan-feats { color: #eae4fb; }
.bp-plan-feats span { display: flex; gap: 8px; }
.bp-plan-feats i { font-style: normal; color: var(--pur); flex: none; }
.bp-plan.accent .bp-plan-feats i { color: #a5f3c0; }
.bp-plan-cta { margin-top: 20px; padding: 12px; border-radius: 12px; border: none; background: var(--pur); color: #fff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.bp-plan-cta:hover { background: #6d28d9; }
.bp-plan-cta:disabled { opacity: .7; cursor: default; }
.bp-plan-cur { margin-top: 20px; text-align: center; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.4); color: #fff; font-weight: 700; font-size: 14px; }
.bp-plan:not(.accent) .bp-plan-cur { background: #f6f4fa; border-color: #e6e1f0; color: #5b21b6; }
.bp-plans-note { text-align: center; margin-top: 18px; font-size: 13.5px; color: #8a8698; }
.bp-tx-wrap { margin-top: 20px; }
.bp-csv { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1.5px solid #e4dff1; border-radius: 11px; background: #fff; color: #4c1d95; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.bp-csv:hover { background: #faf7ff; }
.bp-scards { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bp-scard { flex: 1; min-width: 150px; background: #fff; border: 1px solid #efedf3; border-radius: 14px; padding: 14px 16px; }
.bp-scard-l { font-size: 12px; color: #8a8698; }
.bp-scard-v { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 21px; margin-top: 3px; }
.bp-scard-v.red { color: #dc2626; }
.bp-scard-v.grn { color: #16a34a; }
.bp-scard-v.vio { color: var(--pur); }
.bp-tx-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.bp-chip-f { padding: 7px 14px; border-radius: 999px; border: 1.5px solid #e7e4ec; background: #fff; color: #8a8794; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.bp-chip-f.on { border-color: var(--pur); background: var(--pur); color: #fff; }
.bp-table { background: #fff; border: 1px solid #efedf3; border-radius: 18px; overflow: hidden; }
.bp-thead, .bp-trow { display: grid; grid-template-columns: 110px 1fr 120px 130px; gap: 12px; padding: 13px 20px; align-items: center; }
.bp-thead { background: #faf9fc; border-bottom: 1px solid #efedf3; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9b97a4; }
.bp-trow { border-bottom: 1px solid #f4f2f8; padding: 15px 20px; }
.bp-trow:hover { background: #faf9fc; }
.bp-trow:last-child { border-bottom: none; }
.bp-thead .r, .bp-trow .r { text-align: right; }
.bp-tdate { font-size: 12.5px; color: #8a8698; font-family: "JetBrains Mono", monospace; }
.bp-top2 { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bp-tico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; font-size: 16px; flex: none; background: #ecfdf5; }
.bp-tico.pending { background: #fff5e0; }
.bp-tico.bad { background: #fef2f2; }
.bp-tt1 { font-weight: 600; font-size: 14px; color: #2c2933; }
.bp-tt2 { font-size: 12px; color: #9b97a4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-tamt { font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 14px; }
.bp-tamt.red { color: #dc2626; }
.bp-tamt.grn { color: #16a34a; }
.bp-tamt.dim { color: #9b97a4; }
.bp-tst { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 11px; color: #059669; background: #e7f7ef; }
.bp-tst.pending { color: #b45309; background: #fff5e0; }
.bp-tst.bad { color: #dc2626; background: #fef2f2; }
.bp-tempty { padding: 40px; text-align: center; color: #9b97a4; font-size: 14px; }
.bp-topup-pop { width: 420px; max-width: 100%; padding: 0; overflow: hidden; }
.bp-tp-title { position: relative; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 20px; }
.bp-tp-sub { position: relative; font-size: 13px; color: #e2d6ff; margin-top: 4px; }
.bp-tp-body { padding: 22px 24px 24px; }
.bp-tp-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; margin-bottom: 16px; }
.bp-tp-opt { padding: 14px 8px; border: 1.5px solid #e6e1f0; background: #fff; border-radius: 13px; font: inherit; font-weight: 800; font-size: 15px; color: #2c2933; cursor: pointer; }
.bp-tp-opt:hover { border-color: #c4b5fd; }
.bp-tp-opt.on { border: 2px solid var(--pur); background: #faf5ff; color: #5b21b6; }
.bp-tp-total { display: flex; align-items: center; gap: 10px; background: #f6f4fa; border-radius: 12px; padding: 12px 15px; margin-bottom: 18px; font-size: 13px; color: #6b6780; }
.bp-tp-total b { margin-left: auto; font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 18px; color: var(--pur); }
.bp-tp-note { font-size: 11.5px; color: #b6b2bf; text-align: center; margin-top: 11px; }

/* ---------- «Магазины» (дизайн-макет) ---------- */
.sh-add-card { background: #fff; border: 1px solid #efedf3; border-radius: 18px; padding: 20px 22px; margin-bottom: 22px; }
.sh-add-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sh-input {
  flex: 1; min-width: 220px; height: 48px; border: 1.5px solid #e6e1f0; border-radius: 13px;
  padding: 0 15px; font: inherit; font-size: 14.5px; color: var(--text); background: #faf9fc;
}
.sh-input:focus { border-color: var(--pur); background: #fff; outline: none; }
.sh-input.mono { font-family: "JetBrains Mono", monospace; font-size: 13px; }
.sh-add-btn {
  height: 48px; padding: 0 24px; border: none; border-radius: 13px; background: var(--pur); color: #fff;
  font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(124,58,237,.85);
}
.sh-add-btn:hover { background: #6d28d9; }
.sh-secnote { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #9b97a4; margin-top: 12px; }
.sh-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.sh-h2 { font-size: 17px; }
.sh-limit { font-size: 13px; color: #8a8698; }
.sh-limit b { color: #5b21b6; }
.shops-list { display: flex; flex-direction: column; gap: 12px; }
.sh-row {
  display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #efedf3;
  border-radius: 16px; padding: 16px 18px; flex-wrap: wrap;
}
.sh-row.off { opacity: .82; }
.sh-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 48px; height: 48px; border-radius: 13px; background: #f3ecff; font-size: 22px;
}
.sh-ico.off { background: #f0eef2; }
.sh-info { min-width: 150px; }
.sh-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sh-name { font-weight: 800; font-size: 16px; }
.sh-st {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700;
  color: #9b97a4; background: #f0eef2; border-radius: 999px; padding: 2px 9px;
}
.sh-st.on { color: #059669; background: #e7f7ef; }
.sh-token { font-size: 12.5px; color: #9b97a4; font-family: "JetBrains Mono", monospace; margin-top: 3px; }
.sh-stats { display: flex; gap: 22px; margin-left: 8px; }
.sh-stat { text-align: center; }
.sh-stat-v { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 17px; }
.sh-stat-v.amber { color: #d97706; }
.sh-stat-v.green { color: #16a34a; }
.sh-stat-l { font-size: 11px; color: #9b97a4; margin-top: 1px; }
.sh-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.sh-switch {
  display: inline-flex; align-items: center; width: 46px; height: 26px; border-radius: 999px;
  border: none; background: #d6d2dd; cursor: pointer; padding: 3px; justify-content: flex-start;
  transition: background .15s;
}
.sh-switch.on { background: var(--pur); justify-content: flex-end; }
.sh-knob { width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.sh-btn {
  padding: 9px 14px; border: 1.5px solid #e4dff1; border-radius: 11px; background: #fff;
  color: #4c1d95; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
}
.sh-btn:hover { background: #faf7ff; }
.sh-btn.danger { border-color: #fbdcdc; color: #dc2626; }
.sh-btn.danger:hover { background: #fef2f2; }
.sh-empty {
  text-align: center; padding: 40px; background: #fff; border: 1px dashed #dcd8e2;
  border-radius: 16px; color: #9b97a4; font-size: 14px;
}
/* блок расширения */
.sh-ext {
  background: linear-gradient(150deg, #faf7ff, #f3ecff); border: 1px solid #e9e0fb;
  border-radius: 20px; padding: 26px 28px; margin-top: 28px;
}
.sh-ext-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; flex-wrap: wrap; }
.sh-ext-emoji { font-size: 26px; }
.sh-ext-title { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 20px; }
.sh-ext-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: #059669; background: #e7f7ef; border: 1px solid #b7e7cb; border-radius: 999px; padding: 4px 11px;
}
.sh-ext-badge.off { color: #9b97a4; background: #f0eef2; border-color: #e3e0ea; }
.sh-ext-desc { font-size: 14.5px; color: #57536a; line-height: 1.55; max-width: 640px; margin: 0 0 20px; }
.sh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 860px) { .sh-steps { grid-template-columns: 1fr; } }
.sh-step { background: #fff; border: 1px solid #eee8f7; border-radius: 14px; padding: 16px; }
.sh-step-n {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--pur); color: #fff; font-family: "Unbounded", sans-serif;
  font-weight: 800; font-size: 14px; margin-bottom: 11px;
}
.sh-step-n.ok { background: #16a34a; }
.sh-step-t { font-weight: 700; font-size: 14px; margin-bottom: 5px; }
.sh-step-d { font-size: 12.5px; color: #6b6780; line-height: 1.5; }
.sh-step-d code { font-family: "JetBrains Mono", monospace; background: #f3ecff; padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.sh-ext-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sh-connect {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border: none;
  border-radius: 13px; background: var(--pur); color: #fff; font: inherit; font-weight: 700;
  font-size: 14.5px; cursor: pointer; box-shadow: 0 12px 24px -12px rgba(124,58,237,.85);
}
.sh-connect:hover { background: #6d28d9; }
.sh-connect.ok { background: #e7f7ef; color: #059669; border: 1.5px solid #b7e7cb; box-shadow: none; cursor: default; }
.sh-manual { margin-left: auto; }
.sh-manual summary { font-size: 13px; color: #8a8698; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.sh-manual summary::-webkit-details-marker { display: none; }
.sh-manual .ext-key-row { margin-top: 12px; }

/* ---------- хедер по макету: рамка вокруг головы лого + онлайн-точка + выравнивание кнопок ---------- */
.logo.brand { display: flex; align-items: center; gap: 9px; }
.logo-badge {
  position: relative; display: inline-flex; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  box-shadow: 0 5px 12px -3px rgba(0,0,0,.45);
}
/* клип — во ВНУТРЕННЕМ слое, чтобы онлайн-точка не обрезалась краем круга */
.logo-clip {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #2c2836, #15131c);
  display: flex; align-items: center; justify-content: flex-start;
}
/* голова в logo.png (замерено пиксельным сканом): x 1–160, y 0–158 при 604×160.
   Высота img 34px ⇒ голова ≈34×34; поля в круге 42px — ровно по 4px со всех сторон. */
.logo-head { height: 34px; width: auto; max-width: none; margin-left: 4px; }
.logo-dot {
  position: absolute; top: 0; right: 0; width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid #fff; z-index: 2;
}
.logo-word { font-family: "Unbounded", sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: #15131c; white-space: nowrap; }
.logo-word b { color: var(--pur); font-weight: 800; }
/* кнопки-вкладки: одинаковая высота и выравнивание (эмодзи не растягивают) */
.tabs { align-items: center; gap: 2px; }
.tab { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 10px; font-weight: 600; line-height: 1; }
.tab.active { padding: 0 14px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
#creatorToggle {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px;
  border: 1.5px solid #e4dff1; border-radius: 12px; background: #fff; color: #4c1d95;
  font-weight: 700; font-size: 13.5px; white-space: nowrap;
}
#creatorToggle:hover { background: #faf7ff; border-color: #c4b5fd; }
#creatorToggle.on { background: var(--pur); border-color: var(--pur); color: #fff; }

/* ---------- Аналитика негатива (дизайн-макет «Аналитика») ---------- */
.an-wrap { padding: 0; }
.an-title-row { display: flex; align-items: center; gap: 11px; margin-bottom: 5px; }
.an-title-emoji { font-size: 24px; }
.an-wrap .bp-title.an-title { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.an-wrap .bp-sub { font-size: 14.5px; margin: 0 0 22px; color: var(--muted); }

/* обзорная витрина */
.an-ov { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.an-ov-card { flex: 1; min-width: 158px; background: #fff; border: 1px solid var(--line2); border-radius: 16px; padding: 16px 18px; }
.an-ov-card.accent { background: linear-gradient(135deg, #7c3aed, #5b21b6); border: none; color: #fff; }
.an-ov-lab { font-size: 12px; color: var(--muted); }
.an-ov-card.accent .an-ov-lab { color: #e2d6ff; }
.an-ov-val { margin-top: 5px; font-family: 'Unbounded'; font-weight: 800; font-size: 17px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.an-ov-num { font-size: 26px; line-height: 1; }
.an-ov-num.red { color: var(--danger); }
.an-ov-delta { font-size: 13px; font-weight: 700; }
.an-ov-delta.good { color: var(--ok); }
.an-ov-delta.bad { color: var(--danger); }

/* фильтры */
.an-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.an-flabel { font-size: 13px; color: var(--muted); font-weight: 600; }
.an-shown { margin-left: auto; font-size: 13px; color: #9b97a4; }

/* карточки товаров */
.an-list { display: flex; flex-direction: column; gap: 12px; }
.an-card { background: #fff; border: 1px solid var(--line2); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 16px -12px rgba(40,20,70,.3); }
.an-row { display: flex; gap: 15px; padding: 16px 18px; cursor: pointer; align-items: center; flex-wrap: wrap; }
.an-row:hover { background: #fbfaff; }
.an-thumb { width: 60px; height: 60px; flex: none; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #a855f7, #7c3aed); display: flex; align-items: center; justify-content: center; font: 700 8px 'JetBrains Mono', monospace; color: rgba(255,255,255,.85); text-align: center; line-height: 1.3; }
.an-thumb img { width: 100%; height: 100%; object-fit: cover; }
.an-mid { flex: 1; min-width: 180px; }
.an-name { font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 3px; }
.an-meta { font-size: 11.5px; color: #9ca3af; font-family: 'JetBrains Mono', monospace; }
.an-rate { text-align: center; min-width: 74px; }
.an-rate-v { font-family: 'Unbounded'; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.an-star { color: var(--amber); font-size: 14px; }
.an-trend { font-size: 11.5px; font-weight: 700; margin-top: 2px; }
.an-trend.up { color: var(--ok); }
.an-trend.down { color: var(--danger); }
.an-trend.flat { color: var(--muted); }
.an-neg { min-width: 150px; }
.an-neg-top { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 5px; color: var(--muted); }
.an-neg-bar { height: 8px; border-radius: 5px; background: #f0ecf6; overflow: hidden; }
.an-neg-fill { height: 100%; border-radius: 5px; transition: width .4s; }
/* Заявки на возврат под полосой негатива. Отдельный акцент у «возвратов нет»: это не отсутствие
   данных, а факт — дефект никто не оформил, значит негатив, вероятно, не о товаре. */
/* Колонка узкая (min-width 150px, на мобильном 120px), поэтому НЕ nowrap: длинная подпись
   иначе выезжает на соседнюю колонку. Пояснение целиком — в `title`. */
.an-ret { margin-top: 6px; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.an-ret b { color: var(--ink); }
.an-ret.zero { color: #8a5b00; font-weight: 600; }
.an-chev { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: #f4f2f8; color: var(--muted); font-size: 14px; flex: none; }

/* раскрытый разбор */
.an-det { padding: 6px 18px 20px; border-top: 1px solid #f4f2f8; }
.an-det.hidden { display: none; }
.an-sec-h { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pur); margin: 16px 0 12px; }
.an-themes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.an-theme { display: flex; align-items: center; gap: 12px; }
.an-theme-name { width: 170px; flex: none; font-size: 13px; color: #3a3742; }
.an-theme-bar { flex: 1; height: 20px; border-radius: 6px; background: #f4f2f8; overflow: hidden; }
.an-theme-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f97316, #dc2626); transition: width .5s; }
.an-theme-pct { width: 44px; flex: none; text-align: right; font-weight: 700; font-size: 13px; color: var(--danger); }

/* сильные / слабые */
.an-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.an-sw-col { border-radius: 14px; padding: 15px 16px; }
.an-sw-col.ok { background: #f0fdf4; border: 1px solid #c6f0d4; }
.an-sw-col.bad { background: #fef2f2; border: 1px solid #fbd0d0; }
.an-sw-h { font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.an-sw-col.ok .an-sw-h { color: #059669; }
.an-sw-col.bad .an-sw-h { color: var(--danger); }
.an-sw-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.an-sw-chip { font-size: 12.5px; background: #fff; border-radius: 999px; padding: 4px 11px; }
.an-sw-col.ok .an-sw-chip { color: #047857; border: 1px solid #c6f0d4; }
.an-sw-col.bad .an-sw-chip { color: #b91c1c; border: 1px solid #fbd0d0; }

/* рекомендации */
.an-recs { background: linear-gradient(150deg, #faf7ff, #f3ecff); border: 1px solid #e9e0fb; border-radius: 14px; padding: 16px 18px; }
.an-recs-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--pur-d); margin-bottom: 13px; }
.an-rec { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid #eee8f7; border-radius: 12px; padding: 12px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.an-rec:last-child { margin-bottom: 0; }
.an-rec-ico { font-size: 20px; flex: none; }
.an-rec-body { flex: 1; min-width: 180px; }
.an-rec-title { font-weight: 700; font-size: 13.5px; color: #2c2933; }
.an-rec-detail { font-size: 12px; color: var(--muted); margin-top: 2px; }
.an-rec-impact { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--ok); background: #e7f7ef; border-radius: 999px; padding: 4px 10px; flex: none; }
.an-rec-btn { flex: none; padding: 9px 14px; border: 1.5px solid #e4dff1; border-radius: 10px; background: #fff; color: #4c1d95; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.an-rec-btn:hover { background: #faf7ff; }

/* загрузка / спиннер / апселл */
.an-loading { display: flex; align-items: center; gap: 10px; padding: 16px 2px; color: var(--muted); font-size: 13.5px; }
.an-loading.err { color: var(--danger); }
.an-spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #e7e4ec; border-top-color: var(--pur); display: inline-block; animation: an-spin .8s linear infinite; }
@keyframes an-spin { to { transform: rotate(360deg); } }
.an-upsell { background: #fff; border: 1px solid var(--line2); border-radius: 18px; padding: 34px 28px; text-align: center; max-width: 560px; margin: 10px auto; }
.an-upsell-emoji { font-size: 40px; }
.an-upsell-title { font-family: 'Unbounded'; font-weight: 800; font-size: 20px; margin: 12px 0 8px; }
.an-upsell-sub { font-size: 14px; color: var(--muted); margin-bottom: 20px; line-height: 1.5; }
.an-upsell-btn { padding: 12px 22px; border: none; border-radius: 12px; background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }

@media (max-width: 760px) {
  .an-sw { grid-template-columns: 1fr; }
  .an-theme-name { width: 120px; }
  .an-neg { min-width: 120px; }
}

/* ---------- АВТООТВЕТЫ (вкладка «Автоответы», лид-магнит) ---------- */
/* ============ АВТООТВЕТЫ — дизайн-макет claude.design (v58) ============ */
.ar-wrap { padding: 0; }

/* карточка-секция */
.ar-card { position: relative; background: #fff; border: 1px solid #efeaf5; border-radius: 22px;
  padding: 24px 26px; margin-top: 20px; box-shadow: 0 2px 14px -8px rgba(40,20,70,.18); }
.ar-sec-h { font-family: 'Onest'; font-weight: 800; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--pur); margin: 0 0 16px; }
.ar-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ar-sec-row .ar-sec-h { margin: 0; }
.ar-note { font-size: 12.5px; color: #9b97a4; margin-top: 11px; line-height: 1.5; }
.ar-div { height: 1px; background: #f1eef7; margin: 20px 0 16px; }
.ar-mode-badge-off { font-size: 11.5px; font-weight: 700; color: #a4a0ad; background: #f4f2f7; border-radius: 999px; padding: 4px 11px; }

/* overlay когда режим выключен */
.ar-lock { position: absolute; inset: 52px 0 0; background: rgba(255,255,255,.55);
  border-radius: 0 0 22px 22px; cursor: not-allowed; z-index: 5; }

/* ---- HERO автопилота ---- */
.ar-hero { position: relative; overflow: hidden; margin-top: 0; border-radius: 24px;
  background: linear-gradient(120deg,#5b21b6,#7c3aed 52%,#a855f7); color: #fff;
  box-shadow: 0 22px 44px -22px rgba(124,58,237,.9); }
.ar-hero::before { content: ""; position: absolute; right: -40px; top: -50px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,.08); }
.ar-hero::after { content: ""; position: absolute; right: 120px; bottom: -70px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.06); }
.ar-hero-in { position: relative; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 24px 28px; }
.ar-hero-l { flex: 1; min-width: 260px; }
.ar-hero-tt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-hero-title { font-family: 'Unbounded'; font-weight: 800; font-size: 23px; letter-spacing: -.01em; }
.ar-hero-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800;
  background: #d9f99d; color: #365314; border-radius: 999px; padding: 4px 10px; letter-spacing: .02em; }
.ar-hero-sub { font-size: 14px; opacity: .9; margin-top: 7px; max-width: 520px; line-height: 1.5; }
.ar-hero-r { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.ar-hero-stat { text-align: center; }
.ar-hero-num { font-family: 'Unbounded'; font-weight: 800; font-size: 34px; line-height: 1; }
.ar-hero-lab { opacity: .82; font-size: 12px; margin-top: 5px; }
.ar-hero-vd { width: 1px; height: 40px; background: rgba(255,255,255,.28); }

/* большой тумблер */
.ar-bigtog { position: relative; width: 64px; height: 36px; border-radius: 999px; border: none;
  cursor: pointer; flex: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.32); background: rgba(0,0,0,.28); transition: background .18s; }
.ar-bigtog.on { background: #22c55e; }
.ar-bigtog span { position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; transition: left .18s; box-shadow: 0 3px 8px -2px rgba(0,0,0,.4); }
.ar-bigtog.on span { left: 32px; }

/* ---- режимы: 3 карточки ---- */
/* Колонок столько, сколько карточек: `grid-auto-flow: column` + `grid-auto-columns: 1fr`.
   Было жёстко `repeat(3,1fr)` под три режима, и после упразднения «Выключено» две карточки
   занимали две трети ряда, оставляя пустую колонку справа. Фиксировать «2» вместо «3» —
   тот же капкан на следующей правке набора режимов. */
.ar-modes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; }
.ar-mode { cursor: pointer; border-radius: 18px; padding: 18px; border: 2px solid #eee9f4; background: #fff; transition: border-color .15s; }
.ar-mode:hover { border-color: #d8d2e4; }
.ar-mode-top { display: flex; align-items: center; justify-content: space-between; }
.ar-mode-ic { font-size: 22px; }
.ar-mode-rad { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ddd7e6; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 800; }
.ar-mode-ttl { font-weight: 800; font-size: 16px; margin-top: 12px; display: flex; align-items: center; gap: 7px; }
.ar-mode-desc { font-size: 12.5px; color: #a4a0ad; margin-top: 4px; line-height: 1.45; }
.ar-mode-tag { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.ar-mode-tag.free { background: #dcfce7; color: #166534; }
.ar-mode-tag.smart { background: #fde68a; color: #78350f; }
.ar-mode-tag.lock { background: #fef3c7; color: #92400e; padding: 3px 9px; }
/* off выбран */
.ar-mode.off.on { border-color: #b8b4c4; background: #f4f2f7; }
.ar-mode.off.on .ar-mode-rad { background: #57536a; border: none; }
.ar-mode.off.on .ar-mode-ttl { color: #1c1e21; }
/* templates выбран */
.ar-mode.tpl.on { border-color: var(--pur); background: linear-gradient(160deg,#faf5ff,#f3ecff); }
.ar-mode.tpl.on .ar-mode-rad { background: var(--pur); border: none; }
.ar-mode.tpl.on .ar-mode-desc { color: #7a5aa8; }
/* ai выбран (тёмная) */
.ar-mode.ai.on { border-color: var(--pur); background: linear-gradient(160deg,#2c1a52,#4c1d95 55%,#6d28d9); color: #fff; position: relative; overflow: hidden; box-shadow: 0 14px 30px -16px rgba(124,58,237,.9); }
.ar-mode.ai.on::after { content: ""; position: absolute; right: -20px; top: -20px; width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.09); }
.ar-mode.ai.on .ar-mode-top, .ar-mode.ai.on .ar-mode-ttl, .ar-mode.ai.on .ar-mode-desc { position: relative; }
.ar-mode.ai.on .ar-mode-rad { background: #fff; border: none; color: #6d28d9; }
.ar-mode.ai.on .ar-mode-desc { color: #e6dcff; }
.ar-mode.ai.on .ar-mode-tag.smart { background: rgba(250,204,21,.95); color: #422006; }
/* ai не выбран (светло-фиолетовая) */
.ar-mode.ai:not(.on) { border-color: #efe6ff; background: linear-gradient(160deg,#faf7ff,#f6f0ff); }
.ar-mode.ai:not(.on):hover { border-color: #c4b5fd; }
.ar-mode.ai:not(.on) .ar-mode-ttl { color: #4c1d95; }
.ar-mode.ai:not(.on) .ar-mode-desc { color: #8a6bc0; }
.ar-mode.ai:not(.on) .ar-mode-tag.smart { background: #fde68a; color: #78350f; }

.ar-upsell { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg,#fffbeb,#fef3c7); border: 1px solid #fde68a; }
.ar-upsell-tx { flex: 1; min-width: 220px; font-size: 13px; color: #78350f; line-height: 1.5; }
.ar-upsell-btn { padding: 10px 18px; border-radius: 12px; background: var(--pur); color: #fff; font-weight: 700; font-size: 13.5px; white-space: nowrap; border: none; cursor: pointer; font-family: inherit; }
.ar-upsell-btn:hover { background: #6d28d9; }

/* ---- фильтр «Кому отвечаем» / строки настроек ---- */
.ar-frow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.ar-card > .ar-frow:first-of-type, .ar-voice .ar-frow:first-of-type { margin-top: 0; }
.ar-flabel { font-size: 13.5px; font-weight: 600; color: #57536a; width: 118px; }
.ar-fhint { font-size: 12.5px; color: #9b97a4; margin: 9px 0 0 130px; line-height: 1.5; }

/* крупные пилюли-чипсы (для автоответов) */
.ar-chip { padding: 8px 15px; border-radius: 999px; border: 1.5px solid #e7e4ec; background: #fff;
  color: #8a8794; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ar-chip:hover { border-color: #c9c3d6; }
.ar-chip.on { border-color: var(--pur); background: var(--pur); color: #fff; }

/* сегмент-переключатель (серый контейнер + белый активный) — как в макете v2 */
.ar-seg2 { display: inline-flex; gap: 3px; background: #f4f2f7; border-radius: 13px; padding: 4px; flex-wrap: wrap; }
.ar-seg2-btn { padding: 8px 15px; border-radius: 10px; border: none; background: transparent; color: #8a8794;
  font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ar-seg2-btn:hover { color: #5b21b6; }
.ar-seg2-btn.on { background: #fff; color: #5b21b6; box-shadow: 0 2px 6px -3px rgba(80,40,120,.3); }
.ar-seg2.tight { gap: 2px; border-radius: 12px; padding: 3px; align-items: center; }
.ar-seg2.tight .ar-seg2-btn { height: 34px; padding: 0 11px; border-radius: 9px; font-size: 12.5px;
  display: inline-flex; align-items: center; }

/* оценки — цветные семантические чипы (негатив красн/оранж, нейтр жёлт, позитив зелён) */
.ar-star-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ar-starchip { padding: 9px 16px; border-radius: 12px; font-weight: 800; font-size: 14px; cursor: pointer;
  min-width: 56px; font-family: inherit; border: 1.5px solid #e7e4ec; background: #fff; color: #c2bccd; }
.ar-star-summary { margin-left: auto; font-size: 12px; font-weight: 700; color: #7c3aed; background: #f6f0ff;
  border-radius: 999px; padding: 5px 12px; white-space: nowrap; }

/* заголовок «Тонкая настройка» + бейдж ИИ-режим */
.ar-tune-h { display: flex; align-items: center; gap: 9px; margin: 2px 0 14px; }
.ar-tune-h .ar-sec-h { margin: 0; }
.ar-tune-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  background: linear-gradient(120deg,#7c3aed,#a855f7); color: #fff; font-weight: 800; font-size: 10.5px;
  letter-spacing: .02em; box-shadow: 0 6px 14px -7px rgba(124,58,237,.8); }

/* исключить товары */
.ar-skip-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ar-skip-title { font-size: 13.5px; font-weight: 700; color: #2c2933; }
.ar-skip-stat { font-size: 12px; color: #9b97a4; }
.ar-skip-sync { padding: 7px 12px; border-radius: 10px; border: 1.5px solid #e4dff1; background: #fff; color: #5b21b6; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ar-skip-sync:hover { background: #faf7ff; border-color: #c4b5fd; }
.ar-skip-sync:disabled { opacity: .6; cursor: default; }
.ar-skip-search { position: relative; margin-top: 12px; }
.ar-skip-inp { width: 100%; padding: 12px 14px; border: 1.5px solid #e7e4ec; border-radius: 13px; font-size: 14px; color: var(--text); outline: none; font-family: inherit; background: #fff; }
.ar-skip-inp:focus { border-color: #b794f4; }
.ar-skip-dd { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: #fff;
  border: 1px solid #eee7f7; border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(40,20,70,.4);
  overflow: hidden; max-height: 260px; overflow-y: auto; }
.ar-skip-opt { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid #f4f1f9; }
.ar-skip-opt:last-child { border-bottom: none; }
.ar-skip-opt:hover { background: #faf7ff; }
.ar-thumb { width: 42px; height: 42px; flex: none; border-radius: 11px; overflow: hidden;
  background: linear-gradient(135deg,#f1ecf9,#e6dcfa); border: 1px solid #ece5f7;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.ar-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ar-skip-opt-tx { min-width: 0; }
.ar-skip-opt-name { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-skip-opt-sub { font-size: 12px; color: #9b97a4; margin-top: 2px; }
.ar-skip-empty { padding: 14px; font-size: 13px; color: #9b97a4; line-height: 1.45; }
.ar-skip-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ar-skip-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 8px 6px 6px; border-radius: 999px;
  background: #f3ecff; border: 1px solid #e4dcf7; font-size: 13px; font-weight: 600; color: #5b21b6; max-width: 280px; }
.ar-skip-chip .ar-thumb { width: 26px; height: 26px; border-radius: 50%; font-size: 13px; }
.ar-skip-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-skip-x { border: none; background: #e0d3f7; color: #5b21b6; width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 11px; flex: none; }
.ar-skip-x:hover { background: #d0bdf0; }
.ar-skip-none { font-size: 12.5px; color: #9b97a4; margin-top: 11px; }

/* ---- голос + живой пример ---- */
.ar-vp { margin-top: 20px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.ar-voice { flex: 1; min-width: 440px; margin-top: 0; }
.ar-ai-only { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 14px;
  background: #f8f5ff; border: 1px solid #eee3ff; margin-bottom: 18px; }
.ar-ai-only .tx { font-size: 12.5px; color: #6b5a8f; line-height: 1.5; }

/* пилюля-тумблер (улыбка/имя/вина) */
.ar-pilltog { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 11px; box-sizing: border-box;
  border-radius: 13px; border: 1.5px solid #e7e4ec; background: #fff; color: #57536a; font-weight: 700;
  font-size: 12.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ar-pilltog.on { border-color: #c4b5fd; background: #f6f0ff; color: #4c1d95; }
.ar-pilltog.wide { display: flex; width: 100%; height: auto; padding: 12px 14px; border-radius: 14px;
  font-size: 13.5px; justify-content: space-between; text-align: left; }
.ar-mini-sw { position: relative; width: 32px; height: 19px; border-radius: 999px; background: #d8d3e0; flex: none; }
.ar-pilltog.on .ar-mini-sw { background: var(--pur); }
.ar-mini-sw span { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: left .16s; }
.ar-mini-sw.on span { left: 16px; }
.ar-pilltog.wide .ar-mini-sw { width: 40px; height: 23px; }
.ar-pilltog.wide .ar-mini-sw span { width: 17px; height: 17px; }
.ar-pilltog.wide .ar-mini-sw.on span { left: 20px; }
.ar-togrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.ar-range { flex: 1; min-width: 180px; accent-color: var(--pur); height: 6px; cursor: pointer; }
.ar-len-val { font-family: 'JetBrains Mono'; font-weight: 700; font-size: 13.5px; color: #5b21b6; white-space: nowrap; }

.ar-sig-inp { width: 100%; margin-top: 12px; padding: 12px 14px; border: 1.5px solid #e7e4ec; border-radius: 13px; font-size: 14px; outline: none; font-family: inherit; background: #fff; color: var(--text); }
.ar-sig-inp:focus { border-color: #b794f4; }

/* составное поле подписи: редактируемый текст + бейдж-подстановка */
.ar-sig-wrap { margin-top: 12px; }
.ar-sig-compose { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px;
  border: 1.5px solid #e7e4ec; border-radius: 13px; background: #fff; }
.ar-sig-compose:focus-within { border-color: #b794f4; }
.ar-sig-prefix { flex: 1; min-width: 60px; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--text); padding: 6px 0; }
.ar-sig-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 6px 8px 6px 10px; border-radius: 999px; background: #f3ecff; border: 1px solid #e4dcf7;
  color: #5b21b6; font-size: 13px; font-weight: 700; cursor: pointer; user-select: none; }
.ar-sig-chip:hover { background: #ece0ff; border-color: #d3c2f5; }
.ar-sig-chip-ic { font-size: 13px; }
.ar-sig-chip-tx { white-space: nowrap; }
.ar-sig-caret { font-size: 10px; opacity: .7; }
.ar-sig-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 210px;
  background: #fff; border: 1px solid #eee7f7; border-radius: 13px; padding: 5px;
  box-shadow: 0 18px 40px -14px rgba(40,20,70,.4); cursor: default; }
.ar-sig-menu-i { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px;
  border: none; border-radius: 9px; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: #57536a; text-align: left; white-space: nowrap; }
.ar-sig-menu-i:hover { background: #faf7ff; }
.ar-sig-menu-i.on { background: #f3ecff; color: #5b21b6; }
.ar-sig-preview { margin-top: 9px; font-size: 12.5px; color: #9b97a4; line-height: 1.5; }

.ar-subttl { font-size: 14px; font-weight: 700; color: #2c2933; }
.ar-scn-pills { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ar-scn-pill { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-radius: 12px; border: 1.5px solid #e7e4ec; background: #fff; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; color: #57536a; }
.ar-scn-pill.pos { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.ar-scn-pill.pos:hover { border-color: #86efac; }
.ar-scn-pill.neg { border-color: #fed7aa; background: #fff7ed; color: #9a3412; }
.ar-scn-pill.neg:hover { border-color: #fdba74; }
.ar-scn-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.ar-scn-pill.pos .ar-scn-cnt { background: #bbf7d0; color: #166534; }
.ar-scn-pill.neg .ar-scn-cnt { background: #fed7aa; color: #9a3412; }

.ar-fine { margin-top: 18px; }
.ar-fine > summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: #57536a; list-style: none; user-select: none; }
.ar-fine > summary::-webkit-details-marker { display: none; }
.ar-fine-in { margin-top: 14px; }
.ar-warn-box { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; padding: 11px 13px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; }
.ar-warn-box .tx { font-size: 12px; color: #9a3412; line-height: 1.5; }
.ar-ex-h { font-size: 13px; font-weight: 700; color: #2c2933; margin: 18px 0 10px; }
.ar-ta { display: block; width: 100%; min-height: 64px; padding: 11px 13px; border: 1.5px solid #e7e4ec;
  border-radius: 13px; font-family: inherit; font-size: 13.5px; resize: vertical; outline: none; line-height: 1.5; background: #fff; color: var(--text); }
.ar-ta:focus { border-color: #b794f4; }
.ar-ta + .ar-ta { margin-top: 10px; }

/* примеры стиля: поле со счётчиком + подсказка о конфликте с пресетом тона */
.ar-ex-box { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ar-ex-item { position: relative; }
.ar-ex-item .ar-ta { padding-bottom: 26px; }
.ar-ex-cnt { position: absolute; right: 11px; bottom: 8px; font-size: 11px; color: #a4a0ad;
  font-family: 'JetBrains Mono', monospace; pointer-events: none; }
/* ползунок «Свой стиль»: 4 положения с подписями делений */
.ar-mix { margin-top: 16px; }
.ar-mix-range { flex: 1; min-width: 180px; }
.ar-mix-ticks { display: flex; justify-content: space-between; margin: 6px 0 0 112px; }
.ar-mix-tick { font-size: 11.5px; font-weight: 700; color: #b6b0c2; white-space: nowrap; flex: 1; text-align: center; }
.ar-mix-tick:first-child { text-align: left; }
.ar-mix-tick:last-child { text-align: right; }
.ar-mix-tick.on { color: var(--pur); }
.ar-mix-hint { font-size: 12.5px; color: #9b97a4; line-height: 1.5; margin: 7px 0 0 112px; }

.ar-ex-nudge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;
  padding: 11px 13px; border-radius: 12px; background: #fffbeb; border: 1px solid #fde68a; }
.ar-ex-nudge .tx { flex: 1; min-width: 200px; font-size: 12.5px; color: #78350f; line-height: 1.5; }
.ar-ex-nudge-btn { padding: 8px 14px; border-radius: 10px; border: none; background: var(--pur);
  color: #fff; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ar-ex-nudge-btn:hover { background: #6d28d9; }

/* честная плашка на панели «Живой пример» + кнопка настоящего ИИ-предпросмотра */
.ar-pv-fake { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; padding: 9px 11px;
  border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(196,181,253,.22); }
.ar-pv-fake .tx { font-size: 11.5px; color: #b3a9cf; line-height: 1.45; }
.ar-pv-real-btn { width: 100%; margin-top: 14px; padding: 11px 14px; border-radius: 12px; border: none;
  background: linear-gradient(120deg,#7c3aed,#9333ea); color: #fff; font-weight: 700; font-size: 13px;
  cursor: pointer; font-family: inherit; }
.ar-pv-real-btn:hover { background: linear-gradient(120deg,#6d28d9,#7e22ce); }
.ar-pv-real-btn:disabled { opacity: .6; cursor: default; }
.ar-pv-real { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.ar-pv-real-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ar-pv-real-h .t { font-family: 'Onest'; font-weight: 800; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: #c4b5fd; }
.ar-pv-real-src { margin-left: auto; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.ar-pv-real-src.ai { color: #ddd6fe; background: rgba(196,181,253,.18); }
.ar-pv-real-src.tpl { color: #fcd34d; background: rgba(252,211,77,.15); }
.ar-pv-real-err { font-size: 12px; color: #fca5a5; line-height: 1.45; }
.ar-bt { display: flex; flex-direction: column; gap: 8px; }
.ar-bt-row { display: flex; align-items: center; gap: 10px; }
.ar-bt-brand { flex: 0 0 150px; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-bt-row .ar-sig-inp { flex: 1; margin-top: 0; }

/* ---- тон: чип с иконкой + ховер-тултип характера ---- */
.ar-vchips { display: flex; gap: 8px; flex-wrap: wrap; }
.ar-vchip-wrap { position: relative; }
.ar-vchip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 11px;
  border: 1.5px solid #e7e4ec; background: #fff; color: #57536a; font-weight: 700; font-size: 13.5px;
  cursor: pointer; font-family: inherit; white-space: nowrap; }
.ar-vchip:hover { border-color: #c4b5fd; background: #faf7ff; }
.ar-vchip.on { border-color: var(--pur); background: var(--pur); color: #fff; }
.ar-vchip-ic { display: inline-flex; font-size: 15px; line-height: 1; }
.ar-vtip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); z-index: 40;
  width: 190px; background: #241a3c; color: #d9cff0; font-size: 12px; line-height: 1.4; padding: 10px 12px;
  border-radius: 12px; box-shadow: 0 14px 30px -12px rgba(30,15,50,.75); text-align: center;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .13s; }
.ar-vchip-wrap:hover .ar-vtip { opacity: 1; visibility: visible; }
.ar-vtip b { display: block; font-weight: 800; font-size: 12.5px; color: #fff; margin-bottom: 3px; }
.ar-vtip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #241a3c; }

/* ---- демо-локер: апселл голоса бренда в режиме «Шаблоны» ---- */
.ar-demolock { border-radius: 18px; background: #fff; border: 1.5px solid #d9c8f5;
  box-shadow: 0 0 0 4px rgba(124,58,237,.05), 0 22px 46px -26px rgba(90,45,150,.5); padding: 20px; }
.ar-demolock-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  background: #f3ecff; color: #6d28d9; font-weight: 800; font-size: 10px; letter-spacing: .08em; }
.ar-demolock-h { font-family: 'Unbounded'; font-weight: 800; font-size: 19px; letter-spacing: -.02em;
  color: #15131c; margin-top: 11px; text-wrap: pretty; }
.ar-demolock-sub { font-size: 13px; color: #6b6577; line-height: 1.5; margin-top: 7px; }
.ar-demolock-bs { display: flex; flex-direction: column; gap: 9px; margin-top: 17px; }
.ar-demolock-b { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; }
.ar-demolock-b .ic { flex: none; width: 22px; height: 22px; border-radius: 7px; background: #f3ecff; color: var(--pur);
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; font-size: 12px; font-weight: 800; }
.ar-demolock-b b { color: #2a1758; font-weight: 800; }
.ar-demolock-b .tx { color: #8a8794; }
.ar-demolock-pick { font-size: 12.5px; font-weight: 700; color: #2c2933; margin-top: 20px; }
.ar-demolock-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.ar-demolock-cta { margin-top: 22px; width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; padding: 13px 20px; border-radius: 13px; border: none; background: linear-gradient(120deg,#7c3aed,#9333ea);
  color: #fff; font-weight: 800; font-size: 14.5px; cursor: pointer; font-family: inherit;
  box-shadow: 0 16px 30px -12px rgba(124,58,237,.95); line-height: 1.3; text-align: center; }
.ar-demolock-cta:hover { background: linear-gradient(120deg,#6d28d9,#7e22ce); }
.ar-demolock-gift { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 11px;
  padding: 8px 12px; border-radius: 11px; background: #f3ecff; color: #6d28d9; font-weight: 800; font-size: 12.5px; }

/* ---- демо-превью: интерактивный «живой пример» в режиме «Шаблоны» ---- */
.ar-pv-demo-h { font-family: 'Onest'; font-weight: 800; font-size: 13px; letter-spacing: .02em; color: #fff; }
.ar-pv-demo-sub { font-size: 11.5px; color: #8b81a8; margin-top: 5px; }
.ar-pv-demo-seg { display: flex; gap: 4px; background: rgba(255,255,255,.06); border-radius: 12px; padding: 4px; margin-top: 15px; }
.ar-pv-demo-seg button { flex: 1; padding: 8px 6px; border-radius: 9px; border: none; background: transparent;
  color: #b3a9cf; font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; }
.ar-pv-demo-seg button.on { background: #fff; color: #2a1758; font-weight: 800; }
.ar-pv-demo-hint { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 12px;
  font-size: 11px; color: #8b81a8; }
.ar-pv-bubble.demo { animation: dcfade .3s ease; }
@keyframes dcfade { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } }

/* живой пример-панель */
.ar-preview { width: 372px; flex: none; position: sticky; top: 74px; align-self: flex-start;
  background: linear-gradient(170deg,#1c1530,#241a3c); border-radius: 22px; padding: 20px;
  box-shadow: 0 22px 50px -24px rgba(40,20,70,.7); }
.ar-preview-h { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ar-preview-h .t { font-family: 'Onest'; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #c4b5fd; }
.ar-preview-h .s { margin-left: auto; font-size: 11px; color: #8b81a8; }
.ar-pv-review { background: #fff; border-radius: 16px; padding: 14px; }
.ar-pv-review-top { display: flex; align-items: center; gap: 8px; }
.ar-pv-stars { font-size: 13px; letter-spacing: 1px; }
.ar-pv-stars.good { color: #16a34a; }
.ar-pv-stars.bad { color: #ea580c; }
.ar-pv-review-tx { font-size: 12.5px; color: #57536a; margin-top: 6px; line-height: 1.45; }
.ar-pv-shop { display: flex; align-items: center; gap: 8px; margin: 12px 2px 8px; }
.ar-pv-shop-ic { width: 24px; height: 24px; border-radius: 8px; background: radial-gradient(circle at 50% 30%,#2c2836,#15131c); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.ar-pv-shop-lab { font-size: 11px; color: #8b81a8; }
.ar-pv-shop-badge { margin-left: auto; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ar-pv-shop-badge.pos { color: #c4b5fd; background: rgba(196,181,253,.15); }
.ar-pv-shop-badge.neg { color: #fca5a5; background: rgba(248,113,113,.14); }
.ar-pv-bubble { border-radius: 16px; padding: 14px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.ar-pv-bubble.pos { background: linear-gradient(135deg,#7c3aed,#9333ea); color: #fff; }
.ar-pv-bubble.neg { background: #2e2447; border: 1px solid #3d3159; color: #e9e3f7; }
.ar-pv-sep { height: 1px; background: rgba(255,255,255,.1); margin: 18px 0; }

/* ---- очередь ---- */
.ar-q-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ar-q-btns { display: flex; gap: 9px; flex-wrap: wrap; }
.ar-qbtn { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  border-radius: 12px; border: 1.5px solid #e7e4ec; background: #fff; color: #57536a; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.ar-qbtn:hover { border-color: #c9c3d6; }
.ar-qbtn.primary { border: none; background: var(--pur); color: #fff; }
.ar-qbtn.primary:hover { background: #6d28d9; }
.ar-qbtn:disabled { background: #e8e3f2; color: #b0a9c2; border: none; cursor: not-allowed; }
.ar-q-list { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.ar-qrow { border: 1px solid #f0edf5; border-radius: 16px; padding: 16px 18px; background: #fdfcff; }
.ar-qrow-top { display: flex; align-items: flex-start; gap: 14px; }
.ar-qrow-info { flex: 1; min-width: 0; }
.ar-qrow-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ar-qrow-stars { font-size: 13px; letter-spacing: 1px; }
.ar-qrow-stars.good { color: #16a34a; }
.ar-qrow-stars.bad { color: #ea580c; }
.ar-qrow-name { font-size: 14px; font-weight: 700; }
.ar-qrow-date { font-size: 12.5px; color: #a4a0ad; }
.ar-qrow-prod { font-size: 12.5px; color: #9b97a4; margin-top: 5px; }
.ar-qrow-text { font-size: 13.5px; color: #2c2933; margin-top: 7px; line-height: 1.5; }
/* галочки-теги отзыва WB («внешний вид», «качество»…) */
.ar-qtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ar-qtag { padding: 4px 10px; border-radius: 999px; background: #f4f2f7; border: 1px solid #e7e4ec;
  color: #57536a; font-size: 12px; font-weight: 600; }
/* hover-зум фото покупателя (общий класс .photos) не должен резаться соседними карточками */
.ar-qrow:has(.photos img:hover) { position: relative; z-index: 40; }
.ar-qrow-btn { flex: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 12px; border: none; background: var(--pur); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.ar-qrow-btn:hover { background: #6d28d9; }
.ar-qrow-btn:disabled { opacity: .7; cursor: default; }
.ar-qdraft { margin-top: 13px; border-top: 1px dashed #ece7f5; padding-top: 13px; animation: ar-pop .2s ease; }
@keyframes ar-pop { 0% { transform: scale(.97); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ar-qdraft-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ar-qbadge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.ar-qbadge.ai { background: #ede9fe; color: #6d28d9; }
.ar-qbadge.tpl { background: #f1f5f9; color: #475569; }
.ar-qbadge.manual { background: #fef3c7; color: #92400e; }
.ar-qcount { font-size: 11.5px; color: #a4a0ad; }
.ar-qdraft-ta { width: 100%; min-height: 74px; padding: 12px 14px; border: 1.5px solid #e4dcf7; border-radius: 13px; font-size: 13.5px; line-height: 1.55; resize: vertical; outline: none; background: #fff; font-family: inherit; color: var(--text); }
.ar-qdraft-ta:focus { border-color: #b794f4; }
.ar-qdraft-acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 11px; }
.ar-qact { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 12px; border: 1.5px solid #e7e4ec; background: #fff; color: #57536a; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.ar-qact:hover { border-color: #c9c3d6; }
.ar-qact.primary { border: none; background: var(--pur); color: #fff; padding: 9px 16px; }
.ar-qact.primary:hover { background: #6d28d9; }
.ar-qact.ghost { border: none; background: transparent; color: #a4a0ad; }
.ar-qact.ghost:hover { color: var(--danger); }
.ar-qempty { font-size: 13.5px; color: #9b97a4; padding: 8px 0; }
.ar-qerr { margin-bottom: 9px; padding: 9px 12px; border-radius: 11px; background: #fff7ed;
  border: 1px solid #fed7aa; font-size: 12.5px; color: #9a3412; line-height: 1.45; }
.ar-cmp-again { grid-column: 1 / -1; justify-self: start; }
.ar-ans-more { align-self: center; margin-top: 4px; }

/* журнал (в макете отсутствует — компактный, сохраняем историю) */

/* модалка сценария */
.ar-modal-back { position: fixed; inset: 0; z-index: 60; background: rgba(28,19,44,.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.ar-modal { width: 100%; max-width: 640px; background: #fff; border-radius: 24px; padding: 26px 28px;
  box-shadow: 0 40px 90px -30px rgba(28,19,44,.7); animation: ar-pop .18s ease; }
.ar-modal-head { display: flex; align-items: center; justify-content: space-between; }
.ar-modal-title { font-family: 'Unbounded'; font-weight: 800; font-size: 20px; letter-spacing: -.01em; }
.ar-modal-x { width: 36px; height: 36px; border-radius: 12px; border: none; background: #f4f2f7; color: #57536a; font-size: 15px; cursor: pointer; }
.ar-modal-x:hover { background: #ebe8f2; }
.ar-modal-sub { font-size: 12.5px; color: #9b97a4; margin-top: 8px; line-height: 1.5; }
.ar-seg { display: flex; gap: 8px; margin-top: 18px; background: #f4f2f7; border-radius: 14px; padding: 5px; }
.ar-seg-btn { flex: 1; padding: 10px; border-radius: 10px; border: none; background: transparent; color: #8a8794; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.ar-seg-btn.on { background: #fff; box-shadow: 0 2px 6px -3px rgba(0,0,0,.2); }
.ar-seg-btn.on.pos { color: #166534; }
.ar-seg-btn.on.neg { color: #9a3412; }
.ar-modal-plabel { font-size: 12px; color: #9b97a4; margin: 16px 0 9px; }
.ar-preset-chip { padding: 8px 14px; border-radius: 999px; border: 1.5px solid #e7e4ec; background: #fff; color: #57536a; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.ar-preset-chip:hover { border-color: #c4b5fd; background: #faf7ff; }
.ar-blocks { margin-top: 16px; display: flex; flex-direction: column; gap: 11px; }
.ar-block { border: 1px solid #eee9f4; border-radius: 15px; padding: 14px; background: #fff; }
.ar-block.off { background: #f7f6f9; }
.ar-block-head { display: flex; align-items: center; gap: 10px; }
.ar-block-sw { position: relative; width: 38px; height: 22px; border-radius: 999px; border: none; background: #d8d3e0; flex: none; cursor: pointer; }
.ar-block-sw.on { background: var(--pur); }
.ar-block-sw span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .16s; }
.ar-block-sw.on span { left: 19px; }
.ar-block-title { flex: 1; min-width: 0; padding: 8px 11px; border: 1.5px solid #e7e4ec; border-radius: 10px; font-size: 13.5px; font-weight: 700; outline: none; font-family: inherit; background: #fff; color: var(--text); }
.ar-block-title:focus { border-color: #b794f4; }
.ar-block-ctrl { display: flex; gap: 4px; flex: none; }
.ar-block-mini { width: 30px; height: 30px; border-radius: 9px; border: 1.5px solid #e7e4ec; background: #fff; color: #57536a; cursor: pointer; font-size: 12px; font-family: inherit; }
.ar-block-mini:hover:not(:disabled) { border-color: #c4b5fd; }
.ar-block-mini:disabled { opacity: .4; cursor: default; }
.ar-block-mini.danger { border-color: #fbd5d5; color: var(--danger); }
.ar-block-ta { width: 100%; min-height: 56px; margin-top: 10px; padding: 10px 12px; border: 1.5px solid #e7e4ec; border-radius: 11px; font-size: 13px; line-height: 1.5; resize: vertical; outline: none; font-family: inherit; background: #fff; color: var(--text); }
.ar-block-ta:focus { border-color: #b794f4; }
.ar-block-auto { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12.5px; color: #57536a; cursor: pointer; user-select: none; }
.ar-block-auto input { accent-color: var(--pur); width: 15px; height: 15px; }
.ar-add-block { width: 100%; margin-top: 12px; padding: 11px; border-radius: 13px; border: 1.5px dashed #d3c2f5; background: #faf7ff; color: var(--pur); font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.ar-add-block:hover { background: #f3ecff; }
/* библиотека готовых правил */
.ar-lib { display: flex; flex-direction: column; gap: 9px; }
.ar-lib-cat { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a89fc0; margin: 8px 0 1px; }
.ar-lib-card { border: 1px solid #eee9f4; border-radius: 15px; padding: 12px 14px; background: #fff; }
.ar-lib-card.on { border-color: #d3c2f5; background: #fdfbff; }
.ar-lib-head { display: flex; align-items: center; gap: 9px; }
.ar-lib-emoji { font-size: 17px; flex: none; }
.ar-lib-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; }
.ar-lib-hint { margin-top: 6px; font-size: 12.5px; color: #57536a; line-height: 1.45; }
.ar-lib-ex { margin-top: 4px; font-size: 12px; color: #9b97a4; font-style: italic; line-height: 1.45; }
.ar-lib-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.ar-lib-foot .ar-block-auto { margin-top: 0; }
.ar-lib-fork { padding: 6px 12px; border-radius: 9px; border: 1.5px solid #e7e4ec; background: #fff; color: #57536a; font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; }
.ar-lib-fork:hover { border-color: #c4b5fd; color: var(--pur); }
/* бейдж «своё» у кастомного правила */
.ar-own-badge { flex: none; padding: 3px 8px; border-radius: 999px; background: #f3ecff; color: var(--pur); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ar-modal-foot { display: flex; justify-content: flex-end; margin-top: 18px; }
/* Подтверждение включения автопилота: узкая модалка, факты «что уйдёт в эфир» и две равные
   кнопки. Вторичная НЕ выглядит отменой — это полноценный маршрут «сначала проверю». */
.ar-modal-narrow { max-width: 520px; }
.ar-confirm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.ar-confirm-fact { background: #f7f5fb; border-radius: 12px; padding: 10px 13px; }
.ar-confirm-lab { font-size: 11.5px; color: #9b97a4; }
.ar-confirm-val { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.ar-confirm-foot { justify-content: space-between; gap: 10px; }
.ar-modal-alt { padding: 11px 22px; border-radius: 13px; border: 1.5px solid #e7e4ec; background: #fff;
  color: #57536a; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.ar-modal-alt:hover { border-color: var(--pur); color: var(--pur); }
.ar-modal-done { padding: 11px 24px; border-radius: 13px; border: none; background: var(--pur); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.ar-modal-done:hover { background: #6d28d9; }

/* ---- табы очереди: Неотвеченные / Отвеченные (v59) ---- */
.ar-qtabs { display: inline-flex; gap: 6px; background: #f4f2f7; border-radius: 12px; padding: 4px; }
.ar-qtab { padding: 8px 14px; border-radius: 9px; border: none; background: transparent; color: #8a8794;
  font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ar-qtab:hover { color: #57536a; }
.ar-qtab.on { background: #fff; color: var(--pur-d); box-shadow: 0 2px 6px -3px rgba(0,0,0,.2); }
.ar-qrow-acts { flex: none; display: flex; flex-direction: column; gap: 8px; }
.ar-qrow-acts .ar-qact, .ar-qrow-acts .ar-qrow-btn { width: 100%; }

/* сравнение «шаблон vs ИИ» */
.ar-cmp { margin-top: 13px; border-top: 1px dashed #ece7f5; padding-top: 13px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; animation: ar-pop .2s ease; }
.ar-cmp-col { display: flex; flex-direction: column; border: 1.5px solid #eee9f4; border-radius: 14px;
  padding: 12px 13px; background: #fff; }
.ar-cmp-col.ai { border-color: #e4dcf7; background: linear-gradient(160deg,#faf7ff,#f6f0ff); }
.ar-cmp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.ar-cmp-len { margin-left: auto; font-size: 11.5px; color: #a4a0ad; font-weight: 600; }
.ar-cmp-tx { flex: 1; font-size: 13px; line-height: 1.55; color: #2c2933; white-space: pre-wrap; }
.ar-cmp-pick { margin-top: 11px; }
.ar-cmp-err { font-size: 12.5px; color: #9a3412; line-height: 1.5; background: #fff7ed;
  border: 1px solid #fed7aa; border-radius: 10px; padding: 10px 12px; }

/* таб «Отвеченные» */
.ar-ans-hint { font-size: 12.5px; color: #78350f; line-height: 1.5; padding: 11px 13px; border-radius: 12px;
  background: linear-gradient(120deg,#fffbeb,#fef3c7); border: 1px solid #fde68a; }
.ar-ans-head { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.ar-ans-reply { margin-top: 8px; padding: 12px 14px; border-radius: 13px; background: #f6f0ff;
  border: 1px solid #e4dcf7; font-size: 13.5px; line-height: 1.55; color: #2c2933; white-space: pre-wrap; }
.ar-ans-none { margin-top: 12px; font-size: 12.5px; color: #9b97a4; padding: 10px 12px;
  border-radius: 11px; background: #faf9fc; border: 1px dashed #e7e4ec; }

/* прозрачность режима «Шаблоны» */
.ar-tpl-lead { font-size: 12.5px; color: #57536a; line-height: 1.55; }
.ar-tpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.ar-tpl-col-h { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 7px; }
.ar-tpl-col-h.ok { color: #166534; }
.ar-tpl-col-h.no { color: #9a3412; }
.ar-tpl-li { font-size: 12.5px; color: #57536a; line-height: 1.5; padding: 4px 0; }
.ar-tpl-li b { color: #2c2933; }
.ar-tpl-note { font-size: 12px; color: #9b97a4; margin-top: 8px; line-height: 1.5; }
.ar-tpl-bucket { margin-top: 12px; border: 1px solid #f1eef7; border-radius: 12px; padding: 10px 12px; background: #fdfcff; }
.ar-tpl-bucket > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #57536a; list-style: none; user-select: none; }
.ar-tpl-bucket > summary::-webkit-details-marker { display: none; }
.ar-tpl-var { font-size: 12.5px; color: #57536a; line-height: 1.45; padding: 8px 10px; border-radius: 9px;
  background: #faf9fc; border: 1px solid #f1eef7; margin-top: 7px; }
.ar-tpl-slot-h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 14px 0 2px; font-size: 12.5px; color: #2c2933; }
.ar-tpl-slot-h:first-of-type { margin-top: 10px; }
.ar-tpl-slot-n { font-size: 11.5px; color: #9b97a4; font-weight: 600; }

@media (max-width: 900px) {
  .ar-modes { grid-auto-flow: row; grid-template-columns: 1fr; }   /* в столбик: auto-flow иначе держит их в ряд */
  .ar-voice { min-width: 0; }
  .ar-preview { width: 100%; position: static; }
  .ar-flabel { width: 100px; }
  .ar-fhint { margin-left: 0; }
  .ar-cmp { grid-template-columns: 1fr; }
  .ar-tpl-grid { grid-template-columns: 1fr; }
}

/* Калькулятор роста рейтинга (блок сверху в раскрытой карточке аналитики) */
.an-lift { margin-bottom: 18px; }
.an-lift-head { font-size: 13px; color: #3a3742; margin: 0 0 12px; line-height: 1.5; }
.an-lift-head b { font-weight: 800; color: var(--text); }
.an-lift-tbl { display: flex; flex-direction: column; gap: 8px; }
.an-lift-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(150deg, #faf7ff, #f3ecff); border: 1px solid #e9e0fb; border-radius: 10px; padding: 9px 14px; }
.an-lift-to { font-size: 13.5px; color: #4c1d95; }
.an-lift-to b { font-family: 'Unbounded'; font-weight: 800; font-size: 15px; }
.an-lift-rm { font-size: 13px; color: #3a3742; }
.an-lift-rm b { font-weight: 800; color: var(--danger); }
.an-lift-max { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.an-lift-max b { color: var(--ok); font-weight: 800; }
.an-lift-note { margin-top: 8px; font-size: 11.5px; color: #9b97a4; }

/* ================= АДМИН-ПАНЕЛЬ (макет «Админ-панель», claude.design) =================
   Токены макета: фон #f1f0f5, карточка #fff + рамка #efedf3, радиус 16–18, заголовки
   Unbounded, приглушённый текст #8a8698, акцент #7c3aed, «чёрная» кнопка #111018.
   ⚠ Из макета НЕ взяты блоки «Антитеррор» (модуль удалён 2026-08-04), реферальная программа
   и промокоды — под них нет бэкенда, а рисовать работающий механизм там, где его нет, здесь
   уже признано вредным (см. историю экрана входа). */
.ap { max-width: 1440px; margin: 0 auto; }
.ap-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:20px; }
.ap-h1 { font-family:'Unbounded',sans-serif; font-weight:800; font-size:26px; letter-spacing:-.01em; }
.ap-sub { font-size:14.5px; color:#7a7688; margin-top:3px; }
.ap-head-right { display:flex; align-items:center; gap:12px; }
.ap-month { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; background:#f4f2f8;
  border:1px solid #e9e6f0; border-radius:999px; padding:6px 13px; color:#4b4760; font-weight:700; }
.ap-month b { color:#7c3aed; }

.ap-kpis { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:26px; }
.ap-kpi { background:#fff; border:1px solid #efedf3; border-radius:16px; padding:15px 17px; }
.ap-kpi-l { font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9793a6; }
.ap-kpi-v { font-family:'Unbounded',sans-serif; font-weight:800; font-size:23px; line-height:1.15; margin-top:9px; }
.ap-kpi-n { font-size:12px; color:#8a8698; margin-top:5px; }

.ap-h2 { font-family:'Unbounded',sans-serif; font-weight:800; font-size:19px; }
.ap-count { font-family:'Onest',sans-serif; font-weight:400; font-size:13px; color:#8a8698; }
.ap-secline { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:26px 0 12px; }
.ap-search { height:36px; width:270px; padding:0 12px; border:1.5px solid #e7e4ef; border-radius:10px;
  font-size:13.5px; outline:none; background:#fff; font-family:inherit; }
.ap-search:focus { border-color:#7c3aed; }

.ap-card { background:#fff; border:1px solid #efedf3; border-radius:18px; padding:18px; margin-bottom:22px; }
.ap-card-h { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }

/* маршрутизация моделей */
.ap-mods { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ap-mod { border:1px solid #efedf3; border-radius:14px; padding:13px 14px; background:#faf9fc; }
.ap-mod-l { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#9793a6; }
.ap-mod select { width:100%; margin-top:9px; height:36px; padding:0 10px; border:1.5px solid #e7e4ef;
  border-radius:10px; background:#fff; font-family:inherit; font-size:13.5px; outline:none; }
.ap-mod select:focus { border-color:#7c3aed; }
.ap-mod-n { font-size:11.5px; color:#8a8698; margin-top:6px; }

/* таблица клиентов */
.ap-table { background:#fff; border:1px solid #efedf3; border-radius:18px; overflow:hidden; }
.ap-cols { display:grid; grid-template-columns:1.8fr 1.1fr .8fr .9fr 1fr 1.15fr 96px; gap:10px; }
.ap-thead { padding:12px 18px; background:#faf9fc; border-bottom:1px solid #efedf3; font-size:11.5px;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#9793a6; }
.ap-row { padding:13px 18px; border-bottom:1px solid #f4f2f8; align-items:center; }
.ap-row:last-child { border-bottom:none; }
.ap-row:hover { background:#faf9fc; }
.ap-cli { display:flex; align-items:center; gap:10px; min-width:0; }
.ap-ava { flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:10px; background:#efe9fb; color:#6d28d9; font-weight:800; font-size:12.5px; }
.ap-nm { display:block; font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-em { display:block; font-size:12px; color:#8a8698; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-pill { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:#4b4760;
  background:#f2effa; border-radius:999px; padding:5px 10px; white-space:nowrap; max-width:100%; overflow:hidden; }
.ap-pill.warn { background:#fef1e6; color:#b45309; }
.ap-pill.ok { background:#e8f7ee; color:#15803d; }
.ap-pill.foreign { background:#fdecec; color:#b91c1c; }
.ap-r { text-align:right; }
.ap-note { display:block; font-size:11px; color:#9793a6; margin-top:3px; }
.ap-btn { height:32px; padding:0 12px; border:1px solid #e2dff0; background:#fff; border-radius:10px;
  font-family:inherit; font-weight:700; font-size:12.5px; color:#4b4760; cursor:pointer; }
.ap-btn:hover { background:#f8f6fc; }
.ap-btn.dark { background:#111018; color:#fff; border-color:#111018; }
.ap-btn.dark:hover { background:#2a2836; }

/* модалка клиента */
.ap-modal { position:fixed; inset:0; background:rgba(17,16,24,.42); display:flex; align-items:flex-start;
  justify-content:center; padding:40px 18px; z-index:70; overflow:auto; }
.ap-modal-card { background:#fff; border-radius:20px; width:100%; max-width:820px; padding:22px; }
.ap-mh { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:18px; }
.ap-x { border:none; background:#f4f2f8; width:32px; height:32px; border-radius:9px; cursor:pointer; font-size:15px; }
.ap-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.ap-box { border:1px solid #efedf3; border-radius:14px; padding:13px 14px; background:#faf9fc; }
.ap-consent { border:1px solid #f0d8d8; background:#fef8f8; border-radius:14px; padding:14px; margin-bottom:16px; }
.ap-consent.on { border-color:#d5ecdd; background:#f6fcf8; }

@media (max-width: 1100px) {
  .ap-kpis { grid-template-columns:repeat(2,1fr); }
  .ap-mods, .ap-grid3 { grid-template-columns:1fr; }
  .ap-cols { grid-template-columns:1.6fr 1fr 1fr 96px; }
  .ap-cols > .ap-hide { display:none; }
}

/* --- тарифная сетка: карточки-лента (макет «Админ-панель») --- */
.ap-segs { display:flex; gap:4px; background:#eceaf2; border-radius:12px; padding:4px; }
.ap-seg { display:inline-flex; align-items:center; gap:7px; border:none; background:transparent; color:#57536a;
  font-family:inherit; font-weight:700; font-size:13px; height:32px; padding:0 14px; border-radius:9px; cursor:pointer; }
.ap-seg.on { background:#fff; color:#1c1e21; box-shadow:0 1px 3px rgba(17,16,24,.10); }
.ap-seg-n { font-size:11.5px; font-weight:700; opacity:.55; }
.ap-dirty { display:flex; align-items:center; gap:10px; }
.ap-dirty-l { font-size:13px; color:#b45309; font-weight:700; }
.ap-btn.save { background:#16a34a; color:#fff; border-color:#16a34a; font-weight:800; }
.ap-btn.save:hover { background:#15803d; }

.ap-strip { display:flex; gap:12px; overflow-x:auto; padding-bottom:10px; }
.ap-strip::-webkit-scrollbar { height:8px; }
.ap-strip::-webkit-scrollbar-thumb { background:#ddd8ea; border-radius:5px; }
.ap-plan { flex:0 0 278px; background:#fff; border:1px solid #efedf3; border-radius:18px;
  padding:16px 16px 14px; display:flex; flex-direction:column; gap:10px; }
.ap-plan-h { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ap-plan-n { font-weight:800; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-plan-u { flex:none; font-size:11.5px; font-weight:700; color:#5b21b6; background:#f3ecff;
  border-radius:999px; padding:4px 9px; white-space:nowrap; }
.ap-fld { display:flex; align-items:center; gap:8px; }
.ap-fld-l { width:126px; flex:none; font-size:12.5px; color:#7a7688; }
.ap-fld-i { flex:1; min-width:0; height:34px; padding:0 10px; border:1.5px solid #e7e4ef; border-radius:9px;
  font-size:14px; font-weight:700; font-family:'JetBrains Mono',monospace; color:#1c1e21; outline:none; background:#fff; }
.ap-fld-i:focus { border-color:#7c3aed; }
.ap-flags { display:flex; flex-wrap:wrap; gap:6px; }
.ap-flag { border:1.5px solid #e7e4ef; background:#fff; color:#9793a6; font-family:inherit; font-weight:700;
  font-size:12px; height:28px; padding:0 11px; border-radius:999px; cursor:pointer; }
.ap-flag.on { border-color:#c9b6f5; background:#f3ecff; color:#5b21b6; }
.ap-plan-f { margin-top:auto; padding-top:10px; border-top:1px dashed #eceaf2; display:flex;
  justify-content:space-between; font-size:11.5px; color:#9793a6; }

/* демо-режим витрины: данные подставные, поэтому баннер обязателен и нарочито заметен */
.ap-demo { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;
  background:repeating-linear-gradient(135deg,#fff7ed,#fff7ed 12px,#ffedd5 12px,#ffedd5 24px);
  border:1.5px dashed #f59e0b; border-radius:14px; padding:11px 15px; font-size:13.5px;
  font-weight:700; color:#92400e; }
.ap-bar { display:block; height:5px; border-radius:3px; background:#f0ecf6; overflow:hidden; margin-top:5px; }
.ap-bar-f { display:block; height:100%; background:#7c3aed; }
.ap-bar-f.warn { background:#f59e0b; }

/* квота ИИ-ответов на вкладке «Автоответы» */
.ar-quota { background:#fff; border:1px solid #efedf3; border-radius:16px; padding:15px 17px; margin-bottom:16px; }
.ar-quota.out { border-color:#f3d6a8; background:#fffcf6; }
.ar-quota-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:9px; }
.ar-quota-t { font-weight:700; font-size:14px; }
.ar-quota-n { font-family:'JetBrains Mono',monospace; font-size:14px; }
.ar-quota-note { font-size:12px; color:#8a8698; margin-top:7px; }

/* принудительный режим зарубежных моделей — постоянный индикатор, а не разовый тост */
.ap-force { display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding:12px 14px;
  border:1px solid #efedf3; border-radius:14px; background:#faf9fc; }
.ap-force.on { border-color:#f0c7c7; background:#fdf6f6; }
.ap-force input { margin-top:2px; width:16px; height:16px; flex:none; cursor:pointer; }
.ap-force-l { font-size:12.5px; line-height:1.5; color:#6b6780; cursor:pointer; }
.ap-force.on .ap-force-l { color:#b91c1c; }

/* Подключение расширения и отдельный результат загрузки. */
.connection-notice { margin:12px auto; padding:14px 20px; max-width:1440px; display:flex; align-items:center; gap:18px; background:#fff5db; color:#574018; border:1px solid #e6c66e; border-radius:14px; font-size:14px; }
.connection-notice.hidden { display:none; }
.connection-notice span { flex:1; }
.extension-welcome { max-width:560px; width:calc(100% - 32px); box-sizing:border-box; padding:30px; border:1px solid #ddd4f1; border-radius:22px; color:#211636; background:#fff; font-family:Onest,sans-serif; line-height:1.6; }
.extension-welcome::backdrop { background:#1b103999; }
.extension-welcome h2 { font-size:24px; line-height:1.25; margin:12px 0; }
.extension-welcome li { margin:10px 0; }
.extension-welcome .dialog-close { float:right; }
.refresh-result { max-width:1440px; margin:10px auto; padding:0 24px; font-size:14px; line-height:1.5; color:#6a5c7a; }
.refresh-result:empty { display:none; }
@media(max-width:640px) { .connection-notice { margin:8px; flex-direction:column; align-items:flex-start; } .extension-welcome { padding:20px; } }