:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif;
  background: #050b14;
  color: #edf6ff;
  --panel: rgba(15, 29, 48, 0.92);
  --line: rgba(138, 183, 220, 0.18);
  --muted: #8ea6bb;
  --cyan: #4ce0d2;
  --blue: #5da9ff;
  --amber: #ffc766;
  --danger: #ff7b84;
}

* { box-sizing: border-box; }
html { background: #050b14; }
body { margin: 0; min-width: 0; background: radial-gradient(circle at 50% -10%, #17304e 0, #08111f 40%, #050b14 100%); }
button, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell { width: min(100%, 520px); min-height: 100svh; margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom)); overflow-x: hidden; }
.app-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
h1, h2, p { margin: 0; }
h1 { font-size: 25px; letter-spacing: -0.04em; }
h2 { font-size: 15px; }
.eyebrow { margin-bottom: 5px; color: var(--cyan); font: 700 10px/1 monospace; letter-spacing: .14em; }
.level-badge { max-width: 132px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; text-align: center; }
.status-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.status-strip div { min-width: 0; padding: 10px 11px; background: #0b1728; }
.status-strip span, .metric-grid span, .hero-metrics span, .debug-grid span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.status-strip strong { display: block; overflow: hidden; color: #dcecff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.panel { margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-title > span { color: var(--muted); font-size: 11px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: #07101d; }
.mode-button, .button { min-height: 46px; border: 1px solid var(--line); border-radius: 10px; background: #111f32; color: #dbeaff; font-weight: 700; }
.mode-button { border-color: transparent; background: transparent; }
.mode-button.active { background: #1a3650; color: var(--cyan); }
.primary-actions { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; margin-top: 10px; }
.button.primary { border-color: transparent; background: linear-gradient(135deg, #2ebfb1, #318ae8); color: #031018; }
.button:disabled { opacity: .4; }
.guidance, .error { margin-top: 10px; font-size: 12px; line-height: 1.55; }
.guidance { color: #b7cad9; }
.error { padding: 9px; border-radius: 9px; background: rgba(255, 80, 92, .12); color: #ffadb3; }
.hero { display: grid; grid-template-columns: 122px 1fr; align-items: center; gap: 14px; }
.pulse { display: grid; width: 116px; height: 116px; place-items: center; border: 1px solid rgba(76,224,210,.4); border-radius: 50%; background: radial-gradient(circle, rgba(76,224,210,.15), transparent 68%); color: var(--cyan); font: 700 11px/1 monospace; box-shadow: inset 0 0 24px rgba(76,224,210,.08); transition: transform .12s ease, box-shadow .2s ease; }
.pulse.active { transform: scale(1.04); box-shadow: 0 0 22px rgba(76,224,210,.24), inset 0 0 30px rgba(76,224,210,.14); }
.hero-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.hero-metrics strong { font-size: 13px; overflow-wrap: anywhere; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric-grid > div { min-width: 0; }
.metric-grid strong { font-size: 13px; }
select { width: 100%; min-height: 32px; padding: 0 7px; border: 1px solid var(--line); border-radius: 7px; background: #091526; color: #e9f5ff; }
canvas { display: block; width: 100%; height: 140px; border-radius: 9px; background: #07101b; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 2px; margin-right: 5px; vertical-align: middle; background: currentColor; }
.dynamic-line { color: var(--cyan); } .rotation-line { color: var(--blue); } .threshold-line { color: var(--amber); }
.text-button { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--cyan); }
.debug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.debug-grid > div { min-width: 0; padding: 8px; border-radius: 8px; background: #091524; }
code { display: block; overflow: hidden; color: #dbeaff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.footer-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.footer-controls p { grid-column: 1 / -1; color: var(--muted); font-size: 11px; text-align: center; }
.danger { color: var(--danger); }
.file-button { display: grid; place-items: center; text-align: center; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 360px) { .hero { grid-template-columns: 100px 1fr; } .pulse { width: 96px; height: 96px; } .metric-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }