/* TiviDeck account design system (owner, 10-16: "portal page vs setting page look different ... make all pages look
   the same, premium -- it looks simple, static and bored. Need effects.").
   ONE look for the account pages (portal, household, my ads, advertise, administration) and the settings panel
   (app.html): the same left rail, the same glass cards over a slow aurora, the same buttons, rings, pills and motion.
   Loaded LAST on every one of those pages; marketing pages never load it. Selectors are scoped:
     .shell ...                    the settings panel (app.html)
     body>main ...                 the account pages (their markup is <body><main><header>...)
     html.td-shell body>main ...   an account page drawn signed in, as an app (portal.js nav() sets the class)
   td-ui.js adds the moving parts (counters, skeletons, the light that follows the pointer, section entrances).
   Everything that moves stops under prefers-reduced-motion. */
@font-face{font-family:Inter;src:url('/assets/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Sora;src:url('/assets/fonts/sora-var.woff2') format('woff2');font-weight:100 800;font-display:swap}
:root{
  --td-ink:#050911;--td-rail:rgba(7,12,22,.78);
  --td-glass:linear-gradient(160deg,rgba(25,40,68,.72),rgba(11,19,35,.8));
  --td-glass-2:linear-gradient(160deg,rgba(30,48,82,.55),rgba(14,24,42,.6));
  --td-line:rgba(130,165,225,.14);--td-line-2:rgba(130,165,225,.24);--td-line-hi:rgba(91,133,255,.55);
  --td-text:#eef3fb;--td-muted:#9fb0c6;--td-faint:#6f82a0;
  --td-blue:#1e5bff;--td-blue-2:#4a7bff;--td-green:#0de593;--td-teal:#19c6d6;--td-gold:#f5b342;
  --td-grad:linear-gradient(135deg,#1e5bff 0%,#1a9bea 52%,#0de593 100%);
  --td-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 60px -24px rgba(0,0,0,.75);
  --td-shadow-hi:0 1px 0 rgba(255,255,255,.08) inset,0 34px 70px -26px rgba(30,91,255,.45),0 0 0 1px rgba(91,133,255,.18);
  --td-radius:20px;--td-ease:cubic-bezier(.2,.75,.2,1);--td-rail-w:268px;
}

/* ---------------------------------------------------------------- the stage: aurora + grain */
html{background:var(--td-ink)}
html body{background:transparent;color:var(--td-text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 32% at 18% 22%,rgba(30,91,255,.30),transparent 70%),
    radial-gradient(30% 28% at 82% 18%,rgba(25,198,214,.16),transparent 70%),
    radial-gradient(34% 30% at 72% 82%,rgba(13,229,147,.17),transparent 70%),
    radial-gradient(30% 30% at 28% 88%,rgba(120,92,255,.13),transparent 70%);
  will-change:transform;animation:td-aurora 38s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes td-aurora{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(3%,-2%,0) rotate(8deg) scale(1.06)}100%{transform:translate3d(-3%,3%,0) rotate(-6deg) scale(1.02)}}
::selection{background:rgba(30,91,255,.45);color:#fff}
*{scrollbar-width:thin;scrollbar-color:#2a3b58 transparent}

/* ---------------------------------------------------------------- type */
.shell h1,.shell h2,.shell h3,.shell h4,body>main h1,body>main h2,body>main h3,.entry h1,.entry h2{font-family:Sora,Inter,system-ui,sans-serif}
body>main .eyebrow,.shell .eyebrow,.shell .hero .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(90deg,#7aa2ff,#0de593 80%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------------------------------------------------------------- focus: one ring everywhere */
.shell :focus-visible,body>main :focus-visible,.entry :focus-visible{outline:2px solid var(--td-green)!important;outline-offset:3px;box-shadow:0 0 0 6px rgba(13,229,147,.16)}

/* ================================================================ THE RAIL (panel .rail + portal header as rail) */
.shell .rail,
html.td-shell body>main>header{
  background:linear-gradient(180deg,rgba(14,26,48,.82),rgba(6,11,20,.86));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border-right:1px solid var(--td-line);box-shadow:inset -1px 0 0 rgba(255,255,255,.02),24px 0 60px -40px rgba(0,0,0,.8)}
.shell .rail::before,html.td-shell body>main>header::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;pointer-events:none;
  background:radial-gradient(80% 100% at 20% 0%,rgba(30,91,255,.22),transparent 70%)}
.shell .rail>*{position:relative}
.shell .rail .brand img,html.td-shell body>main>header .logo{width:150px;height:auto;filter:drop-shadow(0 6px 18px rgba(30,91,255,.25))}
.shell .rail .group,html.td-shell body>main>header nav .td-group{display:block;margin:16px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--td-faint)}
/* one nav item */
.shell .rail .nav,
html.td-shell body>main>header nav a,
html.td-shell body>main>header nav button{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:9px 12px;margin:1px 0;
  border:1px solid transparent;border-radius:12px;background:transparent;color:#c3d0e2;text-align:left;
  font:550 14px/1.2 Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .25s var(--td-ease),color .25s,border-color .25s,transform .25s var(--td-ease)}
.shell .rail .nav svg,html.td-shell body>main>header nav svg{width:18px;height:18px;flex:none;opacity:.8;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:color .25s,opacity .25s,transform .3s var(--td-ease)}
.shell .rail .nav:hover,
html.td-shell body>main>header nav a:hover,html.td-shell body>main>header nav button:hover{background:rgba(255,255,255,.045);color:#fff;transform:translateX(2px)}
.shell .rail .nav:hover svg,html.td-shell body>main>header nav a:hover svg{color:var(--td-green);opacity:1;transform:scale(1.08)}
.shell .rail .nav.on,
html.td-shell body>main>header nav a[aria-current="page"]{
  background:linear-gradient(90deg,rgba(30,91,255,.30),rgba(13,229,147,.07));border-color:rgba(91,133,255,.35);color:#fff;font-weight:650;
  text-decoration:none;box-shadow:0 10px 26px -14px rgba(30,91,255,.7)}
.shell .rail .nav.on::before,
html.td-shell body>main>header nav a[aria-current="page"]::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,#3d7bff,#0de593);box-shadow:0 0 12px rgba(13,229,147,.7)}
.shell .rail .nav.on svg,html.td-shell body>main>header nav a[aria-current="page"] svg{color:var(--td-green);opacity:1}
.shell .rail .nav .lock{margin-left:auto;color:var(--td-gold);text-shadow:0 0 10px rgba(245,179,66,.6)}
.shell .rail a.nav{color:#c3d0e2}
.shell .rail .foot{border-top:1px solid var(--td-line)}
.shell .rail .foot .dot.live,.td-live-dot{background:var(--td-green);box-shadow:0 0 0 0 rgba(13,229,147,.6);animation:td-pulse 2.2s infinite}
@keyframes td-pulse{0%{box-shadow:0 0 0 0 rgba(13,229,147,.55)}70%{box-shadow:0 0 0 9px rgba(13,229,147,0)}100%{box-shadow:0 0 0 0 rgba(13,229,147,0)}}
.shell .rail .lang-switch,html.td-shell body>main>header>.lang-switch{color:#8fb0ff;font-size:12.5px;font-weight:600;transition:color .2s}
.shell .rail .lang-switch:hover,html.td-shell body>main>header>.lang-switch:hover{color:#fff}

/* ---- the account pages, signed in: the header becomes the rail (desktop) ---- */
@media(min-width:901px){
  html.td-shell body>main{max-width:none;margin:0;padding:34px 40px 90px calc(var(--td-rail-w) + 40px)}
  html.td-shell body>main>*:not(header){max-width:1120px}
  html.td-shell body>main:has(#done)>*:not(header){max-width:820px}
  html.td-shell body>main>header{position:fixed;z-index:30;inset:0 auto 0 0;width:var(--td-rail-w);margin:0;padding:22px 14px 18px;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:4px;overflow-y:auto}
  html.td-shell body>main>header>a:first-child{display:block;padding:4px 10px 18px}
  html.td-shell body>main>header>nav{order:0;flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;flex-basis:auto;font-size:14px}
  html.td-shell body>main>header>nav .td-out{margin-top:auto}
  html.td-shell body>main>header>nav button.td-out{margin-top:auto;justify-content:center;border:1px solid var(--td-line-2);background:linear-gradient(180deg,rgba(29,44,69,.9),rgba(20,32,52,.9));color:#dfe8f5;font-weight:600}
  html.td-shell body>main>header>nav button.td-out:hover{transform:none;border-color:var(--td-line-hi)}
  html.td-shell body>main>header>.lang-switch{order:1;margin:10px 0 0;border:0;border-top:1px solid var(--td-line);border-radius:0;padding:12px 6px 0;text-align:center;background:none}
}
/* ---- phone: a sticky glass bar, links as a row of chips that scrolls sideways ---- */
@media(max-width:900px){
  html.td-shell body>main{padding:0 16px 70px;max-width:none}
  html.td-shell body>main>header{position:sticky;top:0;z-index:30;margin:0 -16px 22px;padding:12px 16px 10px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;row-gap:10px;
    border-right:0;border-bottom:1px solid var(--td-line);background:rgba(6,11,20,.78)}
  html.td-shell body>main>header::before{display:none}
  html.td-shell body>main>header .logo{width:132px}
  html.td-shell body>main>header>.lang-switch{margin-left:auto;border:1px solid var(--td-line-2);border-radius:999px;padding:6px 12px}
  html.td-shell body>main>header>nav{order:3;flex:1 1 100%;margin:0;display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 0 4px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  html.td-shell body>main>header>nav::-webkit-scrollbar{display:none}
  html.td-shell body>main>header nav .td-group{display:none}
  html.td-shell body>main>header nav a,html.td-shell body>main>header nav button{width:auto;flex:none;min-height:36px;padding:7px 12px;border-radius:999px;border-color:var(--td-line);background:rgba(255,255,255,.03);font-size:13px}
  html.td-shell body>main>header nav a[aria-current="page"]::before{display:none}
  html.td-shell body>main>header nav a:hover{transform:none}
  html.td-shell body>main>header nav svg{width:16px;height:16px}
}

/* ================================================================ PANEL top bar */
.shell .top{background:rgba(6,11,20,.62);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--td-line)}
.shell .top h1{font-size:21px;letter-spacing:-.5px}
.shell .plan{position:relative;overflow:hidden;border-color:var(--td-line-2);background:rgba(14,24,40,.8)}
.shell .plan.premium{border-color:rgba(245,179,66,.5);color:#ffd27a;background:linear-gradient(135deg,rgba(245,179,66,.16),rgba(245,179,66,.05));box-shadow:0 0 22px -6px rgba(245,179,66,.45)}
.shell .plan.premium::after,.td-sheen::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);transform:translateX(-120%);animation:td-sheen 4.5s ease-in-out infinite}
@keyframes td-sheen{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.shell .menu-btn{background:rgba(14,24,40,.8);border-color:var(--td-line-2)}

/* ================================================================ GLASS SURFACES */
.shell .card,.shell .kpi,.shell .qt,.shell .np .tile,.shell .week .day,.shell .sport,.shell .kid,.shell .look,.shell .tv,.shell .veil .box,
body>main .panel,body>main .ad,body>main .tile,body>main .metric,body>main .dash-stats .stat,body>main .notice,body>main #devices>article,
body>main .card,.entry .login,body>main .login{
  position:relative;border:1px solid var(--td-line);border-radius:var(--td-radius);background:var(--td-glass);box-shadow:var(--td-shadow);isolation:isolate}
/* no backdrop-filter on cards: over a moving aurora every blurred card would be re-blurred every frame */
/* the light that follows the pointer (td-ui.js writes --mx/--my) */
.shell .card::before,.shell .kpi::before,.shell .qt::before,.shell .np .tile::before,.shell .sport::before,.shell .kid::before,
body>main .panel::before,body>main .ad::before,body>main .tile::before,body>main .metric::before,body>main .dash-stats .stat::before,body>main .card::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(74,123,255,.16),rgba(13,229,147,.06) 40%,transparent 65%)}
.shell .card:hover::before,.shell .kpi:hover::before,.shell .qt:hover::before,.shell .np .tile:hover::before,.shell .sport:hover::before,.shell .kid:hover::before,
body>main .panel:hover::before,body>main .ad:hover::before,body>main .tile:hover::before,body>main .metric:hover::before,body>main .dash-stats .stat:hover::before,body>main .card:hover::before{opacity:1}
.shell .card:hover,body>main .panel:hover,body>main .ad:hover,body>main .card:hover{border-color:var(--td-line-2)}
/* interactive surfaces lift and glow */
.shell .qt,.shell .np .tile,.shell .kpi,.shell .sport,.shell .kid,.shell .look,
body>main .tile,body>main .metric,body>main .dash-stats .stat,body>main #devices>article{transition:transform .35s var(--td-ease),border-color .35s,box-shadow .35s}
.shell .qt:hover,.shell .np .tile:hover,.shell .kid:hover,.shell .look:hover,.shell .sport:hover,
body>main .tile:hover,body>main .tile:focus-visible,body>main #devices>article:hover{transform:translateY(-4px);border-color:var(--td-line-hi);box-shadow:var(--td-shadow-hi)}
.shell .kpi:hover,body>main .metric:hover,body>main .dash-stats .stat:hover{transform:translateY(-2px);border-color:var(--td-line-2)}

/* ================================================================ HERO: the greeting card on every page */
.shell .hero,html.td-shell body>main>.hero{
  position:relative;overflow:hidden;isolation:isolate;border-radius:26px;padding:36px 38px;margin-bottom:22px;border:1px solid rgba(91,133,255,.32);
  background:radial-gradient(60% 130% at 0% 0%,rgba(30,91,255,.42),transparent 62%),radial-gradient(50% 120% at 100% 100%,rgba(13,229,147,.22),transparent 62%),linear-gradient(135deg,rgba(15,29,56,.92),rgba(8,16,30,.92));
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 40px 90px -40px rgba(30,91,255,.55)}
.shell .hero::after,html.td-shell body>main>.hero::after{content:"";position:absolute;z-index:-1;right:-90px;top:-110px;width:360px;height:360px;border-radius:50%;
  background:conic-gradient(from 0deg,#2c5bff,#0de593,#7c5cff,#19c6d6,#2c5bff);filter:blur(70px);opacity:.34;animation:td-spin 22s linear infinite}
.shell .hero::before,html.td-shell body>main>.hero::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.06) 45%,transparent 60%);background-size:250% 100%;animation:td-glint 9s ease-in-out infinite}
@keyframes td-spin{to{transform:rotate(360deg)}}
@keyframes td-glint{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}
.shell .hero h2,html.td-shell body>main>.hero h1{font-size:clamp(28px,3.2vw,42px);line-height:1.08;letter-spacing:-1.2px;margin:10px 0 10px;max-width:none;
  background:linear-gradient(92deg,#ffffff 0%,#dfe8ff 55%,#9fe9cf 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.shell .hero p,html.td-shell body>main>.hero p{color:#bccbe0;font-size:15.5px;line-height:1.65;max-width:680px;margin:0}
html.td-shell body>main>.hero{padding-top:34px}
html.td-shell body>main>.hero .eyebrow{display:inline-block}
@media(max-width:900px){.shell .hero,html.td-shell body>main>.hero{padding:26px 22px;border-radius:22px}}

/* ================================================================ NUMBERS: kpis, stats, metrics */
body>main .dash-stats,body>main .metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 22px;border:0;background:none;overflow:visible;border-radius:0}
body>main .dash-stats .stat,body>main .metric,.shell .kpi{padding:20px 22px;display:flex;flex-direction:column;gap:6px}
body>main .metric{flex-direction:column-reverse;justify-content:flex-end}
body>main .dash-stats .stat span,body>main .metric span,.shell .kpi span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--td-faint);font-weight:700}
body>main .dash-stats .stat strong,body>main .metric strong,.shell .kpi b{font-family:Sora,Inter,sans-serif;font-size:28px;font-weight:700;letter-spacing:-.6px;line-height:1.15;font-variant-numeric:tabular-nums;
  background:linear-gradient(92deg,#ffffff,#cfe0ff 60%,#8ff0cb);-webkit-background-clip:text;background-clip:text;color:transparent}
body>main .dash-stats .stat::after,body>main .metric::after,.shell .kpis .kpi::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;border-radius:2px;background:var(--td-grad);opacity:.55;transform:scaleX(.18);transform-origin:left;transition:transform .6s var(--td-ease),opacity .4s}
body>main .dash-stats .stat:hover::after,body>main .metric:hover::after,.shell .kpis .kpi:hover::after{transform:scaleX(1);opacity:.9}
.shell .kpis{gap:14px}

/* skeleton: a value that has not arrived yet shimmers instead of reading "—" */
.td-skel{position:relative;color:transparent!important;-webkit-text-fill-color:transparent;background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.05) 75%)!important;
  background-size:300% 100%!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;border-radius:9px;animation:td-skel 1.4s ease-in-out infinite;min-width:4.5em;display:inline-block;user-select:none}
strong.td-skel,b.td-skel{display:block;width:min(60%,9em)}
h2.td-skel{width:min(100%,14em)}
@keyframes td-skel{0%{background-position:100% 0}100%{background-position:0 0}}
.td-pop{animation:td-pop .5s var(--td-ease)}
@keyframes td-pop{0%{opacity:.2;transform:translateY(6px)}100%{opacity:1;transform:none}}

/* ================================================================ PORTAL: overview tiles */
body>main .tile{min-height:220px;padding:26px 26px 22px;border-radius:24px;overflow:hidden}
body>main .tile::after{content:"";position:absolute;z-index:-1;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(30,91,255,.22),transparent 65%);transition:transform .6s var(--td-ease),opacity .6s;opacity:.7;pointer-events:none}
body>main .tile:hover::after{transform:scale(1.35);opacity:1}
body>main .tile-wide{background:radial-gradient(70% 60% at 0% 0%,rgba(13,229,147,.12),transparent 70%),var(--td-glass)}
body>main .tile-wide::after{right:auto;top:auto;left:-60px;bottom:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(13,229,147,.18),transparent 65%)}
body>main .tile-accent{border-color:rgba(91,133,255,.38);background:radial-gradient(80% 80% at 100% 0%,rgba(30,91,255,.32),transparent 70%),linear-gradient(160deg,rgba(29,47,107,.7),rgba(12,22,44,.78))}
body>main .tile h2{font-size:21px;letter-spacing:-.4px}
body>main .tile-wide h2{font-size:28px;letter-spacing:-.8px}
body>main .tile p{color:#a9b9d0}
body>main .tile-icon,.shell .qt .ic{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:0;margin-bottom:10px;
  background:var(--td-grad);box-shadow:0 10px 24px -8px rgba(30,91,255,.7),inset 0 1px 0 rgba(255,255,255,.35);color:#fff;transition:transform .4s var(--td-ease)}
body>main .tile-icon svg{stroke:#fff;stroke-width:1.8}
body>main .tile-accent .tile-icon{background:linear-gradient(135deg,#7c5cff,#2c5bff 60%,#19c6d6)}
body>main .tile-accent .tile-icon svg{stroke:#fff}
body>main .tile:hover .tile-icon,.shell .qt:hover .ic{transform:translateY(-2px) rotate(-6deg) scale(1.06)}
body>main .tile-go{display:inline-flex;align-items:center;gap:6px;color:#9dbbff;transition:color .25s}
body>main .tile:hover .tile-go{color:#fff}
body>main .tile-go b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(91,133,255,.18);font-size:13px;transition:transform .3s var(--td-ease),background .3s}
body>main .tile:hover .tile-go b{transform:translateX(4px);background:var(--td-grad);color:#04121c}
body>main .tile-count{font-family:Sora,Inter,sans-serif}
body>main .dash-grid{gap:18px}
@media(min-width:761px){body>main .dash-grid:not(.admin)>.tile:nth-child(4){grid-column:1/-1;min-height:0}}
body>main .status-message:empty{min-height:0;margin:0;padding:0}
body>main .dash-rule{background:linear-gradient(90deg,var(--td-line-2),transparent)}
body>main .tv-list li{background:rgba(6,12,24,.55);border-color:var(--td-line);transition:border-color .25s,transform .25s var(--td-ease)}
body>main .tile:hover .tv-list li{border-color:var(--td-line-2)}
body>main .tv-list li.recent:before{animation:td-pulse 2.2s infinite}

/* the device-seat meter, with a shimmer running through the filled part */
body>main .slots-bar{position:relative;height:10px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
body>main .slots-bar i{position:relative;overflow:hidden;background:var(--td-grad);box-shadow:0 0 16px rgba(13,229,147,.45);transition:width 1.2s var(--td-ease)}
body>main .slots-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);transform:translateX(-100%);animation:td-shimmer 2.6s ease-in-out infinite}
@keyframes td-shimmer{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

@media(max-width:620px){
  body>main .dash-stats,body>main .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body>main .dash-stats .stat:first-child{grid-column:1/-1}
  body>main .dash-stats .stat,body>main .metric{padding:16px}
  body>main .dash-stats .stat strong,body>main .metric strong{font-size:23px}
  body>main .slots{flex-wrap:wrap}body>main .slots-bar{flex:1 1 100%}
}
/* ================================================================ PORTAL: household, my ads, admin */
body>main .panel{padding:28px;border-radius:22px;margin:0 0 18px}
body>main .panel h2{font-size:22px;letter-spacing:-.4px}
body>main .panel .slots{margin:16px 0 4px}
body>main #devices{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:14px 0}
body>main #devices>article{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"icon title" "icon meta" "icon act";column-gap:16px;align-items:start;padding:20px;margin:0}
body>main #devices>article::after{content:"";grid-area:icon;width:48px;height:48px;border-radius:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='12' rx='2.5'/%3E%3Cpath d='M8 20h8'/%3E%3C/svg%3E") center/24px no-repeat,var(--td-grad);
  box-shadow:0 10px 24px -10px rgba(30,91,255,.75),inset 0 1px 0 rgba(255,255,255,.3)}
body>main #devices>article[data-kind="phone"]::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E") center/24px no-repeat,linear-gradient(135deg,#7c5cff,#2c5bff 60%,#19c6d6)}
body>main #devices>article[data-kind="web"]::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18'/%3E%3C/svg%3E") center/24px no-repeat,linear-gradient(135deg,#3a4d6e,#24324a)}
body>main #devices>article h3{grid-area:title;margin:2px 0 2px;font-size:16.5px;display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
body>main #devices>article.recent h3::after{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--td-green);animation:td-pulse 2.2s infinite}
body>main #devices>article p{grid-area:meta;margin:0;font-size:13px;line-height:1.5;color:var(--td-muted)}
body>main #devices>article button{grid-area:act;justify-self:start;margin-top:14px;padding:8px 14px;font-size:13px}
body>main .plan-grid article{position:relative;border:1px solid var(--td-line-2)!important;border-radius:18px;background:var(--td-glass-2);transition:transform .35s var(--td-ease),box-shadow .35s,border-color .35s}
body>main .plan-grid article:hover{transform:translateY(-4px);box-shadow:var(--td-shadow-hi)}
body>main .plan-grid article.lead{border-color:rgba(91,133,255,.65)!important;background:radial-gradient(80% 80% at 100% 0%,rgba(30,91,255,.3),transparent 70%),var(--td-glass);box-shadow:0 0 0 1px rgba(91,133,255,.3),0 30px 60px -30px rgba(30,91,255,.7)}
body>main .plan-grid .amt{font-family:Sora,Inter,sans-serif}
body>main .ad{padding:26px;gap:28px;margin:0 0 18px}
body>main .art{border-radius:14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
body>main .badge{border:1px solid var(--td-line-2);background:rgba(255,255,255,.05)}
body>main .badge.good{border-color:rgba(13,229,147,.4);background:rgba(13,229,147,.12);color:#8ff5cc}
body>main .badge.good::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--td-green);vertical-align:1px;animation:td-pulse 2.2s infinite}
body>main .badge.test{border-color:rgba(245,179,66,.4);background:rgba(245,179,66,.1);color:#ffd585}
body>main .notice{padding:15px 20px;border-radius:16px;color:#c7d8ea;border-color:rgba(25,198,214,.25);background:linear-gradient(135deg,rgba(25,198,214,.08),rgba(30,91,255,.05))}
body>main .toolbar{border-top:0;padding:14px 18px;margin:0 0 16px;border:1px solid var(--td-line);border-radius:16px;background:rgba(8,14,26,.55)}
body>main .destination{border-color:var(--td-line-2);border-radius:14px;transition:border-color .25s,background .25s}
body>main .destination:hover{border-color:var(--td-line-hi);background:rgba(30,91,255,.08)}
body>main .status-message:not(:empty){display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;border:1px solid var(--td-line);background:rgba(8,14,26,.6);font-size:14px;animation:td-pop .4s var(--td-ease)}
body>main .status-message.success:not(:empty)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--td-green);box-shadow:0 0 10px var(--td-green)}
body>main .status-message.error:not(:empty){border-color:rgba(255,107,129,.4);background:rgba(58,23,38,.6)}
body>main dialog.panel{color:var(--td-text);background:linear-gradient(160deg,#16243d,#0b1324)}
body>main dialog::backdrop{background:rgba(3,6,12,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.td-shell body>main>section:not(.hero)>h2{font-size:22px;letter-spacing:-.4px;margin:28px 0 4px}

/* ================================================================ CONTROLS (both) */
/* primary: brand gradient with a sheen that sweeps across on hover */
.shell .btn.primary,body>main button.primary,body>main .button.primary,.entry .btn.primary{
  border:1px solid rgba(120,160,255,.55);color:#fff;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%) -160% 0/220% 100% no-repeat,linear-gradient(135deg,#2c5bff 0%,#1e5bff 45%,#0a8fd8 100%);
  box-shadow:0 10px 26px -10px rgba(30,91,255,.85),inset 0 1px 0 rgba(255,255,255,.25);
  transition:background-position .8s var(--td-ease),transform .2s,box-shadow .3s}
.shell .btn.primary:hover,body>main button.primary:hover,body>main .button.primary:hover,.entry .btn.primary:hover{background-position:160% 0,0 0;box-shadow:0 14px 34px -10px rgba(30,91,255,1),inset 0 1px 0 rgba(255,255,255,.3);transform:translateY(-1px)}
.shell .btn.primary:active,body>main button.primary:active{transform:translateY(1px)}
.shell .btn,body>main button:not(.primary):not(.danger):not([role]),body>main .button:not(.primary){transition:border-color .25s,background-color .25s,transform .2s,box-shadow .25s}
.shell .btn:not(.primary):not(.danger):hover,body>main button:not(.primary):not(.danger):not([aria-pressed]):hover{border-color:var(--td-line-hi);box-shadow:0 8px 22px -12px rgba(30,91,255,.7)}
.shell .btn.danger,body>main button.danger{transition:background .25s,border-color .25s}
.shell .btn.danger:hover,body>main button.danger:hover{background:rgba(255,107,129,.16);border-color:rgba(255,107,129,.6)}
/* inputs */
.shell input.txt,.shell select.sel,body>main input,body>main select,body>main textarea,.entry input.code{transition:border-color .25s,box-shadow .25s,background .25s}
.shell input.txt:focus,.shell select.sel:focus,body>main input:focus,body>main select:focus,body>main textarea:focus,.entry input.code:focus{border-color:rgba(91,133,255,.75);box-shadow:0 0 0 4px rgba(30,91,255,.18);outline:none}
/* switch */
.shell .switch{transition:background .3s,box-shadow .3s;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.shell .switch::after{transition:left .35s var(--td-ease),background .3s,transform .2s;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.shell .switch:active::after{transform:scaleX(1.18)}
.shell .switch[aria-checked=true]{background:linear-gradient(135deg,#0de593,#19c6d6);box-shadow:0 0 18px -2px rgba(13,229,147,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.shell .switch[aria-checked=true]::after{background:#fff}
/* segmented */
.shell .seg{background:rgba(6,11,20,.6);border-color:var(--td-line)}
.shell .seg button{transition:background .25s,color .25s,box-shadow .25s}
.shell .seg button:hover:not(.on){background:rgba(255,255,255,.05);color:#fff}
.shell .seg button.on{background:linear-gradient(135deg,#2c5bff,#1a7fe0);box-shadow:0 6px 16px -6px rgba(30,91,255,.9),inset 0 1px 0 rgba(255,255,255,.25)}
.shell .chip,.shell .ptab,.shell .pill{transition:border-color .25s,background .25s,transform .2s}
.shell .chip:hover,.shell .ptab:hover{border-color:var(--td-line-hi);transform:translateY(-1px)}
.shell .ptab.on{border-color:rgba(13,229,147,.6);background:linear-gradient(135deg,rgba(13,229,147,.16),rgba(30,91,255,.1));box-shadow:0 8px 20px -12px rgba(13,229,147,.7)}
.shell .row{border-top-color:rgba(130,165,225,.09);transition:background .25s}
.shell .card .row:hover{background:linear-gradient(90deg,transparent,rgba(255,255,255,.018),transparent)}
.shell .item{background:rgba(6,12,24,.45);border-color:var(--td-line);transition:border-color .25s,background .25s}
.shell .item:hover{border-color:var(--td-line-2)}
.shell .look.on,.shell .kid.on,.shell .sport.on{border-color:var(--td-green);box-shadow:0 0 0 3px rgba(13,229,147,.18),0 20px 40px -20px rgba(13,229,147,.5)}
.shell .msg.ok{background:rgba(14,58,43,.85);border:1px solid rgba(13,229,147,.35)}
.shell .msg.err{background:rgba(58,23,38,.85);border:1px solid rgba(255,107,129,.35)}
#toast{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:td-pop .35s var(--td-ease)}

/* ================================================================ PANEL details */
.shell .card{padding:26px;border-radius:22px}
.shell .card h2{font-size:18.5px}
.shell .qt{padding:16px;border-radius:18px}
.shell .np .tile{border-radius:18px}
.shell .np .tile.live{border-color:rgba(13,229,147,.38);background:radial-gradient(80% 90% at 100% 0%,rgba(13,229,147,.12),transparent 70%),var(--td-glass)}
.shell .np .tile.live .badge::before{animation:td-pulse 2.2s infinite}
.shell .np .tile.live::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--td-grad);background-size:200% 100%;animation:td-flow 3s linear infinite;opacity:.8}
@keyframes td-flow{to{background-position:200% 0}}
.shell .gate.locked .veil .box{border-color:rgba(245,179,66,.4);background:linear-gradient(160deg,rgba(32,38,56,.94),rgba(14,20,34,.96));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.shell .veil .star{font-size:26px;text-shadow:0 0 20px rgba(245,179,66,.8)}
.shell .tv{background:#03060c}

/* section entrance: td-ui.js sets .td-enter on #content when the section or the profile changes */
.shell .content.td-enter>*>*,.shell .content.td-enter>.gate>.gated>*{animation:td-rise .6s var(--td-ease) both}
.shell .content.td-enter>*>*:nth-child(2),.shell .content.td-enter>.gate>.gated>*:nth-child(2){animation-delay:.06s}
.shell .content.td-enter>*>*:nth-child(3),.shell .content.td-enter>.gate>.gated>*:nth-child(3){animation-delay:.12s}
.shell .content.td-enter>*>*:nth-child(4),.shell .content.td-enter>.gate>.gated>*:nth-child(4){animation-delay:.18s}
.shell .content.td-enter>*>*:nth-child(n+5),.shell .content.td-enter>.gate>.gated>*:nth-child(n+5){animation-delay:.24s}
/* the account pages rise in once, on load */
body>main>section,body>main>.status-message,body>main #hub>*,body>main .dash-grid>.tile,body>main #workspace>*,body>main #devices>article{animation:td-rise .65s var(--td-ease) both}
body>main>section:nth-of-type(2),body>main .dash-grid>.tile:nth-child(2),body>main #workspace>*:nth-child(2),body>main #devices>article:nth-child(2){animation-delay:.07s}
body>main>section:nth-of-type(3),body>main .dash-grid>.tile:nth-child(3),body>main #workspace>*:nth-child(3),body>main #devices>article:nth-child(3){animation-delay:.14s}
body>main .dash-grid>.tile:nth-child(4),body>main #workspace>*:nth-child(4),body>main #devices>article:nth-child(n+4){animation-delay:.21s}
@keyframes td-rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

/* ================================================================ sign-in screens (portal + panel) */
.entry .login,body>main .login{border-color:var(--td-line-2);border-radius:26px;box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 40px 90px -40px rgba(30,91,255,.5)}
.entry .login::after,body>main .login::after{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(74,123,255,.7),transparent 35%,transparent 65%,rgba(13,229,147,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
body>main .account-switch button[aria-pressed="true"]{background:linear-gradient(135deg,#2c5bff,#1a7fe0);box-shadow:0 8px 20px -8px rgba(30,91,255,.9)}
body>main .hero-art,.entry .shot{box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px var(--td-line-2)}

/* ---------------------------------------------------------------- family help messages (family-messages.js, 10-18) */
body>main .fm-list{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding:14px;margin:12px 0;border-radius:16px;background:rgba(5,9,17,.45);border:1px solid var(--td-line)}
body>main .fm-msg{align-self:flex-start;max-width:min(560px,86%);padding:10px 14px;border-radius:16px 16px 16px 6px;background:var(--td-glass-2);border:1px solid var(--td-line-2)}
body>main .fm-msg.mine{align-self:flex-end;border-radius:16px 16px 6px 16px;background:linear-gradient(135deg,rgba(30,91,255,.32),rgba(13,229,147,.14));border-color:var(--td-line-hi)}
body>main .fm-msg p{margin:4px 0 0;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--td-text)}
body>main .fm-who{font-size:12px;color:var(--td-muted)}
body>main .fm-msg.mine .fm-who{color:#a9c1ff}
body>main .fm-compose{display:grid;grid-template-columns:1fr minmax(120px,200px) auto;gap:10px;align-items:end;margin-top:10px}
body>main .fm-compose textarea{resize:vertical;min-height:52px;font:inherit}
body>main .fm-quick button,body>main .fm-threads button{padding:8px 14px;font-size:13px}
@media(max-width:700px){body>main .fm-compose{grid-template-columns:1fr}body>main .fm-list{max-height:360px}}

/* ================================================================ calm */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
  .shell *,.shell *::before,.shell *::after,body>main *,body>main *::before,body>main *::after,.entry *,.td-skel,#toast{animation:none!important;transition:none!important}
}