:root {
  --bg: #0a0913;
  --bg2: #141127;
  --line: rgba(120, 230, 255, .22);
  --cyan: #6fe7ff;
  --rose: #ff8fc4;
  --lav: #b9a9f4;
  --text: #e9e6f5;
  --dim: #8f88ab;
  --ok: #7dffc3;
  --bad: #ff6b8b;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 80% at 50% 30%, var(--bg2), var(--bg) 70%);
  color: var(--text);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  overflow: hidden; user-select: none; -webkit-user-select: none;
}
.scan { position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.grid { position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(70% 55% at 50% 45%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 55% at 50% 45%, #000 20%, transparent 75%); }

.top { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; position: relative; z-index: 2; }
.sig { display: flex; align-items: center; gap: 8px; color: var(--cyan); }
.sig b { font-weight: 700; }
.sep { color: var(--dim); }
#her { color: var(--rose); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); box-shadow: 0 0 0 0 transparent; }
.dot.ok { background: var(--ok); animation: beat 1.6s infinite; }
.dot.wait { background: #ffd27a; animation: blink 1s steps(2) infinite; }
.dot.bad { background: var(--bad); }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(125,255,195,.6); } 70% { box-shadow: 0 0 0 10px rgba(125,255,195,0); } 100% { box-shadow: 0 0 0 0 rgba(125,255,195,0); } }
@keyframes blink { 50% { opacity: .2; } }
.state { color: var(--dim); text-align: right; }
.state.ok { color: var(--ok); }
.state.bad { color: var(--bad); }

.stage { flex: 1; position: relative; display: grid; place-items: center; min-height: 0; }
.halo { position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(255,143,196,.18), transparent 65%); filter: blur(8px); }
.ring { position: absolute; border-radius: 50%; border: 1px solid var(--line); }
.r1 { width: 58vmin; height: 58vmin; animation: spin 26s linear infinite; border-top-color: var(--cyan); }
.r2 { width: 74vmin; height: 74vmin; animation: spin 40s linear infinite reverse; border-left-color: var(--rose); border-style: dashed; }
@keyframes spin { to { transform: rotate(360deg); } }
#body { position: relative; max-height: min(58vh, 520px); max-width: 80vw; object-fit: contain; z-index: 1;
  filter: drop-shadow(0 0 18px rgba(111,231,255,.35)); animation: bob 4.2s ease-in-out infinite; transition: opacity .6s, filter .6s; }
#body.ghost { opacity: .28; filter: grayscale(.4) drop-shadow(0 0 10px rgba(111,231,255,.5)) hue-rotate(-20deg); }
#body.talking { animation: bob 4.2s ease-in-out infinite, flick .18s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes flick { 50% { filter: drop-shadow(0 0 26px rgba(255,143,196,.6)); } }
.bolt { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3;
  background: radial-gradient(circle at 50% 45%, rgba(111,231,255,.9), rgba(111,231,255,.15) 30%, transparent 60%); }
.bolt.go { animation: strike .7s ease-out; }
@keyframes strike { 0% { opacity: 0; } 12% { opacity: 1; } 30% { opacity: .2; } 42% { opacity: .9; } 100% { opacity: 0; } }
.away { position: absolute; bottom: 8%; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; z-index: 2; }
.bubble { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: min(92%, 520px); z-index: 4;
  background: rgba(20,17,39,.88); border: 1px solid var(--line); border-left: 3px solid var(--rose); border-radius: 14px;
  padding: 12px 14px; font-size: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  user-select: text; -webkit-user-select: text; max-height: 40%; overflow: auto; }
.bubble::before { content: attr(data-who); display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--rose); margin-bottom: 4px; }
.openlink { position: absolute; bottom: 18%; z-index: 4; padding: 12px 18px; border-radius: 12px; background: var(--cyan); color: #04121a; font-weight: 700; text-decoration: none; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.data { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; padding: 8px 0; font-family: var(--mono); font-size: 11px; position: relative; z-index: 2; }
.cell { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: rgba(10,9,19,.55); min-width: 0; }
.cell .k { color: var(--dim); letter-spacing: .12em; font-size: 9.5px; text-transform: uppercase; }
.cell .v { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--rose)); }

.talk { display: flex; gap: 8px; padding: 6px 0 14px; position: relative; z-index: 2; }
.talk input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--text); background: rgba(20,17,39,.85); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; outline: none; user-select: text; -webkit-user-select: text; }
.talk input:focus { border-color: var(--cyan); }
.talk button { width: 50px; border: 0; border-radius: 14px; font-size: 18px; color: #04121a; background: linear-gradient(135deg, var(--cyan), var(--lav)); }
.tap { position: fixed; left: 16px; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 6; text-align: center; padding: 10px; border-radius: 12px; background: rgba(255,143,196,.16); border: 1px solid var(--rose); color: var(--rose); font-size: 13px; }
.flash { animation: flash .9s ease-out 3; }
@keyframes flash { 0% { background-color: rgba(255,143,196,.35); } 100% { background-color: transparent; } }