:root {
  color-scheme: dark;
  --bg: #070707;
  --panel: #111214;
  --panel-2: #17181b;
  --line: rgba(255,255,255,.10);
  --text: #f5f5f7;
  --muted: #8f9299;
  --accent: #ffffff;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { overscroll-behavior: none; }
button, select, a { font: inherit; }
button { touch-action: manipulation; }
.shell {
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(16px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));
}
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .18em; font-weight: 700; }
h1 { margin: 2px 0 0; font-size: 30px; line-height: 1; letter-spacing: -.04em; }
.status-wrap { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; white-space:nowrap; }
.dot { width:8px; height:8px; border-radius:50%; background:#6b6b6b; box-shadow:0 0 0 4px rgba(255,255,255,.03); }
.dot.on { background:#38d06f; }
.dot.off { background:#e55353; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:16px; margin-bottom:14px; }
.panel-title, .device label { display:block; font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.setup p { margin:0 0 14px; color:#c6c7ca; font-size:14px; line-height:1.45; }
.primary-link, .secondary-btn, .icon-btn {
  border:0; border-radius:14px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.primary-link { background:#fff; color:#050505; padding:13px 16px; font-weight:750; width:100%; }
.secondary-btn { background:#1a1b1e; color:#dedfe2; border:1px solid var(--line); padding:11px 14px; margin-top:8px; width:100%; }
.select-row { display:grid; grid-template-columns:1fr 46px; gap:8px; }
select { width:100%; background:#1a1b1e; color:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 13px; outline:none; }
.icon-btn { width:46px; background:#1a1b1e; color:#fff; border:1px solid var(--line); font-size:22px; }
.apps { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.app-card { min-height:66px; border:1px solid rgba(255,255,255,.08); border-radius:18px; font-size:18px; font-weight:800; cursor:pointer; }
.netflix { background:#161616; color:#e50914; letter-spacing:.08em; }
.disney { background:linear-gradient(145deg,#0c1f45,#142d5c); color:#fff; font-weight:700; }
.max { background:linear-gradient(145deg,#161439,#3c2ca0); color:#fff; text-transform:lowercase; font-size:24px; }
.youtube { background:#f5f5f5; color:#e32619; }
.remote-card { background:linear-gradient(180deg,#141517,#0f1012); border:1px solid var(--line); border-radius:30px; padding:18px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.remote-head { display:grid; grid-template-columns:52px 1fr 52px; align-items:center; gap:12px; }
.power-btn, .small-round, .center-control { width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:#202125; color:#fff; font-size:22px; cursor:pointer; }
.power-btn { color:#ff5b5b; font-size:25px; }
.tv-state { min-width:0; }
.tv-state strong { display:block; font-size:17px; }
.tv-state span { display:block; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.dpad { width:240px; height:240px; margin:20px auto 14px; position:relative; border-radius:50%; background:radial-gradient(circle at 50% 45%,#292a2e,#17181b 62%,#101113); border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 0 0 10px rgba(255,255,255,.015), inset 0 -16px 30px rgba(0,0,0,.35); }
.dpad button { position:absolute; border:0; background:transparent; color:#f4f4f5; font-size:23px; cursor:pointer; width:72px; height:72px; border-radius:50%; }
.dpad-up { top:7px; left:84px; }
.dpad-down { bottom:7px; left:84px; }
.dpad-left { left:7px; top:84px; }
.dpad-right { right:7px; top:84px; }
.dpad-ok { left:76px; top:76px; width:88px!important; height:88px!important; background:#27282c!important; border:1px solid rgba(255,255,255,.10)!important; font-size:17px!important; font-weight:800; box-shadow:0 8px 25px rgba(0,0,0,.25); }
.nav-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.nav-row button { border:1px solid var(--line); background:#1a1b1e; color:#fff; border-radius:15px; height:48px; font-weight:650; cursor:pointer; }
.nav-row span { margin-right:7px; font-size:18px; }
.control-row { margin-top:15px; display:grid; grid-template-columns:1fr 62px 1fr; align-items:center; gap:12px; }
.control-stack { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.control-stack span { grid-column:1 / -1; text-align:center; color:var(--muted); font-size:10px; letter-spacing:.12em; font-weight:800; }
.control-stack button { height:46px; border:1px solid var(--line); border-radius:14px; background:#1a1b1e; color:#fff; font-size:22px; cursor:pointer; }
.center-control { margin-top:17px; justify-self:center; }
.footer-actions { margin:12px 0 0; text-align:center; }
.text-link { display:inline-block; color:var(--muted); text-decoration:none; font-size:12px; margin-top:12px; }
.toast { position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:calc(18px + var(--safe-bottom)); width:min(calc(100% - 32px),460px); background:rgba(32,33,37,.96); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:12px 14px; color:#fff; font-size:13px; opacity:0; pointer-events:none; transition:.2s ease; z-index:99; text-align:center; backdrop-filter:blur(14px); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.hidden { display:none!important; }
button:active, .app-card:active, .primary-link:active { transform:scale(.97); }
button[disabled], .app-card[disabled] { opacity:.4; cursor:not-allowed; transform:none; }
@media (max-height: 720px) {
  .shell { padding-top:calc(8px + var(--safe-top)); }
  .topbar { margin-bottom:10px; }
  .apps { margin-bottom:10px; }
  .app-card { min-height:54px; }
  .dpad { width:205px; height:205px; margin:12px auto 8px; }
  .dpad-up { left:66px; }
  .dpad-down { left:66px; }
  .dpad-left { top:66px; }
  .dpad-right { top:66px; }
  .dpad-ok { left:58px; top:58px; }
}