/* TikVault design system.
 *
 * One stylesheet for every customer-facing page, logged out and logged in.
 * It replaces site.css (now admin/LIVE only), library.css, ui.css and
 * app-pages.css, so nothing loaded after it can out-rank a rule by source
 * order. Nothing is scoped to a body class: a component looks the same on
 * every page.
 *
 * Direction: a compact, dark, application-first utility. The product widget
 * is the hero, surfaces are slightly lighter than the page with a hairline
 * border, most sections have no box at all, media leads, and controls are
 * small. The neutrals follow permaloop.io's measured surface hierarchy;
 * primary actions are light, and TikVault violet marks focus, links and
 * small state details only. Green, amber and red carry status.
 *
 * Contents
 *   1  Tokens
 *   2  Base
 *   3  Shell: side panel, profile menu, phone top bar and drawer, page,
 *      footer
 *   4  Primitives: surface, card, divider, button, icon button, segmented
 *      control, input, search, select, menu, badge, avatar, progress,
 *      skeleton, spinner, notice, toast, modal, bottom sheet, toggle
 *   5  Product components: action panel, results, creator card/header,
 *      media card/grid, viewer, filter bar, empty/error states, pricing,
 *      storage usage, settings sections, features, FAQ, prose, auth
 *   6  Page bindings for markup built in page scripts
 *   7  Responsive
 */

/* 1 ─ Tokens ───────────────────────────────────────────────────────────── */
/* The neutral system is sampled from permaloop.io (desktop, 2026-09-27) and
   reproduces its surface hierarchy: a flat #181818 page, cards one step up,
   the main composer and inputs two steps up, and selected controls three.
   Borders sit only slightly above the surface they wrap. TikVault's own
   violet is the accent and is used sparingly: focus, links, progress, the
   headline highlight and small status marks. */
:root{
  --bg-page:#181818;
  --bg-surface-1:#1d1d1e;
  --bg-surface-2:#232325;
  --bg-input:#232325;
  --bg-hover:#29292b;
  --bg-selected:#303031;
  --border-default:#2d2d2f;
  --border-panel:#2f2f31;
  --border-strong:#353537;
  --border-hover:#3c3c3e;
  --border-rail:#2a2a2b;
  --text-primary:#f6f5f4;
  --text-secondary:#a4a5a7;
  --text-muted:#8b8c8e;
  --accent:#A5A6FF;
  --accent-hover:#BDBEFF;

  /* App pages (Monitor, pricing), measured from permaloop.io on 2026-09-27:
     cards and fields sit on #232325, card borders on #2e2e30, field borders
     one step brighter, and segmented tabs on their own #272728 track. */
  --bg-card:#232325;
  --border-card:#2e2e30;
  --border-field:#353537;
  --bg-seg:#272728;
  --bg-seg-on:#3c3c3c;
  --radius-card:20px;
  --radius-field:16px;
  --radius-control:12px;

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:40px;

  --control-height-sm:36px;
  --control-height-md:40px;
  --control-height-lg:48px;

  --font-size-display:52px;
  --font-size-page:22px;
  --font-size-section:17px;
  --font-size-body:14px;
  --font-size-input:15px;
  --font-size-control:13px;
  --font-size-meta:12px;

  --rail-w:80px;
  --composer-w:680px;
  --page-max:1200px;
  --gutter:24px;
  --header-h:56px;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Short names the components below use, mapped onto the system above. */
  --bg:var(--bg-page);
  --bg-sunken:var(--bg-input);
  --surface:var(--bg-surface-1);
  --surface-2:var(--bg-surface-2);
  --surface-3:var(--bg-selected);
  --hover:var(--bg-hover);
  --line:var(--border-default);
  --line-2:var(--border-strong);
  --line-3:var(--border-hover);
  --text:var(--text-primary);
  --text-2:var(--text-secondary);
  --text-3:var(--text-muted);
  --accent-2:var(--accent-hover);
  --accent-soft:rgba(165,166,255,.12);
  --accent-line:rgba(165,166,255,.42);
  --on-light:#181818;
  --ok:#34D399;
  --warn:#FBBF24;
  --err:#F87171;
  /* Premium, not a status: a muted gold kept apart from --warn so an upgrade
     never reads as a warning. */
  --gold:#E2BC6A;
  --gold-strong:#F0CD82;
  --gold-soft:rgba(226,188,106,.08);
  --gold-soft-hover:rgba(226,188,106,.15);
  --gold-line:rgba(226,188,106,.28);
  --gold-line-hover:rgba(226,188,106,.55);
  --scrim:rgba(8,8,8,.7);
  --r-xs:6px;
  --r-sm:var(--radius-sm);
  --r-md:10px;
  --r-lg:var(--radius-md);
  --r-xl:var(--radius-lg);
  --shadow-panel:none;
  --shadow-pop:0 12px 32px -8px rgba(0,0,0,.55);
  --focus:0 0 0 3px rgba(165,166,255,.22);
  --h-sm:32px;
  --h-md:var(--control-height-md);
  --h-lg:var(--control-height-lg);

  /* Names older page scripts still read. */
  --background:var(--bg-page);
  --border:var(--border-default);
  --surface-raised:var(--bg-surface-2);
}

/* 2 ─ Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none!important;}
/* The scrollbar's space is always reserved, so a short page (Contact) and a
   long one (Vault) lay out at the same width and nothing shifts sideways
   when you move between them on systems with classic scrollbars. */
html{color-scheme:dark;background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);scrollbar-gutter:stable;}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;
  font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;}
/* Every page is main then footer: the page fills the window, so on a short
   page the footer sits at the bottom instead of halfway up the screen. */
body{display:flex;flex-direction:column;}
body>main{flex:1 0 auto;}
body>.tv-footer{flex:none;}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.015em;color:var(--text);}
p{margin:0;}
a{color:inherit;}
img,video{max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}
::selection{background:var(--accent);color:var(--on-light);}
::placeholder{color:var(--text-3);opacity:1;}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
*{scrollbar-color:#34343b transparent;scrollbar-width:thin;}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.skip-link{position:fixed;left:12px;top:10px;z-index:1000;padding:8px 12px;border:1px solid var(--accent-line);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px;font-weight:600;text-decoration:none;transform:translateY(-200%);transition:transform .15s;}
.skip-link:focus{transform:none;}
body.modal-open{overflow:hidden;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;}
.muted{color:var(--text-2);}
.app-icon{width:16px;height:16px;flex:none;}
@keyframes tvSpin{to{transform:rotate(360deg);}}
@keyframes tvPulse{0%,100%{opacity:.45}50%{opacity:.8}}
@keyframes tvRise{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* 3 ─ Shell ────────────────────────────────────────────────────────────── */
/* Icon rail, measured from permaloop.io: 80px wide, the page colour with a
   hairline right border, 48px rounded-square buttons on a 54px pitch, 20px
   icons and the selected item on --bg-selected. The logo sits alone on top,
   the four product places under it, and the account (or Log in) at the
   bottom. Labels appear on hover. The same markup becomes a labelled drawer
   below 1024px. */
.tv-header{position:fixed;top:0;bottom:0;left:0;z-index:70;display:flex;width:var(--rail-w);
  background:var(--bg-page);border-right:1px solid var(--border-rail);}
.tv-header-row{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:16px 0 14px;}
/* The logo gets the rail's own 48px cell, centred on the same axis as the
   buttons under it, then a clear gap before the navigation starts. */
.tv-header-brand{display:flex;align-items:center;justify-content:center;width:100%;height:48px;margin:0 0 24px;}
.tv-brand{display:inline-flex;align-items:center;gap:10px;flex:none;color:var(--text);font-size:15px;font-weight:650;letter-spacing:-.02em;text-decoration:none;border-radius:var(--radius-sm);}
/* Only the height is set: the file keeps its own proportions at any size. */
.tv-logo{display:block;flex:none;width:28px;height:28px;object-fit:contain;}
.tv-header .tv-brand{display:grid;place-items:center;width:var(--control-height-lg);height:var(--control-height-lg);}
.tv-header .tv-brand .tv-logo{width:34px;height:34px;}
.tv-header .tv-brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.tv-header .tv-nav-close{display:none;}

.tv-nav a,.tv-rail-btn{position:relative;display:grid;place-items:center;width:var(--control-height-lg);height:var(--control-height-lg);flex:none;
  border-radius:var(--radius-md);color:var(--text-secondary);text-decoration:none;transition:background-color .15s,color .15s;-webkit-tap-highlight-color:transparent;}
.tv-nav a .app-icon,.tv-rail-btn .app-icon{width:20px;height:20px;}
.tv-nav a:hover,.tv-rail-btn:hover{background:var(--bg-hover);color:var(--text-primary);}
.tv-nav a[aria-current="page"]{background:var(--bg-selected);color:var(--text-primary);}
.tv-nav{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
.tv-rail-label{position:absolute;left:calc(100% + 12px);top:50%;z-index:5;padding:5px 9px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--bg-selected);color:var(--text-primary);font-size:12px;font-weight:500;line-height:16px;white-space:nowrap;
  opacity:0;pointer-events:none;transform:translate(-4px,-50%);transition:opacity .12s,transform .12s;}
/* The hover tooltip belongs to the desktop rail only. In the phone drawer
   the label is plain text, and this nudge would lift it half a line. */
@media (min-width:1024px){
  .tv-nav a:hover .tv-rail-label,.tv-rail-btn:hover .tv-rail-label,
  .tv-nav a:focus-visible .tv-rail-label,.tv-rail-btn:focus-visible .tv-rail-label{opacity:1;transform:translate(0,-50%);}
}
/* A tap never leaves a ring or a tap flash anywhere in the side panel or
   the phone top bar, including in browsers without :focus-visible.
   Keyboard focus in the side panel is a quiet light ring inside the row,
   not the violet accent. */
.tv-header,.tv-topbar{-webkit-tap-highlight-color:transparent;}
.tv-header:focus,.tv-nav a:focus,.tv-rail-btn:focus,.tv-account-btn:focus,.tv-nav-close:focus,.tv-menu-btn:focus{outline:none;}
.tv-nav a:focus-visible,.tv-rail-btn:focus-visible,.tv-account-btn:focus-visible,.tv-nav-close:focus-visible,.tv-menu-btn:focus-visible{outline:2px solid rgba(246,245,244,.5);outline-offset:-2px;}

.tv-header-end{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:auto;}
.tv-header-end[data-state="pending"]{visibility:hidden;}
/* The drawer has room for "Create free account" beside Log in; the icon
   rail keeps the single Log in button. */
.tv-header-end .tv-rail-signup{display:none;}
.tv-account{position:relative;}
.tv-account-btn{display:grid;place-items:center;width:var(--control-height-lg);height:var(--control-height-lg);padding:0;border:0;border-radius:var(--radius-md);background:none;color:var(--text);text-align:left;transition:background-color .15s;}
.tv-account-btn:hover,.tv-account-btn[aria-expanded="true"]{background:var(--bg-hover);}
.tv-avatar-btn{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-selected);color:var(--text);font-size:13px;font-weight:600;}
.tv-account-who,.tv-account-chevron{display:none;}
.tv-account-who strong{font-size:13px;font-weight:600;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tv-account-who span{font-size:12px;line-height:16px;color:var(--text-3);}
/* A small account card, not a second navigation: who is signed in, the way
   to Settings and Log out. */
.tv-menu.tv-account-menu{left:calc(100% + 10px);bottom:0;top:auto;right:auto;min-width:248px;}
.tv-account-head{display:flex;align-items:center;gap:10px;padding:8px 8px 10px;border-bottom:1px solid var(--line);margin:0 0 4px;}
.tv-account-head>div{display:flex;flex-direction:column;gap:1px;min-width:0;}
.tv-account-head strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tv-account-head span:not(.tv-avatar-btn){font-size:12px;color:var(--text-3);}
/* Upgrade Plan: one rail button above the account, set apart by its gold
   crown alone -- no tint or frame, and hover brightens the crown rather than
   drawing a box. Hidden on the top plan (see shell.js). */
.tv-rail-btn.tv-upgrade{color:var(--gold);background:none;transition:color .15s;}
.tv-rail-btn.tv-upgrade:hover{color:var(--gold-strong);background:none;}
.tv-rail-btn.tv-upgrade:focus-visible{outline-color:var(--gold-line-hover);}

/* Top bar and drawer: phones and tablets only. */
.tv-topbar,.tv-nav-scrim{display:none;}
@media (min-width:1024px){
  body.has-side-nav{padding-left:var(--rail-w);}
  body.has-side-nav .tv-toast-stack,body.has-side-nav .app-toast-stack{left:calc(50% + var(--rail-w) / 2);}
}
@media (max-width:1023px){
  .tv-topbar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:6px;height:var(--header-h);padding:0 var(--gutter) 0 calc(var(--gutter) - 8px);
    background:var(--bg-page);border-bottom:1px solid transparent;transition:border-color .2s;}
  .tv-topbar.is-scrolled{border-bottom-color:var(--border-rail);}
  .tv-topbar-end{display:flex;align-items:center;margin-left:auto;}
  .tv-menu-btn{width:40px;height:40px;}
  .tv-menu-btn .app-icon{width:20px;height:20px;}
  .tv-header{width:min(288px,86vw);transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:var(--shadow-pop);}
  body.nav-open .tv-header{transform:none;visibility:visible;transition:transform .22s ease;}
  .tv-header-row{align-items:stretch;padding:10px 10px calc(14px + env(safe-area-inset-bottom));overflow-y:auto;}
  .tv-header-brand{justify-content:space-between;height:44px;padding:0 4px 0 10px;margin:0 0 10px;}
  .tv-header .tv-brand{display:inline-flex;width:auto;height:auto;}
  .tv-header .tv-brand .tv-logo{width:28px;height:28px;}
  .tv-header .tv-brand-name{position:static;width:auto;height:auto;overflow:visible;clip-path:none;}
  .tv-header .tv-nav-close{display:inline-grid;}
  .tv-nav a,.tv-rail-btn{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:auto;height:44px;padding:0 12px;font-size:14.5px;font-weight:500;}
  .tv-header-end .tv-rail-signup{display:inline-flex;margin-top:6px;}
  .tv-nav{align-items:stretch;gap:2px;}
  .tv-rail-label{position:static;padding:0;border:0;background:none;color:inherit;font-size:inherit;line-height:inherit;opacity:1;transform:none;transition:none;}
  .tv-nav a:active{background:var(--bg-selected);color:var(--text-primary);}
  .tv-header-end{align-items:stretch;gap:2px;padding-top:12px;}
  .tv-rail-btn.tv-upgrade{height:40px;margin-bottom:4px;font-size:14px;}
  .tv-rail-btn.tv-upgrade:active{background:none;color:var(--gold-strong);}
  .tv-account-btn{display:flex;align-items:center;gap:10px;width:100%;height:auto;min-height:52px;padding:8px 10px;}
  .tv-account-who{display:flex;flex-direction:column;min-width:0;flex:1;}
  .tv-account-chevron{display:block;color:var(--text-3);}
  .tv-menu.tv-account-menu{left:0;right:0;bottom:calc(100% + 6px);min-width:0;}
  .tv-nav-scrim{display:block;position:fixed;inset:0;z-index:69;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s;}
  body.nav-open .tv-nav-scrim{opacity:1;pointer-events:auto;}
  body.nav-open{overflow:hidden;}
}

/* Page frame. */
.tv-page{width:100%;max-width:var(--page-max);margin:0 auto;padding:32px var(--gutter) 72px;}
.tv-page--narrow{max-width:760px;}
.tv-page--mid{max-width:960px;}
.tv-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 24px;}
.tv-page-head h1{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.03em;}
.tv-page-head p{margin:4px 0 0;color:var(--text-2);font-size:14px;line-height:21px;}
.tv-page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tv-page-head-main{display:flex;align-items:center;gap:16px;min-width:0;}
.tv-page-head-copy{min-width:0;}
.tv-page-head .tv-creator-handle{margin:2px 0 0;color:var(--text-2);font-size:13px;}
.tv-creator-status.is-warning{color:var(--warn);}
.tv-page-head.is-creator{align-items:center;margin-bottom:24px;}
.tv-page-head.is-creator h1{overflow-wrap:anywhere;}
.tv-page-head.is-creator #storySubtitle,.tv-page-head.is-creator #vaultCreatorMeta{color:var(--text-3);font-size:12.5px;}
.tv-section{margin:0;padding:40px 0;}
.tv-section+.tv-section{border-top:1px solid var(--line);}
.tv-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;}
.tv-section-head h2{font-size:17px;line-height:24px;}
.tv-section-head p,.tv-section-head span{color:var(--text-2);font-size:13px;}
.tv-section-head a{color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;}
.tv-section-head a:hover{color:var(--text);}
.tv-stack{display:flex;flex-direction:column;gap:24px;}
.tv-section-note{margin:18px 0 0;color:var(--text-2);font-size:13px;line-height:20px;}
.tv-section-note a{color:var(--accent);text-decoration:none;}
.tv-section-note a:hover{text-decoration:underline;}
.tv-hero+.tv-section{margin-top:40px;}
.tv-eyebrow{margin:0 0 8px;color:var(--text-3);font-size:12px;font-weight:500;}

/* Footer: a compact utility bar. Brand left, support and legal links right,
   the disclaimer on one quiet line underneath. No product links or headings. */
.tv-footer{border-top:1px solid var(--line);margin-top:24px;}
.tv-footer-row{max-width:var(--page-max);margin:0 auto;padding:16px var(--gutter) 18px;}
.tv-footer-top{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;}
.tv-footer .tv-brand{font-size:14px;gap:8px;}
.tv-footer .tv-brand img{width:20px;height:20px;}
.tv-footer-note{margin:8px 0 0;color:var(--text-3);font-size:12px;line-height:16px;}
.tv-footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;}
.tv-footer-links a{color:var(--text-3);font-size:13px;line-height:20px;text-decoration:none;transition:color .15s;}
.tv-footer-links a+a::before{content:"·";display:inline-block;padding:0 9px;color:var(--text-3);pointer-events:none;}
.tv-footer-links a:hover,.tv-footer-links a:focus-visible{color:var(--text);}

/* 4 ─ Primitives ───────────────────────────────────────────────────────── */
/* Surface: the elevated panel. Used for the homepage action, forms, plans,
   compact account areas and modal content. */
.tv-surface{position:relative;min-width:0;padding:24px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-panel);}
.tv-surface--flat{box-shadow:none;}
.tv-surface--tight{padding:14px 16px;}
/* Card: an actionable item. Restrained hover: the border brightens, nothing moves. */
.tv-card{position:relative;min-width:0;padding:16px;border:1px solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text);transition:border-color .15s,background-color .15s;}
.tv-card--interactive:hover,a.tv-card:hover{border-color:var(--border-hover);}
.tv-card--accent{border-color:var(--accent-line);}
.tv-card--danger{border-color:rgba(248,113,113,.28);}
.tv-card--compact{padding:12px 14px;}
.tv-divider,hr.tv-divider{height:0;margin:16px 0;border:0;border-top:1px solid var(--line);}

/* Buttons: pills, as Permaloop's Save. Primary is light, secondary sits on
   --bg-surface-2 with a hairline, ghost is text. Three sizes; nothing is
   large by default. */
.tv-btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-danger,.btn-danger-outline{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h-md);min-height:var(--h-md);padding:0 14px;
  border:1px solid transparent;border-radius:var(--radius-pill);font-size:13.5px;font-weight:600;line-height:1;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s,opacity .15s;-webkit-tap-highlight-color:transparent;}
.tv-btn .app-icon,.btn-primary .app-icon,.btn-secondary .app-icon,.btn-ghost .app-icon,.btn-danger .app-icon,.btn-danger-outline .app-icon{width:15px;height:15px;}
.tv-btn--primary,.btn-primary{background:var(--text);color:var(--on-light);}
.tv-btn--primary:hover,.btn-primary:hover{background:#fff;}
.tv-btn--secondary,.btn-secondary{background:var(--bg-selected);border-color:transparent;color:var(--text);}
.tv-btn--secondary:hover,.btn-secondary:hover{background:var(--border-hover);}
.tv-btn--ghost,.btn-ghost{background:transparent;color:var(--text-2);}
.tv-btn--ghost:hover,.btn-ghost:hover{background:var(--hover);color:var(--text);}
.tv-btn--accent{background:var(--accent);color:var(--on-light);}
.tv-btn--accent:hover{background:var(--accent-2);}
.btn-danger,.tv-btn--danger{background:#dc4b4b;color:#fff;}
.btn-danger:hover,.tv-btn--danger:hover{background:#e25a5a;}
.btn-danger-outline{background:transparent;border-color:rgba(248,113,113,.35);color:var(--err);}
.btn-danger-outline:hover{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.55);}
.tv-btn--sm{height:var(--h-sm);min-height:var(--h-sm);padding:0 12px;font-size:13px;}
.tv-btn--lg{height:var(--h-lg);min-height:var(--h-lg);padding:0 18px;font-size:14px;}
.tv-btn--block{width:100%;}
.tv-btn:disabled,.btn-primary:disabled,.btn-secondary:disabled,.btn-ghost:disabled,.btn-danger:disabled,.btn-danger-outline:disabled,
.tv-btn[aria-disabled="true"],.btn-primary[aria-disabled="true"]{opacity:.45;cursor:not-allowed;}
.tv-link,.ap-link{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;color:var(--accent);font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;}
.tv-link:hover,.ap-link:hover{color:var(--accent-2);}
.tv-link .app-icon,.ap-link .app-icon{width:14px;height:14px;}
.ap-link.is-muted{color:var(--text-2);}
.ap-link.is-muted:hover{color:var(--text);}
.tv-quiet-link{display:inline-flex;align-items:center;gap:5px;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;}
.tv-quiet-link:hover{color:var(--text);}
.tv-quiet-link .app-icon{width:14px;height:14px;}

/* Icon button: borderless until hovered. */
.tv-icon-btn,.lib-ib{display:inline-grid;place-items:center;width:30px;height:30px;flex:none;padding:0;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--text-2);cursor:pointer;
  transition:color .15s,background-color .15s,border-color .15s;}
.tv-icon-btn:hover,.lib-ib:hover{color:var(--text);background:var(--hover);}
.tv-icon-btn .app-icon,.lib-ib .app-icon{width:16px;height:16px;}
.tv-icon-btn:disabled,.lib-ib:disabled{opacity:.4;cursor:not-allowed;}
.tv-icon-btn--outline{border-color:var(--line-2);background:var(--surface-2);color:var(--text);}
.lib-ib[aria-pressed="true"]{color:var(--accent);}
.lib-ib.is-saved{color:var(--ok);}
@media (pointer:coarse){.tv-icon-btn,.lib-ib{width:38px;height:38px;}}

/* Segmented control: one track, one raised selected segment. The same
   component drives the homepage modes, Stories/Creators, media filters and
   plan tabs. Works with buttons (aria-pressed / aria-selected) and links
   (aria-current). */
.tv-seg,.lib-tabs{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:4px;border:0;border-radius:var(--radius-md);background:var(--bg-seg);overflow-x:auto;scrollbar-width:none;}
.tv-seg::-webkit-scrollbar,.lib-tabs::-webkit-scrollbar{display:none;}
.tv-seg>button,.tv-seg>a,.lib-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 18px;border:0;border-radius:10px;background:transparent;
  color:var(--text-2);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;cursor:pointer;transition:color .15s,background-color .15s,border-color .15s;}
.tv-seg>button:hover,.tv-seg>a:hover,.lib-tab:hover{color:var(--text);}
.tv-seg>[aria-pressed="true"],.tv-seg>[aria-selected="true"],.tv-seg>[aria-current="page"],.lib-tab[aria-pressed="true"],.lib-tab[aria-selected="true"]{
  color:var(--text);background:var(--bg-seg-on);}
.tv-seg .app-icon,.lib-tab .app-icon{width:15px;height:15px;}
.tv-seg--lg>button,.tv-seg--lg>a{height:40px;padding:0 20px;}
.tv-seg--block{display:flex;width:100%;}
.tv-seg--block>button,.tv-seg--block>a{flex:1 1 0;}
.lib-tab .lib-count{margin-left:2px;color:var(--text-3);font-variant-numeric:tabular-nums;}
.lib-tab[aria-pressed="true"] .lib-count{color:var(--text-2);}

/* Inputs. One height per size, a surface that matches the panel around it,
   and a clear violet focus ring. */
.tv-input,.form-field input,.form-field select,.form-field textarea,.tv-textarea{width:100%;min-width:0;height:var(--h-lg);padding:0 14px;border:1px solid var(--border-field);border-radius:var(--radius-control);
  background:var(--bg-sunken);color:var(--text);font-size:14px;transition:border-color .15s,box-shadow .15s,background-color .15s;}
.tv-textarea,.form-field textarea{height:auto;min-height:92px;padding:10px 12px;resize:vertical;line-height:1.5;}
.tv-input:hover,.form-field input:hover,.form-field textarea:hover{border-color:var(--line-3);}
.tv-input:focus,.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.tv-textarea:focus{outline:none;border-color:var(--border-hover);box-shadow:none;}
:is(.tv-settings-section,.auth-form-panel,.tv-modal,.confirm-modal,.delete-modal) :is(.tv-input,.form-field input,.form-field textarea,.auth-field input:not([type="checkbox"])){background:var(--bg-page);}
.tv-input[aria-invalid="true"],.form-field input[aria-invalid="true"]{border-color:rgba(248,113,113,.55);}
.form-field{display:flex;flex-direction:column;gap:6px;margin:0;}
.form-field label,.tv-label{font-size:13px;font-weight:500;color:var(--text);}
.tv-hint{margin:0;color:var(--text-3);font-size:12px;line-height:17px;}
.form-error,.tv-error{margin:0;color:var(--err);font-size:13px;}

/* Field: an input with its icon and action inside one box. The action sits
   in the field on desktop and stacks under it on phones (see 7). */
.tv-field{display:flex;align-items:center;gap:6px;min-width:0;height:52px;padding:0 6px 0 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg-sunken);
  transition:border-color .15s,box-shadow .15s;}
.tv-field:hover{border-color:var(--line-3);}
.tv-field:focus-within{border-color:var(--accent-line);box-shadow:var(--focus);}
.tv-field.is-loading{border-color:var(--accent-line);}
.tv-field>.app-icon,.tv-field-icon{display:grid;place-items:center;flex:none;color:var(--text-3);}
.tv-field>.app-icon,.tv-field-icon .app-icon{width:17px;height:17px;}
.tv-field input{flex:1 1 auto;min-width:0;height:100%;padding:0 4px;border:0;outline:none;background:transparent;color:var(--text);font-size:15px;}
.tv-field input:focus-visible{outline:none;}
.tv-field .btn-primary,.tv-field .tv-btn{height:40px;min-height:40px;flex:none;padding:0 16px;}
.tv-field-ghost{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 9px;border:0;border-radius:var(--r-xs);background:none;color:var(--text-2);font-size:13px;font-weight:500;flex:none;}
.tv-field-ghost:hover{color:var(--text);background:var(--hover);}
.tv-field--sm{height:var(--h-lg);border-radius:var(--r-sm);}
.tv-field--sm .btn-primary,.tv-field--sm .tv-btn{height:32px;min-height:32px;padding:0 12px;}
.ap-hint,.tv-field-hint{min-height:17px;margin:8px 2px 0;color:var(--text-3);font-size:12.5px;line-height:17px;}
.ap-hint:empty{display:none;}
.ap-hint.is-error,.tv-field-hint.is-error{color:var(--err);}
.ap-hint.is-ready,.tv-field-hint.is-ready{color:var(--text-2);}
.tv-spinner{display:inline-block;width:16px;height:16px;flex:none;border-radius:999px;border:2px solid var(--line-2);border-top-color:var(--accent);animation:tvSpin .8s linear infinite;}

/* Search: a small quiet field for filtering lists. */
.tv-search,.lib-search{position:relative;display:flex;align-items:center;width:min(260px,100%);}
.tv-search .app-icon,.lib-search .app-icon{position:absolute;top:50%;transform:translateY(-50%);left:14px;width:16px;height:16px;color:var(--text-3);pointer-events:none;}
.tv-search input,.lib-search input{width:100%;min-width:0;height:44px;padding:0 14px 0 40px;border:1px solid var(--border-field);border-radius:var(--radius-control);background:var(--bg-card);color:var(--text);font-size:14px;
  transition:border-color .15s,box-shadow .15s;}
.tv-search input:hover,.lib-search input:hover{border-color:var(--border-hover);}
.tv-search input:focus,.lib-search input:focus{outline:none;border-color:var(--border-hover);box-shadow:none;}
.tv-search--lg input{height:var(--h-lg);font-size:14px;}

/* Select styled as a compact dropdown button ("Newest ▾"). */
.tv-select{position:relative;display:inline-flex;align-items:center;}
.tv-select select{appearance:none;-webkit-appearance:none;height:44px;padding:0 34px 0 14px;border:1px solid var(--border-field);border-radius:var(--radius-control);background:var(--bg-card);color:var(--text-2);
  font-size:14px;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s;}
.tv-select::after{content:"";position:absolute;right:15px;top:50%;width:6px;height:6px;margin-top:-5px;pointer-events:none;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg);}
.tv-select select:hover{border-color:var(--border-hover);color:var(--text);}
.tv-select select:focus-visible{outline:none;border-color:var(--accent-line);box-shadow:var(--focus);}

/* Menu: dropdowns, the profile menu and item context menus. */
.tv-menu,.lib-kebab-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:200px;padding:5px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--shadow-pop);
  display:flex;flex-direction:column;gap:1px;animation:tvRise .12s ease;}
.tv-menu a,.tv-menu button,.lib-kebab-menu button,.lib-kebab-menu a{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:var(--r-xs);background:none;color:var(--text);
  font-size:13px;font-weight:450;text-align:left;text-decoration:none;cursor:pointer;}
.tv-menu a:hover,.tv-menu button:hover,.lib-kebab-menu button:hover,.lib-kebab-menu a:hover{background:var(--hover);}
.tv-menu .app-icon,.lib-kebab-menu .app-icon{width:15px;height:15px;color:var(--text-2);}
.tv-menu hr,.lib-kebab-menu hr{margin:4px 2px;border:0;border-top:1px solid var(--line);}
.tv-menu .is-destructive,.lib-kebab-menu .is-destructive{color:var(--err);}
details:not([open])>.lib-kebab-menu,details:not([open])>.tv-menu{display:none;}
.tv-menu .is-destructive .app-icon{color:var(--err);}
.lib-kebab,.tv-dropdown{position:relative;}
.lib-kebab>summary,.tv-dropdown>summary{list-style:none;cursor:pointer;}
.lib-kebab>summary::-webkit-details-marker,.tv-dropdown>summary::-webkit-details-marker{display:none;}
.lib-kebab>summary{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);color:var(--text-2);}
.lib-kebab>summary:hover,.lib-kebab[open]>summary{color:var(--text);background:var(--hover);}
.tv-dropdown>summary{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 14px;border:1px solid var(--border-field);border-radius:var(--radius-control);background:var(--bg-card);color:var(--text-2);font-size:14px;font-weight:500;}

/* Badge: small, inline, a word or a dot. */
.tv-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-2);color:var(--text-2);
  font-size:11.5px;font-weight:500;line-height:1;white-space:nowrap;}
.tv-badge .app-icon{width:12px;height:12px;}
.tv-badge--accent,.tv-badge.tv-badge--accent{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent);}
.tv-badge--success,.tv-badge.tv-badge--success{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.08);color:var(--ok);}
.tv-badge--warning,.tv-badge.tv-badge--warning{border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.08);color:var(--warn);}
.tv-badge--danger,.tv-badge.tv-badge--danger{border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.08);color:var(--err);}
.tv-badge-dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none;}
.tv-dot{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--ok);flex:none;}
.tv-dot.is-warning{background:var(--warn);}
.tv-dot.is-off{background:var(--text-3);}

/* Avatar. */
.tv-avatar,.ap-avatar{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:none;overflow:hidden;border-radius:999px;background:var(--surface-3);color:var(--text-2);font-size:15px;font-weight:600;}
.tv-avatar img,.ap-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tv-avatar--sm{width:28px;height:28px;font-size:12px;}
.tv-avatar--lg{width:64px;height:64px;font-size:22px;}
.tv-avatar--xl{width:84px;height:84px;font-size:28px;}

/* Icon tile: a small square that frames a stroke icon. */
.tv-icon-tile{--tile:32px;display:inline-grid;place-items:center;flex:none;width:var(--tile);height:var(--tile);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);}
.tv-icon-tile .app-icon{width:16px;height:16px;}
.tv-icon-tile--sm{--tile:26px;border-radius:7px;}
.tv-icon-tile--sm .app-icon{width:14px;height:14px;}
.tv-icon-tile--lg{--tile:44px;border-radius:var(--r-md);}
.tv-icon-tile--lg .app-icon{width:20px;height:20px;}
.tv-icon-tile--accent{color:var(--accent);}
.tv-icon-tile--success{color:var(--ok);}
.tv-icon-tile--warning{color:var(--warn);}
.tv-icon-tile--danger{color:var(--err);border-color:rgba(248,113,113,.28);}
.tv-icon-tile--muted{color:var(--text-3);}

/* Progress. */
.tv-progress{position:relative;height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.tv-progress>i{display:block;height:100%;border-radius:inherit;background:var(--accent);}
.tv-progress.is-warning>i{background:var(--warn);}
.tv-progress.is-full>i{background:var(--err);}

/* Skeleton. */
.skeleton,.tv-skeleton,.skeleton-line,.skeleton-value,.lib-skeleton-tile{background:var(--surface-2);border-radius:var(--r-xs);animation:tvPulse 1.6s ease-in-out infinite;}
.skeleton-line{display:block;height:10px;}
.skeleton-line-title{width:140px;}
.skeleton-line-copy{width:min(240px,80%);margin-top:6px;}
.skeleton-value{display:inline-block;width:60px;height:22px;}

/* Notice: one compact line for a state the reader should act on. */
.tv-notice{display:flex;align-items:center;gap:12px;margin:0;padding:12px 16px;border:1px solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-card);}
.tv-notice-text{flex:1 1 auto;min-width:0;color:var(--text-2);font-size:13px;line-height:19px;}
.tv-notice-text strong{color:var(--text);font-weight:600;}
.tv-notice-actions{display:flex;align-items:center;gap:14px;flex:none;}
.tv-notice--warning{border-color:rgba(251,191,36,.25);}
.tv-notice--warning>.tv-icon-tile{color:var(--warn);}
.tv-notice.tv-card{padding:10px 12px;}

/* Toast. */
.tv-toast-stack,.app-toast-stack{position:fixed;left:50%;bottom:20px;z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(420px,calc(100% - 32px));transform:translateX(-50%);pointer-events:none;}
.tv-toast,.app-toast{max-width:100%;padding:10px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-3);color:var(--text);font-size:13px;line-height:19px;box-shadow:var(--shadow-pop);pointer-events:auto;animation:tvRise .15s ease;}
.app-toast.success{border-color:rgba(52,211,153,.35);}
.app-toast.error{border-color:rgba(248,113,113,.4);}

/* Modal and bottom sheet share one backdrop and one panel. */
.tv-backdrop,.confirm-modal-backdrop,.delete-modal-backdrop,.plan-modal-backdrop,.story-watch-backdrop,.story-lookup-viewer{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--scrim);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:tvRise .12s ease;}
.tv-modal,.confirm-modal,.delete-modal,.plan-modal{position:relative;width:min(440px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:1px solid var(--border-field);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-pop);}
.tv-modal h2,.confirm-modal h2,.delete-modal h2,.plan-modal h2{font-size:17px;line-height:24px;margin:0 0 6px;}
.confirm-modal p,.delete-modal>p:not(.eyebrow){margin:0 0 18px;color:var(--text-2);font-size:13.5px;line-height:20px;white-space:pre-line;}
.confirm-modal.danger{border-color:rgba(248,113,113,.3);}
.confirm-modal-actions,.delete-modal-actions,.tv-modal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
.plan-modal-close,.tv-modal-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);font-size:0;}
.plan-modal-close:hover,.tv-modal-close:hover{background:var(--hover);color:var(--text);}
.plan-modal-close .app-icon,.tv-modal-close .app-icon{width:16px;height:16px;}
.delete-modal .eyebrow{margin:0 0 6px;color:var(--err);font-size:12px;font-weight:500;}
.delete-account-form{display:flex;flex-direction:column;gap:14px;}
@media (max-width:560px){
  .tv-backdrop,.confirm-modal-backdrop,.delete-modal-backdrop,.plan-modal-backdrop{align-items:flex-end;padding:0;}
  .tv-modal,.confirm-modal,.delete-modal,.plan-modal{width:100%;max-height:92dvh;border-radius:var(--r-xl) var(--r-xl) 0 0;border-width:1px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));}
  .confirm-modal-actions,.delete-modal-actions,.tv-modal-actions{flex-direction:column-reverse;}
  .confirm-modal-actions>*,.delete-modal-actions>*,.tv-modal-actions>*{width:100%;height:var(--h-lg);}
}

/* Toggle switch. */
.toggle-switch{position:relative;display:inline-block;width:34px;height:20px;flex:none;}
.toggle-switch input{position:absolute;opacity:0;width:0;height:0;}
.toggle-switch .track{position:absolute;inset:0;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-2);cursor:pointer;transition:background-color .15s;}
.toggle-switch .track::before{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:999px;background:var(--text-2);transition:transform .15s,background-color .15s;}
.toggle-switch input:checked+.track{background:var(--accent);border-color:transparent;}
.toggle-switch input:checked+.track::before{transform:translateX(14px);background:var(--on-light);}
.toggle-switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px;}
.toggle-switch input:disabled+.track{opacity:.4;cursor:not-allowed;}

/* 5 ─ Product components ───────────────────────────────────────────────── */
/* Hero, measured from permaloop.io's home: the headline and composer sit
   in the middle of the first screen, the headline is one bold display line
   with a single highlighted phrase, and the composer is the heaviest object
   on the page. Nothing else competes above the fold. */
.tv-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:min(820px,calc(100dvh - 40px));padding:48px 0 56px;text-align:center;}
.tv-hero h1{max-width:760px;font-size:var(--font-size-display);font-weight:700;line-height:1.08;letter-spacing:-.035em;text-wrap:balance;}
.tv-hero h1 .tv-hl{display:block;color:var(--accent);}
.tv-hero>p{max-width:520px;margin:12px 0 0;color:var(--text-2);font-size:15px;line-height:22px;}
/* Guides keep the hero's composer but not its full first screen: the
   article below is the point of the page, so it starts right under the tool. */
.tv-hero--compact{min-height:0;padding:40px 0 8px;}
.tv-hero--compact h1{font-size:44px;}
.tv-hero--compact>p{max-width:600px;}
.tv-hero--compact>p a{color:var(--accent);text-decoration:none;}
.tv-hero--compact>p a:hover{text-decoration:underline;}

/* Composer: Permaloop's main box. A 680px panel on --bg-surface-2 with a
   22px radius and a hairline border; the input sits at the top with no box
   of its own, and a bottom bar carries the mode icon on the left and the
   actions on the right, ending in a 40px pill. The mode switch and a one-line
   note sit underneath, outside the box. */
.tv-action{display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--composer-w);margin:28px auto 0;padding:0;text-align:left;}
.tv-action form{width:100%;margin:0;}
.tv-action .tv-field{flex-wrap:wrap;align-content:space-between;gap:0 var(--space-2);height:auto;min-height:160px;padding:20px 16px 16px 20px;
  border:1px solid var(--border-panel);border-radius:var(--radius-lg);background:var(--bg-surface-2);box-shadow:none;}
.tv-action .tv-field:hover{border-color:var(--border-strong);}
.tv-action .tv-field:focus-within{border-color:var(--border-hover);box-shadow:none;}
.tv-action .tv-field>input{order:-1;flex:1 1 100%;height:26px;padding:0;font-size:var(--font-size-input);line-height:26px;}
.tv-action .tv-field>input::placeholder{color:var(--text-secondary);opacity:1;}
.tv-action .tv-field>.tv-field-icon{width:32px;height:40px;margin-left:-4px;color:var(--text-secondary);}
.tv-action .tv-field>.tv-field-icon .app-icon{width:18px;height:18px;}
.tv-action .tv-field>input+*{margin-left:auto;}
.tv-action .tv-field>.tv-icon-btn{width:36px;height:36px;border-radius:var(--radius-pill);color:var(--text-secondary);}
.tv-action .tv-field>.tv-btn,.tv-action .tv-field>.btn-primary{height:var(--control-height-md);min-height:var(--control-height-md);padding:0 22px;border-radius:var(--radius-pill);
  background:var(--bg-selected);color:var(--text-secondary);font-size:14px;font-weight:600;}
.tv-action .tv-field>.tv-btn:hover{background:var(--border-hover);color:var(--text-primary);}
.tv-action .tv-field:has(input:not(:placeholder-shown))>.tv-btn{background:var(--text-primary);color:var(--on-light);}
.tv-action .tv-field:has(input:not(:placeholder-shown))>.tv-btn:hover{background:#fff;}

/* Mode switch: compact outlined pills under the composer, as on
   Permaloop; the selected mode lifts to --bg-selected. */
.tv-modes{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);margin:var(--space-3) 0 0;}
.tv-modes>button{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-height-sm);padding:0 14px;border:1px solid var(--border-default);border-radius:var(--radius-pill);
  background:var(--bg-surface-1);color:var(--text-secondary);font-size:12.5px;font-weight:500;transition:background-color .15s,border-color .15s,color .15s;}
.tv-modes>button .app-icon{width:14px;height:14px;}
.tv-modes>button:hover{border-color:var(--border-hover);color:var(--text-primary);}
.tv-modes>button[aria-selected="true"]{border-color:var(--border-hover);background:var(--bg-selected);color:var(--text-primary);}

/* The note under the switch: one quiet centred line. */
.tv-action-foot,.tv-action-status{display:block;margin:var(--space-4) 0 0;color:var(--text-secondary);font-size:var(--font-size-meta);line-height:18px;text-align:center;}
.tv-action-foot span+span::before{content:" · ";}
.tv-action-foot .app-icon{display:none;}
.tv-action-status:empty{display:none;}
.tv-action-status.is-error{color:var(--err);}
.tv-action-status.is-ready{color:var(--text-2);}

/* Shortcuts under the composer, like Permaloop's three tiles: icon on top,
   a bold label below, on --bg-surface-1. */
.tv-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);width:100%;max-width:var(--composer-w);margin:40px auto 0;}
.tv-shortcuts a{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4);min-height:90px;padding:var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:var(--bg-surface-1);color:var(--text-primary);font-size:14px;font-weight:600;text-align:left;text-decoration:none;transition:background-color .15s,border-color .15s;}
.tv-shortcuts a .app-icon{width:18px;height:18px;color:var(--text-secondary);}
.tv-shortcuts a:hover{border-color:var(--border-hover);background:var(--bg-surface-2);}
.tv-results{width:100%;max-width:var(--composer-w);margin:var(--space-5) auto 0;text-align:left;}
.tv-results:empty{display:none;}

/* Result states under the widget. */
.state-card{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);}
.state-card strong{display:block;font-size:14px;font-weight:600;}
.state-card .hint{margin:2px 0 0;color:var(--text-2);font-size:13px;}
.state-card .hint.error,.hint.error{color:var(--err);}
.retry-btn{margin-left:auto;height:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);font-size:13px;font-weight:600;}

/* Creator card: the result of a creator search. Same surface as the widget. */
.tv-creator-card{display:flex;align-items:center;gap:14px;padding:16px;}
.tv-creator-card-copy{flex:1 1 auto;min-width:0;}
.tv-creator-card-copy h3{font-size:15px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tv-creator-card-copy p{color:var(--text-2);font-size:13px;}
.tv-creator-card-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap;}

/* Creator header: compact identity, one line of facts, a row of actions. */
.tv-creator-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin:0 0 24px;}
.tv-creator-head h1,.tv-creator-head h2{font-size:22px;line-height:28px;overflow-wrap:anywhere;}
.tv-creator-head .tv-creator-handle{color:var(--text-2);font-size:14px;}
.tv-creator-facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;color:var(--text-2);font-size:13px;}
.tv-creator-facts span{display:inline-flex;align-items:center;gap:6px;}
.tv-creator-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;}
.tv-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;}
.tv-back:hover{color:var(--text);}
.tv-back .app-icon{width:15px;height:15px;}

/* Media card and grid. The thumbnail is the card; two quiet caption lines
   sit under it; actions appear on hover (always on touch). */
.tv-media-grid,.story-library-grid,.vault-grid,.lib-skeleton-grid,.story-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:22px 14px;}
.tv-media,.story-library-card,.vault-card,.lib-card,.story-result-tile{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;}
.tv-media-tile,.lib-tile,.story-library-media-button,.story-result-media{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;overflow:hidden;border:1px solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-card);color:inherit;cursor:pointer;transition:border-color .15s;}
.tv-media-tile:hover,.lib-tile:hover,.story-library-media-button:hover{border-color:var(--line-3);}
.lib-tile:disabled{cursor:not-allowed;}
.tv-media-tile img,.lib-tile img,.lib-tile video,.story-library-preview,.vault-card .lib-tile img,.story-result-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lib-tile .story-tile-state{position:absolute;inset:0;display:block;}
.story-media-placeholder,.vault-card-placeholder,.story-result-noimage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--surface);color:var(--text-3);font-size:11.5px;text-align:center;}
.lib-scrim,.tv-scrim{position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;background:linear-gradient(to top,rgba(6,6,8,.8),rgba(6,6,8,0));}
.lib-duration,.tv-media-meta{position:absolute;right:8px;bottom:7px;display:inline-flex;align-items:center;gap:4px;color:rgba(255,255,255,.92);font-size:11px;font-weight:500;}
.lib-duration .app-icon{width:11px;height:11px;}
.lib-parts,.tv-media-kind{position:absolute;left:8px;bottom:7px;color:rgba(255,255,255,.85);font-size:11px;font-weight:500;}
.media-play-icon{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:999px;background:rgba(8,8,11,.5);border:1px solid rgba(255,255,255,.2);color:#fff;opacity:0;transition:opacity .15s;}
.media-play-icon .app-icon{width:15px;height:15px;}
.lib-tile:hover .media-play-icon,.lib-tile:focus-visible .media-play-icon{opacity:1;}
.lib-mark{position:absolute;top:8px;left:8px;display:grid;place-items:center;}
.vault-card:has(.vault-select:not([hidden])) .lib-mark{display:none;}
.lib-mark-saved,.lib-mark-fav{width:22px;height:22px;border-radius:999px;background:rgba(8,8,11,.6);}
.lib-mark-saved{color:var(--ok);}
.lib-mark-fav{color:#fff;}
.lib-mark .app-icon{width:12px;height:12px;}
.lib-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;background:rgba(8,8,11,.74);color:var(--text-2);font-size:11.5px;line-height:16px;text-align:center;}
.lib-veil a{color:var(--accent);font-weight:600;text-decoration:none;}
.lib-meta,.story-library-body,.vault-card-info{display:flex;flex-direction:column;gap:1px;min-width:0;padding:0 2px;}
.lib-meta-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:20px;}
.lib-meta-row strong,.lib-meta-row .vault-creator-link{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--text);}
.lib-meta-row span,.lib-meta-row time{font-size:12.5px;color:var(--text-2);white-space:nowrap;}
.lib-meta-row+.lib-meta-row span{color:var(--text-3);}
.lib-meta-row .lib-meta-info{overflow:hidden;text-overflow:ellipsis;}
/* Card actions float over the top-right of the tile, so the caption rows
   under it get their full width. They show on hover and focus, always on
   touch. */
.lib-actions{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s;}
.lib-actions>.lib-ib,.lib-actions>.lib-kebab>summary{width:32px;height:32px;border:0;border-radius:999px;background:rgba(10,10,12,.62);color:#f5f5f7;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.lib-actions>.lib-ib:hover,.lib-actions>.lib-kebab>summary:hover,.lib-actions>.lib-kebab[open]>summary{background:rgba(24,24,28,.9);color:#fff;}
.lib-actions>.lib-ib.is-saved{color:var(--ok);}
.lib-actions>.lib-ib[aria-pressed="true"]{color:var(--accent);}
.lib-card:hover .lib-actions,.lib-card:focus-within .lib-actions,.vault-card:hover .lib-actions,.vault-card:focus-within .lib-actions,.story-library-card:hover .lib-actions,.story-library-card:focus-within .lib-actions{opacity:1;}
@media (hover:none){.lib-actions{opacity:1;}.media-play-icon{opacity:1;}}
.lib-card-title{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Creator rail. */
.lib-rail{display:flex;align-items:flex-start;gap:16px;margin:-4px -4px 20px;padding:6px 4px;overflow-x:auto;scrollbar-width:none;}
.lib-rail::-webkit-scrollbar{display:none;}
.lib-rail-item{display:flex;flex-direction:column;align-items:center;gap:7px;width:62px;flex:none;padding:0;border:0;background:none;color:inherit;text-decoration:none;}
.lib-avatar{position:relative;width:50px;height:50px;flex:none;}
.lib-avatar img,.lib-avatar .lib-avatar-fallback,.lib-avatar .creator-avatar-fallback{display:grid;place-items:center;width:50px;height:50px;border-radius:999px;object-fit:cover;background:var(--surface-3);color:var(--text-2);font-size:16px;font-weight:600;}
.lib-avatar.has-new::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--accent);}
.lib-rail-name{max-width:62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:11.5px;}
.lib-rail-item:hover .lib-rail-name{color:var(--text);}
.lib-rail-item.is-paused .lib-avatar img,.lib-rail-item.is-paused .lib-avatar-fallback{opacity:.5;}
.lib-rail-add .lib-avatar-fallback{border:1px dashed var(--line-3);background:transparent;color:var(--text-3);}
.lib-rail-add:hover .lib-avatar-fallback{border-color:var(--accent-line);color:var(--accent);}

/* Filter bar: segmented control on the left, search and menus on the right.
   Advanced options live behind "More filters". */
.tv-filterbar,.lib-filters{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 18px;}
.tv-filterbar-end,.lib-filters-end{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* Sections inside a page. */
.lib-section{margin:0 0 32px;}
.lib-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;}
.lib-section-head h2{font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.015em;}
.lib-section-count{color:var(--text-2);font-size:13px;}
.lib-section-foot{margin:16px 0 0;}
.lib-link-button{padding:0;border:0;background:none;font:inherit;}

/* Empty, loading and error states: centred, small, one action. */
.tv-empty,.lib-state,.ap-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:258px;padding:48px 24px;text-align:center;border:1px solid var(--border-field);border-radius:var(--radius-card);background:var(--bg-card);}
.tv-empty h2,.tv-empty h3,.lib-state h2,.ap-state h3{font-size:16px;line-height:24px;font-weight:700;}
.tv-empty p,.lib-state p,.ap-state p{max-width:46ch;color:var(--text-2);font-size:14px;line-height:24px;}
/* Permaloop's empty card carries one plain stroke icon, not a framed tile. */
.lib-state-mark.tv-icon-tile,.lib-state-icon{--tile:auto;width:auto;height:auto;margin:0 0 10px;border:0;border-radius:0;background:none;color:var(--text-2);}
.lib-state-mark.tv-icon-tile .app-icon,.app-icon.lib-state-icon{width:30px;height:30px;}
.lib-state-actions,.tv-empty-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.tv-error-state{border-color:rgba(248,113,113,.3);}

/* Storage usage: a figure, a thin bar and one note, no box. */
.tv-storage{display:flex;flex-direction:column;gap:6px;min-width:220px;}

/* Pricing card, measured from permaloop.io's plans page: #232325 cards
   with a hairline and 20px corners, the plan name, a 44px price, one 44px
   pill action, then label/value rows under a hairline. The recommended plan
   is the one place the accent shows: its border, badge, button and figures. */
.tv-pricing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.tv-plan,.plan-comparison-tier{position:relative;display:flex;flex-direction:column;min-width:0;padding:clamp(20px,2vw,28px);border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);}
.tv-plan.is-featured,.plan-comparison-tier.featured{border-color:var(--accent-line);background:var(--bg-card);}
.tv-plan-top,.plan-tier-top{order:0;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;}
.tv-plan h3,.plan-tier-top h3{font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.015em;}
.tv-plan-price,.plan-tier-price{order:1;display:flex;align-items:baseline;gap:4px;margin:26px 0 0;white-space:nowrap;}
.tv-plan-price strong,.plan-tier-price strong{font-size:clamp(34px,3.1vw,44px);line-height:48px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.tv-plan-price span,.plan-tier-price span{color:var(--text-2);font-size:14px;}
.tv-plan-tagline,.plan-tier-tagline{order:2;margin:6px 0 0;color:var(--text-2);font-size:14px;line-height:20px;}
.tv-plan-list,.plan-benefits,.plan-features{order:4;list-style:none;display:flex;flex-direction:column;gap:0;margin:32px 0 0;padding:18px 0 0;border-top:1px solid var(--border-panel);}
.tv-plan-list li,.plan-benefits li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;color:var(--text);font-size:14px;line-height:20px;}
.tv-plan-list li strong{color:var(--text);font-weight:600;}
.tv-plan-list .app-icon{width:15px;height:15px;margin-top:2px;flex:none;color:var(--text-2);}
.tv-plan.is-featured .tv-plan-list .app-icon,.plan-comparison-tier.featured .plan-benefit-check{color:var(--accent);}
/* Label/value rows (the signed-in plan picker). */
.plan-feature{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px;line-height:20px;}
.plan-feature-label{color:var(--text);}
.plan-feature-value{color:var(--text);font-weight:600;text-align:right;white-space:nowrap;}
.plan-comparison-tier.featured .plan-feature-value{color:var(--accent);}
/* One pill action straight under the price. Recommended: the accent. The
   rest: light. Current or free: a quiet disabled pill. */
.tv-plan>.tv-btn,.plan-comparison-tier .plan-checkout-button{order:3;width:100%;height:44px;min-height:44px;margin:28px 0 0;border:0;border-radius:var(--radius-pill);
  background:var(--text);color:var(--on-light);font-size:14px;font-weight:600;}
.tv-plan>.tv-btn:hover,.plan-comparison-tier .plan-checkout-button:hover{background:#fff;}
.tv-plan.is-featured>.tv-btn,.plan-comparison-tier.featured .plan-checkout-button{background:var(--accent);color:var(--on-light);}
.tv-plan.is-featured>.tv-btn:hover,.plan-comparison-tier.featured .plan-checkout-button:hover{background:var(--accent-2);}
.plan-comparison-tier .plan-checkout-button:disabled{opacity:1;background:var(--bg-selected);border:0;color:var(--text-2);cursor:default;}
.plan-checkout-note{order:3;margin:10px 0 0;color:var(--text-3);font-size:12px;}
.plan-tier-badge,.tv-plan-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1px solid var(--accent-line);border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600;}
.plan-tier-badge .app-icon{display:none;}
.tv-pricing-foot{margin:16px 0 0;color:var(--text-3);font-size:13px;}

/* Compact feature blocks: icon, one bold line, one quiet line. */
.tv-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none;}
.tv-feature-block{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
.tv-feature-block strong{display:block;font-size:13.5px;font-weight:600;}
.tv-feature-block p{margin:2px 0 0;color:var(--text-2);font-size:13px;line-height:19px;}
.tv-feature-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0;}
.tv-feature{display:flex;align-items:center;gap:9px;color:var(--text-2);font-size:13px;line-height:18px;}
.tv-feature>.app-icon{width:15px;height:15px;color:var(--text-3);}
.tv-feature strong{color:var(--text);font-weight:600;}

/* Steps: the "how monitoring works" row, three columns on hairlines. */
.tv-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.tv-steps li{display:flex;flex-direction:column;gap:3px;padding:16px;}
.tv-steps li+li{border-left:1px solid var(--line);}
.tv-steps span{color:var(--text-3);font-size:12px;font-variant-numeric:tabular-nums;}
.tv-steps strong{font-size:13.5px;}
.tv-steps p{color:var(--text-2);font-size:13px;line-height:19px;}

/* Example state on the logged-out homepage. */
.tv-example{display:flex;flex-direction:column;gap:14px;}
.tv-example-row{display:flex;align-items:center;gap:10px;}
.tv-example-row strong{font-size:14px;}
.tv-example-row span{color:var(--text-3);font-size:12.5px;}
.tv-example-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;}
.tv-example-grid figure{position:relative;margin:0;aspect-ratio:9/16;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);}
.tv-example-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tv-example-grid figcaption{position:absolute;left:8px;right:8px;bottom:7px;display:flex;justify-content:space-between;color:rgba(255,255,255,.9);font-size:11px;font-weight:500;}
.tv-example-grid figure::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(to top,rgba(6,6,8,.75),transparent);}
.tv-example-grid figcaption{z-index:1;}
.tv-example-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-3);font-size:11px;}

/* Story Saver landing: lede, four-up features, comparison table, closing CTA. */
.tv-section-lede{max-width:720px;margin:-6px 0 18px;color:var(--text-2);font-size:14px;line-height:22px;}
.tv-features--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.tv-features--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.tv-features--4 .tv-feature-block{flex-direction:column;}
.tv-example-grid--5{grid-template-columns:repeat(5,minmax(0,1fr));}
.compare-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);}
.story-compare-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:13.5px;line-height:19px;}
.story-compare-table th,.story-compare-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);}
.story-compare-table tr:last-child td{border-bottom:0;}
.story-compare-table thead th{color:var(--text-3);font-size:12px;font-weight:500;background:var(--surface);}
.story-compare-table td{color:var(--text-2);}
.story-compare-table td:first-child{color:var(--text);font-weight:500;}
.story-compare-table td:last-child,.story-compare-table thead th:last-child{color:var(--text);}
.tv-cta{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:8px;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
.tv-cta h2{font-size:17px;line-height:24px;}
.tv-cta p{margin:4px 0 0;color:var(--text-2);font-size:13.5px;line-height:20px;}
.tv-cta .tv-action-foot{margin-top:10px;}
.tv-cta-actions{display:flex;gap:8px;flex:none;}

/* How-to guide: a quiet 24-hour cue, choice/comparison cards, a four-step
   row and inline notes, all built on the feature, steps and notice pieces. */
.tv-guide-timer{display:inline-flex;align-items:center;gap:10px;margin:16px 0 0;padding:3px 14px 3px 3px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface);color:var(--text-2);font-size:12.5px;line-height:18px;}
.tv-guide-timer .tv-icon-tile{border-radius:var(--radius-pill);}
.tv-guide-timer strong{margin-right:6px;color:var(--text);font-weight:600;}
.tv-choice{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:20px;border:1px solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-card);}
.tv-choice h3{margin:14px 0 0;font-size:15px;line-height:22px;}
.tv-choice>p{margin:2px 0 0;color:var(--text-2);font-size:13px;line-height:19px;}
.tv-choice .tv-feature-list{margin:16px 0 0;}
.tv-choice .tv-feature{align-items:flex-start;}
.tv-choice .tv-feature>.app-icon{flex:none;margin-top:1.5px;}
.tv-choice>.tv-btn{margin-top:auto;}
.tv-choice .tv-feature-list+.tv-btn{margin-top:20px;}
.tv-feature-block h3{font-size:13.5px;line-height:19px;font-weight:600;}
.tv-feature-block p b{color:var(--text);font-weight:600;}
.tv-features--stack .tv-feature-block{flex-direction:column;gap:10px;}
.tv-steps--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.tv-steps p a,.tv-guide-note a{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;text-decoration-thickness:1px;}
.tv-steps p a:hover,.tv-guide-note a:hover{text-decoration-color:currentColor;}
.tv-guide-aside,.tv-steps+.tv-guide-note{margin-top:12px;}
.tv-guide-note{align-items:flex-start;}
.tv-guide-note>.tv-icon-tile{margin-top:-3px;}
.tv-guide-note>.tv-notice-text{flex:1 1 0;}
.tv-guide-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px 32px;align-items:start;}
.tv-guide-split .tv-prose p:last-child{margin-bottom:0;}
.tv-guide-device{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;}
.tv-guide-device+p{margin-top:6px;}
.tv-cta--guide .tv-action-foot{text-align:left;}

/* Legal and contact pages: a narrow reading column on hairlines. */
.breadcrumb{margin:0 0 18px;color:var(--text-3);font-size:12.5px;}
.breadcrumb a{color:var(--text-2);text-decoration:none;}
.breadcrumb a:hover{color:var(--text);}
.content-page-title{font-size:26px;line-height:32px;letter-spacing:-.01em;}
.content-page-updated{margin:6px 0 0;color:var(--text-3);font-size:12.5px;}
.content-page-intro{max-width:620px;margin:8px 0 0;color:var(--text-2);font-size:14px;line-height:22px;}
.content-page-intro a,.prose a{color:var(--accent);text-decoration:none;}
.content-page-intro a:hover,.prose a:hover{text-decoration:underline;}
.prose{margin-top:24px;border-top:1px solid var(--line);color:var(--text-2);font-size:14px;line-height:23px;}
.prose>section{padding:20px 0;border-bottom:1px solid var(--line);}
.prose>section:last-child{border-bottom:0;}
.prose .block+.block{margin-top:12px;}
.prose .block+.block:has(>h2){margin-top:26px;}
.prose h2{margin:0 0 6px;color:var(--text);font-size:15px;line-height:22px;}
.prose p{margin:0;}
.prose p+p{margin-top:10px;}
.prose ul,.prose ol{margin:8px 0 0;padding-left:20px;}
.prose li+li{margin-top:4px;}
.prose b,.prose strong{color:var(--text);font-weight:600;}
.contact-card{display:flex;align-items:center;gap:16px;margin-top:24px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
.contact-card .field-label{color:var(--text-3);font-size:11.5px;letter-spacing:.04em;}
.contact-card a{color:var(--text);font-size:15px;font-weight:600;text-decoration:none;}
.contact-card a:hover{color:var(--accent);}
.content-page-form #takedownForm{gap:14px;max-width:560px;margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
.content-page-form #takedownForm>div{display:flex;flex-direction:column;gap:6px;}
.content-page-form .form-submit{width:auto;align-self:flex-start;}
.form-success{max-width:560px;margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);}
.form-success h2{font-size:15px;}
.form-success p{margin:4px 0 0;color:var(--text-2);font-size:13.5px;line-height:20px;}

/* Settings section: a title on a hairline, then label/value rows. No card. */
/* Settings: each section is one Permaloop card, the title at its top and
   label/value rows on hairlines inside it. */
.tv-settings{display:flex;flex-direction:column;gap:20px;}
.tv-settings-section{padding:6px 24px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);}
.tv-settings-section>h2{padding:16px 0 12px;border-bottom:1px solid var(--border-card);font-size:16px;line-height:22px;font-weight:700;}
.tv-settings-section .tv-row{border-bottom-color:var(--border-card);}
.tv-settings-section--danger{border-color:rgba(248,113,113,.22);}
.tv-settings>.premium-page{padding:0;border:0;background:none;}
.tv-settings-section>p.tv-settings-note{margin:8px 0 0;color:var(--text-3);font-size:12.5px;}
.tv-row{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;padding:16px 0;border-bottom:1px solid var(--line);}
.tv-row:last-child{border-bottom:0;}
.tv-row-label{min-width:0;}
.tv-row-label strong,.tv-row-label h3{display:block;font-size:14px;font-weight:600;}
.tv-row-label p,.tv-row-label span{display:block;margin:3px 0 0;color:var(--text-2);font-size:13.5px;line-height:20px;overflow-wrap:anywhere;}
.tv-row-value{color:var(--text-2);font-size:13.5px;text-align:right;overflow-wrap:anywhere;}
.tv-row>.tv-btn,.tv-row>button,.tv-row>a.tv-btn{flex:none;}
.tv-row-id{display:flex;align-items:center;gap:12px;min-width:0;}
.tv-row-hint{color:var(--text-3)!important;font-size:12px!important;}
.tv-row--form{align-items:flex-start;}
.tv-row--form>.tv-row-label{flex:1 1 280px;max-width:360px;}
.tv-row-fields{display:flex;flex-direction:column;gap:12px;flex:1 1 300px;max-width:380px;}
.tv-row-fields .tv-btn{align-self:flex-start;}
.tv-settings-section[hidden],.premium-page[hidden]{display:none;}
/* Settings area: a small section nav on the left, one section on the right.
   Product places live in the side panel; this nav only holds account pages.
   The frame is sized for Plan & billing, which needs the room for four plans
   side by side; every other section keeps its own narrower column, so the nav
   stays put when switching sections. */
.tv-page--settings{max-width:1480px;}
.tv-settings-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;align-items:start;}
.tv-settings-nav{position:sticky;top:24px;display:flex;flex-direction:column;gap:2px;}
.tv-settings-nav a{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-radius:10px;color:var(--text-2);font-size:13.5px;font-weight:500;white-space:nowrap;text-decoration:none;}
.tv-settings-nav a svg{width:16px;height:16px;flex:none;}
.tv-settings-nav a:hover{background:var(--hover);color:var(--text);}
.tv-settings-nav a[aria-current="page"]{background:var(--bg-selected);color:var(--text);}
.tv-settings-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.tv-settings{max-width:760px;min-width:0;}
.tv-settings:has(>.premium-page:not([hidden])){max-width:none;}
/* Plan cards share the column with the section nav, so the column count
   follows the width the picker actually has, not the viewport: one, two, or
   all four in a row. Never three, which would strand a plan on its own row. */
.premium-plan-picker{container:plan-picker/inline-size;}
.tv-settings .plan-comparison-grid{grid-template-columns:minmax(0,1fr);}
@container plan-picker (min-width:540px){.tv-settings .plan-comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@container plan-picker (min-width:1040px){.tv-settings .plan-comparison-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
/* Tighter plan cards than the marketing ones: same parts, less air between. */
.tv-settings .plan-comparison-tier{padding:20px;}
.tv-settings .plan-tier-price{margin-top:14px;}
.tv-settings .plan-tier-tagline{margin-top:4px;min-height:0;}
.tv-settings .plan-comparison-tier .plan-checkout-button{margin-top:18px;}
.tv-settings .plan-features{margin-top:18px;padding-top:8px;}
.tv-settings .plan-feature{padding:6px 0;}
/* Four across at the narrow end, a tagline can take two lines; reserve them
   so the buttons still line up. Wider than that, every tagline fits on one. */
@container plan-picker (min-width:1040px) and (max-width:1199px){.tv-settings .plan-tier-tagline{min-height:40px;}}
#storageArea>.tv-row:last-child{border-bottom:1px solid var(--border-card);}
.tv-row-actions{display:flex;align-items:center;gap:8px;flex:none;flex-wrap:wrap;justify-content:flex-end;}
.tv-row--meter .tv-row-label{flex:1 1 auto;}
.tv-row-meter{flex:0 1 200px;min-width:120px;}
.tv-row-meter:empty{display:none;}
.tv-row-meter .tv-progress{margin:0;}
/* A switch drawn from a native checkbox, so it keeps its keyboard and
   screen reader behaviour. Disabled ones mark features not built yet. */
.tv-switch{position:relative;display:inline-flex;flex:none;width:38px;height:22px;}
.tv-switch input{appearance:none;-webkit-appearance:none;margin:0;width:38px;height:22px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-selected);cursor:pointer;transition:background .15s;}
.tv-switch input::after{content:"";position:absolute;top:4px;left:4px;width:14px;height:14px;border-radius:999px;background:var(--text-3);transition:transform .15s,background .15s;}
.tv-switch input:checked{background:var(--accent);border-color:var(--accent);}
.tv-switch input:checked::after{transform:translateX(16px);background:#111;}
.tv-switch input:disabled{cursor:not-allowed;opacity:.5;}
.tv-switch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
#dangerZone .tv-row-label strong{color:var(--text-2);font-weight:500;}
@media (max-width:1023px){
  .tv-settings-layout{grid-template-columns:minmax(0,1fr);gap:16px;}
  /* Phones and tablets: the section nav becomes one scrolling row. */
  .tv-settings-nav{position:static;flex-direction:row;gap:6px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 4px;overflow-x:auto;scrollbar-width:none;}
  .tv-settings-nav::-webkit-scrollbar{display:none;}
  .tv-settings-nav a{flex:none;height:34px;padding:0 12px;border:1px solid var(--border-card);border-radius:999px;font-size:13px;}
  .tv-settings-nav a[aria-current="page"]{border-color:var(--border-hover);}
  .tv-settings{max-width:none;}
}
@media (max-width:560px){
  .tv-row--meter{flex-wrap:wrap;}
  .tv-row-meter{flex:1 1 100%;}
  .tv-row-actions{width:100%;justify-content:stretch;}
  .tv-row-actions>.tv-btn{flex:1 1 0;}
}
.tv-settings-section--danger>h2{color:var(--err);}
.premium-page{display:flex;flex-direction:column;gap:32px;}
.premium-overview{padding:18px;}

/* FAQ: native disclosures on hairlines. */
.tv-faq{border-top:1px solid var(--line);}
.tv-faq details,.faq-item{border-bottom:1px solid var(--line);}
.tv-faq summary,.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 2px;list-style:none;cursor:pointer;font-size:14px;font-weight:500;}
.tv-faq summary::-webkit-details-marker,.faq-item summary::-webkit-details-marker{display:none;}
.tv-faq summary::after,.faq-item summary::after{content:"";width:7px;height:7px;flex:none;margin-right:4px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg) translateY(-2px);transition:transform .15s;}
.tv-faq details[open] summary::after,.faq-item[open] summary::after{transform:rotate(-135deg) translateY(-1px);}
.tv-faq details p,.faq-item p{margin:0;padding:0 2px 16px;color:var(--text-2);font-size:13.5px;line-height:21px;max-width:72ch;}
.tv-faq a,.faq-item a{color:var(--accent);text-decoration:none;}

/* Prose: legal and support pages, and longer explanations. */
.tv-prose{max-width:720px;color:var(--text-2);font-size:14px;line-height:23px;}
.tv-prose h1{margin:0 0 6px;color:var(--text);font-size:26px;line-height:32px;}
.tv-prose h2{margin:28px 0 8px;color:var(--text);font-size:16px;line-height:24px;}
.tv-prose h3{margin:20px 0 6px;color:var(--text);font-size:14px;}
.tv-prose p,.tv-prose ul,.tv-prose ol{margin:0 0 12px;}
.tv-prose ul,.tv-prose ol{padding-left:20px;}
.tv-prose li{margin:4px 0;}
.tv-prose a{color:var(--accent);text-decoration:none;}
.tv-prose a:hover{text-decoration:underline;}
.tv-prose strong{color:var(--text);}
.tv-prose table{width:100%;border-collapse:collapse;font-size:13px;}
.tv-prose th,.tv-prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.tv-prose th{color:var(--text-3);font-weight:500;font-size:12px;}

/* Login, signup and password recovery: one centred panel on the page. */
.auth-main{display:flex;justify-content:center;padding:40px var(--gutter) 56px;}
.auth-shell{width:min(416px,100%);}
.auth-form-panel{display:flex;flex-direction:column;padding:32px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);}
.auth-heading{margin:0 0 24px;}
.auth-heading h1,.auth-form-panel h1{font-size:24px;line-height:30px;font-weight:700;letter-spacing:-.02em;}
.auth-kicker{margin:0 0 6px;color:var(--text-3);font-size:12px;font-weight:500;}
.auth-intro{margin:4px 0 0;color:var(--text-2);font-size:13.5px;line-height:20px;}
.auth-form{display:flex;flex-direction:column;gap:16px;}
.auth-field{display:flex;flex-direction:column;gap:6px;}
.auth-field>label,.auth-label-row label{color:var(--text);font-size:13px;font-weight:500;}
.auth-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.auth-label-row a{color:var(--text-2);font-size:12.5px;text-decoration:none;}
.auth-label-row a:hover{color:var(--text);}
.auth-field input:not([type="checkbox"]){width:100%;height:var(--h-lg);padding:0 14px;border:1px solid var(--border-field);border-radius:var(--radius-control);background:var(--bg-sunken);color:var(--text);font-size:14px;transition:border-color .15s,box-shadow .15s;}
.auth-field input::placeholder{color:var(--text-3);}
.auth-field input:hover{border-color:var(--line-3);}
.auth-field input:focus{outline:none;border-color:var(--border-hover);box-shadow:none;}
.auth-field input[aria-invalid="true"]{border-color:rgba(248,113,113,.6);}
.password-field{position:relative;}
.password-field input{padding-right:62px!important;}
.password-toggle{position:absolute;right:6px;top:50%;height:28px;padding:0 8px;transform:translateY(-50%);border:0;border-radius:var(--r-xs);background:none;color:var(--text-2);font-size:12px;font-weight:500;cursor:pointer;}
.password-toggle:hover{color:var(--text);background:var(--hover);}
.password-requirement{margin:2px 0 0;color:var(--text-3);font-size:12px;line-height:17px;}
.password-requirement .req-check{display:inline-grid;place-items:center;width:14px;height:14px;flex:none;border:1px solid var(--line-3);border-radius:999px;font-size:9px;}
.password-requirement.met{color:var(--ok);}
.password-requirement.invalid{color:var(--err);}
.password-requirement.invalid .req-check{border-color:var(--err);color:var(--err);}
.field-error{margin:0;color:var(--err);font-size:12px;line-height:17px;}
.auth-legal a{color:var(--text);text-underline-offset:2px;}
.form-submit,.auth-submit{display:inline-flex;align-items:center;justify-content:center;width:100%;height:var(--h-lg);margin-top:4px;padding:0 16px;border:1px solid transparent;border-radius:var(--radius-pill);background:var(--text);color:var(--on-light);font-size:14px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.form-submit:hover:not(:disabled){opacity:.9;}
.form-submit:disabled{opacity:.55;cursor:not-allowed;}
.auth-google-button{display:flex;align-items:center;justify-content:center;gap:10px;height:var(--h-lg);margin:0;border:1px solid var(--border-field);border-radius:var(--radius-pill);background:var(--bg-selected);color:var(--text);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .15s,background-color .15s;}
.auth-google-button:hover{border-color:var(--line-3);background:var(--surface-3);}
.auth-google-icon{width:18px;height:18px;flex:none;}
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 0;color:var(--text-3);font-size:12px;}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line);}
.auth-status{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-2);font-size:12.5px;line-height:18px;}
.auth-form-panel>.auth-status:not([hidden]){margin-bottom:20px;}
.auth-status-error{border-color:rgba(248,113,113,.3);background:rgba(248,113,113,.07);color:#fca5a5;}
.auth-status-success{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.07);color:#a7f3d0;}
.auth-icon{width:16px;height:16px;flex:none;margin-top:1px;}
.auth-icon-back{transform:rotate(180deg);}
.auth-assurance{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);color:var(--text-3);}
.auth-assurance p{margin:0;}
.auth-assurance strong{display:block;color:var(--text);font-size:12.5px;}
.auth-assurance span{display:block;margin-top:2px;color:var(--text-3);font-size:12px;}
.auth-legal{margin:-4px 0 0;color:var(--text-3);font-size:11.5px;line-height:17px;text-align:center;}
.auth-switch{margin:20px 0 0;color:var(--text-2);font-size:13px;text-align:center;}
.auth-switch a{color:var(--text);font-weight:600;text-decoration:none;}
.auth-switch a:hover{color:var(--accent);}
.auth-back-link{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;}
.auth-back-link:hover{color:var(--text);}
.auth-back-link .auth-icon{width:14px;height:14px;margin:0;}

/* Example content ─ signed-out visitors get the real Creators, Stories and
   Vault pages filled with example data (assets/demo.js). One quiet line
   under the page title says so; nothing else about the page changes. */
.tv-demo-banner{display:flex;align-items:center;gap:12px;margin:0 0 20px;padding:10px 10px 10px 14px;border:1px solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-card);}
.tv-demo-banner p{flex:1;min-width:0;margin:0;color:var(--text-2);font-size:13px;line-height:18px;}
.tv-demo-tag{flex:none;padding:2px 8px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:600;line-height:18px;}
.tv-demo-actions{display:flex;gap:6px;flex:none;}

/* Sign-up prompt ─ opened by an account action while signed out
   (TikVaultShell.authGate). Small, centred, two clear choices. */
.tv-gate-backdrop{position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--scrim);}
.tv-gate{position:relative;width:min(380px,100%);padding:24px;border:1px solid var(--border-field);border-radius:var(--radius-card);background:var(--bg-card);box-shadow:var(--shadow-pop);animation:tvRise .15s ease;}
.tv-gate-close{position:absolute;top:12px;right:12px;}
.tv-gate-mark{display:grid;place-items:center;width:40px;height:40px;margin:0 0 14px;border-radius:12px;background:var(--bg-selected);color:var(--text);}
.tv-gate-mark .app-icon{width:20px;height:20px;}
.tv-gate h2{margin:0 0 6px;padding-right:28px;font-size:17px;line-height:24px;font-weight:650;letter-spacing:-.01em;}
.tv-gate p{margin:0 0 20px;color:var(--text-2);font-size:13.5px;line-height:20px;}
.tv-gate-actions{display:flex;flex-direction:column;gap:8px;}
.tv-gate-actions .tv-btn{width:100%;height:44px;min-height:44px;border-radius:var(--radius-pill);}

/* 6 ─ Page bindings ────────────────────────────────────────────────────── */
/* Story lookup results (homepage creator mode and /tiktok-story-saver). */
.story-results{display:flex;flex-direction:column;gap:14px;}
.story-result-tile>div{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:0 2px;}
.story-result-tile>div>span:first-child{color:var(--text-3);font-size:11.5px;}
.story-result-status{margin:0;font-size:12px;color:var(--text-2);}
.story-lookup-viewer-inner{position:relative;display:flex;flex-direction:column;gap:10px;align-items:center;width:min(420px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:12px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);}
.story-lookup-viewer-inner video,.story-lookup-viewer-inner img{display:block;width:100%;max-height:72dvh;object-fit:contain;border-radius:var(--r-md);background:#000;}
.story-lookup-viewer-close{align-self:stretch;height:var(--h-md);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-3);color:var(--text);font-weight:600;}

/* Public downloader result (homepage download mode and /downloader). */
/* Downloader ─ one component (assets/downloader.js) wherever it appears:
   the Download mode on Home and the /downloader page. Its field is the
   action panel's composer; a result is one card under it. */
.tv-action>[data-downloader],[data-downloader="results"]{width:100%;}
.tv-dl-spinner{display:inline-block;width:16px;height:16px;flex:none;margin:0 6px;border:2px solid var(--line-3);border-top-color:var(--text);border-radius:999px;animation:tvSpin .7s linear infinite;align-self:center;}
.tv-dl-spinner[hidden],.tv-dl-points[hidden],.tv-dl-status[hidden]{display:none;}
.tv-dl-results{width:100%;max-width:var(--composer-w);margin:16px auto 0;text-align:left;}
.tv-dl-results:empty{display:none;}
.tv-dl-result{display:grid;grid-template-columns:136px minmax(0,1fr);gap:18px;padding:14px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);animation:tvRise .15s ease;}
.tv-dl-thumb{position:relative;display:grid;place-items:center;align-self:start;aspect-ratio:9/16;overflow:hidden;border-radius:var(--radius-md);background:#000;color:var(--text-3);}
.tv-dl-thumb video,.tv-dl-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tv-dl-body{display:flex;flex-direction:column;gap:12px;min-width:0;padding-top:2px;}
.tv-dl-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.tv-dl-head>div:first-child{min-width:0;}
.tv-dl-kind{margin:0;color:var(--text-3);font-size:12px;font-weight:500;line-height:16px;}
.tv-dl-title{margin:2px 0 0;font-size:18px;line-height:24px;font-weight:650;letter-spacing:-.01em;overflow-wrap:anywhere;}
.tv-dl-meta{margin:-6px 0 0;color:var(--text-2);font-size:13px;line-height:18px;}
.tv-dl-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tv-dl-actions .tv-btn,.tv-dl-vault>button{height:40px;min-height:40px;padding:0 18px;border-radius:var(--radius-pill);}
.tv-dl-vault{display:contents;}
.tv-dl-vault>button{display:inline-flex;align-items:center;gap:7px;border:0;background:var(--bg-selected);color:var(--text);font-size:13.5px;font-weight:600;}
.tv-dl-vault>button:hover:not(:disabled){background:var(--border-hover);}
.tv-dl-vault>button:disabled{opacity:.6;cursor:default;}
.tv-dl-vault>p{flex-basis:100%;margin:0;color:var(--text-2);font-size:13px;}
.tv-dl-vault>p:empty{display:none;}
.tv-dl-note{margin:0;color:var(--text-2);font-size:13px;line-height:18px;overflow-wrap:anywhere;}
.tv-dl-note:empty{display:none;}
.tv-dl-note.is-error{color:var(--err);}
.tv-dl-another{flex:none;margin:-4px -6px 0 0;}
.tv-dl-result.is-photos{display:flex;flex-direction:column;gap:14px;padding:16px;}
.tv-dl-result.is-photos .tv-dl-head{align-items:flex-end;flex-wrap:wrap;}
.tv-dl-result.is-photos .tv-dl-another{margin:0;}
.tv-dl-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;}
.tv-dl-photo{display:flex;flex-direction:column;gap:4px;min-width:0;}
.tv-dl-photo-tile{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;overflow:hidden;border:1px solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-page);cursor:pointer;}
.tv-dl-photo-tile:hover{border-color:var(--line-3);}
.tv-dl-photo-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tv-dl-photo-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--text-3);font-size:12px;}
.tv-dl-photo.is-done .tv-dl-photo-foot span{color:var(--text-2);}
.dl-upsell{padding:12px 0 0;border-top:1px solid var(--line);color:var(--text-2);font-size:13px;line-height:19px;}
.dl-upsell p{margin:0;}
.dl-upsell-actions{margin:6px 0 0 !important;}
.dl-upsell a{color:var(--accent);font-weight:600;text-decoration:none;}
.dl-monitor{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 0 0;border-top:1px solid var(--line);}
.dl-monitor[hidden]{display:none;}
.dl-monitor-title{margin:0;font-size:14px;line-height:20px;font-weight:650;overflow-wrap:anywhere;}
.dl-monitor-copy{margin:0;color:var(--text-2);font-size:13px;line-height:18px;}
.dl-monitor-actions{display:flex;margin-top:6px;min-width:0;}
.dl-monitor-actions .tv-btn{max-width:100%;height:auto;min-height:var(--h-sm);padding-block:7px;white-space:normal;line-height:1.25;text-align:center;overflow-wrap:anywhere;}
.dl-monitor-note{margin:2px 0 0;color:var(--text-2);font-size:13px;line-height:18px;overflow-wrap:anywhere;}
.dl-monitor-note:empty{display:none;}
.dl-monitor-note.is-error{color:var(--err);}
.dl-monitor-note a{color:var(--accent);font-weight:600;text-decoration:none;}

/* Signed-in home: notices above the widget, one line of account facts
   under it, then "Your Stories" grouped by creator, two creators a row. */
.tv-home-notices{display:flex;flex-direction:column;gap:8px;max-width:720px;margin:0 auto;}
.tv-home-notices:not(:has(>:not([hidden]))){display:none;}

.tv-strip{display:flex;flex-wrap:wrap;justify-content:center;max-width:720px;margin:20px auto 12px;padding:0;list-style:none;}
.tv-strip li{display:flex;}
.tv-strip li[hidden]{display:none;}
.tv-strip li+li:not([hidden])::before{content:"";align-self:center;width:1px;height:14px;background:var(--line-2);}
.tv-strip a{display:inline-flex;align-items:baseline;gap:7px;padding:4px 14px;color:inherit;text-decoration:none;border-radius:var(--r-sm);}
.tv-strip a:hover .tv-strip-label{color:var(--text-2);}
.tv-strip-label{color:var(--text-3);font-size:12.5px;transition:color .15s;}
.tv-strip-value{color:var(--text);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.tv-strip-value .skeleton-value{width:40px;height:14px;vertical-align:-2px;}
.tv-strip .has-error .tv-strip-value{color:var(--text-3);}
.tv-live-note{display:inline-flex;align-items:center;gap:7px;margin-right:auto;color:var(--text-2);font-size:12.5px;}
.tv-section-head .tv-live-note{color:var(--text-2);}
.lib-dot{width:6px;height:6px;flex:none;border-radius:999px;background:var(--accent);}
.tv-feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 28px;}
@media (max-width:1099px){.tv-feed{grid-template-columns:repeat(2,minmax(0,1fr));}}
.tv-feed-group{display:flex;flex-direction:column;gap:12px;min-width:0;}
.tv-feed-head{display:flex;align-items:center;gap:10px;min-width:0;min-height:28px;}
.tv-feed-head>a{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none;}
.tv-feed-names{display:flex;flex-direction:column;min-width:0;}
.tv-feed-names strong{font-size:13.5px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tv-feed-names span{color:var(--text-3);font-size:12px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tv-feed-head>a:hover strong{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3);}
.tv-feed-head .tv-badge{margin-left:auto;}
.tv-feed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.tv-feed-grid .lib-tile{display:block;}
.tv-feed-grid .lib-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tv-feedback form{display:flex;flex-direction:column;gap:10px;max-width:560px;}
.tv-feedback-actions{display:flex;gap:8px;}

/* Creator rows (Creators page). */
/* The list sits in one Permaloop card: #232325, a hairline, 20px corners,
   rows separated by hairlines inside it. */
.ap-rows{display:flex;flex-direction:column;min-width:0;}
.ap-rows:has(>.ap-row){padding:0 20px;border:1px solid var(--border-field);border-radius:var(--radius-card);background:var(--bg-card);}
.ap-rows-head,.ap-row{display:grid;grid-template-columns:minmax(0,1fr) 140px 150px 200px 76px;align-items:center;gap:16px;}
.ap-rows-head{padding:14px 0 12px;border-bottom:1px solid var(--border-card);color:var(--text-3);font-size:12.5px;}
.ap-row{min-height:68px;padding:12px 0;border-bottom:1px solid var(--border-card);}
.ap-row:last-of-type{border-bottom:0;}
.ap-row-id{display:flex;align-items:center;gap:12px;min-width:0;}
.ap-row-id>div{min-width:0;}
.ap-row-id .ap-row-sub{display:none;}
.ap-row-id strong,.ap-row-id h3{display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;letter-spacing:0;}
.ap-row-id p,.ap-row-id small{display:block;margin:1px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3);font-size:12px;}
.ap-row>.tv-badge,.ap-row>.ap-status{justify-self:start;}
.ap-status.tv-badge::before{display:none;}
.ap-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2);font-size:13px;font-variant-numeric:tabular-nums;}
.ap-cell.is-muted{color:var(--text-3);}
.ap-status,.monitoring-status{display:inline-flex;align-items:center;gap:8px;min-width:0;color:var(--text-2);font-size:13px;white-space:nowrap;}
.ap-status::before,.monitoring-status::before{content:"";width:6px;height:6px;flex:none;border-radius:999px;background:var(--ok);}
.ap-status.is-warning::before,.monitoring-status.is-warning::before,.monitoring-status.is-plan-paused::before{background:var(--warn);}
.ap-status.is-off,.monitoring-status.is-off{color:var(--text-3);}
.ap-status.is-off::before,.monitoring-status.is-off::before{background:var(--text-3);}
.ap-row-acts{display:flex;align-items:center;justify-content:flex-end;gap:2px;}
.ap-row.is-dim .ap-avatar,.ap-row.is-dim .ap-row-id strong,.ap-row.is-dim .ap-row-id h3{opacity:.6;}
.ap-row .lib-kebab-menu,.creator-actions .lib-kebab-menu{min-width:240px;}
.creator-actions[open]{z-index:21;}
.creator-control{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;padding:0 10px;color:var(--text);font-size:13px;}
.creator-control.is-locked{color:var(--text-3);}
.creator-control-label{font-size:inherit;font-weight:400;letter-spacing:0;text-transform:none;color:inherit;}
.creator-lock-icon{width:13px;height:13px;margin-left:6px;vertical-align:-2px;}
.creator-remove{color:var(--err)!important;}
.creator-track-again{width:100%;}
.ap-empty-note{margin:10px 0 0;color:var(--text-3);font-size:12px;}
.ap-sheet-title{display:none;align-items:center;gap:12px;padding:4px 10px 12px;margin-bottom:4px;border-bottom:1px solid var(--line);}
.ap-sheet-title strong{display:block;font-size:14px;}
.ap-sheet-title>div span{display:block;font-size:12px;color:var(--text-3);}
.ap-add{display:flex;flex-direction:column;margin:0 0 24px;}
.tv-stack--tight{gap:14px;}
/* Add creator: Permaloop's Monitor field. A full-width 66px box on #232325
   with the action inside it on the right, grey until something is typed. */
.tv-field.tv-field--add{height:66px;padding:0 9px 0 22px;gap:10px;border-color:var(--border-field);border-radius:var(--radius-field);background:var(--bg-card);}
.tv-field.tv-field--add:hover{border-color:var(--border-hover);}
.tv-field.tv-field--add:focus-within{border-color:var(--border-hover);box-shadow:none;}
.tv-field--add>.app-icon{color:var(--text-2);}
.tv-field--add input{font-size:15px;}
.tv-field--add input::placeholder{color:var(--text-2);}
.tv-field.tv-field--add .tv-btn{height:48px;min-height:48px;padding:0 20px;border-radius:var(--radius-control);background:var(--bg-selected);color:var(--text-2);font-size:14px;}
.tv-field.tv-field--add .tv-btn:hover{background:var(--border-hover);color:var(--text);}
.tv-field--add:has(input:not(:placeholder-shown)) .tv-btn{background:var(--text);color:var(--on-light);}
.ap-add-foot{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin:10px 4px 0;}
.ap-add-foot .ap-hint{margin:0;}
/* Slots: one line beside the hint, a figure, a short bar and what is left. */
.ap-add-foot .ap-capacity{flex-direction:row;align-items:center;gap:10px;min-width:0;margin-left:auto;}
.ap-add-foot .ap-capacity .tv-stat-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.ap-add-foot .ap-capacity .tv-stat-value{font-size:13.5px;}
.ap-add-foot .ap-capacity .tv-stat-unit{font-size:13px;}
.ap-add-foot .ap-capacity>.tv-progress{width:96px;margin:0;}
.ap-add-foot .ap-capacity .tv-stat-note{font-size:13px;}
.ap-section>.lib-filters{margin:0;}
.ap-section{display:flex;flex-direction:column;gap:14px;}
.ap-capacity{display:flex;flex-direction:column;gap:6px;min-width:200px;}
.ap-capacity .tv-stat-label{color:var(--text-2);font-size:12px;}
.tv-stat-row{display:flex;align-items:baseline;gap:5px;white-space:nowrap;}
.tv-stat-value{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;}
.tv-stat-unit{color:var(--text-2);font-size:12.5px;}
.tv-stat-note{color:var(--text-3);font-size:12px;}
.ap-capacity.is-warning .tv-stat-note{color:var(--warn);}
.ap-capacity>.tv-icon-tile{display:none;}

/* Stories: creator overview cards and history. */
.creator-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.creator-library-card{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--border-card);border-radius:var(--radius-card);background:var(--bg-card);transition:border-color .15s;}
.creator-library-card:hover{border-color:var(--border-hover);}
.creator-library-heading{display:flex;align-items:center;gap:12px;min-width:0;}
.creator-library-avatar{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:999px;object-fit:cover;background:var(--surface-3);color:var(--text-2);font-weight:600;}
.creator-library-identity{display:flex;flex-direction:column;min-width:0;}
.creator-library-identity h2{font-size:14px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.creator-library-identity strong{color:var(--text-2);font-size:12.5px;font-weight:500;}
.creator-library-identity span{color:var(--text-3);font-size:12px;}
.creator-library-previews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.creator-library-preview{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:10px;background:var(--bg-page);}
.creator-library-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.creator-library-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:13px;font-weight:500;text-decoration:none;}
.creator-library-link:hover{color:var(--text);}
.creator-library-link .app-icon{width:14px;height:14px;}
.story-creator-empty{grid-column:1/-1;padding:24px 0;color:var(--text-3);font-size:12.5px;text-align:center;}
.story-history-section{margin:0 0 28px;}
.story-history-section>h2{margin:0 0 12px;font-size:15px;}
.story-locked-section{margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}
.story-history-note{margin:0 0 12px;color:var(--text-2);font-size:13px;}
.story-history-cta{margin:0 0 14px;}
.story-history-status{margin:12px 0 0;color:var(--text-3);font-size:12px;}
.library-load-more{display:flex;margin:18px auto 0;}
.story-locked-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text-2);}
.story-locked-plan{color:var(--accent);font-weight:600;}
.story-append-skeleton{height:40px;margin-top:12px;}
.story-library-card-locked .lib-tile{cursor:default;}

/* Story viewer. */
.story-watch-modal{position:relative;display:flex;flex-direction:column;width:min(460px,100%);max-height:calc(100dvh - 40px);overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--surface-2);box-shadow:var(--shadow-pop);}
.story-watch-modal>.plan-modal-close{z-index:3;top:14px;right:12px;background:transparent;color:var(--text-2);}
/* minmax(0,1fr): an implicit auto row grows to a portrait file's natural height, which on a
   phone pushes the media (and the video controls) under the Prev/Next bar instead of fitting it. */
.story-watch-media-wrap{position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;min-height:320px;flex:1 1 auto;background:#000;overflow:hidden;}
.story-watch-media-wrap img,.story-watch-media-wrap video{display:block;width:100%;max-height:68dvh;object-fit:contain;}
.story-watch-status{padding:40px 20px;color:var(--text-2);font-size:13px;text-align:center;}
/* The title and actions sit in a header above the media, clear of the close button. */
.story-watch-details{order:-1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:10px 54px 10px 14px;border-bottom:1px solid var(--line);}
.story-watch-details>div:first-child{display:flex;flex-direction:column;min-width:0;}
.story-watch-details strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.story-watch-details span{overflow:hidden;color:var(--text-3);font-size:12px;text-overflow:ellipsis;white-space:nowrap;}
.story-viewer-actions>button{height:34px;min-height:34px;padding:0 12px;font-size:13px;}
.story-viewer-actions{display:flex;gap:6px;flex:none;}
.story-viewer-actions .btn-secondary,.story-viewer-download{height:34px;min-height:34px;padding:0 12px;font-size:13px;}
.story-download-button{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:var(--r-sm);background:var(--text);color:var(--on-light);font-weight:600;}
.story-download-button .app-icon{width:15px;height:15px;}
.story-watch-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;color:var(--text-3);font-size:12px;}
.story-watch-nav{display:flex;gap:4px;}
.story-watch-nav button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:transparent;color:var(--text-2);font-size:12.5px;font-weight:500;}
.story-watch-nav button:hover:not(:disabled){color:var(--text);background:var(--hover);}
.story-watch-nav button:disabled{opacity:.35;cursor:not-allowed;}
.story-watch-nav .app-icon{width:14px;height:14px;}

/* Vault. */
@media (min-width:768px){.lib-filters-end,.tv-filterbar-end{flex:0 1 auto;flex-wrap:nowrap;}.lib-filters .lib-search{width:260px;}}
.vault-creator-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);}
.vault-creator-header[hidden]{display:none;}
.vault-creator-identity{display:flex;align-items:center;gap:14px;min-width:0;}
.vault-creator-identity img{width:52px;height:52px;flex:none;border-radius:999px;object-fit:cover;background:var(--surface-3);}
.vault-creator-identity h2{font-size:18px;line-height:20px;overflow-wrap:anywhere;}
.vault-creator-identity p{margin:2px 0 0;color:var(--text-2);font-size:13px;}
.vault-creator-link{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.vault-creator-link:hover{color:var(--accent);}
#vaultStatus{margin:0;overflow-wrap:anywhere;}
#vaultStatus:not(:empty){margin:0 0 14px;color:var(--text-2);font-size:13px;}
#vaultMore{display:flex;margin:22px auto 0;}
.vault-select{position:absolute;top:8px;left:8px;z-index:2;display:flex;}
.vault-select span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.vault-card.is-selected .lib-tile{outline:2px solid var(--accent);outline-offset:2px;}
.vault-selection-status{max-height:40vh;overflow:auto;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-3);color:var(--text-2);font-size:13px;box-shadow:var(--shadow-pop);}
.vault-selection-status:empty{display:none;}
.vault-bulk-list{margin:8px 0 0;padding-left:18px;}
.vault-bulk-list a{color:var(--text);}
.vault-viewer{width:min(680px,calc(100% - 32px));max-height:92dvh;padding:0;overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--surface-2);color:var(--text);box-shadow:var(--shadow-pop);}
.vault-viewer[open]{display:flex;flex-direction:column;}
.vault-viewer::backdrop{background:var(--scrim);}
.vault-viewer header{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--line);}
.vault-viewer header h2{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere;}
.vault-viewer-media{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;background:#000;}
.vault-viewer-media img,.vault-viewer-media video{display:block;width:100%;max-height:74dvh;object-fit:contain;background:#000;}
/* The action bar: part navigation left, actions right, one row. */
.vault-viewer footer{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line);}
.vault-viewer-nav{display:flex;align-items:center;gap:2px;}
.vault-viewer-part{min-width:44px;color:var(--text-2);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:center;}
.vault-viewer-actions{display:flex;align-items:center;gap:4px;margin-left:auto;}
.vault-viewer footer .lib-ib{width:34px;height:34px;}
.vault-viewer-favorite[aria-pressed="true"] .app-icon{fill:currentColor;}
.vault-viewer-remove:hover{color:var(--err);}
.vault-viewer-download{height:34px;min-height:34px;margin-left:4px;padding:0 14px;font-size:13px;}
.vault-viewer-download .app-icon{width:15px;height:15px;}
@media (pointer:coarse){.vault-viewer footer .lib-ib{width:40px;height:40px;}.vault-viewer-download{height:40px;min-height:40px;}}
#vaultViewerStatus,#vaultActionStatus{margin:0;padding:8px 14px;color:var(--text-2);font-size:12.5px;}
#vaultViewerStatus:empty,#vaultActionStatus:empty{padding:0;}
#vaultViewerStatus:not(:empty)+#vaultActionStatus:not(:empty){padding-top:0;}

/* Account: subscription block and plan chooser as the account page and the
   pricing modal render them. */
.billing-current{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 24px;}
.billing-current-copy{min-width:0;}
.billing-current-copy .account-card-label{display:flex;align-items:center;gap:8px;margin:0;color:var(--text-2);font-size:12.5px;font-weight:500;}
.billing-current-copy h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:6px 0 0;font-size:20px;line-height:26px;}
.billing-current-copy h3 span{color:var(--text-2);font-size:13.5px;font-weight:400;letter-spacing:0;}
.billing-current-copy h3 span:empty{display:none;}
.billing-current-status{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:6px 0 0;}
.billing-current-status p{color:var(--text-2);font-size:13px;}
.billing-current-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.billing-cancel-button{color:var(--err)!important;}
.billing-plan-change{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 0 0;border-top:1px solid var(--line);}
.billing-plan-change strong{font-size:13px;}
.billing-plan-change p{margin:3px 0 0;color:var(--text-2);font-size:13px;}
#usageArea:empty{display:none;}
#usageArea:not(:empty){margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.tv-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px 24px;}
.tv-stat{display:flex;flex-direction:column;gap:4px;min-width:0;}
.tv-stat>.tv-icon-tile{display:none;}
.tv-stat-label{color:var(--text-2);font-size:12px;}
.tv-stat>.tv-progress{margin-top:4px;}
.plan-comparison-grid,.plan-modal-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
/* The logged-out modal puts its badge before the name; lift it into the corner. */
.plan-comparison-tier>.plan-tier-badge{position:absolute;top:clamp(20px,2vw,28px);right:clamp(20px,2vw,28px);}
@media (min-width:1024px){.plan-tier-tagline{min-height:40px;}}
.plan-tier-current{color:var(--text-3);font-size:12px;}
.ap-plan-foot{margin:14px 0 0;color:var(--text-3);font-size:12.5px;}
.plan-modal{width:min(1180px,100%);padding:28px;background:var(--bg-page);}
.plan-modal-heading{margin:0 0 18px;padding-right:32px;}
.plan-modal-heading p{margin:4px 0 0;color:var(--text-2);font-size:13px;}
.plan-modal-footer,.plan-modal-assurance{margin:14px 0 0;color:var(--text-3);font-size:12.5px;}
.plan-modal-assurance{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;}
.plan-modal-assurance span{display:inline-flex;align-items:center;gap:6px;}
.plan-modal-assurance span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--text-3);margin-left:-8px;}
.plan-modal-close:not(:has(.app-icon)){font-size:20px;line-height:1;}
.plan-benefit-check{width:15px;flex:none;color:var(--text-3);}

/* Analytics preference. */
.analytics-notice{position:fixed;left:16px;bottom:16px;z-index:120;display:flex;align-items:center;gap:14px;width:min(560px,calc(100% - 32px));padding:14px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);box-shadow:var(--shadow-pop);}
.analytics-notice-copy{flex:1;min-width:0;}
.analytics-notice-copy strong{font-size:13.5px;}
.analytics-notice-copy p{margin:2px 0 0;color:var(--text-2);font-size:12.5px;line-height:18px;}
.analytics-notice-copy a{color:var(--accent);text-decoration:none;}
.analytics-notice-actions{display:flex;flex-direction:column;gap:6px;flex:none;}
.analytics-notice-actions button{height:32px;min-height:32px;font-size:12.5px;}

/* 7 ─ Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .tv-pricing,.plan-comparison-grid,.plan-modal-tiers{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tv-example-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .tv-example-grid>:nth-child(n+5){display:none;}
  .tv-features--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tv-steps--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tv-steps--4 li:nth-child(3){border-left:0;}
  .tv-steps--4 li:nth-child(n+3){border-top:1px solid var(--line);}
  .tv-features--stack,.tv-guide-split{grid-template-columns:1fr;}
  .tv-features--stack .tv-feature-block{flex-direction:row;}
  .tv-example-grid--5{grid-template-columns:repeat(5,minmax(0,1fr));}
  .tv-example-grid--5>:nth-child(n+5){display:block;}
  .ap-rows-head,.ap-row{grid-template-columns:minmax(0,1fr) 120px 180px 76px;}
  .ap-rows-head>:nth-child(3),.ap-row>.ap-cell-last{display:none;}
}
@media (max-width:767px){
  :root{--gutter:16px;--header-h:52px;}
  .tv-page{padding-top:20px;padding-bottom:40px;}
  .tv-page-head{align-items:flex-start;}
  .tv-page-head h1{font-size:26px;line-height:32px;}
  .tv-page-head p{font-size:13.5px;line-height:20px;}
  .tv-field.tv-field--add{height:58px;padding:0 6px 0 16px;border-radius:14px;}
  .tv-field.tv-field--add .tv-btn{height:44px;min-height:44px;padding:0 14px;}
  .ap-add-foot .ap-capacity{margin-left:0;}
  .ap-rows:has(>.ap-row){padding:0 16px;border-radius:var(--radius-md);}
  .tv-settings-section{padding:4px 16px;border-radius:var(--radius-md);}
  .tv-plan,.plan-comparison-tier,.tv-settings .plan-comparison-tier{padding:18px;}
  .tv-seg>button,.tv-seg>a,.lib-tab{padding:0 14px;}
  /* Phones keep the same composer, just narrower: the bar keeps the pill
     button on the right, and the headline drops to a phone display size. */
  .tv-hero{min-height:0;justify-content:flex-start;padding:40px 0 32px;}
  /* The headline scales with the phone's width so its longest line spans
     most of the screen instead of sitting in a narrow centred column. */
  .tv-hero h1{font-size:clamp(34px,11vw,50px);line-height:1.12;letter-spacing:-.03em;}
  .tv-hero>p{font-size:14px;line-height:20px;}
  .tv-hero--compact{padding:32px 0 0;}
  .tv-hero--compact h1{font-size:clamp(30px,8.5vw,40px);}
  .tv-action{margin-top:24px;}
  .tv-action .tv-field{min-height:136px;padding:16px 12px 12px 16px;border-radius:18px;}
  .tv-action .tv-field>input{font-size:16px;}
  .tv-action .tv-field>.tv-btn,.tv-action .tv-field>.btn-primary{height:44px;min-height:44px;}
  .tv-modes>button{height:40px;}
  .tv-shortcuts{grid-template-columns:1fr;gap:8px;margin-top:28px;}
  .tv-shortcuts a{flex-direction:row;align-items:center;justify-content:flex-start;min-height:52px;padding:0 16px;}
  .tv-field input,.tv-input,.form-field input,.tv-search input,.lib-search input{font-size:16px;}
  .tv-section{padding:32px 0;}
  .tv-features,.tv-features--4{grid-template-columns:1fr;}
  .tv-features--4 .tv-feature-block{flex-direction:row;}
  .tv-choice{padding:18px;}
  .tv-choice>.tv-btn{align-self:stretch;}
  .compare-scroll{overflow:visible;border:0;border-radius:0;}
  .story-compare-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .story-compare-table,.story-compare-table tbody,.story-compare-table tr,.story-compare-table td{display:block;}
  .story-compare-table tr{margin:0 0 8px;padding:4px 14px;border:1px solid var(--line);border-radius:var(--r-md);}
  .story-compare-table td{display:flex;justify-content:space-between;gap:16px;padding:9px 0;text-align:right;}
  .story-compare-table td:first-child{justify-content:flex-start;text-align:left;}
  .story-compare-table td:not(:first-child)::before{content:attr(data-label);flex:none;color:var(--text-3);font-weight:400;text-align:left;}
  .story-compare-table tr td:last-child{border-bottom:0;}
  .tv-cta{flex-direction:column;align-items:stretch;padding:18px;}
  .tv-cta-actions{flex-wrap:wrap;}
  .tv-cta-actions>*{flex:1 1 auto;}
  .tv-steps{grid-template-columns:1fr;}
  .tv-steps li+li{border-left:0;border-top:1px solid var(--line);}
  .tv-pricing{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 4px;gap:10px;scrollbar-width:none;}
  .tv-pricing>*{flex:0 0 78%;scroll-snap-align:center;}
  .plan-comparison-grid,.plan-modal-tiers{grid-template-columns:1fr;}
  .tv-media-grid,.story-library-grid,.vault-grid,.lib-skeleton-grid,.story-results-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;}
  .lib-meta-row .lib-meta-info{display:none;}
  /* Vault cards keep when each item was saved; the title gives way. */
  .vault-card-info .lib-meta-info{display:block;}
  .vault-card-info .lib-card-title,.vault-card-info .lib-card-sep{display:none;}
  .tv-example-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .tv-example-grid>:nth-child(n+4){display:none;}
  .tv-feed{grid-template-columns:1fr;gap:24px;}
  .tv-feed-grid{gap:8px;}
  .tv-strip{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;margin:16px 0 4px;}
  .tv-strip li+li:not([hidden])::before{display:none;}
  .tv-strip a{padding:4px 0;}
  .tv-filterbar,.lib-filters{gap:10px;}
  .tv-filterbar-end:has(.lib-search,.tv-search),.lib-filters-end:has(.lib-search,.tv-search){width:100%;}
  .tv-filterbar,.lib-filters{flex-wrap:nowrap;}
  .tv-filterbar:has(.lib-search,.tv-search),.lib-filters:has(.lib-search,.tv-search){flex-wrap:wrap;}
  .tv-search,.lib-search{flex:1 1 160px;width:auto;}
  .tv-creator-head{grid-template-columns:auto minmax(0,1fr);gap:14px;}
  .tv-creator-head .tv-avatar--xl{width:64px;height:64px;font-size:22px;}
  .tv-creator-head h1,.tv-creator-head h2{font-size:19px;line-height:24px;}
  .tv-creator-actions{grid-column:1/-1;margin-top:4px;}
  .tv-creator-card{flex-wrap:wrap;}
  .tv-creator-card-actions{width:100%;}
  .tv-creator-card-actions>*{flex:1 1 0;}
  .ap-rows-head{display:none;}
  .ap-row{grid-template-columns:minmax(0,1fr) auto;gap:12px;}
  .ap-row>.ap-cell,.ap-row>.ap-status,.creator-row>.monitoring-status{display:none;}
  .ap-row-id .ap-row-sub{display:flex;align-items:center;gap:6px;}
  .creator-identity .ap-row-nick{display:none;}
  .ap-row-acts .ap-open-stories{display:none;}
  .ap-rows .lib-kebab[open]::before{content:"";position:fixed;inset:0;z-index:60;background:var(--scrim);}
  .ap-rows .lib-kebab[open] .lib-kebab-menu{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:61;min-width:0;padding:10px 12px calc(16px + env(safe-area-inset-bottom));border-radius:var(--r-xl) var(--r-xl) 0 0;border-width:1px 0 0;}
  .ap-rows .lib-kebab[open] .lib-kebab-menu>:not(hr){min-height:46px;font-size:14px;}
  .ap-rows .lib-kebab-menu .ap-sheet-title{display:flex;}
  .billing-current{grid-template-columns:1fr;}
  .billing-current-actions>*{flex:1 1 auto;}
  .tv-row{flex-wrap:wrap;}
  .tv-row>.tv-btn,.tv-row>button{width:100%;}
  .tv-row-value{text-align:left;}
  .story-watch-backdrop{padding:0;}
  .story-watch-modal{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0;}
  .story-watch-media-wrap img,.story-watch-media-wrap video{max-height:none;height:100%;}
  .vault-viewer{width:100%;max-width:100%;max-height:100dvh;height:100dvh;border-radius:0;border:0;}
  .vault-viewer-media img,.vault-viewer-media video{height:100%;max-height:none;}
  .vault-viewer footer{padding-bottom:calc(8px + env(safe-area-inset-bottom));}
  .analytics-notice{left:8px;right:8px;width:auto;bottom:calc(8px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch;}
  .analytics-notice-actions{flex-direction:row;}
  .analytics-notice-actions button{flex:1;}
  .tv-notice{flex-wrap:wrap;}
  .tv-notice-actions{width:100%;padding-left:38px;}
  .tv-footer-top{flex-direction:column;align-items:flex-start;gap:0;}
  .auth-main{padding-top:24px;}
  .auth-form-panel{padding:22px;}
}
@media (max-width:560px){
  /* Three across on phones; a tile opens the viewer, which carries the
     actions, so the per-card action row and quality line step aside. */
  .story-library-card .lib-actions,.story-library-card .lib-meta-row+.lib-meta-row{display:none;}
  .vault-card .lib-actions,.vault-card-info .lib-meta-row:first-child>span{display:none;}
  /* The add action keeps its plus; its words would crowd the field. */
  .tv-field.tv-field--add .tv-btn{width:44px;padding:0;gap:0;font-size:0;}
  .tv-field.tv-field--add .tv-btn .app-icon{width:18px;height:18px;}
  .lib-meta-row strong{font-size:12px;}
  .tv-dl-result{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px;}
  .tv-dl-actions{grid-column:1/-1;}
  .tv-dl-body .tv-dl-actions .tv-btn,.tv-dl-body .tv-dl-vault>button{flex:1 1 0;justify-content:center;height:44px;}
  .tv-dl-photos{grid-template-columns:repeat(3,minmax(0,1fr));}
  .dl-monitor-actions .tv-btn{flex:1 1 auto;min-height:40px;}
  .tv-demo-banner{flex-wrap:wrap;gap:8px 10px;padding:12px;}
  .tv-demo-banner p{flex-basis:calc(100% - 80px);}
  .tv-demo-actions{width:100%;}
  .tv-demo-actions .tv-btn{flex:1;height:40px;min-height:40px;}
  .tv-gate-backdrop{align-items:flex-end;padding:0;}
  .tv-gate{width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;border-width:1px 0 0;padding:22px 18px calc(20px + env(safe-area-inset-bottom));}
}
@media (max-width:340px){
  .tv-media-grid,.story-library-grid,.vault-grid,.lib-skeleton-grid,.story-results-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tv-pricing>*{flex-basis:86%;}
}
/* Phone touch targets: every tappable text link or header control is at
   least 44px tall, even where it looks like plain text. */
@media (max-width:767px){
  .tv-brand{min-height:44px;}
  .tv-topbar-end>.tv-btn{height:44px;min-height:44px;}
  .tv-menu-btn{width:44px;height:44px;}
  .tv-footer-links a,.breadcrumb a,.auth-switch a,.auth-back-link{display:inline-flex;align-items:center;min-height:44px;}
  .tv-footer-links{gap:0 18px;}
  .tv-footer-links a+a::before{content:none;}
  .tv-footer-row{padding:8px var(--gutter) 16px;}
  .tv-footer-note{margin-top:4px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}

/* Save to Vault as vault-save.js appends it to a public download result. */
.download-primary-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:var(--h-md);padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--text);font-size:13.5px;font-weight:600;align-self:flex-start;}
.download-primary-button:hover:not(:disabled){background:var(--surface-3);}
.download-primary-button:disabled{opacity:.6;cursor:default;}

/* 8 ─ Legacy pages on the shared shell ─────────────────────────────────────
   LIVE and the Admin Center still use site.css for their own widgets. These
   rules drop its sidebar grid so the shared header and footer lay out normally. */
body.auth-app[data-shell]{display:block;min-height:100dvh;background:var(--bg);font-family:var(--font);}
body.auth-app[data-shell]>.app-main{width:100%;max-width:var(--page-max);margin:0 auto;padding:28px var(--gutter) 72px;visibility:visible;}
body.auth-app[data-shell] :is(h1,h2,h3,h4){font-family:var(--font);letter-spacing:-.01em;}
body.auth-app[data-shell] .app-page-header h1{font-size:22px;line-height:28px;}

/* Links inside running text. With a monochrome palette colour alone cannot
   mark a link, so these carry a quiet underline that brightens on hover. */
.tv-section-note a,.content-page-intro a,.prose a,.tv-faq a,.faq-item a,.tv-prose a,.tv-feature-block p a,.analytics-notice-copy a,.lib-veil a,.dl-upsell a,.tv-dl-vault>p a{
  text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;text-decoration-thickness:1px;}
.tv-section-note a:hover,.content-page-intro a:hover,.prose a:hover,.tv-faq a:hover,.faq-item a:hover,.tv-prose a:hover,.tv-feature-block p a:hover,.analytics-notice-copy a:hover,.lib-veil a:hover,.dl-upsell a:hover,.tv-dl-vault>p a:hover{text-decoration-color:currentColor;}

/* 9 ─ Vault ─────────────────────────────────────────────────────────────────
   A media library first. Designed for the phone and widened from there: the
   title and one quiet storage line, then type tabs, search, sort and select,
   then the grid, which is what the page is for. */
.tv-page--vault{padding-top:28px;}
.vault-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;margin:0 0 20px;}
.vault-head h1{font-size:32px;line-height:40px;font-weight:700;letter-spacing:-.03em;}
.vault-head-copy{min-width:0;}
.vault-head-copy p{margin:2px 0 0;color:var(--text-2);font-size:14px;line-height:21px;}
.vault-meter{display:flex;flex-direction:column;gap:7px;width:240px;max-width:100%;padding:0 0 4px;}
.vault-meter:empty{display:none;}
.vault-meter-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;color:var(--text-3);font-size:12.5px;line-height:16px;white-space:nowrap;font-variant-numeric:tabular-nums;}
.vault-meter-figures{color:var(--text-2);}
.vault-meter-figures strong{color:var(--text);font-weight:600;}
.vault-meter .tv-progress{height:3px;margin:0;}
.vault-meter-note{margin:0;color:var(--text-3);font-size:12px;line-height:17px;}
.vault-meter.is-warning .vault-meter-note{color:var(--warn);}
.vault-meter.is-full .vault-meter-note{color:var(--err);}
.vault-meter-note a{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px;}

/* Tabs are the one filled control; search is a field, sort a compact
   select and Select a plain text button, so nothing competes equally. */
.vault-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:0 0 20px;}
.vault-tabs{flex:none;}
.vault-tabs .lib-tab{flex:1 0 auto;}
.vault-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1 1 400px;min-width:0;}
.vault-controls .vault-search{flex:0 1 320px;width:auto;min-width:180px;}
/* Select is boxed like Sort, so the two read as a pair of controls. */
.vault-select-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 14px;border:1px solid var(--border-field);border-radius:var(--radius-control);background:var(--bg-card);
  color:var(--text-2);font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:color .15s,border-color .15s;}
/* The icon's wrapper is a flex box too, so the tick centres on the word
   instead of sitting on the text baseline above it. */
.vault-select-toggle>[data-icon]{display:inline-flex;align-items:center;}
.vault-select-toggle .app-icon{width:15px;height:15px;}
.vault-select-toggle:hover{color:var(--text);border-color:var(--border-hover);}
.vault-select-toggle[aria-pressed="true"]{color:var(--text);border-color:var(--accent-line);}
.vault-select-toggle[aria-pressed="true"] .app-icon{color:var(--accent);}
.vault-select-toggle:focus-visible{outline:none;border-color:var(--accent-line);box-shadow:var(--focus);}

.tv-page--vault .vault-grid,.tv-page--vault .lib-skeleton-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px 14px;}
.tv-page--vault .lib-skeleton-tile{aspect-ratio:9/16;border-radius:var(--radius-md);}
.vault-select input{width:22px;height:22px;accent-color:var(--accent);cursor:pointer;}
/* While selecting, a tap on a tile only selects, so card actions step aside. */
.tv-page--vault #vaultItems.is-selecting .lib-actions{display:none!important;}

/* Selecting: one floating bar with the count, Cancel and the bulk actions.
   It exists only while selection mode is on. */
.vault-selection{position:fixed;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom));z-index:58;display:flex;flex-direction:column;gap:8px;width:min(620px,calc(100% - 32px));margin:0 auto;}
@media (min-width:1024px){body.has-side-nav .vault-selection{left:var(--rail-w);}}
.tv-page:has(>.vault-selection:not([hidden])){padding-bottom:128px;}
.vault-selection-bar{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 8px 8px 16px;border:1px solid var(--line-2);border-radius:18px;background:var(--surface-3);box-shadow:var(--shadow-pop);}
.vault-selection-head{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;}
.vault-selection-head p{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;}
.vault-selection-head p.is-empty{font-weight:500;color:var(--text-2);}
.vault-bar-text{height:40px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--text-2);font-size:14px;font-weight:500;cursor:pointer;}
.vault-bar-text:hover{color:var(--text);background:var(--hover);}
.vault-selection-actions{display:flex;align-items:center;gap:6px;flex:none;}
.vault-bar-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;background:transparent;color:var(--text);font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;}
.vault-bar-btn:hover:not(:disabled){background:var(--hover);}
.vault-bar-btn.is-danger{color:var(--err);}
.vault-bar-btn.is-primary{border-color:transparent;background:var(--text);color:var(--on-light);}
.vault-bar-btn.is-primary:hover:not(:disabled){background:#fff;}
.vault-bar-btn:disabled{opacity:.4;cursor:not-allowed;}
.vault-bar-btn .app-icon{width:15px;height:15px;}

/* Small desktop: slimmer tabs leave search room for its whole placeholder. */
@media (min-width:1024px) and (max-width:1199px){.vault-tabs .lib-tab{padding:0 14px;}}
/* Tablet: tabs get their own row and search takes the rest of the next. */
@media (max-width:1023px){
  .vault-toolbar{flex-direction:column;align-items:stretch;}
  .vault-tabs{align-self:flex-start;}
  .vault-controls{flex:none;}
  .vault-controls .vault-search{flex:1 1 auto;min-width:0;}
}

/* Phones: intentional rows, not a squeezed desktop toolbar. */
@media (max-width:639px){
  .tv-page--vault{padding-top:14px;}
  .vault-head{flex-direction:column;align-items:stretch;gap:12px;margin:0 0 16px;}
  .vault-head h1{font-size:26px;line-height:32px;}
  .vault-head-copy p{font-size:13.5px;line-height:19px;}
  .vault-meter{width:100%;gap:6px;padding:0;}
  .vault-toolbar{gap:10px;margin:0 0 14px;}
  /* The tabs keep full-size labels and swipe sideways when they don't fit;
     the far edge fades while there is more to reveal. */
  .vault-tabs{display:flex;width:100%;align-self:stretch;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding:0 4px;}
  .vault-tabs.has-more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);}
  .vault-tabs .lib-tab{height:40px;padding:0 14px;font-size:14px;}
  .vault-controls{flex-wrap:wrap;justify-content:space-between;gap:8px;}
  .vault-controls .vault-search{flex:1 0 100%;width:100%;}
  .vault-controls .vault-search input{height:46px;}
  /* Sort and Select keep their boxes, one at each end of a compact row. */

  /* Two columns of shorter tiles, so a first screen shows real media. */
  .tv-page--vault .vault-grid,.tv-page--vault .lib-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;}
  .tv-page--vault .lib-tile,.tv-page--vault .lib-skeleton-tile{aspect-ratio:3/4;}
  /* Each card keeps one large menu button instead of hover actions. */
  .tv-page--vault .vault-card .lib-actions{display:flex;top:6px;right:6px;opacity:1;}
  .tv-page--vault .vault-card .lib-actions>.lib-ib{display:none;}
  .tv-page--vault .vault-card .lib-actions>.lib-kebab>summary{width:36px;height:36px;}
  /* The card menu opens as a sheet from the bottom, never off the screen. */
  .tv-page--vault .lib-actions:has(.lib-kebab[open]){z-index:80;}
  .tv-page--vault .lib-kebab[open]::before{content:"";position:fixed;inset:0;z-index:60;background:var(--scrim);}
  .tv-page--vault .lib-kebab[open] .lib-kebab-menu{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:61;min-width:0;padding:10px 12px calc(16px + env(safe-area-inset-bottom));
    border-radius:var(--r-xl) var(--r-xl) 0 0;border-width:1px 0 0;}
  .tv-page--vault .lib-kebab[open] .lib-kebab-menu>:not(hr){min-height:48px;font-size:15px;}

  .vault-selection{width:calc(100% - 20px);bottom:calc(env(safe-area-inset-bottom) + 10px);}
  .tv-page:has(>.vault-selection:not([hidden])){padding-bottom:160px;}
  .vault-selection-bar{flex-direction:column;align-items:stretch;gap:6px;padding:6px 8px 8px;}
  .vault-selection-head{justify-content:space-between;padding-left:8px;}
  .vault-bar-text{height:44px;margin-right:-2px;}
  .vault-selection-actions{gap:8px;}
  .vault-selection-actions>.vault-bar-btn{flex:1 1 0;height:44px;padding:0 8px;}
}

/* 10 ─ Home (signed in) ─────────────────────────────────────────────────────
   A personal page, not a second Downloader page: the title, the account at a
   glance, then the shared search / Downloader tool as one compact row, then
   the latest Stories and saves. The centred hero stays on the public pages. */
.tv-home-head{margin-bottom:16px;}
.tv-home-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;max-width:none;margin:0 0 24px;}
.tv-home-stats li{display:flex;min-width:0;}
.tv-home-stats li+li:not([hidden])::before{display:none;}
.tv-home-stats a{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-width:0;padding:14px 16px;border:1px solid var(--border-card);border-radius:var(--radius-md);background:var(--bg-card);transition:border-color .15s;}
.tv-home-stats a:hover{border-color:var(--border-hover);}
.tv-home-stats .tv-strip-value{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:17px;line-height:22px;}

.tv-home-tool{max-width:760px;margin:0 0 8px;}
.tv-home-tool .tv-action{align-items:stretch;max-width:none;margin:0;}
.tv-home-tool .tv-modes{order:-1;justify-content:flex-start;margin:0 0 10px;}
.tv-home-tool .tv-action .tv-field{flex-wrap:nowrap;align-content:center;gap:6px;min-height:0;height:60px;padding:0 8px 0 12px;border-radius:var(--radius-field);}
.tv-home-tool .tv-action .tv-field>input{order:0;flex:1 1 auto;height:100%;}
.tv-home-tool .tv-action .tv-field>.tv-field-icon{order:-1;margin-left:0;}
.tv-home-tool .tv-action .tv-field>input+*{margin-left:0;}
.tv-home-tool .tv-action-foot,.tv-home-tool .tv-action-status{margin-top:10px;text-align:left;}

.tv-home-saves{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;max-width:760px;}
.tv-home-saves .lib-tile{display:block;}
.tv-home-saves .lib-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tv-home-saves .lib-parts{max-width:calc(100% - 52px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:767px){
  .tv-home-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 20px;}
  .tv-home-stats a{padding:12px 14px;}
  .tv-home-tool .tv-action .tv-field{height:56px;}
  .tv-home-tool .tv-action .tv-field>.tv-btn{padding:0 16px;}
  .tv-home-saves{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
}