:root { --bg: #15171c; --fg: #eef0f4; --sub: #9aa3b2; --card: #20242c; --line: #343a46; --h: #ff9a3c; --v: #3cc8ff; --ok: #59e08a; --ng: #ff5d6c; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  padding: 0 max(12px, env(safe-area-inset-right)) 40px max(12px, env(safe-area-inset-left)); max-width: 560px; margin: 0 auto; }
header { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
header h1 { font-size: 16px; margin: 0; }
.hub { color: var(--sub); text-decoration: none; font-size: 13px; white-space: nowrap; }
button { font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; touch-action: manipulation; }
button:active { filter: brightness(1.3); }
.tabs { display: flex; gap: 8px; }
.tabs button { flex: 1; font-size: 17px; font-weight: bold; }
.tabs button small { display: block; font-size: 12px; font-weight: normal; color: var(--sub); }
.tabs button.on { border-color: #fff; background: #2d3340; }
.warn { background: #4a1f25; border: 1px solid var(--ng); padding: 8px 10px; border-radius: 8px; }
.help, .legend { color: var(--sub); font-size: 13px; }
.legend .h { color: var(--h); } .legend .v { color: var(--v); }
.status { min-height: 1.5em; margin: 10px 0 6px; font-weight: bold; }
.status.ng { color: var(--ng); } .status.ok { color: var(--ok); }
.row { display: flex; gap: 10px; align-items: center; }
.pad { width: 50%; max-width: 240px; aspect-ratio: 1; background: var(--card); border-radius: 10px; }
.dir { flex: 1; text-align: center; font-size: 72px; font-weight: bold; line-height: 1; min-height: 1em; }
.dir small { display: block; font-size: 18px; color: var(--sub); }
.vals { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 10px; font-size: 13px; margin: 10px 0; font-variant-numeric: tabular-nums; }
.vals dt { color: var(--sub); } .vals dd { margin: 0; }
.graph { width: 100%; height: auto; background: var(--card); border-radius: 10px; display: block; }
.hoi { width: 100%; font-size: 20px; font-weight: bold; margin-top: 8px; background: #3a2a18; border-color: var(--h); }
.btns { display: flex; gap: 8px; } .btns .hoi { flex: 2; } .btns #fBase { flex: 1; margin-top: 8px; }
.log { padding-left: 1.6em; margin: 8px 0; font-size: 14px; max-height: 9em; overflow: auto; }
.log li.ng { color: var(--ng); }
.opts { display: grid; gap: 6px; margin: 10px 0; font-size: 14px; }
.opts input[type=range] { width: 50%; vertical-align: middle; }
.cam { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: 10px; overflow: hidden; }
.cam video, .cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam .over { position: absolute; right: 8px; bottom: 6px; text-shadow: 0 0 8px #000; }
.call { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; font-weight: bold;
  pointer-events: none; text-shadow: 0 0 20px #000, 0 0 4px #000; }
.call.hoi-now { color: var(--h); font-size: 88px; }