/* ============================================================
   NEXORA — строгая торговая тема
   ============================================================ */
:root{
  /* Множитель размера текста. Все размеры в файле заданы через него,
     поэтому масштаб меняется целиком, а пропорции не разъезжаются.
     Пользователь переключает его в настройках. */
  --fz:1.1;

  --bg:#080b11; --panel:#121826; --panel2:#0e131e; --line:#222c3e;
  --txt:#eaeff8; --muted:#8794a8; --dim:#5f6a80;
  --a:#5b6ef5; --a2:#3f51d6; --a3:#7c8bff;
  --good:#16c98d; --bad:#f04463; --warn:#e0a72a;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:8px; --r-lg:12px; --dur:.16s;

  /* Мягкая подсветка вместо плоской заливки: интерфейс перестаёт
     выглядеть одноцветным, но остаётся спокойным для долгой работы. */
  --glow:radial-gradient(1200px 500px at 12% -8%,
          rgba(91,110,245,.13), transparent 60%),
         radial-gradient(900px 420px at 92% 4%,
          rgba(22,201,141,.08), transparent 62%);
  --sh-1:0 1px 2px rgba(0,0,0,.28);
  --sh-2:0 6px 20px rgba(0,0,0,.34);
  --sh-3:0 18px 48px rgba(0,0,0,.45);
}
body.light{
  --bg:#eef1f6; --panel:#fff; --panel2:#f6f8fb; --line:#dde3ec;
  --txt:#101724; --muted:#5c6879; --dim:#8a94a4;
  --a:#3247d6; --a3:#5568f0; --good:#0f9d76; --bad:#d33553; --warn:#b8801a;
  --glow:radial-gradient(1100px 460px at 10% -10%,
          rgba(50,71,214,.10), transparent 60%),
         radial-gradient(820px 380px at 94% 2%,
          rgba(15,157,118,.07), transparent 62%);
  --sh-1:0 1px 2px rgba(16,23,36,.06);
  --sh-2:0 6px 20px rgba(16,23,36,.09);
  --sh-3:0 18px 44px rgba(16,23,36,.14);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  background-image:var(--glow);background-attachment:fixed;
  font-size:calc(14px * var(--fz));line-height:1.5;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.hidden{display:none!important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.good{color:var(--good)}.bad{color:var(--bad)}.muted{color:var(--muted)}
.tiny{font-size:calc(11.5px * var(--fz))}

/* --- шапка --- */
.top{
  height:52px;display:flex;align-items:center;gap:16px;padding:0 16px;
  border-bottom:1px solid var(--line);background:var(--panel2);
  position:sticky;top:0;z-index:30;
}
.logo{font-size:calc(15px * var(--fz));font-weight:800;letter-spacing:.16em}
.logo i{color:var(--a);font-style:normal}
.nav{display:flex;gap:1px;flex:1}
.nav button{
  padding:7px 12px;border-radius:var(--r);color:var(--muted);
  font-weight:600;font-size:calc(12.5px * var(--fz));transition:background var(--dur),color var(--dur);
}
.nav button:hover{background:var(--panel);color:var(--txt)}
.nav button.active{background:var(--a);color:#fff}
.acct{display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;background:var(--good);border-radius:50%}
.pill{
  padding:4px 9px;border:1px solid var(--line);border-radius:var(--r);
  font-size:calc(11px * var(--fz));font-weight:700;letter-spacing:.06em;color:var(--muted);
}
.pill.real{border-color:var(--bad);color:var(--bad)}
.btn{
  padding:6px 11px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);font-size:calc(12px * var(--fz));font-weight:600;
  transition:border-color var(--dur),background var(--dur);
}
.btn:hover{border-color:var(--a);background:var(--panel2)}
.btn.primary{background:var(--a);border-color:var(--a);color:#fff}
.btn.primary:hover{background:var(--a2)}
.btn.sm{padding:4px 8px;font-size:calc(11.5px * var(--fz))}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* --- панель рынков --- */
.marketbar{
  display:flex;gap:2px;padding:7px 16px;border-bottom:1px solid var(--line);
  overflow:auto;background:var(--panel2);
}
.marketbar button{
  padding:5px 11px;border-radius:var(--r);color:var(--muted);
  font-size:calc(12px * var(--fz));font-weight:600;white-space:nowrap;
}
.marketbar button:hover{background:var(--panel);color:var(--txt)}
.marketbar button.active{background:var(--panel);color:var(--txt);box-shadow:inset 0 -2px 0 var(--a)}

main{padding:12px 16px 24px}
.page{display:none}.page.active{display:block}

/* --- шапка инструмента --- */
.symbolbar{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.symbol{font-size:calc(19px * var(--fz));font-weight:800;letter-spacing:-.01em}
.symbolbar .last{font-size:calc(19px * var(--fz));font-weight:700}
.push{margin-left:auto}

/* --- панели --- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.head{
  padding:9px 12px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-weight:700;font-size:calc(12.5px * var(--fz));
}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:10px}
.side{display:flex;flex-direction:column;gap:10px}
.lower{margin-top:10px}

/* --- график --- */
.chartwrap{position:relative;height:460px;padding:6px}
#chart{width:100%;height:100%;display:block;cursor:crosshair;
  /* Жесты забирает график, а не страница: без этого палец тянет
     экран, и график остаётся на месте. */
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.ctools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tgroup{display:flex;gap:1px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:2px}
.tgroup button{padding:3px 8px;border-radius:4px;font-size:calc(11.5px * var(--fz));font-weight:600;color:var(--muted)}
.tgroup button:hover{color:var(--txt);background:var(--panel)}
.tgroup button.active{background:var(--a);color:#fff}

/* --- стакан: слева покупка, справа продажа --- */
.book{font-family:var(--mono);font-size:calc(11.5px * var(--fz))}
.bkhead2{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 10px 4px;
  font-size:calc(10px * var(--fz));text-transform:uppercase;letter-spacing:.05em;font-weight:700;
}
.bkspread2{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:5px 10px;background:var(--panel2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bkspread2 b{font-size:calc(15px * var(--fz))}
.bkage{padding:0 10px 3px;font-size:calc(10px * var(--fz))}
.bkratio{display:flex;height:3px;margin:0 10px 5px;border-radius:2px;overflow:hidden;background:var(--line)}
.bkratio .rb{background:var(--good)}
.bkratio .ra{background:var(--bad)}
.bkbody{max-height:262px;overflow:auto;padding:0 6px 6px}
.bkline{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:1px}
.bkcell{
  position:relative;display:flex;align-items:center;gap:6px;
  padding:2.5px 6px;border-radius:3px;cursor:pointer;isolation:isolate;overflow:hidden;
}
.bkcell.empty{cursor:default}
.bkcell:hover:not(.empty){outline:1px solid var(--line)}
.bkbar{position:absolute;top:0;bottom:0;z-index:-1;border-radius:3px}
.bkcell.bid .bkbar{right:0;background:color-mix(in srgb,var(--good) 26%,transparent)}
.bkcell.ask .bkbar{left:0;background:color-mix(in srgb,var(--bad) 26%,transparent)}
.bkcell.bid{justify-content:flex-end}
.bkcell.bid .bkp{color:var(--good);font-weight:700;min-width:52px;text-align:right}
.bkcell.ask .bkp{color:var(--bad);font-weight:700;min-width:52px}
.bkcell .bkq{color:var(--muted);flex:1}
.bkcell.bid .bkq{text-align:left}
.bkcell.ask .bkq{text-align:right}

/* --- форма ордера --- */
.trade{padding:11px}
.tabs{display:flex;gap:2px;margin-bottom:8px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:2px}
.tabs button{flex:1;padding:6px;border-radius:4px;font-size:calc(12px * var(--fz));font-weight:700;color:var(--muted)}
.tabs button.active{background:var(--a);color:#fff}
.tabs button.active.sellside{background:var(--bad)}
.tabs button.active.buyside{background:var(--good)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.input{
  width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel2);outline:none;font-family:var(--mono);font-size:calc(12.5px * var(--fz));
  transition:border-color var(--dur);
}
.input:focus{border-color:var(--a)}
select.input{font-family:inherit}
.full{grid-column:1/-1}
.bigbtn{width:100%;padding:9px;border-radius:var(--r);font-weight:800;font-size:calc(13px * var(--fz));color:#fff;letter-spacing:.02em}
.bigbtn.buy{background:var(--good)}
.bigbtn.sell{background:var(--bad)}
.bigbtn:disabled{opacity:.5}

/* --- таблицы --- */
.table{width:100%;border-collapse:collapse;font-size:calc(12.5px * var(--fz))}
.table th{
  padding:7px 11px;border-bottom:1px solid var(--line);text-align:left;
  color:var(--muted);font-weight:600;font-size:calc(11px * var(--fz));text-transform:uppercase;letter-spacing:.05em;
}
.table td{padding:8px 11px;border-bottom:1px solid var(--line)}
.table tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--panel2)}

/* --- карточки --- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.card{padding:13px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.card .lbl{color:var(--muted);font-size:calc(11px * var(--fz));text-transform:uppercase;letter-spacing:.05em}
.big{font-size:calc(21px * var(--fz));font-weight:750;margin-top:5px;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* --- настройки --- */
.setting{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 12px;border-bottom:1px solid var(--line)}
.setting:last-child{border-bottom:0}
/* Настройка, которой мало правой колонки: подпись сверху, сам элемент
   во всю ширину под ней. */
.setting.stack{display:block}
.setting.stack>*+*{margin-top:11px}
.switch{display:flex;gap:2px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:2px}
.switch button{padding:5px 10px;border-radius:4px;font-size:calc(12px * var(--fz));font-weight:600;color:var(--muted)}
.switch button:hover{color:var(--txt)}
.switch button.active{background:var(--a);color:#fff}

/* --- вход --- */
.auth{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.authbox{width:min(380px,100%);padding:26px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.authbox h1{margin:0 0 3px;font-size:calc(20px * var(--fz));letter-spacing:.1em}
.authbox input{width:100%;margin:6px 0;padding:9px 11px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);outline:none}
.authbox input:focus{border-color:var(--a)}
.authbox input[type="checkbox"]{width:auto;margin:0}
.authswitch{display:flex;gap:2px;margin:14px 0 10px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:2px}
.authswitch button{flex:1;padding:7px;border-radius:4px;font-size:calc(12.5px * var(--fz));font-weight:600;color:var(--muted)}
.authswitch button.active{background:var(--a);color:#fff}

/* --- модалка --- */
.modalwrap{position:fixed;inset:0;background:#00000090;display:none;align-items:center;justify-content:center;z-index:150;padding:16px}
.modalwrap.open{display:flex}
.modal{width:min(600px,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line);font-weight:700}
.mbody{padding:15px;overflow:auto}
.mfoot{display:flex;gap:7px;justify-content:flex-end;padding:0 15px 15px}
.x{color:var(--muted);font-size:calc(16px * var(--fz));padding:2px 7px;border-radius:4px}
.x:hover{background:var(--panel2);color:var(--txt)}
.field{margin-bottom:11px}
.field label{display:block;margin-bottom:4px;color:var(--muted);font-size:calc(11.5px * var(--fz))}

/* --- списки --- */
.rowitem{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r);cursor:pointer;border:1px solid transparent}
.rowitem:hover{background:var(--panel2);border-color:var(--line)}
.rowitem.sel{background:var(--a);color:#fff}
.rowitem b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scroll{max-height:320px;overflow:auto}
.badge{padding:1.5px 6px;border-radius:4px;background:var(--panel2);border:1px solid var(--line);font-size:calc(10.5px * var(--fz));font-weight:700}
.badge.on{background:var(--good);border-color:var(--good);color:#04231a}
.badge.lock{color:var(--muted)}
.logline{font-family:var(--mono);font-size:calc(11.5px * var(--fz));padding:5px 8px;border-bottom:1px solid var(--line);display:flex;gap:9px}
.warn{padding:8px 11px;border:1px solid var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad);border-radius:var(--r);margin-bottom:10px;font-size:calc(12.5px * var(--fz))}
.toast{position:fixed;right:14px;bottom:14px;padding:10px 13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);display:none;z-index:200;max-width:340px;font-size:calc(12.5px * var(--fz))}

/* --- анимации (тема Animated) --- */
body.anim .panel{transition:transform var(--dur),border-color var(--dur)}
body.anim .panel:hover{transform:translateY(-1px);border-color:var(--a)}
body.anim .dot{animation:pulse 1.6s ease-in-out infinite}
body.anim .card{transition:transform var(--dur),box-shadow var(--dur)}
body.anim .card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003}
body.anim .nav button,body.anim .btn{transition:all var(--dur)}
body.anim .toast{animation:slideup .22s ease}
body.anim .modal{animation:pop .18s ease}
body.anim .table tbody tr{transition:background var(--dur)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes slideup{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(.98);opacity:0}to{transform:none;opacity:1}}
.flash-up{animation:fup .5s}.flash-dn{animation:fdn .5s}
@keyframes fup{0%{background:color-mix(in srgb,var(--good) 30%,transparent)}100%{background:transparent}}
@keyframes fdn{0%{background:color-mix(in srgb,var(--bad) 30%,transparent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(max-width:1000px){.grid{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.cards{grid-template-columns:1fr}main{padding:10px}}

/* --- маржинальный блок --- */
.marginbox{margin-top:9px;padding:8px 0 0;border-top:1px solid var(--line);font-size:calc(11.5px * var(--fz))}
.mrow{display:flex;justify-content:space-between;gap:8px;padding:2.5px 0}
.mrow span{color:var(--muted)}
.mrow b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.warnline{margin-top:6px;padding:5px 7px;border-radius:var(--r);
  background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);font-size:calc(11px * var(--fz))}
input[type=range]{accent-color:var(--a);height:4px}
.prog{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:3px}
.prog span{display:block;height:100%;background:var(--a);border-radius:3px;transition:width .3s}

/* --- счёт на оплату --- */
.invoice{font-size:calc(12.5px * var(--fz))}
.invhead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.invtitle{font-size:calc(16px * var(--fz));font-weight:750}
.invsum{font-size:calc(22px * var(--fz));font-weight:800;font-family:var(--mono)}
.invgrid{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.invgrid .table{flex:1;min-width:260px}
.invqr{flex:none;background:#fff;padding:8px;border-radius:6px}
.invqr svg{display:block}

/* --- выбор инструмента --- */
.pktabs{display:flex;gap:2px;flex-wrap:wrap;margin:10px 0 8px}
.pktabs button{padding:4px 9px;border-radius:var(--r);font-size:calc(11.5px * var(--fz));font-weight:600;color:var(--muted)}
.pktabs button:hover{background:var(--panel2);color:var(--txt)}
.pktabs button.active{background:var(--a);color:#fff}
.pktabs button.active .muted{color:#fff;opacity:.7}
.pkbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.pklist{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
.pkrow{display:grid;grid-template-columns:22px 74px 1fr 74px 104px;gap:8px;align-items:center;
  padding:5px 8px;cursor:pointer;border-bottom:1px solid var(--line)}
.pkrow:last-child{border-bottom:0}
.pkrow.cur{background:var(--panel2)}
.pkrow.sel{box-shadow:inset 2px 0 0 var(--a)}
.pkname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(12px * var(--fz))}
.pkcat{text-align:right}
.pkprice{text-align:right;font-size:calc(12px * var(--fz))}
.pkstar{color:var(--dim);font-size:calc(13px * var(--fz));line-height:1;padding:2px}
.pkstar.on{color:var(--warn)}
.pkstar:hover{color:var(--warn)}
.pkhint{margin-top:7px}

/* --- аналитика --- */
.perfrow{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:4px}
.perfcell{padding:9px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);text-align:center}
.perfcell .num{font-size:calc(15px * var(--fz));font-weight:700;margin-top:3px}
.aicols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.boardtop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding-bottom:7px;margin-bottom:5px;border-bottom:1px solid var(--line)}
.boardtop b{font-size:calc(15px * var(--fz))}
.boardrow{display:grid;grid-template-columns:9px 92px 1fr auto;gap:8px;align-items:center;padding:3.5px 0;font-size:calc(12px * var(--fz))}
.dot2{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.dot2.bull{background:var(--good)}.dot2.bear{background:var(--bad)}.dot2.flat{background:var(--dim)}
.fundgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fundcell{padding:9px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2)}
.fundcell .num{font-size:calc(14px * var(--fz));font-weight:650;margin-top:3px}
@media(max-width:1100px){.perfrow{grid-template-columns:repeat(3,1fr)}.aicols{grid-template-columns:1fr}
  .fundgrid{grid-template-columns:repeat(2,1fr)}}
.sumgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.sumcell{display:flex;flex-direction:column;gap:2px;padding:8px 11px;background:var(--panel)}
.sumcell b{font-size:calc(14px * var(--fz))}

/* --- логотипы инструментов --- */
.lg{display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:50%;overflow:hidden;font-weight:800;letter-spacing:-.02em;position:relative}
.lg img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.lg i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal}

/* --- карточка счёта в шапке --- */
.acctbtn{display:flex;align-items:center;gap:9px;padding:5px 10px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  transition:border-color var(--dur)}
.acctbtn:hover,.acctbtn.open{border-color:var(--a)}
.acctval{font-size:calc(13px * var(--fz));font-weight:700}
.acctmode{font-size:calc(10px * var(--fz));font-weight:800;letter-spacing:.06em;padding:2px 6px;border-radius:4px;
  background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.acctmode.api{background:color-mix(in srgb,var(--a) 22%,transparent);color:var(--a);border-color:var(--a)}
.acctmode.real{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad);border-color:var(--bad)}
.acctcar{color:var(--muted);font-size:calc(9px * var(--fz))}

.acctpop{position:fixed;top:56px;right:14px;width:400px;z-index:120;display:none;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 12px 34px #0006}
.acctpop.open{display:block}
.apphead{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:calc(12.5px * var(--fz))}
.appbody{padding:8px 12px}
.approw{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:calc(12px * var(--fz))}
.approw span{color:var(--muted)}
.appmodes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;padding:9px 12px 12px;border-top:1px solid var(--line)}
.appmode{display:flex;flex-direction:column;gap:2px;padding:8px 6px;min-height:52px;justify-content:center;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel2);text-align:center;font-size:calc(11.5px * var(--fz));line-height:1.25}
.appmode span{color:var(--muted);font-size:calc(9.5px * var(--fz))}
.appmode:hover:not(:disabled){border-color:var(--a)}
.appmode.active{background:var(--a);border-color:var(--a);color:#fff}
.appmode.active span{color:#fff;opacity:.8}
.appmode.active.real{background:var(--bad);border-color:var(--bad)}
.appmode:disabled{opacity:.42;cursor:not-allowed}

/* Суб-счета активного ключа T-Invest — прямо в панели. */
.acctsub{padding:8px 12px 12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.acctsub.hidden{display:none}
.acctsub .subhd{display:flex;justify-content:space-between;gap:8px;padding:0 2px 2px}
.subacc{display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;
  padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);
  font-size:calc(11.5px * var(--fz));cursor:pointer;transition:border-color .15s ease,background .15s ease}
.subacc:hover{border-color:var(--a)}
.subacc.active{border-color:var(--a);background:color-mix(in srgb,var(--a) 14%,transparent)}
.subacc .mono{font-family:var(--mono);color:var(--muted);font-size:calc(9.5px * var(--fz))}

/* Профили устройства (мультиаккаунтинг NEXORA). */
.acctprof{padding:8px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.acctprof .subhd{padding:0 2px 2px}
.profrow{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.profrow:hover{background:var(--panel2)}
.profrow.active{border-color:var(--a);background:color-mix(in srgb,var(--a) 12%,transparent);cursor:default}
.profav{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:700;font-size:calc(12px * var(--fz))}
.profmeta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;overflow:hidden}
.profmeta b{font-size:calc(12px * var(--fz));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profmeta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profx{flex:none;border:none;background:none;color:var(--muted);cursor:pointer;
  font-size:calc(12px * var(--fz));padding:4px;border-radius:6px}
.profx:hover{color:var(--bad);background:var(--panel2)}
.profadd{margin-top:2px;padding:7px 8px;border:1px dashed var(--line);border-radius:var(--r);
  background:none;color:var(--muted);cursor:pointer;font-size:calc(11.5px * var(--fz));text-align:left}
.profadd:hover{border-color:var(--a);color:var(--txt)}

/* --- кнопка выбора инструмента --- */
.tickerbtn{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;
  border:1px solid transparent;border-radius:9px;cursor:pointer;transition:all var(--dur)}
.tickerbtn:hover{border-color:var(--line);background:var(--panel)}
.tinfo{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.tinfo .symbol{font-size:calc(18px * var(--fz))}
.pkrow{grid-template-columns:22px 20px 74px 1fr 74px 104px}

/* --- аналитика: вкладки и рекомендация --- */
.aitabs{display:flex;gap:2px;margin:14px 0 12px;border-bottom:1px solid var(--line)}
.aitabs button{padding:7px 14px;font-size:calc(12.5px * var(--fz));font-weight:650;color:var(--muted);border-radius:var(--r) var(--r) 0 0}
.aitabs button:hover{color:var(--txt);background:var(--panel2)}
.aitabs button.active{color:var(--txt);background:var(--panel2);box-shadow:inset 0 -2px 0 var(--a)}
.recbox{border:1px solid var(--line);border-radius:9px;background:var(--panel2);padding:13px;margin-top:4px}
.recmain{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.recverdict{font-size:calc(22px * var(--fz));font-weight:850;letter-spacing:-.01em}
.recgauge{flex:1;min-width:220px}
.gbar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--line)}
.gbar .gb{background:var(--good)}.gbar .gn{background:var(--dim)}.gbar .gs{background:var(--bad)}
.glabels{display:flex;justify-content:space-between;margin-top:4px}
.recgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.reccell{display:flex;flex-direction:column;gap:2px;padding:9px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel)}
.reccell b{font-size:calc(15px * var(--fz));font-family:var(--mono)}
.recnote{margin-top:10px}
.subhead{font-weight:700;font-size:calc(12.5px * var(--fz));margin-bottom:7px}
.patcols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.patrow{display:grid;grid-template-columns:9px 72px 1fr 68px 62px;gap:8px;align-items:center;
  padding:4px 0;border-bottom:1px solid var(--line)}
.patrow:last-child{border-bottom:0}
@media(max-width:1100px){.recgrid{grid-template-columns:1fr 1fr}.patcols{grid-template-columns:1fr}}

/* --- справка по токенам --- */
.faqbtn{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);
  color:var(--muted);font-size:calc(10px * var(--fz));font-weight:800;line-height:1;margin-left:6px;vertical-align:middle}
.faqbtn:hover{border-color:var(--a);color:var(--a)}
.faq{font-size:calc(12.5px * var(--fz))}
.faqnote{padding:8px 10px;border-radius:var(--r);background:color-mix(in srgb,var(--a) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--a) 40%,transparent);margin-bottom:12px;font-size:calc(12px * var(--fz))}
.faqstep{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--line)}
.faqnum{flex:none;width:19px;height:19px;border-radius:50%;background:var(--a);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--fz));font-weight:800}
.faqlist{margin:0;padding-left:17px}
.faqlist li{margin:3px 0}

/* --- справочник паттернов --- */
.gallayout{display:grid;grid-template-columns:1fr 330px;gap:14px;align-items:start}
.galgroup{margin-bottom:16px}
.galgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px}
.galcard{border:1px solid var(--line);border-radius:8px;background:var(--panel2);padding:9px;
  cursor:pointer;outline:none;transition:border-color var(--dur),transform var(--dur)}
.galcard:hover,.galcard:focus,.galcard.active{border-color:var(--a);transform:translateY(-1px)}
.galcard.bull{box-shadow:inset 0 2px 0 var(--good)}
.galcard.bear{box-shadow:inset 0 2px 0 var(--bad)}
.galcard.neutral{box-shadow:inset 0 2px 0 var(--warn)}
.galart{background:var(--panel);border-radius:5px;padding:3px;margin-bottom:6px}
.galart.small{width:96px;flex:none;margin:0}
.galname{font-weight:700;font-size:calc(12.5px * var(--fz))}
.galen{margin-bottom:5px}
.galmeta{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.galtip{position:sticky;top:70px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);
  padding:13px;font-size:calc(12.5px * var(--fz));min-height:120px}
.galtip.on{border-color:var(--a)}
.galtiphead{display:flex;align-items:center;gap:10px;padding-bottom:9px;margin-bottom:9px;
  border-bottom:1px solid var(--line)}
.galsec{margin-bottom:9px}
.galsec div{margin-top:2px;line-height:1.45}
@media(max-width:1100px){.gallayout{grid-template-columns:1fr}.galtip{position:static}}

/* --- аналитика портфеля --- */
.pfcards{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px}
.pfcard{display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel2)}
.pfcard b{font-size:calc(15px * var(--fz))}
.pfsplit{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pfchart{padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.pfdonut{display:flex;gap:12px;align-items:center}
.pflegs{flex:1;display:flex;flex-direction:column;gap:3px}
.pfleg{display:flex;align-items:center;gap:6px;font-size:calc(11.5px * var(--fz))}
.pfdot{width:8px;height:8px;border-radius:2px;flex:none}
.pflegname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.pfrowline{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}
.pfbar{height:7px;border-radius:4px;background:var(--bad);overflow:hidden;margin-bottom:4px}
.pfbar span{display:block;height:100%;background:var(--good)}
.wbar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;width:70px}
.wbar span{display:block;height:100%;background:var(--a)}
@media(max-width:1200px){.pfcards{grid-template-columns:repeat(3,1fr)}.pfsplit{grid-template-columns:1fr}}
.payinrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px;
  padding-top:11px;border-top:1px solid var(--line)}
.payinrow .input{width:150px}

/* ============================================================
   ЭКРАН ВХОДА
   ============================================================ */
.livebg{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  filter:blur(3px) saturate(1.35) contrast(1.05);opacity:.85;pointer-events:none}
/* Размытие живого фона регулируется в настройках и хранится
   ОТДЕЛЬНО для каждого анимированного оформления: звёздному полю
   идёт почти чёткая картинка, бегущим котировкам нужна сильная
   размывка. Значение приезжает переменной --bgblur. */
.livebg.app{position:fixed;z-index:0;
  filter:blur(var(--bgblur,5px)) saturate(1.3) contrast(1.04);opacity:.68}
/* Затемняющая вуаль поверх живого фона.

   Раньше здесь было две остановки: прозрачно в центре сверху и полная
   плотность на 78%. Дальше 78% цвет не менялся вовсе — то есть в этом
   месте градиент резко переставал нарастать. Глаз такой излом видит
   как отчётливую границу подсветки (эффект полос Маха), и она была
   заметна на ВСЕХ оформлениях, потому что вуаль от темы не зависит.

   Лечится не сдвигом 78% куда-нибудь дальше, а промежуточными
   остановками: плотность нарастает плавно и доходит до края, нигде не
   меняя скорость скачком. Проценты подобраны так, чтобы кривая была
   близка к плавной, а не к двум прямым с изломом. */
.appveil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 100% at 50% 0,
    transparent 0%,
    color-mix(in srgb,var(--bg) 18%,transparent) 26%,
    color-mix(in srgb,var(--bg) 42%,transparent) 46%,
    color-mix(in srgb,var(--bg) 62%,transparent) 63%,
    color-mix(in srgb,var(--bg) 74%,transparent) 79%,
    color-mix(in srgb,var(--bg) 80%,transparent) 100%)}
/* Холст лежит над фоном body, но под всем контентом. */
/* Поднимаем над холстом только контент в потоке. Модалки, карточку
   счёта и уведомления не трогаем: они position:fixed и уже выше по
   z-index — переопределение позиционирования роняло их вниз страницы. */
body.livebg-on main{position:relative;z-index:1}
body.livebg-on .top{position:sticky;z-index:30}
body.livebg-on .panel,body.livebg-on .top,body.livebg-on .card,
body.livebg-on .acctbtn,body.livebg-on .modal{backdrop-filter:blur(16px)}

/* Фон стал резче и холоднее, поэтому под контентом добавляем лёгкую
   вуаль: текст должен читаться, а фон — оставаться фоном. */
body.livebg-on main::before{content:'';position:fixed;inset:0;z-index:0;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,
    color-mix(in srgb,var(--bg) 55%,transparent),
    color-mix(in srgb,var(--bg) 88%,transparent))}
/* ЧИТАЕМОСТЬ В ЖИВОЙ ТЕМЕ.

   Панели были прозрачны на 55% поверх контрастного ДВИЖУЩЕГОСЯ фона.
   Под приглушённым текстом при этом проезжали то тёмная свеча, то
   яркая зелёная вспышка, и контраст менялся от кадра к кадру: буквы
   то видно, то нет. Подбор цвета текста такое вылечить не может —
   фон под ним всё равно не постоянный.

   Поэтому лечим не текст, а поверхность: плотность панелей поднята
   настолько, чтобы фон под ними стал ровным приглушённым тоном.
   Размытие (backdrop-filter выше) при этом никуда не делось, так что
   фон по-прежнему проступает и тема остаётся живой — но текст лежит
   уже на предсказуемом основании, а не на бегущем графике.

   Плюс приглушённые тона осветлены: в остальных темах они лежат на
   сплошном фоне, здесь — на полупрозрачном, и того же контраста им
   уже не хватает. */
body.livebg-on,.tcard.livebg-on{--muted:#b3bdcd;--dim:#8792a6}

body.livebg-on .panel{background:color-mix(in srgb,var(--panel) 82%,transparent)}
body.livebg-on .card,body.livebg-on .pfcard,body.livebg-on .reccell,
body.livebg-on .sumcell,body.livebg-on .galcard{background:color-mix(in srgb,var(--panel2) 80%,transparent)}
body.livebg-on .table tbody tr:hover{background:color-mix(in srgb,var(--panel2) 88%,transparent)}
body.livebg-on .top{background:color-mix(in srgb,var(--panel2) 88%,transparent)}

/* Модалки и всплывающие карточки — то же самое: читать поверх
   бегущего графика невозможно. */
body.livebg-on .modal,body.livebg-on .acctpop,body.livebg-on .planpop{
  background:color-mix(in srgb,var(--panel) 92%,transparent)}

.auth{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:22px;overflow:auto;background:var(--bg)}
.authveil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%,color-mix(in srgb,var(--a) 16%,transparent),transparent 55%),
             linear-gradient(180deg,
               color-mix(in srgb,var(--bg) 55%,transparent) 0%,
               color-mix(in srgb,var(--bg) 72%,transparent) 40%,
               color-mix(in srgb,var(--bg) 88%,transparent) 68%,
               var(--bg) 100%)}
.authwrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 380px;gap:44px;
  max-width:1000px;width:100%;align-items:center}

.authside{min-width:0}
.authlogo{font-size:calc(30px * var(--fz));font-weight:900;letter-spacing:.16em;margin-bottom:5px}
.authlogo i{color:var(--a);font-style:normal}
.authslogan{color:var(--muted);font-size:calc(14px * var(--fz));margin-bottom:26px}
.authfeat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.authfeat li{display:flex;flex-direction:column;gap:2px;padding-left:15px;position:relative}
.authfeat li::before{content:'';position:absolute;left:0;top:6px;width:5px;height:5px;
  border-radius:50%;background:var(--a)}
.authfeat b{font-size:calc(13.5px * var(--fz))}
.authfeat span{color:var(--muted);font-size:calc(12.5px * var(--fz));line-height:1.45}
.authstats{display:flex;gap:18px;margin-top:26px;flex-wrap:wrap}
.authstat{display:flex;flex-direction:column}
.authstat b{font-size:calc(19px * var(--fz));font-family:var(--mono);font-weight:750}
.authstat span{color:var(--muted);font-size:calc(11px * var(--fz));text-transform:uppercase;letter-spacing:.05em}

.authbox{background:color-mix(in srgb,var(--panel) 88%,transparent);
  border:1px solid var(--line);border-radius:14px;padding:26px;
  backdrop-filter:blur(18px);box-shadow:0 24px 70px #0007}
.authhead{margin-bottom:18px}
.authhead h1{margin:0 0 4px;font-size:calc(19px * var(--fz));font-weight:800}
.authswitch{display:flex;gap:2px;margin-bottom:16px;background:var(--panel2);
  border:1px solid var(--line);border-radius:var(--r);padding:2px}
.authswitch button{flex:1;padding:8px;border-radius:4px;font-size:calc(12.5px * var(--fz));font-weight:650;color:var(--muted)}
.authswitch button.active{background:var(--a);color:#fff}
.authfield{display:block;margin-bottom:13px}
.authfield span{display:block;color:var(--muted);font-size:calc(11.5px * var(--fz));margin-bottom:5px}
.authfield input{width:100%;padding:10px 12px;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r);color:var(--txt);outline:none;font-size:calc(13.5px * var(--fz));
  transition:border-color var(--dur),box-shadow var(--dur)}
.authfield input:focus{border-color:var(--a);box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 18%,transparent)}
.authbtn{width:100%;padding:11px;background:var(--a);color:#fff;border-radius:var(--r);
  font-weight:800;font-size:calc(13.5px * var(--fz));margin-top:6px;transition:background var(--dur)}
.authbtn:hover{background:var(--a2)}
.authbtn:disabled{opacity:.6}
.authmsg{min-height:17px;margin-top:9px;font-size:calc(12px * var(--fz))}
.authmsg .bad{color:var(--bad)}
.authfoot{display:flex;align-items:center;gap:7px;margin-top:16px;padding-top:13px;
  border-top:1px solid var(--line)}
.shake{animation:shake .32s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:860px){.authwrap{grid-template-columns:1fr;gap:26px}.authside{display:none}}

/* ============================================================
   ДОПОЛНИТЕЛЬНЫЕ ОФОРМЛЕНИЯ
   ============================================================ */
body.midnight,.tcard.midnight{--bg:#05070d;--panel:#0b0f18;--panel2:#080b12;--line:#161d2b;
  --txt:#dfe7f5;--a:#7d8cff}
body.midnight,.tcard.midnight{--muted:#6b7a93;--dim:#48546b}

body.terminal,.tcard.terminal{--bg:#07100b;--panel:#0a1710;--panel2:#08130d;--line:#16301f;
  --txt:#c9f5d8;--muted:#5f9d78;--dim:#3f6b52;--a:#22c55e;--a2:#16a34a;
  --good:#3ddc84;--bad:#ff6b6b}
body.terminal .logo,body.terminal .num,body.terminal .big{font-family:var(--mono)}

body.contrast,.tcard.contrast{--bg:#000;--panel:#0a0a0a;--panel2:#050505;--line:#3a3a3a;
  --txt:#fff;--muted:#c0c0c0;--dim:#8a8a8a;--a:#4d7cff;--good:#00e08a;--bad:#ff3b5c}
body.contrast .panel{border-width:1px}
body.contrast .table td,body.contrast .table th{border-color:#2a2a2a}

body.compact,.tcard.compact{--r:4px}
body.compact .top{height:44px}
body.compact .panel .head{padding:6px 10px;font-size:calc(11.5px * var(--fz))}
body.compact .table td{padding:4px 8px;font-size:calc(11.5px * var(--fz))}
body.compact .table th{padding:5px 8px}
body.compact .card,body.compact .pfcard,body.compact .reccell{padding:7px}
body.compact .big{font-size:calc(17px * var(--fz))}
body.compact main{padding:8px 10px}
body.compact .cards{gap:6px}

/* --- приветственный экран --- */
.welcome{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:22px;background:var(--bg);opacity:0;transition:opacity .26s}
.welcome.on{opacity:1}
.wcard{position:relative;z-index:2;width:min(420px,100%);padding:28px;text-align:center;
  background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line);
  border-radius:16px;backdrop-filter:blur(18px);box-shadow:0 26px 80px #0008;
  transform:translateY(10px) scale(.98);transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.welcome.on .wcard{transform:none}
.wava{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:calc(19px * var(--fz));font-weight:850;
  background:var(--a);color:#fff;letter-spacing:.02em}
.wgreet{font-size:calc(19px * var(--fz));line-height:1.35;margin-bottom:5px}
.wgreet b{font-weight:800}
.wsub{font-size:calc(12.5px * var(--fz));margin-bottom:18px}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.wcell{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 6px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2)}
.wcell b{font-size:calc(14px * var(--fz))}
.wicon{color:var(--a);font-size:calc(13px * var(--fz));line-height:1}
.wtips{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;text-align:left}
.wtip{display:flex;gap:9px;align-items:flex-start;font-size:calc(12.5px * var(--fz));color:var(--muted)}
.wtip b{flex:none;width:18px;height:18px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--line);color:var(--txt);display:flex;align-items:center;
  justify-content:center;font-size:calc(10.5px * var(--fz))}
.wbar{height:2px;margin-top:12px;background:var(--line);border-radius:2px;overflow:hidden}
.wbar span{display:block;height:100%;width:100%;background:var(--a)}

/* --- поддержка --- */
.supportbtn{position:fixed;right:14px;bottom:14px;z-index:190;padding:8px 14px;
  border:1px solid var(--line);border-radius:20px;background:var(--panel);
  font-size:calc(12.5px * var(--fz));font-weight:650;box-shadow:0 6px 20px #0005;transition:all var(--dur)}
.supportbtn:hover,.supportbtn.active{border-color:var(--a);color:var(--a)}
.supportbtn.unread::after{content:'';position:absolute;top:5px;right:7px;width:7px;height:7px;
  border-radius:50%;background:var(--bad)}
.supportpanel{position:fixed;right:14px;bottom:56px;z-index:191;width:330px;max-height:60vh;
  display:none;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 16px 44px #0007;overflow:hidden}
.supportpanel.open{display:flex}
/* Чат можно тянуть за шапку и растягивать за угол. */
.supportpanel.movable{max-height:none;min-width:280px;min-height:200px;max-width:96vw;
  /* overflow:hidden срезал бы ручки, вынесенные за край на 3px */
  overflow:visible}
.supportpanel.movable>.suphead{border-radius:10px 10px 0 0}
.supportpanel.movable>.supform,.supportpanel.movable>.chatform{border-radius:0 0 10px 10px}

/* Ручки по всем сторонам и углам: тянуть можно за любой край. */
.rsz{position:absolute;z-index:5;touch-action:none}
.rsz-n{top:-3px;left:8px;right:8px;height:7px;cursor:ns-resize}
.rsz-s{bottom:-3px;left:8px;right:8px;height:7px;cursor:ns-resize}
.rsz-w{left:-3px;top:8px;bottom:8px;width:7px;cursor:ew-resize}
.rsz-e{right:-3px;top:8px;bottom:8px;width:7px;cursor:ew-resize}
.rsz-nw{top:-3px;left:-3px;width:12px;height:12px;cursor:nwse-resize}
.rsz-ne{top:-3px;right:-3px;width:12px;height:12px;cursor:nesw-resize}
.rsz-sw{bottom:-3px;left:-3px;width:12px;height:12px;cursor:nesw-resize}
.rsz-se{bottom:-3px;right:-3px;width:12px;height:12px;cursor:nwse-resize}
.supportpanel.wide .rsz{display:none}
.supportpanel.resizing{transition:none;user-select:none}
.supportpanel.dragging{transition:none;user-select:none}
.supportpanel.wide{right:2vw!important;bottom:2vh!important;left:auto!important;top:auto!important;
  width:min(920px,96vw)!important;height:88vh!important;max-height:none}
.suphead{cursor:move}
.suphead .x{cursor:pointer}
.suphead{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;border-bottom:1px solid var(--line)}
.suphead span span{display:block}
.supmsgs{flex:1;overflow:auto;padding:10px;min-height:150px}
.supform{display:flex;gap:6px;padding:9px;border-top:1px solid var(--line)}
.supform .input{flex:1}

/* --- сообщения --- */
.msg{margin-bottom:8px;padding:7px 9px;border-radius:8px;background:var(--panel2);
  border:1px solid var(--line);font-size:calc(12.5px * var(--fz))}
.msg.mine{background:color-mix(in srgb,var(--a) 16%,transparent);border-color:var(--a)}
.msg.bot{background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:var(--warn)}
.msg.staff{background:color-mix(in srgb,var(--good) 14%,transparent);border-color:var(--good)}
.msghead{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px}
.msghead b{font-size:calc(11.5px * var(--fz))}
.msgtext{line-height:1.4;word-break:break-word}
.tkcell{display:inline-flex;align-items:center;gap:7px}

/* --- вложения и упоминания в чате --- */
.chatform,.supform{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line);align-items:center}
.clip{cursor:pointer;font-size:calc(15px * var(--fz));padding:2px 4px;border-radius:4px;opacity:.75}
.clip:hover{opacity:1;background:var(--panel2)}
.attach{display:none;position:relative;padding:7px 9px 0}
.attach.on{display:block}
.attach img{max-height:88px;border-radius:6px;border:1px solid var(--line);display:block}
.attach .x{position:absolute;top:10px;left:12px;background:#000a;border-radius:4px}
.msgimg{display:block;margin-top:5px}
.msgimg img{max-width:100%;max-height:200px;border-radius:6px;border:1px solid var(--line)}
.tkmention{color:var(--a);font-weight:700;cursor:pointer;text-decoration:none}
.tkmention:hover{text-decoration:underline}
.chatnote{padding:5px 9px 0}
.warn-t{color:var(--warn)}
.mentions{display:none;max-height:170px;overflow:auto;border-top:1px solid var(--line)}
.mentions.on{display:block}
.mhit{display:flex;align-items:center;gap:7px;padding:5px 9px;cursor:pointer;font-size:calc(12px * var(--fz))}
.mhit:hover{background:var(--panel2)}
.mhit span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- админская поддержка --- */
.supgrid{display:grid;grid-template-columns:280px 1fr;gap:0;min-height:340px}
.supthreads{border-right:1px solid var(--line);max-height:420px;overflow:auto}
.supthread{padding:9px 11px;border-bottom:1px solid var(--line);cursor:pointer}
.supthread:hover{background:var(--panel2)}
.supthread.active{background:color-mix(in srgb,var(--a) 16%,transparent);
  box-shadow:inset 2px 0 0 var(--a)}
.supthread.unread .stline b{color:var(--txt)}
.stline{display:flex;align-items:center;justify-content:space-between;gap:7px}
.stlast{color:var(--muted);margin:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supchat{display:flex;flex-direction:column;min-height:340px}
.supchathead{display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:9px 12px;border-bottom:1px solid var(--line)}
.supchathead span span{display:block}
@media(max-width:900px){.supgrid{grid-template-columns:1fr}
  .supthreads{border-right:0;border-bottom:1px solid var(--line);max-height:200px}}

/* --- плавающий чат --- */
.chatbtn{right:126px}
.chatpanel{right:14px;width:350px}
.chatscope{display:flex;gap:2px;padding:7px 9px;border-bottom:1px solid var(--line);
  background:var(--panel2)}
.chatscope button{flex:1;padding:5px 8px;border-radius:var(--r);font-size:calc(11.5px * var(--fz));
  font-weight:650;color:var(--muted)}
.chatscope button:hover:not(:disabled){color:var(--txt);background:var(--panel)}
.chatscope button.active{background:var(--a);color:#fff}
.chatscope button:disabled{opacity:.4;cursor:not-allowed}
.postroom{font-size:calc(10.5px * var(--fz));font-weight:750;color:var(--a);margin:6px 0 -3px 2px}
.msghead b.me{color:var(--a)}
.admcols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.admrow{cursor:pointer}
.admrow:hover{background:var(--panel2)}
.approw code{font-family:var(--mono);font-size:calc(11px * var(--fz))}
@media(max-width:800px){.admcols{grid-template-columns:1fr}}

/* --- выбор счёта: биржевые | из токена --- */
.appmodes{display:flex!important;align-items:stretch;gap:7px}
.accgroup{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:1}
.accdiv{width:1px;background:var(--line);flex:none;margin:2px 0}
.appmode.api{border-color:color-mix(in srgb,var(--a) 45%,var(--line))}
.appmode.active.api{background:var(--a);border-color:var(--a)}

/* --- всплывающее объявление --- */
.annpop{position:fixed;top:64px;left:50%;transform:translate(-50%,-12px);z-index:260;
  display:flex;align-items:flex-start;gap:11px;width:min(520px,calc(100% - 28px));
  padding:13px 15px;border-radius:10px;background:var(--panel);
  border:1px solid var(--line);box-shadow:0 18px 50px #0007;
  opacity:0;transition:opacity .24s,transform .24s;font-size:calc(12.5px * var(--fz))}
.annpop.on{opacity:1;transform:translate(-50%,0)}
.annpop.warn{border-color:var(--warn)}
.annpop.danger{border-color:var(--bad)}
.annicon{flex:none;width:24px;height:24px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:800;
  background:var(--a);color:#fff}
.annpop.warn .annicon{background:var(--warn);color:#231a05}
.annpop.danger .annicon{background:var(--bad)}
.anntext{flex:1;line-height:1.45}
.anntext b{display:block;margin-bottom:3px}
.annrow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:calc(12px * var(--fz))}
.annrow.off{opacity:.45}
.annrowtext{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
textarea.input{resize:vertical;font-family:inherit;line-height:1.45}

/* --- экран кода доступа --- */
.lockscreen{z-index:110}
.lockbox{position:relative;z-index:2;width:min(320px,100%);padding:28px 26px;text-align:center;
  background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--line);
  border-radius:16px;backdrop-filter:blur(18px);box-shadow:0 24px 70px #0008}
.lockava{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;background:var(--a);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:calc(18px * var(--fz));font-weight:850}
.lockname{font-size:calc(15px * var(--fz));font-weight:750;margin-bottom:3px}
.lockpass{width:100%;margin-top:16px;padding:11px 13px;text-align:center;font-size:calc(15px * var(--fz));
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  color:var(--txt);outline:none}
.lockpass:focus{border-color:var(--a)}
.lockdots{display:flex;justify-content:center;gap:11px;margin:20px 0 6px}
.lockdots span{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--muted);
  transition:background var(--dur),border-color var(--dur)}
.lockdots span.on{background:var(--a);border-color:var(--a)}
.lockpad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.padkey{height:48px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);
  font-size:calc(18px * var(--fz));font-weight:650;transition:background var(--dur),border-color var(--dur)}
.padkey:hover{background:var(--panel);border-color:var(--a)}
.padkey:active{background:var(--a);color:#fff}
#lockOther{width:100%;margin-top:14px}

/* --- разделы настроек --- */
.settabs{display:flex;gap:2px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.settabs button{padding:8px 15px;font-size:calc(12.5px * var(--fz));font-weight:650;color:var(--muted);
  border-radius:var(--r) var(--r) 0 0}
.settabs button:hover{color:var(--txt);background:var(--panel2)}
.settabs button.active{color:var(--txt);background:var(--panel2);box-shadow:inset 0 -2px 0 var(--a)}
.setpane{margin-bottom:10px}

/* --- стартовая заставка: не даём мигнуть формой входа --- */
.splash{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;background:var(--bg);
  opacity:1;transition:opacity .3s}
.splash.gone{opacity:0;pointer-events:none}
.splashlogo{font-size:calc(24px * var(--fz));font-weight:900;letter-spacing:.18em}
.splashlogo i{color:var(--a);font-style:normal}
.splashbar{width:160px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.splashbar span{display:block;height:100%;width:40%;background:var(--a);border-radius:2px;
  animation:splashrun 1.1s ease-in-out infinite}
@keyframes splashrun{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* ---------- расширенные настройки оформления ---------- */
/* Плотность: уменьшаем вертикальные отступы таблиц и строк. */
body.dens-tight table td,body.dens-tight table th{padding:3px 7px}
body.dens-tight .setting{padding:8px 11px}
body.dens-tight .mrow{padding:4px 0}
body.dens-tight .rowitem{padding:5px 8px}
body.dens-tight .book .bkrow{height:16px}

/* Приватность: суммы видны только при наведении. */
body.privacy-on .num,body.privacy-on #balance,body.privacy-on #brTotal{
  filter:blur(6px);transition:filter .12s}
body.privacy-on .num:hover,body.privacy-on #balance:hover,
body.privacy-on #brTotal:hover{filter:none}

/* Мигание цены при изменении. */
body.flash-off .flashup,body.flash-off .flashdn{animation:none!important}

/* Палитры роста/падения. */
body.pal-cb,.tcard.pal-cb{--good:#2f9bff;--bad:#f5a623}
body.pal-mono,.tcard.pal-mono{--good:#d6d6d6;--bad:#8a8a8a}

/* Логотипы тикеров можно отключить — меньше запросов и шума. */
body.logos-off .tlogo{display:none}

/* Тепловая карта стакана вместо полос глубины. */
body.bk-heat .book .bkbar{opacity:.85;border-radius:0}
body.bk-heat .book .bkrow{background-image:none}

/* ---------- лента сделок ---------- */
.tape{max-height:210px;overflow:auto;font-size:calc(12px * var(--fz))}
.taperow{position:relative;display:grid;grid-template-columns:1fr auto auto;
  gap:8px;align-items:center;padding:2px 9px;border-bottom:1px solid var(--line)}
.taperow .tapebar{position:absolute;left:0;top:0;bottom:0;opacity:.14;background:var(--fg)}
.taperow.good .tapebar{background:var(--good)}
.taperow.bad  .tapebar{background:var(--bad)}
.taperow.good .num:first-of-type{color:var(--good)}
.taperow.bad  .num:first-of-type{color:var(--bad)}
.taperow span{position:relative}

/* ---------- быстрые объёмы ---------- */
.qsize{display:flex;gap:5px}
.qsize button{flex:1;padding:4px 0;font-size:calc(11.5px * var(--fz));background:var(--panel2,#1a1a1f);
  color:var(--txt);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.qsize button:hover{border-color:var(--a);color:var(--a)}
body.qs-off .qsize{display:none}

/* ---------- дневной диапазон ---------- */
.daybar{padding:8px 11px;border-top:1px solid var(--line)}
.drtrack{position:relative;height:5px;margin:5px 0;border-radius:3px;
  background:linear-gradient(90deg,var(--bad),var(--line),var(--good))}
.drfill{position:absolute;top:-3px;width:3px;height:11px;border-radius:2px;
  background:var(--fg);transform:translateX(-1px)}
.bigbtn.dimmed{opacity:.55}


/* ---------- загрузка графика при смене инструмента ---------- */
.chartwrap{position:relative}
.chartload{position:absolute;inset:0;z-index:6;display:none;
  align-items:center;justify-content:center;gap:10px;flex-direction:column;
  background:var(--panel);opacity:.94;color:var(--muted);
  backdrop-filter:blur(2px)}
.chartload.on{display:flex}
.chartload .spin{width:26px;height:26px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--a);
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- таймфреймы аналитики ---------- */
.aitf{margin-bottom:12px}

/* Уровень анимаций из настроек. */
body.anim-off *{animation:none!important;transition:none!important}
body.anim-soft *{transition-duration:.08s!important}
/* Буква под картинкой видна только пока картинки нет — иначе на кадр
   перерисовки проступает подложка и это читается как моргание. */
.lg{position:relative;overflow:hidden}
.lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lg i{font-style:normal}


/* ============================================================
   ОФОРМЛЕНИЯ: ВТОРАЯ ВОЛНА
   Каждая тема — только переопределение переменных, поэтому она
   одинаково ложится на все экраны и ничего не ломает в вёрстке.
   ============================================================ */

/* Светлая «бумага»: для дневной работы и печати отчётов. */
body.paper,.tcard.paper{--bg:#f4f1ea;--panel:#fffdf7;--panel2:#f7f4ec;--line:#ddd6c6;
  --txt:#23201a;--muted:#6c655a;--dim:#9a9285;--a:#8a5a2b;--a2:#6f4720;
  --good:#1f7a4d;--bad:#b3352c}
body.paper .panel{box-shadow:0 1px 2px #00000010}

/* Янтарный монохром — как старые биржевые терминалы. */
body.amber,.tcard.amber{--bg:#0d0a05;--panel:#151007;--panel2:#100c05;--line:#33260f;
  --txt:#ffc86b;--muted:#a8783a;--dim:#6f4f26;--a:#ffb020;--a2:#d98f14;
  --good:#ffd166;--bad:#ff7a45}
body.amber .logo,body.amber .num,body.amber .big{font-family:var(--mono)}
body.amber .panel{box-shadow:inset 0 0 24px #ffb02008}

/* Холодная синева с высокой читаемостью цифр. */
body.ocean,.tcard.ocean{--bg:#04121c;--panel:#071d2b;--panel2:#051724;--line:#0e3145;
  --txt:#d6ecf7;--muted:#6f9bb3;--dim:#4a7288;--a:#2bb3e0;--a2:#1a90b8;
  --good:#3ad1a5;--bad:#ff6584}

/* Нейтральный графит: ничего не отвлекает от данных. */
body.slate,.tcard.slate{--bg:#131417;--panel:#1a1c20;--panel2:#16181b;--line:#292c31;
  --txt:#e3e5e8;--muted:#8b9096;--dim:#61666c;--a:#9aa4b2;--a2:#7d8794;
  --good:#5fbf8f;--bad:#e0707f}

/* Nord: спокойная холодная палитра, мягкий контраст. */
body.nord,.tcard.nord{--bg:#2e3440;--panel:#3b4252;--panel2:#353b48;--line:#4c566a;
  --txt:#eceff4;--muted:#a9b1c1;--dim:#7b8494;--a:#88c0d0;--a2:#5e81ac;
  --good:#a3be8c;--bad:#bf616a}

/* ---------- глубокая аналитика ---------- */
.vpwrap{margin-top:8px;display:flex;flex-direction:column;gap:1px}
.vprow{height:6px;position:relative}
.vpbar{display:block;height:100%;background:var(--line);border-radius:2px}
.vprow.va .vpbar{background:var(--a2,var(--a));opacity:.7}
.vprow.poc .vpbar{background:var(--a)}
.seasrow{display:grid;grid-template-columns:34px 1fr 62px 34px;gap:8px;
  align-items:center;padding:3px 0;font-size:calc(12px * var(--fz))}
.seasrow .lbl{color:var(--muted)}
.seasrow .track{position:relative;height:7px;background:var(--panel2);
  border-radius:4px;overflow:hidden}
.seasrow .fill{position:absolute;top:0;bottom:0;border-radius:4px}
.seasrow .fill.good{background:var(--good)}
.seasrow .fill.bad{background:var(--bad)}
.seasrow .muted{text-align:right}

/* Плавающие кнопки чата и поддержки перекрывали низ формы заявки —
   резервируем под них место в правой колонке и на странице. */
aside .panel:last-child{margin-bottom:58px}
main{padding-bottom:12px}
@media(max-width:900px){aside .panel:last-child{margin-bottom:72px}}

/* ---------- боты ---------- */
.botcard{border:1px solid var(--line);border-radius:var(--r);padding:11px;
  margin-bottom:10px;background:var(--panel2)}
.bothead{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap}
.botlog{margin-top:7px}
.botlog summary{cursor:pointer}
.botlog div{padding:2px 0;border-top:1px solid var(--line)}

/* ---------- настройки бота ---------- */
.botfield label{display:flex;align-items:center;gap:6px}
.botfield .faqbtn{width:15px;height:15px;font-size:calc(10px * var(--fz));line-height:1;padding:0}
.instpick{display:flex;justify-content:space-between;align-items:center;
  gap:10px;text-align:left;padding:7px 10px}
.instpick .tkcell{display:flex;align-items:center;gap:7px;overflow:hidden}

/* ---------- профиль ---------- */
.profhead{display:flex;gap:14px;align-items:flex-start}
.avwrap{position:relative;cursor:pointer;flex:0 0 auto}
.avedit{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;
  border-radius:50%;background:var(--a);color:#fff;font-size:calc(11px * var(--fz));
  display:flex;align-items:center;justify-content:center}
.av{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--line);color:var(--muted);font-weight:650;
  overflow:hidden;flex:0 0 auto}
.av img{width:100%;height:100%;object-fit:cover}

/* ---------- платный доступ к ботам ---------- */
.lockbox{max-width:520px;margin:32px auto;text-align:center;
  border:1px solid var(--line);border-radius:var(--r);padding:26px;
  background:var(--panel2)}
.lockicon{font-size:calc(32px * var(--fz));margin-bottom:8px}
.lockbox b{display:block;font-size:calc(16px * var(--fz));margin-bottom:6px}
.lockbox .btn{margin-top:14px}

/* ---------- админ: доступ к ботам ---------- */
.botsaccess .accrow{display:flex;justify-content:space-between;gap:10px;
  align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.botsaccess .accrow>span:first-child{display:flex;flex-direction:column;gap:2px}
.botsaccess .accrow.wait{background:linear-gradient(90deg,transparent,var(--panel2))}

/* ---------- витрина стратегий ---------- */
.botgallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:11px}
.botcardpick{position:relative;overflow:hidden;display:flex;flex-direction:column;
  gap:5px;text-align:left;padding:14px;border-radius:12px;cursor:pointer;
  color:var(--txt);border:1px solid var(--line);background:var(--panel2);
  transition:transform .16s,border-color .16s,box-shadow .16s}
.botcardpick:hover{transform:translateY(-2px);border-color:var(--a);
  box-shadow:0 10px 30px #0006}

/* Переливание: диагональный блик едет по карточке. Появляется при
   наведении, чтобы покой интерфейса не превращался в дискотеку. */
.botcardpick .shine{position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,
    color-mix(in srgb,var(--a) 55%,transparent) 50%,transparent 62%);
  transform:translateX(-70%);opacity:0}
.botcardpick:hover .shine{opacity:.5;animation:shine 1.5s ease-in-out infinite}
@keyframes shine{0%{transform:translateX(-70%)}100%{transform:translateX(70%)}}

/* Каждой стратегии — своя подсветка, чтобы карточки различались. */
.botcardpick::before{content:'';position:absolute;inset:0;opacity:.14;
  pointer-events:none}
.tone-a::before{background:radial-gradient(120% 80% at 0% 0%,#4d7cff,transparent 60%)}
.tone-b::before{background:radial-gradient(120% 80% at 0% 0%,#22c55e,transparent 60%)}
.tone-c::before{background:radial-gradient(120% 80% at 0% 0%,#a855f7,transparent 60%)}
.tone-d::before{background:radial-gradient(120% 80% at 0% 0%,#f59e0b,transparent 60%)}
.tone-e::before{background:radial-gradient(120% 80% at 0% 0%,#06b6d4,transparent 60%)}
.tone-f::before{background:radial-gradient(120% 80% at 0% 0%,#ef4444,transparent 60%)}

.botcardpick>*{position:relative}
.botcardpick .bicon{font-size:calc(22px * var(--fz));line-height:1}
.botcardpick .btitle{font-weight:700;font-size:calc(14.5px * var(--fz))}
.botcardpick .bdesc{font-size:calc(12px * var(--fz));color:var(--muted);line-height:1.4}
.botcardpick .bmeta{font-size:calc(11.5px * var(--fz));color:var(--muted)}
.botcardpick .bmeta b{color:var(--txt);font-weight:600}
.botcardpick .bmeta.warn b{color:var(--bad)}
.botcardpick .bfields{margin-top:4px;padding-top:6px;font-size:calc(11px * var(--fz));
  color:var(--dim);border-top:1px solid var(--line)}
body.anim-off .botcardpick .shine{display:none}

/* ---------- сворачивание длинных новостей ---------- */
.newstext.clamped{max-height:8.4em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 62%,transparent);
  mask-image:linear-gradient(#000 62%,transparent)}
.morebtn{margin-top:6px;padding:3px 10px;font-size:calc(12px * var(--fz));cursor:pointer;
  border-radius:20px;border:1px solid var(--line);background:var(--panel);
  color:var(--a)}
.morebtn:hover{border-color:var(--a)}
.newslink{display:inline-block;margin-top:8px;color:var(--a);
  text-decoration:none}
.newslink:hover{text-decoration:underline}
.newsitem .src{color:var(--a);font-weight:650}

/* ============================================================
   ТЕЛЕФОН
   Портретная ориентация: одна колонка, крупнее цели нажатия,
   панели не жмутся в нечитаемую сетку.
   ============================================================ */
@media (max-width: 820px){
  .wrap,main{padding-left:10px;padding-right:10px}

  /* Навигация прокручивается вбок, а не переносится в три ряда. */
  .nav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .nav::-webkit-scrollbar{display:none}
  .nav button{white-space:nowrap;flex:0 0 auto}

  /* Торговый экран из трёх колонок становится одной. */
  .grid,.aicols,.supgrid,.sumgrid{grid-template-columns:1fr!important}
  aside{width:auto}
  .chartwrap{height:min(56vh,420px)}

  /* Панель инструментов графика в один ряд шире экрана — даём ей
     собственную прокрутку, иначе вся страница едет вбок. */
  .ctools{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;max-width:100%}
  .ctools::-webkit-scrollbar{display:none}
  .ctools>*{flex:0 0 auto}
  .panel .head{gap:8px;flex-wrap:wrap}

  /* Ничто не должно выпирать за край окна. */
  html,body{max-width:100%;overflow-x:hidden}
  .panel,.grid,main,section.page{min-width:0;max-width:100%}

  .newswrap{padding:8px}
  .newsfilter{padding-top:6px}
  .newsmedia img{max-height:56vh}
  .newsbody{padding:13px 14px}

  /* Таблицы шире экрана — даём им собственную прокрутку. */
  .scroll,.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.table{min-width:640px}

  /* Пальцем в кнопку 24px не попасть. */
  .btn,.morebtn,.cmtbtn,.chip{min-height:34px}
  .btn.sm{min-height:30px}
  .qsize button{min-height:34px}

  /* Чат и поддержка — почти во весь экран, но не поверх кнопок. */
  .supportpanel{left:8px;right:8px;bottom:64px;width:auto!important;
    max-width:none;max-height:70vh}
  .supportpanel.wide{left:4px!important;right:4px!important;
    width:auto!important;height:80vh!important}
  .rsz{display:none}            /* тянуть углы пальцем неудобно */
  .modal{width:100%;max-height:88vh}
  .botgallery{grid-template-columns:1fr}
}

@media (max-width: 820px) and (orientation: landscape){
  /* В альбомной ориентации высоты мало — экономим её. */
  .chartwrap{height:min(72vh,320px)}
  .supportpanel{max-height:82vh}
  .top{height:44px}
}

@media (max-width: 640px){
  /* Шапка: счёт и «Выход» не должны выдавливать логотип за экран. */
  .top{gap:8px;padding-left:10px;padding-right:10px}
  .acctbtn{max-width:46vw;overflow:hidden}
  .acctbtn .num,.acctbtn b{font-size:calc(12px * var(--fz));white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .top .btn,.top button{padding:5px 9px;font-size:calc(12px * var(--fz))}
  .logo{font-size:calc(14px * var(--fz));letter-spacing:.14em}

  /* Карточка счёта фиксированной ширины вылезала за край телефона. */
  .acctpop,.planpop{width:auto;left:8px;right:8px;top:52px}
  .appmodes{grid-template-columns:1fr 1fr}
  .aboutbars{height:56px}
  .abouthero{padding:22px 0}
}

@media (max-width: 480px){
  .newscard h3{font-size:calc(15px * var(--fz))}
  .newsbody{padding:12px}
  .profhead{flex-direction:column;align-items:stretch}
  .bothead{flex-direction:column;align-items:stretch;gap:8px}
  .bothead span:last-child{flex-wrap:wrap}
  .accrow{flex-direction:column;align-items:stretch;gap:6px}
}

/* ============================================================
   ЛЕНТА НОВОСТЕЙ
   Именно лента: один вертикальный поток, читаемая ширина строки,
   посты отделены друг от друга и подсвечиваются при наведении.
   ============================================================ */
.newswrap{max-width:760px;margin:0 auto;padding:12px}

/* Фильтр по источникам — липкий, чтобы не терялся при прокрутке. */
.newsfilter{position:sticky;top:0;z-index:4;display:flex;gap:7px;
  overflow-x:auto;padding:8px 0 12px;margin-bottom:4px;
  background:linear-gradient(var(--bg) 72%,transparent);
  scrollbar-width:none}
.newsfilter::-webkit-scrollbar{display:none}
.newsfilter button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:20px;cursor:pointer;font-size:calc(12.5px * var(--fz));
  color:var(--muted);background:var(--panel2);border:1px solid var(--line);
  transition:all .16s}
.newsfilter button b{color:var(--dim);font-size:calc(11px * var(--fz));font-weight:600}
.newsfilter button:hover{color:var(--txt);border-color:var(--a)}
.newsfilter button.active{color:#fff;background:var(--a);border-color:var(--a)}
.newsfilter button.active b{color:#fff;opacity:.75}

#newsList{display:flex;flex-direction:column;gap:16px}

.newscard{position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:14px;background:var(--panel);
  transition:border-color .18s,box-shadow .18s,transform .18s}
.newscard:hover{border-color:color-mix(in srgb,var(--a) 45%,var(--line));
  box-shadow:0 12px 34px #00000040;transform:translateY(-1px)}

/* Полоса слева отбивает пост от соседей и метит свежие. */
.newscard .accent{position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--line)}
.newscard:hover .accent{background:var(--a)}
.newscard.fresh .accent{background:linear-gradient(var(--good),var(--a))}

.newsmedia{position:relative;background:var(--panel2);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}
/* contain: кадр не режется, фото видно целиком */
.newsmedia img{display:block;width:100%;height:auto;max-height:420px;
  object-fit:contain}

.newsbody{padding:16px 18px;display:flex;flex-direction:column;gap:9px}
.newstop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{padding:2px 9px;border-radius:20px;font-size:calc(11px * var(--fz));font-weight:650;
  letter-spacing:.02em;color:var(--a);
  background:color-mix(in srgb,var(--a) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--a) 35%,transparent)}
.chip.own{color:var(--good);
  background:color-mix(in srgb,var(--good) 14%,transparent);
  border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.chip.pin{color:var(--bad);
  background:color-mix(in srgb,var(--bad) 12%,transparent);
  border-color:color-mix(in srgb,var(--bad) 32%,transparent)}
.newstop .dot{width:3px;height:3px;border-radius:50%;background:var(--dim)}

/* Метка свежести с мягким пульсом — видно, что лента живая. */
.live{display:inline-flex;align-items:center;gap:5px;font-size:calc(10.5px * var(--fz));
  font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--good)}
.live::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--good);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}
                 50%{opacity:.35;transform:scale(.75)}}
body.anim-off .live::before{animation:none}

.newscard h3{margin:0;font-size:calc(18px * var(--fz));line-height:1.3;letter-spacing:-.015em}
.newstext{font-size:calc(14px * var(--fz));line-height:1.6;color:var(--muted)}
.newstext.clamped{max-height:7.5em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 56%,transparent);
  mask-image:linear-gradient(#000 56%,transparent)}

.newsfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:2px;padding-top:10px;border-top:1px solid var(--line)}
.morebtn,.cmtbtn{display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;font-size:calc(12.5px * var(--fz));cursor:pointer;border-radius:20px;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);
  transition:all .16s}
.morebtn{color:var(--a)}
.morebtn:hover,.cmtbtn:hover{border-color:var(--a)}
.cmtbtn b{color:var(--a)}
.cmtbtn.active{border-color:var(--a);color:var(--a);
  background:color-mix(in srgb,var(--a) 10%,transparent)}
.morebtn .chev{transition:transform .18s;font-size:calc(10px * var(--fz))}
.morebtn.open .chev{transform:rotate(180deg)}
.newslink{font-size:calc(12.5px * var(--fz));color:var(--a);text-decoration:none;padding:5px 0}
.newslink:hover{text-decoration:underline}
.newsfoot .admacts{margin-left:auto;display:flex;gap:6px}

.comments{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.comments.hidden{display:none}
.cmt{display:flex;gap:10px;align-items:flex-start;padding:9px 0;
  border-bottom:1px solid var(--line)}
.cmt:last-of-type{border-bottom:0}
.cmt .cmtbody{flex:1;min-width:0;font-size:calc(13.5px * var(--fz));line-height:1.5}
.cmt .cmtbody b{margin-right:6px}
.cmtform{display:flex;gap:7px;margin-top:10px}
.cmtform .input{flex:1}

/* ============================================================
   ТЕМА «С АНИМАЦИЕЙ» — живая, а не просто с переходами
   Раньше здесь были только hover-эффекты, и от обычной темы она
   почти не отличалась. Теперь интерфейс действительно дышит:
   переливаются рамки, скользит блик, мягко пульсируют акценты.
   Всё построено на CSS-анимациях без скриптов, чтобы не грузить
   процессор в терминале, где и так считаются графики.
   ============================================================ */

/* Медленно плывущий градиент фона — основа настроения темы. */
body.anim{
  background:
    radial-gradient(120% 100% at 12% -10%,
      color-mix(in srgb,var(--a) 16%,transparent), transparent 55%),
    radial-gradient(120% 100% at 88% 110%,
      color-mix(in srgb,var(--good) 12%,transparent), transparent 58%),
    var(--bg);
  background-attachment:fixed;
  animation:auraShift 22s ease-in-out infinite alternate}
@keyframes auraShift{
  0%  {background-position:0% 0%, 100% 100%, 0 0}
  100%{background-position:14% 8%, 86% 92%, 0 0}}

/* Панели: переливающаяся кромка. Градиент вращается по границе,
   а внутренняя заливка остаётся спокойной — читаемость важнее. */
body.anim .panel{position:relative;isolation:isolate;
  transition:transform var(--dur),box-shadow var(--dur)}
body.anim .panel::after{content:'';position:absolute;inset:-1px;
  border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--angle,0deg),
    transparent 0deg,
    color-mix(in srgb,var(--a) 70%,transparent) 60deg,
    transparent 130deg,
    color-mix(in srgb,var(--good) 55%,transparent) 210deg,
    transparent 300deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.55;animation:borderSpin 8s linear infinite}
body.anim .panel:hover{transform:translateY(-2px);
  box-shadow:0 14px 38px #00000045}
body.anim .panel:hover::after{opacity:1;animation-duration:3.5s}

/* Свойство --angle нужно зарегистрировать, иначе оно не анимируется. */
@property --angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes borderSpin{to{--angle:360deg}}

/* Кнопки и вкладки: блик пробегает по поверхности при наведении. */
body.anim .btn,body.anim .nav button,body.anim .bigbtn{
  position:relative;overflow:hidden;transition:all var(--dur)}
body.anim .btn::before,body.anim .nav button::before,
body.anim .bigbtn::before{content:'';position:absolute;inset:0;
  pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 35%,
    color-mix(in srgb,#fff 26%,transparent) 50%,transparent 65%)}
body.anim .btn:hover::before,body.anim .nav button:hover::before,
body.anim .bigbtn:hover::before{animation:sheen .75s ease}
@keyframes sheen{to{transform:translateX(120%)}}

/* Активная вкладка подсвечена бегущей полосой снизу. */
body.anim .nav button.active::after{content:'';position:absolute;
  left:8px;right:8px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--a),transparent);
  background-size:200% 100%;animation:runline 2.2s linear infinite}
@keyframes runline{to{background-position:200% 0}}

/* Логотип медленно переливается. */
body.anim .logo{
  background:linear-gradient(90deg,var(--txt) 20%,var(--a) 40%,
    var(--good) 55%,var(--txt) 75%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:runline 6s linear infinite}

/* Цена и ключевые числа мягко пульсируют при изменении. */
body.anim .last,body.anim #price{transition:color .25s,text-shadow .25s}
body.anim .flash-up{animation:glowUp .5s ease}
body.anim .flash-dn{animation:glowDn .5s ease}
@keyframes glowUp{
  0%{text-shadow:0 0 0 transparent}
  35%{text-shadow:0 0 16px color-mix(in srgb,var(--good) 75%,transparent)}
  100%{text-shadow:0 0 0 transparent}}
@keyframes glowDn{
  0%{text-shadow:0 0 0 transparent}
  35%{text-shadow:0 0 16px color-mix(in srgb,var(--bad) 75%,transparent)}
  100%{text-shadow:0 0 0 transparent}}

/* Значки статуса и живые индикаторы дышат. */
body.anim .badge.on{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 45%,transparent)}
  50%    {box-shadow:0 0 0 5px transparent}}

/* Строки таблиц подсвечиваются скользящей заливкой. */
body.anim .table tbody tr{transition:background var(--dur)}
body.anim .table tbody tr:hover{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--a) 12%,transparent),transparent 70%)}

/* Карточки приподнимаются и получают цветную тень. */
body.anim .card{transition:transform var(--dur),box-shadow var(--dur)}
body.anim .card:hover{transform:translateY(-3px);
  box-shadow:0 12px 30px color-mix(in srgb,var(--a) 22%,transparent)}

/* Появление модалок и уведомлений — с лёгким наплывом. */
body.anim .modal{animation:pop .2s cubic-bezier(.2,.9,.3,1.2)}
body.anim .toast{animation:slideup .24s cubic-bezier(.2,.9,.3,1.2)}

/* Уважение к системной настройке: если человек просил меньше
   движения, оставляем только самое необходимое. */
@media (prefers-reduced-motion: reduce){
  body.anim *,body.anim *::before,body.anim *::after{
    animation:none!important}
}

/* ---------- алерты ---------- */
.alertlist{max-height:190px;overflow:auto}
.alertrow{display:flex;align-items:center;gap:8px;padding:6px 10px;
  border-bottom:1px solid var(--line);font-size:calc(12px * var(--fz))}
.alertrow:last-child{border-bottom:0}
.alertrow.off{opacity:.45}
.alertrow .tkcell{display:flex;align-items:center;gap:6px;min-width:74px}

/* ---------- свои боты: редактор и консоль ---------- */
.bottabs{display:flex;gap:6px;margin-bottom:6px}
.bottabs button{padding:6px 13px;border-radius:20px;cursor:pointer;
  font-size:calc(12.5px * var(--fz));color:var(--muted);background:var(--panel2);
  border:1px solid var(--line);transition:all .16s}
.bottabs button:hover{color:var(--txt);border-color:var(--a)}
.bottabs button.active{color:#fff;background:var(--a);border-color:var(--a)}
.bottabs button.hidden{display:none}

textarea.input.code{font-family:var(--mono);font-size:calc(12.5px * var(--fz));line-height:1.5;
  white-space:pre;overflow:auto;tab-size:4}
.sdkhelp{font-family:var(--mono);font-size:calc(11.5px * var(--fz));line-height:1.55;
  white-space:pre-wrap;margin:8px 0 0;padding:10px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line);max-height:300px;
  overflow:auto}

.ubconsole{margin-top:9px;max-height:220px;overflow:auto;padding:8px 10px;
  border-radius:8px;background:#05070b;border:1px solid var(--line);
  font-family:var(--mono);font-size:calc(11.5px * var(--fz));line-height:1.5}
.ubline{color:#c8d3e6;white-space:pre-wrap;word-break:break-word}
.ubline.muted{color:#6b7891}
.ubline.bad{color:#ff7a90}

/* ---------- правовые пометки ---------- */
.acceptrow{display:flex;align-items:flex-start;gap:9px;margin:2px 0 12px;
  cursor:pointer;color:var(--muted);line-height:1.45}

/* Правило .authbox input задаёт width:100% всем полям ввода, и чекбокс
   растягивался на всю строку, выдавливая текст согласия в узкую колонку
   справа. Флажку нужен свой фиксированный размер. */
.acceptrow input[type="checkbox"]{
  width:16px;height:16px;flex:0 0 16px;margin:1px 0 0;padding:0;
  accent-color:var(--a);cursor:pointer}

/* Текст занимает всю оставшуюся ширину и переносится по словам. */
.acceptrow span{flex:1 1 auto;min-width:0;text-align:left}

.acceptrow.hidden{display:none}

.legalnote{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  color:var(--dim);line-height:1.5;font-size:calc(11px * var(--fz))}
.legalnote a{color:var(--muted);margin-left:6px}
.legalnote a:hover{color:var(--a)}

/* Подвал намеренно тихий: он должен быть, но не тянуть внимание. */
.sitefoot{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;
  padding:18px 20px 26px;margin-top:18px;
  border-top:1px solid var(--line);color:var(--dim);font-size:calc(11px * var(--fz));
  line-height:1.5}
.sitefoot a{color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--line)}
.sitefoot a:hover{color:var(--muted)}
@media (max-width:820px){.sitefoot{padding:14px 12px 70px;gap:5px 12px}}

/* ---------- выбор языка на экране входа ---------- */
.authlang{display:flex;gap:5px;justify-content:flex-end;margin-bottom:12px}
.authlang button{padding:3px 9px;border-radius:16px;cursor:pointer;
  font-size:calc(11px * var(--fz));font-weight:650;letter-spacing:.04em;
  color:var(--dim);background:transparent;border:1px solid var(--line);
  transition:all .16s}
.authlang button:hover{color:var(--txt);border-color:var(--a)}
.authlang button.active{color:#fff;background:var(--a);border-color:var(--a)}
.ubenv{padding:8px 11px;margin-bottom:10px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.ubenv .faqbtn{margin-left:6px}

/* ============================================================
   ПЛАВНОСТЬ
   Интерфейс терминала обновляется постоянно, поэтому движение
   должно быть коротким и предсказуемым: не «эффект», а ощущение,
   что элементы не прыгают. Кривая ease-out — быстро стартует,
   мягко останавливается.
   ============================================================ */
:root{
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* Появление страниц: содержимое не возникает рывком. */
.page{animation:pageIn .22s var(--ease-out)}
@keyframes pageIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}}

/* Панели и карточки — единая мягкая реакция на наведение. */
.panel,.card,.newscard,.botcard,.rowitem,.alertrow{
  transition:background .18s var(--ease),
             border-color .18s var(--ease),
             box-shadow .22s var(--ease),
             transform .22s var(--ease-out)}

/* Кнопки и вкладки: короткий отклик, чтобы клик ощущался. */
.btn,.nav button,.bottabs button,.newsfilter button,.switch button,
.tabs button,.bigbtn,.morebtn,.cmtbtn,.qsize button{
  transition:background .15s var(--ease),color .15s var(--ease),
             border-color .15s var(--ease),transform .12s var(--ease)}
.btn:active,.nav button:active,.bigbtn:active,
.bottabs button:active,.qsize button:active{transform:scale(.97)}

/* Модалки и всплывающие панели въезжают, а не появляются. */
.modalwrap{transition:opacity .18s var(--ease)}
.modal{animation:modalIn .22s var(--ease-out)}
@keyframes modalIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}}

.supportpanel.open{animation:panelIn .2s var(--ease-out)}
@keyframes panelIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}}

.toast{animation:toastIn .24s var(--ease-out)}
@keyframes toastIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}}

/* Строки таблиц и списков подсвечиваются без рывка. */
.table tbody tr{transition:background .14s var(--ease)}

/* Прокрутка списков — инерционная на тач-устройствах. */
.scroll,.tape,.alertlist,.ubconsole,.supmsgs,.pklist{
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch}

/* Элементы, которые часто меняются, выносим в отдельный слой:
   браузер перестаёт перерисовывать соседей. */
.book .bkbody,.tape,.ubconsole{will-change:scroll-position}
.livebg{will-change:transform}

/* Уважение к системной настройке «меньше движения». */
@media (prefers-reduced-motion: reduce){
  .page,.modal,.supportpanel.open,.toast{animation:none}
  *{transition-duration:.01ms!important}
}

/* ---------- легенда состояний ботов ---------- */
.botlegend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  padding:8px 11px;margin-bottom:10px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line)}
.botlegend span{display:flex;align-items:center;gap:6px}

/* Строка позиции ведёт к инструменту: показываем это курсором
   и подсветкой, иначе кликабельность приходится угадывать. */
tr.rowlink{cursor:pointer}
tr.rowlink:hover{background:linear-gradient(90deg,
  color-mix(in srgb,var(--a) 14%,transparent),transparent 65%)}
tr.rowlink:hover .tkcell b{color:var(--a)}
tr.rowlink:active{transform:scale(.998)}

/* ============================================================
   «ЖИВОЙ ФОН»: переливается не только фон, но и интерфейс
   Панели полупрозрачны, поэтому движение фона проходит сквозь них,
   а кромки и акценты живут своей медленной жизнью. Движение
   намеренно медленное: терминал должен дышать, а не мигать.
   ============================================================ */

body.livebg-on .panel{
  position:relative;isolation:isolate;
  /* Плотность держим ту же, что задана выше (82%): текст должен
     лежать на ровном фоне, а не на бегущем графике. Раньше здесь
     стояло 72%, и это правило, будучи ниже по файлу, молча
     перебивало настройку читаемости. */
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.2)}

/* Кромка панели медленно перетекает из акцента в зелёный и обратно. */
body.livebg-on .panel::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  padding:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--a) 55%,transparent),
    color-mix(in srgb,var(--good) 40%,transparent),
    color-mix(in srgb,var(--a) 15%,transparent),
    color-mix(in srgb,var(--a) 55%,transparent));
  background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.45;animation:edgeFlow 14s ease-in-out infinite}
@keyframes edgeFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}}

/* Заголовки панелей: тонкая световая линия проходит слева направо. */
body.livebg-on .panel>.head{position:relative;overflow:hidden}
body.livebg-on .panel>.head::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--a) 75%,transparent),transparent);
  background-size:220% 100%;
  animation:headSweep 9s linear infinite}
@keyframes headSweep{to{background-position:220% 0}}

/* Логотип и активная вкладка переливаются в такт. */
body.livebg-on .logo{
  background:linear-gradient(90deg,var(--txt) 25%,var(--a) 45%,
    var(--good) 58%,var(--txt) 78%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:headSweep 11s linear infinite}

body.livebg-on .nav button.active{
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--a) 88%,transparent),
    color-mix(in srgb,var(--a2,var(--a)) 92%,transparent),
    color-mix(in srgb,var(--a) 88%,transparent));
  background-size:220% 100%;
  animation:headSweep 7s linear infinite}

/* Ключевые кнопки слегка «дышат» цветом, не отвлекая от цифр. */
body.livebg-on .bigbtn,body.livebg-on .btn.primary{
  background-size:200% 100%;
  animation:btnFlow 10s ease-in-out infinite}
@keyframes btnFlow{
  0%,100%{background-position:0% 50%;filter:none}
  50%{background-position:100% 50%;filter:brightness(1.08)}}

/* Цена и итоговые суммы мягко подсвечиваются: видно, что данные живые. */
body.livebg-on .last,body.livebg-on .big{
  animation:valueBreath 6s ease-in-out infinite}
@keyframes valueBreath{
  0%,100%{text-shadow:none}
  50%{text-shadow:0 0 14px color-mix(in srgb,var(--a) 35%,transparent)}}

/* Полоска активности вверху страницы — единственный быстрый элемент:
   она показывает, что поток данных идёт. */
body.livebg-on .top::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--a),
    var(--good),transparent);
  background-size:35% 100%;
  animation:pulseLine 3.4s linear infinite}
@keyframes pulseLine{
  from{background-position:-40% 0}
  to{background-position:140% 0}}
/* overflow:hidden здесь стоять не может: у шапки есть backdrop-filter,
   из-за него она становится точкой отсчёта для position:fixed, и
   обрезка прятала всплывающую панель выбора счёта. Полосе активности
   обрезка не нужна — она анимирует background-position внутри себя. */
body.livebg-on .top{position:sticky}

/* Панель счёта и другие всплывающие элементы держим над шапкой. */
body.livebg-on .acctpop{z-index:220}

@media (prefers-reduced-motion: reduce){
  body.livebg-on *,body.livebg-on *::after{animation:none!important}
}

/* ---------- панель инструментов рисования ---------- */
.toolspanel{position:absolute;z-index:40;right:12px;top:52px;
  width:min(560px,92vw);max-height:min(62vh,480px);overflow:auto;
  overscroll-behavior:contain;
  border:1px solid var(--line);border-radius:14px;
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  backdrop-filter:blur(16px);box-shadow:0 22px 60px #00000055;
  animation:panelIn .18s var(--ease-out)}
.toolspanel.hidden{display:none}
.tphead{display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:inherit;backdrop-filter:blur(16px)}
.tpbody{padding:12px 14px 16px}
.tpgroup+.tpgroup{margin-top:16px}
.tptitle{font-size:calc(11px * var(--fz));letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.tpgrid{display:grid;gap:7px;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.tpitem{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:9px;cursor:pointer;text-align:left;
  color:var(--txt);background:var(--panel2);border:1px solid var(--line);
  transition:all .15s var(--ease)}
.tpitem:hover{border-color:var(--a);transform:translateY(-1px)}
.tpitem.active{border-color:var(--a);color:var(--a);
  background:color-mix(in srgb,var(--a) 12%,transparent)}
.tpitem .ic{width:20px;text-align:center;font-size:calc(14px * var(--fz));flex:0 0 auto;
  color:var(--a)}
.tpitem .lb{font-size:calc(11.5px * var(--fz));line-height:1.25;color:var(--muted)}
.tpitem.active .lb{color:var(--a)}
#toolsMore.active{border-color:var(--a);color:var(--a)}

/* ============================================================
   ПАЛИТРЫ: доработка оставшихся тем
   Каждая тема — цельная система, а не набор цветов: подобраны
   уровни фона, границы и акценты, чтобы цифры читались, а
   интерфейс не резал глаз в долгой работе.
   ============================================================ */

/* Тёмная — основная. Чуть больше воздуха между уровнями. */
body.dark,.tcard.dark{--bg:#0a0c11;--panel:#12151d;--panel2:#0e1118;--line:#1f2531;
  --txt:#e8ebf2;--muted:#98a2b6;--dim:#68718a;--a:#5b7fff;--a2:#4566e8;
  --good:#22c98a;--bad:#ff5f77}

/* Светлая — для дневной работы у окна. */
body.light,.tcard.light{--bg:#f5f7fb;--panel:#ffffff;--panel2:#eef1f7;--line:#dde3ed;
  --txt:#14181f;--muted:#5a6478;--dim:#8a93a6;--a:#3a63f0;--a2:#2a4fd4;
  --good:#0f9d63;--bad:#dc3a52}
body.light .panel{box-shadow:0 1px 3px #0f172a0d}
body.light .book .bkbar{opacity:.5}

/* Бумага — тёплая светлая, мягче для длинного чтения. */
body.paper,.tcard.paper{--bg:#f5f2ea;--panel:#fffdf8;--panel2:#efece3;--line:#ddd6c8;
  --txt:#21201c;--muted:#66625a;--dim:#968f86;--a:#9a5f26;--a2:#7d4a19;
  --good:#1f7a4d;--bad:#b3352c}
body.paper .panel{box-shadow:0 1px 2px #00000010}

/* Полночь — глубокая синева, минимум яркости для ночной работы. */
body.midnight,.tcard.midnight{--bg:#04060d;--panel:#0a0e18;--panel2:#070a12;--line:#141a28;
  --txt:#dbe3f4;--muted:#6f7d99;--dim:#4a5570;--a:#7d8cff;--a2:#5d6ae0;
  --good:#3ad39a;--bad:#ff5f7d}

/* Терминал — зелёный монохром, моноширинные числа. */
body.terminal,.tcard.terminal{--bg:#050d08;--panel:#08150e;--panel2:#06110b;--line:#122d1c;
  --txt:#c7f5d6;--muted:#5d9b76;--dim:#3d6a50;--a:#25d366;--a2:#17a94f;
  --good:#3ddc84;--bad:#ff6b6b}
body.terminal .logo,body.terminal .num,body.terminal .big,
body.terminal .last{font-family:var(--mono)}

/* Янтарь — тёплый монохром старых торговых терминалов. */
body.amber,.tcard.amber{--bg:#0c0904;--panel:#150f06;--panel2:#100b05;--line:#31240f;
  --txt:#ffc86b;--muted:#a87c3e;--dim:#6f5228;--a:#ffb020;--a2:#d98f14;
  --good:#ffd166;--bad:#ff7a45}
body.amber .logo,body.amber .num,body.amber .big,
body.amber .last{font-family:var(--mono)}
body.amber .panel{box-shadow:inset 0 0 30px #ffb0200a}

/* Единая мягкость границ и теней во всех темах. */
.panel{border-radius:12px}
.btn,.input,.switch button{border-radius:8px}

/* ---------- игры ---------- */
/* Кнопка игр — только значок: подпись рядом с чатом и поддержкой
   перегружала угол, а геймпад читается без слов. */
.gamesbtn{position:fixed;left:14px;bottom:14px;z-index:190;
  width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;font-size:calc(17px * var(--fz));line-height:1;cursor:pointer;
  border-radius:50%;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 6px 20px #0005;transition:all .16s var(--ease)}
.gamesbtn:hover{border-color:var(--a);transform:translateY(-1px)}
.gamesbtn.active{border-color:var(--a);background:color-mix(in srgb,var(--a) 16%,var(--panel))}

.gamespanel{position:fixed;left:14px;bottom:56px;z-index:191;
  width:min(420px,94vw);height:min(640px,78vh);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 22px 60px #00000066;
  animation:panelIn .2s var(--ease-out)}
.gamespanel.hidden{display:none}
.gamespanel.wide{left:3vw;right:3vw;bottom:3vh;width:auto;height:92vh}

.gphead{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 13px;border-bottom:1px solid var(--line);
  cursor:move}
.gphead .x{cursor:pointer}

.gplist{flex:1;overflow:auto;padding:12px}
.gplist.hidden{display:none}

.gpcard{display:flex;align-items:center;gap:12px;width:100%;
  padding:13px;border-radius:12px;cursor:pointer;text-align:left;
  color:var(--txt);background:var(--panel2);border:1px solid var(--line);
  transition:all .16s var(--ease)}
.gpcard:hover{border-color:var(--a);transform:translateY(-1px);
  box-shadow:0 8px 22px #00000038}
.gpico{font-size:calc(26px * var(--fz));flex:0 0 auto}
.gpbody{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.gpbody b{font-size:calc(14px * var(--fz))}
.gpgo{color:var(--a);font-size:calc(13px * var(--fz));flex:0 0 auto}
.gpnote{margin-top:12px;line-height:1.5}

.gpframe{flex:1;display:flex;flex-direction:column;min-height:0}
.gpframe.hidden{display:none}
.gpbar{display:flex;align-items:center;gap:10px;padding:8px 11px;
  border-bottom:1px solid var(--line)}
/* Белое полотно бралось не из зазора — раскладка сходится точно, —
   а из непрокрашенных слоёв: сам iframe прозрачен, и под ним светится
   подложка окна. Поэтому фон задаём на каждом уровне и объявляем
   тёмную схему, чтобы браузер не подставлял белое сам. */
.gpframe .gpbar{flex:0 0 auto}
.gpframe iframe{flex:1 1 auto;width:100%;min-height:0;border:0;
  display:block;background:#0b0e16;color-scheme:dark}
.gamespanel{background:#0b0e16;color:var(--txt);color-scheme:dark}
.gamespanel .gplist,.gamespanel .gptop{background:var(--panel)}
.gamespanel .gphead,.gamespanel .gptabs{background:var(--panel)}

@media (max-width:820px){
  .gamespanel{left:8px;right:8px;width:auto;height:76vh;bottom:64px}
  .gamesbtn{left:8px}
}

/* ---------- статистика игр ---------- */
.gptabs{display:flex;gap:6px;padding:10px 12px 0}
.gptabs.hidden{display:none}
.gptabs button{flex:1;padding:6px 10px;border-radius:8px;cursor:pointer;
  font-size:calc(12.5px * var(--fz));color:var(--muted);background:var(--panel2);
  border:1px solid var(--line);transition:all .15s var(--ease)}
.gptabs button:hover{color:var(--txt);border-color:var(--a)}
.gptabs button.active{color:#fff;background:var(--a);border-color:var(--a)}

.gptop{flex:1;overflow:auto;padding:12px}
.gptop.hidden{display:none}
.gptophead{display:grid;grid-template-columns:44px 1fr 92px;gap:8px;
  padding:0 8px 8px;border-bottom:1px solid var(--line)}
.gptoprow{display:grid;grid-template-columns:44px 1fr 92px;gap:8px;
  align-items:center;padding:8px;border-bottom:1px solid var(--line);
  font-size:calc(13px * var(--fz))}
.gptoprow:last-of-type{border-bottom:0}
.gptoprow.me{background:color-mix(in srgb,var(--a) 12%,transparent);
  border-radius:8px}
.gptoprow .pl{font-size:calc(15px * var(--fz));text-align:center;color:var(--muted)}
.gptoprow .pn{display:flex;align-items:center;gap:7px;min-width:0;
  overflow:hidden}
.gptoprow .pn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gptoprow .ps{text-align:right;color:var(--good);font-weight:650}

/* ============================================================
   ПОДПИСКА И ПРОГОН ПО ИСТОРИИ
   ============================================================ */
.rowitem.locked{opacity:.55}
.rowitem.locked b{font-weight:600}

.btgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.btgrid .setting{margin:0}

.btcards{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.btcard{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);
        background:var(--panel2);display:flex;flex-direction:column;gap:3px}
.btcard b{font-size:calc(15px * var(--fz))}

/* Полоса прогресса прогона: он идёт десятками секунд, и без неё
   непонятно, работает ли что-то вообще. */
.btbar{height:6px;border-radius:6px;background:var(--panel2);overflow:hidden}
.btbar i{display:block;height:100%;background:var(--a);transition:width .3s}

.btchart{width:100%;height:160px;display:block}
.btline{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.btline.up{stroke:var(--good)}
.btline.dn{stroke:var(--bad)}
.btzero{stroke:var(--line);stroke-dasharray:3 3;vector-effect:non-scaling-stroke}

/* ============================================================
   СТРАНИЦА «О ТЕРМИНАЛЕ»
   ============================================================ */

/* Логотип теперь кнопка-вкладка, но выглядеть должен как логотип. */
.logotab{background:none;border:0;cursor:pointer;font:inherit;color:inherit;
         padding:0 14px 0 0;position:relative}
.logotab.active i{color:var(--a)}
.logotab:hover{opacity:.85}

.aboutwrap{max-width:940px;margin:0 auto;padding:26px 16px 40px}

.abouthero{position:relative;text-align:center;padding:30px 0 30px;overflow:hidden;
  border-bottom:1px solid var(--line)}
/* Дрейфующее радиальное свечение за логотипом — «живой» фон без картинок. */
.aboutaura{position:absolute;inset:-40% -20% auto -20%;height:340px;pointer-events:none;
  background:
    radial-gradient(38% 60% at 30% 40%, color-mix(in srgb,var(--a) 32%,transparent), transparent 70%),
    radial-gradient(34% 55% at 72% 55%, color-mix(in srgb,var(--good) 26%,transparent), transparent 72%);
  filter:blur(28px);opacity:.7;animation:auroraDrift 14s ease-in-out infinite alternate;

  /* Вот здесь была та самая «чёткая граница подсветки».

     Слой размыт на 28 пикселей, но лежит внутри .abouthero с
     overflow:hidden — то есть размытое пятно обрезается ПРЯМЫМ УГЛОМ
     контейнера. Срез размытия прямой линией глаз читает как границу,
     и видно её было на всех оформлениях: слой от темы не зависит.
     Двигать границу или менять проценты бесполезно — обрезка
     останется в любом случае.

     Лечится маской: слой сам гаснет к своим краям задолго до того,
     как до них доберётся обрезка. Обрезать становится нечего. */
  -webkit-mask:radial-gradient(75% 70% at 50% 42%,
      #000 0%, #000 38%, rgba(0,0,0,.55) 62%, transparent 88%);
          mask:radial-gradient(75% 70% at 50% 42%,
      #000 0%, #000 38%, rgba(0,0,0,.55) 62%, transparent 88%)}
@keyframes auroraDrift{
  0%{transform:translate3d(-6%,-4%,0) scale(1)}
  50%{transform:translate3d(5%,3%,0) scale(1.12)}
  100%{transform:translate3d(-3%,5%,0) scale(1.04)}
}
.aboutlogo{position:relative;font-size:calc(30px * var(--fz));font-weight:800;letter-spacing:.14em}
.aboutlogo i{color:var(--a);font-style:normal;animation:pulse 2.4s ease-in-out infinite}

/* Полоса «свечей» — оформление. Растут снизу и мягко дышат. */
.aboutbars{position:relative;margin:24px auto 0;max-width:560px;height:78px;
  display:flex;align-items:flex-end;gap:4px;padding:0 4px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.aboutbars i{flex:1;border-radius:2px;transform-origin:bottom;transform:scaleY(.15);
  opacity:.25;animation:barRise 3.4s ease-in-out infinite alternate}
.aboutbars i.u{background:linear-gradient(180deg,var(--good),color-mix(in srgb,var(--good) 30%,transparent))}
.aboutbars i.d{background:linear-gradient(180deg,var(--bad),color-mix(in srgb,var(--bad) 30%,transparent))}
@keyframes barRise{
  0%{transform:scaleY(.15);opacity:.2}
  100%{transform:scaleY(1);opacity:.85}
}
@media (prefers-reduced-motion:reduce){
  .aboutaura,.aboutbars i,.aboutlogo i{animation:none}
  .aboutbars i{transform:scaleY(.7);opacity:.5}
}

.aboutfeedh{max-width:940px;margin:30px auto 4px;font-size:calc(17px * var(--fz));font-weight:700}
.abouthero h1{margin:14px 0 8px;font-size:calc(23px * var(--fz));font-weight:700}
.aboutlead{max-width:640px;margin:0 auto;color:var(--muted);font-size:calc(13.5px * var(--fz));line-height:1.65}

.aboutstate{margin-top:18px;display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap}
.abadge{padding:3px 10px;border-radius:20px;font-size:calc(11px * var(--fz));font-weight:700;
        border:1px solid var(--line);background:var(--panel2)}
.abadge.pro{background:var(--good);border-color:var(--good);color:#04231a}
.abadge.trial{background:var(--warn,#d99b1e);border-color:var(--warn,#d99b1e);color:#231a04}
.abtimer{font-family:var(--mono);font-size:calc(15px * var(--fz));font-weight:700}

.aboutcta{margin-top:16px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.btn.lg{padding:9px 20px;font-size:calc(13.5px * var(--fz))}

/* Лента: нумерованные разделы с направляющей слева. */
/* Сетка возможностей. Раньше это был нумерованный столбец на три
   экрана: номера обещали порядок, которого нет, а каждая запись —
   всего три строки. */
.feed{
  margin-top:18px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
}
.feeditem{
  display:flex;flex-direction:column;gap:8px;
  padding:17px 18px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);
  transition:border-color .18s,transform .18s;
}
.feeditem:hover{
  border-color:color-mix(in srgb,var(--a) 40%,var(--line));
  transform:translateY(-2px);
}

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ

   Скрытие живёт в классе, который вешает скрипт, а не в базовом
   стиле. Раньше блок был прозрачным по умолчанию и становился видимым
   только по сигналу наблюдателя — а если тот не срабатывал (вкладка в
   фоне, нулевая высота окна, отключённый скрипт), текст оставался
   невидимым навсегда. Теперь по умолчанию всё видно, анимация лишь
   украшает.
   ============================================================ */
.rv{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease var(--d,0ms),
             transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.rv.inview{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}
.feedmark{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);display:flex;align-items:center;justify-content:center;
  font-size:calc(15px * var(--fz));color:var(--a);
}
.feeditem h3{margin:0;font-size:calc(14.5px * var(--fz));font-weight:700;line-height:1.35}
.feeditem p{margin:0;color:var(--muted);font-size:calc(12.5px * var(--fz));line-height:1.6}

.abouttiers{margin-top:26px}
.abouttiers h2{font-size:calc(17px * var(--fz));margin:0 0 14px}
.tiergrid{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.tiercard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:15px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.tiername{font-weight:700;font-size:calc(14px * var(--fz))}
.tierprice{font-size:calc(21px * var(--fz));font-weight:800}
.tiernote{color:var(--good)}
.tiercard .btn{margin-top:9px;width:100%}

.aboutfoot{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;gap:9px;justify-content:space-between;flex-wrap:wrap}

@media (max-width:640px){
  .aboutwrap{padding:16px 12px 30px}
  .abouthero h1{font-size:calc(19px * var(--fz))}
  .feeditem{padding:14px 15px}
}

/* Что даёт подписка — перед ценами, а не после. */
.abouthint{color:var(--muted);font-size:calc(13px * var(--fz));margin:0 0 14px;max-width:640px;line-height:1.6}
.perkgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.perk{display:flex;gap:10px;padding:12px;border:1px solid var(--line);
      border-radius:var(--r);background:var(--panel)}
.perkmark{flex:0 0 20px;height:20px;border-radius:50%;background:var(--good);
  color:#04231a;display:flex;align-items:center;justify-content:center;
  font-size:calc(11px * var(--fz));font-weight:800;margin-top:1px}
.perk b{display:block;font-size:calc(13.5px * var(--fz));margin-bottom:3px}
.perk p{margin:0;color:var(--muted);font-size:calc(12.5px * var(--fz));line-height:1.55}

.tiercard{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.tiercard:hover{transform:translateY(-3px);box-shadow:0 10px 26px -14px color-mix(in srgb,var(--a) 55%,transparent)}
.tiercard.best{border-color:var(--a);box-shadow:0 0 0 1px var(--a) inset}
/* Бегущий блик по «популярному» тарифу. */
.tiercard.best::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a) 22%,transparent),transparent);
  animation:tierSheen 3.6s ease-in-out infinite;pointer-events:none}
@keyframes tierSheen{
  0%{transform:translateX(0) skewX(-18deg)}
  60%,100%{transform:translateX(430%) skewX(-18deg)}
}
@media (prefers-reduced-motion:reduce){ .tiercard.best::after{animation:none;opacity:0} }
.tiercard.current{border-color:var(--good)}
.tierflag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--a);color:#fff;font-size:calc(10px * var(--fz));font-weight:700;
  padding:2px 9px;border-radius:20px;white-space:nowrap}
.tierline{min-height:30px}
.tierper{margin-top:-2px}
.tiersave{color:var(--good);font-size:calc(11.5px * var(--fz));font-weight:700;min-height:16px}
.tiersave.empty{visibility:hidden}

.paynote{margin-top:18px;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel2)}
.paynote b{font-size:calc(13px * var(--fz))}
.paynote p{margin:5px 0 0;color:var(--muted);font-size:calc(12.5px * var(--fz));line-height:1.6}

/* В закрытом разделе ботов две равнозначные дороги: оформить подписку
   или попросить доступ у администратора. */
.lockbtns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:4px}

/* Тикеры прогона: у каждого может быть свой набор настроек. */
.tklist{display:flex;flex-wrap:wrap;gap:7px}
.tkchip{display:inline-flex;align-items:center;gap:7px;padding:4px 6px 4px 10px;
  border:1px solid var(--line);border-radius:20px;background:var(--panel2)}
.tkchip.tuned{border-color:var(--a)}
.tkchip b{font-size:calc(12px * var(--fz))}
.tkbtn{border:0;background:none;color:var(--muted);cursor:pointer;
  font-size:calc(10.5px * var(--fz));padding:2px 6px;border-radius:12px}
.tkbtn:hover{background:var(--panel);color:var(--txt)}
.tkchip.tuned .tkbtn:not(.x){color:var(--a);font-weight:700}
.tkbtn.x{font-size:calc(11px * var(--fz))}

.btactions{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin:12px 0 6px}

/* ============================================================
   КОНСОЛЬ СВОИХ БОТОВ: панель действий
   ============================================================ */
.btn.xs{padding:3px 8px;font-size:calc(10.5px * var(--fz));border-radius:5px}
.ubbar{display:flex;gap:5px;align-items:center;flex-wrap:wrap;
  padding:6px 0 5px}
.ubsep{width:1px;height:15px;background:var(--line);margin:0 3px}
.ubbar .btn.active{background:var(--a);border-color:var(--a);color:#fff}
.ubcount{margin-left:auto}
.ubconsole.wrap .ubline{white-space:pre-wrap;word-break:break-word}

/* ============================================================
   ЯРЛЫК ПОДПИСКИ В ШАПКЕ
   ============================================================ */
.planchip{display:flex;align-items:center;gap:6px;cursor:pointer;
  padding:4px 10px;border-radius:20px;font:inherit;font-size:calc(11px * var(--fz));
  font-weight:700;border:1px solid var(--line);background:var(--panel2);
  color:var(--muted)}
.planchip:hover{border-color:var(--a);color:var(--txt)}
.planchip.hidden{display:none}
.plandot{width:7px;height:7px;border-radius:50%;background:var(--dim)}
.planchip.lv-lite{color:var(--txt);border-color:var(--a)}
.planchip.lv-lite .plandot{background:var(--a)}
.planchip.lv-full{color:var(--good);border-color:var(--good)}
.planchip.lv-full .plandot{background:var(--good)}
.planchip.trial{color:var(--warn,#d99b1e);border-color:var(--warn,#d99b1e)}
.planchip.trial .plandot{background:var(--warn,#d99b1e)}
.planleft{font-size:calc(10.5px * var(--fz));opacity:.85}

.planpop{position:absolute;right:14px;top:52px;z-index:60;width:min(520px,94vw);
  max-height:78vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);display:none}
.planpop.open{display:block}
.planhead{display:flex;justify-content:space-between;align-items:center;
  padding:11px 13px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--panel)}
.planbody{padding:13px}
.planstate{display:flex;gap:9px;align-items:center;margin-bottom:11px;flex-wrap:wrap}
.abadge.lite{background:var(--a);border-color:var(--a);color:#fff}
.planpend{margin-bottom:11px;padding:8px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel2)}
.planperks{display:flex;flex-direction:column;gap:7px;margin-bottom:13px}
.perk.small{padding:8px 10px}
.perk.small p{font-size:calc(12px * var(--fz));margin-top:2px}
.perkmark.lite{background:var(--a);color:#fff}
.perkmark.full{background:var(--good);color:#04231a}
.lvtag{font-size:calc(9.5px * var(--fz));font-weight:700;padding:1px 6px;border-radius:10px;
  margin-left:6px;vertical-align:middle}
.lvtag.lite{background:color-mix(in srgb,var(--a) 20%,transparent);color:var(--a)}
.lvtag.full{background:color-mix(in srgb,var(--good) 20%,transparent);color:var(--good)}
.tiergrid.compact{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tiergrid.compact .tiercard{padding:11px}
.tiergrid.compact .tierprice{font-size:calc(17px * var(--fz))}
.tiergrid.compact .tierline{min-height:26px;font-size:calc(10.5px * var(--fz))}

/* ============================================================
   АДМИН-ПАНЕЛЬ: карточки вместо таблицы
   ============================================================ */
.admtabs{display:flex;gap:5px;flex-wrap:wrap;padding:9px 11px 0}
.admtabs button{padding:5px 11px;border-radius:16px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);cursor:pointer;font:inherit;
  font-size:calc(11.5px * var(--fz));font-weight:600}
.admtabs button:hover{border-color:var(--a);color:var(--txt)}
.admtabs button.active{background:var(--a);border-color:var(--a);color:#fff}

.admlist{padding:10px 11px 12px;display:flex;flex-direction:column;gap:6px;
  max-height:520px;overflow:auto}
.admcard{display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel2);flex-wrap:wrap}
.admcard:hover{border-color:var(--a)}
.admcard.banned{opacity:.6;border-color:var(--bad)}
.admmain{min-width:0;flex:1}
.admname{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:calc(13.5px * var(--fz))}
.admmeta{margin-top:3px}
.admacts{display:flex;gap:5px;flex-wrap:wrap}

/* Префикс — короткая метка перед именем, как звание. */
.pfx{padding:1px 7px;border-radius:4px;font-size:calc(10.5px * var(--fz));font-weight:800;
  letter-spacing:.03em;border:1px solid transparent}
.pfx.c-muted{background:var(--panel);color:var(--muted);border-color:var(--line)}
.pfx.c-blue{background:color-mix(in srgb,var(--a) 22%,transparent);color:var(--a);
  border-color:color-mix(in srgb,var(--a) 45%,transparent)}
.pfx.c-green{background:color-mix(in srgb,var(--good) 20%,transparent);color:var(--good);
  border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.pfx.c-gold{background:rgba(217,155,30,.2);color:#d99b1e;border-color:rgba(217,155,30,.5)}
.pfx.c-red{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad);
  border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.pfx.c-purple{background:rgba(150,110,235,.2);color:#a78bfa;border-color:rgba(150,110,235,.5)}

.badge.rank{background:var(--panel);color:var(--muted)}
.badge.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.doton{width:7px;height:7px;border-radius:50%;background:var(--good);display:inline-block}

/* ============================================================
   ОФОРМЛЕНИЕ: глубина и акценты

   Прежний интерфейс был плоским и одноцветным: панели, шапка и кнопки
   отличались только рамкой. Здесь добавлены мягкие тени, подсветка
   активного и градиент на главных действиях — чтобы взгляд находил
   нужное, а не сканировал одинаковые прямоугольники.
   ============================================================ */

/* --- шапка: стекло вместо плоской заливки --- */
.top{
  height:auto;min-height:56px;padding:0 18px;
  background:color-mix(in srgb, var(--panel2) 86%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--sh-1);
}
.logo,.logotab{letter-spacing:.2em;font-weight:800}
.logotab.active{color:var(--txt)}

/* Активная вкладка получает подсветку, а не просто заливку. */
.nav button{padding:8px 13px;border-radius:var(--r);letter-spacing:.01em}
.nav button.active{
  background:linear-gradient(180deg,var(--a3),var(--a));
  box-shadow:0 3px 12px color-mix(in srgb,var(--a) 45%,transparent);
}

/* --- кнопки --- */
.btn{
  padding:7px 13px;border-radius:var(--r);box-shadow:var(--sh-1);
  transition:border-color var(--dur),background var(--dur),
             transform var(--dur),box-shadow var(--dur);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.primary{
  background:linear-gradient(180deg,var(--a3),var(--a));
  border-color:transparent;
  box-shadow:0 4px 14px color-mix(in srgb,var(--a) 40%,transparent);
}
.btn.primary:hover{
  background:linear-gradient(180deg,var(--a),var(--a2));
  box-shadow:0 6px 20px color-mix(in srgb,var(--a) 55%,transparent);
}
.btn.danger{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bad) 90%,#fff),var(--bad));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px color-mix(in srgb,var(--bad) 35%,transparent);
}
.btn.buyside,.btn.sellside{font-weight:700}

/* --- панели --- */
.panel{border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.panel:hover{box-shadow:var(--sh-2)}
.head{
  font-weight:700;letter-spacing:.01em;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--panel2) 70%,transparent), transparent);
}

/* --- таблицы: крупнее и просторнее --- */
.table th{
  letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  font-size:calc(10.5px * var(--fz));color:var(--dim);
}
.table td{padding:10px 12px}
.table tbody tr{transition:background var(--dur)}
.table tbody tr:hover{background:color-mix(in srgb,var(--a) 7%,transparent)}

/* --- поля ввода --- */
.input{border-radius:var(--r);transition:border-color var(--dur),box-shadow var(--dur)}
.input:focus{
  border-color:var(--a);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--a) 20%,transparent);
}

/* --- ключевые цифры крупнее: их читают чаще всего --- */
.big{font-size:calc(25px * var(--fz));font-weight:800;letter-spacing:-.02em}
.symbol{font-size:calc(22px * var(--fz))}
.symbolbar .last{font-size:calc(22px * var(--fz))}
.acctval{font-weight:800}

/* --- экран входа --- */
.authbox{
  border-radius:16px;box-shadow:var(--sh-3);
  padding:30px;
}
.authbox h1{
  font-size:calc(25px * var(--fz));letter-spacing:.04em;font-weight:800;
  background:linear-gradient(120deg,var(--txt),var(--a3));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.authfield input{padding:11px 13px;border-radius:var(--r)}
.authbtn{
  padding:12px;border-radius:var(--r);font-weight:700;
  font-size:calc(14px * var(--fz));
  background:linear-gradient(180deg,var(--a3),var(--a));color:#fff;border:0;
  box-shadow:0 6px 20px color-mix(in srgb,var(--a) 45%,transparent);
  transition:transform var(--dur),box-shadow var(--dur);
}
.authbtn:hover{transform:translateY(-1px);
  box-shadow:0 9px 26px color-mix(in srgb,var(--a) 60%,transparent)}
.authswitch button.active{
  background:linear-gradient(180deg,var(--a3),var(--a));color:#fff}

/* --- бейджи и переключатели --- */
.badge{border-radius:5px;letter-spacing:.02em}
.switch button.active,.tabs button.active,.tgroup button.active{
  background:linear-gradient(180deg,var(--a3),var(--a));color:#fff;
  border-color:transparent}

/* Плашка счёта в шапке — заметный, но не кричащий акцент. */
.acctbtn{border-radius:20px;box-shadow:var(--sh-1)}
.acctbtn:hover{border-color:var(--a)}

/* ============================================================
   ЛЕНТА: чат — новости — комментарии
   ============================================================ */
.newsgrid{display:grid;gap:11px;padding:11px;
  grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(240px,320px);
  align-items:start}
.newscol{display:flex;flex-direction:column;max-height:calc(100vh - 92px)}
.newscol .newswrap{overflow:auto}

.nwsearch{display:flex;gap:6px;padding:9px 10px 6px}
.nwsearch .input{flex:1;min-width:0}

.nwchips{display:flex;gap:5px;flex-wrap:wrap;padding:0 10px 8px}
.nwchip{padding:3px 9px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);cursor:pointer;
  font-size:calc(11px * var(--fz));font-weight:700}
.nwchip:hover{border-color:var(--a);color:var(--txt)}
.nwchip.active{background:var(--a);border-color:var(--a);color:#fff}

.nwchat,.nwcmts{flex:1;overflow:auto;padding:4px 10px 8px;min-height:220px}
.nwmsg{padding:7px 9px;border-radius:var(--r);margin-bottom:5px;
  background:var(--panel2);border:1px solid transparent}
.nwmsg.own{border-color:color-mix(in srgb,var(--a) 40%,transparent)}
.nwmsghead{display:flex;gap:7px;align-items:baseline}
.nwmsghead .msgdel{margin-left:auto}
.nwmsgtext{margin-top:2px;word-break:break-word;
  font-size:calc(12.5px * var(--fz));line-height:1.5}
.nwmsgtext mark{background:color-mix(in srgb,var(--a) 35%,transparent);
  color:var(--txt);border-radius:3px;padding:0 2px}

.nwcmttitle{padding:2px 11px 8px;font-weight:600;color:var(--txt);
  border-bottom:1px solid var(--line)}
.cmtbtn.active{background:var(--a);border-color:var(--a);color:#fff}

/* Карточка выбранной новости подсвечивается — видно, чьи комментарии
   показаны справа. */
.newscard{transition:border-color var(--dur),box-shadow var(--dur)}

@media (max-width:1240px){
  .newsgrid{grid-template-columns:minmax(220px,260px) minmax(0,1fr)}
  .newsgrid > .newscol:last-child{grid-column:1 / -1;max-height:420px}
}
@media (max-width:900px){
  .newsgrid{grid-template-columns:1fr}
  .newscol{max-height:none}
  .nwchat,.nwcmts{max-height:320px}
}

/* Палитра рисования: цвет виден сразу, без открытия окна. */
#drawColors{gap:3px;align-items:center}
.swatch{width:18px;height:18px;padding:0;border-radius:5px;cursor:pointer;
  border:2px solid transparent;background:var(--sw,#888);
  transition:transform var(--dur),border-color var(--dur)}
.swatch:hover{transform:scale(1.15)}
.swatch.active{border-color:var(--txt);box-shadow:0 0 0 2px var(--bg)}
.swatch.custom{position:relative;overflow:hidden;
  background:conic-gradient(#f04463,#ffb020,#16c98d,#22d3ee,#5b6ef5,#a78bfa,#f04463)}
.swatch.custom input{position:absolute;inset:-6px;width:200%;height:200%;
  opacity:0;cursor:pointer;border:0;padding:0}

/* ============================================================
   БАЗЫ ОФОРМЛЕНИЯ

   Это не цветовые темы, а разная подача одного и того же интерфейса:
   форма элементов, глубина и характер панелей меняются независимо от
   палитры. Комбинируются свободно.
   ============================================================ */

/* --- форма --- */
body.shape-sharp,.tcard.shape-sharp{--r:2px;--r-lg:3px}
body.shape-sharp .btn,body.shape-sharp .input,body.shape-sharp .panel,
body.shape-sharp .authbox,body.shape-sharp .badge{border-radius:2px}
body.shape-sharp .acctbtn,body.shape-sharp .planchip,
body.shape-sharp .nwchip,body.shape-sharp .admtabs button,
body.shape-sharp .tkchip{border-radius:3px}

body.shape-round,.tcard.shape-round{--r:12px;--r-lg:18px}
body.shape-round .btn,body.shape-round .input,
body.shape-round .authbtn{border-radius:999px}
body.shape-round .panel,body.shape-round .authbox{border-radius:20px}
body.shape-round .table th:first-child,
body.shape-round .table td:first-child{padding-left:16px}

/* --- глубина --- */
body.depth-flat,.tcard.depth-flat{--sh-1:none;--sh-2:none;--sh-3:none}
body.depth-flat .btn:hover{transform:none}
body.depth-flat .btn.primary,body.depth-flat .authbtn,
body.depth-flat .nav button.active{box-shadow:none}
body.depth-flat .panel:hover{box-shadow:none}

body.depth-strong{
  --sh-1:0 2px 6px rgba(0,0,0,.35);
  --sh-2:0 10px 30px rgba(0,0,0,.45);
  --sh-3:0 26px 70px rgba(0,0,0,.6);
}
body.depth-strong.light{
  --sh-1:0 2px 6px rgba(16,23,36,.10);
  --sh-2:0 10px 28px rgba(16,23,36,.16);
  --sh-3:0 26px 60px rgba(16,23,36,.22);
}
body.depth-strong .panel{border-color:transparent}

/* --- характер панелей --- */
body.chrome-glass .panel,body.chrome-glass .authbox,
body.chrome-glass .planpop,body.chrome-glass .acctpop{
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
body.chrome-glass .head{background:transparent}

body.chrome-outline .panel,body.chrome-outline .authbox{
  background:transparent;border-width:1px;box-shadow:none}
body.chrome-outline .head{background:transparent;
  border-bottom:1px solid var(--line)}
body.chrome-outline .btn{background:transparent}
body.chrome-outline .btn:hover{background:color-mix(in srgb,var(--a) 12%,transparent)}
body.chrome-outline .table tbody tr:hover{
  background:color-mix(in srgb,var(--a) 10%,transparent)}
body.chrome-outline .top{background:transparent;backdrop-filter:none;
  -webkit-backdrop-filter:none;box-shadow:none}

/* --- выбор акцентного цвета --- */
.accentrow{display:flex;gap:7px;align-items:center}
.accentpick{width:38px;height:28px;padding:0;border:1px solid var(--line);
  border-radius:var(--r);background:none;cursor:pointer}


/* ============================================================
   НАСТОЛЬНОЕ ПРИЛОЖЕНИЕ

   Системная полоса окна скрыта ради вида, поэтому окно нужно двигать
   за шапку самого интерфейса. Всё интерактивное внутри неё приходится
   возвращать обратно: перетаскиваемая область перехватывает клики.
   ============================================================ */
body.desktop .top{
  -webkit-app-region:drag;
  app-region:drag;
  /* Слева на macOS — кнопки окна; освобождаем под них место. */
  padding-left:var(--traffic, 18px);
}
body.desktop .top button,
body.desktop .top input,
body.desktop .top select,
body.desktop .top a,
body.desktop .top .acctbtn,
body.desktop .top .planchip,
body.desktop .top .nav{
  -webkit-app-region:no-drag;
  app-region:no-drag;
}

/* Полоска-подсказка: показывает, что за это место можно тянуть. */
body.desktop .top::after{
  content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:46px;height:4px;border-radius:3px;
  background:var(--line);opacity:.7;pointer-events:none;
}
body.desktop.mac .top{padding-top:6px}

/* Подсказка о режиме приложения — на экране входа, где и возникает
   вопрос, почему аккаунт с сайта не подходит. */
.desknote{margin-top:12px;padding:9px 11px;border-radius:var(--r);
  background:color-mix(in srgb,var(--warn,#d99b1e) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--warn,#d99b1e) 35%,transparent);
  color:var(--txt);line-height:1.5}
.desknote b{display:block;margin-bottom:2px}


/* ============================================================
   ТЕЛЕФОН: вкладки внизу

   В шапке телефона одновременно не помещаются логотип, ярлык
   подписки, счёт и «Выход» — навигация сжималась в ноль, и вкладки
   становились недоступны вовсе. Поэтому на узких экранах она
   переезжает вниз, как в обычном мобильном приложении: большая
   область нажатия и всегда под большим пальцем.
   ============================================================ */
@media (max-width: 820px){

  .nav{
    position:fixed;left:0;right:0;bottom:0;z-index:200;
    display:flex;gap:0;padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter:blur(16px) saturate(140%);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 20px rgba(0,0,0,.28);
    overflow-x:auto;scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}

  .nav button{
    flex:1 0 auto;min-width:74px;min-height:44px;   /* палец, не курсор */
    border-radius:10px;padding:7px 10px;
    font-size:calc(11.5px * var(--fz));font-weight:700;
  }
  .nav button.active{box-shadow:none}

  /* Шапка остаётся только для логотипа и счёта — им места хватает.

     backdrop-filter обязательно убрать: он создаёт для потомков свою
     систему координат, и вкладки с position:fixed прилипали к низу
     ШАПКИ, а не экрана. На телефоне размытие всё равно дорогое. */
  .top{gap:8px;backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--panel2)}
  .top .logo,.top .logotab{padding-right:0}

  /* Содержимое не должно прятаться под панелью вкладок. */
  main,.wrap{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  aside .panel:last-child{margin-bottom:0}

  /* Плавающие кнопки поднимаются над панелью. */
  .supportbtn{bottom:calc(66px + env(safe-area-inset-bottom))}
  .gamesbtn,.gamefab{bottom:calc(66px + env(safe-area-inset-bottom))}

  /* Всплывающие панели тоже — иначе их низ уезжает под вкладки. */
  .supportpanel{bottom:calc(112px + env(safe-area-inset-bottom))}
}

/* Совсем узкие экраны: подписи вкладок мельче, но остаются. */
@media (max-width: 420px){
  .nav button{min-width:64px;padding:6px 7px;
    font-size:calc(10.5px * var(--fz))}
  .planchip .planname{display:none}      /* остаётся точка и остаток */
  .acctbtn{max-width:38vw}
}


/* Панели на телефоне не ужимались: у флекс- и грид-элементов
   min-width по умолчанию auto, поэтому широкая панель инструментов
   графика растягивала всю карточку до 1074 px, и её просто обрезало
   краем экрана. Разрешаем содержимому сжиматься и прокручиваться. */
@media (max-width: 820px){
  .grid > *,
  .panel,
  .panel .head,
  .ctools,
  main section.page > *{min-width:0}

  .panel .head{flex-wrap:wrap;row-gap:6px}
  .ctools{flex:1 1 auto;width:100%}

  /* «Выход» в шапке не помещался и обрезался. Он и так есть в
     карточке счёта — здесь оставляем значок. */
  #logout{font-size:0;padding:7px 10px;min-width:36px}
  #logout::before{content:'⏻';font-size:calc(15px * var(--fz));line-height:1}
}


/* Остатки, вылезавшие за край телефона. */
@media (max-width: 820px){

  /* Лента: три колонки уже складываются в одну, но карточкам нужно
     разрешить сжиматься — иначе содержимое держит ширину. */
  .newsgrid > *,
  .newscol,
  .newswrap,
  .newscard,
  .newsbody{min-width:0;max-width:100%}
  .newscard{overflow:hidden}

  /* Таблицы шире экрана прокручиваются внутри своей карточки.
     Часть из них лежит без обёртки .scroll — оборачивать в разметке
     не нужно, достаточно дать прокрутку самой таблице, где бы она
     ни лежала. Исключение — те, что уже внутри .scroll: там прокрутка
     своя, и вторая мешала бы. */
  table.table{display:block;overflow-x:auto;
    -webkit-overflow-scrolling:touch;max-width:100%}
  .scroll table.table{display:table;overflow-x:visible}

  /* Ряды переключателей: переносим, а не обрезаем. */
  .setting{flex-wrap:wrap;row-gap:8px}
  .switch,.tgroup,.tabs{flex-wrap:wrap}

  /* Полоски вкладок внутри разделов (настройки, аналитика, боты,
     игры) шире экрана — им своя горизонтальная прокрутка, как у
     панели инструментов графика. */
  .settabs,.aitabs,.bottabs,.gptabs,.admtabs,.pktabs{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;max-width:100%}
  .settabs::-webkit-scrollbar,.aitabs::-webkit-scrollbar,
  .bottabs::-webkit-scrollbar,.gptabs::-webkit-scrollbar,
  .admtabs::-webkit-scrollbar,.pktabs::-webkit-scrollbar{display:none}
  .settabs>*,.aitabs>*,.bottabs>*,.gptabs>*,.admtabs>*,.pktabs>*{
    flex:0 0 auto;white-space:nowrap}

  /* Декоративное свечение на странице «О терминале» задавало ширину. */
  .aboutaura{max-width:100vw;overflow:hidden;pointer-events:none}
  .aboutwrap{overflow-x:hidden}
}

/* ============================================================
   ИМЯ ПОЛЬЗОВАТЕЛЯ: аватар слева, доход справа
   ============================================================ */
.apphead{display:flex;align-items:center;gap:9px}
.uav{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--a3),var(--a));color:#fff;
  font-size:calc(11.5px * var(--fz));font-weight:800;overflow:hidden}
.uav.img{background:none}
.uav img{width:100%;height:100%;object-fit:cover}
.uyield{margin-left:auto;font-family:var(--mono);font-weight:800;
  font-size:calc(12.5px * var(--fz))}

/* Сводка по брокерскому счёту в карточке счёта. */
.acctstats{padding:9px 12px;border-top:1px solid var(--line)}
.bshead,.bsrow{display:grid;grid-template-columns:1fr auto auto;
  gap:10px;align-items:baseline}
.bshead{padding-bottom:4px;border-bottom:1px solid var(--line);margin-bottom:5px}
.bsrow{padding:3px 0}
.bsrow .num{font-size:calc(12px * var(--fz))}
.bsline{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.bsline.outside{color:var(--warn);font-weight:600}
.table tr.ext td{background:color-mix(in srgb,var(--warn) 9%,transparent)}
.warn{color:var(--warn)}

/* ============================================================
   ЖИВОЕ ОФОРМЛЕНИЕ

   Движение здесь служит делу: подсказывает, что цифра обновилась,
   куда смотреть и что кнопка нажата. Всё отключается системной
   настройкой «уменьшить движение» — в торговом интерфейсе мельтешение
   мешает больше, чем помогает.
   ============================================================ */

/* Панели проявляются при первом показе страницы. */
@keyframes nx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.page.active .panel{animation:nx-rise .34s cubic-bezier(.2,.7,.2,1) both}
.page.active .panel:nth-child(2){animation-delay:.05s}
.page.active .panel:nth-child(3){animation-delay:.1s}
.page.active .panel:nth-child(4){animation-delay:.15s}

/* Пульс у живого показателя: видно, что данные идут, а не замерли. */
@keyframes nx-pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 45%,transparent)}
  50%{box-shadow:0 0 0 5px transparent}
}
.dot,.doton{animation:nx-pulse 2.4s ease-in-out infinite}

/* Кнопки: отклик на нажатие и мягкая волна на главных действиях. */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,
    color-mix(in srgb,#fff 26%,transparent) 50%,transparent 70%);
  transform:translateX(-120%);
}
.btn.primary:hover::after{animation:nx-sheen .75s ease}
@keyframes nx-sheen{to{transform:translateX(120%)}}

/* Смена цифры подсвечивается: взгляд сам находит изменившееся. */
@keyframes nx-flash-up{from{color:var(--good);text-shadow:0 0 12px
  color-mix(in srgb,var(--good) 55%,transparent)}to{}}
@keyframes nx-flash-dn{from{color:var(--bad);text-shadow:0 0 12px
  color-mix(in srgb,var(--bad) 55%,transparent)}to{}}
body.flash-on .flash-up{animation:nx-flash-up .7s ease}
body.flash-on .flash-dn{animation:nx-flash-dn .7s ease}

/* Строка таблицы под курсором слегка выезжает — понятно, где вы. */
.table tbody tr{transition:background var(--dur),transform var(--dur)}
.table tbody tr:hover{transform:translateX(2px)}

/* Вкладки: подчёркивание переезжает за активной. */
.nav button{position:relative}
.nav button::before{
  content:'';position:absolute;left:12px;right:12px;bottom:3px;height:2px;
  border-radius:2px;background:#fff;opacity:0;transform:scaleX(.3);
  transition:opacity var(--dur),transform var(--dur)}
.nav button.active::before{opacity:.85;transform:none}

/* Карточка тарифа приподнимается — выбор ощущается материальным. */
.tiercard{transition:transform var(--dur),box-shadow var(--dur),border-color var(--dur)}
.tiercard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}

/* Загрузка: полоска бежит, а не стоит. */
@keyframes nx-slide{from{background-position:0 0}to{background-position:40px 0}}
.btbar i{background-image:linear-gradient(115deg,
  color-mix(in srgb,#fff 22%,transparent) 25%,transparent 25%,
  transparent 50%,color-mix(in srgb,#fff 22%,transparent) 50%,
  color-mix(in srgb,#fff 22%,transparent) 75%,transparent 75%);
  background-size:40px 40px;animation:nx-slide .9s linear infinite}

@media (prefers-reduced-motion:reduce){
  .page.active .panel,.dot,.doton,.btbar i{animation:none}
  .btn.primary:hover::after{animation:none}
  .table tbody tr:hover{transform:none}
}

/* ============================================================
   КЛУБЫ, ПОСТЫ, ПРОСМОТР КАРТИНОК
   ============================================================ */

.clubcard{display:flex;gap:11px;align-items:center;padding:11px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);
  margin-bottom:7px;cursor:pointer;transition:border-color var(--dur),transform var(--dur)}
.clubcard:hover{border-color:var(--a);transform:translateX(2px)}
.clav{width:40px;height:40px;flex:0 0 40px;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-weight:800;
  background:linear-gradient(140deg,var(--a3),var(--a));color:#fff;
  font-size:calc(16px * var(--fz))}
.clav img{width:100%;height:100%;object-fit:cover}
.clmain{flex:1;min-width:0}
.clname{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Доходность клуба — справа от названия, как и просили. */
.clyield{font-family:var(--mono);font-weight:800;white-space:nowrap;
  font-size:calc(13px * var(--fz))}
.clyield.none{color:var(--dim)}

.clubhead{display:flex;gap:14px;justify-content:space-between;
  align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.clabout{margin:0;color:var(--muted);line-height:1.6;max-width:640px}
.clrules{margin-top:7px}
.clrules summary{cursor:pointer;color:var(--a);font-size:calc(12.5px * var(--fz))}
.clacts{display:flex;gap:7px;flex-wrap:wrap}

.clcols{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px;
  align-items:start}
.clside{border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel2);overflow:hidden}
.clside .head{padding:8px 11px}
.clmember{display:flex;gap:8px;align-items:center;padding:6px 11px;cursor:pointer}
.clmember:hover{background:var(--panel)}
.clmname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:calc(12.5px * var(--fz))}

/* --- посты --- */
.postform{border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel2);padding:9px;margin-bottom:11px}
.postform textarea{width:100%;resize:vertical}
.postrow{display:flex;gap:8px;align-items:center;margin-top:7px}
.postrow .postname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}

.post{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);padding:12px;margin-bottom:9px}
.posthead{display:flex;gap:9px;align-items:center}
.postwho{flex:1;min-width:0}
.posttext{margin-top:8px;line-height:1.6;word-break:break-word}

/* Картинка в посте не должна занимать весь экран. */
.postimg{margin-top:9px}
.postimg img{max-width:100%;max-height:340px;border-radius:var(--r);
  cursor:zoom-in;display:block}

.postcmts{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.pcmt{display:flex;gap:8px;padding:5px 0}
.pcmtbody{flex:1;min-width:0;word-break:break-word}
.pcmtimg img{max-width:220px;max-height:160px;border-radius:6px;
  margin-top:4px;cursor:zoom-in;display:block}
.pcmtform{display:flex;gap:6px;margin-top:7px}
.pcmtform .input{flex:1;min-width:0}
.pcmtform label.has{border-color:var(--good);color:var(--good)}

.profcard{display:flex;gap:13px;align-items:flex-start}
.profname{font-size:calc(15px * var(--fz))}

/* --- загрузки --- */
.dlrow{gap:10px}
.dlplat{font-weight:700;min-width:78px}
.dlnote{flex:1;min-width:0}
.dlhelp{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.dlhelp details{margin-bottom:7px}
.dlhelp summary{cursor:pointer;padding:4px 0}
.dlhelp ol{margin:5px 0 5px 18px;padding:0;color:var(--muted);
  font-size:calc(12.5px * var(--fz));line-height:1.7}
.dlhelp code{display:block;margin-top:4px;padding:5px 7px;border-radius:5px;
  background:var(--panel2);font-family:var(--mono);
  font-size:calc(11.5px * var(--fz));word-break:break-all}

/* --- просмотр картинки поверх интерфейса --- */
.imgview{position:fixed;inset:0;z-index:400;display:none;
  align-items:center;justify-content:center;padding:28px;
  background:rgba(0,0,0,.86);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)}
.imgview.open{display:flex}
.imgview img{max-width:100%;max-height:100%;border-radius:var(--r);
  box-shadow:var(--sh-3)}
.imgclose{position:absolute;top:14px;right:16px;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--line);background:var(--panel);
  color:var(--txt);font-size:16px;cursor:pointer}
.imgclose:hover{border-color:var(--a)}

/* Кнопка удаления сообщения появляется при наведении. */
.msghead{display:flex;gap:7px;align-items:baseline}
/* Кнопка удаления сообщения.

   Была opacity:0 с показом только по .msg:hover. На сенсорном экране
   наведения не существует, поэтому на телефоне и планшете кнопки не
   было видно вообще — ни автору для своего сообщения, ни админу для
   чужого. Отсюда «администратор не может удалять сообщения».

   Теперь она видна всегда, просто приглушена, а под курсором и на
   сенсорных устройствах — в полную силу. */
.msgdel{margin-left:auto;opacity:.45;transition:opacity var(--dur)}
.msg:hover .msgdel{opacity:.9}
.msgdel:hover,.msgdel:focus-visible{opacity:1;color:var(--bad)}

/* Палец толще курсора: на сенсорных устройствах и кнопка заметнее,
   и площадь нажатия больше — иначе в неё просто не попасть. */
body.dev-touch .msgdel{
  opacity:.8;
  padding:2px 6px;
  min-width:28px;
  min-height:28px;
}

@media (max-width:820px){
  .clcols{grid-template-columns:1fr}
}

/* ============================================================
   ЧАТ В ЛЕНТЕ: больше места, картинка знает своё место

   Колонка чата была узкой, а картинка в сообщении растягивалась на
   всю её высоту — переписку из-за одной фотографии было не прочитать.
   ============================================================ */
.newsgrid{grid-template-columns:minmax(300px,380px) minmax(0,1fr) minmax(260px,340px)}
.newscol{max-height:calc(100vh - 78px)}
.nwchat{min-height:340px}

/* Картинка в сообщении — превью, а не полотно. Открывается по клику
   поверх интерфейса. */
.nwmsg img,.msgimg img{max-width:100%;max-height:180px;width:auto;
  border-radius:6px;display:block;margin-top:5px;cursor:zoom-in;
  object-fit:cover}
.msgimg{display:inline-block;max-width:100%}

@media (max-width:1400px){
  .newsgrid{grid-template-columns:minmax(270px,330px) minmax(0,1fr) minmax(240px,300px)}
}

/* ============================================================
   ЭКОНОМИЯ БАТАРЕИ

   В оформлении два десятка бесконечных анимаций: свечения, бегущие
   блики, дышащие рамки. Пока на них смотрят — это оформление. Когда
   окно свёрнуто или ушло в другую вкладку, браузер продолжает их
   считать, и телефон греется впустую.

   Класс anim-hold вешается на <body> при уходе окна в фон и
   снимается при возврате. Не «выключить красоту», а не рисовать её
   тогда, когда её никто не видит.
   ============================================================ */
body.anim-hold *,
body.anim-hold *::before,
body.anim-hold *::after{
  animation-play-state:paused !important;
}

/* Осознанный выбор пользователя: «Оформление» → «Анимации».
   Полностью отключает движение — заметно экономит батарею на слабых
   устройствах и помогает тем, кому движение мешает читать. */
body.anim-off *,
body.anim-off *::before,
body.anim-off *::after{
  animation:none !important;
  transition:none !important;
}

/* Системная настройка «уменьшить движение» уважается сама по себе:
   человек уже сказал операционной системе, чего хочет. */
@media (prefers-reduced-motion: reduce){
  body.anim-auto *,
  body.anim-auto *::before,
  body.anim-auto *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ============================================================
   ЗАЯВКИ В ПАНЕЛИ ТОРГОВЛИ

   Отложенные, айсберг и журнал ордеров переехали сюда с отдельной
   страницы «Ордера»: смотреть на свои заявки, не видя позиций и
   стакана, смысла не было, а ради этого приходилось уходить со
   страницы торговли и возвращаться.
   ============================================================ */
.ordtabs{display:flex;gap:4px;flex-wrap:wrap}
.ordtabs button{
  background:none;border:0;color:var(--muted);
  padding:3px 9px;border-radius:7px;cursor:pointer;
  font:inherit;font-size:12px;white-space:nowrap;
  transition:background var(--dur),color var(--dur);
}
.ordtabs button:hover{color:var(--fg)}
.ordtabs button.active{background:var(--chip);color:var(--fg)}

/* Статистика счёта в портфеле. Карточки те же, что в подробном
   разборе сделок, — цифра читается одинаково в обоих местах. */
#pfStats .btcards{
  display:grid;gap:9px;margin-bottom:11px;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
}
#pfStats .btcard{
  background:var(--chip);border-radius:10px;padding:9px 11px;
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
#pfStats .btcard b{font-size:17px}
#pfStats .bsline{
  display:flex;justify-content:space-between;gap:10px;
  padding:5px 2px;border-top:1px solid var(--line);
}

/* ============================================================
   ДОПОЛНИТЕЛЬНЫЕ ОФОРМЛЕНИЯ

   Названия и палитры оригинальные. Логотипы, кадры и имена
   франшиз намеренно не используются: это чужие товарные знаки, а
   терминалу предстоит модерация в платёжных системах и магазинах
   приложений, где такое всплывает первым делом. Настроение
   узнаваемых визуальных языков передаётся цветом и свечением —
   этого достаточно.
   ============================================================ */

/* --- СТРОГИЕ И МИНИМАЛИСТИЧНЫЕ --- */

/* Графит: почти монохром, акцент только на числах. */
body.graphite,.tcard.graphite{--bg:#141414;--panel:#1c1c1c;--panel2:#232323;--line:#2f2f2f;
  --txt:#e8e8e8;--muted:#9a9a9a;--dim:#6b6b6b;--a:#d4d4d4;--a2:#a8a8a8;
  --good:#4ade80;--bad:#f87171}

/* Бумага-ночь: тёплый тёмный для долгого чтения, без синевы. */
body.sepia,.tcard.sepia{--bg:#191614;--panel:#211d1a;--panel2:#2a2521;--line:#3a332d;
  --txt:#ece4d8;--muted:#a89b8a;--dim:#786d5f;--a:#c9a227;--a2:#a5831c;
  --good:#5fa35f;--bad:#c1554a}

/* Сталь: холодный деловой минимализм, светлый. */
body.steel,.tcard.steel{--bg:#eef1f5;--panel:#ffffff;--panel2:#e4e9f0;--line:#cfd7e2;
  --txt:#161c26;--muted:#5a6478;--dim:#8d97a6;--a:#33507a;--a2:#253c5e;
  --good:#0f7a52;--bad:#b23a34}

/* --- ЖИВЫЕ И ЯРКИЕ --- */

/* Неон: ночной город, пурпур и бирюза. */
body.neon,.tcard.neon{--bg:#0a0713;--panel:#140d24;--panel2:#1d1333;--line:#2f2050;
  --txt:#f0e6ff;--muted:#a58fd0;--dim:#6f5c94;--a:#c026d3;--a2:#9333ea;
  --good:#22d3ee;--bad:#fb2576}
body.neon .panel{box-shadow:0 0 0 1px #ffffff08, 0 8px 30px #c026d31a}
body.neon .btn.primary,body.neon .bigbtn{
  box-shadow:0 0 18px color-mix(in srgb,var(--a) 45%,transparent)}

/* Пустошь: выжженный песок и ржавчина. */
body.wasteland,.tcard.wasteland{--bg:#17120d;--panel:#201913;--panel2:#2b211a;--line:#3d2f24;
  --txt:#f0e2cf;--muted:#b09371;--dim:#7c6650;--a:#e07a1f;--a2:#b85f12;
  --good:#8ba63f;--bad:#c4432b}

/* Глубокий космос: холодная синь и звёздный акцент. */
body.deepspace,.tcard.deepspace{--bg:#05070f;--panel:#0c1120;--panel2:#131a2e;--line:#1f2942;
  --txt:#dce6ff;--muted:#8296c4;--dim:#586a94;--a:#4f7cff;--a2:#3558d8;
  --good:#36d399;--bad:#f0507a}
body.deepspace .panel{box-shadow:inset 0 1px 0 #ffffff08}

/* Сакура: мягкий розовый сумрак, спокойный контраст. */
body.sakura,.tcard.sakura{--bg:#150f14;--panel:#1e161d;--panel2:#281d27;--line:#3a2b38;
  --txt:#f7e8f2;--muted:#c096b4;--dim:#8a6b82;--a:#ef7fae;--a2:#d15c8e;
  --good:#7ecf9a;--bad:#e05a72}

/* Изумруд: тёмная зелень, приглушённое золото. */
body.emerald,.tcard.emerald{--bg:#07130f;--panel:#0d1d17;--panel2:#12281f;--line:#1d3b2e;
  --txt:#dff5e9;--muted:#7fb39a;--dim:#548271;--a:#d4af37;--a2:#ab8c26;
  --good:#2ecc71;--bad:#e0555f}

/* Кровь и сталь: строгий тёмный с одним красным акцентом. */
body.crimson,.tcard.crimson{--bg:#0d0d0f;--panel:#151517;--panel2:#1d1d21;--line:#2b2b31;
  --txt:#ececed;--muted:#93939c;--dim:#63636c;--a:#dc2626;--a2:#b01c1c;
  --good:#4ade80;--bad:#dc2626}

/* ============================================================
   ГАЛЕРЕЯ ОФОРМЛЕНИЙ

   Карточка примера — маленький макет терминала: шапка, панель, две
   строки с числами вверх и вниз, кнопка. Ей присваивается класс самой
   темы, поэтому все цвета берутся из её переменных. Отдельной
   картинки нет, и превью не может разойтись с реальностью после
   правки палитры.
   ============================================================ */

/* Карточка «Тёмной» темы в галерее. Класса у базовой темы нет — она и
   есть основа, — поэтому без явного объявления карточка унаследовала
   бы цвета ТЕКУЩЕЙ темы и показывала бы неправду. */
.tcard.tdark{
  --bg:#080b11; --panel:#121826; --panel2:#0e131e; --line:#222c3e;
  --txt:#eaeff8; --muted:#8794a8; --dim:#5f6a80;
  --a:#5b6ef5; --a2:#3f51d6;
  --good:#16c98d; --bad:#f04463;
}
/* Ширину ограничиваем: на широком экране сетка растягивалась на всю
   строку, и четыре карточки группы «Классические» расползались по
   ряду из десяти пустых мест. */
.themegal{display:flex;flex-direction:column;gap:16px;max-width:880px}
.thgroup{display:flex;flex-direction:column;gap:7px}
.thtitle{text-transform:uppercase;letter-spacing:.08em}
.thgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}

.tcard{
  padding:0;border:2px solid var(--line);border-radius:12px;
  background:none;cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;gap:0;
  transition:border-color var(--dur),transform var(--dur);
}
.tcard:hover{transform:translateY(-2px);border-color:var(--dim)}
.tcard.active{border-color:var(--a)}

/* Внутренности примера красятся переменными ТЕМЫ КАРТОЧКИ: у .tcard
   висит её класс, поэтому var(--bg) здесь — фон именно той темы. */
/* Превью — холст. Никаких вложенных элементов: ломать нечего. */
.tprev{display:block;width:100%;height:74px}
.tp-top{display:block;height:13px;background:var(--panel2);
        border-bottom:1px solid var(--line);flex:none}
.tp-body{flex:1;padding:6px;display:flex;flex-direction:column;gap:4px;
         background:var(--bg)}
.tp-row{display:flex;gap:4px;align-items:center}
.tp-row i{display:block;height:6px;border-radius:3px}
.tp-row i.up{background:var(--good);flex:2}
.tp-row i.dn{background:var(--bad);flex:1}
.tp-btn{display:block;height:11px;width:52%;border-radius:5px;
        background:var(--a);margin-top:auto}

.tname{display:block;padding:6px 8px;font-size:calc(11.5px * var(--fz));
       text-align:center;background:var(--panel);color:var(--txt);
       border-top:1px solid var(--line);
       white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* У живой темы пример дышит — это её единственное отличие, и статичная
   карточка о нём не сказала бы. */
.tcard.livebg-on .tp-row i{animation:barRise 2.4s ease-in-out infinite alternate}
.tcard.livebg-on .tp-row:nth-child(2) i{animation-delay:.7s}

/* ============================================================
   ЖИВАЯ ТЕМА × СТИЛЬ ПАНЕЛЕЙ

   Настройки «стекло» и «контур» уменьшают или совсем убирают фон
   панели. На сплошном фоне это выглядит хорошо и ничему не мешает.
   Но живая тема — это бегущий график под панелями, и текст на нём
   оказывался буквально на движущейся картинке: в один кадр под
   буквой тёмная свеча, в следующий — яркая зелёная вспышка. Читать
   невозможно, и никакой подбор цвета текста этого не решает, потому
   что фон под ним непостоянен.

   Поэтому в живой теме у панели есть НИЖНИЙ ПРЕДЕЛ плотности.
   Селекторы с двумя классами специфичнее исходных, так что порядок
   правил роли не играет. Размытие остаётся — фон по-прежнему
   проступает, и тема не превращается в обычную тёмную.
   ============================================================ */
body.livebg-on.chrome-glass .panel,
body.livebg-on.chrome-glass .authbox,
body.livebg-on.chrome-glass .planpop,
body.livebg-on.chrome-glass .acctpop,
body.livebg-on.chrome-outline .panel,
body.livebg-on.chrome-outline .authbox{
  background:color-mix(in srgb,var(--panel) 82%,transparent);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
}

/* Шапка в контурном стиле тоже была прозрачной — а она поверх фона
   всегда, на любой странице. */
body.livebg-on.chrome-outline .top{
  background:color-mix(in srgb,var(--panel2) 88%,transparent);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* Заголовок панели: прозрачным он лежал на том же движущемся фоне. */
body.livebg-on.chrome-glass .head,
body.livebg-on.chrome-outline .head{
  background:color-mix(in srgb,var(--panel2) 55%,transparent);
}

/* ============================================================
   АНИМИРОВАННЫЕ ОФОРМЛЕНИЯ

   Живая тема была одна — бегущие котировки. Здесь ещё четыре сцены,
   каждая со своей палитрой. Класс livebg-on общий: он отвечает за
   читаемость поверх движущегося фона (плотность панелей, осветлённые
   приглушённые тона) и уже описан выше. Палитра ниже — это только
   цвета конкретной сцены.
   ============================================================ */

/* Звёздное поле — холодная синь, звёзды белые с акцентными вспышками. */
body.sc-stars,.tcard.sc-stars{
  --bg:#04060f;--panel:#0b1020;--panel2:#101728;--line:#1c2740;
  --txt:#e2eaff;--muted:#9fb0d8;--dim:#6b7ca4;--a:#7aa2ff;--a2:#5478d8;
  --good:#4fd6a8;--bad:#ff5f7e}

/* Неоновая сетка — ночной город: пурпур и бирюза. */
body.sc-grid,.tcard.sc-grid{
  --bg:#0a0616;--panel:#150e28;--panel2:#1d1436;--line:#332154;
  --txt:#f3e9ff;--muted:#bda3e0;--dim:#8570ab;--a:#c451ff;--a2:#9a2fe0;
  --good:#2ee6d6;--bad:#ff3d7f}

/* Цифровой поток — зелёный терминал. */
body.sc-rain,.tcard.sc-rain{
  --bg:#040d07;--panel:#08170e;--panel2:#0c2014;--line:#163a23;
  --txt:#d8ffe4;--muted:#8fd6a8;--dim:#5c9c72;--a:#2be06a;--a2:#1cb352;
  --good:#3dff85;--bad:#ff5b5b}

/* Лепестки — розовый сумрак. */
body.sc-petals,.tcard.sc-petals{
  --bg:#150d13;--panel:#1f151d;--panel2:#291d26;--line:#3d2b38;
  --txt:#fbeaf4;--muted:#cfa3bf;--dim:#96718a;--a:#f286b6;--a2:#d15f95;
  --good:#7fd8a4;--bad:#e8617a}

/* Превью анимированной темы должно быть видно, что оно анимированное:
   в карточке те же полосы, но они дышат. */
.tcard.sc-stars .tp-row i,
.tcard.sc-grid .tp-row i,
.tcard.sc-rain .tp-row i,
.tcard.sc-petals .tp-row i{
  animation:barRise 2.4s ease-in-out infinite alternate}
.tcard.sc-stars .tp-row:nth-child(2) i,
.tcard.sc-grid .tp-row:nth-child(2) i,
.tcard.sc-rain .tp-row:nth-child(2) i,
.tcard.sc-petals .tp-row:nth-child(2) i{animation-delay:.7s}

/* Результаты по закрытым сделкам в аналитике портфеля. */
.pfnote{padding:10px 12px;border:1px dashed var(--line);border-radius:10px}
.pfranks{display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.pfranks .pfrowline{display:flex;align-items:center;gap:8px;
  padding:5px 9px;border-radius:8px;background:var(--panel2)}
.pfranks .pfrowline .num{margin-left:auto}

/* ============================================================
   УЧАСТНИК В ЧАТЕ
   Слева аватар, затем ник (кликабельный — открывает профиль),
   справа подписка и доходность счёта.
   ============================================================ */
.msghead{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

.msgav{
  width:22px;height:22px;flex:none;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;cursor:pointer;overflow:hidden;
  transition:transform var(--dur);
}
.msgav:hover{transform:scale(1.12)}
.msgav.img{background:var(--panel2)}
.msgav img{width:100%;height:100%;object-fit:cover;display:block}

.msgnick{cursor:pointer;text-decoration:underline;
  text-decoration-color:transparent;transition:text-decoration-color var(--dur)}
.msgnick:hover{text-decoration-color:currentColor}

.msgtier{
  font-size:9px;font-weight:800;letter-spacing:.06em;
  padding:1px 5px;border-radius:5px;white-space:nowrap;
  background:var(--a);color:#fff;
}
.msgtier.lite{background:var(--panel2);color:var(--muted);
  border:1px solid var(--line)}

.msgyield{font-family:var(--mono);font-size:10.5px;font-weight:700;
  padding:1px 5px;border-radius:5px;background:var(--panel2)}
.msgyield.good{color:var(--good)}
.msgyield.bad{color:var(--bad)}

/* Время уезжает вправо, кнопка удаления — следом за ним. */
.msgtime{margin-left:auto}

/* Карточка профиля участника. */
.ucard{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.ucav{width:52px;height:52px;flex:none;border-radius:50%;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700}
.ucav img{width:100%;height:100%;object-fit:cover;display:block}
.ucbody{display:flex;flex-direction:column;gap:4px;min-width:0}
.ucbody b{font-size:calc(15px * var(--fz))}
.ucbio{white-space:pre-wrap}
.ucstats{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.ucstats>div{background:var(--chip);border-radius:9px;padding:8px 10px;
  display:flex;flex-direction:column;gap:2px}

/* Декоративный слой поверх интерфейса (ветви сакуры).
   Кликов не ловит, поэтому ничему не мешает. Ниже модалок и
   всплывающих карточек — они должны перекрывать украшение. */
.fxoverlay{position:fixed;inset:0;width:100%;height:100%;
  z-index:90;pointer-events:none;
  /* Приглушаем: слой лежит поверх интерфейса, и там, где ветвь всё же
     заходит на панель, текст обязан оставаться читаемым. */
  opacity:.42}

/* Прогноз движения свечами в аналитике. */
.fcchart{margin-top:11px;padding:9px 10px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel2)}
/* Высота увеличена: на 150 пикселях движение в пару процентов
   сплющивалось в прямую линию и выглядело боковиком, хотя прогноз
   говорил о росте. На мелком экране оставляем пониже. */
.fcchart canvas{width:100%;height:300px;display:block;margin:8px 0}
@media (max-width:640px){ .fcchart canvas{height:220px} }

/* ============================================================
   ЭКРАН «О ТЕРМИНАЛЕ» В ЖИВЫХ ОФОРМЛЕНИЯХ

   Здесь текста больше, чем где-либо ещё в терминале: описание
   тарифов, условия подписки, длинные пояснения. И лежит он не в
   панели, а прямо на странице — то есть на движущемся фоне.

   В обычных темах фон сплошной и это не мешает. В живых под буквами
   проезжает то ветка, то звезда, то бегущая строка: контраст скачет
   от кадра к кадру, и читать невозможно. Подбор цвета текста такое не
   лечит — фон под ним непостоянен.

   Поэтому под всей страницей своя подложка, а приглушённые тона
   осветлены. Фон при этом виден по краям и сквозь подложку, тема
   остаётся живой.
   ============================================================ */
body.livebg-on #about .aboutwrap{
  position:relative;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:16px;
  padding-left:22px;padding-right:22px;
}
body.livebg-on #about .aboutlead,
body.livebg-on #about .muted{color:#b9c3d4}
body.livebg-on #about .tiny.muted{color:#a9b4c7}

/* Карточки тарифов — самое важное на экране, им плотность выше. */
body.livebg-on #about .tiercard,
body.livebg-on #about .perk,
body.livebg-on #about .feeditem,
body.livebg-on #about .paynote{
  background:color-mix(in srgb,var(--panel) 90%,transparent);
}

/* ============================================================
   ТЕЛЕФОН: ЧТОБЫ НЕ ПРИХОДИЛОСЬ ПЕРЕВОРАЧИВАТЬ

   Главная беда была не в мелких деталях, а в том, что интерфейс не
   помещался по ширине: шапка обрезалась, таблицы выталкивали
   страницу вбок, и единственным выходом оставалось повернуть
   телефон.

   Правило здесь одно: страница НИКОГДА не прокручивается вбок.
   Широкое содержимое — таблицы, ряды кнопок — прокручивается внутри
   себя, а не тащит за собой весь экран.
   ============================================================ */
@media (max-width:560px){

  /* Страховка от бокового выезда: что бы ни случилось внутри,
     наружу это не выходит. */
  html,body{max-width:100%;overflow-x:hidden}

  /* --- шапка --- */
  .top{
    flex-wrap:wrap;gap:6px;padding:6px 8px;
    position:sticky;top:0;
  }
  .top .logo{font-size:calc(15px * var(--fz))}

  /* Навигация — отдельной строкой с прокруткой: восемь вкладок в
     одну строку на телефоне не влезут никогда. */
  .nav{
    order:3;width:100%;
    overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav button{flex:none;white-space:nowrap}

  /* Правый угол: подписи прячем, оставляем суть — счёт и меню. */
  .acct{margin-left:auto;gap:5px}
  #appsBtn{display:none}
  #logout{padding:5px 8px}
  .planchip .planname{display:none}

  /* --- таблицы --- */
  /* Прокручиваются внутри себя. Раньше они распирали страницу, и
     край таблицы уезжал за экран без всякого признака, что он там. */
  .panel > table.table,
  .panel > .scroll{
    display:block;width:100%;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  .table th,.table td{white-space:nowrap}

  /* --- график --- */
  .chartwrap{height:min(52vh,340px)}
  .ctools{gap:5px}
  .tgroup button{padding:4px 7px}

  /* --- формы и кнопки --- */
  .form{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .setting{flex-direction:column;align-items:flex-start;gap:8px}
  .setting .switch{width:100%;overflow-x:auto}

  /* Панель ордера и счёта — во всю ширину, без остатка. */
  .grid{grid-template-columns:1fr}
  .side{width:100%}
}

/* Совсем узкие экраны: ещё плотнее. */
@media (max-width:380px){
  .cards{grid-template-columns:1fr}
  .top .logo{font-size:calc(13px * var(--fz))}
}

/* Адреса подключения в карточке пользователя. Строка вместо мелкой
   пары «число · дата»: администратору нужно видеть, откуда человек
   заходил и откуда он на связи сейчас. */
.iprow{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  padding:7px 9px;margin-bottom:5px;border-radius:8px;
  background:var(--panel2);border:1px solid transparent;
}
.iprow.live{border-color:var(--good);
  background:color-mix(in srgb,var(--good) 10%,var(--panel2))}
.ipaddr{display:flex;align-items:center;gap:7px;min-width:118px}
.ipnow{
  font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:1px 6px;border-radius:5px;background:var(--good);color:#04231a;
}

/* ============================================================
   КАЛЬКУЛЯТОР В АНАЛИТИКЕ
   ============================================================ */
.clswitch{margin-bottom:12px;flex-wrap:wrap}
.clbody{display:flex;flex-direction:column;gap:12px}

.clgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.clfield{display:flex;flex-direction:column;gap:4px}
.clfield > span{font-size:calc(12px * var(--fz));font-weight:600}
.clfield > span i{font-style:normal;font-weight:400}
.clfield input{
  padding:9px 11px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);font:inherit;
  font-variant-numeric:tabular-nums;width:100%;
}
.clfield input:focus{outline:0;border-color:var(--a)}
.clfield em{font-style:normal;line-height:1.35}

.clcards{display:grid;gap:9px;margin:4px 0 12px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.clcard{background:var(--chip,var(--panel2));border-radius:10px;padding:9px 11px;
  display:flex;flex-direction:column;gap:2px;min-width:0}
.clcard b{font-size:calc(17px * var(--fz))}

.clchart{width:100%;height:190px;display:block;margin:0 0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2)}

.cltable th,.cltable td{white-space:nowrap}

.clwarn{
  padding:10px 12px;border-radius:var(--r);margin-top:10px;
  border-left:3px solid var(--bad);
  background:color-mix(in srgb,var(--bad) 10%,var(--panel2));
}

@media (max-width:560px){
  .clgrid{grid-template-columns:1fr 1fr}
  .clcards{grid-template-columns:1fr 1fr}
}

/* ============================================================
   ПОХОЖИЕ МОМЕНТЫ В ИСТОРИИ
   ============================================================ */
.anhead{display:flex;justify-content:space-between;gap:14px;
  align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.anhead > div:first-child{max-width:560px}
.anctl{display:flex;gap:9px;flex:none}
.anctl label{display:flex;flex-direction:column;gap:3px}
.anctl select{
  padding:6px 9px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);font:inherit;font-size:12.5px;
}
.anempty{padding:14px;border:1px dashed var(--line);border-radius:10px}

.anverdict{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel2);margin-bottom:10px;
}
.anbig{font-size:calc(24px * var(--fz));font-weight:800;white-space:nowrap}
.anqual{margin-left:auto}

.anwarn{
  padding:9px 12px;border-radius:10px;margin-bottom:10px;
  border-left:3px solid var(--warn,#e0a72a);
  background:color-mix(in srgb,var(--warn,#e0a72a) 10%,var(--panel2));
}

.angrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.ancard{
  border:1px solid var(--line);border-radius:10px;
  background:var(--panel2);padding:9px 10px;
  display:flex;flex-direction:column;gap:5px;min-width:0;
}
.anrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.anchart{width:100%;height:84px;display:block}

@media (max-width:560px){
  .angrid{grid-template-columns:1fr}
  .anctl{width:100%}
  .anctl label{flex:1}
  .anctl select{width:100%}
}

/* ============================================================
   ЖИВЫЕ ОФОРМЛЕНИЯ: ПЛОТНОСТЬ ТАМ, ГДЕ ЧИТАЮТ

   Полупрозрачность уместна на торговом экране: там крупные цифры,
   и сквозь панель видно фон — это и есть смысл живой темы.

   Но есть поверхности, где читают ПЛОТНЫЙ текст: настройки,
   выбор инструмента, модальные окна, всплывающие карточки. Там
   прозрачность ничего не даёт и только мешает — под мелкими
   подписями проезжает фон, и разобрать их тяжело. Такие
   поверхности делаем практически непрозрачными.
   ============================================================ */

/* Модальные окна и выбор инструмента. Диалог по определению
   перекрывает всё остальное — сквозь него смотреть незачем. */
body.livebg-on .modal,
body.livebg-on .modalbox,
body.livebg-on .acctpop,
body.livebg-on .planpop{
  background:var(--panel);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

/* Страница настроек: сплошной текст с мелкими пояснениями. */
body.livebg-on #settings .panel,
body.livebg-on #settings .setpane,
body.livebg-on #profile .panel,
body.livebg-on #admin .panel{
  background:color-mix(in srgb,var(--panel) 96%,transparent);
}

/* Поля ввода и списки внутри — тоже плотные: полупрозрачное поле
   с текстом поверх движущегося фона читается хуже всего. */
body.livebg-on .input,
body.livebg-on .clfield input,
body.livebg-on .anctl select,
body.livebg-on .pktabs,
body.livebg-on .pkrow{
  background:var(--panel2);
}

/* ---------- режим анализа ----------
   Переключатель стоит над таймфреймом и объясняет себя подписью:
   без неё «Скальпинг / Внутри дня / Инвестиции» выглядят как фильтр
   инструментов, а не как настройка глубины анализа. */
.anamode{margin:0 0 8px}
.anamode .amlabel{letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.anamode .amrow{display:inline-flex;flex-wrap:wrap}
.anamode .amhint{margin-top:5px;line-height:1.35;max-width:60ch}

/* Нижний ряд инструментов рисования упирался в край панели —
   добавляем воздух, чтобы последняя кнопка не выглядела обрезанной. */
.tpbody{padding-bottom:22px}

/* ---------- карта дня ----------
   Плитка одинакового размера: карта читается как карта только когда
   размер ячейки ничего не значит и остаётся один сигнал — цвет.

   Внутри три строки, и порядок в них не случаен: тикер отвечает «что»,
   процент — «куда», цена — «где». Первое читается издалека, третье
   нужно, только когда взгляд уже остановился, поэтому оно и мельче. */
.heatgrid{display:grid;gap:6px;padding:12px 14px 16px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.heatcell{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;gap:1px;padding:8px 10px 7px;
  border-radius:9px;cursor:pointer;text-align:left;
  border:1px solid var(--line);color:var(--txt);overflow:hidden;
  transition:transform .12s var(--ease),border-color .12s var(--ease),
             box-shadow .12s var(--ease)}
.heatcell:hover{transform:translateY(-1px);box-shadow:0 6px 18px #00000038}
.heatcell.up:hover{border-color:color-mix(in srgb,var(--good) 70%,transparent)}
.heatcell.dn:hover{border-color:color-mix(in srgb,var(--bad) 70%,transparent)}

/* Тонкая полоса слева повторяет знак цветом при любой насыщенности
   фона: у изменения в сотые доли фон почти прозрачный, и без полосы
   плитка выглядела бы бесцветной. */
.heatcell::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px}
.heatcell.up::before{background:var(--good)}
.heatcell.dn::before{background:var(--bad)}

.heatcell .ht{font-size:calc(11.5px * var(--fz));font-weight:700;
  letter-spacing:.02em;line-height:1.25}
.heatcell .hp{font-size:calc(12px * var(--fz));font-weight:600;line-height:1.2}
.heatcell.up .hp{color:var(--good)}
.heatcell.dn .hp{color:var(--bad)}
.heatcell .hv{font-size:calc(10px * var(--fz));line-height:1.2}
.heatcell .hg{position:absolute;right:7px;top:6px;
  font-size:calc(8.5px * var(--fz));letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}

.heatempty{padding:14px;line-height:1.4}
@media (max-width:560px){
  .heatgrid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:5px}
  .heatcell .hg{display:none}
}

body.scalper #submitOrder{padding:16px 12px;font-size:calc(15px * var(--fz));
  letter-spacing:.06em}
body.scalper .trade .tabs button{padding:9px 10px;font-size:calc(12.5px * var(--fz))}
body.scalper .table td,body.scalper .table th{padding:4px 8px;
  font-size:calc(11px * var(--fz))}
body.scalper .tape{font-size:calc(10.5px * var(--fz))}
body.scalper .book td{padding:2px 7px}

/* Между сделками это читают, во время — нет. */
body.scalper #heatPanel,
body.scalper #txPanel,
body.scalper #myTradesPanel{display:none}

/* Освободившуюся высоту забирает график: ради неё всё и затевалось. */
body.scalper .chartwrap{height:min(64vh,620px)}

/* ---------- карточка паттерна на графике ----------
   Та же вёрстка, что в справочнике, но поверх холста: угол, ширина
   под чтение, и обязательно непрозрачный фон — сквозь свечи текст
   не читается ни в одной теме. */
.patcard{position:absolute;left:8px;top:8px;z-index:6;
  width:min(300px,52%);max-height:calc(100% - 16px);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 11px;box-shadow:0 14px 40px #00000066;
  pointer-events:none}
body.livebg-on .patcard{background:var(--panel);backdrop-filter:none}
.patcard .galtiphead{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.patcard .galsec{margin-top:6px;line-height:1.35;font-size:calc(11px * var(--fz))}
.patsep{height:1px;background:var(--line);margin:9px 0}
.patmore{margin-top:7px}

/* ---------- скальперская аналитика ---------- */
.scan{padding:10px 12px;border-top:1px solid var(--line)}
.schead{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:5px}
.scwhy{margin-bottom:7px;line-height:1.35}
.scgrid{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.sccell{display:flex;flex-direction:column;gap:1px;padding:6px 8px;
  border-radius:7px;background:var(--panel2);border:1px solid var(--line)}
.sccell b{font-size:calc(12px * var(--fz))}

/* Две кнопки входа: между ними воздух, чтобы промах по одной не
   оказался сделкой в другую сторону. */
body.scalper #submitSell{margin-top:8px}
.ipnote{margin-left:6px;font-style:italic}

/* ---------- прогноз по срокам ---------- */
.hztable td{vertical-align:top}
.hztable td:first-child{white-space:nowrap}
.hznote{margin-top:8px;line-height:1.4}

/* Скальперский пульт: те же блоки, что в аналитике, но компактнее —
   на торговом экране место дороже. */
#scDash .recbox{padding:8px 10px}
#scDash .recverdict{font-size:calc(17px * var(--fz))}
#scDash .recgrid,#scDash .reccell{gap:5px}
#scDash .reccell{padding:6px 8px}
#scDash .recnote{display:none}

/* ---------- лестница стакана ----------
   Настоящий биржевой стакан: непрерывный столбик цен, продажи сверху,
   покупки снизу, цена справа, объём слева от неё.

   Три вещи, без которых это не стакан, а таблица:
     * полоса объёма — размер заявки видно формой, а не чтением числа;
     * моноширинные цифры — иначе цена дёргается по горизонтали при
       каждом обновлении и в строку не попасть;
     * неподвижные строки — сетка цен не перестраивается, меняются
       только объёмы внутри неё, поэтому изменения читаются как
       движение, а не как новый экран.
*/
.ladder{display:flex;flex-direction:column;max-height:440px}
.ldtop{display:flex;justify-content:space-between;padding:3px 9px;
  border-bottom:1px solid var(--line);letter-spacing:.05em;
  text-transform:uppercase;flex:0 0 auto;font-size:calc(9.5px * var(--fz))}
.ldrows{overflow:auto;flex:1 1 auto;position:relative}
.ldfoot{display:flex;align-items:center;justify-content:space-between;
  padding:4px 9px;border-top:1px solid var(--line);background:var(--panel2);
  flex:0 0 auto}

.ldrow{position:relative;display:flex;align-items:center;
  justify-content:flex-end;gap:10px;padding:0 9px;cursor:pointer;
  font-variant-numeric:tabular-nums;font-family:var(--mono,ui-monospace,monospace);
  font-size:calc(11px * var(--fz));line-height:1.6;
  border-top:1px solid transparent}
.ldrow:hover{outline:1px solid var(--a);outline-offset:-1px;z-index:2}
.ldrow.empty{cursor:default}

/* Полоса объёма растёт справа налево, от столбика цен. Ширина меняется
   плавно: заявки в стакане появляются и снимаются постоянно, и переход
   показывает это движением — видно, что плотность нарастает, а не
   просто «было одно число, стало другое». */
.ldbar{position:absolute;top:0;bottom:0;right:64px;pointer-events:none;
  border-radius:2px 0 0 2px;width:0;
  transition:width .16s linear, background-color .16s linear}
.ldrow.ask .ldbar{background:color-mix(in srgb,var(--bad) 42%,transparent)}
.ldrow.bid .ldbar{background:color-mix(in srgb,var(--good) 42%,transparent)}

/* Свежее изменение объёма подсвечивается на мгновение: именно это
   и значит «заявки летят» — глаз ловит, где сейчас идёт работа. */
@keyframes ldflash{from{background:color-mix(in srgb,var(--txt) 26%,transparent)}to{background:transparent}}
.ldrow.hit::after{content:'';position:absolute;inset:0;pointer-events:none;
  animation:ldflash .35s ease-out}

.ldq{position:relative;color:var(--txt);flex:1 1 auto;text-align:right;
  white-space:nowrap;overflow:hidden}
.ldp{position:relative;font-weight:600;width:64px;text-align:right;flex:0 0 auto}
.ldrow.ask .ldp{color:var(--bad)}
.ldrow.bid .ldp{color:var(--good)}
.ldrow.empty .ldq{color:transparent}
.ldrow.empty .ldp{opacity:.42}

/* Лучшие цены — единственная опора для глаза в длинном столбике. */
.ldrow.best{background:color-mix(in srgb,var(--txt) 9%,transparent)}
.ldrow.best .ldp,.ldrow.best .ldq{font-weight:700}
.ldrow.best.ask{border-top:1px solid color-mix(in srgb,var(--bad) 55%,transparent)}
.ldrow.best.bid{border-top:1px solid color-mix(in srgb,var(--good) 55%,transparent)}

/* ПРОФИЛЬ ГЛУБИНЫ: под полосой уровня — ступенчатый силуэт того,
   сколько всего заявок стоит между рынком и этой ценой. Силуэт бледнее
   полосы и лежит слоем ниже: он отвечает на вопрос «где стена», а
   полоса — «сколько прямо здесь», и путать их нельзя. */
.ldcum{position:absolute;top:0;bottom:0;right:64px;pointer-events:none;
  width:0;transition:width .18s linear}
/* Ступеньку рисует не заливка, а её левый край: без этой черты
   накопленный объём сливается с полосой уровня в одно пятно, и
   лестница перестаёт читаться лестницей. */
.ladder.depth .ldcum{border-left:1px solid}
.ladder.depth .ldrow.ask .ldcum{border-color:color-mix(in srgb,var(--bad) 85%,transparent)}
.ladder.depth .ldrow.bid .ldcum{border-color:color-mix(in srgb,var(--good) 85%,transparent)}
.ladder.depth .ldrow.ask .ldcum{background:color-mix(in srgb,var(--bad) 14%,transparent)}
.ladder.depth .ldrow.bid .ldcum{background:color-mix(in srgb,var(--good) 14%,transparent)}
.ladder.depth .ldrow.ask .ldbar{background:color-mix(in srgb,var(--bad) 75%,transparent)}
.ladder.depth .ldrow.bid .ldbar{background:color-mix(in srgb,var(--good) 75%,transparent)}
/* Полоса уровня в профиле — тонкая и прижата к столбику цен, чтобы
   не сливаться со ступенькой позади. */
.ladder.depth .ldbar{top:2px;bottom:2px;border-radius:2px}

/* ТЕПЛОВОЙ: объём — заливка строки во всю высоту, числа сжаты.
   Скопления видно пятном, не вчитываясь. */
.ladder.heat .ldrow{line-height:1.5}
.ladder.heat .ldbar{top:0;bottom:0;border-radius:0}
.ladder.heat .ldrow.ask .ldbar{background:color-mix(in srgb,var(--bad) 44%,transparent)}
.ladder.heat .ldrow.bid .ldbar{background:color-mix(in srgb,var(--good) 44%,transparent)}
.ladder.heat .ldq{color:var(--txt);opacity:.8;font-size:calc(10px * var(--fz))}
.ladder.heat .ldp{font-weight:700}

/* Линейка теплового вида: отметка и расстояние до неё. */
.ldruler{position:relative;flex:0 0 auto;color:var(--muted);
  min-width:48px;text-align:right;font-size:calc(9.5px * var(--fz))}
.ladder:not(.heat) .ldruler{display:none}
.ldrow.anchor{outline:1px dashed var(--a);outline-offset:-1px;z-index:2}
.ldrow.anchor .ldruler{color:var(--a);font-weight:700}
.ldhint{padding:4px 9px;border-top:1px solid var(--line);flex:0 0 auto}

/* В режиме скальпера строки плотнее: рабочая глубина помещается
   на экран целиком, без прокрутки. */
body.scalper .ldrow{line-height:1.4}
body.scalper .ladder{max-height:min(62vh,620px)}


/* ============================================================
   РАСКЛАДКИ ТОРГОВОГО ЭКРАНА

   Панели остаются на своих местах в разметке — двигает их только
   сетка. Промежуточные обёртки на время раскладки объявляются
   display:contents, панели становятся ячейками общей сетки и
   расставляются по именам областей. Разметка при этом неподвижна,
   и весь код, который находит элементы по идентификаторам, работает
   как работал.

   Главное правило, без которого всё это разваливается: сетка имеет
   ФИКСИРОВАННУЮ высоту в экран, ряды заданы долями, а содержимое
   прокручивается ВНУТРИ панелей. Первая версия задавала ряды по
   содержимому — и панель с длинной таблицей растягивала строку на два
   экрана, а соседние панели растягивались вместе с ней и оказывались
   пустыми полосами. Терминал так не собирают: у него высота задана
   экраном, а не данными.

   Всё это включается только шире 1180 px. Уже этого колонок не хватает
   ни одной раскладке, и страница возвращается к обычной вертикальной
   ленте — той же, что на телефоне.
   ============================================================ */
@media (min-width:1180px){

  body[class*="lay-"]:not(.lay-classic) .grid > #colMain,
  body[class*="lay-"]:not(.lay-classic) .grid > .side{ display:contents }

  body[class*="lay-"]:not(.lay-classic) .grid{
    /* Высота экрана минус шапка и строка инструмента. Значение
       считает приложение и кладёт в --tradeTop: подобрать его в CSS
       нельзя, шапка меняет высоту от масштаба интерфейса. */
    height:calc(100vh - var(--tradeTop, 150px));
    align-items:stretch;
    padding-bottom:2px;
  }

  /* Панель в сетке: заголовок неподвижен, содержимое прокручивается.
     Без этого длинная таблица распирает ячейку изнутри. */
  body[class*="lay-"]:not(.lay-classic) .grid > .panel{
    margin:0;min-height:0;min-width:0;
    display:flex;flex-direction:column;overflow:hidden}
  body[class*="lay-"]:not(.lay-classic) .grid > .panel > .head{flex:0 0 auto}
  body[class*="lay-"]:not(.lay-classic) .grid > .panel > *:not(.head){
    min-height:0;overflow:auto}
  body[class*="lay-"]:not(.lay-classic) .grid > .panel > .scroll,
  body[class*="lay-"]:not(.lay-classic) .grid > .panel > table,
  body[class*="lay-"]:not(.lay-classic) .grid > .panel > .book,
  body[class*="lay-"]:not(.lay-classic) .grid > .panel > .tape,
  body[class*="lay-"]:not(.lay-classic) .grid > .panel > .trade,
  body[class*="lay-"]:not(.lay-classic) .grid > .panel > .alertlist,
  body[class*="lay-"]:not(.lay-classic) .grid > .panel > .heatgrid,
  body[class*="lay-"]:not(.lay-classic) .grid > .panel > .sumgrid{
    flex:1 1 auto;min-height:0;overflow:auto}

  /* График занимает всю ячейку, а не свои 460 px.

     Холст переводится в абсолютное позиционирование, и это не
     украшательство: у него height:100%, а у растянутой флексом
     обёртки высота auto — процент от auto равен нулю, и график
     оказывался пустым прямоугольником. Абсолютные края дают ему
     настоящие пиксели независимо от способа, которым посчитана
     высота обёртки. */
  body[class*="lay-"]:not(.lay-classic) #pnChart{overflow:hidden}
  body[class*="lay-"]:not(.lay-classic) #pnChart > .ctools,
  body[class*="lay-"]:not(.lay-classic) #pnChart > .head{flex:0 0 auto}
  /* Обёртка и холст — оба флексы.

     Ни проценты, ни absolute тут не годятся. height:100% от обёртки
     с height:auto равен нулю — график был пустым прямоугольником.
     А у absolute-холста width:auto берётся из АТРИБУТА canvas, куда
     код пишет ширину в пикселях устройства, — холст раздувало вдвое.
     Флекс задаёт замещаемому элементу настоящий размер и не зависит
     ни от того, ни от другого. */
  body[class*="lay-"]:not(.lay-classic) #pnChart .chartwrap,
  body[class*="lay-"]:not(.lay-classic) .mccell .chartwrap{
    flex:1 1 0;min-height:0;overflow:hidden;position:relative}
  /* Высоту обёртке проставляет приложение в пикселях (fitChartWraps):
     от неё зависит height:100% холста, а флекс замещаемому элементу
     определённой высоты не даёт. */
  body[class*="lay-"]:not(.lay-classic) #pnChart .chartwrap > canvas,
  body[class*="lay-"]:not(.lay-classic) .mccell .chartwrap > canvas{
    width:100%;height:100%;display:block}

  /* Лестница стакана распрямляется на всю доступную высоту. */
  body[class*="lay-"]:not(.lay-classic) #pnBook .book{max-height:none;height:100%}
  body[class*="lay-"]:not(.lay-classic) #pnBook .ladder{
    max-height:none;height:100%}

  /* Панели, которым в раскладке места не нашлось, не исчезают
     насовсем: они уезжают под сетку обычной лентой, как раньше. */
  body[class*="lay-"]:not(.lay-classic) .grid > .panel.tucked{
    display:none}

  /* ---------- 01 · три колонки ---------- */
  .lay-cols3 .grid{
    grid-template-columns:270px minmax(0,1fr) 330px;
    grid-template-rows:minmax(0,2.1fr) minmax(0,1fr);
    grid-template-areas:
      "acct chart book"
      "pos  chart order"}
  .lay-cols3 #pnAccount{grid-area:acct}
  .lay-cols3 #pnPositions{grid-area:pos}
  .lay-cols3 #pnChart{grid-area:chart}
  .lay-cols3 #pnBook{grid-area:book}
  .lay-cols3 #pnOrder{grid-area:order}

  /* ---------- 02 · стакан в центре ---------- */
  .lay-dom .grid{
    grid-template-columns:minmax(0,1.35fr) 290px minmax(0,.95fr);
    grid-template-rows:minmax(0,1.6fr) minmax(0,1fr);
    grid-template-areas:
      "chart book tape"
      "pos   book order"}
  .lay-dom #pnChart{grid-area:chart}
  .lay-dom #pnBook{grid-area:book}
  .lay-dom #pnTape{grid-area:tape}
  .lay-dom #pnPositions{grid-area:pos}
  .lay-dom #pnOrder{grid-area:order}

  /* ---------- 03 · сетка графиков ---------- */
  .lay-multi .grid{
    grid-template-columns:minmax(0,1fr) 310px;
    grid-template-rows:minmax(0,1.9fr) minmax(0,1fr);
    grid-template-areas:
      "charts book"
      "pos    order"}
  .lay-multi #mcGrid{grid-area:charts;display:grid;
    grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;
    min-height:0;min-width:0}
  .lay-multi #pnChart{display:none}
  .lay-multi #pnBook{grid-area:book}
  .lay-multi #pnOrder{grid-area:order}
  .lay-multi #pnPositions{grid-area:pos}

  /* ---------- 04 · аналитический ---------- */
  .lay-analyst .grid{
    grid-template-columns:minmax(0,1fr) 320px;
    /* Пульту нужна высота: в нём две строки карточек и полоса
       согласия индикаторов, и в узкой полосе он складывается
       в нечитаемый столбик. */
    grid-template-rows:minmax(0,1.15fr) minmax(260px,1fr) minmax(0,.7fr);
    grid-template-areas:
      "chart order"
      "dash  order"
      "heat  pos"}
  .lay-analyst #pnChart{grid-area:chart}
  .lay-analyst #pnOrder{grid-area:order}
  .lay-analyst #pnPositions{grid-area:pos}
  .lay-analyst #heatPanel{grid-area:heat}
  .lay-analyst #scDash{grid-area:dash;display:flex!important}

  /* ---------- 05 · один экран ---------- */
  .lay-compact .grid{
    grid-template-columns:minmax(0,1fr) 320px;
    grid-template-rows:minmax(0,1fr) minmax(0,.46fr);
    grid-template-areas:
      "chart book"
      "pos   order"}
  .lay-compact #pnChart{grid-area:chart}
  .lay-compact #pnBook{grid-area:book}
  .lay-compact #pnOrder{grid-area:order}
  .lay-compact #pnPositions{grid-area:pos}
}

/* ---------- ячейки сетки графиков ---------- */
.mccell{display:flex;flex-direction:column;min-height:0;min-width:0;margin:0;
  overflow:hidden}
.mccell .head{padding:4px 8px;gap:8px;flex:0 0 auto}
.mccell .chartwrap{flex:1 1 auto;height:auto;min-height:0;padding:3px}
.mccell .mcpick{font-weight:700;letter-spacing:.02em}
.mccell .mctf button{padding:1px 5px;font-size:calc(9.5px * var(--fz))}
/* Активная ячейка — та, чей инструмент сейчас в стакане и в заявке.
   Без отметки легко купить не ту бумагу. */
.mccell.active{border-color:var(--a);box-shadow:0 0 0 1px var(--a) inset}
.mccell.empty .chartwrap{opacity:.35}

/* Панели, вытесненные раскладкой, живут под сеткой обычной лентой. */
#tuckZone{display:flex;flex-direction:column;gap:10px;margin-top:10px}
#tuckZone:empty{display:none}
#tuckZone > .panel{margin-top:0}

/* ---------- история обращений ---------- */
.histlist{max-height:min(58vh,520px)}
.histitem{border:1px solid var(--line);border-radius:9px;margin-bottom:7px;
  overflow:hidden}
.histhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;cursor:pointer;background:var(--panel2)}
.histhead:hover{background:color-mix(in srgb,var(--a) 10%,var(--panel2))}
.histbody{padding:8px 11px;display:flex;flex-direction:column;gap:7px;
  border-top:1px solid var(--line)}
.histmsg{line-height:1.4}
.histmsg > div{white-space:pre-wrap;word-break:break-word}

/* Сотруднику поддержки в панели управления видны только обращения:
   остальное там — данные площадки, и права на них он не получал. */
body.supportonly #admin > .panel:not(#supPanel){display:none}

/* Кнопка TP/SL с активным серверным сторожем: видно, что защита стоит,
   не открывая окна. */
.btn.guarded{border-color:var(--a);color:var(--a);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--a) 35%,transparent) inset}
/* Масштаб пульта — в его же шапке: вопрос «по чему посчитано»
   возникает там же, где смотрят на вывод. */
.sctf button{padding:2px 7px;font-size:calc(10px * var(--fz))}

/* ---------- лента: дельта и скорость ---------- */
.tapetop{display:flex;align-items:center;gap:10px;padding:6px 9px;
  border-bottom:1px solid var(--line)}
.tdelta{display:flex;gap:12px;flex:0 0 auto;flex-wrap:wrap}
.tdl{display:flex;flex-direction:column;line-height:1.2}
.tdl b{font-size:calc(12px * var(--fz))}
.tspark{flex:1 1 auto;min-width:80px;height:34px;display:block}

/* ---------- плотности и айсберги в лестнице ----------
   Плотность помечается рамкой, а не заливкой: заливка уже занята
   объёмом, и вторая по тому же каналу читалась бы как «очень много». */
.ldrow.dens{outline:1px solid color-mix(in srgb,var(--txt) 45%,transparent);
  outline-offset:-1px}
.ldrow.dens .ldq{font-weight:700}
.ldrow.ice{position:relative}
.ldrow.ice::before{content:'';position:absolute;left:2px;top:50%;
  width:4px;height:4px;margin-top:-2px;border-radius:50%;
  background:var(--a);box-shadow:0 0 0 2px color-mix(in srgb,var(--a) 30%,transparent)}

/* ---------- реплей ----------
   Панель поверх графика снизу: она нужна ровно тогда, когда смотришь
   на график, и уводить взгляд в сторону не должна. */
.replaybar{position:absolute;left:8px;right:8px;bottom:8px;z-index:7;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 10px;border-radius:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 10px 30px #00000055}
.replaybar.hidden{display:none}
.rpleft,.rpmid{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.replaybar .btn.sm{padding:3px 9px}
.replaybar .btn.good{border-color:color-mix(in srgb,var(--good) 55%,transparent);color:var(--good)}
.replaybar .btn.bad{border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad)}

/* В реплее прячем то, что показало бы будущее или увело бы в реальную
   торговлю: заявка, стакан и лента относятся к «сейчас», а на экране
   прошлое. */
body.replay-on #pnBook,
body.replay-on #pnOrder,
body.replay-on #pnTape,
body.replay-on #heatPanel{opacity:.35;pointer-events:none}

/* ---------- окно только с графиком ----------
   Всё, кроме графика, скрыто; сам он занимает окно целиком. Строка
   инструмента остаётся: без неё непонятно, чей это график. */
.viewchart .nav,
.viewchart .top .right,
.viewchart #tuckZone,
.viewchart .side,
.viewchart .page:not(#trade),
.viewchart #trade > .panel:not(#pnChart),
.viewchart #colMain > .panel:not(#pnChart),
.viewchart #tradeSide,
.viewchart #mcGrid,
.viewchart .supportbtn,
.viewchart .gamesbtn{display:none!important}
.viewchart .grid{grid-template-columns:1fr!important;height:auto!important}
.viewchart #pnChart{margin:0}
.viewchart .chartwrap{height:calc(100vh - var(--vcTop,140px))}

/* ---------- скринер ---------- */
.scrhead{display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:11px}
.scrconds{display:flex;flex-direction:column;gap:6px;margin-bottom:9px}
.scrcond{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.scrcond .input{flex:1 1 160px;min-width:120px}
.scrbtns{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.scrempty{padding:12px;line-height:1.4}

/* ---------- новости по бумаге ---------- */
.nfirow{padding:9px 0;border-bottom:1px solid var(--line)}
.nfihead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.nfitext{margin-top:3px;line-height:1.45}

/* ---------- конструктор условий бота ---------- */
.rulebox{display:flex;flex-direction:column;gap:6px}
.rulerow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rulerow .input{flex:1 1 130px;min-width:110px}

/* ---------- журнал решений бота ---------- */
.blogrow{display:grid;grid-template-columns:120px 96px 1fr;gap:9px;
  padding:6px 0;border-bottom:1px solid var(--line-soft,var(--line));
  align-items:start;font-size:calc(12px * var(--fz))}
.blogrow > div{line-height:1.4;word-break:break-word}
@media (max-width:560px){ .blogrow{grid-template-columns:1fr;gap:2px} }

/* ---------- безопасность ---------- */
.sessrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line)}
.sessrow.cur{background:color-mix(in srgb,var(--good) 8%,transparent);
  border-radius:6px;padding-left:8px;padding-right:8px}
.tfqr{display:flex;justify-content:center;padding:10px 0}
.tfcode{font-size:calc(26px * var(--fz));letter-spacing:.22em;text-align:center;
  padding:14px 0;font-weight:700}

/* ---------- кривая доходности против индекса ---------- */
.pfsvg{width:100%;height:110px;display:block}
.pfleg{display:flex;gap:16px;margin-top:7px}
.pfleg i{display:inline-block;width:14px;height:2px;margin-right:5px;
  vertical-align:middle}
.pfleg .lgmine{background:var(--a)}
.pfleg .lgbench{background:var(--muted)}

/* ============================================================
   СТРАНИЦА «О ТЕРМИНАЛЕ» — ЖИВОЙ РЫНОК И ТАРИФЫ

   Главная мысль переделки: это терминал, и самое убедительное, что
   он может показать о себе, — не рисованные свечи, а рынок прямо
   сейчас. Поэтому в шапке настоящий индекс и настоящая лента дня.
   ============================================================ */

/* Шапка: слева слова, справа живая карточка. По центру всё было
   симметрично и оттого безлико — асимметрия даёт странице ось. */
.herogrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:32px;align-items:center;text-align:left;
  max-width:1100px;margin:0 auto;padding:0 4px}
.heroleft{min-width:0}
.heroright{min-width:0}
.abouthero .herogrid .aboutlead{margin-left:0;margin-right:0}
.abouthero .herogrid .aboutstate,
.abouthero .herogrid .aboutcta{justify-content:flex-start}

/* Живая карточка индекса. */
.livecard{background:color-mix(in srgb,var(--panel) 92%,transparent);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  box-shadow:0 18px 44px #00000038;backdrop-filter:blur(10px)}
.lhead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.ltick{font-weight:700;letter-spacing:.03em;font-size:calc(13px * var(--fz))}
.lprice{font-size:calc(27px * var(--fz));font-weight:700;line-height:1.15;
  margin:6px 0 2px;display:flex;align-items:baseline;gap:10px}
.lprice i{font-size:calc(13px * var(--fz));font-style:normal;font-weight:600}
.lspark{width:100%;height:64px;display:block;margin:6px 0 4px}
.lfoot{line-height:1.35}

/* Бегущая строка дня. Дубль содержимого в разметке даёт бесшовный
   переход: без него на стыке возникает пустота. */
.hermarquee{position:relative;margin-top:26px;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:9px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hmtrack{display:flex;gap:26px;width:max-content;animation:hmslide 60s linear infinite}
.hmi{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;
  font-size:calc(12px * var(--fz))}
.hmi b{font-weight:700;letter-spacing:.02em}
.hmi i{font-style:normal;font-variant-numeric:tabular-nums}
.hmi.up i{color:var(--good)}
.hmi.dn i{color:var(--bad)}
@keyframes hmslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .hmtrack{animation:none} }

/* Заголовки разделов: один стиль на всю страницу вместо трёх разных. */
.secttl{font-size:calc(20px * var(--fz));font-weight:700;letter-spacing:-.01em;
  margin:34px 0 4px;text-align:left}

/* Две ступени подписки вместо стены галочек. */
.lvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;margin-top:14px}
.lvcard{border:1px solid var(--line);border-radius:14px;padding:16px 17px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  display:flex;flex-direction:column;gap:11px}
.lvcard.best{border-color:color-mix(in srgb,var(--a) 55%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--a) 22%,transparent) inset}
.lvtop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.lvname{font-size:calc(17px * var(--fz));font-weight:700}
.lvplus{margin:-4px 0 -2px}

/* Сравнение по числам. */
.cmpwrap{overflow-x:auto;margin-top:14px}
.cmp{width:100%;border-collapse:collapse;min-width:460px;
  font-size:calc(13px * var(--fz))}
.cmp th,.cmp td{padding:9px 12px;text-align:right;
  border-bottom:1px solid var(--line)}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp thead th{font-size:calc(11px * var(--fz));letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
.cmp .hi{color:var(--a);font-weight:700}
.cmp tbody tr:hover{background:color-mix(in srgb,var(--txt) 4%,transparent)}

/* Тарифы: главное число — цена за месяц, иначе планы разной длины
   несравнимы и годовой выглядит самым дорогим. */
.tiercard .tierprice{display:flex;align-items:baseline;gap:6px}
.tiercard .tierprice i{font-style:normal;font-size:calc(11.5px * var(--fz));
  font-weight:500;color:var(--muted)}
.tiertotal{margin-top:2px}
.tierflag.cur{background:var(--good);color:#04120c}

@media (max-width:860px){
  .herogrid{grid-template-columns:1fr;gap:20px;text-align:center}
  .abouthero .herogrid .aboutstate,
  .abouthero .herogrid .aboutcta{justify-content:center}
  .secttl{text-align:center}
}
/* Нет живых данных — шапка в одну колонку по центру, как раньше. */
.abouthero.nolive .herogrid{grid-template-columns:1fr;text-align:center}
.abouthero.nolive .heroright{display:none}
.abouthero.nolive .herogrid .aboutlead{margin-left:auto;margin-right:auto}
.abouthero.nolive .herogrid .aboutstate,
.abouthero.nolive .herogrid .aboutcta{justify-content:center}

/* ============================================================
   ПУЛЬС РЫНКА — карточка фазы, готовности и срока
   ============================================================ */
.pulsebox{border:1px solid var(--line);border-radius:var(--r);
  padding:10px 12px;margin:10px 0 4px;background:var(--panel2)}
.pulsehead{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin-bottom:9px}
.pulsegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pulsecell{display:flex;flex-direction:column;gap:3px;min-width:0}
.pulsecell b{font-size:calc(14px * var(--fz));line-height:1.25}
/* Полоса готовности: пустая рамка + заливка. Цвет заливки — сторона
   ожидаемого выстрела, длина — насколько взведена пружина. */
.pulsebar{height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.pulsebar span{display:block;height:100%;border-radius:4px;background:var(--muted)}
.pulsebar span.good{background:var(--good)}
.pulsebar span.bad{background:var(--bad)}
.pulsefoot{margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}
@media (max-width:820px){ .pulsegrid{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   БИБЛИОТЕКА СТРАТЕГИЙ

   Карточка должна отвечать на «мне это подходит?» до открытия:
   название, суть одной строкой, теги, оценка. Всё остальное — внутри.
   ============================================================ */
.clubtabs{display:flex;gap:6px;margin-bottom:10px}
.clubtab{
  padding:7px 15px;border-radius:9px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-size:13px;font-weight:600;
  cursor:pointer;
}
.clubtab:hover{color:var(--txt)}
.clubtab.on{background:var(--a);border-color:var(--a);color:#fff}

.stwrap{padding:12px 14px 16px}
.stnote{margin:0 0 12px;max-width:74ch}

.sttags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.sttag{
  font-size:11px;padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--a) 13%,transparent);
  color:color-mix(in srgb,var(--a) 82%,var(--txt));
  white-space:nowrap;
}
button.sttag{border:1px solid transparent;cursor:pointer}
button.sttag:hover{border-color:var(--a)}
button.sttag.on{background:var(--a);color:#fff}
.sttag i{font-style:normal;opacity:.6;margin-left:5px}

.stsect{
  font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);margin:16px 0 8px;
}
.stsect:first-child{margin-top:0}

.stgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.stcard{
  display:flex;flex-direction:column;gap:7px;text-align:left;
  padding:13px 14px;border-radius:11px;cursor:pointer;
  background:var(--panel2,#0e131e);border:1px solid var(--line);
  color:inherit;font:inherit;transition:border-color .15s,transform .15s;
}
.stcard:hover{border-color:var(--a);transform:translateY(-1px)}
.stcard.we{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.sthead{display:flex;align-items:center;gap:8px;justify-content:space-between}
.sthead b{font-size:14px;line-height:1.3}
.stwe{
  font-size:10px;font-weight:700;letter-spacing:.03em;white-space:nowrap;
  padding:3px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--good) 17%,transparent);color:var(--good);
}
.stsum{font-size:12.5px;line-height:1.5}
.stfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.sttaglist{display:flex;flex-wrap:wrap;gap:5px}
.strate{display:flex;align-items:center;gap:6px;white-space:nowrap}
.ststars{color:#f0b429;font-size:12px;letter-spacing:1px}
.ststars i{color:var(--line);font-style:normal}
.stauthor{margin-top:-2px}

/* --- разбор --- */
.stpagetop{
  display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.stpagetop .stsum{margin-bottom:7px;max-width:70ch}
.stpagerate{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.stsec{margin:18px 0}
.stsec h4{
  margin:0 0 8px;font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:700;
}
.stsec ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.stsec li{font-size:13px;line-height:1.6;max-width:78ch}

/* Раздел о запретах — единственный выделенный. Он и есть та часть,
   ради которой разбор пишется, а читают его последним. */
.stsec.danger{
  padding:12px 14px;border-radius:10px;
  background:color-mix(in srgb,var(--bad) 7%,transparent);
  border-left:2px solid var(--bad);
}
.stsec.danger h4{color:var(--bad)}

.strevform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.strevform .input{flex:1;min-width:200px}
.strpick{display:flex;gap:2px}
.strpick button{
  background:none;border:0;cursor:pointer;font-size:18px;line-height:1;
  color:var(--line);padding:0 1px;
}
.strpick button.on{color:#f0b429}
.strevs{display:flex;flex-direction:column;gap:10px}
.strev{padding:10px 12px;border-radius:9px;background:var(--panel2,#0e131e);font-size:13px}
.strevhead{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.strevhead b{font-size:12.5px}

@media (max-width:720px){
  .stgrid{grid-template-columns:1fr}
  .stpagetop{flex-direction:column}
}

/* Порог похожести над графиком: подпись и выбор одним блоком, чтобы
   число не читалось как отдельная сама по себе настройка. */
.pctpick{display:flex;align-items:center;gap:6px;white-space:nowrap}
.pctpick > span{font-size:11px;color:var(--muted)}
.pctpick select{padding:3px 6px;font-size:11.5px;width:auto;min-width:96px}

/* ============================================================
   ПРИМЕРЫ ВХОДА В РАЗБОРЕ

   Две карточки рядом: как надо и как не надо. Цветом различается
   только рамка и галочка — сами графики нейтральны, иначе картинка
   начинает подсказывать вывод раньше, чем её прочитали.
   ============================================================ */
.exsec{margin-top:22px}
.exgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.excard{
  padding:12px 13px 13px;border-radius:11px;
  background:var(--panel2);border:1px solid var(--line);
}
.excard.ok{border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.excard.no{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.exhead{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.exhead b{font-size:13px}
.exmark{
  width:19px;height:19px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.excard.ok .exmark{background:color-mix(in srgb,var(--good) 20%,transparent);color:var(--good)}
.excard.no .exmark{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad)}

.excv{display:block;width:100%;height:190px;border-radius:8px;background:var(--panel)}
.exout{
  font-size:12.5px;margin:8px 0 10px;padding:7px 10px;border-radius:8px;
  background:var(--panel);font-family:var(--mono);
}
.exout b{font-family:inherit}

.extext{display:flex;flex-direction:column;gap:7px}
.exrow{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:start}
.exrow > span{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding-top:2px;
}
.exrow p{margin:0;font-size:12.5px;line-height:1.55}
.extext ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px}
.extext li{font-size:12.5px;line-height:1.55}

@media (max-width:560px){
  .exrow{grid-template-columns:1fr;gap:2px}
  .excv{height:165px}
}

/* Своя картинка к примеру входа. */
.exupload{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.exupload .btn{cursor:pointer}
.exprev{margin-top:7px}
.exprev img{max-width:100%;max-height:160px;border-radius:8px;border:1px solid var(--line);display:block}
.exshot{display:block;margin-bottom:9px}
.exshot img{width:100%;border-radius:8px;border:1px solid var(--line);display:block}

/* ============================================================
   ТАРИФЫ: два уровня, сроки строками внутри

   Пять одинаковых карточек в ряд заставляли сравнивать их попарно и
   всё равно не показывали главного: уровней два, остальное — срок.
   Здесь выбор разделён на те же два шага, что и в голове.
   ============================================================ */
.plangrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));margin-top:12px}
.plancard{
  display:flex;flex-direction:column;gap:11px;
  padding:20px 20px 18px;border-radius:16px;
  background:var(--panel);border:1px solid var(--line);
  position:relative;
}
.plancard.best{
  border-color:color-mix(in srgb,var(--a) 55%,var(--line));
  box-shadow:0 18px 50px -32px color-mix(in srgb,var(--a) 70%,transparent);
}
.plantop{display:flex;align-items:center;gap:9px}
.planname{font-size:19px;font-weight:700;letter-spacing:-.01em}
.planflag{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--a) 18%,transparent);color:var(--a);
}
.planlead{margin:0;font-size:12.5px;line-height:1.5}
.planperks{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:5px;
}
.planperks li{
  font-size:12.5px;padding-left:19px;position:relative;color:var(--txt);
}
.planperks li::before{
  content:'✓';position:absolute;left:0;top:0;
  color:var(--good);font-size:11px;font-weight:700;
}

.planterms{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.planterm{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;
  align-items:center;padding:9px 11px;border-radius:10px;cursor:pointer;
  background:var(--panel2);border:1px solid transparent;transition:border-color .15s;
}
.planterm:hover{border-color:var(--line)}
.planterm.on{border-color:var(--a);background:color-mix(in srgb,var(--a) 8%,var(--panel2))}
.planterm input{margin:0;accent-color:var(--a)}
.ptname{font-size:12.5px}
.ptmonth{font-size:14px;font-weight:700;white-space:nowrap}
.ptmonth i{font-style:normal;font-size:10px;font-weight:500;color:var(--muted);margin-left:3px}
.pttotal{font-size:11.5px;white-space:nowrap}
.ptsave{
  font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;
  background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good);
}
.plannote{color:var(--good)}
.plancard .btn.lg{margin-top:4px}

/* Бесплатный доступ за обучение — перед ценами, а не после. */
.freecard{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;margin-bottom:6px;
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--good) 9%,var(--panel)),
    var(--panel) 60%);
  border:1px solid color-mix(in srgb,var(--good) 32%,var(--line));
}
.freeico{font-size:30px;line-height:1}
.freebody{flex:1;min-width:220px}
.freebody b{font-size:15px}
.freebody p{margin:4px 0 9px;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:60ch}
.freerows{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px}
.freerows > div{display:flex;align-items:center;gap:7px}
.frbadge{
  font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--a) 15%,transparent);color:var(--a);
}
.frbadge.full{background:color-mix(in srgb,var(--warn,#e0a72a) 18%,transparent);color:var(--warn,#e0a72a)}

@media (max-width:560px){
  .planterm{grid-template-columns:auto 1fr auto;row-gap:4px}
  .planterm .ptsave{grid-column:3}
  .freecard{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   РЕКЛАМНЫЕ БЛОКИ

   Правило одно: блок должен быть виден и не должен мешать. Поэтому
   он не шире колонки, не липкий, ничего не перекрывает, не двигается
   и не мигает. Ни на экране торговли, ни поверх содержимого его нет.
   ============================================================ */
.adslot{min-width:0}
.adslot.feed{margin:12px 0}
.adslot.bottom{max-width:1180px;margin:14px auto 4px;padding:0 2px}
.adslot.side{margin:10px 12px 0}

/* В узкой колонке блок разворачивается в столбик: иначе название
   ломается на четыре строки, а кнопка уезжает к краю. */
.adslot.side .adbox{flex-direction:column;align-items:flex-start;gap:8px}
.adslot.side .adgo{align-self:flex-end}

/* Общая рамка: и для нашего промо, и для блока сети. */
.adbox{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:13px 14px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line);
  overflow:hidden;
}
.admark{
  position:absolute;top:6px;right:9px;
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim,var(--muted));opacity:.75;
}

/* Метка над объявлением сети — обычной строкой в потоке.
   Поверх рекламы свои элементы класть нельзя (правила РСЯ, п. 2.1.4),
   поэтому здесь никакого absolute. */
.admark.row{
  position:static;display:block;margin:0 0 7px;
  text-align:left;opacity:.6;
}

/* Место под объявление резервируется заранее.
   Иначе блок «вырастает» после загрузки, страница дёргается, и по
   рекламе случаются случайные нажатия — сеть считает такие клики
   недобросовестными. */
.rtbslot{min-height:96px}
@media (max-width:640px){ .rtbslot{min-height:120px} }

/* Наше промо — кликабельно целиком. */
.adbox.own{cursor:pointer;transition:border-color .16s,transform .16s}
.adbox.own:hover{border-color:color-mix(in srgb,var(--a) 45%,var(--line));transform:translateY(-1px)}
.adico{
  flex:0 0 auto;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  background:var(--panel2);border:1px solid var(--line);color:var(--a);
}
.adbody{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.adbody b{font-size:13.5px;line-height:1.3}
.adbody span{font-size:12px;line-height:1.45}
.adgo{
  flex:0 0 auto;font-size:12px;font-weight:600;color:var(--a);white-space:nowrap;
}

/* Блок сети: только рамка и место под объявление. Высоту не задаём —
   сеть подставляет свою; фиксированная привела бы к пустой полосе
   при коротком объявлении и обрезке при высоком. */
.adbox.rtb{display:block;padding:11px 12px 12px;background:var(--panel2)}

@media (max-width:640px){
  .adbox{padding:11px 12px;gap:10px}
  .adbody b{font-size:13px}
  .adgo{font-size:11.5px}
  .adslot.bottom{margin:12px 0 2px}
}

/* Пока на экране видно объявление — плавающие кнопки убираем.
   Правила рекламной сети запрещают перекрывать рекламу своими
   элементами; кнопка в углу экрана именно это и делает. */
body.ad-clear .supportbtn,
body.ad-clear .gamesbtn{
  opacity:0;pointer-events:none;transform:translateY(8px);
}
.supportbtn,.gamesbtn{transition:opacity .18s,transform .18s}
@media (prefers-reduced-motion:reduce){
  .supportbtn,.gamesbtn{transition:none}
}

/* ============================================================
   ГОСТЕВОЙ РЕЖИМ

   Без входа сайт остаётся сайтом: открыты «О терминале», разборы
   стратегий и лента новостей. Прячем только то, что относится к
   личному кабинету, — счёт, выход, кнопку приложений и служебные
   колонки страниц.
   ============================================================ */
body.guest #logout,
body.guest .acctbtn,
body.guest .planchip,
body.guest #appsBtn,
body.guest .gamesbtn,
body.guest .supportbtn{display:none}

body:not(.guest) #loginBtn{display:none}

/* Новости гостю — только сама лента: чат и комментарии требуют входа,
   и пустые колонки рядом выглядели бы поломкой. */
body.guest #news .newsgrid{grid-template-columns:1fr}
body.guest #news .newscol:first-child,
body.guest #news .newscol:last-child{display:none}
body.guest #newsAdd{display:none}
body.guest .cmtbtn{display:none}

/* Приглашение войти под содержанием раздела. */
.guestcta{
  display:none;max-width:1180px;margin:14px auto 0;padding:16px 18px;
  border-radius:14px;background:var(--panel);border:1px solid var(--line);
  align-items:center;gap:14px;flex-wrap:wrap;
}
body.guest .guestcta{display:flex}
.guestcta b{font-size:14px}
.guestcta span{color:var(--muted);font-size:12.5px;flex:1;min-width:200px}