/* ════════════════════════════════════════════════════════════════
   HERMENS.COM — J.A.R.V.I.S. v5.0 "MARK II" INTERFACE THEME
   Shared site-wide stylesheet · rounded corners: 5%
════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;900&family=Share+Tech+Mono&display=swap');

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --blue:    #00aaff;
  --blue2:   #0066cc;
  --cyan:    #00e5ff;
  --cyan2:   #00bcd4;
  --gold:    #ffb74d;
  --ice:     #a8d8ff;
  --bg:      #00050d;
  --bg2:     #000c1d;
  --bg3:     #011026;
  --panel:   linear-gradient(155deg, rgba(2,22,58,0.88), rgba(0,9,28,0.96));
  --panel2:  linear-gradient(155deg, rgba(3,28,72,0.92), rgba(0,11,34,0.97));
  --border:  rgba(0,170,255,0.16);
  --border2: rgba(0,170,255,0.42);
  --border3: rgba(0,229,255,0.72);
  --text:    #7db2dd;
  --bright:  #d2e9ff;
  --muted:   #27496e;
  --dim:     #11253f;
  --glow:    0 0 22px rgba(0,170,255,0.4);
  --glow2:   0 0 40px rgba(0,170,255,0.65), 0 0 100px rgba(0,170,255,0.18);
  --cglow:   0 0 20px rgba(0,229,255,0.55);
  /* ── 5% rounded corners (site-wide motif) ── */
  --r:  5%;
  --r-img: 4%;
  --font-h: 'Orbitron', sans-serif;
  --font-b: 'Rajdhani', sans-serif;
  --font-m: 'Share Tech Mono', monospace;
}

html {
  scroll-behavior:smooth;
  background:var(--bg);
  /* fluid scaling: everything in rem follows the browser window width */
  font-size:clamp(13px, 0.45vw + 11px, 20px);
}
body {
  font-family:var(--font-b); background:var(--bg); color:var(--text);
  line-height:1.6; min-height:100vh; display:flex; flex-direction:column;
  overflow-x:hidden; font-size:1rem;
}
a { color:var(--blue); text-decoration:none; transition:color .2s, text-shadow .2s; }
a:hover { color:var(--cyan); text-shadow:var(--cglow); }
img { max-width:100%; height:auto; display:block; }
::selection { background:rgba(0,170,255,0.35); color:#fff; }

/* ════════ LAYERED BACKGROUND ════════ */
#bg-canvas { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.95; }

.hex-grid {
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(0,110,210,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,110,210,0.05) 1px, transparent 1px),
    linear-gradient(rgba(0,90,180,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,90,180,0.022) 1px, transparent 1px);
  background-size:90px 90px, 90px 90px, 18px 18px, 18px 18px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 100%);
}
/* aurora depth + vignette */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 85% 55% at 50% -8%, rgba(0,110,220,0.17) 0%, transparent 68%),
    radial-gradient(ellipse 55% 42% at 88% 88%, rgba(0,60,180,0.11) 0%, transparent 60%),
    radial-gradient(ellipse 42% 32% at 8% 62%, rgba(0,80,200,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0,0,6,0.55) 100%);
}
body > *:not(#bg-canvas):not(.hex-grid):not(.hud-frame) { position:relative; z-index:1; }

/* ════════ HUD VIEWPORT FRAME (injected by jarvis.js) ════════ */
.hud-frame { position:fixed; inset:0; pointer-events:none; z-index:9997; }
.hud-corner { position:absolute; width:46px; height:46px; opacity:.6; }
.hud-corner::before {
  content:''; position:absolute; inset:0;
  border:2px solid rgba(0,229,255,0.55); border-radius:8px;
  box-shadow:0 0 10px rgba(0,229,255,0.25);
}
.hud-corner.tl { top:8px; left:8px; }   .hud-corner.tl::before { border-right:none; border-bottom:none; border-radius:8px 0 0 0; }
.hud-corner.tr { top:8px; right:8px; }  .hud-corner.tr::before { border-left:none; border-bottom:none; border-radius:0 8px 0 0; }
.hud-corner.bl { bottom:8px; left:8px; }  .hud-corner.bl::before { border-right:none; border-top:none; border-radius:0 0 0 8px; }
.hud-corner.br { bottom:8px; right:8px; } .hud-corner.br::before { border-left:none; border-top:none; border-radius:0 0 8px 0; }
.hud-ruler {
  position:absolute; top:50%; transform:translateY(-50%);
  height:34vh; width:5px; opacity:.4;
  background:repeating-linear-gradient(180deg, rgba(0,200,255,0.55) 0 1px, transparent 1px 14px);
}
.hud-ruler.left { left:9px; }  .hud-ruler.right { right:9px; }

/* ════════ TOP STRIP ════════ */
.header-topstrip {
  background:linear-gradient(180deg, rgba(0,170,255,0.04), rgba(0,170,255,0.012));
  border-bottom:1px solid var(--border);
  padding:6px 28px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:var(--font-m); font-size:.6rem; color:var(--muted); letter-spacing:.06em;
  position:relative;
}
.header-topstrip::after {
  content:''; position:absolute; bottom:-1px; left:0; width:100%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.5) 50%, transparent);
  animation:shimmer 4s ease-in-out infinite;
}
.header-topstrip .left, .header-topstrip .right { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.ts-item { display:flex; align-items:center; gap:5px; }
.ts-label { color:rgba(45,85,125,0.95); text-transform:uppercase; letter-spacing:.09em; font-size:.55rem; }
.ts-val { color:var(--cyan); text-shadow:0 0 6px rgba(0,229,255,0.3); }
.ts-sep { color:rgba(0,90,150,0.4); }
.ts-badge {
  background:rgba(0,229,255,0.07); border:1px solid rgba(0,229,255,0.22);
  border-radius:20px; padding:1px 9px; font-size:.52rem; color:var(--cyan); letter-spacing:.05em;
  box-shadow:inset 0 0 12px rgba(0,229,255,0.05);
}
.ts-warn { color:var(--gold); text-shadow:0 0 6px rgba(255,170,0,0.4); }

/* ════════ HEADER ════════ */
.site-header {
  background:
    linear-gradient(180deg, rgba(0,5,18,0.99) 0%, rgba(0,12,34,0.97) 100%);
  border-bottom:2px solid rgba(0,170,255,0.32);
  box-shadow:0 0 90px rgba(0,120,255,0.13), 0 8px 50px rgba(0,60,160,0.12);
  position:relative;
}
.site-header::after {
  content:''; position:absolute; bottom:-2px; left:20%; right:20%; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow:0 0 14px rgba(0,229,255,0.5); opacity:.7;
}
.header-top {
  width:100%; margin:0 auto; padding:20px clamp(16px, 2.5vw, 56px) 16px;
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:22px;
}
@media(max-width:1100px){ .header-top{grid-template-columns:auto 1fr auto;} .header-panels{display:none;} }

.site-logo { display:flex; align-items:center; gap:16px; }
.logo-icon-wrap { position:relative; flex-shrink:0; }
.logo-icon {
  width:4rem; height:4rem; border-radius:50%; overflow:hidden;
  border:2px solid rgba(0,229,255,0.65);
  box-shadow:var(--glow2), inset 0 0 22px rgba(0,170,255,0.14);
}
.logo-icon img { width:100%; height:100%; object-fit:cover; }
.logo-orbit {
  position:absolute; inset:-10px; border-radius:50%; pointer-events:none;
  border:1px dashed rgba(0,170,255,0.2);
  animation:orbit-spin 16s linear infinite;
}
.logo-orbit::after {
  content:''; position:absolute; top:50%; left:-3px;
  width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan), 0 0 16px rgba(0,229,255,0.5);
}
.logo-orbit::before {
  content:''; position:absolute; bottom:14%; right:-2px;
  width:4px; height:4px; border-radius:50%;
  background:var(--blue); box-shadow:0 0 7px var(--blue);
}
@keyframes orbit-spin { to{transform:rotate(360deg)} }

.logo-text h1 {
  font-family:var(--font-h); font-size:1.22rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.15;
  background:linear-gradient(90deg, var(--ice) 0%, var(--blue) 45%, var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(0,170,255,0.45));
}
.logo-text .sub {
  font-family:var(--font-m); font-size:.58rem; color:var(--muted);
  letter-spacing:.07em; display:block; margin-top:3px;
}
.logo-text .sys {
  font-family:var(--font-m); font-size:.6rem; color:var(--cyan);
  letter-spacing:.05em; display:flex; align-items:center; gap:7px; margin-top:5px;
}
.sys-dot {
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 9px var(--cyan); animation:core-pulse 2s ease-in-out infinite; flex-shrink:0;
}
.sys-badge {
  background:rgba(0,229,255,0.07); border:1px solid rgba(0,229,255,0.22);
  border-radius:20px; padding:1px 8px; font-size:.52rem; color:rgba(0,229,255,0.85);
}

/* ════════ ARC REACTOR ════════ */
.arc-reactor-wrap { display:flex; flex-direction:column; align-items:center; gap:5px; flex-shrink:0; }
.arc-reactor-label {
  font-family:var(--font-m); font-size:.5rem; color:var(--muted);
  letter-spacing:.12em; text-transform:uppercase;
}
.arc-reactor-output {
  font-family:var(--font-h); font-size:.6rem; color:var(--cyan);
  text-shadow:0 0 8px rgba(0,229,255,0.4); letter-spacing:.06em;
}
.arc-reactor {
  display:flex; align-items:center; justify-content:center;
  position:relative; width:5.5rem; height:5.5rem; flex-shrink:0;
}
.arc-r0,.arc-r1,.arc-r2,.arc-r3 { position:absolute; border-radius:50%; border-style:solid; }
.arc-r0 {
  width:5.5rem; height:5.5rem; border-width:1.5px; border-style:dashed;
  border-color:rgba(0,120,200,0.25); animation:orbit-spin 30s linear infinite reverse;
}
.arc-r1 {
  width:4.65rem; height:4.65rem; border-width:2px;
  border-color:rgba(0,170,255,0.6) rgba(0,170,255,0.07) rgba(0,170,255,0.6) rgba(0,170,255,0.07);
  animation:orbit-spin 6s linear infinite;
  box-shadow:0 0 16px rgba(0,170,255,0.25), inset 0 0 12px rgba(0,170,255,0.1);
}
.arc-r2 {
  width:3.5rem; height:3.5rem; border-width:1.5px;
  border-color:rgba(0,229,255,0.7) rgba(0,229,255,0.07) rgba(0,229,255,0.7) rgba(0,229,255,0.07);
  animation:orbit-spin 3.5s linear infinite reverse;
  box-shadow:0 0 12px rgba(0,229,255,0.25);
}
.arc-r3 {
  width:2.4rem; height:2.4rem; border-width:1.5px;
  border-color:rgba(0,170,255,0.55) rgba(0,170,255,0.07) rgba(0,170,255,0.55) rgba(0,170,255,0.07);
  animation:orbit-spin 2.2s linear infinite;
}
.arc-hex {
  position:absolute; width:1.9rem; height:1.9rem; border:1px solid rgba(0,229,255,0.3);
  border-radius:4px; animation:orbit-spin 8s linear infinite;
}
.arc-hex2 {
  position:absolute; width:3rem; height:3rem;
  border:1px dashed rgba(0,170,255,0.14); border-radius:4px;
  animation:orbit-spin 14s linear infinite reverse;
}
.arc-core {
  width:1.45rem; height:1.45rem; border-radius:50%; position:relative; z-index:2;
  background:radial-gradient(circle, #fff 0%, var(--cyan) 28%, var(--blue) 58%, transparent 100%);
  box-shadow:0 0 18px var(--cyan), 0 0 48px rgba(0,170,255,0.55), 0 0 100px rgba(0,170,255,0.2);
  animation:core-pulse 2.4s ease-in-out infinite;
}
@keyframes core-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.68;transform:scale(.8)} }

/* ════════ HEADER PANELS ════════ */
.header-panels { display:flex; gap:10px; align-items:stretch; }
.hpanel {
  background:var(--panel);
  border:1px solid var(--border); border-radius:var(--r);
  padding:10px 16px; min-width:110px;
  position:relative; overflow:hidden;
  backdrop-filter:blur(8px);
  transition:border-color .25s, box-shadow .25s, transform .2s;
}
.hpanel:hover { border-color:var(--border2); box-shadow:var(--glow); transform:translateY(-2px); }
.hpanel::before {
  content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,170,255,0.6), transparent);
  animation:shimmer 3s ease-in-out infinite;
}
.hpanel::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:38%;
  background:linear-gradient(0deg, rgba(0,170,255,0.04), transparent); pointer-events:none;
}
@keyframes shimmer { 0%,100%{opacity:.2} 50%{opacity:.9} }
.hpanel-label {
  font-family:var(--font-m); font-size:.53rem; color:rgba(40,80,120,0.95);
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:5px;
}
.hpanel-val {
  font-family:var(--font-h); font-size:.84rem; color:var(--cyan);
  text-shadow:0 0 8px rgba(0,229,255,0.4); font-weight:500; letter-spacing:.04em;
}
.hpanel-sub {
  font-family:var(--font-m); font-size:.5rem; color:rgba(40,80,120,0.8);
  margin-top:2px; letter-spacing:.04em;
}
.hpanel-bar { height:3px; background:rgba(0,70,140,0.32); border-radius:3px; margin-top:8px; overflow:hidden; }
.hpanel-bar-fill {
  height:100%;
  background:linear-gradient(90deg, var(--blue2), var(--blue), var(--cyan));
  box-shadow:0 0 8px rgba(0,229,255,0.45); border-radius:3px;
  animation:bar-anim 4s ease-in-out infinite;
}
@keyframes bar-anim { 0%,100%{width:80%} 50%{width:95%} }

/* CLOCK */
.header-clock {
  font-family:var(--font-m); font-size:.72rem; color:var(--cyan);
  background:var(--panel2);
  border:1px solid var(--border2); border-radius:var(--r);
  padding:10px 18px; letter-spacing:.06em;
  white-space:nowrap; box-shadow:var(--glow); line-height:1.9;
  text-align:center; position:relative; overflow:hidden;
  backdrop-filter:blur(8px);
}
.header-clock::before {
  content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation:shimmer 2.5s ease-in-out infinite;
}
.clock-label {
  font-size:.5rem; color:var(--muted); display:block;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:2px;
}

/* ════════ NAV ════════ */
.header-nav { border-top:1px solid var(--border); background:rgba(0,170,255,0.025); }
.header-nav-inner {
  width:100%; margin:0 auto; padding:0 clamp(16px, 2.5vw, 56px);
  display:flex; flex-wrap:wrap; align-items:center;
}
.header-nav a {
  font-family:var(--font-h); color:var(--text); padding:11px 18px;
  font-size:.59rem; font-weight:500; letter-spacing:.11em;
  border-right:1px solid var(--border);
  transition:all .18s; display:inline-block; text-transform:uppercase; position:relative;
}
.header-nav a::after {
  content:''; position:absolute; bottom:0; left:18px; right:18px;
  height:2px; background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  transform:scaleX(0); transition:transform .22s;
  box-shadow:0 0 7px rgba(0,229,255,0.6);
}
.header-nav a:hover { background:rgba(0,170,255,0.07); color:var(--cyan); text-shadow:var(--cglow); }
.header-nav a:hover::after { transform:scaleX(1); }
.header-nav a.back-link { color:var(--blue); border-left:2px solid var(--blue); }

/* ════════ STATUS RIBBON ════════ */
.status-ribbon {
  background:rgba(0,170,255,0.02); border-bottom:1px solid var(--border);
  padding:0 28px; overflow:hidden; height:27px; display:flex; align-items:center;
  position:relative;
}
.status-ribbon::before, .status-ribbon::after {
  content:''; position:absolute; top:0; bottom:0; width:70px; z-index:2; pointer-events:none;
}
.status-ribbon::before { left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.status-ribbon::after { right:0; background:linear-gradient(270deg, var(--bg), transparent); }
.ribbon-track {
  display:flex; gap:44px; align-items:center; white-space:nowrap;
  font-family:var(--font-m); font-size:.57rem; color:var(--muted); letter-spacing:.05em;
  animation:ribbon-scroll 45s linear infinite;
}
@keyframes ribbon-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ribbon-item { display:flex; align-items:center; gap:8px; }
.ribbon-dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.ribbon-dot.on   { background:var(--cyan); box-shadow:0 0 6px var(--cyan); }
.ribbon-dot.blue { background:var(--blue); box-shadow:0 0 5px var(--blue); }
.ribbon-dot.warn { background:var(--gold); box-shadow:0 0 6px var(--gold); }
.ribbon-dot.dim  { background:var(--muted); }

/* ════════ SEARCH ════════ */
.search-bar { background:rgba(0,5,18,0.97); border-bottom:1px solid var(--border); padding:13px 28px; }
.search-bar-inner {
  width:100%; margin:0 auto;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.search-label {
  font-family:var(--font-m); font-size:.59rem; color:var(--muted);
  letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
}
.search-bar form { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.search-bar input[type=text] {
  padding:10px 22px; background:rgba(0,18,55,0.85);
  border:1px solid var(--border2); border-radius:24px;
  font-size:.9rem; width:clamp(220px, 24vw, 460px); outline:none;
  font-family:var(--font-b); color:var(--bright); letter-spacing:.04em; font-weight:500;
  transition:border-color .2s, box-shadow .2s, width .25s;
}
.search-bar input[type=text]::placeholder { color:var(--muted); font-family:var(--font-m); font-size:.82rem; }
.search-bar input[type=text]:focus { border-color:var(--cyan); box-shadow:var(--cglow); }
.search-bar button {
  padding:10px 26px; background:rgba(0,170,255,0.07);
  border:1px solid var(--blue); border-radius:24px;
  font-family:var(--font-h); font-size:.59rem; font-weight:700; cursor:pointer;
  color:var(--blue); letter-spacing:.12em; text-transform:uppercase;
  transition:all .2s; position:relative; overflow:hidden;
}
.search-bar button::before {
  content:''; position:absolute; inset:0; border-radius:24px;
  background:linear-gradient(90deg, transparent, rgba(0,170,255,0.2), transparent);
  transform:translateX(-100%); transition:transform .42s;
}
.search-bar button:hover { box-shadow:var(--glow); color:var(--cyan); border-color:var(--cyan); }
.search-bar button:hover::before { transform:translateX(100%); }
.search-radio { display:flex; gap:14px; align-items:center; font-family:var(--font-m); font-size:.59rem; color:var(--muted); }
.search-radio label { display:flex; align-items:center; gap:5px; cursor:pointer; letter-spacing:.04em; }
.search-radio input[type=radio] { accent-color:var(--blue); }

/* ════════ MAIN ════════ */
main { flex:1; width:100%; margin:clamp(18px, 2vw, 40px) auto; padding:0 clamp(16px, 2.5vw, 56px); }

/* SECTION TITLE */
.section-title {
  font-family:var(--font-h); font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--blue);
  text-shadow:var(--glow); margin:44px 0 18px; padding:12px 20px;
  border:1px solid var(--border2); border-left:3px solid var(--cyan);
  background:linear-gradient(90deg, rgba(0,170,255,0.09) 0%, transparent 65%);
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--glow), inset 0 0 60px rgba(0,170,255,0.025);
  position:relative; overflow:hidden;
  border-radius:0 var(--r) var(--r) 0;
}
.section-title::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,229,255,0.05), transparent 55%);
  animation:shimmer 3.5s ease-in-out infinite;
}
.section-title::after {
  content:''; position:absolute; bottom:0; left:0; width:30%; height:1.5px;
  background:linear-gradient(90deg, var(--cyan), transparent);
  animation:title-scan 5s ease-in-out infinite;
  box-shadow:0 0 8px rgba(0,229,255,0.5);
}
@keyframes title-scan { 0%,100%{left:0;opacity:.9} 50%{left:70%;opacity:.4} }
.section-title-text { display:flex; align-items:center; gap:10px; position:relative; }
.section-title-text::before { content:'◈'; color:var(--cyan); text-shadow:var(--cglow); font-size:.9rem; }
.section-title-meta {
  font-family:var(--font-m); font-size:.54rem; color:var(--muted);
  letter-spacing:.07em; font-weight:300;
  background:rgba(0,170,255,0.07); border:1px solid rgba(0,170,255,0.16);
  border-radius:20px; padding:2px 10px; position:relative;
}
.section-title:first-child { margin-top:0; }

/* ════════ CARDS ════════ */
.cards-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:16px;
  counter-reset:mod;
}
.card {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r); position:relative;
  transition:border-color .24s, box-shadow .26s, transform .2s;
  backdrop-filter:blur(12px); overflow:hidden;
  counter-increment:mod;
}
.card::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(0,170,255,0.4), transparent);
  pointer-events:none;
}
.card::after {
  content:''; position:absolute; inset:0; border-radius:var(--r); pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,170,255,0.08), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,180,255,0.012) 3px 4px);
  opacity:0; transition:opacity .3s;
}
.card:hover::after { opacity:1; }
.card:hover {
  border-color:rgba(0,170,255,0.5);
  box-shadow:var(--glow), 0 12px 40px rgba(0,90,200,0.16);
  transform:translateY(-4px);
}
.card-header {
  background:rgba(0,170,255,0.055); border-bottom:1px solid var(--border);
  padding:11px 16px; display:flex; align-items:center; justify-content:space-between;
  position:relative; z-index:1;
}
/* module index number */
.card-header::after {
  content:'M·0' counter(mod); position:absolute; right:14px; bottom:-9px;
  font-family:var(--font-m); font-size:.45rem; letter-spacing:.12em;
  color:rgba(0,170,255,0.4);
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  padding:1px 7px; z-index:2;
}
.card-title {
  font-family:var(--font-h); font-size:.57rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--blue); font-weight:700;
  display:flex; align-items:center; gap:6px;
}
.card-title::before { content:'//'; opacity:.4; font-family:var(--font-m); font-size:.5rem; }
.card-status {
  font-family:var(--font-m); font-size:.5rem; color:var(--cyan);
  letter-spacing:.05em; display:flex; align-items:center; gap:4px;
  background:rgba(0,229,255,0.06); border:1px solid rgba(0,229,255,0.18);
  border-radius:20px; padding:2px 8px; white-space:nowrap;
}
.card-status::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 6px var(--cyan);
  animation:core-pulse 2.2s infinite; flex-shrink:0;
}
.card-body { padding:14px 16px 12px; position:relative; z-index:1; }
.card ul { list-style:none; display:flex; flex-direction:column; gap:1px; }
.card ul li { border-bottom:1px solid rgba(0,170,255,0.07); }
.card ul li:last-child { border-bottom:none; }
.card ul li a {
  font-family:var(--font-b); font-size:.9rem; color:var(--text);
  display:flex; align-items:center; gap:8px; padding:6px 0;
  transition:color .15s, text-shadow .15s, padding-left .15s;
  letter-spacing:.02em; font-weight:500;
}
.card ul li a::before {
  content:'▷'; color:rgba(0,160,255,0.55); font-size:.72em; flex-shrink:0;
  transition:color .15s, text-shadow .15s;
}
.card ul li a:hover { color:var(--cyan); text-shadow:0 0 8px rgba(0,229,255,0.22); padding-left:7px; }
.card ul li a:hover::before { color:var(--cyan); text-shadow:var(--cglow); }

/* ════════ HOMEPAGE WIDGETS ════════ */
.widget-row {
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:16px; margin:26px 0 8px;
}
@media(max-width:980px){ .widget-row{grid-template-columns:1fr;} }
.widget {
  background:var(--panel);
  border:1px solid var(--border); border-radius:var(--r);
  position:relative; overflow:hidden; backdrop-filter:blur(10px);
  transition:border-color .25s, box-shadow .25s;
}
.widget:hover { border-color:var(--border2); box-shadow:var(--glow); }
.widget::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.5), transparent);
  animation:shimmer 3.4s ease-in-out infinite;
}
.widget-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-bottom:1px solid var(--border);
  background:rgba(0,170,255,0.045);
}
.widget-title {
  font-family:var(--font-h); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); font-weight:700;
}
.widget-tag {
  font-family:var(--font-m); font-size:.48rem; color:var(--cyan);
  border:1px solid rgba(0,229,255,0.2); border-radius:14px; padding:1px 8px;
  background:rgba(0,229,255,0.05); letter-spacing:.08em;
}
.widget-body { padding:12px 16px; }

/* terminal */
.terminal {
  font-family:var(--font-m); font-size:.62rem; line-height:1.85;
  color:var(--text); min-height:128px; letter-spacing:.03em;
}
.terminal .t-time { color:rgba(0,170,255,0.5); margin-right:8px; }
.terminal .t-ok { color:var(--cyan); }
.terminal .t-warn { color:var(--gold); }
.terminal .t-cursor {
  display:inline-block; width:7px; height:11px; background:var(--cyan);
  vertical-align:-1px; animation:blink 1s steps(1) infinite;
  box-shadow:0 0 7px rgba(0,229,255,0.7);
}
@keyframes blink { 50%{opacity:0} }

/* radar + waveform canvases */
.widget canvas { display:block; width:100%; }

/* gauges */
.gauge-row { display:flex; justify-content:space-around; gap:8px; padding:6px 4px 10px; flex-wrap:wrap; }
.gauge { display:flex; flex-direction:column; align-items:center; gap:5px; }
.gauge svg { transform:rotate(-90deg); }
.gauge .g-track { stroke:rgba(0,80,160,0.3); fill:none; }
.gauge .g-fill {
  stroke:url(#g-grad); fill:none; stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(0,229,255,0.55));
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1);
}
.gauge .g-num {
  font-family:var(--font-h); font-size:.62rem; fill:var(--cyan);
  transform:rotate(90deg); transform-origin:center; text-anchor:middle; dominant-baseline:central;
}
.gauge-label {
  font-family:var(--font-m); font-size:.48rem; color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase;
}

/* ════════ GALLERY / ALBUMS ════════ */
.albums-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px; }
.album-card {
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; transition:border-color .24s, box-shadow .25s, transform .2s;
  color:var(--text); display:flex; flex-direction:column; position:relative;
}
.album-card:hover { border-color:var(--border2); box-shadow:var(--glow); transform:translateY(-4px); }
.album-thumb { height:160px; position:relative; overflow:hidden; background:var(--bg3); }
.album-thumb img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.8) saturate(.8) hue-rotate(185deg) saturate(1.4);
  transition:filter .3s, transform .4s;
}
.album-card:hover .album-thumb img { transform:scale(1.05); filter:brightness(.95) saturate(.9) hue-rotate(185deg) saturate(1.3); }
.album-info { padding:16px 18px; }
.album-info h4 { font-family:var(--font-h); font-size:.78rem; font-weight:700; margin-bottom:4px; color:var(--bright); letter-spacing:.05em; }
.album-info p { font-size:.85rem; color:var(--muted); font-family:var(--font-m); font-size:.6rem; letter-spacing:.04em; }
.album-badge {
  position:absolute; top:10px; right:10px;
  background:rgba(0,10,35,0.8); border:1px solid rgba(0,229,255,0.35);
  color:var(--cyan); font-family:var(--font-m); font-size:.55rem;
  padding:3px 10px; border-radius:16px; letter-spacing:.06em; z-index:2;
}

.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(172px,1fr)); gap:13px; }
.gallery-item {
  position:relative; border-radius:var(--r-img); overflow:hidden;
  background:var(--bg3); aspect-ratio:1;
  border:1px solid var(--border);
  transition:border-color .24s, box-shadow .24s, transform .2s;
  box-shadow:0 3px 14px rgba(0,0,0,0.3);
}
.gallery-item:hover {
  border-color:var(--cyan);
  box-shadow:var(--cglow), 0 8px 30px rgba(0,100,200,0.24);
  transform:scale(1.045); z-index:2;
}
.gallery-item a { display:block; width:100%; height:100%; position:relative; }
.gallery-item img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.78) saturate(.78) hue-rotate(185deg) saturate(1.45);
  transition:filter .3s;
}
.gallery-item:hover img { filter:brightness(.94) saturate(.9) hue-rotate(185deg) saturate(1.3); }
.gallery-overlay {
  position:absolute; inset:0; border-radius:var(--r-img);
  background:linear-gradient(155deg, rgba(0,40,110,0.62), rgba(0,140,255,0.3));
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px;
  opacity:0; transition:opacity .28s; pointer-events:none;
}
.gallery-overlay::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,180,255,0.05) 3px 4px);
}
.gallery-overlay-icon {
  font-family:var(--font-h); color:var(--cyan); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; text-shadow:var(--cglow);
  border:1px solid rgba(0,229,255,0.5); padding:6px 16px;
  background:rgba(0,15,55,0.78); border-radius:20px; position:relative; z-index:1;
}
.gallery-overlay-coords {
  font-family:var(--font-m); color:rgba(0,229,255,0.65); font-size:.52rem;
  letter-spacing:.1em; position:relative; z-index:1;
}
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-item::before, .gallery-item::after {
  content:''; position:absolute; z-index:3; pointer-events:none;
  width:14px; height:14px; border-color:rgba(0,229,255,0); border-style:solid;
  transition:all .28s; border-radius:3px;
}
.gallery-item::before { top:6px; left:6px; border-width:1.5px 0 0 1.5px; }
.gallery-item::after  { bottom:6px; right:6px; border-width:0 1.5px 1.5px 0; }
.gallery-item:hover::before, .gallery-item:hover::after {
  border-color:var(--cyan); width:22px; height:22px;
  box-shadow:0 0 8px rgba(0,229,255,0.45);
}

/* ════════ PHOTO VIEWER ════════ */
.photo-viewer { text-align:center; }
.photo-nav {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--panel2);
  border:1px solid var(--border2); border-radius:var(--r);
  padding:14px 24px; margin-bottom:20px;
  box-shadow:var(--glow); flex-wrap:wrap; gap:10px;
  position:relative; overflow:hidden; backdrop-filter:blur(8px);
}
.photo-nav::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.photo-nav h2 {
  font-family:var(--font-h); font-size:.7rem; color:var(--cyan);
  font-weight:500; letter-spacing:.1em; flex:1; text-align:center;
  text-transform:uppercase; text-shadow:var(--cglow);
}
.nav-btn {
  display:inline-flex; align-items:center; gap:7px; padding:10px 24px;
  background:rgba(0,170,255,0.06); border:1px solid var(--blue); border-radius:24px;
  font-family:var(--font-h); font-size:.6rem; font-weight:700;
  color:var(--blue); letter-spacing:.1em; text-transform:uppercase;
  transition:all .22s; position:relative; overflow:hidden;
}
.nav-btn::after {
  content:''; position:absolute; inset:0; border-radius:24px;
  background:linear-gradient(90deg, transparent, rgba(0,170,255,0.2), transparent);
  transform:translateX(-100%); transition:transform .42s;
}
.nav-btn:hover { box-shadow:var(--glow); color:var(--cyan); border-color:var(--cyan); }
.nav-btn:hover::after { transform:translateX(100%); }
.nav-btn.home { border-color:var(--cyan); color:var(--cyan); }
.nav-btn.home:hover { background:rgba(0,229,255,0.1); box-shadow:var(--cglow); }
.photo-frame {
  background:var(--panel2);
  border:1px solid var(--border3); border-radius:var(--r);
  padding:20px; box-shadow:var(--glow2);
  display:inline-block; max-width:100%; position:relative;
  backdrop-filter:blur(8px);
}
.photo-frame::before, .photo-frame::after {
  content:''; position:absolute; width:26px; height:26px;
  border-color:var(--cyan); border-style:solid; opacity:.6; border-radius:4px;
}
.photo-frame::before { top:7px; left:7px; border-width:2px 0 0 2px; }
.photo-frame::after  { bottom:7px; right:7px; border-width:0 2px 2px 0; }
.photo-frame img {
  max-height:72vh; border-radius:var(--r-img);
  filter:hue-rotate(185deg) saturate(1.2) brightness(.93);
}

/* ════════ FOOTER ════════ */
.site-footer {
  background:rgba(0,4,14,0.99); border-top:1px solid var(--border);
  padding:16px 28px; font-family:var(--font-m); font-size:.6rem;
  color:var(--muted); letter-spacing:.06em; margin-top:auto;
  position:relative;
}
.site-footer::before {
  content:''; position:absolute; top:-1px; left:25%; right:25%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,229,255,0.45), transparent);
}
.footer-inner {
  width:100%; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-links a { color:var(--blue); margin:0 8px; }
.footer-links a:hover { color:var(--cyan); }
.footer-right { display:flex; align-items:center; gap:10px; }
.footer-status-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 6px var(--cyan);
  animation:core-pulse 2s infinite;
}
.footer-badge {
  background:rgba(0,170,255,0.06); border:1px solid rgba(0,170,255,0.18);
  border-radius:20px; padding:2px 10px; font-size:.54rem; letter-spacing:.05em;
}

/* ════════ SCROLLBAR ════════ */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--blue); box-shadow:var(--glow); }

/* ════════ RESPONSIVE ════════ */
@media(max-width:640px){
  .header-top{grid-template-columns:1fr; gap:10px; padding:14px 16px;}
  .header-topstrip{display:none;}
  .arc-reactor-wrap{display:none;}
  .header-panels{display:none;}
  .header-clock{width:100%;}
  .logo-orbit{display:none;}
  .search-bar input[type=text]{width:100%;}
  .cards-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(auto-fill, minmax(120px,1fr));}
  .photo-nav{flex-direction:column; align-items:center;}
  .photo-nav h2{order:-1; width:100%;}
  main{padding:0 16px;}
  .hud-frame{display:none;}
}
@media (prefers-reduced-motion