/* MyPi phone app, "Slate" look shared with the TV player's web admin: white cards on a mist canvas,
   IBM Plex Sans, one dusty blue accent. Phone first; on a desktop the column is centred. */
:root {
  --bg:#EEF1F6; --panel:#FFFFFF; --panel-2:#F3F5F9; --border:#DDE3EC; --text:#1F2933; --muted:#6B7785;
  --accent:#4A6FA5; --accent-strong:#3A5A8A; --accent-soft:#E3E8F0; --on-accent:#FFFFFF;
  --danger:#B3261E; --danger-soft:#FBE9E7; --ok:#2F6B3A; --ok-soft:#E8F2EA; --warn:#B26A00; --warn-soft:#FFF1DC;
  --radius:14px; --radius-s:10px; --font:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; font:16px/1.45 var(--font); background:var(--bg); color:var(--text); padding-bottom:env(safe-area-inset-bottom); }
[hidden] { display:none !important; }
button { font:inherit; }

#topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:16px; height:56px; padding:0 16px; padding-top:env(safe-area-inset-top); background:var(--panel); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.brand .mark { width:26px; height:26px; border-radius:7px; background:var(--accent); position:relative; }
.brand .mark::after { content:""; position:absolute; left:8px; top:8px; width:10px; height:10px; border-radius:50%; background:#fff; }
.brand .name { font-size:17px; font-weight:700; letter-spacing:-.01em; }
#nav { margin-left:auto; display:flex; gap:4px; }
#nav button { border:0; background:none; padding:8px 10px; border-radius:var(--radius-s); color:var(--muted); font-weight:500; font-size:14px; cursor:pointer; }
#nav button.active { background:var(--accent-soft); color:var(--text); font-weight:600; }

main { max-width:520px; margin:0 auto; padding:16px 16px 40px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:14px; }
.card h2 { margin:0 0 10px; font-size:20px; font-weight:700; letter-spacing:-.01em; }
.card h3 { margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.muted { color:var(--muted); } .small { font-size:13px; } .error { color:var(--danger); min-height:1.3em; margin:8px 0 0; font-size:14px; }
p { margin:8px 0; }

label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin:10px 0 6px; }
input, select { width:100%; font:inherit; font-size:16px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--panel-2); color:var(--text); }
input:focus, select:focus { outline:2px solid var(--accent-soft); border-color:var(--accent); }
input.code { letter-spacing:.35em; text-transform:uppercase; text-align:center; font-size:22px; font-weight:600; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:12px; padding:13px 16px; border:1px solid var(--border); border-radius:var(--radius-s); background:var(--panel); color:var(--text); font-weight:600; text-decoration:none; cursor:pointer; transition:border-color .12s, background .12s, transform .06s; }
.btn:hover { border-color:var(--accent); color:var(--accent-strong); } .btn:active { transform:scale(.98); } .btn:disabled { opacity:.5; cursor:default; }
.btn.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; } .btn.primary:hover { background:var(--accent-strong); color:#fff; }
.btn.danger { color:var(--danger); } .btn.danger:hover { border-color:var(--danger); background:var(--danger-soft); }
.btn.inline { width:auto; margin:0; padding:8px 12px; font-size:14px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.row .btn { flex:1; }

/* TV chips */
.tvs { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; } .tvs::-webkit-scrollbar { display:none; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--panel); white-space:nowrap; font-size:14px; font-weight:500; cursor:pointer; }
.chip.active { border-color:var(--accent); background:var(--accent-soft); font-weight:600; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--muted); flex:0 0 auto; } .dot.on { background:var(--ok); }

/* Talk screen */
.talk { text-align:center; padding:26px 18px 22px; }
.mic { width:132px; height:132px; border-radius:50%; border:0; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(74,111,165,.35); cursor:pointer; -webkit-user-select:none; user-select:none; touch-action:none; transition:transform .1s, background .15s; }
.mic:active, .mic.listening { transform:scale(1.06); background:var(--danger); box-shadow:0 10px 30px rgba(179,38,30,.35); }
.mic.busy { background:var(--muted); box-shadow:none; }
.mic svg { width:48px; height:48px; }
.hint { margin-top:14px; color:var(--muted); font-size:14px; min-height:1.4em; }
.transcript { margin-top:10px; font-size:18px; min-height:1.5em; }
.reply { margin-top:14px; padding:14px 16px; border-radius:var(--radius-s); background:var(--panel-2); font-size:17px; text-align:left; }
.reply.bad { background:var(--danger-soft); }
.choices { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.choices .btn { margin:0; }
.compose { display:flex; gap:8px; margin-top:14px; }
.compose input { flex:1; } .compose .btn { width:auto; margin:0; padding:0 16px; }
.usage { margin-top:10px; font-size:13px; color:var(--muted); }
.bar { height:6px; border-radius:3px; background:var(--panel-2); overflow:hidden; margin-top:6px; } .bar i { display:block; height:100%; background:var(--accent); }
.bar.full i { background:var(--warn); }

/* History and devices */
.list { margin:0; padding:0; list-style:none; }
.list li { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--border); }
.list li:first-child { border-top:0; padding-top:0; }
.list .what { flex:1; min-width:0; } .list .what b { display:block; font-weight:600; } .list .what span { display:block; color:var(--muted); font-size:14px; }
.list time { color:var(--muted); font-size:12px; white-space:nowrap; }
.status { display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px; font-weight:600; background:var(--panel-2); color:var(--muted); }
.status.ok { background:var(--ok-soft); color:var(--ok); } .status.bad { background:var(--danger-soft); color:var(--danger); }
.device { padding:14px 0; border-top:1px solid var(--border); } .device:first-child { border-top:0; padding-top:0; }
.device .head { display:flex; align-items:center; gap:10px; } .device .head b { font-size:17px; flex:1; }
.device .now { color:var(--muted); font-size:14px; margin-top:4px; }
.device .row { margin-top:10px; }
.toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--border); }
.toggle:first-of-type { border-top:0; }
.toggle input { width:auto; accent-color:var(--accent); transform:scale(1.3); }
.kv { display:flex; justify-content:space-between; gap:12px; padding:8px 0; font-size:15px; } .kv span:last-child { font-weight:600; }

#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--text); color:#fff; padding:10px 16px; border-radius:999px; font-size:14px; z-index:10; max-width:90vw; }
.install { background:var(--accent-soft); border-color:transparent; }
.center { text-align:center; }
a { color:var(--accent-strong); }
.hint.bad { color:var(--danger); }
.miclog { font-size:11px; min-height:1.2em; margin-top:4px; word-break:break-word; }