/*  VOLURR — main stylesheet (extracted from index.html)  */
:root{
  /* institutional terminal — graphite + deep navy + premium gold */
  --bg:#070a12; --bg2:#0b0f1a; --card:#0f1422; --card2:#141a2a;
  --line:#1e2536; --muted:#7a839a; --txt:#eef2fa; --txt2:#bcc5d8;
  /* premium gold (Bloomberg) */
  --gold:#e23b3b; --gold2:#c02a2a; --red-deep:#3a2c0a;
  --up:#26d07c; --down:#ff4d5e; --flat:#7a839a;
  --accent:#e23b3b; --glow:rgba(226,59,59,.22);
  --cyan:#3fb5c4; --navy:#0d1830;
  --r:14px; --r2:10px;
  --shadow:0 6px 26px rgba(0,0,0,.5);
  --cardgrad:linear-gradient(160deg,#121829,#0d1220);
}
/* ===== LIGHT THEME (clean WHITE — reference image 1) ===== */
html[data-theme="light"]{
  --bg:#eef0f4; --bg2:#f6f7fa; --card:#ffffff; --card2:#f3f5f8;
  --line:#e4e7ee; --muted:#6b7185; --txt:#14161c; --txt2:#474d5c;   /* muted darkened for WCAG AA (was #8b90a0 = 3.19:1 on white → now 4.86:1) */
  --gold:#d62f2f; --gold2:#b32424; --red-deep:#f0dede;
  --up:#12a05f; --down:#dd3a44; --flat:#8b90a0;
  --accent:#d62f2f; --glow:rgba(214,47,47,.15);
  --cyan:#2a8a98; --navy:#e7eaf1;
  --shadow:0 6px 22px rgba(40,55,90,.10);
  --cardgrad:linear-gradient(160deg,#ffffff,#fafbfd);
}
html[data-theme="light"] body{
  color:var(--txt);
  background:
    radial-gradient(1100px 500px at 80% -5%, rgba(214,47,47,.07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(225,229,238,.5), transparent 55%),
    var(--bg);
}
/* light-mode overrides for surfaces that hardcode dark colors */
html[data-theme="light"] .ticker{background:linear-gradient(90deg,#ffffff,#f3f5f9)}
html[data-theme="light"] .topbar{background:rgba(248,250,252,.85)}
html[data-theme="light"] .langs,html[data-theme="light"] .exitbtn,
html[data-theme="light"] .chtf,html[data-theme="light"] .chcard .chset,
html[data-theme="light"] .chcard .chico{background:#eef1f6}
html[data-theme="light"] .gmap{background:radial-gradient(ellipse at center,#f1f4f9,#e6eaf1)}
html[data-theme="light"] .gmap .worldimg{opacity:.25;filter:saturate(1.2)}
html[data-theme="light"] .gmap .node .rn{text-shadow:0 1px 3px rgba(255,255,255,.95),0 0 2px rgba(255,255,255,.9)}
html[data-theme="light"] .gmap .node .rc{text-shadow:0 1px 3px rgba(255,255,255,.95)}
html[data-theme="light"] .langs button.on,html[data-theme="light"] .chtf button.on{color:#fff}
html[data-theme="light"] .card.chcard{--c-2:#8b90a0;--c-bd:#e4e7ee;background:#ffffff}
html[data-theme="light"] .chcard .chpair,html[data-theme="light"] .chcard .chq .cpx,
html[data-theme="light"] .chohlc .ohv,html[data-theme="light"] .chfoot .ov{color:#14161c}
html[data-theme="light"] .msg.u{color:#fff}
html[data-theme="light"] .side{background:linear-gradient(180deg,#ffffff,#f2f4f8)}
html[data-theme="light"] .nav .it:hover{background:#eef1f6}
html[data-theme="light"] .gmap .mlegend{background:rgba(255,255,255,.82);color:var(--txt2)}
html[data-theme="light"] .burger{background:var(--card)}
html[data-theme="light"] .modal .mbox,html[data-theme="light"] .login-card{background:var(--card)}
html[data-theme="light"] .chip,html[data-theme="light"] .cbar input{background:var(--card2)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Cairo','Inter',system-ui,sans-serif;
  color:var(--txt); -webkit-font-smoothing:antialiased; overflow-x:hidden;
  /* ambient glow background */
  background:
    radial-gradient(1100px 500px at 80% -5%, rgba(226,59,59,.09), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(13,24,48,.5), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
/* Kurdish Sorani — Vazirmatn renders Kurdish letters (ێ ڵ ۆ ڕ ژ) cleanly */
html[lang="ku"] body, html[lang="ku"] button, html[lang="ku"] input, html[lang="ku"] .nav .it{
  font-family:'Vazirmatn','Noto Kufi Arabic','Cairo',sans-serif;
}
body.ltr{direction:ltr}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
a{color:inherit;text-decoration:none}

/* ===== Top ticker ===== */
.ticker{
  position:fixed;top:0;left:0;right:0;height:34px;z-index:60;
  background:linear-gradient(90deg,#0d1118,#141a26);
  border-bottom:1px solid var(--line); display:flex;align-items:center;
  overflow:hidden; font-size:12.5px;
}
.ticker .run{display:flex;gap:34px;white-space:nowrap;animation:tick 32s linear infinite;padding-inline:20px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker b{color:var(--gold)} .ticker .u{color:var(--up)} .ticker .d{color:var(--down)}

/* ===== Admin broadcast banner (global, dismissible) ===== */
.vannounce{display:flex;align-items:center;gap:11px;margin:0 0 14px;padding:11px 15px;
  border-radius:11px;background:var(--card);border:1px solid var(--line);
  border-inline-start:3px solid var(--accent);color:var(--txt);font-size:13.5px;line-height:1.45;
  box-shadow:0 4px 18px rgba(0,0,0,.18);animation:vannIn .35s ease}
@keyframes vannIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.vannounce.warn{border-inline-start-color:var(--down);background:linear-gradient(90deg,rgba(255,77,94,.10),var(--card))}
.vannounce.success{border-inline-start-color:var(--up);background:linear-gradient(90deg,rgba(38,208,124,.10),var(--card))}
.vannounce .va-ic{font-size:17px;flex:0 0 auto}
.vannounce .va-msg{flex:1 1 auto;font-weight:600}
.vannounce .va-x{flex:0 0 auto;background:transparent;border:0;color:var(--muted);cursor:pointer;
  font-size:15px;line-height:1;padding:4px 6px;border-radius:6px}
.vannounce .va-x:hover{background:var(--card2);color:var(--txt)}

/* ===== Layout ===== */
.app{display:flex;min-height:100vh;padding-top:34px}
.side{
  width:208px;flex-shrink:0;background:linear-gradient(180deg,#0d1018,#0a0c12);
  border-inline-end:1px solid var(--line);
  position:fixed;top:34px;bottom:0;display:flex;flex-direction:column;z-index:50;
  transition:transform .25s ease;
}
.brand{padding:16px 15px 15px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);direction:ltr}
.brand .blogo{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;overflow:hidden}
/* premium 3D shield PNG has transparent margins → cover + scale fills the box; drop-shadow gives the red glow */
.brand .blogo img{width:100%;height:100%;object-fit:cover;transform:scale(1.6);filter:drop-shadow(0 1px 5px var(--glow))}
.brand .binfo{min-width:0;line-height:1}
.brand .nm{font-weight:900;font-size:17.5px;letter-spacing:.3px;color:var(--txt);display:flex;align-items:center}
.brand .nm .g{color:var(--gold)}
.brand .nm .agi{font-size:8.5px;font-weight:800;color:#fff;letter-spacing:.6px;margin-inline-start:7px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));padding:2.5px 5px;border-radius:5px}
.brand .sub{font-size:8.5px;color:var(--muted);margin-top:6px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;white-space:nowrap}
body.sidecollapsed .brand .blogo{margin:0 auto}
.nav{flex:1;overflow-y:auto;padding:8px 9px}
.nav .it{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r2);
  color:var(--txt2);cursor:pointer;font-weight:600;font-size:13.5px;margin-bottom:2px;
  transition:all .15s; position:relative;
}
.nav .it .ic{width:19px;height:19px;flex-shrink:0;opacity:.82;transition:opacity .15s}
.nav .it:hover .ic,.nav .it.on .ic{opacity:1}
.nav .it > span:not(.ic):not(.badge){flex:1}
.nav .it:hover{background:var(--card);color:var(--txt)}
.nav .it.on{background:linear-gradient(90deg,rgba(226,59,59,.05),rgba(226,59,59,.16));color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(226,59,59,.28)}
.nav .it.on .ic{filter:drop-shadow(0 0 6px var(--glow))}
.nav .it.on::before{content:"";position:absolute;inset-inline-end:0;top:8px;bottom:8px;width:3px;
  background:var(--gold);border-radius:3px;box-shadow:0 0 10px var(--gold)}
.nav .it .badge{margin-inline-start:auto;background:var(--gold);color:#fff;font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:20px}
/* sidebar user card */
.sideuser{display:flex;align-items:center;gap:10px;margin:6px 9px 4px;padding:9px 10px;border-radius:12px;
  background:var(--card);border:1px solid var(--line)}
.sideuser .su-av{width:36px;height:36px;border-radius:10px;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--gold),var(--gold2));display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px}
.sideuser .su-av img{width:100%;height:100%;object-fit:cover}
.sideuser .su-info{flex:1;min-width:0}
.sideuser .su-nm{font-weight:800;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
.sideuser .su-rl{font-size:10px;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:5px;margin-top:2px}
.sideuser .su-rl .su-dot{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 5px var(--up)}
.sideuser .su-out{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted);cursor:pointer;flex-shrink:0;transition:.13s}
.sideuser .su-out:hover{color:var(--down);background:rgba(255,77,94,.1)}
body.sidecollapsed .sideuser{justify-content:center;padding:9px 0;margin:6px 6px}
body.sidecollapsed .sideuser .su-info,body.sidecollapsed .sideuser .su-out{display:none}
.side .foot{padding:10px 14px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}
/* collapse toggle button */
.collapse-btn{position:absolute;top:18px;inset-inline-end:-12px;width:24px;height:24px;border-radius:50%;
  background:var(--gold);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;
  font-size:13px;font-weight:900;z-index:55;box-shadow:0 2px 10px rgba(0,0,0,.5);transition:transform .2s}
.collapse-btn:hover{transform:scale(1.12)}
@media (pointer:coarse){ .collapse-btn{width:32px;height:32px;inset-inline-end:-16px;font-size:15px} }   /* touch: comfortable tap target (absolutely-positioned → no reflow) */
/* collapsed state — icons only */
body.sidecollapsed .side{width:62px}
body.sidecollapsed .main{margin-inline-start:62px}
body.sidecollapsed .brand .nm,body.sidecollapsed .brand .sub,
body.sidecollapsed .nav .it > span:not(.ic),body.sidecollapsed .side .foot{display:none}
body.sidecollapsed .brand{justify-content:center;padding:14px 0}
body.sidecollapsed .nav .it{justify-content:center;padding:11px 0}
body.sidecollapsed .collapse-btn{transform:rotate(180deg)}
body.sidecollapsed .collapse-btn:hover{transform:rotate(180deg) scale(1.12)}
.side,.main{transition:width .22s ease,margin .22s ease}

.main{flex:1;margin-inline-start:208px;min-width:0;display:flex;flex-direction:column}
.topbar{
  height:66px;display:flex;align-items:center;gap:14px;padding:0 26px;
  border-bottom:1px solid var(--line);position:sticky;top:34px;background:rgba(8,10,16,.78);
  backdrop-filter:blur(16px) saturate(140%);z-index:40;
}
.topbar h1{font-size:19px;font-weight:800;flex:1}
.mkt{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;padding:7px 14px;
  border-radius:20px;background:var(--card);border:1px solid var(--line)}
.mkt .dot{width:8px;height:8px;border-radius:50%}
.dot.o{background:var(--up);box-shadow:0 0 9px var(--up)} .dot.c{background:var(--down)}
/* segmented language switcher + exit */
.langs{display:inline-flex;gap:2px;background:#0d1626;border:1px solid var(--line);border-radius:999px;padding:3px}
.langs button{background:transparent;border:0;color:var(--txt2);font-family:inherit;font-weight:700;font-size:11.5px;
  padding:6px 14px;border-radius:999px;cursor:pointer;transition:.13s;letter-spacing:.4px}
.langs button:hover{color:var(--txt)}
.langs button.on{background:var(--gold);color:#fff;box-shadow:0 1px 6px rgba(226,59,59,.4)}
.exitbtn{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#0d1626;
  display:grid;place-items:center;color:var(--txt2);cursor:pointer;transition:.13s;flex-shrink:0}
.exitbtn:hover{color:var(--down);border-color:var(--down);background:rgba(255,77,94,.08)}
.themebtn .ic-moon{display:none}
html[data-theme="light"] .themebtn .ic-sun{display:none}
html[data-theme="light"] .themebtn .ic-moon{display:block}
.themebtn:hover{color:var(--gold)!important;border-color:var(--gold)!important;background:var(--glow)!important}
.burger{display:none;background:var(--card);border:1px solid var(--line);color:var(--txt);
  width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:18px}

.view{padding:16px;display:none;animation:fade .3s}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}