:root{
  --night-bg:#1E1B4B; --night-ink:#F4F3EE; --night-ink2:#B9B7CE; --night-ink3:#8F8CB0;
  --night-line:rgba(231,241,238,.20); --night-line-soft:rgba(231,241,238,.12);
  --night-surface:#26235A; --mint:#E7F1EE; --coral:#FF6B4A; --paper:#F4F3EE;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;background:var(--paper);color:#1E1B4B}
#app{min-height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);transition:background .6s ease,color .6s ease}
#app.night{--bg:var(--night-bg);--ink:var(--night-ink);--ink2:var(--night-ink2);--ink3:var(--night-ink3);
  --line:var(--night-line);--line-soft:var(--night-line-soft);--surface:var(--night-surface);--plate:transparent;--plate-pad:0}
#app.day{--bg:var(--paper);--ink:#1E1B4B;--ink2:#4E4B73;--ink3:#6B6890;
  --line:rgba(30,27,75,.20);--line-soft:rgba(30,27,75,.12);--surface:#EBE9EA;--plate:#1E1B4B;--plate-pad:6px 14px}

header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:20px 32px 0}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.plate{display:flex;align-items:center;gap:10px;padding:var(--plate-pad);border-radius:12px;background:var(--plate)}
.plate .mark{height:28px;width:auto;display:block}
.plate .word{height:44px;width:auto;display:block;margin:-6px 0}
.divider{width:1px;height:24px;background:var(--line)}
.sub{font-weight:700;font-size:22px}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.searchwrap{position:relative;display:flex;align-items:center}
.searchwrap svg{position:absolute;inset-inline-start:14px;width:18px;height:18px;color:var(--ink2)}
.search{width:340px;max-width:70vw;height:44px;padding-inline:44px 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:15px}
.search::placeholder{color:var(--ink3)}
.linkbtn{height:44px;display:flex;align-items:center;padding:0 12px;font-size:15px;color:var(--ink);background:none;border:0;font-family:inherit;cursor:pointer}
.iconbtn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.iconbtn svg{width:20px;height:20px}

.stats{display:flex;flex-wrap:wrap;gap:12px 48px;padding:22px 32px 0}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .k{font-size:13px;color:var(--ink2)}
.stat .v{display:flex;align-items:center;gap:10px;font-weight:700;font-size:26px;line-height:1.3}
.stat small{font-weight:500;font-size:15px;color:var(--ink2)}
.livedot{width:9px;height:9px;border-radius:50%;background:var(--coral);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

#mapWrap{position:relative;width:100%;aspect-ratio:1440/627;margin-top:12px}
#map{position:absolute;inset:0;width:100%;height:100%;display:block}
.west{position:absolute;left:32px;bottom:20px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
.west svg{width:28px;height:10px}
.tip{position:absolute;padding:6px 10px;border-radius:8px;background:#1E1B4B;color:#F4F3EE;font-size:13px;border:1px solid rgba(231,241,238,.2);pointer-events:none;white-space:nowrap}

footer{margin-top:auto;border-top:1px solid var(--line-soft);padding:16px 32px 20px;display:flex;flex-direction:column;gap:14px}
.ticker{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:17px;line-height:1.6}
.ticker i{width:8px;height:8px;border-radius:50%;background:var(--coral)}
.ticker #tkNow{color:var(--now);font-weight:700}
.sep{color:var(--ink3)}
.muted{color:var(--ink2)}
.timeline{display:flex;align-items:center;gap:20px}
.livebtn{flex:none;height:44px;padding:0 18px;border-radius:22px;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:inherit;font-size:15px;font-weight:500;display:flex;align-items:center;gap:8px;cursor:pointer}
.livebtn i{width:8px;height:8px;border-radius:50%;background:var(--ink3)}
.livebtn.on{border-color:var(--coral)}
.livebtn.on i{background:var(--coral)}
.scrubwrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.scrub{-webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;margin:0;cursor:pointer}
.scrub::-webkit-slider-runnable-track{height:2px;background:var(--line);border-radius:2px}
.scrub::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;background:var(--coral);border:3px solid var(--bg)}
.scrub::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--coral);border:3px solid var(--bg)}
.ticks{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3)}

.panel{position:fixed;inset:0;background:rgba(30,27,75,.45);display:flex;align-items:center;justify-content:center;padding:24px;z-index:20}
.panel-inner{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:560px;width:100%;max-height:80vh;overflow:auto}
.panel h2{margin:0 0 12px;font-size:22px}
.panel h3{margin:18px 0 8px;font-size:15px;color:var(--ink2);font-weight:500}
.panel .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:16px}
.panel .close{margin-top:18px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--ink);font-family:inherit;cursor:pointer}
.panel select,.panel input[type=text]{height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:inherit;padding:0 10px;width:100%}
.res{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.res button{text-align:start;padding:10px;border-radius:10px;border:1px solid var(--line-soft);background:transparent;color:var(--ink);font-family:inherit;cursor:pointer}
body{overflow-x:hidden}
@media (max-width:760px){
  header{padding:14px 16px 0;gap:12px}
  .brand{width:100%;justify-content:flex-start}
  .plate .word{height:36px}
  .tools{width:100%;flex-wrap:wrap;gap:8px}
  .searchwrap{order:-1;width:100%}
  .search{width:100%;max-width:none}
  .linkbtn{padding:0 8px;font-size:14px}
  .stats{padding:14px 16px 0;gap:12px 20px}
  .stat .v{font-size:19px}
  .stat .k{font-size:12px}
  #mapWrap{aspect-ratio:390/225;margin-top:10px}
  .west{left:16px;bottom:12px;font-size:12px}
  footer{padding:12px 16px 16px;gap:10px}
  .ticker{font-size:15px}
  .timeline{flex-wrap:wrap;gap:10px}
  .livebtn{height:40px;padding:0 14px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.livedot{animation:none}}