/* Clean professional theme: flat solid surfaces, thin borders, neutral greys, tight type, minimal motion.
   Loaded last on every page. Brand colours (primary / buy / sell) still come from the admin palette. */
:root {
  --bg: color-mix(in srgb, var(--primary) 7%, #090c12); --bg-2: color-mix(in srgb, var(--primary) 9%, #0d1118); --surface: color-mix(in srgb, var(--primary) 8%, #10141c); --surface-2: color-mix(in srgb, var(--primary) 11%, #161b25); --surface-3: color-mix(in srgb, var(--primary) 16%, #1e2531);
  --border: color-mix(in srgb, var(--primary) 16%, #222937); --text: #e8ecf3; --muted: #8b95a8;
  --radius: 10px; --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --t: .14s ease;
}
:root[data-theme="light"] {
  --bg: color-mix(in srgb, var(--primary) 6%, #f6f7fa); --bg-2: color-mix(in srgb, var(--primary) 8%, #eef0f5); --surface: #ffffff; --surface-2: color-mix(in srgb, var(--primary) 4%, #f7f8fb); --surface-3: color-mix(in srgb, var(--primary) 10%, #ebeef3);
  --border: color-mix(in srgb, var(--primary) 14%, #dde1e8); --text: #161b26; --muted: #647087;
  --shadow: 0 1px 2px rgba(20, 30, 60, .08);
}
body { letter-spacing: 0; }
::selection { background: color-mix(in srgb, var(--primary) 35%, transparent); }

/* ── Surfaces: flat and solid ─────────────────────────────────────────── */
.pane, .card, .modal, .menu-pop { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: none; }
.pane { border-radius: var(--radius); }
.pane-head h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.modal { border-radius: 12px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.modal-back { background: rgba(6, 9, 14, .6); backdrop-filter: none; }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 8px 16px; }
.logo-mark { background: var(--grad); box-shadow: none; border-radius: 9px; }
.logo { font-weight: 800; letter-spacing: -.01em; }
.nav-link { font-weight: 600; font-size: 13.5px; padding: 7px 12px; border-radius: 8px; transition: color var(--t), background var(--t); }
.nav-link:hover { background: var(--surface-2); }
.nav-link.on { background: color-mix(in srgb, var(--primary) 20%, transparent); box-shadow: none; border-radius: 8px; color: var(--text); }
.icon-btn { border-radius: 9px; transition: border-color var(--t), background var(--t); }
.icon-btn:hover { background: var(--surface-3); }
.conn { border: 1px solid var(--border); background: transparent; }
.avatar { background: var(--grad); }
.menu-pop { border-radius: 10px; }

/* ── Buttons & inputs ─────────────────────────────────────────────────── */
.btn { border-radius: var(--radius-sm); font-weight: 600; transition: background var(--t), border-color var(--t), filter var(--t); }
.btn:hover:not(:disabled) { filter: brightness(1.1); }
.btn:active:not(:disabled) { transform: none; filter: brightness(.95); }
.btn-primary { background: var(--grad); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn-buy { background: var(--buy); }
.btn-sell { background: var(--sell); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }
.input { background: var(--surface-2); border-radius: var(--radius-sm); transition: border-color var(--t), box-shadow var(--t); }
.input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent); }
.seg { background: var(--surface-2); border-radius: 9px; }
.seg-btn { border-radius: 7px; transition: background var(--t), color var(--t); }
.seg-btn.on { background: var(--grad); color: #fff; box-shadow: none; }
.badge { border-radius: 6px; }

/* ── Instruments ──────────────────────────────────────────────────────── */
.inst-row { transition: background var(--t); }
.inst-row:hover { background: var(--surface-2); }
.inst-row.sel { background: var(--surface-2); border-color: transparent; box-shadow: inset 2px 0 0 var(--primary); border-radius: 8px; }
[dir="rtl"] .inst-row.sel { box-shadow: inset -2px 0 0 var(--primary); }
.pill { border-radius: 5px; background: var(--surface-2); }
.inst-row:hover .pill { background: var(--surface-3); }
.pill.rise { background: var(--buy-bg); }
.pill.fall { background: var(--sell-bg); }
.fav.on { color: var(--amber); }

/* ── Order ticket ─────────────────────────────────────────────────────── */
.two.go .btn { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 13.5px; }

/* ── Tabs & tables ────────────────────────────────────────────────────── */
.tab { font-weight: 600; transition: color var(--t); }
.tab.on { border-bottom-color: var(--primary); color: var(--primary-2); }
.count { background: var(--surface-3); color: var(--muted); border-radius: 6px; }
.tbl th { background: var(--surface); }
.tbl tr:hover td { background: var(--surface-2); }
.tbl td { transition: background var(--t); }

/* ── Toasts (keep quick and quiet) ────────────────────────────────────── */
.toast { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); backdrop-filter: none; animation: tin .18s ease-out; }
.toast:not(.ok):not(.err) { --c: var(--primary-2); }

/* ── Scrollbars ───────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }


:focus-visible { outline: 2px solid var(--primary-2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ── Language dropdown ────────────────────────────────────────────────── */
.lang { position: relative; }
.lang-btn { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; cursor: pointer; user-select: none; font-weight: 600; font-size: 13.5px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); transition: border-color var(--t), background var(--t); }
.lang-btn::-webkit-details-marker { display: none; }
.lang-btn:hover, .lang[open] .lang-btn { border-color: var(--primary); background: var(--surface-3); }
.lang-globe { color: var(--primary-2); }
.lang-chev { color: var(--muted); transition: transform .18s ease; }
.lang[open] .lang-chev { transform: rotate(180deg); }
.lang-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 170px; padding: 5px; z-index: 200; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, .4); animation: tin .14s ease-out; }
.lang-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--text); font-weight: 600; font-size: 13.5px; transition: background var(--t); }
.lang-item:hover { background: var(--surface-2); }
.lang-item.on { color: var(--primary-2); background: color-mix(in srgb, var(--primary) 12%, transparent); }
@media (max-width: 700px) { .lang-btn span { display: none; } .lang-btn { padding: 0 10px; } }