:root { color-scheme: dark; --customer-primary:#e96f98; --customer-secondary:#43bde8; --customer-success:#6ddb65; --stage:#182038; --text:#fff; --muted:rgba(255,255,255,.62); --font-display:"Fredoka",sans-serif; --font-body:"DM Sans",sans-serif; }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; overflow:hidden; background:#080d18; color:var(--text); font-family:var(--font-body); }
button,input { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }

.pairing-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 18% 20%,color-mix(in srgb,var(--customer-primary) 24%,transparent),transparent 28rem),radial-gradient(circle at 82% 5%,color-mix(in srgb,var(--customer-secondary) 26%,transparent),transparent 30rem),#11182a; }
.pairing-card { width:min(560px,100%); padding:42px; border:1px solid rgba(255,255,255,.14); border-radius:28px; background:rgba(255,255,255,.075); box-shadow:0 34px 100px rgba(0,0,0,.34); backdrop-filter:blur(18px); }
.pairing-mark { width:70px; height:70px; display:grid; place-items:center; margin-bottom:28px; border-radius:22px; background:linear-gradient(145deg,var(--customer-primary),var(--customer-secondary)); font:700 24px var(--font-display); }
.pairing-card > small { color:var(--customer-secondary); font-size:12px; font-weight:800; letter-spacing:.12em; }.pairing-card h1 { margin:8px 0; font:700 clamp(34px,6vw,52px)/1 var(--font-display); letter-spacing:-.04em; }.pairing-card > p { margin:0 0 28px; color:var(--muted); font-size:15px; line-height:1.6; }
.pairing-card form { display:grid; gap:9px; }.pairing-card label { color:var(--muted); font-size:12px; font-weight:700; }.pairing-card input { width:100%; min-height:74px; padding:0 18px; border:1px solid rgba(255,255,255,.22); border-radius:16px; outline:0; background:rgba(0,0,0,.2); color:white; font:700 clamp(25px,8vw,38px) var(--font-display); letter-spacing:.18em; text-align:center; text-transform:uppercase; }.pairing-card input:focus { border-color:var(--customer-secondary); box-shadow:0 0 0 4px color-mix(in srgb,var(--customer-secondary) 22%,transparent); }.pairing-card form button { min-height:58px; margin-top:7px; border:0; border-radius:14px; background:linear-gradient(100deg,var(--customer-primary),var(--customer-secondary)); color:#fff; font-weight:800; }.pairing-card form button:disabled { opacity:.55; }.pairing-card form span { min-height:20px; color:#ffb2bd; font-size:13px; }.pairing-card footer { display:flex; justify-content:space-between; gap:14px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); color:var(--muted); font-size:11px; }.pairing-card footer b { color:rgba(255,255,255,.82); }

.player-shell { width:100vw; height:100vh; display:grid; place-items:center; background:#080d18; }
.tv-stage { position:relative; width:min(100vw,calc(100vh * 16 / 9)); height:min(100vh,calc(100vw * 9 / 16)); aspect-ratio:16/9; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:clamp(10px,1.15vmin,22px); overflow:hidden; padding:clamp(18px,2.15vmin,42px); background:radial-gradient(circle at 82% 0,color-mix(in srgb,var(--customer-secondary) 22%,transparent),transparent 30%),radial-gradient(circle at 18% 0,color-mix(in srgb,var(--customer-primary) 18%,transparent),transparent 28%),var(--stage); }
.tv-stage > header { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; }.customer-identity { min-width:0; display:flex; align-items:center; gap:clamp(12px,1.4vmin,26px); }.customer-identity > span { width:clamp(50px,5.5vmin,88px); height:clamp(50px,5.5vmin,88px); display:grid; place-items:center; flex:0 0 auto; border-radius:28%; background:linear-gradient(145deg,var(--customer-primary),var(--customer-secondary)); font:700 clamp(22px,3vmin,42px) var(--font-display); box-shadow:0 12px 35px rgba(0,0,0,.25); }.customer-identity div { min-width:0; }.customer-identity small { display:block; overflow:hidden; color:color-mix(in srgb,var(--customer-secondary) 82%,white); font-size:clamp(8px,.72vmin,13px); font-weight:800; letter-spacing:.12em; text-overflow:ellipsis; white-space:nowrap; }.customer-identity h1 { margin:3px 0 0; overflow:hidden; font:700 clamp(24px,2.7vmin,48px)/1 var(--font-display); letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; }.runtime-status { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:clamp(10px,.9vmin,16px); font-weight:700; }.runtime-status span { padding:7px 10px; border:1px solid color-mix(in srgb,var(--customer-success) 30%,transparent); border-radius:999px; background:color-mix(in srgb,var(--customer-success) 10%,transparent); color:var(--customer-success); }.runtime-status span[data-state="offline"] { border-color:rgba(255,196,112,.3); background:rgba(255,196,112,.1); color:#ffd291; }.runtime-status time { font:600 clamp(18px,1.65vmin,30px) var(--font-display); }

.tv-grid { min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.15vmin,22px); }.tv-grid[data-items="1"] { grid-template-columns:1fr; grid-template-rows:1fr; }.tv-grid[data-items="2"] { grid-template-rows:1fr; }.tv-grid[data-items="3"] article:first-child { grid-row:1 / -1; }
.tv-card { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; padding:clamp(14px,1.5vmin,28px); border:1px solid rgba(255,255,255,.13); border-radius:clamp(14px,1.45vmin,26px); background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.045)); box-shadow:0 18px 45px rgba(3,8,20,.18); animation:card-in 280ms ease-out both; }.tv-card > header { min-width:0; display:flex; align-items:start; justify-content:space-between; gap:14px; }.tv-card header div { min-width:0; }.tv-card header small { display:block; color:color-mix(in srgb,var(--customer-secondary) 78%,white); font-size:clamp(7px,.62vmin,11px); font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.tv-card h2 { margin:3px 0 0; overflow:hidden; font:700 clamp(17px,1.5vmin,28px)/1.05 var(--font-display); text-overflow:ellipsis; white-space:nowrap; }.live-chip { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:color-mix(in srgb,var(--customer-success) 10%,transparent); color:var(--customer-success); font-size:clamp(7px,.58vmin,10px); font-weight:800; }.card-body { min-height:0; display:grid; align-content:center; overflow:hidden; }.card-meta { min-width:0; display:flex; justify-content:space-between; gap:10px; padding-top:clamp(7px,.7vmin,13px); border-top:1px solid rgba(255,255,255,.1); color:var(--muted); font-size:clamp(7px,.58vmin,10px); }.card-meta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.metric-value { font:700 clamp(44px,5.5vmin,98px)/.92 var(--font-display); letter-spacing:-.055em; }.metric-context { margin-top:10px; color:var(--customer-success); font-size:clamp(12px,1.2vmin,22px); font-weight:700; }.progress { height:clamp(9px,.9vmin,16px); margin-top:18px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); }.progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--customer-primary),var(--customer-secondary),var(--customer-success)); }
.gauge { width:min(22vmin,72%); aspect-ratio:1; display:grid; place-items:center; justify-self:center; border-radius:50%; background:conic-gradient(var(--customer-primary) 0 var(--turn),var(--customer-secondary) var(--turn),rgba(255,255,255,.1) var(--turn) 1turn); }.gauge div { width:75%; aspect-ratio:1; display:grid; place-items:center; align-content:center; border-radius:50%; background:var(--stage); }.gauge strong { font:700 clamp(23px,3vmin,50px) var(--font-display); }.gauge span { color:var(--customer-success); font-weight:800; }
.list { display:grid; gap:clamp(5px,.55vmin,10px); }.list-row { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:clamp(6px,.6vmin,11px); border-radius:10px; background:rgba(255,255,255,.055); font-size:clamp(9px,.8vmin,14px); }.list-row span,.list-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.list-row b { color:var(--customer-secondary); }.bars { display:grid; gap:clamp(7px,.72vmin,13px); }.bar-row { display:grid; grid-template-columns:minmax(72px,.8fr) 2fr auto; align-items:center; gap:12px; font-size:clamp(8px,.72vmin,13px); }.bar-row > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.bar-row i { height:clamp(7px,.7vmin,12px); overflow:hidden; border-radius:99px; background:rgba(255,255,255,.1); }.bar-row i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--customer-primary),var(--customer-secondary)); }
.trend svg { width:100%; height:min(20vmin,190px); overflow:visible; }.trend line { stroke:rgba(255,255,255,.12); }.trend polyline { fill:none; stroke:var(--customer-secondary); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }.trend div { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }.flow { display:flex; align-items:stretch; gap:8px; overflow:hidden; }.flow article { min-width:0; flex:1; display:grid; place-items:center; align-content:center; padding:8px; border-radius:12px; background:color-mix(in srgb,var(--customer-secondary) 12%,transparent); text-align:center; }.flow article span,.flow article strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.flow article strong { margin-top:5px; font:700 clamp(13px,1.35vmin,24px) var(--font-display); }.funnel { display:grid; justify-items:center; gap:6px; }.funnel div { min-width:42%; display:flex; justify-content:space-between; gap:10px; padding:clamp(6px,.62vmin,11px) 12px; border-radius:8px; background:linear-gradient(90deg,var(--customer-primary),var(--customer-secondary)); font-size:clamp(8px,.72vmin,13px); }.table-scroll,.heatmap-scroll { min-height:0; overflow:auto; scrollbar-width:thin; }.data-table { width:100%; border-collapse:collapse; font-size:clamp(8px,.68vmin,12px); }.data-table th,.data-table td { padding:7px 9px; border-bottom:1px solid rgba(255,255,255,.1); text-align:left; white-space:nowrap; }.data-table th { color:var(--customer-secondary); }.heatmap { min-width:440px; display:grid; grid-template-columns:auto repeat(var(--columns),minmax(46px,1fr)); gap:4px; font-size:clamp(7px,.62vmin,11px); }.heatmap > * { min-height:28px; display:grid; place-items:center; padding:4px; border-radius:6px; }.heatmap i { background:color-mix(in srgb,var(--customer-secondary) calc(var(--heat) * 100%),rgba(255,255,255,.05)); font-style:normal; }.empty-card { grid-column:1 / -1; grid-row:1 / -1; place-items:center; align-content:center; text-align:center; }.empty-card strong { font:700 clamp(40px,6vmin,96px) var(--font-display); }.empty-card span { color:var(--muted); }

.tv-stage > footer { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; color:var(--muted); font-size:clamp(8px,.72vmin,13px); }.page-controls { display:flex; align-items:center; gap:7px; }.page-controls button,.tv-stage > footer > button { min-width:42px; min-height:42px; border:1px solid rgba(255,255,255,.14); border-radius:11px; background:rgba(255,255,255,.07); color:#fff; }.page-controls button:nth-child(2) { min-width:68px; padding:0 12px; }.page-controls button:disabled { opacity:.35; }.page-controls span { display:flex; gap:5px; margin-left:5px; }.page-controls i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.2); }.page-controls i.is-active { width:20px; border-radius:99px; background:var(--customer-secondary); }.freshness { min-width:0; display:flex; justify-content:center; align-items:center; gap:9px; overflow:hidden; }.freshness > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.freshness i { width:1px; height:15px; background:rgba(255,255,255,.18); }.offline-banner { position:absolute; right:3%; bottom:9%; display:flex; gap:8px; padding:10px 14px; border:1px solid rgba(255,196,112,.28); border-radius:12px; background:rgba(38,31,28,.9); color:#ffe0ae; font-size:12px; }.offline-banner span { color:rgba(255,255,255,.64); }
@keyframes card-in { from { opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }
@media (orientation:portrait) and (max-width:900px) { .player-shell::after { content:"Rotate this display to landscape"; position:fixed; inset:auto 16px 16px; z-index:5; padding:12px; border-radius:12px; background:rgba(0,0,0,.72); color:#fff; text-align:center; }.tv-stage { align-self:start; } .pairing-card { padding:28px; } }