/* AccessFlow — Fire TV simulator styles
   v12 identity: the TV surface reads as NETFLIX — true black, Netflix
   red (#e50914) + white, all-red ACCESSFLOW wordmark, green match %,
   and real photographic key art on every poster/backdrop (Pexels,
   credits in assets/posters/CREDITS.md). Yellow (#ffc61a) survives on
   the TV ONLY as the focus ring/glow (accessibility visibility) and
   stays as the accent of the presenter-side analysis panels (metrics,
   path, adaptations, log), which keep the v11 look. Mobile-first. */
      :root{
        --bg:#050505; --panel:#101014; --panel2:#17171d; --line:#26262e;
        --ink:#f5f5f5; --muted:#a3a3ab; --faint:#6d6d76;
        --red:#e50914; --yellow:#ffc61a; --yellow-ink:#161200;
        --green:#3ecf7a;
        --tv-bg:#0b0b0f; --tile:#131318; --tile2:#1d1d24;
        --radius:14px;
      }
      *{ box-sizing:border-box; }
      html{ scroll-behavior:smooth; }
      body{
        margin:0; color:var(--ink);
        background:radial-gradient(1100px 520px at 78% -80px, rgba(229,9,20,.15) 0%, rgba(229,9,20,0) 60%), var(--bg);
        font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
        -webkit-font-smoothing:antialiased; line-height:1.45;
      }
      .wrap{ max-width:1180px; margin:0 auto; padding:14px 14px 40px; }

      /* ---------- top strip ---------- */
      .topbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:4px 0 12px; }
      /* Netflix-style wordmark: the whole name in Netflix red,
         heavier and tighter letterforms, no white/red split. */
      .wordmark{ font-size:26px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; line-height:1.1; color:var(--red); }
      .topbar .spacer{ flex:1; }
      .btn{
        appearance:none; border:1px solid var(--line); background:var(--panel2); color:var(--ink);
        font:inherit; font-weight:600; font-size:14px; border-radius:10px; padding:10px 16px; cursor:pointer;
        min-height:44px;
      }
      .btn:active{ transform:scale(.97); }
      .btn.primary{ background:var(--red); border-color:var(--red); color:#fff; }
      .btn.ghost{ background:transparent; }
      .btn.small{ min-height:38px; padding:6px 12px; font-size:13px; }

      /* ---------- demo layout ---------- */
      .demo-grid{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start; }
      @media (min-width:960px){
        .demo-grid{ grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr); }
        .side{ position:sticky; top:12px; }
      }
      .panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:14px; }
      .panel h3{ margin:0 0 10px; font-size:15px; letter-spacing:.02em; }
      .panel h3 .sub{ color:var(--faint); font-weight:500; font-size:12.5px; }

      /* ---------- TV ---------- */
      .tv-bezel{ background:#000; border:1px solid #26262e; border-radius:22px; padding:10px; box-shadow:0 18px 40px rgba(0,0,0,.5); }
      .tv-screen{
        position:relative; border-radius:14px; overflow:hidden;
        background:linear-gradient(165deg, #141417 0%, var(--tv-bg) 58%, #050506 100%);
        aspect-ratio:16/9.4; display:flex; flex-direction:column;
      }
      .tv-screen.hc{ background:#000; --tile:#101010; --tile2:#1c1c1c; }
      /* ---------- TV top bar (Android TV launcher chrome) ----------
         Mic + Search, section tabs with an underlined active tab,
         then gear / avatar / clock on the right. Decorative except
         the status badges and the live clock. On Home the bar floats
         over the full-bleed hero (.on-home). */
      .tv-top{
        display:flex; align-items:center; gap:18px; padding:10px 18px;
        background:linear-gradient(180deg, rgba(12,12,15,.95), rgba(6,6,8,.92));
        border-bottom:1px solid rgba(255,255,255,.06);
        font-size:13.5px; flex:none; position:relative; z-index:8;
      }
      .tt-search{ display:inline-flex; align-items:center; gap:7px; color:#f5f5f5; font-weight:600; flex:none; }
      .tt-search svg{ width:16px; height:16px; display:block; }
      .tt-tabs{ display:flex; align-items:center; gap:20px; }
      .tvtab{ color:#a3a3ab; font-weight:600; padding:2px 1px 5px; position:relative; white-space:nowrap; }
      .tvtab.on{ color:#fff; font-weight:700; }
      .tvtab.on::after{
        content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
        border-radius:3px; background:var(--red);
      }
      .tt-right{ margin-left:auto; display:flex; align-items:center; gap:12px; flex:none; }
      .tt-gear{ width:17px; height:17px; color:#d6d6da; display:inline-flex; }
      .tt-gear svg{ width:100%; height:100%; display:block; }
      .tt-avatar{
        width:26px; height:26px; border-radius:50%; flex:none;
        background:linear-gradient(140deg, #f6121d, #8f060e); color:#fff;
        display:inline-flex; align-items:center; justify-content:center;
        font-size:12.5px; font-weight:800; box-shadow:inset 0 -6px 10px rgba(0,0,0,.28);
      }
      .tv-top .clock{ color:#fff; font-weight:600; font-size:13.5px; font-variant-numeric:tabular-nums; }
      .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
      .tv-screen.on-home .tv-top{
        position:absolute; top:0; left:0; right:0;
        background:linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.30) 62%, rgba(0,0,0,0) 100%);
        border-bottom:none;
      }
      .tv-screen.on-home .tv-body{ padding-top:0; }
      .badge{ font-size:11px; font-weight:700; border-radius:999px; padding:2px 8px; background:#17171d; color:#d6d6da; }
      .badge.on{ background:var(--red); color:#fff; }
      .badge.cc{ background:rgba(255,255,255,.14); color:#fff; }
      .tv-body{ flex:1; padding:12px 14px; overflow-y:auto; overflow-x:hidden; position:relative; scrollbar-width:none; }
      .tv-body::-webkit-scrollbar{ display:none; }
      .tv-hint{ font-size:12.5px; color:var(--muted); margin:0 0 10px; }
      .tv-title{ font-size:24px; font-weight:800; color:#fff; margin:0 0 3px; letter-spacing:.01em; line-height:1.15; }

      /* ---------- Home hero (decorative, never focusable) ----------
         Full-bleed like the Android TV launcher: negative margins pull
         the art to the TV screen's edges, it fills the top ~55% of the
         TV area, the TV top bar floats over it (.on-home), the featured
         block sits bottom-left, and the Favorite Apps cards begin over
         its bottom fade (negative bottom margin). */
      .hero{
        position:relative; border-radius:0; overflow:hidden; margin:-12px -14px -30px;
        min-height:252px; padding:16px 20px 38px; display:flex; flex-direction:column; justify-content:flex-end;
        box-shadow:inset 0 0 70px rgba(0,0,0,.45), inset 0 -44px 56px rgba(0,0,0,.66);
      }
      .tv-screen.on-home .hero{ margin-top:0; padding-top:58px; }
      .hero::after{
        content:""; position:absolute; inset:0; pointer-events:none;
        background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 42%);
      }
      .hero > *{ position:relative; }
      .hero-block{ display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
      .hero-kicker{ font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#ff2e38; margin-bottom:5px; }
      .hero-title{ font-size:36px; font-weight:800; color:#fff; line-height:1.04; text-shadow:0 2px 14px rgba(0,0,0,.55); }
      .hero-syn{ font-size:13px; color:#e2e2e5; max-width:76%; margin-top:5px; line-height:1.4; }
      .hero-meta-line{ font-size:12px; color:rgba(222,222,226,.9); margin-top:6px; font-weight:600; letter-spacing:.02em; }
      .hero-meta-line .hmatch{ color:#46d369; font-weight:800; }
      /* Netflix-style hero action pills (decorative — spans inside
         the aria-hidden hero; never focusable). */
      .hero-actions{ display:flex; gap:8px; margin-top:12px; }
      .hero-pill{
        display:inline-flex; align-items:center; gap:7px; padding:7px 17px;
        border-radius:6px; font-size:13.5px; font-weight:700; line-height:1;
      }
      .hero-pill svg{ width:15px; height:15px; fill:currentColor; display:block; }
      .hero-pill.play{ background:#fff; color:#111114; }
      .hero-pill.info{ background:rgba(109,109,110,.72); color:#fff; }

      /* ---------- Favorite Apps (Home section label + app tiles) ---------- */
      .fav-label{ font-size:13.5px; font-weight:700; color:#fff; margin:2px 0 8px; position:relative; z-index:2; }
      /* "Your shortcut" row — pinned shortcuts sit UNDER Favorite Apps */
      .fav-label.shortcut-label{ margin-top:14px; }
      .tiles.home-apps .tile{
        align-items:center; text-align:center; justify-content:center;
        background:rgba(19,19,24,.92);
      }
      .tiles.home-apps .tile .ic{ width:24px; height:24px; }
      .tiles.home-apps .tile.focused{ background:var(--tile2); }

      /* ---------- Home chips row (decorative) ---------- */
      .chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
      .fchip{
        display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:8px;
        background:#17171d; border:1px solid rgba(255,255,255,.05); color:#e5e5e8;
        font-size:12px; font-weight:600; white-space:nowrap;
      }
      .fchip .fdot{ width:8px; height:8px; border-radius:50%; flex:none; }
      .fchip.on{ background:var(--red); color:#fff; border-color:var(--red); }

      /* ---------- Home feature panel (decorative) ----------
         Wide slate panel like the launcher's sponsored panel: a text
         block on the left, landscape thumbnails on the right. */
      .feat-panel{
        margin-top:14px; border-radius:14px; padding:16px 18px;
        background:linear-gradient(118deg, #1c1113 0%, #120c0d 55%, #0b0909 100%);
        border:1px solid rgba(255,255,255,.07);
        display:flex; gap:20px; align-items:center;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
      }
      .feat-txt{ flex:0 0 27%; min-width:150px; }
      .feat-eyebrow{ font-size:12px; color:#b3aca4; }
      .feat-eyebrow b{ color:#fff; }
      .feat-title{ font-size:19px; font-weight:800; color:#fff; margin:5px 0 6px; line-height:1.2; }
      .feat-desc{ font-size:12px; color:#a3a3ab; line-height:1.45; }
      .feat-thumbs{ flex:1; display:flex; gap:10px; min-width:0; }
      .feat-thumb{ flex:1 1 0; min-width:0; }
      .feat-art{
        aspect-ratio:16/9; border-radius:9px; position:relative; overflow:hidden;
        box-shadow:inset 0 -22px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
      }
      .feat-art .poster-mono{
        position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        font-size:24px; font-weight:800; color:rgba(255,255,255,.9);
        text-shadow:0 2px 6px rgba(0,0,0,.45); letter-spacing:.03em;
      }
      .feat-art-title{
        position:absolute; left:8px; bottom:6px; font-size:11px; font-weight:800; color:#fff;
        text-shadow:0 1px 4px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden;
        max-width:calc(100% - 16px); text-overflow:ellipsis;
      }

      /* ---------- Home landscape poster rows (decorative) ---------- */
      .land-card{ flex:1 1 0; min-width:0; }
      .land-art{
        aspect-ratio:16/9; border-radius:10px; position:relative; overflow:hidden;
        box-shadow:inset 0 -24px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
      }
      .land-art .poster-mono{
        position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        font-size:22px; font-weight:800; color:rgba(255,255,255,.92);
        text-shadow:0 2px 6px rgba(0,0,0,.45); letter-spacing:.03em;
      }
      .land-title{
        position:absolute; left:8px; bottom:6px; font-size:11px; font-weight:800; color:#fff;
        text-shadow:0 1px 4px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden;
        max-width:calc(100% - 16px); text-overflow:ellipsis;
      }

      .tiles{ display:grid; gap:10px; position:relative; }
      .tiles.cols3{ grid-template-columns:repeat(3,1fr); }
      .tiles.cols2{ grid-template-columns:repeat(2,1fr); }
      .tiles.cols5{ grid-template-columns:repeat(5,1fr); }
      .tile{
        background:var(--tile); border:2px solid #232329; border-radius:14px;
        padding:10px 11px 9px; min-height:66px; display:flex; flex-direction:column; gap:3px; justify-content:center;
        transition:transform .12s ease, background .12s ease, border-color .12s ease;
      }
      .tile .ic{ width:22px; height:22px; color:#d6d6da; }
      .tile .ic svg{ width:100%; height:100%; display:block; }
            .tiles .tile:nth-child(odd) .ic{ color:var(--red); }
      .tiles .tile:nth-child(even) .ic{ color:#f5f5f5; }
      .list .row-item:nth-child(odd) .ic{ color:var(--red); }
      .list .row-item:nth-child(even) .ic{ color:#f5f5f5; }
      .tile .lbl{ font-size:15px; font-weight:700; line-height:1.15; }
      .tile .sub{ font-size:11.5px; color:var(--muted); line-height:1.2; }
      .tile .val{ font-size:12px; font-weight:800; color:var(--red); }
      .tile.focused{
        background:var(--tile2); border-color:var(--yellow); transform:scale(1.05);
        box-shadow:0 0 0 2px rgba(255,198,26,.35), 0 12px 24px rgba(0,0,0,.5); z-index:2; position:relative;
      }
      .tile.focused .ic{ color:var(--yellow); }
      .tile.shortcut{ background:rgba(229,9,20,.07); border-style:dashed; border-color:rgba(229,9,20,.55); }
      .tiles .tile.shortcut .ic{ color:var(--red); }
      .tile.shortcut.focused{ border-style:solid; border-color:var(--yellow); }
      .tv-screen.large .tile{ min-height:78px; }
      .tv-screen.large .tile .lbl{ font-size:18px; }
      .tv-screen.large .tile .sub{ font-size:13px; }
      .tv-screen.large .tile.focused{ transform:scale(1.1); border-width:3px; }
      .tv-screen.ts-large .tile .lbl{ font-size:17px; }
      .tv-screen.ts-xl .tile .lbl{ font-size:19px; }

      .list{ display:flex; flex-direction:column; gap:8px; }
      .row-item{
        background:var(--tile); border:2px solid #232329; border-radius:12px;
        padding:10px 14px; display:flex; align-items:center; gap:12px; min-height:52px;
        transition:transform .12s ease, background .12s ease, border-color .12s ease;
      }
      .row-item .ic{ width:22px; height:22px; color:#d6d6da; flex:none; }
      .row-item .ic svg{ width:100%; height:100%; display:block; }
      .row-item .lbl{ font-size:16px; font-weight:700; }
      .row-item .sub{ font-size:12px; color:var(--muted); }
      .row-item .val{ margin-left:auto; font-size:14px; font-weight:800; color:var(--red); }
      .row-item.focused{ background:var(--tile2); border-color:var(--yellow); transform:scale(1.02); box-shadow:0 0 0 2px rgba(255,198,26,.3); }
      .row-item.focused .ic{ color:var(--yellow); }
      .tv-screen.large .row-item{ min-height:62px; }
      .tv-screen.large .row-item .lbl{ font-size:19px; }

      .poster{
        height:62px; border-radius:10px; display:flex; align-items:center; justify-content:center;
        font-size:24px; font-weight:800; color:rgba(255,255,255,.95); margin-bottom:4px;
        box-shadow:inset 0 -16px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
        text-shadow:0 1px 3px rgba(0,0,0,.4); letter-spacing:.03em;
      }
      /* ---------- Home poster rows (decorative, never focusable) ---------- */
      .poster-rows{ margin-top:2px; }
      .poster-row-sec{ margin-top:13px; }
      .poster-row-label{ font-size:15px; font-weight:800; color:#fff; margin:0 0 8px; letter-spacing:.01em; }
      .poster-row{ display:flex; gap:10px; }
      .row-poster{ flex:1 1 0; min-width:0; }
      .row-poster-art{
        aspect-ratio:2/3; border-radius:10px; position:relative; overflow:hidden;
        display:flex; align-items:center; justify-content:center;
        box-shadow:inset 0 -26px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.16);
      }
      .row-poster-art .poster-mono{
        font-size:30px; font-weight:800; color:rgba(255,255,255,.92); letter-spacing:.03em;
        text-shadow:0 2px 6px rgba(0,0,0,.45);
      }
      .detail-sec .row-poster{ max-width:118px; }
      .row-poster-title{ font-size:12px; font-weight:700; color:#f0f0f2; margin-top:5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .row-poster-meta{ font-size:10.5px; color:var(--muted); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

      /* ---------- Detail page (Google TV-style, decoration around the real items) ---------- */
      .detail-backdrop{
        height:228px; margin:-12px -14px 0; position:relative;
        box-shadow:inset 0 0 80px rgba(0,0,0,.35);
      }
      .detail-main{ position:relative; margin-top:-132px; padding:0 4px 2px; }
      .detail-kicker{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--red); }
      .detail-title{ font-size:34px; font-weight:800; color:#fff; margin:2px 0 6px; line-height:1.05; text-shadow:0 2px 10px rgba(0,0,0,.5); }
      .detail-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:#e2e2e5; }
      .detail-meta .match{ color:#46d369; font-weight:800; }
      .detail-meta .meta-line{ color:#e2e2e5; font-weight:600; letter-spacing:.01em; }
      .detail-syn{ font-size:13.5px; color:#d5d5d8; max-width:560px; margin:8px 0 12px; line-height:1.4; }
      .detail-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:2px 0 6px; }
      .detail-actions .tile{
        min-height:0; flex-direction:row; align-items:center; justify-content:center; gap:8px;
        padding:9px 18px; border-radius:999px;
      }
      .detail-actions .tile .ic{ width:15px; height:15px; }
      .detail-actions .tile .lbl{ font-size:14px; }
      .tile.play-pill{ background:#fff; border-color:#fff; color:#111114; }
      .tile.play-pill .ic{ color:#111114; }
      .tile.play-pill.focused{
        background:#fff; border-color:var(--yellow); transform:scale(1.05);
        box-shadow:0 0 0 3px rgba(255,198,26,.55), 0 12px 24px rgba(0,0,0,.5);
      }
      .tile.watch-pill{ background:rgba(23,23,29,.88); border-color:var(--line); color:#fff; }
      .tile.watch-pill.focused{
        background:var(--tile2); border-color:var(--yellow); transform:scale(1.05);
        box-shadow:0 0 0 2px rgba(255,198,26,.35), 0 12px 24px rgba(0,0,0,.5);
      }
      .detail-sec{ margin-top:13px; }
      .detail-sec-title{ font-size:14.5px; font-weight:800; color:#fff; margin-bottom:8px; }
      .cast-row{ display:flex; gap:14px; flex-wrap:wrap; }
      .cast{ width:56px; text-align:center; }
      .avatar{
        width:48px; height:48px; border-radius:50%; margin:0 auto 4px;
        display:flex; align-items:center; justify-content:center;
        font-size:15px; font-weight:800; color:rgba(255,255,255,.95);
        box-shadow:inset 0 -10px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
        text-shadow:0 1px 3px rgba(0,0,0,.4);
      }
      .cast-name{ font-size:10.5px; color:var(--muted); line-height:1.2; }

      .detail-head{ display:flex; gap:14px; align-items:center; margin-bottom:12px; }
      .detail-poster{
        width:74px; height:96px; border-radius:12px; flex:none; display:flex; align-items:center; justify-content:center;
        font-size:30px; font-weight:800; color:rgba(255,255,255,.95);
        box-shadow:inset 0 -18px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
        text-shadow:0 1px 3px rgba(0,0,0,.4);
      }
      .detail-head h4{ margin:0 0 4px; font-size:24px; color:#fff; }
      .detail-head p{ margin:0; color:var(--muted); font-size:13px; }
      .playerbox{ text-align:center; padding:12px 6px; }
      .playerbox .pbtn{ width:64px; height:64px; margin:0 auto 8px; border-radius:50%; background:var(--tile2); border:3px solid var(--red); display:flex; align-items:center; justify-content:center; color:var(--red); }
      .playerbox .pbtn svg{ width:28px; height:28px; }
      .progress{ height:6px; background:#26262e; border-radius:99px; margin:12px auto 4px; max-width:420px; overflow:hidden; }
      .progress i{ display:block; height:100%; width:34%; background:var(--red); }
      .tv-toast{
        position:absolute; left:50%; bottom:12px; transform:translateX(-50%) translateY(8px);
        background:#0c0c0f; border:1px solid #45454e; color:var(--ink); font-size:13.5px; font-weight:600;
        border-radius:10px; padding:9px 14px; opacity:0; pointer-events:none; transition:all .2s ease; max-width:88%; text-align:center; z-index:5;
      }
      .tv-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

      /* ---------- action cards (suggest / recover) ---------- */
      .actioncard{
        border-radius:var(--radius); padding:14px 16px; margin-top:14px; display:none;
      }
      .actioncard.show{ display:block; }
      .actioncard.suggest{ background:var(--panel); border:1px solid rgba(229,9,20,.55); }
      .actioncard.recover{ background:var(--panel); border:1px solid rgba(255,198,26,.4); }
      .actioncard h3{ margin:0 0 6px; font-size:17px; }
      .actioncard p{ margin:0 0 8px; color:#e0e0e2; font-size:14px; }
      .actioncard.recover p{ color:#e6e2d2; }
      .actioncard ul{ margin:6px 0 10px; padding-left:18px; font-size:14px; color:var(--ink); }
      .actioncard li{ margin:3px 0; }
      .ac-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
      .adapt-row{
        display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05);
        border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 12px; margin:8px 0;
      }
      .adapt-row .txt{ flex:1; }
      .adapt-row .txt b{ display:block; font-size:14.5px; }
      .adapt-row .txt span{ font-size:12.5px; color:var(--muted); }
      .switch{
        width:54px; height:30px; border-radius:99px; background:#33333a; border:none; cursor:pointer; position:relative; flex:none;
      }
      .switch::after{ content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#e8e8e8; transition:left .15s ease; }
      .switch[aria-pressed="true"]{ background:var(--red); }
      .switch[aria-pressed="true"]::after{ left:27px; background:#fff; }

      /* ---------- remote ---------- */
      .remote{
        background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
        padding:16px; margin-top:14px;
      }
      .remote h3{ margin:0 0 4px; font-size:14px; color:var(--muted); font-weight:600; text-align:center; }
      .dpad{ display:grid; grid-template-columns:repeat(3,72px); grid-template-rows:repeat(3,72px); gap:8px; justify-content:center; margin:10px auto 12px; }
      .rbtn{
        appearance:none; border:1px solid var(--line); background:var(--panel2); color:var(--ink);
        border-radius:14px; font:inherit; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center;
        min-width:56px; min-height:56px; user-select:none; -webkit-user-select:none; touch-action:manipulation;
      }
      .rbtn svg{ width:26px; height:26px; }
      .rbtn:active{ background:#232329; transform:scale(.95); }
      .rbtn.ok{ background:var(--red); color:#fff; border-color:var(--red); border-radius:50%; font-size:17px; }
      .rbtn.ok:active{ background:#ff1e28; }
      .rbtn.blank{ visibility:hidden; }
      .remote-row{ display:flex; gap:10px; justify-content:center; }
      .remote-row .rbtn{ padding:0 22px; border-radius:99px; font-size:15px; gap:8px; }
      .remote-row .rbtn svg{ width:20px; height:20px; }

      /* ---------- metrics / log ---------- */
      .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
      .stat{ background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:9px 10px; text-align:center; }
      .stat .n{ font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; }
      .stat .l{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
      .stat.warn .n{ color:var(--red); }
      .pathchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
      .chip{ background:rgba(255,198,26,.12); color:#ffd75e; border:1px solid rgba(255,198,26,.4); font-size:12.5px; font-weight:700; border-radius:8px; padding:4px 9px; }
      .chip.final{ background:var(--yellow); border-color:var(--yellow); color:var(--yellow-ink); }
      .effort{ font-size:13px; color:var(--muted); margin-top:8px; }
      .effort b{ color:var(--ink); }
      .profile-ctl{ margin-top:10px; border-top:1px solid var(--line); padding-top:10px; }
      .profile-label{ font-size:13px; font-weight:700; color:var(--ink); }
      .profile-label .sub{ color:var(--faint); font-weight:500; font-size:12px; }
      .seg{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
      .segbtn{
        appearance:none; border:1px solid var(--line); background:var(--panel2); color:var(--muted);
        border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600; cursor:pointer; min-height:34px;
      }
      .segbtn:active{ transform:scale(.97); }
      .segbtn.active{ background:var(--yellow); border-color:var(--yellow); color:var(--yellow-ink); }
      .profile-note{ margin:7px 0 0; font-size:12px; color:var(--faint); }
      .learn-ctl{ margin-top:10px; border-top:1px solid var(--line); padding-top:10px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
      .learn-note{ font-size:12px; color:var(--faint); flex:1 1 220px; }
      .guide-ctl{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
      .guide-box{
        margin-top:10px; background:rgba(255,198,26,.06); border:1px solid rgba(255,198,26,.35); border-radius:10px;
        padding:10px 12px;
      }
      .guide-dest{ font-size:13px; font-weight:700; color:var(--ink); }
      .guide-step{ font-size:15.5px; font-weight:800; color:var(--yellow); margin-top:4px; line-height:1.3; }
      .guide-prog{ font-size:12.5px; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums; }
      .log{
        list-style:none; margin:0; padding:0; max-height:230px; overflow:auto; font-size:13px;
      }
      .log li{ padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.05); display:flex; gap:8px; }
      .log li .t{ color:var(--faint); font-variant-numeric:tabular-nums; flex:none; }
      .log li.bad{ color:#ffb4ab; }
      .log li.good{ color:#8ff0b6; }
      .log li.guide{ color:#ffe08a; }
      .empty-note{ color:var(--faint); font-size:13px; }

      /* ---------- results ---------- */
      .results-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
      .results-table th,.results-table td{ padding:9px 8px; text-align:right; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
      .results-table th:first-child,.results-table td:first-child{ text-align:left; }
      .results-table thead th{ color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; }
      .imp{ color:var(--green); font-weight:800; }
      .bars{ margin-top:12px; }
      .bar-row{ display:grid; grid-template-columns:86px 1fr 44px; align-items:center; gap:10px; margin:6px 0; font-size:13px; }
      .bar-track{ height:14px; background:var(--panel2); border:1px solid var(--line); border-radius:99px; overflow:hidden; }
      .bar-fill{ height:100%; background:#4c4c54; border-radius:99px; }
      .bar-fill.run2{ background:var(--red); }
      .bar-row .v{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }

      /* ---------- adaptations audit ---------- */
      .adapt-entry{
        display:flex; align-items:center; gap:10px; background:var(--panel2);
        border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0;
      }
      .adapt-entry .txt{ flex:1; font-size:14px; }
      .adapt-entry .txt b{ font-size:14.5px; }
      .adapt-entry .txt span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
      .adapt-entry .txt span.atime{ color:var(--faint); font-size:11.5px; font-variant-numeric:tabular-nums; }
      .atag{ display:inline-block !important; font-size:11px; font-weight:800; border-radius:999px; padding:2px 8px; margin-left:6px; vertical-align:2px; }
      .atag.applied{ background:#0e3a22; color:#8ff0b6; }
      .atag.undone{ background:#3a2a10; color:#ffcf87; }
      .atag.dismissed{ background:#26262e; color:#a3a3ab; }

      section.block{ margin-top:22px; }
      section.block > h3{ font-size:19px; margin:0 0 12px; }

      /* ---------- small screens: taller stage, tighter tiles so screens fit ---------- */
      @media (max-width:700px){
        .tv-screen{ aspect-ratio:16/12.6; }
        .tv-body{ padding:9px 10px; }
        .tv-title{ font-size:19px; }
        .tv-top{ gap:10px; padding:8px 10px; font-size:12px; }
        .tt-tabs{ gap:12px; }
        .tt-gear{ display:none; }
        .tt-avatar{ width:22px; height:22px; font-size:11px; }
        .tv-top .clock{ font-size:12px; }
        .hero{ min-height:200px; padding:10px 14px 28px; margin:-9px -10px -24px; }
        .tv-screen.on-home .hero{ margin-top:0; padding-top:46px; }
        .hero-title{ font-size:25px; }
        .hero-syn{ font-size:11px; max-width:92%; }
        .hero-actions{ margin-top:9px; }
        .hero-pill{ font-size:11.5px; padding:6px 13px; }
        .hero-meta-line{ font-size:10.5px; }
        .fav-label{ font-size:12.5px; margin-bottom:6px; }
        .chip-row{ gap:6px; margin-top:12px; }
        .fchip{ font-size:10.5px; padding:5px 10px; }
        .feat-panel{ flex-direction:column; align-items:stretch; gap:12px; padding:13px 14px; margin-top:12px; }
        .feat-txt{ flex:none; min-width:0; }
        .feat-title{ font-size:16px; }
        .feat-art .poster-mono{ font-size:15px; }
        .feat-art-title{ font-size:9.5px; }
        .land-art .poster-mono{ font-size:14px; }
        .land-title{ font-size:9.5px; }
        .poster-row{ gap:7px; }
        .row-poster-art .poster-mono{ font-size:17px; }
        .row-poster-title{ font-size:10px; }
        .row-poster-meta{ display:none; }
        .detail-backdrop{ height:170px; margin:-9px -10px 0; }
        .detail-main{ margin-top:-96px; }
        .detail-title{ font-size:24px; }
        .detail-syn{ font-size:12px; }
        .avatar{ width:40px; height:40px; font-size:13px; }
        .cast{ width:48px; }
        .cast-row{ gap:9px; }
        .tiles{ gap:7px; }
        .tile{ min-height:50px; padding:7px 8px; }
        .tile .lbl{ font-size:13.5px; }
        .tile .sub{ font-size:10.5px; }
        .poster{ height:30px; font-size:16px; }
        .list{ gap:6px; }
        .row-item{ min-height:42px; padding:6px 12px; }
        .row-item .lbl{ font-size:14.5px; }
        .detail-poster{ width:56px; height:72px; font-size:22px; }
        .detail-head h4{ font-size:18px; }
        .dpad{ grid-template-columns:repeat(3,64px); grid-template-rows:repeat(3,64px); }
        .stats{ grid-template-columns:repeat(3,1fr); }
      }