/* ============================================================
   Единый стиль SARMAT CRM — тёмная тема в палитре VS Code (Dark+).
   Правило номер один: никаких скруглений — только прямые углы.
   Подключается последним и перебивает Tailwind и локальные стили страниц.
   ============================================================ */

:root {  /* палитра главной opentrading.store, тема ot-dark / Vulcanico (20.09.2026) */
  --vs-bg: #000000;        /* фон страницы — чёрный, как на сайте */
  --vs-panel: #001621;     /* --surf: карточки, панели, шапка */
  --vs-panel2: #04222f;    /* --surf2: поля, чипы, шапки блоков */
  --vs-panel3: #073042;    /* кнопки второго плана, активные пункты */
  --vs-top: #001621;
  --vs-border: rgba(255,255,255,.12);   /* --line */
  --vs-border2: rgba(255,255,255,.18);
  --vs-text: #f3f4f6;      /* --txt */
  --vs-text2: #c7ced6;
  --vs-text3: #9aa3ad;     /* --muted */
  --vs-text4: #6b7581;
  --vs-accent: #ff4103;    /* --acc */
  --vs-accent2: #e63a00;
  --vs-link: #ff4103;
  --vs-input: #04222f;
  --vs-hover: #04222f;
  --vs-sel: #5a1a00;
  --vs-on-accent: #ffffff;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7);
}

/* ---------- скругления (решение оператора 20.09.2026): блоки 12px, элементы 8px ---------- */
:root { --r-block: 14px; --r-el: 10px; --r-sm: 8px; }
.card, .stat-card, .dealtabs, .statusbox, .stagebox, .briefbox, .supplyq, .sblock, .draftbox, .voicebox,
.kpbox, .note, .mcard, .mbox, .modal-box, .block, .pbitem, .readpane, .listpane, .rp-card, #saPanel,
#dealsSection, #pipeline, .funnel, .kpi, .panel, .analysis, .supplyq-text, .brief {
  border-radius: var(--r-block) !important; overflow: hidden; }
.chead, .bhead, .mhead, .kpfoot, .phead, .sa-head { border-radius: 0 !important; }
button, .btn, .abtn, .sgo, .dtbtn, .vbtn, .rp-btn, .stab, .vtab, .donebtn, .supburger, .hbtn, .rp-tab, .sa-tab,
input, select, textarea, .ed, .dealmgr-input, .rtext, .folder, .dtab, .pipe-step,
.notif, .toast, .rulechip, .sfield input, .sfield select, .sfield textarea {
  border-radius: var(--r-el) !important; }
.badge, .tag, .vcell, .snum, .hchip, .dtab-badge, .kpdel, .sdot, #navChatBadge, .unread, .rnum {
  border-radius: var(--r-sm) !important; }
.sdot { border-radius: 50% !important; }
#supNav nav a, .sidebar-item, .si { border-radius: var(--r-el) !important; }
table thead th:first-child { border-top-left-radius: var(--r-block); }
table thead th:last-child { border-top-right-radius: var(--r-block); }
img { border-radius: var(--r-sm); }

html, html body { background: var(--vs-bg) !important; color: var(--vs-text) !important;
  font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; font-size: 14px; -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea, .ed { font-family: Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; }

/* ---------- верхняя полоса и боковое меню ---------- */
html header, html aside, html #sidebar, html #supNav, html #supBar,
html header.bg-zinc-950, html aside.bg-zinc-950 {
  background-color: var(--vs-panel) !important;
  border-color: var(--vs-border) !important;
}
html header.bg-zinc-950 { background-color: var(--vs-top) !important; }
html header *, html aside * { border-color: var(--vs-border) !important; }
html header .text-zinc-100, html aside .text-zinc-100, html header .text-zinc-200, html aside .text-zinc-200 { color: #e6e6e6 !important; }
html header .text-zinc-300, html header .text-zinc-400, html header .text-zinc-500,
html aside .text-zinc-300, html aside .text-zinc-400, html aside .text-zinc-500 { color: var(--vs-text2) !important; }
html aside .sidebar-item:hover { background: var(--vs-hover) !important; }
html aside .sidebar-item.active { background: #37373d !important; }
html aside .sidebar-item.active span, html aside .sidebar-item.active svg { color: #ffffff !important; }
.hbtn:hover { background: var(--vs-hover) !important; }

/* ---------- Tailwind-классы: фоны ---------- */
html .bg-zinc-950, html.light-mode .bg-zinc-950, html .bg-zinc-950\/50 { background-color: var(--vs-bg) !important; }
html .bg-zinc-900, html.light-mode .bg-zinc-900, html .bg-white, html .bg-slate-50 { background-color: var(--vs-panel) !important; }
html .bg-zinc-800, html.light-mode .bg-zinc-800, html .bg-zinc-800\/50, html .bg-slate-100, html .bg-blue-50, html .bg-zinc-925 { background-color: var(--vs-panel2) !important; }
html .bg-zinc-700, html.light-mode .bg-zinc-700, html .bg-slate-200 { background-color: var(--vs-panel3) !important; }
html .hover\:bg-zinc-800:hover, html .hover\:bg-zinc-700:hover, html .hover\:bg-slate-100:hover { background-color: var(--vs-hover) !important; }
html .bg-blue-950\/20, html .bg-blue-950\/30, html .bg-blue-950\/40 { background-color: rgba(55,148,255,.10) !important; }
html .bg-amber-950\/20 { background-color: rgba(245,158,11,.10) !important; }
html .bg-violet-950\/20 { background-color: rgba(139,92,246,.10) !important; }
html .bg-emerald-950\/20 { background-color: rgba(16,185,129,.10) !important; }
html .bg-cyan-950\/20 { background-color: rgba(6,182,212,.10) !important; }
html .bg-red-950\/30, html .bg-red-950\/40 { background-color: rgba(239,68,68,.12) !important; }

/* ---------- Tailwind-классы: текст ---------- */
html .text-zinc-100, html.light-mode .text-zinc-100, html .text-zinc-900, html .text-slate-800, html .text-slate-900 { color: #e6e6e6 !important; }
html .text-zinc-200, html.light-mode .text-zinc-200, html .text-zinc-800, html .text-slate-700 { color: #d4d4d4 !important; }
html .text-zinc-300, html.light-mode .text-zinc-300, html .text-zinc-700.strong, html .text-slate-600 { color: var(--vs-text) !important; }
html .text-zinc-400, html.light-mode .text-zinc-400, html .text-slate-500 { color: var(--vs-text2) !important; }
html .text-zinc-500, html.light-mode .text-zinc-500, html .text-slate-400 { color: var(--vs-text3) !important; }
html .text-zinc-600, html.light-mode .text-zinc-600, html .text-zinc-700, html.light-mode .text-zinc-700 { color: var(--vs-text3) !important; }
html .text-blue-400, html .text-blue-500, html .text-blue-600 { color: var(--vs-link) !important; }
html .hover\:text-zinc-300:hover, html .hover\:text-zinc-400:hover, html .hover\:text-zinc-200:hover { color: #ffffff !important; }

/* ---------- Tailwind-классы: границы ---------- */
html .border-zinc-800, html.light-mode .border-zinc-800, html .border-zinc-700, html.light-mode .border-zinc-700,
html .border-slate-200, html .border-slate-300, html .border-blue-200, html .border-blue-900\/40, html .border-blue-900\/50,
html .border-amber-900\/40, html .border-violet-900\/40, html .border-emerald-900\/40, html .border-cyan-900\/40, html .border-red-900\/50,
html .border-zinc-800\/50 { border-color: var(--vs-border) !important; }
html .divide-zinc-800\/50 > * + *, html .divide-zinc-800 > * + * { border-color: var(--vs-border) !important; }
html .hover\:border-zinc-700:hover { border-color: var(--vs-border2) !important; }

/* ---------- карточки, панели, блоки ---------- */
.card, .stat-card, .dealtabs, .statusbox, .stagebox, .briefbox, .supplyq, .sblock, .draftbox, .voicebox,
.kpbox, .note, .note.current, .note.legacy, .mcard, .mbox, .modal-box, .readbody, #saPanel, .sa-rules, .sa-msgs,
.block, .rulechip, .vtab, .stab, .pipe-step, .funnel, .kpi, .panel {
  background: var(--vs-panel) !important;
  border-color: var(--vs-border) !important;
  box-shadow: none !important;
  color: var(--vs-text) !important;
}
.chead, .statusbox .chead, .stagebox .chead, .briefbox .chead, .supplyq .chead, .sblock.cur .chead, .sblock.done .chead,
.kpfoot, .phead, .sa-head, .bhead, .mhead, .mfoot, .kpact, thead, thead th, .stat-card:hover, .sa-msg.bot {
  background: var(--vs-panel2) !important;
  border-color: var(--vs-border) !important;
  color: var(--vs-text) !important;
}
.sblock.cur { border-color: #3794ff55 !important; }
.sblock.cur .chead { box-shadow: inset 3px 0 0 var(--vs-link) !important; }
.statusbox { border-color: #8b5cf655 !important; }
.statusbox .chead { box-shadow: inset 3px 0 0 #a78bfa !important; }
.supplyq { border-color: #ec489955 !important; }
.supplyq .chead { box-shadow: inset 3px 0 0 #f472b6 !important; }
.ctitle, .clabel, .bhead, .note-who, .note-when, .aihint, .muted, .rdate { color: var(--vs-text2) !important; }
.snum, .hchip, .dtab-badge, .kpdel { background: var(--vs-panel3) !important; color: var(--vs-text) !important; border-color: var(--vs-border2) !important; }
.sblock.cur .snum { background: var(--vs-accent) !important; color: var(--vs-on-accent) !important; }
.brief, .analysis, .note-text, .supplyq-text, .cell, .pre, .readbody, .sa-msg, .msg .body, .rtext, .rsubj, .readsubj, .rfrom {
  color: var(--vs-text) !important; background: transparent !important; border-color: var(--vs-border) !important;
}
.analysis.empty { color: var(--vs-text3) !important; }
.note.current { background: #2a2d2e !important; border-color: #8b5cf655 !important; }
.note.current .note-text { color: #e6e6e6 !important; }
.draftbox, .voicebox { background: #262b26 !important; }
.msg.mine .body { background: var(--vs-sel) !important; color: #e6e6e6 !important; }
.sa-msg.user { background: var(--vs-sel) !important; }

/* вкладки карточки сделки и полоса стадий */
.dtab { color: var(--vs-text2) !important; background: transparent !important; border-color: var(--vs-border) !important; }
.dtab:hover { background: var(--vs-hover) !important; color: #fff !important; }
.dtab.active { background: var(--vs-accent) !important; color: var(--vs-on-accent) !important; border-color: var(--vs-accent) !important; }
#pipeline { background: var(--vs-panel) !important; border-color: var(--vs-border) !important; }
.pipe-step { border-color: var(--vs-border) !important; }
.pipe-step:hover { background: var(--vs-hover) !important; }
.pipe-step.active { background: #37373d !important; box-shadow: inset 0 -2px 0 var(--vs-link) !important; }
.pipe-step.active .pipe-label { color: #fff !important; }
.pipe-step.done .pipe-label { color: var(--vs-text2) !important; }

/* ---------- поля ввода ---------- */
input, select, textarea, .ed, .dealmgr-input, .rtext, .sa-input input, .rp-prompt, #commentInput, #searchInput {
  background: var(--vs-input) !important; color: #e6e6e6 !important; border: 1px solid var(--vs-border2) !important;
}
input::placeholder, textarea::placeholder { color: var(--vs-text3) !important; }
input:focus, select:focus, textarea:focus, .ed:focus { border-color: #007fd4 !important; box-shadow: 0 0 0 1px #007fd4 !important; outline: none !important; }
select option { background: var(--vs-input); color: #e6e6e6; }
input[type="checkbox"] { background: var(--vs-input) !important; border: 1px solid var(--vs-border2) !important; }
#dealTitleBar { color: #e6e6e6 !important; background: transparent !important; border-color: transparent !important; }
#dealTitleBar:focus { background: var(--vs-input) !important; border-color: #007fd4 !important; }

/* ---------- кнопки ---------- */
.abtn, .sgo, .btn, .dtbtn, .vbtn, .rp-btn, .stab, .vtab, .donebtn, .supburger, .hbtn, .rp-tab, .sa-tab {
  background: var(--vs-panel3) !important; color: var(--vs-text) !important; border: 1px solid var(--vs-border2) !important;
}
.abtn:hover, .sgo:hover, .btn:hover, .dtbtn:hover, .vbtn:hover, .rp-btn:hover, .stab:hover, .vtab:hover, .rp-tab:hover, .sa-tab:hover {
  background: #3e3e42 !important; color: #fff !important;
}
.abtn:not(.sec):not(.mic), .btn.pri, .sgo.on, .dtbtn.on, .vbtn.on, .stab.on, .vtab.on, .rp-tab.active, .sa-tab.active,
.bg-blue-600, .bg-blue-500, .hover\:bg-blue-500:hover {
  background: var(--vs-accent) !important; color: var(--vs-on-accent) !important; border-color: var(--vs-accent) !important;
}
.abtn:not(.sec):not(.mic):hover, .btn.pri:hover, .bg-blue-600:hover { background: var(--vs-accent2) !important; }
.abtn.mic, .bg-pink-600, .btn.warn { background: #c2185b !important; color: #fff !important; border-color: #c2185b !important; }
.bg-violet-600, .bg-violet-500 { background: #6d3fc0 !important; color: #fff !important; }
.bg-amber-600 { background: #b7791f !important; color: #fff !important; }
.bg-emerald-600, .bg-emerald-500 { background: #1e7e4d !important; color: #fff !important; }
button:disabled { opacity: .55; }

/* ---------- таблицы ---------- */
table { color: var(--vs-text) !important; }
thead, thead th, table th { background: var(--vs-panel2) !important; color: var(--vs-text2) !important; border-color: var(--vs-border) !important; font-size: 10px !important; letter-spacing: .05em; }
table td { padding-top: 7px !important; padding-bottom: 7px !important; border-color: var(--vs-border) !important; }
tbody tr { border-color: var(--vs-border) !important; }
.deal-row:hover td, tr.req:hover td, tr:hover > td.hoverable { background: var(--vs-hover) !important; }
.sdot { border-color: rgba(255,255,255,.25) !important; }

/* ---------- бейджи стадий: цветной текст на приглушённом фоне ---------- */
.badge { padding: 3px 9px !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .01em; }
.badge.stage-clarify { background: rgba(239,68,68,.16) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,.45) !important; animation: none !important; box-shadow: none !important; }
.vcell, .tag { background: var(--vs-panel3) !important; color: var(--vs-text) !important; border: 1px solid var(--vs-border2) !important; }
.vcell.sales { color: #fbbf24 !important; } .vcell.services { color: #67e8f9 !important; }

/* ---------- модальные окна, уведомления ---------- */
.modal-overlay, .modal { background: rgba(0,0,0,.6) !important; }
.notif, .toast { background: var(--vs-panel3) !important; color: #e6e6e6 !important; border: 1px solid var(--vs-border2) !important; }
.glow-blue { box-shadow: 0 0 0 1px var(--vs-link) !important; }

/* ---------- инлайновые светлые цвета из разметки ---------- */
[style*="background:#fff"], [style*="background: #fff"], [style*="background:#f8fafc"], [style*="background: #f8fafc"],
[style*="background:#f1f5f9"], [style*="background:#eef2ff"], [style*="background:#eff6ff"], [style*="background:#f5f3ff"],
[style*="background:#faf5ff"], [style*="background:#fdf2f8"], [style*="background:#f0fdf4"], [style*="background:#fffbeb"],
[style*="background:#fce7f3"], [style*="background:#e0f2fe"], [style*="background:#dbeafe"], [style*="background:white"] {
  background: var(--vs-panel2) !important;
}
[style*="color:#0f172a"], [style*="color:#1e293b"], [style*="color:#334155"], [style*="color:#14532d"], [style*="color:#831843"],
[style*="color:#1e1b4b"], [style*="color:#111"], [style*="color:#000"] { color: var(--vs-text) !important; }
[style*="color:#475569"], [style*="color:#64748b"], [style*="color:#94a3b8"] { color: var(--vs-text2) !important; }
[style*="border:1px solid #e2e8f0"], [style*="border:1px solid #cbd5e1"], [style*="border:1px solid #dbe2ea"],
[style*="border-color:#e2e8f0"], [style*="border-color:#cbd5e1"] { border-color: var(--vs-border) !important; }
.hc-blue, .hc-amber, .hc-violet, .hc-red, .hc-green { background: var(--vs-panel3) !important; }

/* ---------- ссылки ---------- */
a { color: var(--vs-link); }
a:hover { color: #6db3ff; }

/* ---------- полосы прокрутки: заметные, как в редакторе ---------- */
*::-webkit-scrollbar { width: 16px; height: 16px; }
*::-webkit-scrollbar-track { background: var(--vs-bg); }
*::-webkit-scrollbar-thumb { background: #4e4e52; border: 3px solid var(--vs-bg); }
*::-webkit-scrollbar-thumb:hover { background: #6e6e73; }
* { scrollbar-width: auto; scrollbar-color: #4e4e52 var(--vs-bg); }

/* ---------- чат-виджет ---------- */
#chatPane, #chatHead, #chatForm { background: var(--vs-panel) !important; color: var(--vs-text) !important; border-color: var(--vs-border) !important; }
#chatHead { background: var(--vs-panel2) !important; }
#chatBtn { background: var(--vs-accent) !important; color: var(--vs-on-accent) !important; }
.cmsg .body { background: var(--vs-panel2) !important; color: var(--vs-text) !important; }
.cmsg.mine .body { background: #2b5278 !important; }

/* ---------- почта (inbox.html): свои классы ---------- */
.top, .readactions { background: var(--vs-panel2) !important; border-color: var(--vs-border) !important; }
.sidebar, .listpane, .rulespane, #saPanel { background: var(--vs-panel) !important; border-color: var(--vs-border) !important; }
.readpane { background: var(--vs-bg) !important; }
.folder { background: var(--vs-panel3) !important; border-color: var(--vs-border2) !important; color: var(--vs-text2) !important; }
.folder:hover { background: #3e3e42 !important; }
.folder.active { background: #37373d !important; color: #fff !important; border-color: var(--vs-border2) !important; }
.folder .badge { background: var(--vs-panel) !important; color: var(--vs-text) !important; }
.folder.active .badge { background: var(--vs-accent) !important; color: var(--vs-on-accent) !important; }
.row { border-color: var(--vs-border) !important; }
.row:hover { background: var(--vs-hover) !important; }
.row.sel { background: #37373d !important; border-left-color: var(--vs-link) !important; }
.readhead { border-color: var(--vs-border) !important; }
.readsubj { color: #e6e6e6 !important; } .readfrom { color: var(--vs-text) !important; } .readmeta { color: var(--vs-text3) !important; }
.rp-card, .sa-rule, .sa-msg.bot { background: var(--vs-panel2) !important; border-color: var(--vs-border) !important; }
.rp-h, .rp-t, .sa-head { color: var(--vs-text) !important; }

/* ---------- страницы на CSS-переменных (настройки, чат): перекрываем их палитру ---------- */
:root {
  --bg: var(--vs-bg) !important; --card: var(--vs-panel) !important; --line: var(--vs-border) !important;
  --line2: var(--vs-border2) !important; --tx: var(--vs-text) !important; --tx2: var(--vs-text2) !important;
  --tx3: var(--vs-text3) !important; --acc: var(--vs-link) !important; --dark: var(--vs-top) !important;
}
.stabs, .tabs, .rnum { background: var(--vs-panel) !important; border-color: var(--vs-border) !important; color: var(--vs-text) !important; }
.rnum { background: var(--vs-accent) !important; color: var(--vs-on-accent) !important; }
form, .stabs, nav.stabs, .side { background: var(--vs-panel) !important; border-color: var(--vs-border) !important; }

/* ---------- светлые «пастельные» фоны Tailwind (портал снабжения) → тёмные оттенки ---------- */
html .bg-red-50, html .bg-rose-50 { background-color: rgba(239,68,68,.12) !important; }
html .bg-cyan-50 { background-color: rgba(6,182,212,.12) !important; }
html .bg-amber-50, html .bg-yellow-50 { background-color: rgba(245,158,11,.12) !important; }
html .bg-emerald-50, html .bg-green-50 { background-color: rgba(16,185,129,.12) !important; }
html .bg-violet-50, html .bg-purple-50 { background-color: rgba(139,92,246,.12) !important; }
html .bg-blue-50, html .bg-sky-50, html .bg-indigo-50 { background-color: rgba(55,148,255,.12) !important; }
html .bg-slate-50, html .bg-gray-50, html .bg-zinc-50 { background-color: var(--vs-panel2) !important; }
html [class*="bg-red-100"], html [class*="bg-cyan-100"], html [class*="bg-amber-100"], html [class*="bg-emerald-100"],
html [class*="bg-blue-100"], html [class*="bg-violet-100"], html [class*="bg-slate-100"] { background-color: var(--vs-panel3) !important; }
html .text-red-700, html .text-red-600 { color: #f87171 !important; }
html .text-cyan-700, html .text-cyan-800 { color: #67e8f9 !important; }
html .text-amber-700, html .text-amber-800 { color: #fbbf24 !important; }
html .text-emerald-700, html .text-emerald-800, html .text-green-700 { color: #6ee7b7 !important; }
html .text-violet-700 { color: #c4b5fd !important; }
html .text-blue-700, html .text-blue-800 { color: var(--vs-link) !important; }
html .border-red-200, html .border-cyan-200, html .border-amber-200, html .border-emerald-200, html .border-violet-200,
html .border-slate-100, html .border-zinc-100 { border-color: var(--vs-border) !important; }
html .hover\:bg-slate-50:hover, html .hover\:bg-zinc-50:hover, html .hover\:bg-gray-50:hover { background-color: var(--vs-hover) !important; }
/* светофор заявок снабжения: строки тонированы, а не залиты пастелью */
tr.sla-red td { background: rgba(239,68,68,.10) !important; }
tr.sla-red:hover td { background: rgba(239,68,68,.18) !important; }
tr.sla-yellow td { background: rgba(245,158,11,.10) !important; }
tr.sla-yellow:hover td { background: rgba(245,158,11,.18) !important; }
.tag.new { background: rgba(55,148,255,.14) !important; color: #7fb8ff !important; border-color: #3b6ea8 !important; }
.tag.work { background: rgba(245,158,11,.14) !important; color: #fbbf24 !important; border-color: #8a6410 !important; }
.tag.done { background: rgba(16,185,129,.14) !important; color: #6ee7b7 !important; border-color: #1f6b4f !important; }
.tag.question { background: rgba(236,72,153,.14) !important; color: #f9a8d4 !important; border-color: #8a3a63 !important; }
.legend, .legend i { color: var(--vs-text2) !important; }
html [class*="bg-red-50/"] { background-color: rgba(239,68,68,.10) !important; }
html [class*="bg-amber-50/"], html [class*="bg-yellow-50/"] { background-color: rgba(245,158,11,.10) !important; }
html [class*="bg-slate-50/"], html [class*="bg-white/"] { background-color: var(--vs-panel) !important; }
html .srow:hover td, html tr.srow:hover { background-color: var(--vs-hover) !important; }

/* ---------- бейджи стадий: только цветной текст, без рамки и заливки ---------- */
.badge, .badge.stage-clarify, .badge[class*="stage-"] { background: transparent !important; border: none !important; padding: 0 !important; }
.badge.stage-clarify { color: #f87171 !important; }

/* ---------- акцентные элементы под Vulcanico ---------- */
/* акцентные элементы, которые были захардкожены под VS Code */
html .sblock.cur { border-color: var(--vs-accent) !important; }
html .sblock.cur .chead { box-shadow: inset 3px 0 0 var(--vs-accent) !important; }
html .pipe-step.active { box-shadow: inset 0 -2px 0 var(--vs-accent) !important; }
html .statusbox .chead { box-shadow: inset 3px 0 0 var(--vs-accent) !important; }
html .statusbox { border-color: var(--vs-border2) !important; }
html aside .sidebar-item.active, html .folder.active, html .row.sel,
html .pipe-step.active, html #supNav nav a.on { background: var(--vs-panel3) !important; }
html .row.sel { border-left-color: var(--vs-accent) !important; }
html #supNav nav a.on { box-shadow: inset 3px 0 0 var(--vs-accent) !important; }
html .text-blue-400, html .text-blue-500, html a { color: var(--vs-link) !important; }
html input:focus, html select:focus, html textarea:focus, html .ed:focus {
  border-color: var(--vs-accent) !important; box-shadow: 0 0 0 1px var(--vs-accent) !important; }
html .abtn.mic, html .btn.warn { background: var(--vs-panel3) !important; color: var(--vs-text) !important; border-color: var(--vs-border2) !important; }
html .abtn:not(.sec):not(.mic):hover, html .btn.pri:hover, html .bg-blue-600:hover { background: var(--vs-accent2) !important; }


/* ============================================================
   СТИЛЬ ГЛАВНОЙ opentrading.store (20.09.2026): панели на чёрном, тонкие линии,
   заголовки блоков 14px/700, кнопки 13.5px/700, отступы 12–14px, тени как на сайте
   ============================================================ */
.card, .stat-card, .statusbox, .stagebox, .briefbox, .supplyq, .sblock, .draftbox, .voicebox, .kpbox, .mcard, .block, .pbitem, .rp-card, #dealsSection {
  border: 1px solid var(--vs-border) !important; box-shadow: var(--shadow) !important; }
.chead, .bhead, .statusbox .chead, .stagebox .chead, .briefbox .chead, .supplyq .chead, .sblock .chead {
  background: transparent !important; border-bottom: 1px solid var(--vs-border) !important; padding: 12px 14px !important; }
.ctitle, .bhead, .box-h { font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--vs-text) !important; }
.ctitle .hchip, .ctitle .snum { margin-right: 2px; }
.snum { background: var(--vs-accent) !important; color: #fff !important; width: 22px; height: 22px; font-size: 11px; font-weight: 700; }
.hchip { background: var(--vs-panel2) !important; }
.clabel, .sfield .clabel { font-size: 11.5px !important; color: var(--vs-text3) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; }
.p-3, .cbody { padding: 12px 14px !important; }
.brief, .analysis, .note-text, .pre { font-size: 13.5px !important; line-height: 1.55 !important; }
.muted, .aihint, .note-when, .hint { color: var(--vs-text3) !important; font-size: 12.5px !important; }

/* кнопки: главная — оранжевая жирная (.s-btn), второстепенная — на панели с линией */
.abtn, .btn, .sgo, .dtbtn, .vbtn, .rp-btn, .stab, .vtab, .donebtn, .rp-tab, .sa-tab, .hbtn, button.px-3 {
  font-size: 13.5px !important; font-weight: 700 !important; padding: 8px 14px !important; line-height: 1.2 !important;
  background: var(--vs-panel2) !important; color: var(--vs-text) !important; border: 1px solid var(--vs-border) !important; }
.abtn:hover, .btn:hover, .sgo:hover, .dtbtn:hover, .vbtn:hover, .rp-btn:hover, .stab:hover, .vtab:hover { background: var(--vs-panel3) !important; color: #fff !important; }
.abtn:not(.sec):not(.mic), .btn.pri, .sgo.on, .dtbtn.on, .vbtn.on, .stab.on, .vtab.on, .rp-tab.active, .sa-tab.active,
.bg-blue-600, .bg-blue-500, .abtn.mic, .btn.warn {
  background: var(--vs-accent) !important; color: #fff !important; border-color: var(--vs-accent) !important; }
.abtn:not(.sec):not(.mic):hover, .btn.pri:hover, .bg-blue-600:hover, .abtn.mic:hover { background: var(--vs-accent2) !important; }
.sgo.on { background: transparent !important; color: var(--vs-accent) !important; border-color: var(--vs-accent) !important; }
.dtab { font-size: 13.5px !important; font-weight: 600 !important; padding: 8px 14px !important; }
.dtab.active { background: var(--vs-accent) !important; color: #fff !important; }

/* поля: как поиск на сайте — тёмное поле, оранжевая рамка в фокусе */
input, select, textarea, .ed { background: var(--vs-panel2) !important; border: 1px solid var(--vs-border) !important; color: var(--vs-text) !important;
  font-size: 14px !important; padding: 8px 12px !important; }
input:focus, select:focus, textarea:focus, .ed:focus { border-color: var(--vs-accent) !important; box-shadow: none !important; }
input::placeholder, textarea::placeholder { color: var(--vs-text3) !important; }

/* чипы и плашки: как индустрии в B2B-блоке */
.badge, .tag, .vcell, .rulechip, .legend i { font-size: 12.5px !important; font-weight: 600 !important; padding: 5px 10px !important;
  background: var(--vs-panel2) !important; border: 1px solid var(--vs-border) !important; color: var(--vs-text) !important; }
.badge, .badge.stage-clarify, .badge[class*="stage-"] { background: transparent !important; border: none !important; padding: 0 !important; }

/* таблицы: строки как пункты категорий (13.5px, тонкие линии) */
table { font-size: 13.5px !important; }
thead th, table th { background: transparent !important; color: var(--vs-text3) !important; font-size: 11.5px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: 0 !important; border-bottom: 1px solid var(--vs-border) !important; padding: 10px 12px !important; }
table td { padding: 10px 12px !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.deal-row:hover td, tr.req:hover td, .srow:hover td { background: var(--vs-panel2) !important; }
.deal-row td .text-sm, .deal-row td .font-medium { font-size: 13.5px !important; }

/* шапка и меню: панель --surf, пункты 13.5px, активный — оранжевый текст */
html header, html aside, html #sidebar, html #supNav, html #supBar, html header.bg-zinc-950, html aside.bg-zinc-950 {
  background: var(--vs-panel) !important; border-color: var(--vs-border) !important; }
aside .sidebar-item span, #supNav nav a, .si span { font-size: 13.5px !important; }
aside .sidebar-item.active { background: var(--vs-panel2) !important; }
aside .sidebar-item.active span, aside .sidebar-item.active svg, #supNav nav a.on, aside .sidebar-item:hover span { color: var(--vs-accent) !important; }
#supNav nav a.on { background: var(--vs-panel2) !important; box-shadow: none !important; }
.pipe-step.active { background: var(--vs-panel2) !important; box-shadow: inset 0 -2px 0 var(--vs-accent) !important; }
.pipe-step.active .pipe-label { color: var(--vs-accent) !important; font-weight: 700; }
.pipe-label { font-size: 11.5px !important; }
#dealIdBadge { background: var(--vs-panel2) !important; color: var(--vs-accent) !important; border-color: var(--vs-border) !important; font-weight: 700; }
#dealTitleBar { font-size: 15px !important; font-weight: 700 !important; }
a { color: var(--vs-accent); } a:hover { color: #ff7a45; }
.sdot { border-color: rgba(255,255,255,.25) !important; }
#chatBtn { font-weight: 700 !important; }
#navChatBadge, .unread, .tb2 .n { background: #FF3B30 !important; color: #fff !important; font-weight: 700 !important; }
/* мелкие кнопки (переключатели раздела, иконки, «удалить») — компактные */
.vbtn, .dtbtn, .kpdel, .sgo, .btn.mini, button.px-2, button.px-1\.5, .rp-tab, .sa-tab, .hbtn {
  padding: 5px 10px !important; font-size: 12.5px !important; }
.vbtn { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbtn { width: 34px !important; height: 34px !important; padding: 0 !important; }
/* меню: обычные пункты — текст, активный/наведённый — акцент */
#supNav nav a, aside .sidebar-item span, aside .sidebar-item svg, .si, .si span { color: var(--vs-text) !important; }
#supNav nav a:hover, #supNav nav a.on, aside .sidebar-item:hover span, aside .sidebar-item.active span, aside .sidebar-item.active svg, .si.active, .si.active span { color: var(--vs-accent) !important; }
/* поле поиска со значком слева */
#searchInput, input.pl-8 { padding-left: 32px !important; }