/* =====================================================================
   site.css — shared styles for every page (Site.Master)
   colors, fonts, top bar, header/menu, alert rotator, footer
   ===================================================================== */
:root{
  --night:#0d1122;
  --deep:#131a33;
  --panel:#18203f;
  --line:#2a3560;
  --text:#e9ecf9;
  --muted:#98a2cc;
  --sun:#ffb23f;
  --flare:#ff7a45;
  --ok:#4fd1b0;
  --storm:#ff5d6c;
  --radius:10px;
  --font:'Vazirmatn',Tahoma,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--night);color:var(--text);
  line-height:1.8;font-size:16px;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 500px at 85% -10%,rgba(255,178,63,.10),transparent 60%);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:4px}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- top bar & header ---------- */
.topbar{border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px;flex-wrap:wrap}
.topbar .live{display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(79,209,176,.6);animation:ping 2.4s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(79,209,176,0)}100%{box-shadow:0 0 0 0 rgba(79,209,176,0)}}
header.main{position:sticky;top:0;z-index:20;background:rgba(13,17,34,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.main .wrap{display:flex;align-items:center;gap:28px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px;white-space:nowrap}
.brand svg{width:34px;height:34px;flex:none}
.brand small{display:block;font-weight:400;font-size:11.5px;color:var(--muted);line-height:1.2}
nav.menu{flex:1}
nav.menu ul{list-style:none;display:flex;gap:4px;flex-wrap:wrap}
nav.menu a{display:block;padding:8px 14px;border-radius:8px;color:var(--muted);font-size:15px;transition:color .15s,background .15s}
nav.menu a:hover,nav.menu a[aria-current]{color:var(--text);background:var(--panel)}
.lang{border:1px solid var(--line);border-radius:8px;padding:5px 12px;font-size:13px;color:var(--muted)}
.lang:hover{color:var(--text);border-color:var(--muted)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:8px}

/* ---------- alert rotator ---------- */
.alerts{position:relative;background:linear-gradient(90deg,rgba(255,93,108,.16),rgba(255,178,63,.07));border-bottom:1px solid var(--line)}
.alerts .wrap{display:flex;gap:14px;align-items:center;min-height:52px}
.alabel{flex:none;display:flex;align-items:center;gap:8px;color:var(--storm);font-weight:700;font-size:14px;padding-inline-end:14px;border-inline-end:1px solid var(--line)}
.alabel .dot{background:var(--storm);animation:pingr 2s infinite}
@keyframes pingr{70%{box-shadow:0 0 0 8px rgba(255,93,108,0)}100%{box-shadow:0 0 0 0 rgba(255,93,108,0)}}
.rot{flex:1;min-width:0;display:grid;overflow:hidden}
.slide{grid-area:1/1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;font-size:14.5px;
  opacity:0;transform:translateY(100%);visibility:hidden;pointer-events:none}
.slide.active,.slide.leaving{transition:transform .45s cubic-bezier(.22,.8,.3,1),opacity .35s ease}
.slide.active{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.slide.leaving{opacity:0;transform:translateY(-100%);visibility:visible}
.slide:hover .t{text-decoration:underline}
.slide time{color:var(--muted);font-size:12.5px}
.sev{font-size:11.5px;font-weight:700;border-radius:999px;padding:0 9px;line-height:1.7;flex:none}
.sev.warn{background:rgba(255,93,108,.2);color:var(--storm)}
.sev.watch{background:rgba(255,178,63,.18);color:var(--sun)}
.sev.obs{background:rgba(111,183,255,.18);color:#6fb7ff}
.rctl{flex:none;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.rctl .cnt{min-width:42px;text-align:center}
.rbt{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--muted)}
.rbt:hover{color:var(--text);border-color:var(--muted)}
.alerts .more{flex:none;color:var(--sun);font-size:13.5px;white-space:nowrap}
.prog{position:absolute;bottom:0;inset-inline-start:0;height:2px;width:0;background:var(--sun);opacity:.8}
@keyframes alprog{from{width:0}to{width:100%}}
.alerts:hover .prog,.alerts:has(:focus-visible) .prog{animation-play-state:paused!important}
@media (max-width:720px){.alabel .lt{display:none}.alerts .more{display:none}.rctl .cnt{display:none}.slide{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.slide.active,.slide.leaving{transition:none}}

/* ---------- footer ---------- */
footer{margin-top:50px;border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer ul{list-style:none;display:flex;gap:18px;flex-wrap:wrap}
footer a:hover{color:var(--text)}

/* ---------- header on mobile ---------- */
@media (max-width:720px){
  .burger{display:grid;place-items:center;margin-inline-start:auto}
  nav.menu{display:none;position:absolute;top:68px;inset-inline:0;background:var(--night);border-bottom:1px solid var(--line);padding:10px 20px 16px}
  nav.menu.open{display:block}
  nav.menu ul{flex-direction:column}
  header.main .lang{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}