:root {
  --bg: #03070b;
  --panel: rgba(7, 20, 30, .78);
  --panel-2: rgba(9, 30, 43, .62);
  --line: rgba(96, 220, 255, .19);
  --line-strong: rgba(96, 220, 255, .42);
  --cyan: #70e7ff;
  --cyan-2: #1baac7;
  --ice: #d9f8ff;
  --green: #65f2ae;
  --amber: #ffc76a;
  --danger: #ff6f7e;
  --text: #d9f5fb;
  --muted: #6f9aa6;
  --shadow: 0 20px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.035);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 12%, rgba(16, 139, 170, .16), transparent 28%),
    radial-gradient(circle at 85% 22%, rgba(32, 104, 146, .12), transparent 30%),
    linear-gradient(145deg, #020508 0%, #061019 50%, #02070a 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(71, 190, 220, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(71, 190, 220, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; padding: 18px; position: relative; }
.scanlines { position: fixed; inset: 0; pointer-events: none; opacity: .14; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(255,255,255,.03) 4px); mix-blend-mode: screen; z-index: 50; }
.glass {
  background: linear-gradient(180deg, rgba(10, 27, 38, .86), rgba(4, 14, 21, .76));
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.topbar { min-height: 76px; border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px; position: sticky; top: 10px; z-index: 20; }
.brand { display: flex; gap: 13px; align-items: center; min-width: 0; }
.brand-mark { width: 44px; height: 44px; border: 1px solid var(--line-strong); position: relative; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 24px rgba(112, 231, 255, .12), inset 0 0 22px rgba(112, 231, 255, .08); }
.brand-mark::before, .brand-mark::after { content:""; position:absolute; width:64%; height:1px; background:var(--cyan); opacity:.55; }
.brand-mark::after { transform: rotate(90deg); }
.brand-mark span { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.brand-mark span:nth-child(1){ transform: translateY(-13px); }.brand-mark span:nth-child(2){ transform: translate(11px, 7px); }.brand-mark span:nth-child(3){ transform: translate(-11px, 7px); }
.eyebrow { font-size: 10px; letter-spacing: .2em; color: var(--muted); font-weight: 800; }
h1,h2,p { margin-top: 0; }
h1 { margin: 3px 0 0; font-size: clamp(18px,2vw,26px); line-height: 1; letter-spacing: .04em; }
h1 em { color: var(--cyan); font-style: normal; font-weight: 500; }
h2 { margin: 4px 0 0; font-size: 14px; letter-spacing: .14em; font-weight: 800; }
.top-status { display: flex; align-items: center; gap: 10px; }
.status-pill, .tag { border: 1px solid var(--line); background: rgba(7, 27, 37, .56); color: #9cc6cf; border-radius: 999px; padding: 7px 10px; font-size: 9px; letter-spacing: .12em; font-weight: 800; white-space: nowrap; }
.tag.active { color: var(--green); border-color: rgba(101,242,174,.27); }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--amber); margin-right:6px; box-shadow:0 0 10px currentColor; }.dot.online{ background:var(--green); }
.clock { font-family: "SFMono-Regular", Consolas, monospace; color: var(--cyan); letter-spacing: .12em; font-size: 12px; min-width: 74px; text-align:right; }
.dashboard { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(310px, .75fr); gap: 16px; margin-top: 16px; }
.arena-panel,.voice-panel,.learn-panel,.moves-panel,.log-panel { border-radius: var(--radius); overflow: hidden; }
.arena-panel { min-width:0; }
.panel-head { min-height: 64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 17px; border-bottom:1px solid var(--line); }
.panel-head.compact { min-height:58px; }
.arena-flags { display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; }
.arena { position:relative; height: min(58vh, 570px); min-height: 390px; overflow:hidden; background: radial-gradient(circle at 50% 56%, rgba(59, 205, 237, .095), transparent 34%), linear-gradient(to bottom, rgba(6,20,29,.72), rgba(1,8,12,.94)); }
#fighterCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:3; }
.arena-grid { position:absolute; inset:0; opacity:.32; background-image: linear-gradient(rgba(80,200,230,.11) 1px, transparent 1px), linear-gradient(90deg, rgba(80,200,230,.11) 1px, transparent 1px); background-size:54px 54px; transform: perspective(650px) rotateX(57deg) translateY(44%); transform-origin:50% 100%; }
.arena::after { content:""; position:absolute; left:0; right:0; bottom:17%; height:1px; background:linear-gradient(90deg, transparent,var(--line-strong),transparent); box-shadow:0 0 24px rgba(112,231,255,.15); }
.reticle { position:absolute; width:110px; height:110px; border:1px solid rgba(112,231,255,.12); border-radius:50%; left:50%; top:45%; transform:translate(-50%,-50%); }
.reticle::before,.reticle::after { content:""; position:absolute; background:rgba(112,231,255,.18); }.reticle::before{ width:150%; height:1px; left:-25%; top:50%; }.reticle::after{ height:150%; width:1px; top:-25%; left:50%; }
.reticle span { position:absolute; width:18px; height:18px; border-color:rgba(112,231,255,.36); }.reticle span:nth-child(1){left:-8px;top:-8px;border-left:1px solid;border-top:1px solid}.reticle span:nth-child(2){right:-8px;top:-8px;border-right:1px solid;border-top:1px solid}.reticle span:nth-child(3){left:-8px;bottom:-8px;border-left:1px solid;border-bottom:1px solid}.reticle span:nth-child(4){right:-8px;bottom:-8px;border-right:1px solid;border-bottom:1px solid}
.hud-corner { position:absolute; width:35px; height:35px; z-index:5; opacity:.55; }.hud-corner.tl{left:16px;top:16px;border-left:1px solid var(--cyan);border-top:1px solid var(--cyan)}.hud-corner.tr{right:16px;top:16px;border-right:1px solid var(--cyan);border-top:1px solid var(--cyan)}.hud-corner.bl{left:16px;bottom:16px;border-left:1px solid var(--cyan);border-bottom:1px solid var(--cyan)}.hud-corner.br{right:16px;bottom:16px;border-right:1px solid var(--cyan);border-bottom:1px solid var(--cyan)}
.arena-readout { position:absolute; z-index:6; bottom:20px; display:flex; flex-direction:column; gap:2px; }.arena-readout.left{left:28px}.arena-readout.right{right:28px;text-align:right}.arena-readout span{font-size:9px;letter-spacing:.16em;color:var(--muted)}.arena-readout strong{font-size:13px;color:var(--cyan);letter-spacing:.08em}
.impact-ring { position:absolute; z-index:2; width:46px; height:46px; border-radius:50%; border:1px solid rgba(112,231,255,.44); left:64%; top:44%; opacity:0; transform:translate(-50%,-50%) scale(.2); pointer-events:none; }.impact-ring.hit{animation:impact .42s ease-out}@keyframes impact{0%{opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}
.telemetry-row { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.metric { padding:13px 16px; min-width:0; border-right:1px solid var(--line); display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; align-items:end; }.metric:last-child{border-right:0}.metric span{grid-column:1/3;font-size:8px;letter-spacing:.18em;color:var(--muted)}.metric strong{font:700 22px/1 "SFMono-Regular",Consolas,monospace;color:var(--ice);margin-top:6px}.metric small{font-size:8px;letter-spacing:.12em;color:var(--cyan);padding-bottom:2px}
.control-stack { display:grid; gap:16px; align-content:start; }
.voice-panel,.learn-panel { padding-bottom:16px; }
.icon-btn,.text-btn { border:1px solid var(--line); background:rgba(12,34,46,.68); color:var(--cyan); min-width:34px; height:34px; border-radius:10px; font-weight:800; }.icon-btn:hover,.text-btn:hover{border-color:var(--line-strong);box-shadow:0 0 18px rgba(112,231,255,.08)}
.text-btn { padding:0 12px; font-size:9px; letter-spacing:.14em; }
.field-label { display:block; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.16em; margin:13px 16px 7px; }
.select-wrap,.quick-command,.teach-grid { margin:0 16px; }
select,input { width:100%; border:1px solid var(--line); background:rgba(2,12,18,.78); color:var(--text); border-radius:10px; outline:none; transition:.2s ease; }select{height:42px;padding:0 12px}input{height:42px;padding:0 12px}select:focus,input:focus{border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(112,231,255,.05)}
.mic-button { width:calc(100% - 32px); min-height:78px; margin:13px 16px 0; border:1px solid rgba(112,231,255,.26); background:linear-gradient(90deg,rgba(12,41,54,.9),rgba(5,22,31,.92)); color:var(--text); border-radius:15px; display:flex; align-items:center; gap:13px; padding:12px 16px; position:relative; overflow:hidden; text-align:left; }.mic-button:hover{border-color:rgba(112,231,255,.48);box-shadow:0 0 28px rgba(112,231,255,.07)}.mic-button.listening{border-color:rgba(101,242,174,.5);box-shadow:0 0 30px rgba(101,242,174,.1), inset 0 0 28px rgba(101,242,174,.035)}
.mic-core { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--cyan);border:1px solid var(--line-strong);box-shadow:inset 0 0 20px rgba(112,231,255,.08);font-size:18px;position:relative;z-index:2}.listening .mic-core{color:var(--green);border-color:rgba(101,242,174,.45)}
.mic-copy{display:flex;flex-direction:column;gap:3px;position:relative;z-index:2}.mic-copy strong{font-size:11px;letter-spacing:.1em}.mic-copy small{font-size:8px;letter-spacing:.09em;color:var(--muted)}
.pulse-ring{position:absolute;width:50px;height:50px;border-radius:50%;left:11px;top:13px;border:1px solid rgba(112,231,255,.2);opacity:0}.listening .pulse-ring{animation:pulse 1.35s infinite}@keyframes pulse{0%{opacity:.7;transform:scale(.8)}100%{opacity:0;transform:scale(2.7)}}
.waveform { height:38px; margin:10px 16px 0; display:flex; align-items:center; justify-content:center; gap:4px; overflow:hidden; }.waveform i{display:block;width:3px;height:8px;border-radius:5px;background:var(--cyan);opacity:.35;transition:.18s}.waveform.active i{animation:wave .8s ease-in-out infinite;opacity:.7}.waveform i:nth-child(3n){animation-delay:.1s}.waveform i:nth-child(4n){animation-delay:.2s}.waveform i:nth-child(5n){animation-delay:.34s}@keyframes wave{0%,100%{height:6px}50%{height:27px}}
.transcript-box { margin:0 16px; min-height:74px; border:1px solid var(--line); border-radius:11px; background:rgba(2,12,18,.52); padding:10px 11px; }.transcript-box .field-label{margin:0 0 8px}.transcript-box div{font-family:"SFMono-Regular",Consolas,monospace;font-size:12px;line-height:1.45;color:#bfeaf2;overflow-wrap:anywhere}
.quick-command { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:10px; }.quick-command button,.teach-grid button,.primary{border:1px solid rgba(112,231,255,.3);background:rgba(16,75,91,.46);color:var(--cyan);border-radius:10px;font-size:9px;font-weight:800;letter-spacing:.12em;padding:0 13px}.quick-command button:hover,.teach-grid button:hover,.primary:hover{background:rgba(22,91,108,.58);border-color:rgba(112,231,255,.5)}
.muted { color:var(--muted); font-size:11px; line-height:1.55; margin:12px 16px; }
.teach-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.teach-grid button{grid-column:1/3;height:38px}.learned-count{margin:9px 16px 0;font-size:9px;color:var(--muted);letter-spacing:.1em}.learned-count span{color:var(--green);font-weight:800}
.moves-panel { grid-column:1/2; }.log-panel{grid-column:2/3;}
.search-wrap input { width:210px; height:36px; font-size:11px; }
.move-grid { padding:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.move-card { position:relative; min-height:112px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(8,30,41,.72),rgba(3,14,20,.78)); border-radius:14px; padding:13px; color:var(--text); text-align:left; overflow:hidden; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }.move-card:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 9px 24px rgba(0,0,0,.26), inset 0 0 25px rgba(112,231,255,.025)}.move-card::after{content:"";position:absolute;width:50px;height:50px;right:-20px;top:-20px;border:1px solid rgba(112,231,255,.14);transform:rotate(45deg)}.move-card .index{font:700 9px/1 "SFMono-Regular",Consolas,monospace;color:var(--cyan);letter-spacing:.12em}.move-card strong{display:block;margin-top:14px;font-size:12px;letter-spacing:.06em}.move-card small{display:block;color:var(--muted);font-size:9px;line-height:1.35;margin-top:6px}.move-card .key{position:absolute;right:10px;bottom:9px;font:700 9px/1 monospace;color:#446c76;border:1px solid rgba(91,170,190,.15);border-radius:6px;padding:4px 6px}
.command-log { padding:10px 14px 14px; max-height:320px; overflow:auto; }.log-entry{display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;padding:9px 2px;border-bottom:1px solid rgba(112,231,255,.08);font-family:"SFMono-Regular",Consolas,monospace;font-size:10px}.log-entry time{color:#527984}.log-entry span{color:#b7dce3;overflow-wrap:anywhere}.log-entry b{font-size:8px;letter-spacing:.1em;color:var(--green);font-family:Inter,sans-serif}.log-entry.error b{color:var(--danger)}.log-entry.info b{color:var(--cyan)}
.footer { display:flex;justify-content:space-between;gap:12px;color:#385b64;font-size:8px;letter-spacing:.14em;padding:13px 6px 2px; }
.help-dialog { width:min(640px,calc(100% - 28px)); border:1px solid var(--line-strong); border-radius:18px; padding:0; background:#07131b; color:var(--text); box-shadow:0 30px 100px #000; }.help-dialog::backdrop{background:rgba(0,5,8,.78);backdrop-filter:blur(6px)}.help-dialog form{padding:0 0 16px}.help-copy{padding:16px}.help-copy p{font-size:12px;line-height:1.65;color:#9dc5ce}.help-chips{display:flex;gap:7px;flex-wrap:wrap}.help-chips span{border:1px solid var(--line);border-radius:999px;padding:7px 9px;font-size:9px;color:var(--cyan)}.help-dialog .primary{height:40px;margin:0 16px;width:calc(100% - 32px)}
@media (max-width: 1180px){.move-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.top-status .status-pill:nth-child(2){display:none}}
@media (max-width: 930px){.dashboard{grid-template-columns:1fr}.moves-panel,.log-panel{grid-column:1}.control-stack{grid-template-columns:1fr 1fr}.arena{height:520px}.topbar{position:relative;top:0}.move-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width: 680px){.app-shell{padding:9px}.topbar{padding:12px}.top-status .status-pill{display:none}.clock{font-size:10px}.control-stack{grid-template-columns:1fr}.arena{min-height:410px;height:56vh}.telemetry-row{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.move-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel-head{padding:13px}.search-wrap{display:none}.footer{flex-direction:column}.arena-readout{bottom:16px}.arena-readout.right{right:18px}.arena-readout.left{left:18px}}
@media (max-width: 420px){.move-grid{grid-template-columns:1fr 1fr}.move-card{min-height:104px;padding:11px}.brand h1{font-size:16px}.brand-mark{width:38px;height:38px}.eyebrow{font-size:8px}.arena{min-height:360px}.panel-head{min-height:56px}.teach-grid{grid-template-columns:1fr}.teach-grid button{grid-column:1}.quick-command{grid-template-columns:1fr}.quick-command button{height:38px}}