/* Mothercharger Future HUD — soft holographic cyan / ember */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --yellow:#3de7ff;
  --cyan:#3de7ff;
  --ember:#ff7a52;
  --ink:#e8f7ff;
  --muted:#7fa0b8;
  --line:#3de7ff1f;
  --green:#5dffc8;
  --red:#ff7a52;
  --radius:18px;
  --radius-sm:12px;
  --ease:cubic-bezier(.22,.68,0,1.1);
  color-scheme:dark;
}

body{
  background:#050d16;
  background-image:
    radial-gradient(ellipse at 20% -8%,#0e4a6a40,transparent 50%),
    radial-gradient(ellipse at 90% 12%,#5a1e0e28,transparent 45%),
    radial-gradient(ellipse at 50% 100%,#063a4a28,transparent 55%),
    linear-gradient(#3de7ff04 1px,transparent 1px),
    linear-gradient(90deg,#3de7ff04 1px,transparent 1px);
  background-size:auto,auto,auto,64px 64px,64px 64px;
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Manrope','IBM Plex Sans Thai',sans-serif;
}

body:before{
  content:'';
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,#0000000c 4px);
  opacity:.2;
  mix-blend-mode:overlay;
}

body:after{
  content:'';
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:0;
  background:linear-gradient(105deg,transparent 42%,#3de7ff06 50%,transparent 58%);
  animation:hud-scan 14s ease-in-out infinite;
}

@keyframes hud-scan{
  0%{transform:translateX(-25%);opacity:.12}
  50%{opacity:.28}
  100%{transform:translateX(25%);opacity:.12}
}

.shell,main,header,#content{position:relative;z-index:1}

header{
  background:linear-gradient(180deg,#07141fcc,#050d16f0);
  border-bottom:1px solid #3de7ff22;
  backdrop-filter:blur(22px) saturate(1.15);
}
header:after{
  width:36%;
  left:32%;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#3de7ffaa,#ff7a5288,transparent);
  box-shadow:0 0 18px #3de7ff44,0 0 28px #ff7a5228;
}

.mast-brand{
  color:var(--cyan);
  text-shadow:0 0 20px #3de7ff40;
  transition:color .25s var(--ease),text-shadow .25s ease;
}
.mast-brand span{
  color:#eaf8ff;
  font-weight:700;
  letter-spacing:.8px;
}
.mast-brand small,.mast-center>span,.snapshot{color:#6f93ad}
.mast-center strong{color:#c8e9f8;font-weight:600}
#menu-toggle,#fullscreen{
  background:#3de7ff0a;
  border:1px solid #3de7ff2a;
  color:#b6e7f7;
  border-radius:999px;
  transition:border-color .25s ease,color .25s ease,box-shadow .25s ease,background .25s ease;
}
#menu-toggle:hover,#fullscreen:hover{
  border-color:#3de7ff88;
  color:var(--cyan);
  background:#3de7ff12;
  box-shadow:0 0 16px #3de7ff28;
}

.page-heading{margin-bottom:20px}
.eyebrow{
  color:var(--cyan);
  letter-spacing:2.8px;
  text-shadow:0 0 14px #3de7ff40;
  font-size:10px;
  font-weight:700;
}
h1{
  font-weight:700;
  letter-spacing:-.4px;
  color:#f0fbff;
  text-shadow:0 0 24px #3de7ff18;
}
.page-heading p{color:#7fa0b8;line-height:1.65}
.period label{color:#7fa0b8}
.period select,select,input{
  background:#061521b8;
  border:1px solid #3de7ff30;
  color:#d7f3ff;
  border-radius:var(--radius-sm);
  box-shadow:inset 0 0 18px #3de7ff06;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.period select:hover,select:hover,input:hover{border-color:#3de7ff55}
.period select:focus,select:focus,input:focus{border-color:#3de7ff99;box-shadow:0 0 0 3px #3de7ff18}
option{background:#061521}

/* Soft glass panels */
.card,.kpi{
  background:linear-gradient(155deg,#0c2032c4,#06131eea);
  border:1px solid #3de7ff28;
  border-radius:var(--radius);
  box-shadow:
    inset 0 1px #ffffff10,
    0 12px 40px #00000040,
    0 0 0 1px #00000020;
  backdrop-filter:blur(20px) saturate(1.2);
  padding:24px;
  overflow:hidden;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s var(--ease);
}
.card:hover{
  border-color:#3de7ff44;
  box-shadow:
    inset 0 1px #ffffff14,
    0 16px 48px #00000050,
    0 0 32px #3de7ff10;
}
.card:before{
  content:'';
  position:absolute;
  top:0;left:18px;right:18px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.55;
  box-shadow:0 0 10px #3de7ff44;
  display:block;
  border-radius:1px;
}
.card:after{
  content:'';
  position:absolute;
  top:10px;right:12px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--ember);
  opacity:.55;
  box-shadow:0 0 10px #ff7a5266;
  pointer-events:none;
}
.card h2{
  color:#e8f7ff;
  font-size:15px;
  font-weight:650;
  letter-spacing:-.1px;
  text-transform:none;
}
.card-head p,.caption{color:#7fa0b8}
.section-index{
  color:#3de7ff66;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.tag{
  color:var(--cyan);
  border:1px solid #3de7ff33;
  background:#3de7ff12;
  border-radius:999px;
  letter-spacing:1px;
  font-size:9px;
  font-weight:700;
  padding:6px 12px;
  box-shadow:0 0 12px #3de7ff14;
}

.command-layout{
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.05fr) minmax(280px,.9fr);
  gap:20px;
}

/* Pulse strip */
.command-pulse{
  grid-row:1;grid-column:1/-1;
  background:transparent;border:0;box-shadow:none;padding:0;
  backdrop-filter:none;
}
.command-pulse:before,.command-pulse:after{display:none}
.command-pulse:hover{box-shadow:none;border:0;transform:none}
.command-pulse>.card-head{display:none}
.pulse-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pulse-stat,
.pulse-stat:nth-child(even),
.pulse-stat:nth-child(n+3){
  background:linear-gradient(145deg,#0d2436d0,#071420f0);
  border:1px solid #3de7ff26;
  border-radius:var(--radius);
  padding:20px 22px;
  min-height:148px;
  box-shadow:0 10px 28px #00000030;
  overflow:hidden;
  position:relative;
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s var(--ease);
}
.pulse-stat:hover{
  border-color:#3de7ff55;
  box-shadow:0 14px 36px #00000040,0 0 24px #3de7ff12;
  transform:translateY(-2px);
}
.pulse-stat:before{
  content:'';
  position:absolute;
  left:0;top:18px;bottom:18px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--cyan);
  box-shadow:0 0 12px #3de7ff66;
  opacity:.85;
}
.pulse-stat:nth-child(2):before{background:#5dffc8;box-shadow:0 0 12px #5dffc866}
.pulse-stat:nth-child(3):before{background:var(--ember);box-shadow:0 0 12px #ff7a5266}
.pulse-stat:nth-child(4):before{background:#b39aff;box-shadow:0 0 12px #b39aff66}
.pulse-stat>span{color:#8eb4cc;font-size:13px;letter-spacing:0}
.pulse-stat strong{
  color:#f2fbff;
  font-weight:700;
  font-size:34px;
  letter-spacing:-.8px;
  text-shadow:0 0 18px #3de7ff28;
  transition:color .25s ease;
}
.pulse-stat:hover strong{color:var(--cyan)}
.pulse-stat .delta{
  background:#3de7ff14!important;
  color:var(--cyan)!important;
  border:1px solid #3de7ff28;
  border-radius:999px;
  padding:4px 10px;
}
.delta.down,.negative{
  color:var(--ember)!important;
  background:#ff7a5218!important;
  border-color:#ff7a5240!important;
}
.positive{color:#5dffc8!important}
.spark{color:var(--cyan);opacity:.75;filter:drop-shadow(0 0 3px #3de7ff55)}
.pulse-stat:nth-child(2) .spark{color:#5dffc8}
.pulse-stat:nth-child(3) .spark{color:var(--ember)}
.pulse-stat:nth-child(4) .spark{color:#b39aff}

/* Hero */
.command-hero{
  grid-row:2;grid-column:1/3;
  background:
    radial-gradient(ellipse at 85% 0%,#ff7a5214,transparent 48%),
    radial-gradient(ellipse at 8% 100%,#3de7ff14,transparent 52%),
    linear-gradient(155deg,#0c2234e0,#06131ef5);
}
.command-hero:after{
  content:'';
  left:10%;right:10%;top:0;width:auto;height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent,#3de7ffcc,#ff7a5288,transparent);
  box-shadow:0 0 14px #3de7ff44;
  position:absolute;
}
.hero-amount>span{
  color:var(--cyan);
  letter-spacing:2px;
  font-size:12px;
  font-weight:700;
  text-shadow:0 0 10px #3de7ff40;
}
.hero-amount>strong{
  color:#f5fcff;
  font-weight:700;
  letter-spacing:-1.2px;
  text-shadow:0 0 36px #3de7ff33;
}
.hero-foot{border-color:#3de7ff1a}
.hero-foot strong{color:#e8f7ff}
.hero-foot small{color:#7fa0b8}
.comparison-chart text{fill:#6f93ad}
.comparison-legend{color:#8eb4cc}
.comparison-legend i{background:var(--cyan);box-shadow:0 0 6px #3de7ff66;border-radius:50%}
.comparison-legend span:nth-child(2) i{background:var(--ember);box-shadow:0 0 6px #ff7a5266}

/* Network / ring */
.command-network{grid-row:2;grid-column:3;position:relative;overflow:hidden}
.network-orbit{position:relative}
.ring{
  background:conic-gradient(var(--cyan) calc(var(--pct)*1%),#123044 0);
  outline:1px solid #3de7ff28;
  outline-offset:14px;
  border-radius:50%;
  box-shadow:0 0 36px #3de7ff28,inset 0 0 24px #3de7ff14;
  animation:ring-glow 5.5s ease-in-out infinite;
}
@keyframes ring-glow{
  0%,100%{box-shadow:0 0 28px #3de7ff20,inset 0 0 18px #3de7ff10}
  50%{box-shadow:0 0 44px #3de7ff38,inset 0 0 28px #3de7ff18}
}
.ring>div{background:#06131e;border-radius:50%}
.ring strong{
  color:var(--cyan);
  font-weight:700;
  letter-spacing:-.5px;
  text-shadow:0 0 16px #3de7ff55;
}
.ring small{color:#7fa0b8;letter-spacing:1.5px}
.network-counts strong{color:#e8f7ff;font-weight:700}
.network-counts small{color:#7fa0b8}

/* Ranking / channels / target */
.command-ranking{grid-row:3;grid-column:1}
.command-channels{grid-row:3;grid-column:2}
.command-target{grid-row:3;grid-column:3}
.rank-num{
  background:#0c2436;
  color:#7fa0b8;
  border-radius:8px;
  border:1px solid #3de7ff1e;
}
.rank-row:first-child .rank-num{background:#3de7ff1e;color:var(--cyan);border-color:#3de7ff44}
.rank-name{color:#c8e9f8}
.rank-value{color:var(--cyan);text-shadow:0 0 8px #3de7ff28}
.rank-row:hover .rank-name{color:#fff}
.rank-row{border-radius:var(--radius-sm);transition:background .25s ease}
.track{background:#0c2436;border-radius:999px;overflow:hidden}
.track i{
  background:linear-gradient(90deg,#0e5a6e,var(--cyan));
  box-shadow:0 0 10px #3de7ff44;
  border-radius:999px;
}
.channels .channel:nth-child(2) i{background:linear-gradient(90deg,#6a220e,var(--ember));box-shadow:0 0 10px #ff7a5244}
.channels .channel:nth-child(3) i{background:linear-gradient(90deg,#3a2a6e,#b39aff);box-shadow:0 0 10px #b39aff44}

.payment-donut{
  box-shadow:0 0 36px #3de7ff22;
  filter:drop-shadow(0 0 6px #3de7ff28);
}
.payment-donut>div{background:#06131e}
.payment-donut strong{color:var(--cyan);font-weight:700;text-shadow:0 0 12px #3de7ff40}
.payment-donut small,.payment-donut span{color:#7fa0b8}
.donut-legend span{color:#8eb4cc}
.donut-legend strong{color:#e8f7ff}
.donut-legend i{border-radius:50%;box-shadow:0 0 5px currentColor}

.target-number{
  color:var(--ember);
  font-weight:700;
  letter-spacing:-1px;
  text-shadow:0 0 24px #ff7a5244;
}
.target-line{color:#7fa0b8}
.target-line b{color:#e8f7ff}

.link,.network-action,.howto-link{
  color:var(--cyan);
  transition:color .25s ease,text-shadow .25s ease;
}
.link:hover,.network-action:hover{color:#fff;text-shadow:0 0 12px #3de7ff66}
.network-action{
  border-color:#3de7ff22;
  border-radius:var(--radius-sm);
  transition:border-color .25s ease,color .25s ease,background .25s ease;
}
.network-action:hover{background:#3de7ff0c;border-color:#3de7ff44}
.command-bottom{color:#5f829a}

/* KPI + tables elsewhere */
.kpi.primary{
  background:linear-gradient(145deg,#0c2a3a,#06131e);
  border-color:#3de7ff44;
}
.kpi.primary strong,.primary strong{color:var(--cyan);text-shadow:0 0 16px #3de7ff40}
.kpi-label,.primary .kpi-label{color:#7fa0b8}
.kpi strong{color:#e8f7ff}
.notice,.metrics>div{
  background:#0a1c2c;
  color:#8eb4cc;
  border:1px solid #3de7ff14;
  border-radius:var(--radius-sm);
}
.notice b,.metrics strong,.chart-note b{color:var(--cyan)}
.metrics small{color:#7fa0b8}
th{background:#0a1c2c;color:#7fa0b8}
td{border-color:#3de7ff12;color:#c8e9f8}
td button{color:#e8f7ff}
.status{
  background:#0d3a3222;
  color:#5dffc8;
  border:1px solid #5dffc833;
  border-radius:999px;
}
.status.warn{background:#3a1a0d44;color:var(--ember);border-color:#ff7a5244}
.pagination button{
  background:#061521;
  border-color:#3de7ff28;
  color:#c8e9f8;
  border-radius:var(--radius-sm);
}
.bar-column i{
  background:linear-gradient(#3de7ff,#0e5a6e);
  box-shadow:0 0 8px #3de7ff33;
  border-radius:6px 6px 0 0;
}
.insight-strip{background:#0c2234;border-color:#3de7ff28;border-radius:var(--radius-sm)}
.bar-column:hover i{background:linear-gradient(var(--ember),#6a220e)}

#detail,#navigation{
  background:#06131e;
  border:1px solid #3de7ff33;
  color:#e8f7ff;
  border-radius:22px;
  box-shadow:0 0 50px #3de7ff18;
}
#detail::backdrop,#navigation::backdrop{
  background:#02080fcc;
  backdrop-filter:blur(12px);
}
.dialog-head{color:var(--cyan)}
.dialog-head button{background:#0c2436;color:#c8e9f8;border-radius:50%}
#navigation{border-radius:0}
#navigation nav button{border-radius:var(--radius-sm);transition:background .25s ease,color .25s ease}
#navigation nav button.active{
  background:linear-gradient(90deg,var(--cyan),#2bb8d0);
  color:#031018;
  box-shadow:0 0 18px #3de7ff40;
}
#navigation .brand b,#navigation .brand{color:var(--cyan)}
footer{color:#4a6d82}
footer b{color:var(--cyan)}

/* Soft status strip */
.hud-status{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  margin-bottom:18px;
  padding:12px 16px;
  border:1px solid #3de7ff20;
  border-radius:999px;
  background:linear-gradient(90deg,#3de7ff0a,#ff7a5208,transparent);
  font-size:11px;
  letter-spacing:.6px;
  color:#8eb4cc;
  backdrop-filter:blur(12px);
}
.hud-status .beacon{
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 10px #3de7ffaa;
  animation:beacon 2.2s ease-in-out infinite;
}
@keyframes beacon{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.9)}
}
.hud-status b{color:var(--cyan);font-weight:700}
.hud-status .ember{color:var(--ember)}

.hud-nodes{
  position:absolute;
  inset:40px 20px 80px;
  pointer-events:none;
  opacity:.32;
}
.hud-nodes svg{width:100%;height:100%}

.hud-wave{
  display:block;
  width:100%;
  height:28px;
  margin:2px 0 10px;
  opacity:.55;
}
.hud-wave path{
  fill:none;
  stroke:var(--cyan);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 3px #3de7ff66);
}

/* Live demo */
.live-demo-strip{
  border:1px solid #3de7ff28;
  background:linear-gradient(90deg,#3de7ff0a,#ff7a5208);
  border-radius:var(--radius);
  box-shadow:0 8px 28px #00000028;
  transition:border-color .3s ease;
}
.live-demo-controls strong{
  color:var(--cyan);
  font-weight:700;
  text-shadow:0 0 10px #3de7ff28;
}
.live-switch input{accent-color:var(--cyan)}
.live-demo-controls button{
  background:linear-gradient(90deg,var(--cyan),#2bb8d0);
  color:#031018;
  border-radius:999px;
  box-shadow:0 0 16px #3de7ff33;
  transition:transform .25s var(--ease),box-shadow .25s ease;
}
.live-demo-controls button:hover{transform:translateY(-1px);box-shadow:0 0 22px #3de7ff55}
.projection-label{
  color:var(--ember);
  background:#ff7a5214;
  border-color:#ff7a5233;
  border-radius:999px;
}
#live-polyline{stroke:var(--cyan)!important;filter:drop-shadow(0 0 3px #3de7ff88)}
#live-area{fill:#3de7ff14!important}

.demo-badge,.ticker,.ask-launch{background:var(--cyan);color:#031018;box-shadow:0 0 22px #3de7ff33}
.ticker{background:#3de7ff0c;border-color:#3de7ff28;color:var(--cyan);border-radius:var(--radius-sm)}
.activity-row strong,.event-kind{color:var(--cyan)}
.ask-launch{
  border-radius:999px;
  clip-path:none;
  transition:transform .25s var(--ease),box-shadow .25s ease;
}
.ask-launch:hover{transform:translateY(-2px);box-shadow:0 8px 28px #3de7ff44}
.ask-head span{color:var(--cyan)}

/* Costs page — match cyan HUD */
.cost-size-grid legend{color:var(--cyan);background:transparent}
.cost-size-grid fieldset{border-color:#3de7ff28;border-radius:var(--radius-sm);background:#06131e88}
.cost-actions button,.econ-mode button[aria-pressed=true]{
  background:linear-gradient(90deg,var(--cyan),#2bb8d0);
  color:#031018;
  border-radius:999px;
  box-shadow:0 0 16px #3de7ff33;
}
.econ-eyebrow{color:var(--cyan)}
.econ-hero{
  border-top:2px solid var(--cyan);
  background:radial-gradient(ellipse at 95% 0,#3de7ff14,transparent 60%),#06131e;
  border-radius:var(--radius);
  border-color:#3de7ff28;
}
.econ-hero>strong{color:var(--cyan);text-shadow:0 0 24px #3de7ff33}
.econ-health,.econ-panel{
  background:linear-gradient(155deg,#0c2032c4,#06131eea);
  border-color:#3de7ff28;
  border-radius:var(--radius);
}
.econ-donut{background:conic-gradient(var(--cyan) var(--paid),#123044 0);box-shadow:0 0 28px #3de7ff22}
.econ-donut>div{background:#06131e}
.econ-health-copy i{background:var(--cyan);box-shadow:0 0 6px #3de7ff66}
.econ-bar-line b{color:var(--cyan)}
.econ-track{border-radius:999px;background:#0c2436}
.econ-track i{background:linear-gradient(90deg,#0e5a6e,var(--cyan));border-radius:999px;box-shadow:0 0 8px #3de7ff44}
.econ-bar:focus-visible{outline-color:var(--cyan)}
.econ-rank,.econ-bar-meta>span{color:#7fa0b8}
.econ-bar.loss .econ-bar-line b{color:#c8e9f8}
.econ-count{border-color:#3de7ff28;border-radius:999px;color:#8eb4cc}
#cost-detail{background:#06131e;border-color:#3de7ff33;border-radius:22px;color:#e8f7ff}

button:not(:disabled),
[role=button],
a,
summary,
.card,
.pulse-stat,
.kpi{
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s var(--ease);
}
button:not(:disabled):hover,[role=button]:hover{
  border-color:#3de7ff55;
  box-shadow:0 0 14px #3de7ff18;
}
.rank-row:hover{background:#3de7ff0c}
.comparison-chart circle:hover,.chart circle:hover{
  stroke:#fff;
  filter:drop-shadow(0 0 5px #3de7ff);
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:4px;
  border-radius:8px;
}

@media(min-width:1600px){
  .pulse-stat strong{font-size:40px}
  .hero-amount>strong{font-size:72px}
  .ring{width:210px;height:210px}
  .ring>div{width:184px;height:184px}
}

@media(max-width:1200px){
  .command-layout{grid-template-columns:1fr 1fr}
  .command-pulse{grid-column:1/-1;grid-row:1}
  .command-hero{grid-column:1/-1;grid-row:2}
  .command-network{grid-column:1;grid-row:3}
  .command-channels{grid-column:2;grid-row:3}
  .command-ranking{grid-column:1;grid-row:4}
  .command-target{grid-column:2;grid-row:4}
  .pulse-grid{gap:12px}
}

@media(max-width:700px){
  .command-layout{grid-template-columns:1fr;gap:14px}
  .command-layout>.card{grid-column:auto;grid-row:auto}
  .pulse-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pulse-stat strong{font-size:28px}
  .hero-amount>strong{font-size:42px}
  .hud-status{font-size:10px;gap:8px;letter-spacing:.3px;border-radius:var(--radius);padding:12px 14px}
  h1{font-size:22px}
  body:after{animation:none;opacity:.1}
  .card,.pulse-stat{border-radius:16px}
}

@media(prefers-reduced-motion:reduce){
  body:after,.ring,.hud-status .beacon{animation:none}
  .pulse-stat:hover,.ask-launch:hover,.live-demo-controls button:hover{transform:none}
}