:root{
  --bg:#090b0f; --panel:#11151c; --line:#262c36; --text:#f1f3f6;
  --muted:#87909c; --amber:#ff9a3d; --amber2:#ffbf69; --red:#ff5b5b;
  --green:#65d98b; --blue:#66a6ff; --violet:#b37cff; --cyan:#62dbe8;
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(circle at 15% 0%,#16130e 0,#090b0f 35%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh}
.app-shell{max-width:1700px;margin:auto;padding:18px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.brand-wrap{display:flex;align-items:center;gap:12px}
.flame{font-size:38px;filter:drop-shadow(0 0 12px rgba(255,154,61,.45))}
.eyebrow,.panel-title{font-size:11px;letter-spacing:.18em;font-weight:800;color:var(--amber2)}
h1{font-size:27px;margin:3px 0 0;letter-spacing:.05em}
.status-wrap{display:flex;align-items:center;gap:14px}
.clock{font-size:15px;color:#cbd0d7}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tiny{font-size:11px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #3d4652;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:800;letter-spacing:.08em;background:#171c23}
.pill.healthy{border-color:rgba(101,217,139,.35);color:var(--green)}
.pill.warning{border-color:rgba(255,191,105,.4);color:var(--amber2)}
.pill.danger{border-color:rgba(255,91,91,.4);color:var(--red)}
.pill.small{padding:5px 9px}
.status-dot{width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 10px var(--green)}
.panel{background:linear-gradient(180deg,rgba(19,24,31,.97),rgba(13,17,23,.97));border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.22);overflow:hidden}
.panel-header{display:flex;justify-content:space-between;align-items:flex-start;padding:15px 16px 10px;gap:12px}
.panel-subtitle{color:var(--muted);font-size:12px;margin-top:4px}
.pulse-panel{margin-bottom:16px}
.pulse-stats{display:grid;grid-template-columns:repeat(4,minmax(105px,1fr));gap:8px}
.pulse-stats div,.vision-bottom div,.mini-grid div,.body-stats div{background:#0b0e13;border:1px solid #202630;border-radius:9px;padding:8px 10px}
.pulse-stats span,.vision-bottom span,.mini-grid span,.body-stats span{display:block;color:var(--muted);font-size:10px;margin-bottom:3px}
.pulse-stats b,.vision-bottom b,.mini-grid b,.body-stats b{font-size:12px}
#pulseCanvas{width:100%;height:130px;display:block;background:linear-gradient(rgba(255,154,61,.025),rgba(255,154,61,.005))}
.grid{display:grid;grid-template-columns:1.35fr 1.15fr 1fr;gap:16px}
.vision-panel{grid-row:span 2}
.vision-frame{margin:0 16px;min-height:455px;position:relative;border-radius:12px;overflow:hidden;background:#050608;border:1px solid #252b34}
.vision-frame img{width:100%;height:100%;object-fit:cover;display:none;position:absolute;inset:0}
.vision-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#5f6875;gap:12px}
.eye-symbol{font-size:52px;color:var(--amber);filter:drop-shadow(0 0 18px rgba(255,154,61,.35))}
.scanline{pointer-events:none;position:absolute;inset:-50% 0 0;background:linear-gradient(transparent 49%,rgba(255,154,61,.07) 50%,transparent 51%);background-size:100% 8px;animation:scan 9s linear infinite}
@keyframes scan{to{transform:translateY(50%)}}
.vision-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 16px 16px}
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:6px 14px 16px}
.gauge{display:flex;flex-direction:column;align-items:center}
.gauge-ring{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--gauge-color) calc(var(--value)*1%),#202630 0)}
.gauge-ring:after{content:"";position:absolute;width:83px;height:83px;border-radius:50%;background:#10141b;border:1px solid #252b34}
.gauge-value{position:relative;z-index:2;font-weight:800;font-size:22px}
.gauge-label{font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:8px;text-align:center}
.timeline-panel{grid-column:span 2}
#trendCanvas{width:100%;height:240px;display:block}
.legend{display:flex;gap:12px;color:var(--muted);font-size:10px}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:7px;height:7px;border-radius:50%}
.salience-dot{background:var(--amber)} .engagement-dot{background:var(--cyan)} .arousal-dot{background:var(--violet)}
.learning-list{padding:6px 16px 16px}
.learning-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(68px,max-content) minmax(72px,max-content);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid #202630;font-size:12px}
.learning-row span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.learning-row b{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.learning-row .trend{text-align:right;white-space:nowrap}
.learning-row:last-child{border-bottom:0}
.learning-row .trend.up{color:var(--green)} .learning-row .trend.flat{color:var(--muted)} .learning-row .trend.down{color:var(--red)}
.metric-row{display:flex;justify-content:space-between;padding:8px 16px 5px;font-size:12px}
.meter{height:7px;background:#202630;border-radius:6px;margin:0 16px 8px;overflow:hidden}
.meter div{height:100%;background:linear-gradient(90deg,var(--amber),var(--amber2));border-radius:6px}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:7px 16px 16px}
.body-map{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;padding:6px 16px 16px}
.body-icon{font-size:96px;text-align:center;color:var(--amber);text-shadow:0 0 20px rgba(255,154,61,.15);transition:color .25s,transform .25s}
.body-icon.body-moving{animation:bodyPulse 1.6s ease-in-out infinite;color:var(--amber2)}
.body-icon.body-contact{color:var(--cyan);text-shadow:0 0 22px rgba(98,219,232,.35)}
.body-icon.body-reflex{color:var(--red);text-shadow:0 0 22px rgba(255,91,91,.35)}
@keyframes bodyPulse{50%{transform:scale(1.045)}}
.body-stats{display:grid;gap:7px}
.activity-main{display:flex;align-items:end;justify-content:space-between;padding:6px 16px 10px}
.activity-name{font-size:16px;font-weight:750}
.activity-score{font-size:34px;font-weight:850;color:var(--amber2)}
.activity-components{padding:0 16px 16px}
.component{display:grid;grid-template-columns:150px 1fr 45px;gap:8px;align-items:center;font-size:11px;margin:7px 0}
.component .bar{height:7px;border-radius:6px;background:#202630;overflow:hidden}
.component .bar i{display:block;height:100%;border-radius:6px;background:var(--amber)}
.events{padding:5px 16px 16px;max-height:300px;overflow:auto}
.event{display:grid;grid-template-columns:74px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid #202630}
.event:last-child{border:0}
.event-time{font-family:ui-monospace,monospace;font-size:10px;color:var(--muted)}
.event-title{font-size:11px;font-weight:750}
.event-detail{font-size:10px;color:var(--muted);margin-top:2px}
footer{display:flex;justify-content:space-between;color:#5e6671;font-size:10px;padding:15px 4px 4px}
@media (max-width:1200px){
 .grid{grid-template-columns:1fr 1fr}
 .vision-panel{grid-row:auto}
 .timeline-panel{grid-column:span 2}
}
@media (max-width:780px){
 .app-shell{padding:10px}
 .grid{grid-template-columns:1fr}
 .timeline-panel{grid-column:auto}
 .pulse-stats{grid-template-columns:1fr 1fr}
 .gauges{grid-template-columns:1fr 1fr}
 .topbar{align-items:flex-start;gap:10px}
 .status-wrap{flex-direction:column;align-items:flex-end}
 .vision-frame{min-height:340px}
}