/* Moonwake Studio (web) — Marin theme, tokens shared with the desktop app. */
@font-face { font-family: "Cinzel"; font-weight: 500; font-display: swap; src: url("/fonts/cinzel-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }

:root {
  --bg: #0b0a10;
  --bg-2: #110f17;
  --panel: #15121c;
  --panel-2: #1b1724;
  --line: rgba(214, 180, 122, 0.14);
  --line-strong: rgba(214, 180, 122, 0.34);
  --gold: #d6b47a;
  --gold-bright: #f0d9a8;
  --pink: #ec8fb1;
  --pink-deep: #c9668d;
  --text: #ece2d2;
  --muted: #9d9488;
  --dim: #6b6474;
  --good: #8fd3a8;
  --bad: #f08a8a;
  --warn: #e8c46b;
  --tiktok: #6fe3e8;
  --radius: 14px;
  --serif: "Cinzel", Georgia, serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font: 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--gold-bright); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: 0.04em; margin: 0; }
h2 { font-size: 17px; color: var(--gold); }
h3 { font-size: 15px; color: var(--gold-bright); }
p { margin: 0; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.bad { color: var(--bad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.backdrop { position: fixed; inset: 0; z-index: -1; background:
  radial-gradient(1100px 600px at 92% -10%, rgba(214, 180, 122, 0.1), transparent 60%),
  radial-gradient(900px 700px at -10% 110%, rgba(236, 143, 177, 0.07), transparent 60%), var(--bg); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.notice { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(214, 180, 122, 0.07); font-size: 14px; }

/* Buttons */
button, .btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px;
  border-radius: 10px; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--text); text-decoration: none;
  transition: border-color .15s, background .15s, filter .15s, transform .15s; }
button:hover, .btn:hover { border-color: var(--gold); }
.primary { background: linear-gradient(180deg, #e6c78f, #c49c5e); color: #1a1408; border: 1px solid #f3dcae; font-weight: 600; }
.primary:hover { filter: brightness(1.06); }
.big { padding: 13px 20px; font-size: 16px; border-radius: 12px; }
.ghost { background: transparent; }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
button.link { background: none; border: 0; color: var(--gold); padding: 0; font-size: 13px; }
.danger { color: var(--bad); }

/* Header & footer */
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line);
  background: rgba(11, 10, 16, .72); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-right: auto; min-width: 0; }
.brand img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); box-shadow: 0 0 0 4px rgba(214, 180, 122, .06); }
.brand-name { display: block; font-family: var(--serif); font-size: 17px; letter-spacing: .12em; color: var(--gold-bright); white-space: nowrap; }
.brand-sub { display: block; font-size: 11px; color: var(--muted); letter-spacing: .06em; }

.site-footer { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 22px clamp(16px, 4vw, 40px);
  border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer a { color: var(--gold); }
.site-footer > .muted { margin-left: auto; }

/* Landing */
.landing main { width: min(1120px, 100%); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 56px; display: flex; flex-direction: column; gap: 44px; }
.hero { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding-top: 48px; }
.hero-art { position: relative; order: 2; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px -30px rgba(236, 143, 177, .35), 0 0 0 6px rgba(214, 180, 122, .04); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 50%, rgba(11, 10, 16, .55)); }
.hero-copy { display: flex; flex-direction: column; gap: 18px; }
.eyebrow { font-family: var(--serif); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--pink); }
.moon { color: var(--gold); margin-right: 4px; }
.hero h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.12; color: var(--gold-bright); }
.hero h1 em { font-style: normal; color: var(--pink); }
.lead { font-size: 17px; color: var(--text); opacity: .88; max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.tiktok-btn svg { color: #1a1408; }

.section-title { font-size: 14px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 14px; }
.avail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.avail-card { display: flex; flex-direction: column; gap: 12px; }
.avail-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); font-size: 14px; }
.avail-list b { color: var(--text); font-weight: 600; }
.avail-list .badge { margin-left: 4px; padding: 1px 8px; font-size: 11px; }
.badge.now { border-color: rgba(143, 211, 168, .5); color: var(--good); background: rgba(143, 211, 168, .08); }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.step p { color: var(--muted); font-size: 14px; }
.step-num { font-family: var(--serif); font-size: 13px; color: var(--pink); letter-spacing: .1em; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-2); }
.trust { display: flex; gap: 22px; align-items: flex-start; }
.trust-icon { width: 72px; height: 72px; border-radius: 18px; flex: none; object-fit: cover; border: 1px solid var(--line-strong); }
.plain { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; }
.plain b { color: var(--text); }

/* Studio shell: sidebar + content, like the desktop app */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 18px 12px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-right: 1px solid var(--line); overflow-y: auto; }
.sidebar .brand { margin: 0; padding: 0 6px; flex: none; }
.sidebar .brand img { width: 46px; height: 46px; }
.sidebar .brand-name { font-size: 19px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; }
.nav a:hover { background: rgba(214, 180, 122, .06); color: var(--text); }
.nav a.on { background: rgba(214, 180, 122, .11); color: var(--gold-bright); box-shadow: inset 2px 0 0 var(--gold); }
.account-nav { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; flex: 1; min-height: 0; }
.family-name { font-family: var(--serif); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); padding: 0 12px 2px; }
.account-switch { display: flex; flex-direction: column; gap: 2px; }
.account-pill { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); text-align: left; text-decoration: none; justify-content: flex-start; font-size: 14px; }
.account-pill:hover { background: rgba(214, 180, 122, .06); color: var(--text); border: 0; }
.account-pill.on { background: rgba(236, 143, 177, .1); color: var(--text); box-shadow: inset 2px 0 0 var(--pink); }
.account-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.account-pill.add { color: var(--gold); }
.add-icon { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--line-strong); }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.sidebar-legal { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 12px; font-size: 12px; }
.sidebar-legal a { color: var(--muted); }

.content { min-width: 0; }
.page { max-width: 1240px; margin: 0 auto; padding: 26px clamp(16px, 3vw, 32px) 40px; display: flex; flex-direction: column; gap: 18px; }
.page > section[data-view] { display: flex; flex-direction: column; gap: 18px; }
.page-header { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.page-header h1 { font-size: 26px; color: var(--gold-bright); }
.page-sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.page-controls { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-footer { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.flash.bad { border-color: rgba(240, 138, 138, .45); color: var(--bad); background: rgba(240, 138, 138, .07); }
.icon-button, .icon-link { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 9px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); }
.icon-button:hover, .icon-link:hover { color: var(--text); border-color: var(--line-strong); }
.card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.card-head > :last-child:not(:first-child) { margin-left: auto; }
.center-card { max-width: 520px; margin: 40px auto; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.spinner { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--pink); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px; color: var(--muted); }
.moon-glyph { font-size: 24px; color: var(--gold); }
.error-note { padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(240, 138, 138, .35); background: rgba(240, 138, 138, .07); color: var(--bad); font-size: 14px; }
.warn { color: var(--warn); }
.notice.reconnect { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-color: var(--warn); }
.notice.reconnect > div { flex: 1 1 280px; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--pink-deep); color: var(--pink); background: rgba(236, 143, 177, .08); white-space: nowrap; }
.badge.soon { border-color: var(--line-strong); color: var(--gold); background: rgba(214, 180, 122, .08); }

/* Numbers */
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-row .stat { flex: 1 1 140px; }
.stat-row .stat.big { flex: 1.6 1 200px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.stat-row.compact .stat { background: var(--bg-2); padding: 12px 14px; }
.stat-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat.big { background: linear-gradient(135deg, rgba(214, 180, 122, .12), transparent 70%), var(--panel); border-color: var(--line-strong); }
.stat.big .stat-value { font-size: 32px; color: var(--gold-bright); }
.stat-note { font-size: 12px; color: var(--muted); }

/* Account card (Home) */
.account-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.account-card-main { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 0; }
.account-card-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; font-size: 20px; color: var(--gold-bright); }
.verified { color: var(--tiktok); display: inline-flex; }
.avatar { width: 52px; height: 52px; flex: none; display: inline-block; position: relative; }
.avatar.sm { width: 30px; height: 30px; }
.avatar img, .avatar-letter { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; background: var(--panel-2); font-family: var(--serif); color: var(--gold); }
.avatar-badge { position: absolute; right: -3px; bottom: -3px; display: flex; padding: 2px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); }
.icon.i-tiktok { color: var(--tiktok); }
.icon.i-youtube { color: #ff5a52; }
.icon.i-instagram { color: #f27ab8; }

/* Views chart (inline SVG, one hue) */
.views-chart { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.chart-body { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
.chart-scale { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-size: 11px; color: var(--dim); height: 180px; }
.chart-plot { min-width: 0; height: 180px; }
.chart-plot svg { display: block; overflow: visible; }
.chart-plot .grid { stroke: var(--line); stroke-dasharray: 2 4; }
.chart-plot .baseline { stroke: var(--line-strong); }
.chart-plot .hit { fill: transparent; }
.chart-plot .bar { fill: var(--gold); opacity: .85; }
.chart-plot .bar-slot { cursor: default; outline: none; }
.chart-plot .bar-slot.on .hit, .chart-plot .bar-slot:focus-visible .hit { fill: rgba(214, 180, 122, .07); }
.chart-plot .bar-slot.on .bar, .chart-plot .bar-slot:focus-visible .bar { fill: var(--pink); opacity: 1; }
.chart-readout { margin-left: 52px; font-size: 13px; min-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Video rows */
.post-list { display: flex; flex-direction: column; }
.post-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto auto 32px; gap: 14px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line); }
.post-row:first-child { border-top: 0; }
.post-thumb { width: 40px; height: 54px; border-radius: 7px; overflow: hidden; background: var(--bg-2); display: flex; align-items: center; justify-content: center; flex: none; }
.post-thumb.md { width: 44px; height: 60px; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-main { display: flex; flex-direction: column; min-width: 0; }
.post-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-meta { font-size: 12px; color: var(--muted); }
.post-num { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.post-num b { color: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

.table { padding: 4px 0; }
.table-head, .table-row { display: grid; grid-template-columns: minmax(220px, 3fr) 110px 70px 80px 70px 80px 70px 40px; gap: 12px; align-items: center; padding: 8px 16px; }
.table-head { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.table-row { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.table-row:last-child { border-bottom: 0; }
.table-row:hover { background: rgba(214, 180, 122, .04); }
.video-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.row-actions { display: flex; justify-content: flex-end; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; }

/* Accounts & settings */
.connection-list { display: grid; gap: 14px; }
.connection-list.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.connection { display: flex; flex-direction: column; gap: 14px; }
.connection.selected { border-color: var(--pink-deep); }
.connection.soon { opacity: .75; }
.connection-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.connection-name { display: flex; flex-direction: column; flex: 1; min-width: 160px; }
.connection-name strong { font-size: 16px; }
.connection-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.connection-actions form { margin: 0; }
.platform-tile-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); }
.scope-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.scope-list li { display: grid; grid-template-columns: 16px 150px 1fr auto; gap: 8px; align-items: baseline; color: var(--muted); }
.scope-list li.ok .icon { color: var(--good); }
.scope-list li.missing { color: var(--warn); }
.scope-list code { color: var(--gold-bright); font-size: 12px; }
.scope-list em { font-style: normal; font-size: 12px; }
.section-title { display: flex; align-items: center; gap: 8px; margin: 6px 0 -4px; }
.settings-block { display: flex; flex-direction: column; gap: 12px; }
.settings-block form { margin: 0; }
.settings-accounts { display: flex; flex-direction: column; }
.settings-account { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.settings-account:first-child { border-top: 0; }
.settings-account-name { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.danger-zone { border-color: rgba(240, 138, 138, .3); }
button.danger { color: var(--bad); border-color: rgba(240, 138, 138, .35); }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.confirm-card { max-width: 480px; }
.confirm-list { text-align: left; }
.confirm-card form { margin: 0; }
.posting-hint { font-size: 12px; color: var(--dim); }

.composer { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 24px; align-items: start; }
.preview-col { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 10px; }
.dropzone { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 9 / 16; max-height: 72vh; padding: 16px;
  border-radius: var(--radius); border: 1.5px dashed var(--line-strong); background:
  radial-gradient(400px 300px at 50% 0%, rgba(236, 143, 177, .07), transparent 70%), var(--panel); color: var(--muted); overflow: hidden; }
.dropzone:hover, .dropzone.dragging { border-color: var(--pink); }
.dropzone.has-video { padding: 0; border-style: solid; background: #000; cursor: default; }
.dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.dropzone video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.dropzone-hint { width: 100%; height: 100%; justify-content: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.dropzone-hint svg { color: var(--pink); }
.dropzone-hint strong { color: var(--text); font-family: var(--serif); font-weight: 500; font-size: 17px; letter-spacing: .06em; }
.file-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.file-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.form-col { display: flex; flex-direction: column; gap: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; min-width: 0; }
.posting-to { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.posting-to div { display: flex; flex-direction: column; min-width: 0; }
.posting-to strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; }
.label-caps { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, legend, .legend, .field-head label { display: block; font-weight: 600; padding: 0; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; }
.counter { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--bad); }
input[type="text"], textarea, select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); outline: none; }
textarea { resize: vertical; min-height: 96px; }
textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(214, 180, 122, .12); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
select:invalid, select option[value=""] { color: var(--muted); }
option { background: var(--panel-2); color: var(--text); }
option:disabled { color: var(--dim); }
.hint { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.hint.warn { color: var(--warn); }
.field-error { font-size: 13px; color: var(--bad); }

.check-row { display: flex; flex-wrap: wrap; gap: 10px; }
.check { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; }
.check:has(input:checked) { border-color: var(--pink-deep); background: rgba(236, 143, 177, .08); }
.check.block { display: flex; align-items: flex-start; }
.check.block > span { display: flex; flex-direction: column; gap: 2px; }
.check.is-disabled { opacity: .45; cursor: not-allowed; }
input[type="checkbox"] { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--pink); flex: none; }

.disclosure { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.switch-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.switch { position: relative; flex: none; width: 46px; height: 26px; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.switch span[aria-hidden] { position: absolute; inset: 0; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line-strong); transition: background .15s; pointer-events: none; }
.switch span[aria-hidden]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + span { background: rgba(236, 143, 177, .3); border-color: var(--pink); }
.switch input:checked + span::after { transform: translateX(20px); background: var(--pink); }
.switch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.disclosure-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.disclosure-panel .check { background: var(--panel); }
.label-preview { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--pink-deep); background: rgba(236, 143, 177, .08); color: var(--pink); font-size: 14px; }

.consent { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.declaration { font-size: 14px; }
.blockers { margin: 0; padding: 0 0 0 18px; color: var(--muted); font-size: 13px; }
.blockers:empty { display: none; }
.post-wrap { display: block; }
.post-wrap button { width: 100%; }

.progress-card { max-width: 620px; margin: 40px auto; display: flex; flex-direction: column; gap: 16px; }
.progress-head { display: flex; gap: 14px; align-items: center; }
.progress-head h2 { font-size: 20px; color: var(--gold-bright); }
.progress-head h2.bad { color: var(--bad); }
.bar { height: 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.bar span { display: block; height: 100%; width: 2%; background: linear-gradient(90deg, var(--pink-deep), var(--gold)); transition: width .3s; }
.progress-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Error page */
.page-error { align-items: center; justify-content: center; padding: 16px; }
.error-card { max-width: 440px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; margin: auto; }
.error-card h1 { font-size: 24px; color: var(--gold-bright); }
.error-pfp { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); }

/* Small screens */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { min-width: 0; }
  .account-nav, .account-switch { min-width: 0; }
  .sidebar { position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px;
    border-right: 0; border-bottom: 1px solid var(--line); background: rgba(11, 10, 16, .94); backdrop-filter: blur(10px); overflow: visible; }
  .sidebar .brand img { width: 34px; height: 34px; }
  .sidebar .brand-name { font-size: 16px; }
  .nav { order: 3; flex-direction: row; width: 100%; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .nav a { padding: 6px 10px; flex: none; font-size: 14px; }
  .nav a.on { box-shadow: inset 0 -2px 0 var(--gold); }
  .account-nav { order: 2; flex: 1; flex-direction: row; align-items: center; border-top: 0; padding-top: 0; min-width: 0; justify-content: flex-end; }
  .family-name, .sidebar-legal { display: none; }
  .account-switch { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 3px; }
  .account-pill { width: auto; padding: 2px; flex: none; border-radius: 50%; }
  .account-pill .account-pill-name { display: none; }
  .account-pill.on { box-shadow: 0 0 0 2px var(--pink); }
  .page { padding-top: 18px; }
  .page-header h1 { font-size: 22px; }
  .table-head { display: none; }
  .table-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; padding: 12px 14px; }
  .table-row .video-cell { grid-column: 1 / 4; }
  .table-row .row-actions { grid-column: 4; grid-row: 1; }
  .table-row [data-label]::before { content: attr(data-label); display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 400; }
  .hide-sm { display: none; }
  .post-row { grid-template-columns: 40px minmax(0, 1fr) auto 32px; }
  .scope-list li { grid-template-columns: 16px 1fr; }
  .scope-list li > span:not(.dot), .scope-list li em { grid-column: 2; }
  .hero { grid-template-columns: 1fr; padding-top: 24px; gap: 24px; }
  .hero-art { order: 0; aspect-ratio: 16 / 9; }
  .step-list, .avail-grid { grid-template-columns: 1fr; }
  .composer { grid-template-columns: 1fr; }
  .preview-col { position: static; }
  .dropzone { aspect-ratio: auto; min-height: 220px; max-height: 60vh; }
  .dropzone.has-video { aspect-ratio: 9 / 16; }
  .site-footer > .muted { margin-left: 0; }
}
@media (max-width: 520px) {
  .brand-sub, .account-name { display: none; }
  .trust { flex-direction: column; }
  .form-col { padding: 16px; }
  .switch-row { gap: 10px; }
  .hero-actions .btn { width: 100%; }
}

/* Consent page (desktop app / assistant connector sign-in) */
.consent-card { max-width: 520px; text-align: left; align-items: stretch; }
.consent-card > img, .consent-card > h1 { align-self: center; }
.consent-card > h1, .consent-card > #consent-who { text-align: center; }
.consent-section { display: flex; flex-direction: column; gap: 6px; }
.consent-section h2 { font-size: 14px; }
.consent-list.can li::marker { content: "\2713  "; color: var(--good); }
.consent-list.cannot li::marker { content: "\2715  "; color: var(--bad); }
.consent-actions { justify-content: center; }
#consent-switch { align-self: center; }
#consent-client.warn, #consent-return.warn { color: var(--warn); }

/* Draft from the user's assistant, above the composer */
.draft-banner { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.draft-banner .link { align-self: flex-start; }

/* Connector setup guide */
.guide { max-width: 760px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 40px) 48px; display: flex; flex-direction: column; gap: 18px; }
.guide h1 { font-size: clamp(26px, 4vw, 36px); color: var(--gold-bright); }
.guide ol, .guide ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text); }
.guide code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 13px; word-break: break-all; }
.guide .status { align-self: flex-start; }

/* YouTube (1.3.0) */
.icon.yt-red, .yt-red { color: #ff0000; }
.yt-attrib { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.post-thumb.wide { width: 72px; height: 40px; }
.post-row.yt-row { grid-template-columns: 72px minmax(0, 1fr) auto auto auto 0 32px; }
.yt-table .table-head, .yt-table .table-row { grid-template-columns: minmax(240px, 3fr) 110px 70px 90px 80px 70px 80px 40px; }
.yt-table .video-cell .post-thumb { flex: none; }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.section-row .section-title { margin: 0; }
.dropzone.yt { aspect-ratio: 16 / 9; }
.dropzone.yt.has-video { aspect-ratio: 16 / 9; }
.choice-list { display: grid; gap: 8px; }
.choice-list.two { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.check.choice { background: var(--bg-2); }
.check.choice:has(input:checked) { border-color: var(--pink-deep); background: rgba(236, 143, 177, .08); }
input[type="radio"] { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--pink); flex: none; }
.kids { padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
.kids .check.choice { background: var(--panel); }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chips:empty { display: none; }
.tag-chip { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12px; background: var(--bg-2); }
.yt-preview { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line-strong); }
.yt-summary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; }
.yt-summary dt { color: var(--muted); }
.yt-summary dd { margin: 0; overflow-wrap: anywhere; }
.yt-summary dd.missing { color: var(--warn); }
.google-btn { background: #fff; color: #1f1f1f; border-color: #747775; font-family: "Inter", system-ui, sans-serif; font-weight: 500; }
.google-btn:hover { background: #f2f2f2; color: #1f1f1f; }
.app-footer a { color: inherit; text-decoration: underline; }
@media (max-width: 860px) {
  .post-row.yt-row { grid-template-columns: 72px minmax(0, 1fr) auto 32px; }
  .yt-table .table-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .yt-summary { grid-template-columns: 1fr; }
  .yt-summary dd { margin-bottom: 6px; }
}