:root{
  color-scheme: dark;
  --bg:#050a08; --bg-2:#07100d;
  --panel:#0a1411; --panel-2:#0d1a16; --panel-3:#11231d;
  --line:#173127; --line-2:#23483a; --line-3:#2f6a52;
  --ink:#e6f1eb; --ink-2:#c3d6cc; --mute:#86a396; --dim:#4f6a5e;
  --glow:#45e586; --glow-2:#1fa85a; --glow-soft:rgba(69,229,134,.14); --glow-line:rgba(69,229,134,.35);
  --flag:#01411c; --white:#f6fbf8;
  --amber:#f2b84b; --red:#ff5d5d; --sky:#6fb7ff;
  --radius:10px;
  --f-head:"Saira Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --f-body:"Saira",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-data:"Share Tech Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --f-ur:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink)}
body{margin:0;font-family:var(--f-body);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 600px at 85% -10%,rgba(31,168,90,.10),transparent 60%),
    radial-gradient(900px 500px at -10% 110%,rgba(31,168,90,.07),transparent 60%),
    var(--bg);
  min-height:100%;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--glow);outline-offset:2px;border-radius:4px}
.app{max-width:1680px;margin:0 auto;padding-inline:clamp(16px,2vw,28px);padding-block:14px 20px;display:flex;flex-direction:column;gap:12px}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-mark{width:44px;height:44px;flex:none}
.brand h1{margin:0;font-family:var(--f-head);font-weight:500;font-size:clamp(20px,1.6vw,34px);letter-spacing:.02em;text-transform:uppercase;line-height:1.05;text-wrap:balance}
.brand h1 b{font-weight:700;color:var(--white)}
.brand h1 span{color:var(--ink-2);font-weight:400}
.top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip-status{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--f-head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px;background:var(--panel)}
.chip-status .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.chip-status.live .dot{background:var(--glow);box-shadow:0 0 10px var(--glow);animation:pulse 1.6s infinite}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:transparent;padding:6px 12px;font-family:var(--f-head);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:12px;color:var(--mute)}
.seg button[aria-pressed="true"]{background:var(--glow-soft);color:var(--glow)}
.seg-label{font-size:11px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;font-family:var(--f-head)}

.strip{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(90deg,var(--panel) 0%,rgba(13,40,28,.9) 45%,var(--panel) 100%);overflow:hidden}
.strip::after{content:"";position:absolute;right:-60px;top:-90px;width:260px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 35% 65%,rgba(69,229,134,.35),rgba(31,168,90,.08) 55%,transparent 70%);border-top:1px solid rgba(69,229,134,.35);pointer-events:none}
.strip .lbl{font-family:var(--f-head);font-weight:600;font-size:clamp(15px,1.4vw,21px);letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}
.strip .eyes{justify-self:center;font-family:var(--f-head);font-weight:700;font-size:clamp(16px,1.7vw,26px);letter-spacing:.02em;text-transform:uppercase;text-align:center}
.strip .eyes em{font-style:normal;color:var(--glow);text-transform:none}
.strip .tle{font-family:var(--f-data);font-size:12px;color:var(--mute);position:relative;z-index:1;text-align:right}

/* ---------- grid ---------- */
.grid{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:12px}
#p-about{grid-column:span 7}
#p-clockcol{grid-column:span 6;display:flex;flex-direction:column;gap:12px}
#p-track{grid-column:span 7}
#p-astro{grid-column:span 7}
#p-overpass{grid-column:span 8}
#p-wishes{grid-column:span 5}
#p-feed{grid-column:1/-1}
@media (max-width:1280px){
  #p-about{grid-column:span 10} #p-clockcol{grid-column:span 10} #p-track{grid-column:1/-1}
  #p-astro{grid-column:span 10} #p-wishes{grid-column:span 10} #p-overpass{grid-column:1/-1;order:5}
}
@media (max-width:820px){ .grid>*{grid-column:1/-1 !important} #p-overpass{order:0} }

.panel{position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 18px;min-width:0;display:flex;flex-direction:column;gap:12px}
.panel::before,.panel::after{content:"";position:absolute;width:14px;height:14px;border-color:var(--line-3);border-style:solid;pointer-events:none;opacity:.8}
.panel::before{top:-1px;left:-1px;border-width:1px 0 0 1px;border-top-left-radius:var(--radius)}
.panel::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;border-bottom-right-radius:var(--radius)}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ph h2{margin:0;font-family:var(--f-head);font-weight:700;font-size:clamp(19px,1.55vw,25px);letter-spacing:.02em;text-transform:uppercase;line-height:1.05;text-wrap:balance}
.ph h2 small{font-weight:500;color:var(--ink-2);font-size:.72em;letter-spacing:.04em}
.ph .sub{font-size:12px;color:var(--mute);margin-top:4px}
.tag{font-family:var(--f-head);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:4px;border:1px solid var(--line-2);color:var(--mute);white-space:nowrap}
.tag.sim{color:var(--amber);border-color:rgba(242,184,75,.4)}
.tag.live{color:var(--glow);border-color:var(--glow-line)}
.inset{background:rgba(3,8,6,.55);border:1px solid var(--line);border-radius:8px}
.kicker{font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

/* ---------- Panel 1: About CSS ---------- */
.about-body{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;flex:1}
@media (max-width:560px){.about-body{grid-template-columns:1fr}}
.station-wrap{position:relative;min-height:300px;overflow:hidden;cursor:grab;touch-action:pan-y}
.station-wrap:active{cursor:grabbing}
.station-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mlabel{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.1em;color:var(--ink-2);text-transform:uppercase;pointer-events:auto;cursor:pointer;padding:2px 6px;border-radius:3px;background:rgba(5,10,8,.55);border:1px solid transparent;white-space:nowrap;transition:color .2s,border-color .2s}
.mlabel.on{color:var(--glow);border-color:var(--glow-line)}
.station-hint{position:absolute;left:10px;bottom:8px;font-size:11px;color:var(--dim);pointer-events:none}
.module-card{position:absolute;right:10px;top:10px;max-width:220px;padding:10px 12px;font-size:12px;line-height:1.4;background:rgba(5,12,9,.88);border:1px solid var(--glow-line);border-radius:8px;backdrop-filter:blur(4px);transition:opacity .25s,transform .25s}
.module-card[hidden]{display:block!important;opacity:0;transform:translateY(-6px);pointer-events:none}
.module-card h3{margin:0 0 4px;font-family:var(--f-head);font-size:16px;letter-spacing:.06em;color:var(--glow);text-transform:uppercase}
.module-card dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0}
.module-card dt{color:var(--mute)} .module-card dd{margin:0;font-family:var(--f-data)}
.facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;justify-content:center}
.facts li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start}
.facts svg{width:28px;height:28px;stroke:var(--glow);fill:none;stroke-width:1.6}
.facts .k{font-family:var(--f-head);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.facts .v{font-family:var(--f-head);font-weight:700;font-size:19px;line-height:1.1;text-transform:uppercase}
.facts .d{font-size:12px;color:var(--mute);margin-top:2px}
.mod-chips{display:flex;gap:6px;flex-wrap:wrap}
.mod-chips button{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:4px 10px;font-family:var(--f-head);font-weight:600;letter-spacing:.08em;font-size:12px;text-transform:uppercase;color:var(--mute)}
.mod-chips button[aria-pressed="true"]{color:var(--glow);border-color:var(--glow-line);background:var(--glow-soft)}

/* ---------- Panel 2: clock ---------- */
.clock-face{padding:14px 16px 10px;display:flex;align-items:flex-start;gap:10px;justify-content:center}
.clock-sign{font-family:var(--f-head);font-weight:600;font-size:clamp(28px,2.6vw,40px);line-height:1;margin-top:6px;color:var(--ink)}
.clock-units{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(8px,1.3vw,20px)}
.cu{display:flex;flex-direction:column;align-items:center;gap:6px}
.cu .digs{display:flex;gap:3px}
.seg7{width:clamp(22px,2.1vw,34px);height:auto;display:block;overflow:visible}
.seg7 polygon{fill:var(--glow);opacity:.06;transition:opacity .12s}
.seg7 polygon.on{opacity:1;filter:drop-shadow(0 0 4px rgba(69,229,134,.8))}
.cu .u{font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--ink-2);text-transform:uppercase}
.clock-mode{text-align:center;font-family:var(--f-head);letter-spacing:.14em;font-size:12px;color:var(--mute);text-transform:uppercase;margin-top:-4px}
.dt-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dt-row .kicker{margin-right:2px}
.dt-box{font-family:var(--f-head);font-weight:600;font-size:17px;padding:6px 12px;border-radius:6px;background:var(--panel-3);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.dt-box select{background:transparent;border:0;font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--ink-2);padding:0 2px;cursor:pointer}
.dt-box select option{background:var(--panel-2)}
.pass-card{border:1px solid var(--glow-line);background:linear-gradient(180deg,rgba(69,229,134,.08),rgba(69,229,134,.02));box-shadow:inset 0 0 30px rgba(69,229,134,.06);text-align:center;gap:6px;padding:16px}
.pass-title{font-family:var(--f-head);font-weight:700;font-size:clamp(17px,1.5vw,23px);letter-spacing:.02em;text-transform:uppercase}
.pass-title b{color:var(--glow)}
.pass-count{font-family:var(--f-head);font-weight:700;font-size:clamp(24px,2.1vw,32px);font-variant-numeric:tabular-nums}
.pass-count span{color:var(--glow)}
.pass-meta{font-size:12px;color:var(--mute)}
.pass-card.now{border-color:var(--glow);animation:glowpulse 2s infinite}

/* ---------- Panel 3: tracker ---------- */
.globe-wrap{position:relative;flex:1;min-height:320px;border-radius:8px;overflow:hidden;background:radial-gradient(circle at 50% 50%,#0b1c16 0%,#040907 70%);border:1px solid var(--line);cursor:grab;touch-action:pan-y}
.globe-wrap:active{cursor:grabbing}
.globe-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
.flagbadge{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;background:rgba(5,10,8,.7);border:1px solid var(--line-2);font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.flagbadge.near{border-color:var(--glow);color:var(--glow);box-shadow:0 0 18px rgba(69,229,134,.3)}
.flag{width:30px;height:20px;display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.globe-ctrl{position:absolute;left:10px;top:10px;display:flex;gap:6px}
.btn-sm{border:1px solid var(--line-2);background:rgba(5,10,8,.7);border-radius:6px;padding:4px 9px;font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.btn-sm[aria-pressed="true"]{color:var(--glow);border-color:var(--glow-line)}
.loc{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;background:linear-gradient(0deg,rgba(3,8,6,.92),transparent);pointer-events:none}
.loc .kicker{color:var(--glow)}
.loc .coords{font-family:var(--f-head);font-weight:600;font-size:clamp(14px,1.2vw,18px);letter-spacing:.02em;text-transform:uppercase}
.readouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ro{padding:8px 10px}
.ro .k{font-family:var(--f-head);font-size:11px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.ro .v{font-family:var(--f-data);font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.readouts{grid-template-columns:repeat(2,1fr)}}

/* ---------- Panel 4: astronaut ---------- */
.astro-body{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(0,2fr);gap:12px;flex:1}
@media (max-width:520px){.astro-body{grid-template-columns:1fr}}
.portrait{position:relative;border-radius:8px;overflow:hidden;min-height:230px;background:linear-gradient(160deg,#0f2a1f,#06110c);border:1px solid var(--line)}
.portrait svg{position:absolute;inset:0;width:100%;height:100%}
.portrait .cap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;background:linear-gradient(0deg,rgba(3,8,6,.95),transparent);font-size:11px;color:var(--mute)}
.portrait .cap b{display:block;font-family:var(--f-head);font-size:15px;color:var(--ink);letter-spacing:.04em;text-transform:uppercase}
.astro-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.tl{padding:10px 12px 12px}
.tl-track{position:relative;display:flex;justify-content:space-between;gap:4px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.tl-line{position:absolute;left:20px;right:20px;top:37px;height:2px;background:var(--line-2)}
.tl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--glow);box-shadow:0 0 8px var(--glow);width:0;transition:width .6s}
.tl-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:62px;flex:1;text-align:center;background:none;border:0;padding:0;color:inherit}
.tl-node .ico{width:22px;height:22px;stroke:var(--mute);fill:none;stroke-width:1.5}
.tl-node .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-3);background:var(--panel);display:grid;place-items:center;position:relative;z-index:1}
.tl-node .dot svg{width:12px;height:12px;stroke:var(--bg);stroke-width:3;fill:none;opacity:0}
.tl-node .nm{font-family:var(--f-head);font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);line-height:1.1}
.tl-node .tm{font-family:var(--f-data);font-size:10px;color:var(--dim)}
.tl-node.done .dot{background:var(--glow);border-color:var(--glow)} .tl-node.done .dot svg{opacity:1}
.tl-node.done .ico{stroke:var(--glow)} .tl-node.done .nm{color:var(--ink-2)}
.tl-node.cur .dot{border-color:var(--glow);box-shadow:0 0 0 4px rgba(69,229,134,.18);animation:ring 1.6s infinite}
.tl-node.cur .nm{color:var(--glow)} .tl-node.cur .ico{stroke:var(--glow)}
.tl-node[aria-pressed="true"] .nm{text-decoration:underline;text-underline-offset:3px}
.tl-note{margin-top:10px;padding:8px 10px;border-left:2px solid var(--glow);background:rgba(69,229,134,.05);font-size:12.5px;color:var(--ink-2);border-radius:0 6px 6px 0}
.tl-note b{font-family:var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-size:13px}
.bio{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bio .inset{padding:10px 12px;display:flex;align-items:center;gap:10px;min-height:74px;position:relative;overflow:hidden}
.bio .k{font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
.bio .v{font-family:var(--f-head);font-weight:700;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.bio .v small{font-size:14px;color:var(--mute);font-weight:500}
.heart{width:34px;height:34px;flex:none;fill:var(--red);filter:drop-shadow(0 0 6px rgba(255,93,93,.6))}
.heart.beat{animation:beat .35s ease-out}
.ecg{position:absolute;right:0;bottom:0;width:55%;height:60%;opacity:.8}
.gauge{width:72px;height:44px;flex:none;margin-left:auto}
@media (max-width:420px){.bio{grid-template-columns:1fr}}

/* ---------- Panel 3b: overpass ---------- */
.city-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.city-row button{flex:none;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:4px 11px;font-family:var(--f-head);font-weight:600;letter-spacing:.06em;font-size:12.5px;text-transform:uppercase;color:var(--mute)}
.city-row button[aria-pressed="true"]{color:var(--bg);background:var(--glow);border-color:var(--glow)}
.city-row button .t{font-family:var(--f-data);font-weight:400;opacity:.75;margin-left:6px;letter-spacing:0}
.ov-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;flex:1}
@media (max-width:640px){.ov-body{grid-template-columns:1fr}}
.map-wrap{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 60% 40%,#0b2340,#061426 70%);min-height:320px}
.map-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.map-wrap .country{fill:#0d2a45;stroke:#2c5b85;stroke-width:.6}
.map-wrap .pk{fill:url(#pkfill);stroke:var(--glow);stroke-width:1.2;filter:url(#softglow)}
.map-wrap .ctry-lbl{font-family:var(--f-head);font-size:11px;letter-spacing:.3em;fill:#4f7aa3;text-transform:uppercase}
.map-wrap .city{cursor:pointer}
.map-wrap .city circle.c{fill:#dff7ea;stroke:var(--glow);stroke-width:1.5}
.map-wrap .city text{font-family:var(--f-head);font-weight:600;font-size:12px;fill:#dff7ea;paint-order:stroke;stroke:#061426;stroke-width:3}
.map-wrap .city.sel circle.c{fill:var(--glow)}
.callout{position:absolute;padding:6px 10px;border:1px solid var(--glow-line);background:rgba(3,8,6,.85);border-radius:6px;font-family:var(--f-head);text-align:right;pointer-events:none;transform:translate(-100%,-100%)}
.callout b{display:block;color:var(--glow);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.callout span{display:block;font-size:12px;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase}
.callout i{display:block;font-style:normal;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.pd{padding:12px 14px;display:flex;flex-direction:column;gap:10px;border-color:var(--glow-line)}
.pd h3{margin:0;font-family:var(--f-head);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.05}
.pd .row{display:flex;flex-direction:column;align-items:center;text-align:center}
.pd .k{font-family:var(--f-head);font-size:11.5px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.pd .v{font-family:var(--f-head);font-weight:700;font-size:23px;line-height:1.1;font-variant-numeric:tabular-nums}
.pd .v.sm{font-size:15px;font-weight:600}
.sky{width:100%;max-width:170px;align-self:center}
.sky text{font-family:var(--f-head);font-size:10px;fill:var(--mute)}
.eye{display:inline-flex;align-items:center;gap:6px;justify-content:center;font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--mute)}
.eye.yes{color:var(--glow);border-color:var(--glow-line)}
.map-legend{position:absolute;left:10px;bottom:8px;display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:#9cc0de;pointer-events:none}
.map-legend i{display:inline-block;width:18px;height:0;border-top:2px solid var(--glow);vertical-align:middle;margin-right:5px}
.map-legend i.prev{border-top:2px dashed #6f9ec7}
.map-legend i.zone{width:10px;height:10px;border:1px dashed var(--glow);border-radius:50%}

/* ---------- Panel 6: wishes ---------- */
.wish-sky{position:relative;flex:1;min-height:280px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#02060a}
.wish-sky canvas{position:absolute;inset:0;width:100%;height:100%}
.wish-float{position:absolute;font-family:var(--f-head);font-weight:600;font-size:14px;letter-spacing:.02em;color:#eaf6ff;text-shadow:0 0 10px rgba(120,190,255,.5);white-space:nowrap;pointer-events:none;transition:opacity 1s;opacity:0;max-width:70%;overflow:hidden;text-overflow:ellipsis}
.wish-float.show{opacity:1}
.wish-float small{color:#9cc0de;font-weight:500}
.wish-tip{position:absolute;max-width:220px;padding:6px 9px;background:rgba(3,8,12,.92);border:1px solid rgba(111,183,255,.4);border-radius:6px;font-size:12px;pointer-events:none;transform:translate(-50%,calc(-100% - 12px))}
.wish-tip small{display:block;color:var(--mute)}
.wish-form{display:flex;gap:6px}
.wish-form input{flex:1;min-width:0;background:var(--panel-3);border:1px solid var(--line-2);border-radius:8px;padding:9px 12px;font-family:var(--f-head);font-weight:500;font-size:14.5px;letter-spacing:.03em}
.wish-form input::placeholder{color:var(--dim);text-transform:uppercase}
.wish-form select{background:var(--panel-3);border:1px solid var(--line-2);border-radius:8px;padding:0 6px;font-family:var(--f-head);font-size:13px;max-width:110px}
.wish-form button{border:1px solid var(--glow-line);background:var(--glow-soft);border-radius:8px;padding:0 12px;display:grid;place-items:center}
.wish-form button svg{width:20px;height:20px;fill:var(--glow)}
.wish-msg{font-size:12px;min-height:17px;color:var(--mute)}
.wish-msg.err{color:var(--red)} .wish-msg.ok{color:var(--glow)}
.wish-stats{display:flex;flex-direction:column;gap:10px;flex:1;min-height:280px}
.wish-total{display:flex;align-items:baseline;gap:8px}
.wish-total b{font-family:var(--f-head);font-size:34px;line-height:1;color:var(--glow)}
.bars{display:flex;flex-direction:column;gap:5px}
.bar{display:grid;grid-template-columns:86px 1fr 34px;gap:8px;align-items:center;font-size:12px}
.bar .t{height:8px;border-radius:4px;background:var(--panel-3);overflow:hidden}
.bar .t i{display:block;height:100%;background:linear-gradient(90deg,var(--glow-2),var(--glow));border-radius:4px}
.bar .n{font-family:var(--f-data);text-align:right;color:var(--ink-2)}
.days{display:flex;align-items:flex-end;gap:4px;height:70px}
.days div{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;justify-content:flex-end}
.days i{display:block;width:100%;background:linear-gradient(0deg,var(--glow-2),var(--glow));border-radius:3px 3px 0 0;min-height:2px}
.days span{font-family:var(--f-data);font-size:9.5px;color:var(--dim)}

/* ---------- Panel 5: feed ---------- */
.feed-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px}
@media (max-width:900px){.feed-body{grid-template-columns:1fr}}
.monitor{position:relative;aspect-ratio:16/7.2;max-width:100%;border-radius:8px;overflow:hidden;background:#000;border:1px solid var(--line-2)}
.monitor canvas{position:absolute;inset:0;width:100%;height:100%}
.monitor::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.mon-hud{position:absolute;inset:0;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:1}
.mon-top{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-head);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.mon-top .rec{display:inline-flex;align-items:center;gap:6px;color:var(--amber)}
.mon-top .rec i{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:pulse 1.4s infinite}
.mon-center{align-self:center;text-align:center;background:rgba(0,0,0,.45);padding:10px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.08)}
.mon-center .kicker{color:var(--ink-2)}
.mon-center b{display:block;font-family:var(--f-head);font-size:clamp(16px,1.6vw,22px);letter-spacing:.04em;text-transform:uppercase}
.mon-center span{font-family:var(--f-data);color:var(--glow);font-size:15px}
.mon-bot{display:flex;justify-content:space-between;font-family:var(--f-data);font-size:11.5px;color:#a9c9ba}
.sched{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sched li{display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(3,8,6,.4)}
.sched .when{font-family:var(--f-data);font-size:12px;color:var(--mute);line-height:1.2}
.sched .what{font-family:var(--f-head);font-weight:600;font-size:14px;letter-spacing:.03em}
.sched .what small{display:block;font-family:var(--f-body);font-weight:400;font-size:11.5px;color:var(--mute);letter-spacing:0}
.st{font-family:var(--f-head);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:4px;border:1px solid var(--line-2);color:var(--mute)}
.st.live{color:var(--red);border-color:rgba(255,93,93,.5)} .st.done{color:var(--dim)} .st.next{color:var(--glow);border-color:var(--glow-line)}

/* ---------- footer ---------- */
.foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 4px 0;border-top:1px solid var(--line)}
.foot .jm{font-family:var(--f-head);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:15px}
.foot .jm span{color:var(--mute);font-weight:500}
.lang{display:flex;gap:4px;align-items:center;font-family:var(--f-head);color:var(--mute)}
.lang button{background:none;border:0;padding:2px 6px;font-family:var(--f-head);font-weight:600;letter-spacing:.08em;color:var(--mute);font-size:14px}
.lang button[aria-pressed="true"]{color:var(--glow)}
.lang button.ur{font-family:var(--f-ur);font-size:14px;letter-spacing:0}
.foot a.feedlink{font-family:var(--f-head);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:15px;color:var(--ink);text-decoration:none}
.foot a.feedlink b{color:var(--glow)}
.fine{width:100%;font-size:11px;color:var(--dim);display:flex;gap:6px 18px;flex-wrap:wrap}

/* ---------- Urdu ---------- */
html[lang="ur"] [data-i18n]{font-family:var(--f-ur);letter-spacing:0;text-transform:none;direction:rtl;line-height:1.9}
html[lang="ur"] .ph h2{font-size:clamp(16px,1.25vw,20px);font-weight:600}
html[lang="ur"] .brand h1 [data-i18n]{font-size:.7em}
html[lang="ur"] .facts .v[data-i18n]{font-size:14px}
html[lang="ur"] .wish-form input{font-family:var(--f-ur);direction:rtl}

/* ---------- boot intro ---------- */
.boot{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 50% 45%,#0b2419,#030605 70%);display:grid;place-items:center;transition:opacity .6s,visibility .6s}
.boot.done{opacity:0;visibility:hidden}
.boot-in{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px}
.boot-in svg{width:86px;height:86px}
.boot-in h2{margin:0;font-family:var(--f-head);font-size:clamp(22px,4vw,40px);letter-spacing:.08em;text-transform:uppercase}
.boot-lines{font-family:var(--f-data);font-size:12.5px;color:var(--glow);text-align:left;min-height:64px;width:min(360px,86vw)}
.boot-lines div{opacity:0;animation:fadein .3s forwards}
.boot-bar{width:min(360px,86vw);height:2px;background:var(--line-2);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:var(--glow);box-shadow:0 0 8px var(--glow);animation:load 1.5s ease-out forwards}
.boot small{color:var(--dim);font-size:11px}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(69,229,134,.5)}100%{box-shadow:0 0 0 10px rgba(69,229,134,0)}}
@keyframes glowpulse{0%,100%{box-shadow:inset 0 0 30px rgba(69,229,134,.08),0 0 0 rgba(69,229,134,0)}50%{box-shadow:inset 0 0 40px rgba(69,229,134,.18),0 0 24px rgba(69,229,134,.25)}}
@keyframes beat{0%{transform:scale(1)}30%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes fadein{to{opacity:1}}
@keyframes load{to{width:100%}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---------- revisions after first render ---------- */
.astro-body{grid-template-columns:minmax(130px,1fr) minmax(0,1.25fr);flex:1}
.astro-right{justify-content:center}
.bio{grid-template-columns:1fr}
.portrait{min-height:210px}
.tl{padding:10px 12px 12px}
.tl-node{min-width:58px}
.ro .v{font-size:14px;white-space:normal}
.ov-body{display:block;position:relative;flex:1}
.map-wrap{height:100%;min-height:440px}
.pd{position:absolute;right:10px;top:10px;width:200px;background:rgba(3,10,8,.88);backdrop-filter:blur(4px)}
.pd .sky{max-width:140px}
.station-wrap{min-height:320px}
.about-body{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.ph{flex-wrap:wrap}
@media (max-width:700px){
  .strip{grid-template-columns:1fr;text-align:center;gap:4px}
  .strip .lbl{justify-self:center}
  .strip .tle{text-align:center}
  .top-right{width:100%}
}
@media (max-width:640px){
  .pd{position:static;width:auto;margin-top:12px}
  .map-wrap{min-height:340px}
}

.map-wrap .city text{font-size:15px}
.map-wrap .city circle.c{r:5.5}
.map-wrap .ctry-lbl{font-size:13px}

/* station labels with leader lines (mock-up style) */
.mlabel{transform:none;background:none;border:0;padding:2px 4px;font-size:clamp(13px,1.1vw,17px);letter-spacing:.04em;color:#e9f1ec;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.mlabel.on{color:var(--glow)}
.mlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.mlines path{fill:none;stroke:rgba(69,229,134,.7);stroke-width:1.4}
.mlines path.on{stroke:var(--glow);stroke-width:2}
#modLabels{position:absolute;inset:0;pointer-events:none}
#modLabels .mlabel{pointer-events:auto}

/* astronaut panel: photo left, timeline + biometrics right (mock-up layout) */
.astro-body{grid-template-columns:minmax(120px,.85fr) minmax(0,1.6fr);align-items:stretch}
.astro-right{justify-content:flex-start;gap:10px}
.astro-right .bio{grid-template-columns:1fr 1fr}
.astro-right .bio .inset{padding:10px;gap:8px}
.astro-right .bio .v{font-size:22px}
.astro-right .heart{width:28px;height:28px}
.astro-right .gauge{width:58px;height:36px}
.tl-node{min-width:52px}
.tl-node .nm{font-size:10.5px}
@media (max-width:520px){.astro-right .bio{grid-template-columns:1fr}}
.astro-body{align-items:start}
.astro-body .portrait{aspect-ratio:200/260;min-height:0;height:auto;width:100%}

.wish-float{max-width:calc(100% - 16px)}
.wish-float{text-shadow:0 0 3px #000,0 1px 8px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.7)}

.wish-float{opacity:1;font-size:15px;white-space:normal;max-width:86%;line-height:1.3}
.wish-float i{font-style:normal;color:#fff;margin-right:6px;font-size:11px;vertical-align:2px}
.wish-float.mine i{color:var(--glow)}
.wish-msg:empty{display:none}

/* Panel 5: simple video player */
.player{position:relative;width:100%;max-width:900px;margin-inline:auto;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;border:1px solid var(--line-2)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--mute);font-family:var(--f-head);font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.player-empty svg{width:56px;height:56px;fill:none;stroke:var(--mute);stroke-width:1.2;stroke-linejoin:round;padding:14px;border:1.5px solid var(--line-3);border-radius:50%;box-sizing:content-box}

/* header link to the Live Visual Feed page */
.nav-feed{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--glow-line);border-radius:999px;background:var(--glow-soft);color:var(--glow);text-decoration:none;font-family:var(--f-head);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:background .2s,border-color .2s}
.nav-feed:hover{background:rgba(69,229,134,.24);border-color:var(--glow)}
.nav-feed svg{width:16px;height:16px;fill:var(--glow)}
html[lang="ur"] .nav-feed [data-i18n]{line-height:1.4}

/* ---------- site navigation ---------- */
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid var(--line-2);border-radius:999px;background:var(--panel);color:var(--ink-2);text-decoration:none;font-family:var(--f-head);font-weight:600;font-size:14.5px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.nav a:hover{border-color:var(--glow-line);color:var(--glow)}
.nav a[aria-current="page"]{border-color:var(--glow-line);background:var(--glow-soft);color:var(--glow)}
.nav svg{width:15px;height:15px;fill:currentColor}
html[lang="ur"] .nav [data-i18n]{line-height:1.4}

.top .nav{margin-left:auto;justify-content:flex-end}
.nav a{padding:7px 13px;font-size:13.5px}
@media (max-width:600px){.top .nav{margin-left:0;justify-content:flex-start;gap:6px}.nav a{padding:6px 10px;font-size:12px;letter-spacing:.04em}}

.brand-mark{width:46px;height:46px;border-radius:50%;object-fit:contain}
.boot-in .boot-logo{width:150px;height:150px;filter:drop-shadow(0 0 24px rgba(69,229,134,.35))}
.top .brand{gap:12px}
.top{gap:12px}
/* centre column fills the row so its bottom lines up with the side panels */
#p-clockcol{align-self:stretch}
#p-clockcol > .pass-card{flex:1;justify-content:center}

/* astronaut panel fills the row height (no empty band at the bottom) */
.astro-body{align-items:stretch;flex:1}
.astro-body .portrait{aspect-ratio:auto;height:auto;min-height:260px;background:
  linear-gradient(180deg,rgba(6,17,12,.4),rgba(6,17,12,.55) 35%,rgba(6,17,12,.97) 60%),
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2030%2020%22%3E%3Crect%20width%3D%2230%22%20height%3D%2220%22%20fill%3D%22%2301411c%22/%3E%3Crect%20width%3D%227.5%22%20height%3D%2220%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%2218.9%22%20cy%3D%2210%22%20r%3D%225.9%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%2220.3%22%20cy%3D%228.7%22%20r%3D%225.2%22%20fill%3D%22%2301411c%22/%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M22.2%205.15l.45%201.37h1.44l-1.17.85.45%201.37-1.17-.85-1.17.85.45-1.37-1.17-.85h1.44z%22/%3E%3C/svg%3E") center top/auto 62% no-repeat,
  linear-gradient(160deg,#0f2a1f,#06110c)}
.astro-right{display:flex;flex-direction:column}
.astro-right .tl{flex:1.3;display:flex;flex-direction:column;justify-content:center}
.astro-right .bio{flex:1;grid-auto-rows:1fr}
.astro-right .bio .inset{min-height:0}
@media (max-width:820px){.astro-body .portrait{aspect-ratio:200/260}}

/* astronaut photograph */
.astro-body{grid-template-columns:minmax(150px,1.05fr) minmax(0,1.6fr)}
.astro-body .portrait{background:#0b1510;border:1px solid var(--line-2);box-shadow:inset 0 0 0 1px rgba(69,229,134,.08)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,rgba(5,10,8,.55));pointer-events:none}

/* shorter second row */
.map-wrap{min-height:360px}
.pd{padding:10px 12px;gap:6px;top:8px;width:190px}
.pd h3{font-size:16px}
.pd .v{font-size:20px}
.pd .v.sm{font-size:13.5px}
.pd .sky{max-width:104px}
.pd .eye{padding:3px 8px;font-size:11.5px}
.wish-sky{min-height:220px}

/* ================= mobile fixes (≤600px) ================= */
@media (max-width:600px){
  .about-body{grid-template-columns:1fr}
  .station-wrap{min-height:300px}
  .facts{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
  .facts .v{font-size:16px}
  .dt-row{gap:6px}
  .globe-ctrl{top:auto;bottom:74px;left:10px}
  .flagbadge{left:10px;right:auto;top:10px}
  .astro-body{grid-template-columns:1fr}
  .astro-body .portrait{aspect-ratio:4/5;min-height:0;max-height:420px}
  .astro-right .tl-node{min-width:0}
  .astro-right .bio{grid-template-columns:1fr 1fr}
  .map-wrap{height:auto;min-height:0;aspect-ratio:800/560}
  .ov-body{display:flex;flex-direction:column;gap:10px}
  .pd{position:static;width:auto;margin:0}
  .map-legend{position:static;padding:6px 10px 8px;flex-wrap:wrap}
  .map-wrap .map-legend{display:none}
  .callout{transform:translate(-100%,-100%) scale(.85);transform-origin:right bottom}
  .wish-sky{min-height:300px}
  .foot{justify-content:flex-start}
}
@media (max-width:380px){ .facts{grid-template-columns:1fr} .astro-right .bio{grid-template-columns:1fr} }

/* timeline icons */
.tl-node .ico{width:30px;height:30px;stroke:currentColor;color:var(--mute);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px;transition:color .2s,filter .2s}
.tl-node .ico .f{fill:currentColor;stroke:none;opacity:.16}
.tl-node .ico .d{fill:currentColor;stroke:none}
.tl-node.done .ico{color:var(--glow)}
.tl-node.cur .ico{color:var(--glow);filter:drop-shadow(0 0 6px rgba(69,229,134,.55))}
.tl-node:hover .ico{color:var(--ink)}
.tl-line{top:45px}

/* ---- production additions ---- */
.bio-tag{grid-column:1/-1;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.wish-captcha:empty{display:none}
.wish-captcha{margin-top:8px}
.foot .fine a{color:inherit}