/* Viewer-first layout; preserve user-selected light theme. */
:root:not([data-theme]), :root[data-theme=dark] {
  --bg:#0f0f0f; --surface:#212121; --raised:#303030; --line:#383838;
  --text:#f1f1f1; --muted:#aaa; --maxw:1680px;
}
.topbar { background:var(--bg); gap:20px; }
.topbar .logo {align-items:center;width:180px;max-width:40vw;}
.topbar .logo img {display:block;width:100%;height:auto;}
@media(max-width:760px) {.topbar .logo {width:150px;}}
:root[data-theme=dark] .topbar {background:#0f0f0f;}
.hero {grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:28px;padding:20px 0 28px;}
.hero-title {font-size:clamp(24px,2.6vw,38px);line-height:1.16;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.hero-light {display:block;}
.hero-screen .thumb {box-shadow:none;border-radius:12px;}
#nav-profile:has(.guest-login-label) {width:auto;min-width:76px;padding:8px 14px;border-radius:20px;white-space:nowrap;text-decoration:none;font-size:15px;}
.nav a { border-radius:20px; }
.grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:28px 20px; }
.account { align-items:start; }
.acc-card { box-shadow:none; }
.acc-nav a { min-height:44px; }
.acc-body { min-width:0; }
.acc-body .panel { box-shadow:none; }
.acc-name h1 { overflow-wrap:anywhere; }
.export-selection { position:sticky;top:64px;z-index:12;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px; }
.export-selection[hidden] {display:none;}
.selecting .card {outline:2px solid var(--line);outline-offset:4px;}
.selecting .card.selected {outline:3px solid var(--accent);background:var(--surface);}
.export-list {display:grid;gap:16px;margin-top:20px;}
.export-item {padding:14px 0;border-top:1px solid var(--line);}
.export-item .btn {margin:4px 8px 4px 0;}
@media(max-width:760px) {
  .hero {grid-template-columns:1fr;gap:14px;padding-top:4px;}
  .hero-title {font-size:24px;-webkit-line-clamp:2;}
  .topbar .nav {display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:4px 6px calc(4px + env(safe-area-inset-bottom));background:var(--bg);max-width:100vw;}
  .nav a {flex:0 0 auto;min-width:60px;}
  #theme-control {display:none;}
  .topbar { gap:8px; }
  .topbar-right { gap:4px; }
  .account { display:block; }
  .acc-side { position:static; width:100%; }
  .acc-card { padding:16px; margin-bottom:12px; }
  .acc-nav { display:flex; overflow-x:auto; gap:6px; padding:4px 0 12px; max-width:100%; }
  .acc-nav a { flex:0 0 auto; border-radius:20px; white-space:nowrap; }
  .acc-nav svg { display:none; }
  .acc-body { margin-top:16px; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
}
@media(max-width:520px) {
  .grid { grid-template-columns:minmax(0,1fr); }
  .page-head { align-items:start; }
  .acc-id { min-width:0; }
  .acc-card .big-av { width:48px; height:48px; flex-shrink:0; }
  .acc-name h1 { font-size:22px; }
  .acc-body .panel { padding:16px; }
}

/* Cover colours carry the atmosphere; text keeps its original contrast. */
.card {--cover-rgb:100 105 120;position:relative;isolation:isolate;padding:10px;
  border-radius:22px;background:linear-gradient(155deg,rgb(var(--cover-rgb)/.24),rgb(var(--cover-rgb)/.08));
  box-shadow:0 6px 24px rgb(var(--cover-rgb)/.12);transition:background .18s,box-shadow .18s;}
.card:hover,.card:focus-visible {background:linear-gradient(155deg,rgb(var(--cover-rgb)/.38),rgb(var(--cover-rgb)/.16));
  box-shadow:0 8px 32px rgb(var(--cover-rgb)/.25);}
.card:focus-visible {outline:2px solid var(--accent);outline-offset:3px;}
.card .thumb,.hero-screen .thumb {border-radius:16px;}
.card > div:not(.thumb) {padding:0 3px 4px;}
.hero {--cover-rgb:100 105 120;}
.hero-light {inset:-36px calc(var(--gutter) * -1) -80px;}
.hero-light img {opacity:.65;filter:blur(60px) saturate(1.45);animation:none;}
.hero-screen .thumb {box-shadow:0 18px 65px rgb(var(--cover-rgb)/.32);}
.panel,.acc-card,.onair,.export-selection {border-radius:22px;}
.btn {border-radius:16px;}
:root[data-theme=light] .card {background:linear-gradient(155deg,rgb(var(--cover-rgb)/.16),rgb(var(--cover-rgb)/.05));}
:root[data-theme=light] .hero-light img {opacity:.3;}
@media(max-width:760px) {
  .card {padding:8px;border-radius:20px;}
  .hero-light {inset:-12px -16px -45px;}
  .hero-light img {filter:blur(36px) saturate(1.35);opacity:.5;}
}
@media(prefers-reduced-motion:reduce) {.card {transition:none;}}

.profile-shortcuts {display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:16px 0 24px;}
.profile-theme {display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.android-page {max-width:1200px;margin:auto;}
.android-intro {padding:48px 0 36px;max-width:800px;}
.android-intro h1 {font-size:clamp(30px,5vw,60px);line-height:1.08;letter-spacing:-.035em;margin:12px 0 20px;}
.android-intro p {max-width:650px;font-size:18px;line-height:1.6;}
.android-intro .row {margin-top:24px;}
.app-device {display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:36px;margin:24px 0 48px;border-radius:30px;background:var(--surface);scroll-margin-top:90px;animation:app-enter .45s ease-out both;}
.app-preview {display:flex;align-items:center;justify-content:center;min-width:0;border-radius:24px;padding:24px;background:radial-gradient(ellipse at center,#7b482d66,transparent 72%);}
.app-preview.phone img {width:100%;max-width:100%;max-height:520px;object-fit:contain;border-radius:24px;box-shadow:0 18px 48px #0005;}
.app-preview.tv img {width:100%;border-radius:16px;box-shadow:0 18px 48px #0005;}
.app-device-copy {min-width:0;}.app-device-copy h2 {font-size:30px;margin-bottom:12px;}
.app-device-copy p {line-height:1.65;}.app-download {display:flex;align-items:flex-start;flex-direction:column;gap:10px;margin:24px 0;}
.app-steps {padding-left:22px;line-height:1.65;}.app-steps li {padding:6px 0 6px 6px;}
.app-browser {padding:32px;border-radius:24px;background:var(--surface);margin-bottom:40px;}
.app-browser .btn {margin-top:16px;}
@keyframes app-enter {from {opacity:0;transform:translateY(12px);}to {opacity:1;transform:none;}}
html[data-motion=full] {scroll-behavior:smooth;}
html[data-motion=reduced] .app-device,html[data-motion=reduced] .card {animation:none;transition:none;}
@media(max-width:760px) {.android-intro {padding:24px 0 12px;}.app-device {grid-template-columns:1fr;padding:20px;gap:24px;margin-bottom:24px;}.app-preview {padding:12px;}.app-device-copy h2 {font-size:26px;}.app-preview.phone img {max-height:420px;}}
@media(prefers-reduced-motion:reduce) {.app-device {animation:none;}html[data-motion=full] {scroll-behavior:auto;}}
@media(max-width:640px) {
  .topbar .logo {width:116px;}
  .topbar .tv-link span {display:inline;}
  .topbar .tv-link svg {display:none;}
  .topbar .tv-link {padding:8px 10px;font-size:13px;}
}