/* controller.html — visual layer. Load LAST. */
:root{--ct-cu:#b4561f;--ct-cu2:#f0a35e;--ct-navy:#0b1530;--ct-ease:cubic-bezier(.2,.8,.2,1)}
@keyframes ctIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes ctFloat{50%{transform:translateY(16px) scale(1.06)}}
@keyframes ctFlow{to{background-position:-200% 0}}
@keyframes ctLive{70%{box-shadow:0 0 0 9px transparent}0%{box-shadow:0 0 0 0 rgba(39,209,127,.7)}}
@keyframes ctShine{to{background-position:200% 0}}
#main{position:relative;background:radial-gradient(620px 320px at 90% 0,rgba(240,163,94,.2),transparent 62%),linear-gradient(180deg,#fff8f1,#f6f8fc 40%)}
.ctrl-header{position:relative;overflow:hidden;margin-top:18px;padding:clamp(22px,3vw,40px)!important;border-radius:32px;background:radial-gradient(500px 260px at 88% 0,rgba(240,163,94,.42),transparent 60%),linear-gradient(135deg,#0b1530,#14244d);color:#fff;box-shadow:0 28px 64px rgba(11,21,48,.3);animation:ctIn .7s both}
.ctrl-header::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;inset-inline-start:4%;top:-100px;background:radial-gradient(circle,rgba(255,184,107,.5),transparent 66%);animation:ctFloat 7s ease-in-out infinite;pointer-events:none}
.ctrl-header>*{position:relative;z-index:1}
.ctrl-header h1,.ctrl-header h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800}
.ctrl-header p,.ctrl-header .last-updated{color:rgba(255,255,255,.75)}
.live-pill{border-radius:99px!important;background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;backdrop-filter:blur(8px);font-weight:700}
.live-dot,.pulse-dot{animation:ctLive 2s infinite}

/* metrics */
.ctrl-metrics{gap:clamp(14px,1.6vw,22px)!important}
.ctrl-metrics .stat-card{position:relative;overflow:hidden;border-radius:26px!important;border:1px solid #fff!important;background:#fff!important;box-shadow:0 14px 38px rgba(11,21,48,.08)!important;animation:ctIn .6s both;transition:transform .35s var(--ct-ease),box-shadow .35s}
.ctrl-metrics .stat-card::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:linear-gradient(90deg,var(--ct-cu),var(--ct-cu2))}
.ctrl-metrics .stat-card:nth-child(2n)::before{background:linear-gradient(90deg,#0f766e,#27d17f)}
.ctrl-metrics .stat-card:nth-child(3n)::before{background:linear-gradient(90deg,#4b7bff,#9bb6ff)}
.ctrl-metrics .stat-card:nth-child(2){animation-delay:.05s}.ctrl-metrics .stat-card:nth-child(3){animation-delay:.1s}.ctrl-metrics .stat-card:nth-child(4){animation-delay:.15s}.ctrl-metrics .stat-card:nth-child(n+5){animation-delay:.2s}
.ctrl-metrics .stat-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(180,86,31,.16)!important}
.stat-card__icon{border-radius:16px!important;background:linear-gradient(135deg,var(--ct-cu),var(--ct-cu2))!important;color:#fff!important;box-shadow:0 8px 18px rgba(180,86,31,.35)}
.stat-card__icon svg{stroke:#fff}
.stat-card__value{font-weight:800;color:var(--ct-navy)}

/* cards */
.flow-card,.battery-card,.chart-card,.dash-row .card,.controls-grid .card,.health-grid .card{border-radius:28px!important;border:1px solid #fff!important;box-shadow:0 16px 44px rgba(11,21,48,.08)!important;background:rgba(255,255,255,.95)!important}
.flow-diagram{padding:12px}
.flow-node{border-radius:24px!important;border:2px solid #eef1f8!important;background:#fff!important;box-shadow:0 10px 26px rgba(11,21,48,.07);transition:transform .35s var(--ct-ease),box-shadow .35s}
.flow-node:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 20px 40px rgba(180,86,31,.18)}
.flow-node--source{border-color:#fed7aa!important;background:linear-gradient(160deg,#fff4e8,#fff)!important}
.flow-node__icon{border-radius:16px;background:linear-gradient(135deg,var(--ct-cu),var(--ct-cu2));color:#fff;box-shadow:0 8px 18px rgba(180,86,31,.35)}
.flow-node__icon svg{stroke:#fff}
.flow-node__value{font-weight:800;color:var(--ct-navy)}
.flow-connector{border-radius:6px;background:linear-gradient(90deg,transparent 0,rgba(240,163,94,.9) 50%,transparent 100%)!important;background-size:200% 100%!important;animation:ctFlow 2.4s linear infinite;opacity:.8}

/* battery */
.battery-visual{border-radius:20px!important;overflow:hidden;box-shadow:inset 0 2px 8px rgba(11,21,48,.12)}
.battery-fill{background:linear-gradient(90deg,#0f766e,#27d17f,#9dffc9,#27d17f)!important;background-size:200% 100%!important;animation:ctShine 3s linear infinite;box-shadow:0 0 18px rgba(39,209,127,.6);transition:width 1s var(--ct-ease)}
.battery-percent{font-weight:800;color:var(--ct-navy)}

/* health + controls */
.health-item{border-radius:18px;background:linear-gradient(160deg,#fff,#f4f7fd);transition:transform .25s}.health-item:hover{transform:translateY(-3px)}
.control-row{padding:14px 16px;border-radius:20px;transition:background .2s}.control-row:hover{background:#fff8f0}
.switch input:checked+.switch-slider{background:linear-gradient(135deg,var(--ct-cu),var(--ct-cu2))!important;box-shadow:0 6px 16px rgba(180,86,31,.35)}
.reserve-slider{accent-color:var(--ct-cu)}
.offline-banner{border-radius:20px!important}
@media(prefers-reduced-motion:reduce){#main *{animation:none!important;transition:none!important}}