/* ===================================================================
   THEME TOKENS
   =================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300&display=swap');

:root {
  --gold:   #c9a84c;
  --goldl:  #e8cc80;
  --teal:   #2bb5a6;
  --tealb:  #1a8a80;
  --coral:  #e07070;
  --sage:   #5aab8a;
  --ble:    #4f8ef7;
  --violet: #9b6bdf;
  --t:      .35s ease;
  --font-head: 'Cinzel', serif;
  --font-body: 'Nunito Sans', system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg:        #090b0f;
  --bg2:       #10131c;
  --card:      #14172088;
  --card-s:    #1c2030;
  --border:    rgba(43,181,166,.18);
  --border2:   rgba(255,255,255,.09);
  --text:      #d4d8e2;
  --text2:     #8a96aa;
  --muted:     #5a6a7a;
  --white:     #ffffff;
  --hero-bg:   rgba(9,11,15,.96);
  --scene-bg:  rgba(20,23,32,.88);
  --sw-shadow: rgba(0,0,0,.55);
  --inset:     rgba(255,255,255,.04);
  --body-grad: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(43,181,166,.09) 0%, transparent 60%),
               radial-gradient(circle at 92% 82%, rgba(201,168,76,.06) 0%, transparent 40%);
  --ai-bg:     rgba(79,142,247,.06);
  --ai-border: rgba(79,142,247,.25);
}

[data-theme="light"] {
  --bg:        #f7f4ef;
  --bg2:       #ede9e1;
  --card:      rgba(255,252,246,.0);
  --card-s:    rgba(255,252,246,.95);
  --border:    rgba(43,181,166,.22);
  --border2:   rgba(0,0,0,.1);
  --text:      #1a1714;
  --text2:     #5a6070;
  --muted:     #8a8a8a;
  --white:     #0a0a0a;
  --hero-bg:   rgba(247,244,239,.96);
  --scene-bg:  rgba(255,252,246,.92);
  --sw-shadow: rgba(0,0,0,.18);
  --inset:     rgba(0,0,0,.02);
  --body-grad: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(43,181,166,.06) 0%, transparent 60%),
               radial-gradient(circle at 92% 82%, rgba(201,168,76,.04) 0%, transparent 40%);
  --ai-bg:     rgba(79,142,247,.04);
  --ai-border: rgba(79,142,247,.18);
}

/* ===================================================================
   RESET & BASE
   =================================================================== */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--t), color var(--t);
  position: relative;
}
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background: var(--body-grad);
  transition: background var(--t);
}
.shell { max-width:1000px; margin:0 auto; position:relative; z-index:1; }

/* ===================================================================
   ANIMATIONS
   =================================================================== */
@keyframes fadeUp    { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideIn   { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse     { 0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.15);opacity:1} }
@keyframes ripple    { 0%{transform:scale(0);opacity:.7} 100%{transform:scale(3);opacity:0} }
@keyframes scanLine  { 0%{top:8%} 100%{top:92%} }
@keyframes haptPulse { 0%,100%{background:rgba(43,181,166,.08)} 50%{background:rgba(43,181,166,.28)} }
@keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes bleSpin   { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes bleRing   { 0%{transform:scale(.5);opacity:.8} 100%{transform:scale(2.4);opacity:0} }
@keyframes iotBlink  { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes logoGlow  { 0%,100%{filter:drop-shadow(0 0 7px rgba(43,181,166,.35))} 50%{filter:drop-shadow(0 0 18px rgba(43,181,166,.65))} }
@keyframes shadowPulse { 0%,100%{transform:scaleX(1);opacity:.35} 50%{transform:scaleX(.85);opacity:.2} }
@keyframes shimmer   { 0%{background-position:-300% 0} 100%{background-position:300% 0} }
@keyframes typewriter { from{width:0} to{width:100%} }
@keyframes aiThink   { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes sensorFlash { 0%{background:rgba(43,181,166,.12)} 50%{background:rgba(43,181,166,.55)} 100%{background:rgba(43,181,166,.12)} }
@keyframes waveform  { 0%,100%{transform:scaleY(.3)} 50%{transform:scaleY(1)} }
@keyframes slideRight { from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* ===================================================================
   HEADER
   =================================================================== */
.hero-bar {
  background: var(--hero-bg);
  backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  padding: 11px 26px;
  display: flex; align-items:center; justify-content:space-between;
  position: sticky; top:0; z-index:200;
  box-shadow: 0 2px 30px rgba(0,0,0,.2);
  transition: background var(--t), border-color var(--t);
}
.logo-wrap { display:flex; align-items:center; gap:11px; }
.logo-img  {
  width:48px; height:48px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(43,181,166,.45);
  animation: logoGlow 3.5s ease-in-out infinite;
  flex-shrink:0;
  background: linear-gradient(135deg, #1a4a3a, #0d2a1e);
  display: flex; align-items:center; justify-content:center;
  font-size:22px;
}
.logo-text { font-family:var(--font-head); font-size:19px; font-weight:700; color:var(--teal); letter-spacing:2px; text-transform:uppercase; }
.logo-sub  { font-size:9px; color:var(--muted); letter-spacing:3px; text-transform:uppercase; margin-top:2px; }
.hero-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Theme toggle */
.theme-toggle {
  display:flex; align-items:center; gap:7px;
  background:var(--card-s); border:1.5px solid var(--border2);
  border-radius:24px; padding:4px 10px; cursor:pointer;
  font-size:11px; font-weight:600; color:var(--text2);
  transition:all .3s; user-select:none;
}
.theme-toggle:hover { border-color:var(--teal); color:var(--teal); }
.toggle-track { width:34px;height:19px;border-radius:10px;background:var(--bg2);border:1.5px solid var(--border2);position:relative;transition:all .35s; }
[data-theme="light"] .toggle-track { background:rgba(43,181,166,.2);border-color:var(--teal); }
.toggle-thumb { width:13px;height:13px;border-radius:50%;background:var(--muted);position:absolute;top:2px;left:2px;transition:all .35s;box-shadow:0 1px 4px rgba(0,0,0,.3); }
[data-theme="light"] .toggle-thumb { transform:translateX(15px);background:var(--teal); }

/* BLE pill */
.ble-pill {
  display:flex; align-items:center; gap:6px;
  background:rgba(79,142,247,.1); border:1.5px solid rgba(79,142,247,.3);
  border-radius:20px; padding:4px 11px;
  font-size:11px; font-weight:600; color:var(--ble);
  cursor:pointer; transition:all .3s;
}
.ble-pill:hover { background:rgba(79,142,247,.18); }
.ble-pill.connected { background:rgba(43,181,166,.12); border-color:rgba(43,181,166,.45); color:var(--teal); }
.ble-dot { width:6px;height:6px;border-radius:50%;background:var(--ble);animation:iotBlink 1.8s infinite; }
.ble-pill.connected .ble-dot { background:var(--teal);animation:none; }
.ble-pill.scanning .ble-icon { animation:bleSpin 1s linear infinite;display:inline-block; }

/* Progress dots */
.progress-dots { display:flex; gap:7px; align-items:center; }
.dot { width:8px;height:8px;border-radius:50%;transition:all .4s; }
[data-theme="dark"] .dot { background:rgba(255,255,255,.15); }
[data-theme="light"] .dot { background:rgba(0,0,0,.15); }
.dot.done  { background:var(--sage); }
.dot.active { background:var(--gold);animation:pulse 1.8s infinite;box-shadow:0 0 0 3px rgba(201,168,76,.2); }

/* ===================================================================
   SCENE SYSTEM
   =================================================================== */
.scene { display:none; }
.scene.active { display:block; animation:fadeUp .5s ease forwards; }
.scene-inner {
  padding:28px 26px; margin:18px 22px;
  background:var(--scene-bg);
  border-radius:20px; border:1px solid var(--border);
  box-shadow:0 8px 40px rgba(0,0,0,.18);
  transition: background var(--t), border-color var(--t);
}
.step-label { font-size:10px;color:var(--teal);letter-spacing:3px;text-transform:uppercase;margin-bottom:8px;font-weight:600; }
.scene-title { font-size:28px;color:var(--white);margin-bottom:8px;font-family:var(--font-head);font-weight:700;letter-spacing:.4px;line-height:1.2; }
.scene-sub { font-size:13.5px;color:var(--text2);margin-bottom:24px;line-height:1.75;font-weight:300; }

/* Nav buttons */
.nav-btns { display:flex;gap:11px;justify-content:space-between;padding:16px 26px;border-top:1px solid var(--border2);background:var(--hero-bg);backdrop-filter:blur(14px); transition: background var(--t); }
.btn { padding:12px 24px;border-radius:12px;font-size:14px;cursor:pointer;border:1.5px solid var(--border2);background:transparent;color:var(--text2);transition:all .3s;font-family:var(--font-body);font-weight:500; }
.btn:hover { border-color:rgba(201,168,76,.5);color:var(--text); }
.btn.primary { background:linear-gradient(135deg,rgba(201,168,76,.92),rgba(232,204,128,.92));color:#0a0810;border-color:var(--gold);font-weight:700;box-shadow:0 4px 18px rgba(201,168,76,.25); }
.btn.primary:hover { transform:translateY(-2px);box-shadow:0 8px 26px rgba(201,168,76,.35); }
.btn:disabled { opacity:.45;cursor:not-allowed;transform:none !important; }

/* Footer */
.demo-footer {
  padding:20px 24px; text-align:center; border-top:1px solid var(--border2);
  font-size:11px; color:var(--muted); letter-spacing:.5px;
  background:var(--hero-bg); backdrop-filter:blur(14px);
}

/* Tags */
.tag { display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:.5px; }
.tag.teal { background:rgba(43,181,166,.12);color:var(--teal);border:1px solid rgba(43,181,166,.2); }
.tag.gold { background:rgba(201,168,76,.12);color:var(--gold);border:1px solid rgba(201,168,76,.2); }
.tag.blue { background:rgba(79,142,247,.12);color:var(--ble);border:1px solid rgba(79,142,247,.2); }
.tag.coral { background:rgba(224,112,112,.12);color:var(--coral);border:1px solid rgba(224,112,112,.2); }
.tag.sage { background:rgba(90,171,138,.12);color:var(--sage);border:1px solid rgba(90,171,138,.2); }

/* ===================================================================
   SCENE 1 — BLE CONNECT
   =================================================================== */
.iot-bar {
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--inset); border:1px solid var(--border);
  border-radius:12px; padding:10px 16px; margin-bottom:16px;
  font-size:11px; font-weight:600; color:var(--text2);
}
.iot-status-dot { width:8px;height:8px;border-radius:50%;background:var(--teal);animation:iotBlink 1.8s infinite; }
.iot-metric { display:flex;align-items:center;gap:5px; }
.iot-metric .val { color:var(--teal); font-weight:700; min-width:28px; }
.iot-metric .unit { color:var(--muted); font-size:10px; }

.ble-panel {
  background:rgba(79,142,247,.05); border:1.5px solid rgba(79,142,247,.2);
  border-radius:16px; padding:16px; margin-bottom:20px;
}
.ble-hdr { display:flex;align-items:center;gap:14px;margin-bottom:14px; }
.ble-rings { position:relative;width:38px;height:38px;flex-shrink:0; }
.ble-rings::before,.ble-rings::after {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(79,142,247,.35);
  animation:bleRing 2s ease-out infinite;
}
.ble-rings::after { animation-delay:.9s; }
.ble-center { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ble);font-size:16px;font-weight:700; }
.ble-panel-title { font-size:13px;font-weight:700;color:var(--white); }
.ble-panel-sub { font-size:11px;color:var(--text2);margin-top:2px; }

.ble-devices { display:flex;flex-direction:column;gap:8px;margin-bottom:12px; }
.ble-device {
  display:flex;align-items:center;gap:12px;
  background:var(--card-s); border:1.5px solid var(--border2);
  border-radius:10px; padding:10px 14px; cursor:pointer; transition:all .3s;
}
.ble-device:hover { border-color:rgba(79,142,247,.5);background:rgba(79,142,247,.07); }
.ble-device.paired { border-color:rgba(43,181,166,.5);background:rgba(43,181,166,.07); }
.ble-device-name { font-size:12px;font-weight:700;color:var(--white); }
.ble-device-sub  { font-size:10px;color:var(--text2);margin-top:2px; }
.ble-device-rssi { font-size:11px;color:var(--ble);font-weight:600;margin-left:auto;flex-shrink:0; }
.ble-device.paired .ble-device-rssi::before { content:'✓ '; color:var(--teal); }

.iot-stream {
  background:rgba(0,0,0,.25); border-radius:8px; padding:8px 10px;
  font-family:monospace; font-size:10px; color:rgba(79,142,247,.7);
  max-height:64px; overflow-y:auto; line-height:1.6;
}

.mat-wrap { margin:0 auto;text-align:center; }
.mat-wrap.scene1 { max-width:200px;margin-bottom:16px; }

/* Haptic zones */
.haptic-zone {
  position:absolute;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:var(--teal);letter-spacing:1px;
  border:1.5px solid rgba(43,181,166,.3);border-radius:8px;
  transition:all .4s; cursor:default; background:rgba(43,181,166,.05);
}
.haptic-zone.active { animation:haptPulse .8s ease-in-out; border-color:var(--teal); background:rgba(43,181,166,.18); }

/* Live AI chat */
.chat-window {
  background:var(--card-s); border:1px solid var(--border2);
  border-radius:16px; overflow:hidden; margin-bottom:20px;
}
.chat-hdr {
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--border2); background:var(--inset);
}
.chat-avatar {
  width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--tealb));
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;
}
.chat-name { font-size:12px;font-weight:700;color:var(--white); }
.chat-status { font-size:10px;color:var(--teal); }
.chat-msgs { padding:12px;min-height:80px;max-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:8px; }
.chat-msg {
  display:flex;align-items:flex-start;gap:8px;animation:slideIn .3s ease;
}
.msg-avatar { width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--tealb));display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0; }
.msg-bubble {
  background:rgba(43,181,166,.1);border:1px solid rgba(43,181,166,.2);
  border-radius:10px 10px 10px 2px;padding:8px 12px;
  font-size:12px;color:var(--text);line-height:1.5;max-width:85%;
}
.msg-bubble.thinking { opacity:.7; }
.msg-bubble .think-dot { display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--teal);animation:aiThink 1.2s infinite;margin-right:3px; }
.msg-bubble .think-dot:nth-child(2){animation-delay:.2s}
.msg-bubble .think-dot:nth-child(3){animation-delay:.4s}

/* Sensor map overlay */
.sensor-map-wrap { position:relative;margin:0 auto 16px;max-width:370px; }
.sensor-grid {
  display:grid;grid-template-columns:repeat(12,1fr);gap:2px;
  padding:10px;background:rgba(0,0,0,.2);border-radius:12px;border:1px solid var(--border);
}
.s-cell {
  aspect-ratio:1;border-radius:2px;background:rgba(43,181,166,.08);
  transition:all .3s;
}
.s-cell.hot { background:rgba(201,168,76,.7);box-shadow:0 0 4px rgba(201,168,76,.4); }
.s-cell.warm { background:rgba(43,181,166,.4); }
.s-cell.active-flash { animation:sensorFlash .6s ease; }

/* Scan line */
.scan-line {
  position:absolute;left:0;right:0;height:1.5px;background:rgba(43,181,166,.7);
  box-shadow:0 0 8px rgba(43,181,166,.8);animation:scanLine 2.2s ease-in-out infinite alternate;pointer-events:none;
}

/* ===================================================================
   SCENE 2 — LIVE SESSION
   =================================================================== */
.pose-grid {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;
  margin-bottom:20px;
}
.phase-card {
  background:var(--card-s);border:1.5px solid var(--border2);
  border-radius:14px;padding:14px 12px;cursor:pointer;transition:all .28s;
  text-align:center;user-select:none;
}
.phase-card:hover { transform:translateY(-2px);border-color:rgba(43,181,166,.4); }
.phase-card.active { border-color:var(--teal);background:rgba(43,181,166,.07);box-shadow:0 0 0 3px rgba(43,181,166,.12); }
.phase-icon { font-size:26px;margin-bottom:6px;display:block; }
.phase-name { font-size:12px;font-weight:700;color:var(--white);margin-bottom:3px; }
.phase-dur  { font-size:10px;color:var(--text2); }

/* Live metrics */
.live-bar {
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;
}
.live-metric {
  flex:1;min-width:80px;background:var(--card-s);border:1px solid var(--border2);
  border-radius:12px;padding:12px 14px;text-align:center;
}
.live-val { font-size:22px;font-weight:700;color:var(--teal);font-family:var(--font-head); }
.live-lbl { font-size:10px;color:var(--text2);letter-spacing:.5px;text-transform:uppercase;margin-top:3px; }

/* AI feedback panel */
.ai-feedback-panel {
  background:var(--ai-bg);border:1.5px solid var(--ai-border);
  border-radius:16px;padding:16px;margin-bottom:18px;
  position:relative;overflow:hidden;
}
.ai-feedback-panel::before {
  content:''; position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ble),transparent);
  animation:shimmer 2s linear infinite;background-size:300% 100%;
}
.ai-feedback-hdr { display:flex;align-items:center;gap:8px;margin-bottom:12px; }
.ai-fb-icon { font-size:18px; }
.ai-fb-title { font-size:13px;font-weight:700;color:var(--white); }
.ai-fb-badge {
  margin-left:auto;font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;
  background:rgba(79,142,247,.15);border:1px solid rgba(79,142,247,.3);color:var(--ble);letter-spacing:.5px;
}
.ai-feedback-list { display:flex;flex-direction:column;gap:8px; }
.ai-fb-item {
  display:flex;align-items:flex-start;gap:10px;
  background:var(--inset);border-radius:10px;padding:10px 12px;
  animation:slideIn .4s ease;
}
.ai-fb-sev { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px; }
.ai-fb-sev.warn { background:var(--coral); }
.ai-fb-sev.ok   { background:var(--sage); }
.ai-fb-sev.info { background:var(--gold); }
.ai-fb-sev.tip  { background:var(--ble); }
.ai-fb-text { font-size:11.5px;line-height:1.55;color:var(--text); }
.ai-fb-text strong { color:var(--white); }

/* Waveform viz */
.waveform { display:flex;align-items:flex-end;gap:3px;height:40px;padding:4px 0; }
.wave-bar {
  flex:1;min-width:3px;background:rgba(43,181,166,.35);border-radius:2px 2px 0 0;
  animation:waveform var(--spd,1.2s) ease-in-out infinite alternate;
}

/* ===================================================================
   SCENE 3 — BODY PROFILE
   =================================================================== */
.stat-row {
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px;
}
.stat-box {
  background:var(--card-s);border:1px solid var(--border2);
  border-radius:14px;padding:16px 12px;text-align:center;
}
.stat-box .val { font-size:26px;font-weight:700;color:var(--gold);font-family:var(--font-head); }
.stat-box .lbl { font-size:10px;color:var(--text2);letter-spacing:.5px;text-transform:uppercase;margin-top:4px; }

.bar-chart { margin-bottom:20px; }
.bar-chart h4 { font-size:11px;color:var(--text2);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;font-weight:600; }
.bars { display:flex;align-items:flex-end;gap:6px;height:80px;padding:0 4px; }
.bar-col { display:flex;flex-direction:column;align-items:center;gap:4px;flex:1; }
.bar-val { font-size:9px;color:var(--text2);font-weight:600; }
.bar-fill {
  width:100%;border-radius:4px 4px 0 0;background:rgba(43,181,166,.35);
  transition:height .8s cubic-bezier(.25,.8,.25,1);min-height:2px;
  position:relative;overflow:hidden;
}
.bar-fill::after {
  content:'';position:absolute;top:0;left:0;right:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.15),transparent);pointer-events:none;
}
.bar-fill.today { background:rgba(79,142,247,.55); }
.bar-fill.best  { background:rgba(201,168,76,.55); }
.bar-label { font-size:9px;color:var(--muted); }

.insight-card {
  display:flex;align-items:flex-start;gap:12px;
  background:var(--card-s);border:1px solid var(--border2);
  border-radius:12px;padding:14px;margin-bottom:10px;
}
.i-icon {
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.i-body h4 { font-size:12.5px;font-weight:700;color:var(--white);margin-bottom:4px; }
.i-body p  { font-size:11px;color:var(--text2);line-height:1.55; }

/* Body heat map */
.body-heatmap {
  display:flex;gap:16px;align-items:flex-start;margin-bottom:20px;
  flex-wrap:wrap;
}
.heatmap-svg-wrap { flex:0 0 auto; }
.heatmap-legend { flex:1;min-width:160px; }
.heatmap-legend h4 { font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-weight:600; }
.legend-item { display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:11px;color:var(--text); }
.legend-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }

/* ===================================================================
   SCENE 4 — MAT DESIGNER
   =================================================================== */
.designer-wrap { display:flex;gap:20px;flex-wrap:wrap; }
.mat-viewport { flex:1;min-width:220px;display:flex;flex-direction:column;align-items:center;gap:12px; }
.mat-stage { position:relative;display:flex;flex-direction:column;align-items:center; }
.mat-3d-wrap { cursor:grab;user-select:none;transform-style:preserve-3d; }
.mat-3d-wrap:active { cursor:grabbing; }
.mat-3d {
  width:180px;height:290px;border-radius:18px;
  box-shadow:0 16px 48px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .05s;
}
.mat-face {
  position:absolute;inset:0;border-radius:18px;
  background:linear-gradient(160deg,#1e4030 0%,#0d2018 60%,#081410 100%);
  transition:background .6s;
}
.mat-content { position:absolute;inset:0;border-radius:18px;overflow:hidden; }
.mc-badge {
  position:absolute;top:10px;right:10px;
  font-size:7px;font-weight:700;letter-spacing:1.5px;color:var(--gold);
  background:rgba(0,0,0,.4);border:1px solid rgba(201,168,76,.3);
  border-radius:4px;padding:2px 5px;
}
.mc-glyph {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:32px;opacity:.22;transition:all .5s;color:rgba(201,168,76,.8);
}
.mc-center { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60%;height:1px;opacity:.55;transition:all .5s; }
.mc-shoulder { position:absolute;left:15%;right:15%;top:22%;height:1px;opacity:.5;transition:all .5s; }
.mc-hip { position:absolute;left:20%;right:20%;top:55%;height:1px;opacity:.55;transition:all .5s; }
.mc-foot-l { position:absolute;left:18%;bottom:12%;width:18%;height:10%;border-radius:50%;opacity:.5;transition:all .5s; }
.mc-foot-r { position:absolute;right:18%;bottom:12%;width:18%;height:10%;border-radius:50%;opacity:.5;transition:all .5s; }
.mc-circle { position:absolute;inset:18% 22%;border-radius:50%;border:1px solid;border-color:inherit;opacity:.35;transition:all .5s; }
.mc-circle-sm { position:absolute;inset:32% 30%;border-radius:50%;border:1px solid;border-color:inherit;opacity:.25;transition:all .5s; }
.mc-diag-l { position:absolute;top:25%;left:12%;width:35%;height:1px;transform:rotate(35deg);opacity:.3;transition:all .5s; }
.mc-diag-r { position:absolute;top:25%;right:12%;width:35%;height:1px;transform:rotate(-35deg);opacity:.3;transition:all .5s; }
.mc-dot-l { position:absolute;left:14%;top:50%;width:6px;height:6px;border-radius:50%;transform:translateY(-50%);transition:all .5s; }
.mc-dot-r { position:absolute;right:14%;top:50%;width:6px;height:6px;border-radius:50%;transform:translateY(-50%);transition:all .5s; }
.mc-name { position:absolute;bottom:16px;left:0;right:0;text-align:center;font-family:var(--font-head);font-size:9px;letter-spacing:3px;text-transform:uppercase;opacity:.22;transition:all .5s; }
.mat-sheen { position:absolute;inset:0;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 50%,rgba(0,0,0,.04) 100%);pointer-events:none; }
.mat-shadow { width:160px;height:14px;border-radius:50%;background:rgba(0,0,0,.3);margin:8px auto 0;animation:shadowPulse 3s ease-in-out infinite;filter:blur(6px); }

.mat-controls { display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center; }
.rot-btn { padding:6px 14px;border-radius:8px;background:var(--card-s);border:1px solid var(--border2);color:var(--text2);cursor:pointer;font-size:14px;transition:all .2s; }
.rot-btn:hover { border-color:var(--teal);color:var(--teal); }
.rot-lbl { font-size:10px;color:var(--muted);letter-spacing:.5px; }
.auto-btn { padding:5px 11px;border-radius:8px;background:transparent;border:1px solid var(--border2);color:var(--text2);cursor:pointer;font-size:11px;font-weight:600;transition:all .25s; }
.auto-btn.active { background:rgba(43,181,166,.12);border-color:var(--teal);color:var(--teal); }

.view-chips { display:flex;gap:7px;flex-wrap:wrap;justify-content:center; }
.view-chip { padding:4px 11px;border-radius:8px;background:var(--card-s);border:1.5px solid var(--border2);color:var(--text2);cursor:pointer;font-size:11px;font-weight:600;transition:all .25s; }
.view-chip:hover { border-color:rgba(43,181,166,.4);color:var(--teal); }
.view-chip.active { background:rgba(43,181,166,.1);border-color:var(--teal);color:var(--teal); }

.sync-badge-sm {
  font-size:10px;font-weight:700;color:var(--ble);letter-spacing:.5px;
  background:rgba(79,142,247,.08);border:1px solid rgba(79,142,247,.25);
  border-radius:8px;padding:5px 12px;cursor:pointer;transition:all .3s;text-align:center;
}
.sync-badge-sm:hover { background:rgba(79,142,247,.15); }
.sync-badge-sm.synced { color:var(--teal);background:rgba(43,181,166,.1);border-color:rgba(43,181,166,.35); }

.spec-strip { display:flex;gap:8px;flex-wrap:wrap;justify-content:center; }
.spec-pill { font-size:11px;color:var(--text2);background:var(--inset);border:1px solid var(--border2);border-radius:7px;padding:4px 10px; }
.spec-pill span { color:var(--teal);font-weight:600; }

.ai-strip {
  font-size:11px;color:var(--text2);background:rgba(79,142,247,.05);
  border:1px solid rgba(79,142,247,.18);border-radius:10px;padding:9px 12px;text-align:center;line-height:1.6;
}
.ai-strip-lbl { font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ble);margin-bottom:4px; }

/* Customizer panel */
.cust-panel { flex:1;min-width:220px;display:flex;flex-direction:column;gap:14px; }
.cs { background:var(--card-s);border:1px solid var(--border2);border-radius:12px;padding:12px 14px; }
.cs-label { font-size:10px;font-weight:700;color:var(--text2);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:9px; }
.palette { display:grid;grid-template-columns:repeat(4,1fr);gap:7px; }
.pswatch { aspect-ratio:1;border-radius:10px;cursor:pointer;border:3px solid transparent;transition:all .25s;position:relative;overflow:hidden;box-shadow:0 3px 12px var(--sw-shadow); }
.pswatch::after { content:'';position:absolute;inset:0;border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 55%);pointer-events:none; }
.pswatch:hover { transform:translateY(-2px);box-shadow:0 6px 18px var(--sw-shadow); }
.pswatch.active { border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,.28),0 6px 18px var(--sw-shadow); }
.pswatch .sw-lbl { position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:8px;font-weight:700;letter-spacing:.5px;color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none; }
.line-colors { display:flex;gap:8px;flex-wrap:wrap; }
.lc-btn { width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .25s;box-shadow:0 2px 8px rgba(0,0,0,.3); }
.lc-btn:hover { transform:scale(1.15); }
.lc-btn.active { border-color:var(--white);box-shadow:0 0 0 2px var(--teal); }
.guide-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:7px; }
.guide-card { border:1.5px solid var(--border2);border-radius:9px;padding:8px 4px;text-align:center;cursor:pointer;transition:all .25s;background:transparent; }
.guide-card:hover { border-color:rgba(43,181,166,.4); }
.guide-card.active { border-color:var(--teal);background:rgba(43,181,166,.1); }
.gc-icon { font-size:18px;color:var(--teal);margin-bottom:3px; }
.gc-lbl { font-size:9px;color:var(--text2);font-weight:600; }
.sym-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:7px; }
.sym-btn { display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 3px;border:1.5px solid var(--border2);border-radius:9px;cursor:pointer;transition:all .25s; }
.sym-btn:hover { border-color:rgba(201,168,76,.4); }
.sym-btn.active { border-color:var(--gold);background:rgba(201,168,76,.08); }
.sym-icon { font-size:18px; }
.sym-lbl { font-size:8px;color:var(--text2);font-weight:600; }
.size-row { display:flex;gap:8px; }
.size-btn { flex:1;border:1.5px solid var(--border2);border-radius:9px;padding:9px 6px;text-align:center;cursor:pointer;transition:all .25s; }
.size-btn:hover { border-color:rgba(43,181,166,.4); }
.size-btn.active { border-color:var(--teal);background:rgba(43,181,166,.08); }
.sb-dim { font-size:11px;font-weight:700;color:var(--white); }
.sb-lbl { font-size:9px;color:var(--text2);margin-top:2px; }
.name-input {
  width:100%;padding:9px 12px;border-radius:9px;border:1.5px solid var(--border2);
  background:var(--bg2);color:var(--text);font-family:var(--font-body);font-size:13px;outline:none;transition:all .3s;
}
.name-input:focus { border-color:var(--teal);box-shadow:0 0 0 3px rgba(43,181,166,.12); }
.price-row { display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--border2);margin-top:4px;margin-bottom:10px; }
.price-lbl { font-size:13px;font-weight:700;color:var(--white); }
.price-sub { font-size:10px;color:var(--text2);margin-top:2px; }
.price-val { font-size:22px;font-weight:700;color:var(--gold);font-family:var(--font-head); }
.btn-primary { width:100%;padding:12px;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--goldl));color:#0a0810;border:none;font-size:14px;font-weight:700;cursor:pointer;margin-bottom:8px;transition:all .3s;font-family:var(--font-body); }
.btn-primary:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,168,76,.35); }
.btn-ble { width:100%;padding:10px;border-radius:12px;background:rgba(79,142,247,.1);border:1.5px solid rgba(79,142,247,.3);color:var(--ble);font-size:12px;font-weight:700;cursor:pointer;transition:all .3s;font-family:var(--font-body); }
.btn-ble:hover { background:rgba(79,142,247,.18); }
.btn-ble.deploying { opacity:.6;cursor:not-allowed; }
.btn-ble.deployed { background:rgba(43,181,166,.12);border-color:rgba(43,181,166,.4);color:var(--teal); }

/* ===================================================================
   SCENE 5 — CLASS PLAN
   =================================================================== */
.class-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:20px; }
.class-card {
  background:var(--card-s);border:1.5px solid var(--border2);
  border-radius:14px;padding:14px;cursor:pointer;transition:all .3s;
  display:flex;flex-direction:column;gap:6px;
}
.class-card:hover { border-color:rgba(43,181,166,.4);transform:translateY(-2px); }
.class-card.recommended { border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.04); }
.cc-emoji { font-size:26px; }
.cc-name { font-size:13px;font-weight:700;color:var(--white); }
.cc-teacher { font-size:11px;color:var(--text2); }
.cc-meta { display:flex;gap:6px;flex-wrap:wrap;margin-top:4px; }
.cc-ai-note { font-size:10.5px;color:var(--ble);background:rgba(79,142,247,.08);border:1px solid rgba(79,142,247,.2);border-radius:7px;padding:6px 9px;margin-top:2px;line-height:1.5; }

/* ===================================================================
   SCENE 6 — IOT ARCHITECTURE
   =================================================================== */
.iot-arch {
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:20px;
}
.arch-card {
  background:var(--card-s);border:1px solid var(--border2);
  border-radius:12px;padding:14px;text-align:center;
}
.arch-icon { font-size:28px;margin-bottom:8px;display:block; }
.arch-title { font-size:12px;font-weight:700;color:var(--white);margin-bottom:4px; }
.arch-sub { font-size:10px;color:var(--text2);line-height:1.5; }
.arch-tag { display:inline-block;margin-top:6px;font-size:9px;padding:2px 7px;border-radius:5px; }

/* ===================================================================
   AI COACH PANEL (Scene 2)
   =================================================================== */
.ai-coach-section { margin-bottom:20px; }
.ai-coach-header {
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,rgba(79,142,247,.08),rgba(43,181,166,.06));
  border:1.5px solid rgba(79,142,247,.2);border-radius:14px 14px 0 0;
  padding:12px 16px;
}
.ai-coach-avatar {
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--ble),var(--teal));
  display:flex;align-items:center;justify-content:center;font-size:18px;
  box-shadow:0 0 12px rgba(79,142,247,.4);flex-shrink:0;
}
.ai-coach-name { font-size:13px;font-weight:700;color:var(--white); }
.ai-coach-sub  { font-size:10px;color:var(--ble); }
.ai-coach-body {
  background:rgba(79,142,247,.03);border:1.5px solid rgba(79,142,247,.12);
  border-top:none;border-radius:0 0 14px 14px;padding:14px 16px;
}
.ai-feedback-stream { display:flex;flex-direction:column;gap:8px; }
.afs-item {
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 12px;border-radius:10px;background:var(--inset);
  border-left:3px solid transparent;animation:slideIn .4s ease;
}
.afs-item.warn { border-left-color:var(--coral); }
.afs-item.ok   { border-left-color:var(--sage); }
.afs-item.tip  { border-left-color:var(--ble); }
.afs-item.info { border-left-color:var(--gold); }
.afs-icon { font-size:14px;flex-shrink:0; }
.afs-content { flex:1; }
.afs-title { font-size:12px;font-weight:700;color:var(--white);margin-bottom:2px; }
.afs-desc  { font-size:11px;color:var(--text2);line-height:1.5; }
.afs-sensor { font-size:9px;color:var(--muted);margin-top:3px;font-family:monospace; }

/* BLE sensor detail cards */
.ble-sensor-cards { display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px; }
.ble-sc {
  flex:1;min-width:100px;background:var(--card-s);border:1.5px solid rgba(79,142,247,.2);
  border-radius:12px;padding:12px 10px;text-align:center;position:relative;overflow:hidden;
}
.ble-sc::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--ble),var(--teal));opacity:.5;
}
.ble-sc-val { font-size:18px;font-weight:700;color:var(--ble);font-family:var(--font-head); }
.ble-sc-lbl { font-size:9px;color:var(--text2);letter-spacing:.5px;text-transform:uppercase;margin-top:3px; }
.ble-sc-unit { font-size:9px;color:var(--muted); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width:600px){
  .stat-row { grid-template-columns:repeat(2,1fr); }
  .designer-wrap { flex-direction:column; }
  .live-bar { gap:8px; }
  .scene-title { font-size:22px; }
  .hero-right { gap:6px; }
  .logo-text { font-size:15px; }
  .ble-pill span:not(.ble-dot) { display:none; }
  .class-grid { grid-template-columns:1fr; }
  .iot-arch { grid-template-columns:repeat(2,1fr); }
}