/* ═══════════════════════════════════════════════════════════════════
   ArtArea — ЕДИНЫЙ CSS (v6)
   Один файл для всего: основной сайт + /dev вебморда + login + toasts.
   Вся палитра задаётся CSS-переменными в :root (тёмная по умолчанию)
   и переопределяется в body.theme-light.

   Семантика цветов (единственные источники «зелёного/красного/акцента»):
     --green  = успех / прибыль / открыто / вверх   (alias: --ok, --up, --success)
     --red    = ошибка / убыток / закрыто / вниз     (alias: --err, --down, --danger)
     --accent = акцент / ссылки / инфо               (alias: --info, --blue)
     --orange = предупреждение / середина            (alias: --warn, --yellow)
     --gold   = выделение / порог / активный элемент
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Базовая палитра (тёмная) ── */
  --bg: #0d1117;
  --bg-rgb: 13, 17, 23;
  --card: #161b22;
  --card-rgb: 22, 27, 34;
  --border: #30363d;
  --border-rgb: 48, 54, 61;
  --text: #e6edf3;
  --dim: #8b949e;                 /* приглушённый/вторичный текст */
  --dim-rgb: 139, 148, 158;

  /* ── Семантические цвета ── */
  --accent: #58a6ff;
  --accent-rgb: 88, 166, 255;
  --green: #22c55e;
  --green-rgb: 34, 197, 94;
  --red: #ef4444;
  --red-rgb: 239, 68, 68;
  --orange: #d29922;
  --orange-rgb: 210, 153, 34;
  --gold: #ffd700;
  --gold-rgb: 255, 215, 0;
  --purple: #bc8cff;
  --purple-rgb: 188, 140, 255;

  /* ── Алиасы (новая семантика → старые имена, совместимость) ── */
  --muted: var(--dim);
  --ok: var(--green);
  --err: var(--red);
  --warn: var(--orange);
  --info: var(--accent);
  --up: var(--green);
  --down: var(--red);
  --success: var(--green);
  --danger: var(--red);
  --yellow: var(--orange);
  --blue: var(--accent);

  /* ── Полупрозрачные «dim»-фоны (для бейджей/сообщений) ── */
  --ok-dim: rgba(var(--green-rgb), .12);
  --err-dim: rgba(var(--red-rgb), .12);
  --warn-dim: rgba(var(--orange-rgb), .12);
  --info-dim: rgba(var(--accent-rgb), .12);

  /* ── Хедер ВСЕГДА тёмный (логотип тёмный — на светлом фоне не виден) ── */
  --hdr-bg: #161b22;
  --hdr-border: #30363d;
  --hdr-text: #e6edf3;
  --hdr-dim: #8b949e;
}

/* ═══════════════════ base ═══════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.45}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.hidden,[hidden]{display:none!important}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ═══════════════════ layout ═══════════════════ */
.ct{padding:16px 20px;max-width:1400px;margin:0 auto}

/* ═══════════════════ header/nav ═══════════════════ */
.header{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--hdr-bg);border-bottom:1px solid var(--hdr-border);position:sticky;top:0;z-index:100}
.header .logo{font-size:18px;font-weight:700;color:var(--hdr-text);display:flex;align-items:center;gap:8px}
.header .logo .s{font-size:10px;color:var(--hdr-dim);font-weight:500}
.header .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--hdr-bg);border-bottom:1px solid var(--hdr-border);flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:6px;padding:10px 12px;max-height:75vh;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:99}
.header .nav.open{display:flex}
.header .nav a{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:8px;font-size:13px;color:var(--hdr-dim);border:1px solid var(--hdr-border);background:rgba(var(--accent-rgb),0.04);transition:.15s;white-space:nowrap;text-decoration:none}
.header .nav a:hover{background:rgba(var(--accent-rgb),0.12);color:var(--hdr-text);border-color:var(--accent);text-decoration:none}
.header .nav a.on{background:rgba(var(--accent-rgb),0.15);color:var(--accent);border-color:var(--accent)}
.header .nav::-webkit-scrollbar{width:6px}
.header .nav::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),0.3);border-radius:3px}
.burger{display:block;background:none;border:1px solid var(--hdr-border);border-radius:6px;color:var(--hdr-text);font-size:20px;line-height:1;padding:4px 10px;cursor:pointer;transition:.15s}
.burger:hover{background:rgba(var(--accent-rgb),0.1);border-color:var(--accent)}

/* Переключатель темы 🌙/☀️ */
.theme-toggle{display:flex;gap:4px;align-items:center;margin-left:auto}
.tt-btn{background:none;border:1px solid var(--hdr-border);border-radius:6px;color:var(--hdr-dim);font-size:16px;line-height:1;padding:4px 8px;cursor:pointer;transition:.15s;opacity:.55}
.tt-btn:hover{opacity:.9;border-color:var(--accent)}
.tt-btn.on{opacity:1;color:var(--hdr-text);border-color:var(--accent);background:rgba(var(--accent-rgb),0.15)}

/* Status bar */
.sb{display:flex;gap:12px;padding:6px 20px;font-size:11px;color:var(--dim);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center}
.sb .dot{width:7px;height:7px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:3px}
.dot-g{background:var(--green)}.dot-r{background:var(--red)}.dot-y{background:var(--orange)}
.sb .sep{color:var(--border);user-select:none}

/* ═══════════════════ cards ═══════════════════ */
.gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:16px}
.cd{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.cd.l{grid-column:span 2}
.cd h3{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.cd .v{font-size:22px;font-weight:700}
.cd .s{font-size:11px;color:var(--dim);margin-top:3px}
/* scard — внутренняя карточка (analytics.php) */
.scard{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.scard h4{font-size:13px;color:var(--text);margin-bottom:8px}
/* rcard — «внутренняя карточка» страниц (риск, DCA, шок-тесты и т.д.). Объединена с .scard-семантикой. */
.rcard{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.rcard h4{font-size:13px;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rcard h4 .sub{font-size:11px;color:var(--dim);font-weight:400}
/* kcard — карточка (killer.php) */
.kcard{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:16px;background:var(--card)}
.kcard h4{margin:0 0 8px;font-size:14px}
/* Risk stat grid */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px}
.rstat{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 14px}
.rstat .rv{font-size:20px;font-weight:700;white-space:nowrap}
.rstat .rl{font-size:11px;color:var(--dim);margin-top:2px}
/* Section titles */
.sec{font-size:14px;font-weight:600;margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.sec .sm{font-size:12px;color:var(--dim);font-weight:400}
.sec-title{font-size:14px;font-weight:700;color:var(--text);margin:22px 0 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border);padding-bottom:6px}
.sec-title .sm{font-size:11px;color:var(--dim);font-weight:400}
/* Verdict box (risk.php) */
.verd{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-top:10px;font-size:14px;font-weight:700}
/* Formula/calc box (risk.php) */
.calc{background:rgba(var(--accent-rgb),0.06);border:1px solid rgba(var(--accent-rgb),0.25);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.9}
.calc .formula{font-family:ui-monospace,monospace;font-size:12px;color:var(--accent);background:rgba(var(--accent-rgb),0.1);border-radius:5px;padding:5px 8px;margin-bottom:8px;display:inline-block}
/* Checklist (risk.php) */
.chk{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:13px}
.chk .st{width:18px;text-align:center;font-weight:700}
.chk.ok .st{color:var(--green)}.chk.no .st{color:var(--red)}
.chk .why{color:var(--dim);font-size:12px}
/* Slog (risk.php) */
.slog{background:var(--bg);padding:12px;border-radius:6px;font-size:12px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;max-height:200px}

/* ═══════════════════ tables ═══════════════════ */
.tw{overflow-x:auto;margin-bottom:12px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:7px 8px;border-bottom:1px solid var(--border);color:var(--dim);font-weight:600;font-size:10px;text-transform:uppercase;white-space:nowrap}
td{padding:5px 8px;border-bottom:1px solid var(--border);white-space:nowrap;font-size:13px}
tr:hover td{background:rgba(var(--accent-rgb),0.04)}
/* tbl — компактная таблица страниц (DCA/shock/cascade/...) */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;color:var(--dim);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--border);white-space:nowrap;text-transform:none;font-size:13px}
.tbl td{padding:4px 6px;border-bottom:1px solid var(--border);vertical-align:top}

/* ═══════════════════ forms/buttons ═══════════════════ */
input,select,textarea{background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:5px 10px;font-size:13px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;font-family:inherit}
.btn{padding:5px 14px;border-radius:6px;border:1px solid var(--border);background:var(--accent);color:#fff;font-size:12px;cursor:pointer;border:none}
.btn:active{opacity:.8}
.btn.g{background:var(--green)}
.btn.r{background:var(--red)}
.btn.d{background:var(--border);color:var(--dim)}
.btn.small{padding:4px 10px;font-size:12px}
/* Toggle */
.tg{display:flex;gap:4px;background:var(--bg);border-radius:6px;padding:3px}
.tg a{padding:3px 10px;border-radius:4px;font-size:12px;color:var(--dim);transition:.1s;text-decoration:none}
.tg a.sel{background:var(--card);color:var(--text)}
/* Form row (risk/prefilters/shock/cascade/lead_lag/funding/killer) */
.fr{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.hint{font-size:11px;color:var(--dim);line-height:1.6;margin:4px 0 10px}
.small{font-size:12px;color:var(--dim)}
.so{width:60px}
.admin-form{display:none!important}

/* ═══════════════════ badges ═══════════════════ */
.b{display:inline-block;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:600}
.buy{color:var(--green);background:var(--ok-dim)}
.sell{color:var(--red);background:var(--err-dim)}
.n{color:var(--dim);background:rgba(var(--dim-rgb),0.12)}
.badge{display:inline-block;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:600}
.b-alive{background:var(--ok-dim);color:var(--green);border:1px solid rgba(var(--green-rgb),0.35)}
.b-dead{background:var(--err-dim);color:var(--red);border:1px solid rgba(var(--red-rgb),0.35)}
.b-on{background:var(--ok-dim);color:var(--green);border:1px solid rgba(var(--green-rgb),0.35)}
.b-off{background:var(--warn-dim);color:var(--orange);border:1px solid rgba(var(--orange-rgb),0.35)}
.b-global{background:var(--info-dim);color:var(--accent);border:1px solid rgba(var(--accent-rgb),0.3);font-size:10px;padding:1px 6px;border-radius:4px}
.tag{display:inline-block;border-radius:4px;padding:1px 7px;font-size:11px;font-weight:600}
.tag-open{background:var(--ok-dim);color:var(--green);border:1px solid rgba(var(--green-rgb),0.35)}
.tag-skip{background:var(--warn-dim);color:var(--orange);border:1px solid rgba(var(--orange-rgb),0.35)}
.tag-admin{background:var(--warn-dim);color:var(--orange);border:1px solid rgba(var(--orange-rgb),0.35);font-size:10px;padding:1px 6px;border-radius:4px}
.stat{display:inline-block;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px 10px;margin:2px 6px 2px 0;font-size:12px}
.ftag{display:inline-block;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 5px;margin:1px;font-size:11px;color:var(--dim)}
.ftag b{color:var(--text)}
/* Messages */
.msg{padding:12px;border-radius:6px;margin:8px 0;font-size:13px}
.msg i{color:var(--dim);font-size:12px}
.msg.ok{border:1px solid rgba(var(--green-rgb),0.3);background:var(--ok-dim)}
.msg.warn{border:1px solid rgba(var(--orange-rgb),0.3);background:var(--warn-dim)}
.msg.err{border:1px solid rgba(var(--red-rgb),0.3);background:var(--err-dim)}
.msg-ok{background:var(--ok-dim);color:var(--green);border:1px solid rgba(var(--green-rgb),0.35);border-radius:6px;padding:8px 12px;margin-bottom:12px;font-size:13px}
.msg-err{background:var(--err-dim);color:var(--red);border:1px solid rgba(var(--red-rgb),0.35);border-radius:6px;padding:8px 12px;margin-bottom:12px;font-size:13px}

/* ═══════════════════ score / risk plot ═══════════════════ */
.rp{height:36px;display:flex;align-items:flex-end;gap:2px;padding:0 2px}
.rp .b{flex:1;border-radius:1px 1px 0 0;min-height:3px}
.sc{display:flex;align-items:center;gap:6px}
.sb2{height:6px;border-radius:3px;display:inline-block;min-width:2px;flex-shrink:0}
.sb2.h{background:var(--green)}.sb2.m{background:var(--orange)}.sb2.l{background:var(--red)}

/* ═══════════════════ login ═══════════════════ */
.lp{display:flex;justify-content:center;align-items:center;min-height:100vh;background:var(--bg)}
.lc{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:40px;width:600px;max-width:90vw}
.lc h1{font-size:24px;margin-bottom:4px;color:var(--text)}
.lc p.s{color:var(--dim);font-size:13px;margin-bottom:24px}
.lc input{width:100%;padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:16px;margin-bottom:14px;outline:none}
.lc input:focus{border-color:var(--accent)}
.lc button{width:100%;padding:12px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:16px;cursor:pointer}
.lc button:hover{opacity:.9}
.lc .e{color:var(--red);font-size:13px;margin-top:12px}

/* ═══════════════════ toasts (уведомления о сделках) ═══════════════════ */
#ntfWrap{position:fixed;right:14px;bottom:14px;z-index:99999;display:flex;flex-direction:column;gap:8px;max-width:340px;pointer-events:none}
#ntfWrap.pos-br{right:14px;bottom:14px}
#ntfWrap.pos-bl{left:14px;bottom:14px}
#ntfWrap.pos-tr{right:14px;top:14px}
#ntfWrap.pos-tl{left:14px;top:14px}
.ntf{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:10px;padding:10px 14px;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.35);cursor:pointer;animation:ntfIn .25s ease;pointer-events:auto}
.ntf.open{border-left-color:var(--green)}
.ntf.close{border-left-color:var(--red)}
.ntf .t{font-size:11px;color:var(--dim);margin-bottom:2px}
.ntf b{font-weight:700}
.ntf.size-sm{max-width:240px;padding:7px 10px;font-size:11px}
.ntf.size-sm .t{font-size:10px}
.ntf.size-lg{max-width:430px;padding:13px 18px;font-size:15px}
.ntf.size-lg .t{font-size:12px}
@keyframes ntfIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ═══════════════════════════════════════════════════════════════════
   /dev — модульная вебморда
   ═══════════════════════════════════════════════════════════════════ */
.dev-topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.dev-logo{font-size:15px;white-space:nowrap}
.dev-logo b{color:var(--accent)}
.dev-pagepick{display:flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,0.03);white-space:nowrap}
.dev-pagepick select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:12px;max-width:200px;cursor:pointer}
.dev-pagepick .dev-active{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--dim);cursor:pointer;user-select:none}
.dev-pagepick .dev-active input{accent-color:var(--accent);cursor:pointer}
.dev-pagepick .dev-active.on{color:var(--green)}
.dev-pagepick .dev-btn{padding:4px 9px;font-size:12px}
.dev-tabs{display:flex;gap:6px;flex:1;overflow-x:auto}
.dev-tab{background:transparent;color:var(--dim);border:1px solid var(--border);border-radius:8px;padding:5px 12px;cursor:pointer;white-space:nowrap;font-size:12px;display:inline-flex;align-items:center;gap:5px}
.dev-tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.dev-actions{display:flex;gap:6px}
.dev-btn{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:13px}
.dev-btn:hover{border-color:var(--accent)}

/* Панель виджетов */
.dev-widgets-panel{padding:10px 14px;background:var(--card);border-bottom:1px solid var(--border)}
.dev-wp-title{font-size:12px;color:var(--dim);margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}
.dev-wp-list{display:flex;flex-wrap:wrap;gap:8px}
.dev-wp-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 10px;cursor:grab;font-size:12px}
.dev-wp-item:hover{border-color:var(--accent)}
.dev-wp-size{color:var(--dim);font-size:10px}

/* Основная область */
.dev-main{padding:12px}
.dev-grid-stack{min-height:60vh}
.dev-empty{text-align:center;color:var(--dim);padding:80px 20px;font-size:15px;line-height:2}

/* Виджеты (gridstack item) */
.gs-item{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.gs-item:hover{border-color:var(--border)}
.dw-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.dw-title{font-size:12px;font-weight:600;color:var(--text)}
.dw-del{background:transparent;border:none;color:var(--red);cursor:pointer;font-size:13px;padding:0 4px;display:none}
.dw-body{flex:1;overflow:auto;padding:8px 10px;font-size:12px}
.dw-load{color:var(--dim);padding:10px;text-align:center}
.dw-err{color:var(--red);padding:10px}
.dw-empty{color:var(--dim);padding:16px;text-align:center}

/* таблицы виджетов */
.dw-table{width:100%;border-collapse:collapse;font-size:12px}
.dw-table th{text-align:left;color:var(--dim);font-weight:500;padding:3px 6px;border-bottom:1px solid var(--border);white-space:nowrap;text-transform:none;font-size:12px}
.dw-table td{padding:3px 6px;border-bottom:1px solid rgba(var(--border-rgb),.4);white-space:nowrap}
.dw-dim{color:var(--dim)}
.dw-tf{background:var(--info-dim);color:var(--accent);border-radius:4px;padding:1px 5px;font-size:11px}
.dw-buy{color:var(--green)}
.dw-sell{color:var(--red)}
.dw-neu{color:var(--dim)}

/* скор (цветовая шкала хорошо/средне/плохо) */
.dw-sc{font-weight:700;padding:1px 6px;border-radius:4px}
.dw-h{background:rgba(var(--green-rgb),.15);color:var(--green)}
.dw-m{background:rgba(var(--orange-rgb),.15);color:var(--orange)}
.dw-l{background:rgba(var(--dim-rgb),.12);color:var(--dim)}

/* KPI */
.dw-kpis{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.dw-kpi{flex:1;min-width:70px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px;text-align:center}
.dw-kpi-v{font-size:18px;font-weight:700}
.dw-kpi-l{font-size:10px;color:var(--dim);margin-top:2px}

/* бакеты */
.dw-buckets{display:flex;flex-direction:column;gap:4px}
.dw-brow{display:flex;align-items:center;gap:8px}
.dw-blabel{width:44px;color:var(--dim);font-size:11px}
.dw-bbar{flex:1;background:var(--border);border-radius:4px;height:12px;overflow:hidden}
.dw-bfill{height:100%;background:var(--accent);border-radius:4px}
.dw-bn{width:36px;text-align:right;font-size:11px}

/* большой скор */
.dw-bigscore{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.dw-score{font-size:44px;font-weight:800}
.dw-score-l{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:1px}

/* статус */
.dev-status{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:13px;z-index:100;display:none}
.dev-status:not(:empty){display:block}
.dev-status.ok{border-color:var(--green);color:var(--green)}
.dev-status.err{border-color:var(--red);color:var(--red)}
.dev-status.i{border-color:var(--orange);color:var(--orange)}

/* кнопки на виджете */
.dw-btns{display:flex;gap:4px}
.dw-gear,.dw-del2,.dw-edit{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--dim);cursor:pointer;font-size:12px;padding:2px 6px;line-height:1.2}
.dw-gear:hover{border-color:var(--accent);color:var(--accent)}
.dw-del2:hover{border-color:var(--red);color:var(--red)}

/* модалка */
.dev-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:200}
.dev-modal-box{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;width:380px;max-width:92vw;max-height:86vh;overflow:auto}
.dev-modal-box h3{margin:0 0 12px;font-size:15px}
.dev-modal-box label{display:block;font-size:11px;color:var(--dim);margin:10px 0 4px}
.dev-modal-box input,.dev-modal-box select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:7px 9px;font-size:13px}
.dev-modal-actions{display:flex;gap:8px;margin-top:16px}
.dev-modal-actions .dev-btn{flex:1}

/* библиотека: разделы */
.dev-wp-sec{margin-bottom:12px}
.dev-wp-sec-title{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;border-bottom:1px solid var(--border);padding-bottom:4px}

/* легенда графика */
.dw-legend{display:flex;gap:12px;margin-top:6px;font-size:11px;color:var(--dim);flex-wrap:wrap}
.dw-legend span{display:flex;align-items:center;gap:4px}
.dw-legend i{width:10px;height:3px;border-radius:2px;display:inline-block}

/* конструктор */
.dev-constructor{width:460px}
.dev-constructor label{margin-top:12px}
.dev-constructor select{max-height:260px}
.dev-cst-tabs{display:flex;gap:6px;margin-bottom:4px}
.dev-cst-tab{flex:1;background:var(--bg);color:var(--dim);border:1px solid var(--border);border-radius:8px;padding:7px;cursor:pointer;font-size:12px}
.dev-cst-tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#cstCode{width:100%;height:140px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px;outline:none;resize:vertical;white-space:pre}
.dev-chips{max-height:140px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;padding:6px}
.dev-chip-g{font-size:10px;color:var(--dim);margin:6px 0 3px;text-transform:uppercase;letter-spacing:.4px}
.dev-chip-row{display:flex;flex-wrap:wrap;gap:4px}
.dev-chip{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-size:10px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-chip:hover{border-color:var(--accent);color:var(--text)}
.dev-preview{margin-top:8px;border:1px dashed var(--border);border-radius:8px;padding:8px;min-height:34px;font-size:12px;background:var(--bg)}

/* виджеты-страницы (iframe) */
.dw-frame{width:100%;height:100%;min-height:380px;border:0;display:block;background:var(--bg)}

/* крестик удаления вкладки */
.dev-tab-del{color:var(--dim);font-size:11px;padding:0 3px;border-radius:4px;cursor:pointer;line-height:1}
.dev-tab-del:hover{background:var(--err-dim);color:var(--red)}

/* iframe-фикс */
.gs-iframe-fix .dw-frame{pointer-events:none!important}

/* режим просмотра (👁) */
body.dev-view .dw-btns{display:none}
body.dev-view .dev-tab-del{display:none}
body.dev-view .dev-widgets-panel{display:none!important}
body.dev-view .gs-item{cursor:default}

/* кликабельные пары */
.dw-pair-link{cursor:pointer;color:var(--accent);border-bottom:1px dotted rgba(var(--accent-rgb),.4)}
.dw-pair-link:hover{color:var(--text);border-bottom-color:var(--text)}
.dw-flash{outline:2px solid var(--accent)!important;outline-offset:-2px;animation:dwFlash 1.2s ease}
@keyframes dwFlash{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}100%{box-shadow:0 0 0 18px rgba(var(--accent-rgb),0)}}

/* ═══════════════════ charts (живой график + рисование) ═══════════════════ */
.dw-chart-top{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap;align-items:center;position:relative}
.dw-chart-top select,.dw-chart-top input{background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:4px 8px;font-size:12px;outline:none}
.dw-chart-wrap{flex:1;width:100%;min-height:200px;position:relative}
.dw-draw-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.dw-draw-layer.drawing{pointer-events:auto;cursor:crosshair}
.dw-draw-layer svg{width:100%;height:100%;display:block}
.dw-tools{display:inline-flex;gap:3px;flex-wrap:wrap}
.dw-tool{background:var(--bg);color:var(--dim);border:1px solid var(--border);border-radius:6px;padding:3px 7px;font-size:11px;cursor:pointer;line-height:1.3}
.dw-tool:hover{border-color:var(--accent);color:var(--text)}
.dw-tool.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* панель выбора фильтров */
.dw-filter-pop{position:absolute;top:34px;right:0;z-index:60;width:260px;max-height:340px;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.dw-fp-title{font-size:11px;color:var(--dim);margin-bottom:6px}
.dw-fp-list{overflow-y:auto;flex:1;min-height:0}
.dw-fp-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:2px 4px;border-radius:4px;cursor:pointer;color:var(--text)}
.dw-fp-item:hover{background:var(--info-dim)}
.dw-fp-item input{accent-color:var(--accent)}
.dw-fp-btns{display:flex;gap:6px;margin-top:8px;flex-shrink:0}
.dw-fp-btns .dev-btn{flex:1;padding:5px;font-size:11px}

/* ═══════════════════ торговая панель ═══════════════════ */
.dw-trade{display:flex;flex-direction:column;gap:4px;font-size:12px;height:100%;min-height:0}
.dw-trade label{font-size:10px;color:var(--dim);margin-top:4px}
.dw-trade input,.dw-trade select{background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:5px 8px;font-size:12px;outline:none;width:100%}
.dt-btns{display:flex;gap:6px;margin-top:8px}
.dt-buy{flex:1;background:var(--green);border:none;border-radius:6px;padding:8px;color:#000;font-weight:700;cursor:pointer}
.dt-sell{flex:1;background:var(--red);border:none;border-radius:6px;padding:8px;color:#fff;font-weight:700;cursor:pointer}
.dt-positions{flex:1;min-height:60px;overflow:auto}

/* ═══════════════════ карточки аккаунтов (dev) ═══════════════════ */
.dw-acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.dw-acc{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px}
.dw-acc .gr{display:grid;gap:6px}

/* ═══════════════════ responsive ═══════════════════ */
@media(max-width:900px){
  .header{padding:8px 12px;gap:8px}
  .ct{padding:10px 12px}
  .gr{grid-template-columns:repeat(2,1fr)}
  .cd.l{grid-column:span 2}
  .rgrid2{grid-template-columns:1fr}
}

/* ═══════════════════ Светлая тема (body.theme-light) ═══════════════════ */
body.theme-light {
  --bg: #f5f6f8;
  --bg-rgb: 245, 246, 248;
  --card: #ffffff;
  --card-rgb: 255, 255, 255;
  --border: #d8dce3;
  --border-rgb: 216, 220, 227;
  --text: #1c2330;
  --dim: #5c6675;
  --dim-rgb: 92, 102, 117;
  --accent: #2f6fed;
  --accent-rgb: 47, 111, 237;
  --green: #16a34a;
  --green-rgb: 22, 163, 74;
  --red: #dc2626;
  --red-rgb: 220, 38, 38;
  --orange: #b45309;
  --orange-rgb: 180, 83, 9;
  --gold: #a16207;
  --gold-rgb: 161, 98, 7;
  --purple: #7c3aed;
  --purple-rgb: 124, 58, 237;
}
body.theme-light .sb { background: #ffffff; }
body.theme-light .cd,
body.theme-light .rcard,
body.theme-light .rstat,
body.theme-light .scard,
body.theme-light .kcard,
body.theme-light .tbl,
body.theme-light .dw-acc,
body.theme-light .gs-item { background: var(--card); }
body.theme-light .nav a { color: var(--dim); }
body.theme-light .nav a.on { color: var(--accent); }
body.theme-light input,
body.theme-light select,
body.theme-light textarea { background: #ffffff; color: var(--text); }
body.theme-light .tw table th { color: var(--dim); }
body.theme-light .tw table td { border-color: var(--border); }
body.theme-light .calc { background: rgba(var(--accent-rgb),0.05); }
body.theme-light .chk .why { color: var(--dim); }