/* A restrained shared palette, generous content spacing and consistent cards. */
:root {
  --paper:#f5f7f7; --surface:#fff; --surface-alt:#edf2f1;
  --text:#202d2b; --muted:#61716d; --line:#dfe7e4;
  --accent:#176b58; --accent-dark:#10513f;
  --coral:#ab583c; --teal:#176b58; --violet:#695487; --blue:#426f87;
  --shadow:0 4px 18px #163c2f06;
  --card-shadow:0 3px 12px #163c2f05;
}
body.dark {
  --paper:#111a1d; --surface:#192529; --surface-alt:#223238;
  --text:#edf4f1; --muted:#a5b9b2; --line:#324549;
  --accent:#8cdbc2; --accent-dark:#ade9d6;
  --coral:#eab499; --teal:#8cdbc2; --violet:#c1afdf; --blue:#a1cadd;
  --shadow:0 4px 18px #00000016; --card-shadow:0 3px 12px #00000015;
}
body { --section-tone:var(--teal); background:var(--paper); }
body[data-area="music"] { --section-tone:var(--violet); }
::selection { background:color-mix(in srgb,var(--teal) 20%,transparent); }
.sidebar { background:var(--surface); }
.sidebar .brand-mark { background:#b76a4d; box-shadow:none; }
.sidebar .nav-item { color:var(--muted); }
.sidebar .nav-item.active { background:color-mix(in srgb,var(--teal) 9%,var(--surface)); color:var(--teal); box-shadow:none; }
.sidebar .nav-item.active svg { color:var(--teal); }
.sidebar .nav-item:hover { background:var(--surface-alt); color:var(--text); }
.topbar { border-color:var(--line); box-shadow:var(--shadow); }
.topbar .user-avatar { background:var(--surface-alt); color:var(--teal); border:1px solid var(--line); }
.page-heading .eyebrow { color:var(--section-tone); }
.button { box-shadow:none; }
.button:hover { border-color:color-mix(in srgb,var(--teal) 28%,var(--line)); background:var(--surface-alt); }
.button.primary { background:#176b58; border-color:#176b58; color:#fff; box-shadow:none; }
.button.primary:hover { background:#10513f; border-color:#10513f; }
.discovery-tabs a[aria-current] { color:var(--teal); border-color:var(--teal); }
.discovery-page .topic { color:var(--muted); border-color:var(--line); background:var(--surface); border-radius:22px; }
.discovery-page .topic:hover { background:var(--surface-alt); color:var(--text); }
.discovery-page .topic.selected { background:var(--text); border-color:var(--text); color:var(--surface); box-shadow:none; }
:is(.panel,.settings-card,.settings-group,.shortlist,.channel-feature) { border:1px solid var(--line); background:var(--surface); box-shadow:var(--card-shadow); }
.settings-workspace :is(.panel,.settings-card) { border-radius:16px; }
.settings-card>h2 { padding-bottom:12px; border-bottom:1px solid var(--line); }
.metric-grid>div { border:1px solid var(--line); background:var(--surface); box-shadow:var(--card-shadow); }
.metric-grid h2 { color:var(--text); font-variant-numeric:tabular-nums; }
.metric-grid small { color:var(--muted); }
.video-card { padding:0; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--card-shadow); transition:border-color .2s,box-shadow .2s; }
.video-card .thumbnail { border-radius:15px 15px 0 0; }
.video-card .card-details { padding:15px 14px 17px; }
.video-card:focus-within { border-color:var(--teal); }
.video-card .card-copy h3 { line-height:1.5; }
@media(hover:hover) {
  .video-card:hover { border-color:color-mix(in srgb,var(--teal) 27%,var(--line)); box-shadow:0 7px 20px #163c2f0d; }
  body.dark .video-card:hover { box-shadow:0 7px 20px #00000025; }
  .video-card:hover .thumbnail { transform:none; box-shadow:none; }
}
.creator-avatar { background:var(--surface-alt); color:var(--teal); border:1px solid var(--line); }
.quality-label { background:#152f2cd9; border:1px solid #ffffff24; }
.featured-film { box-shadow:var(--shadow); }
.shortlist .rank { color:var(--muted); }
.shortlist .small-emblem { color:var(--teal); }
.shortlist .eyebrow { color:var(--muted); }
.collection-hero { border-color:var(--line); background:color-mix(in srgb,var(--section-tone) 5%,var(--surface)); box-shadow:none; }
.collection-kids .collection-hero { background:color-mix(in srgb,var(--teal) 5%,var(--surface)); }
.table-scroll { background:var(--surface); border-color:var(--line); }
.content-table thead,.content-table th { background:var(--surface-alt); color:var(--text); }
.content-table tbody tr:nth-child(even) { background:color-mix(in srgb,var(--surface-alt) 30%,var(--surface)); }
.content-table tbody tr:hover { background:var(--surface-alt); }
.content-table tr:has(input[type=checkbox]:checked) { background:color-mix(in srgb,var(--teal) 8%,var(--surface)); }
.tag { background:var(--surface-alt); color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:4px 8px; }
.youtube-import-row { margin-top:12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.youtube-import-row:last-child { padding-bottom:16px; }
.youtube-import-row [data-youtube-job] { color:var(--teal); }
.bulk-recent { padding:14px 12px; border-radius:10px; gap:12px; }
.bulk-recent:hover { background:var(--surface-alt); }
.empty { background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.empty-symbol,.notification-symbol { background:var(--surface-alt); color:var(--section-tone); border:1px solid var(--line); }
.watch-page .related .video-card { padding:8px; border-radius:13px; }
.watch-page .related .video-card .thumbnail { border-radius:8px; }
.watch-page .related .video-card .card-details { padding:3px 1px; }
.watch-page .description { background:var(--surface); border:1px solid var(--line); box-shadow:none; }
.notice { background:color-mix(in srgb,var(--teal) 8%,var(--surface)); color:var(--teal); border-color:color-mix(in srgb,var(--teal) 25%,var(--line)); }
.notice.error { background:color-mix(in srgb,var(--coral) 8%,var(--surface)); color:var(--coral); border-color:color-mix(in srgb,var(--coral) 25%,var(--line)); }
/* Collection pages share the feed grid, with an illustrated introduction. */
.collection-welcome { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(220px,1fr); align-items:center; gap:24px; padding:32px 36px; border:1px solid var(--line); border-radius:22px; background:#eaf3ef; margin-bottom:24px; overflow:hidden; }
body.dark .collection-welcome { background:#1b302b; }
.collection-music .collection-welcome { background:#f0edf5; }
body.dark .collection-music .collection-welcome { background:#292634; }
.collection-welcome .eyebrow { color:var(--section-tone); font-size:10px; letter-spacing:1.5px; margin-bottom:14px; }
.collection-welcome h1 { font-size:clamp(30px,3.2vw,44px); line-height:1.12; letter-spacing:-1.5px; margin:0 0 16px; }
.collection-welcome p { color:var(--muted); font-size:13px; line-height:1.8; margin:0 0 20px; }
.collection-caption { display:inline-flex; align-items:center; gap:8px; font-size:11px; color:var(--section-tone); }
.collection-caption svg { width:16px; height:16px; }
.collection-illustration { color:var(--section-tone); width:100%; max-width:380px; justify-self:end; }
.collection-illustration svg { display:block; width:100%; height:auto; }
.collection-browser { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:28px; }
.collection-page .collection-search { display:grid; grid-template-columns:minmax(0,1fr) 160px auto; align-items:center; gap:10px; width:100%; max-width:none; margin:0; }
.collection-search-input { display:flex; align-items:center; gap:10px; min-width:0; padding:0 13px; background:var(--paper); border:1px solid var(--line); border-radius:10px; color:var(--muted); }
.collection-search-input:focus-within { border-color:var(--teal); box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 10%,transparent); }
.collection-search-input svg { width:17px; height:17px; }
.collection-search-input input { width:100%; min-width:0; background:transparent; border:0; padding:12px 0; outline:none; box-shadow:none; }
.collection-page .collection-search .luma-select,.collection-page .collection-search select { width:100%; max-width:none; }
.collection-page .collection-search .button { height:46px; }
.collection-browser .topics { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.collection-results .section-heading { margin-bottom:18px; }
.collection-results .section-heading h2 { font-size:22px; }
.collection-page .collection-empty { display:flex; align-items:center; justify-content:flex-start; gap:20px; text-align:left; padding:28px; }
.collection-empty .empty-symbol { flex:none; width:52px; height:52px; margin:0; border-radius:14px; }
.collection-empty h2 { font-size:17px; margin:0 0 7px; letter-spacing:-.25px; }
.collection-empty p { max-width:560px; margin:0; font-size:12px; }
.collection-empty .subtle-link { margin-top:12px; color:var(--teal); }
@media(max-width:760px) {
  .collection-welcome { grid-template-columns:minmax(0,1.5fr) minmax(120px,1fr); padding:26px; gap:12px; }
  .collection-welcome h1 { font-size:32px; }
  .collection-welcome p br { display:none; }
  .collection-page .collection-search { grid-template-columns:minmax(0,1fr) 140px auto; }
}
@media(max-width:540px) {
  .video-card .card-details { padding:14px 12px 16px; }
  .youtube-import-row { padding:14px; }
  .youtube-import-row:last-child { padding-bottom:14px; }
  .bulk-recent { flex-wrap:wrap; }
  .bulk-recent>span:first-child { flex-basis:100%; }
  .collection-welcome { grid-template-columns:minmax(0,1fr); padding:24px; position:relative; border-radius:18px; }
  .collection-welcome h1 { font-size:34px; }
  .collection-welcome-copy { position:relative; z-index:1; }
  .collection-illustration { position:absolute; right:-36px; bottom:-25px; width:165px; opacity:.14; pointer-events:none; }
  .collection-welcome p { max-width:245px; }
  .collection-welcome .collection-caption { font-size:10px; }
  .collection-browser { padding:12px; margin-bottom:24px; }
  .collection-page .collection-search { grid-template-columns:minmax(0,1fr) auto; }
  .collection-search-input { grid-column:1/-1; }
  .collection-page .collection-empty { padding:22px; align-items:flex-start; gap:14px; }
  .collection-empty .empty-symbol { width:40px; height:40px; border-radius:11px; }
  .collection-empty .empty-symbol svg { width:21px; height:21px; }
  .collection-results .section-heading { flex-wrap:wrap; gap:12px; }
}
@media(prefers-reduced-motion:reduce) { .video-card { transition:none; } }