:root { --bg:#f6f7f9; --card:#fff; --ink:#1d2230; --muted:#6b7280; --line:#e5e7eb; --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --accent:#2563eb; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1115; --card:#171a21; --ink:#e6e8ee; --muted:#9aa1ad; --line:#2a2f3a; --accent:#60a5fa; } }
* { box-sizing: border-box; }
body { margin:0; font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--ink); }
a { color: var(--accent); text-decoration: none; }
header { display:flex; gap:18px; align-items:center; padding:10px 20px; background:var(--card); border-bottom:1px solid var(--line); }
header .brand { font-weight:600; }
header nav a { margin-right:14px; }
header .spacer { flex:1; }
header .who { color:var(--muted); font-size:13px; }
main { max-width: 1100px; margin: 20px auto; padding: 0 16px; }
h1 { font-size: 20px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 20px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:16px; }
.grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat { font-size: 26px; font-weight:600; }
.stat small { display:block; font-size:12px; color:var(--muted); font-weight:400; }
table { width:100%; border-collapse: collapse; font-size:14px; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align: top; }
th { color:var(--muted); font-weight:500; font-size:12px; text-transform: uppercase; letter-spacing:.03em; }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; border:1px solid var(--line); }
.pill.ok { color:var(--ok); border-color: currentColor; }
.pill.warn { color:var(--warn); border-color: currentColor; }
.pill.bad { color:var(--bad); border-color: currentColor; }
.pill.muted { color:var(--muted); }
.flash { padding:10px 14px; border-radius:6px; margin-bottom:14px; }
.flash.ok { background: rgba(21,128,61,.12); color: var(--ok); }
.flash.err { background: rgba(185,28,28,.12); color: var(--bad); }
form.inline { display:inline; }
label { display:block; font-size:13px; color:var(--muted); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=number], input[type=url], select, textarea { width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); font: inherit; }
textarea { min-height: 90px; font-family: ui-monospace, Consolas, monospace; font-size:13px; }
button { padding:7px 14px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; font: inherit; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { color:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.row > div { flex:1; min-width: 160px; }
pre.log { background:#0b0d12; color:#d7dbe4; padding:12px; border-radius:6px; font-size:12.5px; max-height:480px; overflow:auto; white-space:pre-wrap; }
.muted { color:var(--muted); }
.small { font-size: 12px; }
.check { display:flex; gap:8px; align-items:center; margin:6px 0; font-size:14px; color:var(--ink); }
.check input { width:auto; }
.login { max-width: 360px; margin: 80px auto; }
.recorder { display:grid; gap:16px; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items:start; }
@media (max-width: 860px) { .recorder { grid-template-columns: minmax(0, 1fr); } }
.shot { position:relative; display:inline-block; max-width:100%; line-height:0; }
.shot img { max-width:100%; cursor:crosshair; border:1px solid var(--line); border-radius:6px; }
.shot .word { position:absolute; border:1px solid rgba(37,99,235,.85); background:rgba(37,99,235,.12); cursor:pointer; }
.shot .word:hover { background:rgba(37,99,235,.35); }
.steps-card td input { padding:3px 6px; }
.nowrap { white-space:nowrap; }

/* Keep navigation, long phone IDs and forms usable on narrow touch screens. */
main, .card, .grid > *, .row > *, header nav { min-width:0; }
img, video, input[type=file] { max-width:100%; }
h1, h2, .flash, .who, label, .pill { overflow-wrap:anywhere; }
input:not([type=checkbox]):not([type=radio]), select, textarea { max-width:100%; }
@media (max-width:750px) {
  header { flex-wrap:wrap; gap:10px; padding:12px 16px; }
  header .brand { margin-right:auto; }
  header .spacer { display:none; }
  header .who { flex:1; text-align:right; }
  header nav { order:2; flex:0 0 100%; display:flex; flex-wrap:wrap; gap:4px; }
  header nav a { flex:1 0 auto; margin:0; padding:12px 8px; min-height:44px; text-align:center; }
  main { margin:16px auto; padding:0 12px; }
  .grid { grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
  .card { padding:14px 12px; }
  .row > div { min-width:0; flex-basis:100%; }
  button, input:not([type=checkbox]):not([type=radio]), select { min-height:44px; }
  input, select, textarea { font-size:16px !important; }
  .check { min-height:44px; }
  .check input { flex:0 0 auto; width:20px; height:20px; }
  table { display:block; max-width:100%; overflow-x:auto; }
  td { overflow-wrap:anywhere; min-width:100px; }
  pre, code { overflow-wrap:anywhere; white-space:pre-wrap; }
  .login { margin:32px auto; }
  .login button { width:100%; }
}