/* Snatch – premium dark UI. Mobile-first; tokens first, components after. */
:root {
    --theme-bg: #090806;
    --theme-surface: #17140d;
    --theme-surface-2: #252012;
    --theme-border: rgba(212, 175, 55, .2);
    --theme-glow: rgba(212, 175, 55, .13);
    --bg: var(--theme-bg);
    --surface: color-mix(in srgb, var(--theme-surface) 84%, transparent);
    --surface-2: color-mix(in srgb, var(--theme-surface-2) 88%, transparent);
    --border: var(--theme-border);
    --text: #f5f2ea;
    --muted: #a19d92;
    --accent: #d4af37;
    --accent-ink: #1a1405;
    --grad: linear-gradient(135deg, #f8e28f 0%, #d4af37 48%, #a8791b 100%);
    --danger: #ff6b6b;
    --ok: #5fd68a;
    --tiktok: #25f4ee;
    --youtube: #ff4b4b;
    --snapchat: #fffc00;
    --xcolor: #e7e9ea;
    --radius: 20px;
    --shadow: 0 18px 50px rgba(0, 0, 0, .55);
    --glow: 0 10px 36px rgba(212, 175, 55, .28);
    --topbar-h: 56px;
    --bottomnav-h: 64px;
    --mini-h: 0px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --font-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
    color-scheme: dark;
}

/* Full-app colorways: backgrounds, panels, navigation and controls shift together. */
:root[data-user-theme="gold"] { --accent:#d4af37; --accent-ink:#1a1405; --grad:linear-gradient(135deg,#f8e28f 0%,#d4af37 48%,#a8791b 100%); --glow:0 10px 36px rgba(212,175,55,.28); --theme-bg:#090806; --theme-surface:#17140d; --theme-surface-2:#252012; --theme-border:rgba(212,175,55,.2); --theme-glow:rgba(212,175,55,.13); }
:root[data-user-theme="blue"] { --accent:#69aaff; --accent-ink:#071629; --grad:linear-gradient(135deg,#b8dcff 0%,#69aaff 48%,#3475df 100%); --glow:0 10px 36px rgba(75,143,255,.28); --theme-bg:#060a12; --theme-surface:#0e1725; --theme-surface-2:#14243a; --theme-border:rgba(105,170,255,.2); --theme-glow:rgba(75,143,255,.14); }
:root[data-user-theme="violet"] { --accent:#b79aff; --accent-ink:#180f2a; --grad:linear-gradient(135deg,#e0d5ff 0%,#a887f5 48%,#7148d4 100%); --glow:0 10px 36px rgba(155,120,245,.3); --theme-bg:#0b0812; --theme-surface:#171121; --theme-surface-2:#241a35; --theme-border:rgba(183,154,255,.2); --theme-glow:rgba(155,120,245,.14); }
:root[data-user-theme="pink"] { --accent:#ff8fab; --accent-ink:#2b0714; --grad:linear-gradient(135deg,#ffc0d0 0%,#ff779e 48%,#db426e 100%); --glow:0 10px 36px rgba(255,105,145,.28); --theme-bg:#10080c; --theme-surface:#201119; --theme-surface-2:#321925; --theme-border:rgba(255,143,171,.2); --theme-glow:rgba(255,105,145,.14); }
:root[data-user-theme="green"] { --accent:#63dda5; --accent-ink:#062014; --grad:linear-gradient(135deg,#b6f5d4 0%,#63dda5 48%,#29a975 100%); --glow:0 10px 36px rgba(68,210,145,.27); --theme-bg:#06100b; --theme-surface:#0e1d15; --theme-surface-2:#152b1f; --theme-border:rgba(99,221,165,.2); --theme-glow:rgba(68,210,145,.13); }
:root[data-user-theme="orange"] { --accent:#ffad69; --accent-ink:#281205; --grad:linear-gradient(135deg,#ffdbad 0%,#ffad69 48%,#e26a40 100%); --glow:0 10px 36px rgba(255,140,75,.28); --theme-bg:#100a06; --theme-surface:#20140c; --theme-surface-2:#312014; --theme-border:rgba(255,173,105,.2); --theme-glow:rgba(255,140,75,.14); }
:root[data-user-theme="cyan"] { --accent:#55d9d2; --accent-ink:#05201f; --grad:linear-gradient(135deg,#b3f4ef 0%,#55d9d2 48%,#2699aa 100%); --glow:0 10px 36px rgba(65,205,205,.26); --theme-bg:#061011; --theme-surface:#0e1d1e; --theme-surface-2:#152b2c; --theme-border:rgba(85,217,210,.2); --theme-glow:rgba(65,205,205,.14); }
:root[data-user-theme="indigo"] { --accent:#8d9dff; --accent-ink:#11152f; --grad:linear-gradient(135deg,#d5dcff 0%,#8d9dff 50%,#5968dc 100%); --glow:0 10px 36px rgba(110,125,255,.25); --theme-bg:#090918; --theme-surface:#14142a; --theme-surface-2:#202044; --theme-border:rgba(141,157,255,.2); --theme-glow:rgba(110,125,255,.14); }
:root[data-user-theme="coral"] { --accent:#ff806f; --accent-ink:#2d100c; --grad:linear-gradient(135deg,#ffd0c6 0%,#ff806f 50%,#dc514b 100%); --glow:0 10px 36px rgba(255,112,96,.25); --theme-bg:#120908; --theme-surface:#211311; --theme-surface-2:#341d1a; --theme-border:rgba(255,128,111,.2); --theme-glow:rgba(255,112,96,.14); }
:root[data-user-theme="mint"] { --accent:#75e2bf; --accent-ink:#08251c; --grad:linear-gradient(135deg,#c4f7e5 0%,#75e2bf 50%,#35aa89 100%); --glow:0 10px 36px rgba(79,210,170,.24); --theme-bg:#06110e; --theme-surface:#10201b; --theme-surface-2:#183129; --theme-border:rgba(117,226,191,.2); --theme-glow:rgba(79,210,170,.14); }
:root[data-user-theme="slate"] { --accent:#b2c1d6; --accent-ink:#111923; --grad:linear-gradient(135deg,#edf3fa 0%,#b2c1d6 50%,#71849e 100%); --glow:0 10px 36px rgba(153,177,205,.2); --theme-bg:#0b0e12; --theme-surface:#171c23; --theme-surface-2:#222a34; --theme-border:rgba(178,193,214,.18); --theme-glow:rgba(153,177,205,.12); }

/* Light page styles keep the selected accent and recolor the whole app chrome. */
:root[data-user-template="clean"] { --theme-bg:#f5f7fb; --theme-surface:#ffffff; --theme-surface-2:#e9eef5; --theme-border:rgba(24,38,60,.13); --theme-glow:color-mix(in srgb,var(--accent) 12%,transparent); --text:#182033; --muted:#4f5b70; --surface:rgba(255,255,255,.9); --surface-2:#e9eef5; color-scheme:light; }
:root[data-user-template="sky"] { --theme-bg:#edf5ff; --theme-surface:#ffffff; --theme-surface-2:#dcecff; --theme-border:rgba(32,84,145,.15); --theme-glow:color-mix(in srgb,var(--accent) 16%,transparent); --text:#17283e; --muted:#4e657d; --surface:rgba(255,255,255,.88); --surface-2:#dcecff; color-scheme:light; }
:root[data-user-template="orchid"] { --theme-bg:#f6f0ff; --theme-surface:#ffffff; --theme-surface-2:#ece2fb; --theme-border:rgba(89,57,133,.16); --theme-glow:color-mix(in srgb,var(--accent) 15%,transparent); --text:#29203a; --muted:#5d526e; --surface:rgba(255,255,255,.9); --surface-2:#ece2fb; color-scheme:light; }
:root[data-user-template="sunset"] { --theme-bg:#fff6ef; --theme-surface:#ffffff; --theme-surface-2:#f8e9dc; --theme-border:rgba(122,70,43,.16); --theme-glow:color-mix(in srgb,var(--accent) 14%,transparent); --text:#33241d; --muted:#695448; --surface:rgba(255,255,255,.92); --surface-2:#f8e9dc; color-scheme:light; }
:root[data-user-template="mint"] { --theme-bg:#effaf5; --theme-surface:#ffffff; --theme-surface-2:#dff2e8; --theme-border:rgba(39,102,73,.16); --theme-glow:color-mix(in srgb,var(--accent) 14%,transparent); --text:#1c3328; --muted:#4f685b; --surface:rgba(255,255,255,.9); --surface-2:#dff2e8; color-scheme:light; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    min-height: 100vh; min-height: 100dvh;
    background: var(--bg); color: var(--text);
    font: 400 16px/1.5 var(--font-body);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.grow { flex: 1; min-width: 0; }
.no-scroll { overflow: hidden; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.bg-glow {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 40% at 15% 0%, var(--theme-glow), transparent 70%),
        radial-gradient(50% 35% at 100% 30%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
        var(--bg);
}

/* ---------- Top bar ---------- */
.topbar {
    position: sticky; top: 0; z-index: 40;
    height: calc(var(--topbar-h) + var(--safe-t)); padding: var(--safe-t) 16px 0;
    display: flex; align-items: center; gap: 16px;
    isolation: isolate;
    background: linear-gradient(112deg,
        color-mix(in srgb, var(--theme-surface) 10%, transparent),
        color-mix(in srgb, var(--theme-bg) 6%, transparent)) !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%);
    border-bottom: 1px solid color-mix(in srgb,var(--accent) 12%,transparent);
    box-shadow: 0 8px 24px color-mix(in srgb,var(--text) 3%,transparent), inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent);
}
.topbar::before { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:radial-gradient(ellipse at 18% 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 62%); }
.topbar > * { position:relative; z-index:1; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-logo { width: 36px; height: 36px; border-radius: 50%; mix-blend-mode: screen; }
.brand-name { font: 800 20px/1 var(--font-head); letter-spacing: -.02em; }
.top-nav { display: none; gap: 4px; }
.top-link { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-weight: 500; transition: color .2s, background .2s; }
.top-link:hover { color: var(--text); background: var(--surface); }
.top-link.active { color: var(--text); background: var(--surface-2); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: 14px; font-weight: 600; white-space: nowrap;
    transition: transform .2s var(--ease), box-shadow .25s, background .2s, opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.btn-lg { min-height: 56px; font-size: 17px; border-radius: 16px; }
.btn-primary { background: var(--grad); color: var(--accent-ink); box-shadow: var(--glow); font-family: var(--font-head); font-weight: 700; }
.btn-primary:hover:not(:disabled) { box-shadow: 0 14px 44px rgba(212, 175, 55, .42); transform: translateY(-1px); }
.btn-soft { background: var(--surface-2); border: 1px solid var(--border); }
.btn-soft:hover { background: rgba(255, 255, 255, .13); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface); }
.btn-danger { background: rgba(255, 107, 107, .15); color: var(--danger); border: 1px solid rgba(255, 107, 107, .35); }
.linkbtn { display: block; margin: 22px auto 0; padding: 10px 14px; color: var(--muted); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn.danger:hover { color: var(--danger); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(0, 0, 0, .5); border: 1px solid var(--border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .2s var(--ease), background .2s, color .2s; }
.icon-btn:active { transform: scale(.9); }
.icon-btn:hover { background: rgba(0, 0, 0, .7); }
.icon-btn.solid { background: var(--surface-2); }
.icon-btn.danger:hover { color: var(--danger); }
.icon-btn.on { color: #ff4d6d; }
.icon-btn.on .ic, .icard-fav.on .ic { fill: currentColor; }

.glass { background: var(--surface); border: 1px solid var(--border); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: var(--shadow); }

/* ---------- Pages ---------- */
.view { animation: viewIn .4s var(--ease) both; }
.page { padding: 0 16px calc(var(--bottomnav-h) + var(--safe-b) + var(--mini-h) + 28px); max-width: 980px; margin: 0 auto; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes profileSlideIn { from { opacity: .7; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
#view-profile, #view-profile-edit, #view-user { animation: profileSlideIn .38s var(--ease) both; }
.page-head { display: flex; align-items: center; gap: 10px; padding: 22px 0 12px; }
.page-head h1, .page-head .page-title { font: 800 28px/1.15 var(--font-head); letter-spacing: -.025em; }
.page-head p { margin-top: 2px; }

/* ---------- Hero ---------- */
.hero { padding: 36px 0 28px; text-align: center; }
.eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--accent); font: 600 11.5px/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; }
.hero h1 { margin: 18px 0 12px; font: 800 clamp(34px, 9vw, 60px)/1.05 var(--font-head); letter-spacing: -.035em; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { max-width: 520px; margin: 0 auto 26px; color: var(--muted); font-size: clamp(15px, 4vw, 17px); }

/* Paste orb: one tap pastes the link and starts the download */
.orb-wrap { display: grid; justify-items: center; gap: 12px; margin: 0 auto 4px; }
.orb { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; --p: 0; transition: transform .3s var(--ease); animation: orbIn .8s var(--ease) both; }
.orb:hover:not(:disabled) { transform: scale(1.05); }
.orb:active:not(:disabled) { transform: scale(.94); }
.orb:disabled { cursor: default; }
.orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(212, 175, 55, .5); animation: orbPulse 2.4s ease-out infinite; }
.orb.busy::before, .orb.done::before { animation: none; }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 200deg, #f8e28f, #d4af37, #a8791b, #f8e28f);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    filter: drop-shadow(0 6px 22px rgba(212, 175, 55, .35)); }
.orb.busy .orb-ring { background: conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(255, 255, 255, .12) 0); transition: background .3s; }
.orb-core { position: absolute; inset: 11px; border-radius: 50%; display: grid; place-items: center; color: var(--accent);
    background: radial-gradient(80% 80% at 35% 25%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 60%), #0c0c11; border: 1px solid var(--border); box-shadow: inset 0 0 30px rgba(212, 175, 55, .08); }
.orb-ic { width: 46px; height: 46px; stroke-width: 1.8; transition: transform .3s var(--ease), opacity .2s; }
.orb:hover:not(:disabled) .orb-ic { transform: translateY(-2px) scale(1.06); }
.orb-pct, .orb-check { position: absolute; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .35s var(--ease); font: 800 26px/1 var(--font-head); color: var(--text); font-variant-numeric: tabular-nums; }
.orb-check { width: 52px; height: 52px; color: var(--ok); stroke-width: 2.6; }
.orb.busy .orb-ic, .orb.done .orb-ic { opacity: 0; transform: scale(.6); }
.orb.busy .orb-pct, .orb.done .orb-check { opacity: 1; transform: none; }
.orb.done .orb-core { animation: orbDone .7s var(--ease); }
.orb-label { color: var(--muted); font-weight: 600; font-size: 14px; }
.or-sep { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 22px auto 14px; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
@keyframes orbIn { 0% { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes orbPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb,var(--accent) 48%,transparent); } 70%, 100% { box-shadow: 0 0 0 26px color-mix(in srgb,var(--accent) 0%,transparent); } }
@keyframes orbDone { 0% { transform: scale(.85); } 50% { transform: scale(1.08); box-shadow: 0 0 40px rgba(95, 214, 138, .5); } 100% { transform: scale(1); } }

/* Download form */
.dl-card { max-width: 640px; margin: 0 auto; padding: 14px; border-radius: 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: left; }
.input-wrap { display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 6px 12px 6px 14px; border-radius: 18px; background: rgba(0, 0, 0, .45); border: 1px solid var(--border); transition: border-color .2s, box-shadow .2s; }
.input-wrap:focus-within { border-color: rgba(212, 175, 55, .7); box-shadow: 0 0 0 4px rgba(212, 175, 55, .14); }
.input-wrap.invalid { border-color: rgba(255, 107, 107, .65); box-shadow: 0 0 0 4px rgba(255, 107, 107, .1); }
.input-ic { color: var(--muted); }
#url-input { flex: 1; min-width: 0; height: 44px; background: none; border: 0; outline: 0; font-size: 16px; }
#url-input::placeholder { color: #6f6c64; }
.hint { min-height: 20px; padding: 0 6px; font-size: 13.5px; color: var(--muted); }
.hint.error { color: var(--danger); }
.dl-row { display: flex; gap: 10px; align-items: stretch; }
.dl-row .btn-lg { flex: 1; min-width: 0; }
.dl-library-link { display: inline-flex; justify-self: end; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: rgba(255,255,255,.055); font: 700 13.5px var(--font-head); text-decoration: none; transition: color .16s, border-color .16s, background .16s, transform .16s; }
.dl-library-link .ic { width: 18px; height: 18px; }
.dl-library-link:hover,.dl-library-link:active { color: var(--accent); border-color: rgba(212,175,55,.45); background: rgba(212,175,55,.08); }
.seg { display: flex; flex: none; padding: 4px; gap: 2px; border-radius: 16px; background: rgba(0, 0, 0, .45); border: 1px solid var(--border); }
.seg button { padding: 0 12px; border-radius: 12px; font: 600 13.5px var(--font-head); color: var(--muted); white-space: nowrap; transition: background .2s, color .2s; }
.seg button.active { background: var(--surface-2); color: var(--text); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset; }

.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font: 700 11.5px/1 var(--font-head); background: var(--surface-2); border: 1px solid var(--border); animation: pop .35s var(--ease); white-space: nowrap; }
#platform-badge { height: 28px; font-size: 12px; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.badge[data-p="tiktok"]::before { background: var(--tiktok); box-shadow: 0 0 10px var(--tiktok); }
.badge[data-p="youtube"]::before { background: var(--youtube); box-shadow: 0 0 10px var(--youtube); }
.badge[data-p="snapchat"]::before { background: var(--snapchat); box-shadow: 0 0 10px var(--snapchat); }
.badge[data-p="x"]::before { background: var(--xcolor); box-shadow: 0 0 10px var(--xcolor); }
.badge[data-p="bad"] { color: var(--danger); }
.badge[data-p="bad"]::before { background: var(--danger); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.progress { display: grid; gap: 8px; padding: 6px 4px 2px; animation: viewIn .3s var(--ease); }
.progress-top { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.progress-top strong { color: var(--text); font-variant-numeric: tabular-nums; }
.bar { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width .45s var(--ease); position: relative; overflow: hidden; }
.bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
#dl-btn.busy .ic { animation: bob 1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }

/* ---------- Section heads, empty states ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 0 14px; }
.section-head h2 { font: 700 22px/1.2 var(--font-head); letter-spacing: -.02em; }
.link { color: var(--accent); font-weight: 600; font-size: 14px; }
.empty { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); }
.empty h3 { font: 700 18px var(--font-head); color: var(--text); }
.empty-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--surface-2); color: var(--accent); margin-bottom: 6px; }
.empty-ic .ic { width: 26px; height: 26px; }
.empty .btn { margin-top: 10px; }
.skeleton { position: relative; overflow: hidden; background: rgba(255, 255, 255, .06); border-radius: 12px; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .08) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 1.4s linear infinite; }

.footer { margin-top: 48px; padding: 24px 0 8px; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: 13px; display: grid; gap: 8px; }
.footer-brand { display: inline-flex; justify-content: center; align-items: center; gap: 8px; color: var(--text); font: 700 15px var(--font-head); }
.footer-brand img { mix-blend-mode: screen; border-radius: 50%; }

/* ---------- Search / sort / chips ---------- */
.tools { display: flex; gap: 8px; margin: 4px 0 12px; }
.search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 46px; border-radius: 14px; background: rgba(0, 0, 0, .45); border: 1px solid var(--border); color: var(--muted); transition: border-color .2s, box-shadow .2s; }
.search:focus-within { border-color: rgba(212, 175, 55, .7); box-shadow: 0 0 0 4px rgba(212, 175, 55, .12); color: var(--accent); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font-size: 16px; }
.select-sm { min-height: 46px; padding: 0 10px; border-radius: 14px; background: rgba(0, 0, 0, .45); border: 1px solid var(--border); color: var(--text); font-size: 14px; }
.chips { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-weight: 600; font-size: 14px; transition: all .2s var(--ease); }
.chips button.active { background: var(--grad); color: var(--accent-ink); border-color: transparent; box-shadow: var(--glow); }

/* ---------- Item cards + grid ---------- */
.igrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.icard { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; align-content: stretch; border-radius: 18px; cursor: pointer; animation: viewIn .4s var(--ease) both; transition: transform .25s var(--ease); content-visibility: auto; contain-intrinsic-size: auto 560px; }
.icard:hover { transform: translateY(-2px); }
.icard:active { transform: scale(.98); }
.icard.pop { animation: cardPop .7s var(--ease) both; }
.icard.dragging { opacity: .4; }
.icard.drag-over .icard-thumb { outline: 2px dashed var(--accent); outline-offset: 2px; }
@keyframes cardPop { 0% { opacity: 0; transform: translateY(22px) scale(.88); } 55% { opacity: 1; transform: translateY(-4px) scale(1.03); } 100% { transform: none; } }
.icard-thumb { position: relative; aspect-ratio: 9 / 14; border-radius: 18px; overflow: hidden; background: #101015; border: 1px solid var(--border); isolation: isolate; }
.icard.audio .icard-thumb { background: linear-gradient(135deg, #2a2312, #0e0e14); }   /* same 9:14 shape as video cards */
.icard-img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.icard-img.loaded { opacity: 1; }
.icard-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); background: radial-gradient(70% 70% at 50% 40%, rgba(212, 175, 55, .16), transparent); }
.icard-ph .ic { width: 38px; height: 38px; }
.icard .dur, .icard .kind { position: absolute; bottom: 8px; padding: 3px 8px; border-radius: 999px; font: 700 11.5px/1.2 var(--font-head); background: rgba(0, 0, 0, .65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 2; }
.icard .dur { right: 8px; }
.icard .kind { left: 8px; color: var(--accent-ink); background: var(--grad); }
.icard-fav { position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .2s var(--ease), color .2s; }
.icard-fav .ic { width: 17px; height: 17px; }
.icard-fav.on { color: #ff4d6d; }
.icard-fav:active { transform: scale(.85); }
.play-chip { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .5)); z-index: 1; pointer-events: none; }
.play-chip span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .25); }
.icard-body { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 0 2px; }
.icard-title { min-height: 2.6em; font: 600 14px/1.3 var(--font-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.icard-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 24px; color: var(--muted); font-size: 12px; }
.icard-actions { display: flex; gap: 6px; padding: 0 2px; }
.ia-btn { display: grid; place-items: center; flex: 1; min-height: 38px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: background .2s, color .2s, transform .2s var(--ease); }
.ia-btn .ic { width: 18px; height: 18px; }
.ia-btn:hover { background: var(--surface-2); color: var(--text); }
.ia-btn:active { transform: scale(.92); }
.ia-btn.danger:hover { color: var(--danger); }
.sel-check { position: absolute; top: 8px; left: 8px; z-index: 3; display: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: rgba(0, 0, 0, .4); color: transparent; }
.sel-check .ic { width: 15px; height: 15px; stroke-width: 3; }
.select-mode .sel-check { display: grid; }
.select-mode .icard-actions, .select-mode .icard-fav { visibility: hidden; }
.icard.selected .sel-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.icard.selected .icard-thumb { outline: 3px solid var(--accent); outline-offset: -3px; }

/* animated "now playing" bars (audio) */
.bars { position: absolute; inset: auto 0 36px 0; display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 34%; padding: 0 14%; opacity: .7; }
.bars i { flex: 1; max-width: 9px; height: 18%; border-radius: 99px; background: var(--grad); transform-origin: bottom; }
.icard.audio:not(.playing) .bars i { opacity: .35; }
.icard.playing .bars i, .mini-player.playing .bars i, .ap.playing .bars i { animation: eq 0.9s ease-in-out infinite; }
.bars i:nth-child(2) { animation-delay: -.7s; } .bars i:nth-child(3) { animation-delay: -.3s; } .bars i:nth-child(4) { animation-delay: -.55s; }
.bars i:nth-child(5) { animation-delay: -.15s; } .bars i:nth-child(6) { animation-delay: -.8s; } .bars i:nth-child(7) { animation-delay: -.4s; }
@keyframes eq { 0%, 100% { height: 18%; } 25% { height: 90%; } 50% { height: 42%; } 75% { height: 72%; } }

/* ---------- Collections ---------- */
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.ctile { display: grid; gap: 6px; align-content: start; text-align: left; border-radius: 20px; padding: 10px; background: var(--surface); border: 1px solid var(--border); transition: transform .25s var(--ease), background .2s; animation: viewIn .4s var(--ease) both; }
.ctile:hover { transform: translateY(-2px); background: var(--surface-2); }
.ctile-cover { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #101015; }
.ctile-cover i { background: #1a1a22 center / cover; }
.ctile-cover i.blank { background: rgba(255, 255, 255, .04); }
.ctile-cover i.aud { background-color: #2a2312; }
.ctile-emoji { grid-column: 1 / -1; display: grid; place-items: center; font-size: 46px; }
.ctile-name { font: 700 15px/1.25 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctile-count { color: var(--muted); font-size: 12.5px; }
.ctile.new { place-items: center; align-content: center; min-height: 190px; border-style: dashed; background: transparent; color: var(--muted); }
.ctile-plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.ctile-plus .ic { width: 26px; height: 26px; }
.ctile.c0 { box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .1); } .ctile.c1 { box-shadow: inset 0 0 40px rgba(37, 244, 238, .06); } .ctile.c2 { box-shadow: inset 0 0 40px rgba(255, 75, 75, .07); }
.ctile.c3 { box-shadow: inset 0 0 40px rgba(167, 139, 250, .08); } .ctile.c4 { box-shadow: inset 0 0 40px rgba(95, 214, 138, .07); } .ctile.c5 { box-shadow: inset 0 0 40px rgba(255, 159, 67, .08); }
.coll-tools { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 6px; }
.emoji-btn { width: 44px; height: 44px; border-radius: 14px; font-size: 22px; background: var(--surface); border: 1px solid var(--border); }
.emoji-btn.on { background: var(--surface-2); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, .18); }
.field-input { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 14px; background: rgba(0, 0, 0, .45); border: 1px solid var(--border); color: var(--text); font-size: 16px; outline: 0; }
.field-input:focus { border-color: rgba(212, 175, 55, .7); box-shadow: 0 0 0 4px rgba(212, 175, 55, .14); }
.picker-sub { margin-top: -4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.picker-list { width: 100%; display: grid; gap: 6px; max-height: 38vh; overflow-y: auto; margin: 4px 0; text-align: left; }
.picker-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: left; }
.picker-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.picker-count { color: var(--muted); font-size: 13px; }
.check-box { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--muted); color: transparent; transition: all .2s var(--ease); }
.check-box .ic { width: 15px; height: 15px; stroke-width: 3.2; }
.picker-row.all .check-box, .picker-row.some .check-box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.picker-empty { padding: 14px; text-align: center; }

/* ---------- Select bar ---------- */
.select-bar { position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(var(--bottomnav-h) + var(--safe-b) + var(--mini-h) + 10px); display: grid; gap: 8px; padding: 10px 12px; border-radius: 20px; animation: rise .35s var(--ease); }
#sb-count { font: 700 14px var(--font-head); }
.sb-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-actions .btn { flex: 1 1 auto; min-width: 0; padding: 0 10px; }

/* ---------- Bottom navigation (phones) ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(var(--bottomnav-h) + var(--safe-b)); padding: 6px 6px var(--safe-b); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border-top: 1px solid var(--border); }
.bn-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 14px; color: var(--muted); font-size: 11px; font-weight: 600; transition: color .2s; }
.bn-item .ic { width: 24px; height: 24px; transition: transform .3s var(--ease); }
.bn-item.active { color: var(--accent); }
.bn-item.active .ic { transform: translateY(-1px) scale(1.1); }
body.viewer-open .bottom-nav, body.viewer-open .mini-player { display: none; }

/* ---------- Full-screen video viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 60; background: #000; animation: fade .2s ease; }
.feed { height: 100%; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.feed-item { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; background: #000; overflow: hidden; }
.feed-item video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.feed-shade { position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
.feed-info { position: absolute; left: 16px; right: 84px; bottom: calc(24px + var(--safe-b)); display: grid; gap: 8px; pointer-events: none; }
.feed-info .vtitle { font: 600 16px/1.35 var(--font-head); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #d6d2c8; font-size: 13px; }
.feed-rail { position: absolute; right: 12px; bottom: calc(24px + var(--safe-b)); display: grid; gap: 12px; justify-items: center; }
.feed-rail .icon-btn { width: 48px; height: 48px; }
.viewer-close { position: absolute; z-index: 5; top: calc(12px + var(--safe-t)); left: 12px; }
.viewer-count { position: absolute; z-index: 5; top: calc(22px + var(--safe-t)); right: 16px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); font: 700 12px var(--font-head); }
.viewer-count:empty { display: none; }
.feed-missing { padding: 24px; text-align: center; color: var(--muted); }
.tap-flash { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; }
.tap-flash .ic { width: 34px; height: 34px; }
.tap-flash.show { animation: flash .6s var(--ease); }
@keyframes flash { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
.spinner { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Audio: mini player + full player ---------- */
body.has-mini { --mini-h: 64px; }
.mini-player { position: fixed; z-index: 44; left: 10px; right: 10px; bottom: calc(var(--bottomnav-h) + var(--safe-b) + 8px); display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 20px; overflow: hidden; background: rgba(22, 22, 28, .9); animation: rise .35s var(--ease); }
.mp-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.mp-progress i { display: block; height: 100%; width: 0; background: var(--grad); }
.mp-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; }
.cover { position: relative; flex: none; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: #1a1a22 center / cover no-repeat; }
.cover.no-art { background: linear-gradient(135deg, #3a2f12, #0e0e14); }
.cover .bars { inset: 10% 14%; height: auto; padding: 0; align-items: flex-end; opacity: 0; }
.cover.no-art .bars, .playing .cover .bars { opacity: .9; }
.cover.big { width: min(260px, 64vw); height: min(260px, 64vw); border-radius: 26px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 0 1px var(--border); }
.cover.big .bars { inset: auto 10% 8% 10%; height: 40%; }
.mp-text { display: grid; min-width: 0; }
.mp-text strong { font: 700 14px/1.25 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-text small { color: var(--muted); font-size: 12px; }
.ap { gap: 14px; }
.ap-text { text-align: center; max-width: 100%; }
.ap-text h3 { font: 800 19px/1.3 var(--font-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ap-seek { width: 100%; }
.ap-times { display: flex; justify-content: space-between; margin-top: 4px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --pos: 0%; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--pos), rgba(255, 255, 255, .14) var(--pos)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; }
.ap-controls { display: flex; align-items: center; justify-content: center; gap: 12px; }
.big-play { width: 66px; height: 66px; background: var(--grad); color: var(--accent-ink); border: 0; box-shadow: var(--glow); }
.big-play:hover { background: var(--grad); }
.big-play .ic { width: 28px; height: 28px; }
.ap-controls .icon-btn:disabled { opacity: .35; }

/* ---------- Modals / sheets ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; animation: fade .25s ease; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes fade { from { opacity: 0; } }
.close-btn { position: absolute; top: 10px; right: 10px; z-index: 3; }
.modal-sheet { align-items: end; }
.sheet { position: relative; width: min(460px, 100%); padding: 22px 20px calc(20px + var(--safe-b)); border-radius: 26px; text-align: center; display: grid; gap: 10px; justify-items: center; animation: rise .4s var(--ease); background: rgba(18, 18, 24, .94); }
.modal .sheet { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.sheet h3 { font: 800 20px var(--font-head); }
.sheet .btn { width: 100%; }
.sheet-logo { border-radius: 50%; mix-blend-mode: screen; }
.sheet-actions { display: grid; gap: 8px; width: 100%; margin-top: 8px; }
.grabber { width: 42px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .22); }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

/* Share sheet */
.share-box { gap: 12px; }
.share-name { max-width: 100%; font: 700 15px/1.35 var(--font-head); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.share-caption { width: 100%; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--border); color: var(--muted); font-size: 12.5px; line-height: 1.45; text-align: left; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.share-link { width: 100%; display: grid; gap: 6px; }
.share-link-row { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 16px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(212, 175, 55, .4); text-align: left; }
.share-link-row code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13.5px ui-monospace, Consolas, monospace; color: var(--accent); }
.share-link-row .btn { width: auto; }
.share-note { width: 100%; text-align: left; font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.share-note button { color: var(--danger); font-weight: 600; font-size: 12.5px; text-decoration: underline; }
.share-grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; margin: 6px 0; }
.share-tile { display: grid; justify-items: center; gap: 8px; padding: 4px 0; border-radius: 14px; animation: tileIn .45s var(--ease) both; }
.share-tile:nth-child(2) { animation-delay: .04s; } .share-tile:nth-child(3) { animation-delay: .08s; } .share-tile:nth-child(4) { animation-delay: .12s; } .share-tile:nth-child(n+5) { animation-delay: .16s; }
.share-tile:active .share-ic { transform: scale(.9); }
.share-tile:disabled { opacity: .45; }
.share-ic { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); transition: transform .2s var(--ease); }
.share-ic .ic { width: 28px; height: 28px; }
.share-ic.wa { background: #25d366; } .share-ic.sc { background: #fffc00; } .share-ic.tg { background: #2aabee; } .share-ic.fb { background: #1877f2; } .share-ic.xx { background: #000; box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 0 0 1px #3a3a3a; }
.share-ic.tt { background: #000; box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 0 0 1px #2a2a2a, -2px -2px 0 rgba(37, 244, 238, .55), 2px 2px 0 rgba(254, 44, 85, .55); }
.share-ic.more, .share-ic.copy, .share-ic.qr { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); }
.share-ic.save { background: var(--grad); color: var(--accent-ink); }
.share-label { font-size: 12px; color: var(--muted); font-weight: 500; text-align: center; line-height: 1.2; }
.share-qr { display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 18px; background: #fff; }
.share-qr canvas { width: 180px; height: 180px; image-rendering: pixelated; }
.share-qr small { color: #333; font-size: 12px; }
@keyframes tileIn { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@media (max-width: 360px) { .share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* My shared links */
.slist { display: grid; gap: 12px; }
.srow { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 18px; }
.srow .cover { width: 64px; height: 64px; }
.srow-body { display: grid; gap: 4px; min-width: 0; }
.srow-title { font: 700 14.5px/1.3 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow-link { font: 600 12.5px ui-monospace, Consolas, monospace; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 12.5px; }
.srow-stats b { color: var(--text); }
.srow-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.srow-actions .btn { flex: 1; }
.srow.dead { opacity: .6; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; z-index: 200; left: 12px; right: 12px; bottom: calc(var(--bottomnav-h) + var(--safe-b) + var(--mini-h) + 14px); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
body.viewer-open .toasts { bottom: calc(20px + var(--safe-b)); }
body.selecting .toasts { bottom: calc(var(--bottomnav-h) + var(--safe-b) + var(--mini-h) + 120px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 460px; padding: 12px 14px; border-radius: 16px; color:var(--text); background:color-mix(in srgb,var(--theme-surface) 96%,transparent); border: 1px solid var(--border); box-shadow:0 12px 30px color-mix(in srgb,var(--text) 13%,transparent); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); font-size: 14.5px; animation: rise .35s var(--ease); }
.toast.out { opacity: 0; transform: translateY(10px); transition: all .25s; }
.toast .ic { width: 18px; height: 18px; }
.toast.ok .ic { color: var(--ok); }
.toast.err .ic { color: var(--danger); }
.toast button { margin-left: 6px; padding: 6px 10px; border-radius: 10px; background: var(--grad); color: var(--accent-ink); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* ---------- Desktop ---------- */
@media (min-width: 700px) {
    .igrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .bottom-nav { display: none; }
    .top-nav { display: flex; }
    .topbar { padding-inline: max(24px, calc((100vw - 1100px) / 2)); }
    .page { padding-bottom: calc(var(--mini-h) + 48px); }
    .igrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .toasts, body.selecting .toasts { bottom: calc(var(--mini-h) + 24px); }
    .mini-player { left: auto; right: 24px; bottom: 24px; width: 380px; }
    .select-bar { left: 50%; right: auto; transform: translateX(-50%); width: min(640px, 92vw); bottom: calc(var(--mini-h) + 24px); }
    .select-bar .sb-actions .btn { flex: none; }
    .feed { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 899px) { .install-trigger.btn { display: none !important; } }
@media (max-width: 380px) {
    .seg button { padding: 0 9px; font-size: 12.5px; }
    .dl-row .btn-lg { font-size: 15px; padding: 0 12px; }
}

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

.spinner-inline { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .2); border-top-color: var(--accent); animation: spin .8s linear infinite; }

/* ---------- Music page ---------- */
.music-actions { display: flex; gap: 10px; margin: 2px 0 14px; }
.music-actions .btn { flex: 1; }
.tlist { display: grid; gap: 4px; }
.trow { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 6px; border-radius: 16px; transition: background .2s; animation: viewIn .35s var(--ease) both; }
.trow:hover { background: var(--surface); }
.trow.now { background: rgba(212, 175, 55, .09); box-shadow: inset 3px 0 0 var(--accent); }
.trow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; min-height: 56px; }
.trow .cover { width: 50px; height: 50px; border-radius: 12px; }
.trow .cover .bars { opacity: 0; }
.trow.now .cover .bars, .trow.playing .cover .bars { opacity: .95; }
.trow.playing .bars i { animation: eq .9s ease-in-out infinite; }
.trow-text { display: grid; min-width: 0; gap: 1px; }
.trow-text strong { font: 600 14.5px/1.3 var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow.now .trow-text strong { color: var(--accent); }
.trow-text small { color: var(--muted); font-size: 12.5px; }
.icon-btn.flat { width: 40px; height: 40px; background: none; border-color: transparent; color: var(--muted); -webkit-backdrop-filter: none; backdrop-filter: none; }
.icon-btn.flat:hover { color: var(--text); background: var(--surface-2); }
.icon-btn.flat.on { color: #ff4d6d; }
.icon-btn.flat.on .ic { fill: currentColor; }
.music-none { padding: 24px 6px; text-align: center; }
.music-convert { margin-top: 28px; }
.clist { display: grid; gap: 8px; }
.crow { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.crow .cover { width: 46px; height: 46px; }
.crow .trow-text { flex: 1; }
.crow .btn { flex: none; }
.menu-list { width: 100%; display: grid; gap: 6px; }
.menu-row { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: left; font-weight: 600; }
.menu-row:hover { background: var(--surface-2); }
.menu-row.danger { color: var(--danger); }

/* player extras */
.ap-modes { display: flex; gap: 12px; justify-content: center; }
.ap-modes .icon-btn.on { color: var(--accent); border-color: rgba(212, 175, 55, .6); box-shadow: 0 0 0 3px rgba(212, 175, 55, .14); }
.queue { width: 100%; max-height: 190px; overflow-y: auto; display: grid; gap: 2px; text-align: left; border-top: 1px solid var(--border); padding-top: 8px; }
.queue-head { padding: 2px 6px 6px; color: var(--muted); font: 600 12px var(--font-head); text-transform: uppercase; letter-spacing: .08em; }
.q-row { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 8px; border-radius: 10px; font-size: 14px; }
.q-row:hover { background: var(--surface); }
.q-row.now { background: rgba(212, 175, 55, .1); color: var(--accent); }
.q-n { width: 20px; flex: none; text-align: center; color: var(--muted); font-size: 12px; }
.q-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-d { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- Video -> music conversion sheet ---------- */
.cv { gap: 12px; }
.cv-art { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin: 4px 0; }
.cv-disc { position: relative; width: 150px; height: 150px; border-radius: 50%; background: #1a1a22 center / cover no-repeat; box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 0 6px #0c0c10, 0 0 0 7px var(--border), 0 0 40px rgba(212, 175, 55, .18); }
.cv-disc.no-art { background: linear-gradient(135deg, #3a2f12, #0e0e14); }
.cv-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0 7px, rgba(0, 0, 0, .18) 7px 8px), conic-gradient(from 20deg, transparent 0 20%, rgba(255, 255, 255, .12) 28%, transparent 36% 70%, rgba(255, 255, 255, .1) 78%, transparent 86%); }
.cv-hole { position: absolute; z-index: 1; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: #0a0a0e; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
#convert-sheet.working .cv-disc { animation: spin 3.2s linear infinite; }
#convert-sheet.done .cv-disc { animation: discDone .9s var(--ease); }
@keyframes discDone { 0% { transform: scale(.92) rotate(0); } 60% { transform: scale(1.06) rotate(180deg); } 100% { transform: scale(1) rotate(360deg); } }
.cv-note { position: absolute; right: -4px; bottom: 0; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--grad); color: var(--accent-ink); box-shadow: var(--glow); stroke-width: 2.4; animation: noteBob 1.6s ease-in-out infinite; }
#convert-sheet.done .cv-note, #convert-sheet.failed .cv-note { animation: none; }
@keyframes noteBob { 50% { transform: translateY(-5px) rotate(-8deg); } }
.cv-title { max-width: 100%; color: var(--muted); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.cv-steps { list-style: none; width: 100%; display: grid; gap: 8px; text-align: left; margin: 4px 0; }
.cv-steps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 14px; transition: all .3s var(--ease); }
.cv-steps .dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); display: grid; place-items: center; font-size: 11px; line-height: 1; }
.cv-steps li.active { color: var(--text); border-color: rgba(212, 175, 55, .55); background: rgba(212, 175, 55, .08); }
.cv-steps li.active .dot { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.cv-steps li.done { color: var(--text); }
.cv-steps li.done .dot { background: var(--ok); border-color: var(--ok); }
.cv-steps li.done .dot::after { content: "✓"; color: #08210f; font-weight: 800; }
.cv-bar { width: 100%; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.cv-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width .5s var(--ease); }
#convert-sheet.failed .cv-bar i { background: var(--danger); }
.cv-msg { font-size: 13.5px; min-height: 20px; }
.cv-msg b { color: var(--text); font-variant-numeric: tabular-nums; }
#convert-sheet.done .cv-close, #convert-sheet.failed .cv-close { display: none; }
#convert-sheet.failed .cv-steps { display: none; }

/* ---------- SEO content (crawlable text under the downloader) ---------- */
.seo { max-width: 760px; margin: 44px auto 0; display: grid; gap: 14px; }
.seo h2 { font: 800 clamp(22px, 5vw, 28px)/1.2 var(--font-head); letter-spacing: -.02em; }
.seo h3 { margin-top: 10px; font: 700 18px var(--font-head); }
.seo p { color: var(--muted); line-height: 1.65; }
.seo-steps { list-style: none; display: grid; gap: 12px; }
.seo-steps li { display: flex; gap: 14px; align-items: flex-start; }
.seo-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: var(--accent-ink); font: 800 14px var(--font-head); }
.seo-steps strong { display: block; margin-bottom: 2px; }
.seo-steps p { font-size: 15px; }
.seo-feats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.seo-feats li { display: grid; gap: 4px; padding: 14px 16px; border-radius: 18px; }
.seo-feats strong { font: 700 15px var(--font-head); color: var(--accent); }
.seo-feats span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.seo-plat { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-link { padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 14px; transition: all .2s var(--ease); }
.chip-link:hover { background: var(--surface-2); border-color: rgba(212, 175, 55, .5); color: var(--accent); }
.seo-faq-h { margin-top: 18px; }
.faq { display: grid; gap: 8px; }
.faq details { border-radius: 16px; padding: 0 16px; }
.faq summary { cursor: pointer; list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 22px; color: var(--accent); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 16px; font-size: 15px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.footer-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover { color: var(--accent); }
.legal-card { padding: 26px 22px; border-radius: 26px; display: grid; gap: 10px; }
.legal-card h1 { font: 800 clamp(26px, 6vw, 34px) var(--font-head); letter-spacing: -.02em; }
.legal-card h2 { margin-top: 12px; font: 700 18px var(--font-head); color: var(--accent); }
.legal-card p, .legal-card li { color: #cfcabe; line-height: 1.65; font-size: 15px; }
.legal-card ul { padding-left: 20px; display: grid; gap: 8px; }
.legal-nav { margin-top: 14px; color: var(--muted); }
.legal-nav a { text-decoration: underline; text-underline-offset: 3px; }
.sp.legal { max-width: 760px; }



/* ============================================================================================
   Ad pop-up: 3 layouts (card / sheet / full) x 7 themes. Markup: templates/_ad_modal.html
   ============================================================================================ */
.ad-modal { --ad-a: #f8e28f; --ad-b: #d4af37; --ad-c: #a8791b; --ad-ink: #1a1405; --ad-glow: rgba(212, 175, 55, .35); }
.ad-modal[data-theme="ocean"] { --ad-a: #7dd3fc; --ad-b: #3b82f6; --ad-c: #1d4ed8; --ad-ink: #fff; --ad-glow: rgba(59, 130, 246, .4); }
.ad-modal[data-theme="rose"] { --ad-a: #fda4af; --ad-b: #f43f5e; --ad-c: #be123c; --ad-ink: #fff; --ad-glow: rgba(244, 63, 94, .4); }
.ad-modal[data-theme="emerald"] { --ad-a: #86efac; --ad-b: #22c55e; --ad-c: #15803d; --ad-ink: #04210f; --ad-glow: rgba(34, 197, 94, .38); }
.ad-modal[data-theme="violet"] { --ad-a: #c4b5fd; --ad-b: #8b5cf6; --ad-c: #6d28d9; --ad-ink: #fff; --ad-glow: rgba(139, 92, 246, .42); }
.ad-modal[data-theme="sunset"] { --ad-a: #fde68a; --ad-b: #fb923c; --ad-c: #e11d48; --ad-ink: #2a0a02; --ad-glow: rgba(251, 146, 60, .42); }
.ad-modal[data-theme="midnight"] { --ad-a: #ffffff; --ad-b: #e6e8ee; --ad-c: #c3c8d4; --ad-ink: #0b0d14; --ad-glow: rgba(255, 255, 255, .22); }

.ad-box { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, rgba(26, 26, 34, .98), rgba(14, 14, 20, .98)); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03), 0 0 70px var(--ad-glow); animation: adIn .55s var(--ease); }
.ad-box::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--ad-a), var(--ad-b), var(--ad-c)); }
@keyframes adIn { 0% { opacity: 0; transform: translateY(26px) scale(.94); } 60% { transform: translateY(-3px) scale(1.01); } 100% { opacity: 1; transform: none; } }

.ad-media { position: relative; flex: 0 1 auto; aspect-ratio: 16 / 10; max-height: min(42dvh, 300px); min-height: 90px; background: #0b0b10; overflow: hidden; }   /* never push the text and button off a short screen */
.ad-media img, .ad-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(14, 14, 20, .95)); pointer-events: none; }
.ad-sound { position: absolute; z-index: 2; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .25); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ad-sound .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ad-body { position: relative; z-index: 2; display: grid; gap: 10px; padding: 16px 20px 22px; justify-items: start; overflow-y: auto; }
.has-media .ad-body { margin-top: -26px; }
.ad-tags { display: flex; align-items: center; gap: 8px; }
.ad-badge { padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg, var(--ad-a), var(--ad-b)); color: var(--ad-ink); font: 800 11px/1.2 var(--font-head); letter-spacing: .05em; text-transform: uppercase; }
.ad-label { padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .25); color: #bdb8ab; font: 700 10px/1.2 var(--font-head); letter-spacing: .08em; text-transform: uppercase; }
.ad-title { font: 800 clamp(21px, 5.4vw, 26px)/1.2 var(--font-head); letter-spacing: -.02em; word-break: break-word; }
.ad-desc { color: #cfcabe; font-size: 15px; line-height: 1.55; word-break: break-word; }
.ad-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 6px; padding: 0 20px; border-radius: 16px; background: linear-gradient(135deg, var(--ad-a) 0%, var(--ad-b) 50%, var(--ad-c) 100%); color: var(--ad-ink); font: 800 16px var(--font-head); box-shadow: 0 10px 30px var(--ad-glow); transition: transform .2s var(--ease), box-shadow .2s; }
.ad-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 38px var(--ad-glow); }
.ad-cta:active { transform: scale(.98); }
.ad-close { position: absolute; z-index: 5; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .22); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s var(--ease), background .2s; }
.ad-close:hover { background: rgba(0, 0, 0, .8); }
.ad-close:active { transform: scale(.9); }
.ad-close .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ad-close .ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); fill: none; stroke: var(--ad-b); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: 100.53; opacity: 0; }
.ad-close.counting .ring { opacity: 1; animation: adRing var(--ad-dur, 8s) linear forwards; }
@keyframes adRing { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100.53; } }

/* layout: bottom sheet */
.ad-modal[data-layout="sheet"] { align-items: end; padding: 0; }
.ad-modal[data-layout="sheet"] .ad-box { width: min(560px, 100%); border-radius: 30px 30px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: adSheet .5s var(--ease); }
@keyframes adSheet { from { transform: translateY(100%); } }
.ad-modal[data-layout="sheet"] .ad-media { aspect-ratio: 16 / 9; max-height: min(36dvh, 280px); }

/* layout: full screen (media fills the screen, text on top of it) */
.ad-modal[data-layout="full"] { padding: 0; }
.ad-modal[data-layout="full"] .ad-box { width: 100%; max-width: none; height: 100%; max-height: none; border-radius: 0; border: 0; justify-content: flex-end; background: radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--ad-b) 35%, #0a0a0e), #0a0a0e); }
.ad-modal[data-layout="full"] .ad-media { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; min-height: 0; }
.ad-modal[data-layout="full"] .ad-media::after { height: 70%; background: linear-gradient(transparent, rgba(8, 8, 12, .55) 40%, rgba(8, 8, 12, .95)); }
.ad-modal[data-layout="full"] .ad-body { margin-top: 0; width: min(560px, 100%); margin-inline: auto; padding: 24px 22px calc(26px + env(safe-area-inset-bottom, 0px)); }
.ad-modal[data-layout="full"] .ad-title { font-size: clamp(28px, 8vw, 40px); }
.ad-modal[data-layout="full"] .ad-sound { bottom: auto; top: calc(14px + env(safe-area-inset-top, 0px)); right: auto; left: 12px; }

/* admin live preview: the pop-up drawn inside the phone frame instead of over the page */
.ad-modal.static { position: absolute; inset: 0; z-index: 1; padding: 12px; animation: none; }
.ad-modal.static[data-layout="sheet"], .ad-modal.static[data-layout="full"] { padding: 0; }
.ad-modal.static .ad-box { max-height: 100%; animation: none; }
.ad-modal.static .modal-backdrop { background: rgba(0, 0, 0, .45); }
.ad-modal.static .ad-cta { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ad-close.counting .ring { animation-duration: .001ms; } }

/* generated visitor ID */
.user-id { font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; color: var(--accent); }

/* ---- Discover reels: full-screen scrolling feed between the top bar and the tabs ---- */
body.viewer-discover .viewer { top: calc(var(--topbar-h) + var(--safe-t)); }
body.viewer-discover .viewer-close { display: none; }
@media (max-width: 899px) {
    body.viewer-open.viewer-discover .bottom-nav { display: grid; z-index: 61; }
    body.viewer-discover .viewer { bottom: calc(var(--bottomnav-h) + var(--safe-b)); }
}
/* ---- Discover (same grid as the library) ---- */
.dend { text-align: center; padding: 18px 0 6px; min-height: 24px; }
.icard-skel { aspect-ratio: 3 / 4; border-radius: 18px; }
.dmeta2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dby2 { font-weight: 700; color: var(--text); }
.davatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #ff5ec4); color: #111; font: 800 11px var(--font-head); text-transform: uppercase; flex: none; }
.dbadge { padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #111; font: 800 10px var(--font-head); letter-spacing: .03em; }
.vcap { margin-top: 4px; opacity: .9; font-size: 14px; overflow-wrap: anywhere; }
.feed-rail a.icon-btn { display: grid; place-items: center; }
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-height: 52vh; overflow-y: auto; margin-top: 10px; padding-bottom: 6px; }
.pick-tile { display: grid; gap: 6px; text-align: left; background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; }
.pick-img { aspect-ratio: 3 / 4; border-radius: 14px; background: #101015 center / cover no-repeat; display: grid; place-items: center; border: 1px solid var(--border); }
.pick-tile:active .pick-img, .pick-tile:focus-visible .pick-img { outline: 2px solid var(--accent); }
.pick-title { font-size: 12px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Post to Discover card inside the share sheet */
.pub-card { position: relative; margin-top: 14px; padding: 16px; border-radius: 20px; display: grid; gap: 12px; overflow: hidden;
    border: 1px solid var(--border); background: linear-gradient(160deg, rgba(212, 175, 55, .10), rgba(255, 94, 196, .06) 60%, rgba(255, 255, 255, .03)); }
.pub-card::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(212, 175, 55, .22), transparent 65%); pointer-events: none; }
.pub-card.live { border-color: rgba(60, 220, 140, .45); background: linear-gradient(160deg, rgba(60, 220, 140, .12), rgba(212, 175, 55, .07) 70%, rgba(255, 255, 255, .03)); }
.pub-card.live::before { background: radial-gradient(circle, rgba(60, 220, 140, .24), transparent 65%); }
.pub-card.just-posted { animation: pubPop .6s var(--ease); }
@keyframes pubPop { 0% { transform: scale(.96); } 60% { transform: scale(1.015); } 100% { transform: scale(1); } }
.pub-head { position: relative; display: flex; align-items: center; gap: 12px; }
.pub-ic { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--accent-ink, #111); background: var(--grad, var(--accent)); box-shadow: 0 6px 18px rgba(212, 175, 55, .28); }
.pub-ic .ic { width: 24px; height: 24px; }
.pub-ic.live { background: linear-gradient(135deg, #3ddc8c, #1faa6a); color: #06210f; box-shadow: 0 6px 18px rgba(60, 220, 140, .3); }
.pub-text { min-width: 0; }
.pub-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 800 16px/1.2 var(--font-head); }
.pub-sub { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.pub-live { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: rgba(60, 220, 140, .16); color: #3ddc8c; font: 800 10.5px var(--font-head); letter-spacing: .08em; }
.pub-live i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc8c; animation: pubPulse 1.6s ease-out infinite; }
@keyframes pubPulse { 0% { box-shadow: 0 0 0 0 rgba(60, 220, 140, .6); } 100% { box-shadow: 0 0 0 9px rgba(60, 220, 140, 0); } }
.pub-field { position: relative; display: block; }
.pub-field input { width: 100%; min-height: 48px; padding: 0 64px 0 14px; border-radius: 14px; background: rgba(0, 0, 0, .38); border: 1px solid var(--border); color: var(--text); font-size: 16px; outline: 0; transition: border-color .2s, box-shadow .2s; }
.pub-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, .18); }
.pub-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 11px var(--font-head); color: var(--muted); pointer-events: none; }
.pub-go { width: 100%; min-height: 48px; }
.pub-fine { margin: 0; text-align: center; font-size: 12px; color: var(--muted); }
.pub-caption { position: relative; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .28); font-style: italic; overflow-wrap: anywhere; }
.pub-stats { position: relative; display: flex; gap: 14px; color: var(--muted); font-size: 13px; }
.pub-stats span { display: inline-flex; align-items: center; gap: 6px; }
.pub-stats .ic { width: 14px; height: 14px; }
.pub-actions { position: relative; display: flex; gap: 8px; flex-wrap: wrap; }
.pub-actions .btn:first-child { flex: 1; }
@media (prefers-reduced-motion: reduce) { .pub-live i, .pub-card.just-posted { animation: none; } }
.pub-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #111; font: 800 11px var(--font-head); }

/* ---- Small-phone fixes: use the *visible* viewport (dvh) so nothing hides under browser bars,
        keep every control inside the safe area, and shrink on short screens ---- */
.modal, .viewer { inset: 0 0 auto 0; height: 100vh; height: 100dvh; }
body.viewer-discover .viewer { inset: calc(var(--topbar-h) + var(--safe-t)) 0 auto 0; height: calc(100vh - var(--topbar-h) - var(--safe-t)); height: calc(100dvh - var(--topbar-h) - var(--safe-t)); }
@media (max-width: 899px) {
    body.viewer-discover .viewer { height: calc(100vh - var(--topbar-h) - var(--safe-t) - var(--bottomnav-h) - var(--safe-b)); height: calc(100dvh - var(--topbar-h) - var(--safe-t) - var(--bottomnav-h) - var(--safe-b)); }
}
.feed-item { height: 100%; }
.feed-info { right: 76px; bottom: calc(18px + var(--safe-b)); }
.feed-rail { bottom: calc(16px + var(--safe-b)); right: 10px; }
.viewer-close, .viewer-count { top: calc(10px + var(--safe-t)); }
.ad-close { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; background: rgba(0, 0, 0, .72); }
.ad-modal[data-layout="full"] .ad-close { top: calc(14px + env(safe-area-inset-top, 0px)); }
.ad-modal[data-layout="full"] .ad-body { max-height: 78dvh; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.ad-modal { padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); }
.ad-modal[data-layout="full"], .ad-modal[data-layout="sheet"] { padding: 0; }
.ad-modal[data-layout="full"] .ad-box { max-height: none; }
@media (max-height: 640px), (max-width: 340px) {
    .feed-rail { gap: 7px; }
    .feed-rail .icon-btn { width: 40px; height: 40px; }
    .feed-info { right: 64px; gap: 5px; }
    .feed-info .vtitle { font-size: 14.5px; -webkit-line-clamp: 2; }
    .ad-media { max-height: 30dvh; }
    .ad-body { gap: 7px; padding: 12px 16px 16px; }
    .ad-title { font-size: 19px; }
    .ad-desc { font-size: 13.5px; line-height: 1.45; }
    .ad-cta { min-height: 46px; }
    .ad-modal[data-layout="full"] .ad-title { font-size: clamp(22px, 7vw, 30px); }
}
@media (max-height: 480px) {
    .feed-rail { grid-template-columns: repeat(2, auto); }
    .ad-media { max-height: 24dvh; min-height: 60px; }
}
.ad-modal[data-layout="sheet"] .ad-box { max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px); }

/* ---- Native-app feel + exact visible height (set from JS as --app-h) ---- */
html { touch-action: manipulation; overscroll-behavior-y: none; }
button, .icard, .bn-item, .top-link, .feed-item, .pick-tile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
img { -webkit-user-drag: none; }
.modal, .viewer { height: var(--app-h, 100dvh); }
body.viewer-discover .viewer { height: calc(var(--app-h, 100dvh) - var(--topbar-h) - var(--safe-t)); }
@media (max-width: 899px) {
    body.viewer-discover .viewer { height: calc(var(--app-h, 100dvh) - var(--topbar-h) - var(--safe-t) - var(--bottomnav-h) - var(--safe-b)); }
}
.feed-item video.cover { object-fit: cover; }
.ad-modal .ad-box { max-height: calc(var(--app-h, 100dvh) - 24px); }
.ad-modal[data-layout="sheet"] .ad-box { max-height: calc(var(--app-h, 100dvh) - env(safe-area-inset-top, 0px) - 8px); }
.ad-modal[data-layout="full"] .ad-body { max-height: calc(var(--app-h, 100dvh) * .78); }
.ad-modal[data-layout="full"] .ad-box { max-height: none; height: 100%; }

/* ---- Discover reels: true full screen, no header; actions on the right, details bottom-left ---- */
.feed-item video.cover { object-fit: cover; }
body.viewer-discover .topbar { display: none; }
body.viewer-discover .viewer { inset: 0 0 auto 0; height: var(--app-h, 100dvh); }
body.viewer-discover .viewer-count { display: none; }
@media (max-width: 899px) {
    body.viewer-open.viewer-discover .bottom-nav { z-index: 62; background: rgba(10, 10, 14, .78);
        -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid rgba(255, 255, 255, .1); }
}
.feed-item.reel { display: block; background: #05050a; --reel-clear: 22px; }
@media (max-width: 899px) { .feed-item.reel { --reel-clear: calc(var(--bottomnav-h) + var(--safe-b) + 14px); } }
.reel-bg { position: absolute; inset: 0; background: center / cover no-repeat; filter: blur(16px) brightness(.5) saturate(1.3); transform: scale(1.2); will-change: transform; }
.reel-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
@media (max-width: 899px) { .reel-stage { bottom: calc(var(--bottomnav-h) + var(--safe-b)); } }   /* the picture ends where the tab bar starts: nothing hides under it */
.reel-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; display: block; }
.reel-shade { position: absolute; z-index: 2; inset: auto 0 0 0; height: 34%; pointer-events: none; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.reel-info { position: absolute; z-index: 3; left: 14px; right: 74px; bottom: var(--reel-clear); display: grid; gap: 5px; pointer-events: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .85); }
.reel-by { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: #fff; }
.reel-creator { display: inline-flex; align-items: center; gap: 7px; max-width: min(60vw, 300px); padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; pointer-events: auto; cursor: pointer; }
.reel-creator b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-creator:active { opacity: .78; }
.reel-views { color: #d6d2c8; }
.reel-title { font: 700 15.5px/1.3 var(--font-head); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.reel-cap { font-size: 13.5px; color: #eeeade; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.reel-rail { position: absolute; z-index: 3; right: 10px; bottom: var(--reel-clear); display: grid; gap: 12px; justify-items: center; }
.reel-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; cursor: pointer;
    background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .22); transition: transform .15s, background .2s; }
.reel-btn:active { transform: scale(.9); background: rgba(0, 0, 0, .6); }
.reel-btn .ic { width: 22px; height: 22px; }
@media (max-height: 640px), (max-width: 340px) { .reel-rail { gap: 8px; } .reel-btn { width: 42px; height: 42px; } .reel-title { font-size: 14px; -webkit-line-clamp: 2; } }
@media (min-width: 900px) { .feed-item.reel { --reel-clear: 28px; } .reel-info { max-width: 560px; left: max(18px, calc(50% - 280px)); } .reel-rail { right: max(18px, calc(50% - 300px)); } }

/* smooth, glitch-free scrolling: each reel is its own paint/layout island and only the ones near the screen are rendered */
.feed { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.feed-item.reel { contain: layout paint style; content-visibility: auto; contain-intrinsic-size: 100vw 100vh; }
.reel-stage video { transform: translateZ(0); backface-visibility: hidden; }

/* ---- loading spinner always in the middle of its video ---- */
.spinner { top: 50%; left: 50%; margin: -17px 0 0 -17px; z-index: 2; }

/* ---- library reels use the same layout; many actions fit a narrow column ---- */
.reel-rail.dense { gap: 9px; }
.reel-rail.dense .reel-btn { width: 44px; height: 44px; }
.reel-btn.on { color: var(--accent); }
.reel-btn.on .ic { fill: currentColor; }
body.viewer-open:not(.viewer-discover) .feed-item.reel { --reel-clear: calc(var(--safe-b) + 24px); }
body.viewer-open:not(.viewer-discover) .reel-stage { bottom: 0; }
@media (max-height: 700px) { .reel-rail.dense { gap: 6px; } .reel-rail.dense .reel-btn { width: 38px; height: 38px; } .reel-rail.dense .reel-btn .ic { width: 19px; height: 19px; } }
@media (max-height: 560px) { .reel-rail.dense { grid-template-columns: repeat(2, auto); } }

/* ---- "new version" pill ---- */
.update-pill { width: max-content; white-space: nowrap; position: fixed; left: 50%; bottom: calc(var(--bottomnav-h) + var(--safe-b) + 14px); transform: translateX(-50%); z-index: 200;
    display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); padding: 8px 8px 8px 14px; border-radius: 999px;
    background: rgba(24, 24, 32, .94); border: 1px solid rgba(212, 175, 55, .45); box-shadow: 0 10px 34px rgba(0, 0, 0, .55); color: #fff;
    font: 600 14px var(--font-head); animation: pillIn .5s var(--ease); }
.update-pill button { min-height: 34px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; font: 800 13px var(--font-head); background: var(--grad); color: var(--accent-ink, #111); }
.update-pill .update-x { min-width: 34px; padding: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 18px; line-height: 1; }
.update-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(212, 175, 55, .6); animation: pubPulse 1.8s ease-out infinite; flex: none; }
@keyframes pillIn { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (min-width: 900px) { .update-pill { bottom: 24px; } }
body.viewer-open:not(.viewer-discover) .update-pill { bottom: calc(var(--safe-b) + 18px); }

/* ---- every reels view (Library and Discover): no header, no counter, no close button on phones ---- */
body.viewer-discover .viewer-count { display: none; }
@media (min-width: 900px) { body.viewer-discover .viewer-close { display: grid; } }

/* ---- Now Playing: full-screen player ---- */
.ap-modal { padding: 0; place-items: stretch; background: #07070b; animation: apIn .35s var(--ease); }
@keyframes apIn { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ap-modal .modal-backdrop { display: none; }
.ap-modal .sheet.ap { position: relative; width: 100%; max-width: 560px; margin: 0 auto; height: var(--app-h, 100dvh); max-height: none; border-radius: 0; background: transparent;
    border: 0; box-shadow: none; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 0; padding: calc(var(--safe-t) + 6px) 22px calc(var(--safe-b) + 18px); text-align: center; }
.ap-bg { position: fixed; inset: -60px; z-index: -1; background: #101018 center / cover no-repeat; filter: blur(46px) brightness(.45) saturate(1.5); transform: scale(1.2); }
.ap-top { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 52px; }
.ap-label { font: 700 12px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: #cfcabe; }
#ap-sleep { position: relative; }
#ap-sleep.on { color: var(--accent); }
.ap-sleep-t { position: absolute; right: -2px; bottom: 2px; font: 800 9px var(--font-head); background: var(--accent); color: #111; padding: 1px 4px; border-radius: 8px; }
.ap-art { flex: 1 1 auto; min-height: 0; width: 100%; display: grid; place-items: center; padding: 8px 0 14px; }
.ap .cover.big { width: min(80vw, 46dvh, 380px); height: min(80vw, 46dvh, 380px); border-radius: 26px; box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .5s var(--ease); }
.ap:not(.playing) .cover.big { transform: scale(.9); }
.ap .ap-text { width: 100%; margin: 4px 0 10px; }
.ap .ap-text h3 { font: 800 21px/1.25 var(--font-head); }
.ap .ap-seek { width: 100%; margin-bottom: 8px; }
.ap .ap-controls { width: 100%; max-width: 420px; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0 8px; }
.ap .ap-skip { width: 60px; height: 60px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.ap .ap-skip .ic { width: 26px; height: 26px; }
.ap .big-play { width: 80px; height: 80px; }
.ap .big-play .ic { width: 34px; height: 34px; }
.ap .icon-btn.flat { width: 46px; height: 46px; }
.ap .icon-btn.flat.on { color: var(--accent); }
.ap-seek10 { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.ap-seek10 .btn { gap: 6px; }
.ap .queue { width: 100%; max-height: 28dvh; flex: none; margin-top: 6px; background: rgba(0, 0, 0, .28); border-radius: 18px; padding: 6px; }
@media (max-height: 640px) { .ap .cover.big { width: min(60vw, 34dvh); height: min(60vw, 34dvh); } .ap .big-play { width: 68px; height: 68px; } .ap .ap-skip { width: 52px; height: 52px; } .ap .queue { max-height: 20dvh; } }

/* ---- Music page polish ---- */
.trow { padding: 6px 6px 6px 8px; border-radius: 18px; }
.trow .cover { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.trow-text strong { font-size: 15px; }
.trow.now { background: linear-gradient(90deg, rgba(212, 175, 55, .16), rgba(212, 175, 55, .03)); }
.music-actions { gap: 10px; }
.music-actions .btn { flex: 1; min-height: 50px; border-radius: 16px; font-weight: 800; }
/* player layout fix: the artwork keeps its own space, the rest scrolls underneath */
.ap-art { flex: none; padding: 6px 0 12px; }
.ap .cover.big { width: min(72vw, 36dvh, 340px); height: min(72vw, 36dvh, 340px); }
@media (max-height: 640px) { .ap .cover.big { width: min(56vw, 30dvh); height: min(56vw, 30dvh); } }

/* ---- Music page: controls and a small time under the track that is playing ---- */
.trow { flex-wrap: wrap; }
.trow-ctl { display: none; flex-basis: 100%; align-items: center; gap: 8px; padding: 2px 6px 8px 70px; }
.trow.now .trow-ctl { display: flex; }
.tctl { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); cursor: pointer; }
.tctl.t-toggle { width: 44px; height: 44px; background: var(--grad); color: var(--accent-ink, #111); border-color: transparent; }
.tctl .ic { width: 18px; height: 18px; }
.tctl.t-toggle .ic { width: 20px; height: 20px; }
.trow-time { margin-left: auto; font: 600 11px var(--font-head); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.mini-player .mp-text small { font-variant-numeric: tabular-nums; }
#mp-next { flex: none; }

/* ===== Spotify-style layout, Snatch gold and black ===== */
/* Music page header card */
.music-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 18px 20px; margin: 6px 0 16px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(212, 175, 55, .32), rgba(212, 175, 55, .08) 58%, rgba(255, 255, 255, .03)); border: 1px solid rgba(212, 175, 55, .26); }
.music-hero[hidden] { display: none; }
.mh-title { font: 800 21px/1.2 var(--font-head); letter-spacing: -.01em; }
.mh-sub { margin-top: 3px; color: #cfc9b6; font-size: 13px; }
.mh-btns { display: flex; align-items: center; gap: 12px; flex: none; }
.mh-shuffle { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); cursor: pointer; }
.mh-play { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink, #111); background: var(--grad); border: 0; cursor: pointer;
    box-shadow: 0 10px 26px rgba(212, 175, 55, .35); transition: transform .15s; }
.mh-play:active { transform: scale(.93); }
.mh-play .ic { width: 28px; height: 28px; }
.mh-shuffle .ic { width: 20px; height: 20px; }
/* flat track rows */
.trow { padding: 8px 4px 8px 6px; border-radius: 12px; }
.trow .cover { width: 52px; height: 52px; border-radius: 8px; box-shadow: none; }
.trow-text strong { font: 700 15.5px/1.3 var(--font-head); }
.trow-text small { font-size: 13px; }
.trow.now { background: linear-gradient(90deg, rgba(212, 175, 55, .14), transparent); box-shadow: none; }
.trow.now .trow-text strong { color: var(--accent); }
/* Now Playing: left-aligned title with the heart, thin seek bar, plain controls */
.ap .ap-titlerow { width: 100%; display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; text-align: left; }
.ap .ap-titlerow .ap-text { flex: 1; min-width: 0; margin: 0; text-align: left; }
.ap .ap-text h3 { font: 800 22px/1.2 var(--font-head); -webkit-line-clamp: 2; }
.ap .ap-text p { margin-top: 2px; font-size: 14px; }
#ap-fav.on { color: var(--accent); }
#ap-fav.on .ic { fill: currentColor; }
.ap .ap-seek input[type=range] { height: 18px; }
.ap .ap-seek input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; }
.ap .ap-seek input[type=range]::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; }
.ap .ap-skip { background: none; border: 0; width: 56px; height: 56px; }
.ap .ap-skip .ic { width: 30px; height: 30px; }
.ap .big-play { width: 74px; height: 74px; box-shadow: 0 12px 30px rgba(212, 175, 55, .4); }
.ap-bottom { width: 100%; display: flex; justify-content: flex-end; margin: -2px 0 2px; }
.ap-seek10 { margin-bottom: 4px; }

/* ---- the playing track stays a normal one-line row (small controls on the right, small time under the title) ---- */
.trow { flex-wrap: nowrap; }
.trow-ctl { flex-basis: auto; flex: none; padding: 0 4px 0 0; gap: 4px; }
.trow.now .trow-ctl { display: flex; }
.trow.now .icon-btn.flat { display: none; }                      /* heart and menu are in the full player / long menu */
.tctl { width: 34px; height: 34px; }
.tctl.t-toggle { width: 40px; height: 40px; }
.tctl .ic { width: 16px; height: 16px; }
.tctl.t-toggle .ic { width: 18px; height: 18px; }
.trow .trow-time { display: none; margin: 0; font: 600 11px var(--font-head); color: var(--muted); font-variant-numeric: tabular-nums; }
.trow.now .trow-time { display: block; }
.trow.now .trow-meta { display: none; }

/* ---- Home: premium, uncluttered hero (orb + glass download card) ---- */
.hero { position: relative; padding: 34px 0 26px; isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -30px; width: min(560px, 130%); height: 380px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(212, 175, 55, .24), rgba(212, 175, 55, .06) 55%, transparent 75%); pointer-events: none; }
.orb { width: 164px; height: 164px; filter: drop-shadow(0 18px 40px rgba(212, 175, 55, .28)); }
.orb-core { inset: 12px; background: radial-gradient(circle at 50% 35%, #1b1810, #0a0907 72%); }
.orb-ic { width: 58px; height: 58px; }
.orb-wrap { gap: 16px; margin-bottom: 8px; }
.orb-label { font: 700 13px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: #bfb89f; }
.or-sep { margin: 22px 0 18px; }
.dl-card { padding: 18px 16px 16px; border-radius: 28px; border: 1px solid rgba(212, 175, 55, .24);
    background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
    box-shadow: 0 28px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .09); }
.dl-card .input-wrap { min-height: 58px; border-radius: 18px; }
.dl-card .input-wrap input { font-size: 16px; }
.dl-card .seg { border-radius: 16px; }
.dl-card .btn-lg { min-height: 54px; border-radius: 16px; font-weight: 800; letter-spacing: .01em; box-shadow: 0 12px 30px rgba(212, 175, 55, .3); }
.section-head h2 { font: 800 13px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: #bfb89f; }
.section-head .link { font-weight: 700; }

/* ================= Home: higher, more premium ================= */
.hero { padding: clamp(40px, 8vh, 84px) 0 26px; }
.hero::before { top: 0; height: 420px; background: radial-gradient(closest-side, rgba(212, 175, 55, .30), rgba(212, 175, 55, .08) 55%, transparent 76%); }
/* slow rotating dashed halo around the paste button */
.orb::after { content: ""; position: absolute; inset: -24px; border-radius: 50%; border: 1px dashed rgba(212, 175, 55, .32); animation: spin 38s linear infinite; pointer-events: none; }
.orb.busy::after { border-color: rgba(212, 175, 55, .6); animation-duration: 6s; }
/* card with a thin gold gradient edge */
.dl-card { border: 1px solid transparent;
    background: linear-gradient(180deg, #16150f, #0c0b08) padding-box, linear-gradient(140deg, rgba(248, 226, 143, .65), rgba(212, 175, 55, .10) 42%, rgba(168, 121, 27, .5)) border-box;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(212, 175, 55, .08); }
.dl-card .input-wrap { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1); }
/* soft light sweep across the main button */
#dl-btn { position: relative; overflow: hidden; }
#dl-btn::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: sweep 5s ease-in-out infinite; pointer-events: none; }
#dl-btn:disabled::after { display: none; }
@keyframes sweep { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.section-head { align-items: center; }
.sh-actions { display: inline-flex; align-items: center; gap: 14px; }
.sh-actions .linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: 700 14px var(--font-body, inherit); color: var(--muted); }
.sh-actions .linkbtn:hover { color: var(--text); }

/* ================= Library (and every card grid): richer cards ================= */
.icard { padding: 6px 6px 8px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); gap: 9px; }
.icard-thumb { border-radius: 17px; border: 0; }
.icard-body { padding: 0 6px; }
.icard-title { font: 700 14px/1.3 var(--font-head); }
.icard-actions { padding: 0 2px; gap: 5px; }
.ia-btn { background: rgba(255, 255, 255, .06); border-color: transparent; border-radius: 12px; }
.ia-btn:hover { background: rgba(212, 175, 55, .16); color: var(--accent); }
.icard.selected { border-color: var(--accent); }
#view-library .page-head .page-title { font-size: 32px; letter-spacing: -.03em; }
#view-library .tools .search, #view-library .tools .select-sm { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); border-radius: 16px; }
.chips { gap: 10px; }
.chips button { min-height: 40px; padding: 0 18px; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }

/* ===== App feel: nothing shakes, wobbles, scrolls sideways or shows scroll bars ===== */
html, body { overflow-x: hidden; max-width: 100vw; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; }
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
input, textarea, select { font-size: 16px; }            /* iPhone zooms the page when a field under 16px is focused */
.page, .view, main { max-width: 100vw; overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; }

/* ===== Music: smooth glow instead of jumping bars ===== */
.bars { display: none !important; }
@keyframes coverGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .0), 0 6px 16px rgba(0, 0, 0, .35); } 50% { box-shadow: 0 0 0 3px rgba(212, 175, 55, .35), 0 0 26px 4px rgba(212, 175, 55, .35); } }
@keyframes coverBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.trow.playing .cover, .mini-player.playing .cover { animation: coverGlow 2.6s ease-in-out infinite; }
.ap.playing .cover.big { animation: coverBreath 4s ease-in-out infinite; }
.trow.now .cover::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.trow .cover { position: relative; }
@media (prefers-reduced-motion: reduce) { .trow.playing .cover, .mini-player.playing .cover, .ap.playing .cover.big { animation: none; } }

/* ===== Feedback ===== */
.fb-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 0 22px; padding: 16px 18px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(212, 175, 55, .16), rgba(255, 255, 255, .03)); border: 1px solid rgba(212, 175, 55, .22); }
.fb-card-text { display: grid; gap: 2px; min-width: 0; }
.fb-card-text strong { font: 800 15px var(--font-head); }
.fb-card-text span { color: var(--muted); font-size: 13px; }
.footer-fb { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fb-sheet { text-align: left; }
.fb-form { display: grid; gap: 12px; width: 100%; }
.fb-form h3 { font: 800 21px var(--font-head); }
.fb-kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-kinds button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; }
.fb-kinds button.active { background: var(--grad); color: var(--accent-ink, #111); border-color: transparent; }
.fb-form textarea, .fb-form input { width: 100%; padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, .4); border: 1px solid var(--border); color: var(--text); outline: 0; resize: none; }
.fb-form input { min-height: 48px; padding-block: 0; }
.fb-form textarea:focus, .fb-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, .16); }
.fb-count { margin-top: -6px; text-align: right; color: var(--muted); font-size: 12px; }
.fb-done { display: grid; justify-items: center; gap: 10px; padding: 10px 0 4px; text-align: center; }
.fb-check { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #3ddc8c, #1faa6a); color: #06210f; animation: pubPop .6s var(--ease); }
.fb-check .ic { width: 32px; height: 32px; stroke-width: 3; }

/* ===== Keyboard is an overlay: pop-ups track the visible area, the tab bar steps aside ===== */
body.kb-open .bottom-nav, body.kb-open .mini-player, body.kb-open .update-pill { display: none; }
.fb-sheet { max-height: none; padding-bottom: 16px; }
.fb-top { width: 38px; height: 38px; }
.fb-top .ic { width: 18px; height: 18px; }

/* ===== Share sheet: half-height, scrollable, with a close button in its header ===== */
#share-sheet .sheet { max-height: calc(var(--app-h, 100dvh) * .6); overflow-y: auto; overscroll-behavior: contain; padding-top: 10px; align-content: start; text-align: left; justify-items: stretch; }
.sh-head { position: sticky; top: -10px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 10px;
    background: linear-gradient(var(--sheet-bg, rgba(22, 22, 30, .97)) 80%, transparent); }
.sh-titles { min-width: 0; }
.sh-titles h3 { font: 800 20px var(--font-head); }
.sh-titles .share-name { margin: 2px 0 0; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#share-sheet .grabber { display: none; }

/* ===== Feedback: a compact card at the TOP of the screen, so the keyboard can never cover it ===== */
#feedback-sheet { align-items: start; padding-top: calc(var(--safe-t) + 10px); }
#feedback-sheet .sheet { animation: fbDrop .35s var(--ease); }
@keyframes fbDrop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
#feedback-sheet .grabber { display: none; }
.fb-form { gap: 10px; }
.fb-form h3 { font-size: 19px; }
.fb-kinds { flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
.fb-kinds button { flex: none; min-height: 36px; padding: 0 12px; font-size: 13px; }
.fb-form textarea { padding: 10px 12px; }
.fb-form input { min-height: 44px; }
/* slim home button row between the paste form and the recent downloads */
.fb-card { margin: 4px 0 18px; padding: 12px 14px; border-radius: 18px; }
.fb-card-text strong { font-size: 14px; }
.fb-card-text span { font-size: 12px; }
.fb-kinds { overflow: visible; }
.fb-kinds button { flex: 1 1 0; min-width: 0; padding: 0 6px; white-space: nowrap; }

/* ===== Share sheet: one tidy column, nothing scrolls sideways ===== */
#share-sheet .sheet { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; gap: 10px; }
#share-sheet .sheet > * { min-width: 0; max-width: 100%; }
.share-link-row { padding: 6px 6px 6px 12px; }
.share-note { flex-wrap: wrap; row-gap: 4px; line-height: 1.35; }
.sh-label { margin: 6px 0 -2px; font: 800 11.5px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: left; }
.share-grid { gap: 14px 6px; margin: 2px 0 4px; }
.share-ic { width: 54px; height: 54px; }
.share-ic .ic { width: 26px; height: 26px; }
.share-label { max-width: 100%; overflow-wrap: anywhere; }
.share-extra:empty { display: none; }
.share-extra .pub-card { margin-top: 2px; padding: 12px; gap: 10px; border-radius: 18px; }
.share-extra .pub-ic { width: 40px; height: 40px; border-radius: 13px; }
.share-extra .pub-title { font-size: 15px; }
.share-extra .pub-sub, .share-extra .pub-fine { font-size: 12px; }
.share-extra .pub-field input { min-height: 44px; }
.share-extra .pub-go { min-height: 46px; }
.share-link { grid-template-columns: minmax(0, 1fr); }
.share-link-row, .share-note { min-width: 0; max-width: 100%; box-sizing: border-box; }
.share-link-row code { min-width: 0; }
.share-link-row .btn { flex: none; }
@media (max-width: 360px) { .share-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 330px) { .share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Now Playing, Spotify layout: colour taken from the cover, big square art, white play button ===== */
.ap-bg { position: fixed; inset: 0; z-index: -1; filter: none; transform: none; background-image: none !important;
    background: linear-gradient(180deg, var(--ap-tint, #4a3a14) 0%, color-mix(in srgb, var(--ap-tint, #4a3a14) 55%, #0b0b10) 46%, #0b0b10 92%); transition: background .6s ease; }
.ap-modal .sheet.ap { padding-left: 24px; padding-right: 24px; }
.ap .ap-top { min-height: 56px; }
.ap .ap-label { font: 700 14px var(--font-head); letter-spacing: 0; text-transform: none; color: #fff; }
.ap .ap-art { padding: 10px 0 20px; }
.ap .cover.big { width: min(86vw, 46dvh, 420px); height: min(86vw, 46dvh, 420px); border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.ap:not(.playing) .cover.big { transform: scale(.94); }
.ap .ap-titlerow { margin: 4px 0 14px; }
.ap .ap-text h3 { font: 800 25px/1.2 var(--font-head); letter-spacing: -.01em; }
.ap .ap-text p { margin-top: 4px; font-size: 15.5px; color: rgba(255, 255, 255, .66); }
.ap .ap-heart { width: 46px; height: 46px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; color: #fff; }
.ap .ap-heart .ic { width: 22px; height: 22px; }
.ap .ap-heart.on { color: var(--accent); border-color: var(--accent); }
/* thin white progress bar */
.ap .ap-seek input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #fff var(--pos), rgba(255, 255, 255, .28) var(--pos)); height: 4px; }
.ap .ap-seek input[type=range]::-moz-range-track { background: rgba(255, 255, 255, .28); height: 4px; border-radius: 4px; }
.ap .ap-seek input[type=range]::-moz-range-progress { background: #fff; height: 4px; border-radius: 4px; }
.ap .ap-seek input[type=range]::-webkit-slider-thumb { background: #fff; width: 13px; height: 13px; margin-top: -4.5px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.ap .ap-times { color: rgba(255, 255, 255, .62); font-size: 12px; }
/* controls: shuffle - prev - big white play - next - repeat */
.ap .ap-controls { max-width: none; margin: 10px 0 12px; }
.ap .icon-btn.flat { color: rgba(255, 255, 255, .88); }
.ap .icon-btn.flat.on { color: var(--accent); }
.ap .ap-skip { width: 60px; height: 60px; color: #fff; }
.ap .ap-skip .ic { width: 34px; height: 34px; fill: #fff; stroke: #fff; }
.ap .big-play { width: 78px; height: 78px; background: #fff; color: #111; box-shadow: none; border: 0; }
.ap .big-play .ic { width: 38px; height: 38px; fill: #111; stroke: #111; }
.ap .ap-bottom { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 0 4px; }
.ap .ap-bottom .icon-btn { width: 46px; height: 46px; }
.ap-modal .ap-seek10 { display: none; }
@media (max-height: 700px) { .ap .cover.big { width: min(72vw, 38dvh); height: min(72vw, 38dvh); } .ap .big-play { width: 68px; height: 68px; } .ap .ap-text h3 { font-size: 22px; } }

/* ===== Comments sheet (TikTok style) ===== */
.cm-sheet { height: calc(var(--app-h, 100dvh) * .74); max-height: none; padding: 0; display: flex; flex-direction: column; text-align: left; overflow: hidden; align-items: stretch; gap: 0; }
.cm-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 4px 14px; }
.cm-spacer { width: 44px; }
.cm-head h3 { font: 800 15px var(--font-head); }
.cm-compose { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px 12px; border-bottom: 1px solid var(--border); }
.cm-compose .davatar { width: 34px; height: 34px; font-size: 14px; }
.cm-compose input { flex: 1; min-width: 0; min-height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid transparent; color: var(--text); outline: 0; font-size: 16px; }
.cm-compose input:focus { border-color: rgba(212, 175, 55, .6); background: rgba(255, 255, 255, .11); }
.cm-send { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--accent-ink, #111); border: 0; cursor: pointer; transition: opacity .2s, transform .15s; }
.cm-send:disabled { opacity: .35; cursor: default; }
.cm-send:not(:disabled):active { transform: scale(.9); }
.cm-send .ic { width: 20px; height: 20px; }
.cm-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 14px calc(14px + var(--safe-b)); }
.cm-row { display: flex; gap: 11px; padding: 10px 0; animation: cmIn .3s var(--ease) both; }
@keyframes cmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cm-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 15px var(--font-head); text-transform: uppercase; }
.cm-body { min-width: 0; flex: 1; }
.cm-by { display: flex; align-items: center; gap: 6px; font: 700 13px var(--font-head); color: rgba(255, 255, 255, .62); }
.cm-you { padding: 1px 6px; border-radius: 999px; background: rgba(212, 175, 55, .22); color: var(--accent); font-size: 10px; letter-spacing: .04em; }
.cm-text { margin: 3px 0 4px; font-size: 15px; line-height: 1.4; color: #fff; overflow-wrap: anywhere; white-space: pre-wrap; }
.cm-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: rgba(255, 255, 255, .48); }
.cm-del { background: none; border: 0; padding: 0; color: rgba(255, 255, 255, .55); font: 600 12px var(--font-body, inherit); cursor: pointer; }
.cm-more { width: 100%; margin: 8px 0; min-height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--muted); font-weight: 700; border: 0; cursor: pointer; }
.cm-skel { height: 58px; margin: 10px 0; border-radius: 14px; }
.cm-empty { display: grid; justify-items: center; gap: 6px; padding: 38px 10px; text-align: center; color: var(--muted); }
.cm-empty strong { color: var(--text); font: 800 16px var(--font-head); }
.cm-empty-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .07); margin-bottom: 4px; }
.cm-empty-ic .ic { width: 26px; height: 26px; }
/* comment count under the reel button */
.reel-btn { position: relative; }
.reel-count { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); font: 700 11px var(--font-head); color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); pointer-events: none; }
.reel-rail { gap: 18px; }

/* ===== Collection name sheet: pinned to the top so the keyboard can't hide it ===== */
#col-modal { align-items: start; padding-top: calc(var(--safe-t) + 10px); }
#col-modal .sheet { animation: fbDrop .35s var(--ease); }
#col-modal .grabber { display: none; }

/* ===== Downloading: the circle takes the stage ===== */
.hero.downloading .orb { transform: scale(1.14); }
.hero.downloading .orb-label { color: var(--accent); }
.hero.downloading .dl-card { opacity: .6; transition: opacity .4s; }
.hero .orb { transition: transform .5s var(--ease); }
.hero.downloading::before { opacity: 1; filter: brightness(1.35); }

/* ===== Comments like Instagram: video stays visible above, list in the middle, emoji row + input at the bottom, right above the keyboard ===== */
#comments-sheet { top: var(--cm-top, 0px); height: var(--cm-h, var(--app-h, 100dvh)); align-items: end; }
#comments-sheet .modal-backdrop { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: none; backdrop-filter: none; }
.cm-sheet { height: auto; min-height: 0; max-height: calc(var(--cm-h, var(--app-h, 100dvh)) * .66); border-radius: 22px 22px 0 0; background: color-mix(in srgb,var(--theme-surface) 96%,var(--bg)); }
body.cm-open .cm-sheet { height: min(calc(var(--app-h, 100dvh) * .66), calc(var(--cm-h, 100dvh) - 80px)); }
.cm-top { flex: none; touch-action: none; }
.cm-grabber { display: block; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: rgba(255, 255, 255, .35); }
.cm-head { padding-top: 4px; }
.cm-list { padding-top: 0; }
.cm-emojis { flex: none; display: flex; justify-content: space-between; padding: 8px 12px 4px; border-top: 1px solid var(--border); background: color-mix(in srgb,var(--theme-surface) 96%,var(--bg)); }
.cm-emojis button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; transition: transform .12s; }
.cm-emojis button:active { transform: scale(1.3); }
.cm-compose { border-bottom: 0; padding: 6px 14px calc(12px + var(--safe-b)); background: color-mix(in srgb,var(--theme-surface) 96%,var(--bg)); }
body.cm-open.kb-open .cm-compose { padding-bottom: 12px; }
/* the video you are commenting on shrinks into a card at the top */
body.cm-open #viewer .feed-item.reel .reel-stage { transform: translateY(1%) scale(.36); transform-origin: 50% 0; border-radius: 22px; transition: transform .35s var(--ease); }
body.cm-open #viewer .reel-info, body.cm-open #viewer .reel-rail { opacity: 0; transition: opacity .2s; pointer-events: none; }
body.cm-open #viewer .reel-bg { opacity: .5; }

/* Keep the comments overlay pinned while the mobile keyboard resizes the visible viewport. */
#comments-sheet { top: 0; bottom: auto; overflow: hidden; overscroll-behavior: none; }
body.cm-open { overscroll-behavior: none; }
body.cm-open #comments-sheet .modal-backdrop { position: absolute; inset: 0; }
body.cm-open #comments-sheet .cm-sheet { flex: none; min-height: 0; overflow: hidden; overscroll-behavior: contain; }
body.cm-open #comments-sheet .cm-list { min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.cm-open.kb-open #comments-sheet .cm-compose { padding-bottom: 12px; }

/* ===== comment hearts, Reply, nested replies ===== */
.cm-row { align-items: flex-start; }
.cm-ago { font-weight: 500; color: rgba(255, 255, 255, .45); font-size: 12px; }
.cm-like { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 40px; padding: 6px 0 0; background: none; border: 0; color: rgba(255, 255, 255, .6); cursor: pointer; font: 700 12px var(--font-head); }
.cm-like .ic { width: 20px; height: 20px; transition: transform .2s var(--ease); }
.cm-like:active .ic { transform: scale(1.35); }
.cm-like.on { color: #ff4d6d; }
.cm-like.on .ic { fill: currentColor; }
.cm-like span:empty { display: none; }
.cm-meta { gap: 18px; margin-top: 2px; }
.cm-reply-btn { background: none; border: 0; padding: 0; color: rgba(255, 255, 255, .62); font: 700 12px var(--font-head); cursor: pointer; }
.cm-view { display: block; margin: 8px 0 2px; padding: 0; background: none; border: 0; color: rgba(255, 255, 255, .55); font: 700 12.5px var(--font-head); cursor: pointer; }
.cm-view::before { content: ""; display: inline-block; width: 26px; height: 1px; background: rgba(255, 255, 255, .3); vertical-align: middle; margin-right: 10px; }
.cm-replies { margin-top: 4px; }
.cm-replies[hidden] { display: none; }
.cm-reply { padding: 8px 0 4px; }
.cm-reply .cm-av { width: 28px; height: 28px; font-size: 12px; }
.cm-reply .cm-text { font-size: 14px; }
.cm-replying { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .7); font-size: 13px; }
.cm-replying[hidden] { display: none; }
.cm-replying b { color: var(--accent); }
.cm-replying button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }

/* ===== Bubble loader (three soft dots) instead of a spinning ring ===== */
@keyframes bubMid { 0%, 80%, 100% { background-size: 36% 36%; opacity: .55; } 40% { background-size: 100% 100%; opacity: 1; } }
@keyframes bubSide { 0%, 80%, 100% { transform: scale(.36); opacity: .55; } 40% { transform: scale(1); opacity: 1; } }
.spinner, .spinner-inline {
    position: relative; flex: none; border: 0; border-radius: 0; box-sizing: border-box; animation: bubMid 1.3s ease-in-out infinite; animation-delay: -.45s;
    background: radial-gradient(circle closest-side, var(--accent) 96%, transparent 100%) center / 36% 36% no-repeat;
}
.spinner::before, .spinner::after, .spinner-inline::before, .spinner-inline::after {
    content: ""; position: absolute; top: 0; width: 100%; height: 100%; border-radius: 50%; background: var(--accent); animation: bubSide 1.3s ease-in-out infinite;
}
.spinner::before, .spinner-inline::before { left: -170%; animation-delay: -.9s; }
.spinner::after, .spinner-inline::after { left: 170%; animation-delay: 0s; }
.spinner { position: absolute; width: 16px; height: 16px; top: 50%; left: 50%; margin: -8px 0 0 -8px; z-index: 2; }
.spinner-inline { width: 9px; height: 9px; margin: 0 15px; }
.btn .spinner-inline { margin: 0 12px 0 10px; }
.cv-steps li.active .dot { border: 0; background: var(--accent); animation: bubSide 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .spinner, .spinner-inline, .spinner::before, .spinner::after, .spinner-inline::before, .spinner-inline::after { animation-duration: 3s; } }

/* ===== Collections inside the Library ===== */
.lib-colls { margin: 2px 0 16px; }
.sec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
.sec-row h3 { font-size: 16px; font-weight: 700; }
.cgrid.strip { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cgrid.strip::-webkit-scrollbar { display: none; }
.cgrid.strip .ctile { flex: 0 0 140px; scroll-snap-align: start; }

/* ===== More ===== */
.more-list { display: flex; flex-direction: column; }
.more-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 4px 8px; }
.more-label:first-child { margin-top: 4px; }
.more-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; margin-bottom: 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-align: left; cursor: pointer; transition: transform .2s var(--ease), background .2s; }
.more-row:active { transform: scale(.985); background: var(--surface-2); }
.more-row.feature { background: linear-gradient(135deg, rgba(212, 175, 55, .18), rgba(212, 175, 55, .04)); border-color: rgba(212, 175, 55, .38); }
.more-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
.more-ic .ic { width: 22px; height: 22px; }
.more-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.more-txt b { font-size: 15px; font-weight: 650; }
.more-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.more-row .chev { flex: none; width: 18px; height: 18px; color: var(--muted); }
.more-hero { position: relative; display: flex; align-items: center; gap: 14px; min-height: 94px; padding: 18px; margin: 4px 0 18px; overflow: hidden; border: 1px solid rgba(212,175,55,.32); border-radius: 22px; background: radial-gradient(ellipse at 100% 0, rgba(212,175,55,.23), transparent 55%), linear-gradient(135deg, var(--surface-2), var(--surface)); }
.more-hero::after { content: ""; position: absolute; width: 120px; height: 120px; right: -42px; bottom: -88px; border: 1px solid rgba(212,175,55,.24); border-radius: 50%; box-shadow: 0 0 0 15px rgba(212,175,55,.035), 0 0 0 30px rgba(212,175,55,.025); }
.more-hero-mark { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: var(--accent-ink); background: linear-gradient(145deg, #f2d675, #c9a227); font-size: 25px; box-shadow: 0 8px 24px rgba(212,175,55,.2); }
.more-hero div { display: grid; gap: 4px; min-width: 0; }
.more-hero b { font-size: 16px; }
.more-hero small { max-width: 390px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.more-list > .more-label { margin-top: 20px; }
.more-list > .more-row { box-shadow: 0 5px 18px rgba(0,0,0,.06); }
.more-list > .more-row.feature { border-color: rgba(212,175,55,.32); }
.more-list > .more-row:hover { background-color: var(--surface-2); border-color: rgba(212,175,55,.48); }
.more-group { margin: 22px 0 8px; padding: 18px; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(155deg, var(--surface), color-mix(in srgb, var(--surface) 80%, var(--surface-2))); box-shadow: 0 14px 36px rgba(0,0,0,.08); }
.more-group-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 2px 15px; }
.more-group-head h3 { margin: 3px 0 2px; font: 750 23px/1.1 var(--font-head); letter-spacing: -.025em; }
.more-group-head p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.more-eyebrow, .more-game-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.more-group-count { flex: none; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 11px; font-weight: 700; }
.more-game-card { position: relative; display: flex; align-items: center; gap: 15px; min-height: 132px; padding: 16px; overflow: hidden; border: 1px solid rgba(212,175,55,.34); border-radius: 19px; color: var(--text); text-decoration: none; background: radial-gradient(ellipse at 100% 0, rgba(212,175,55,.17), transparent 52%), linear-gradient(130deg, rgba(212,175,55,.08), var(--surface-2)); transition: transform .18s var(--ease), border-color .18s, box-shadow .18s; }
.more-game-card:hover { transform: translateY(-2px); border-color: rgba(212,175,55,.68); box-shadow: 0 12px 28px rgba(0,0,0,.13); }
.more-game-card:active { transform: scale(.99); }
.more-game-art { position: relative; flex: none; width: 66px; height: 66px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(212,175,55,.3); border-radius: 19px; color: var(--accent); background: linear-gradient(145deg, rgba(212,175,55,.2), rgba(212,175,55,.06)); }
.more-game-art > span { z-index: 1; font-size: 34px; font-weight: 800; line-height: 1; }
.more-game-art i { position: absolute; inset: 8px; border: 1px solid rgba(212,175,55,.16); border-radius: 11px; }
.more-game-copy { position: relative; z-index: 1; display: grid; gap: 4px; min-width: 0; }
.more-game-copy > b { font: 750 18px/1.15 var(--font-head); }
.more-game-copy > span:not(.more-game-kicker) { max-width: 430px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.more-game-copy > strong { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--accent); font-size: 12px; }
.more-game-copy > strong .ic { width: 14px; height: 14px; transform: rotate(-90deg); }
.more-game-spark { position: absolute; top: 13px; right: 15px; color: rgba(212,175,55,.55); font-size: 17px; }
@media (max-width: 420px) { .more-group { padding: 14px; } .more-game-card { gap: 12px; padding: 13px; } .more-game-art { width: 56px; height: 56px; border-radius: 16px; } .more-game-copy > span:not(.more-game-kicker) { font-size: 11.5px; } }

/* ===== Nearby Share ===== */
.nb { display: flex; flex-direction: column; }
.nb-name { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 8px 14px; margin-bottom: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 14px; }
.nb-name .ic { width: 15px; height: 15px; color: var(--muted); flex: none; }
.nb-name span:not(.nb-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-name-in { background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; width: 150px; }
.nb-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #e8b84a; animation: nbBlink 1.2s ease-in-out infinite; }
.nb-dot.on { background: var(--ok); animation: none; box-shadow: 0 0 0 4px rgba(95, 214, 138, .18); }
.nb-dot.off { background: var(--danger); animation: none; }
@keyframes nbBlink { 50% { opacity: .35; } }
.nb-banner { display: flex; gap: 10px; align-items: center; padding: 11px 14px; margin: 8px 0; border-radius: 14px; background: rgba(255, 107, 107, .12); border: 1px solid rgba(255, 107, 107, .3); font-size: 13.5px; }
.nb-banner .ic { flex: none; width: 18px; height: 18px; color: var(--danger); }

.nb-radar { position: relative; width: min(100%, 320px, 40vh); aspect-ratio: 1; margin: 6px auto 0; }
.nb-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(212, 175, 55, .22); pointer-events: none; }
.nb-ring.r1 { inset: 33%; } .nb-ring.r2 { inset: 17%; } .nb-ring.r3 { inset: 1%; }
.nb-ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(212, 175, 55, .55); animation: nbPulse 3.6s ease-out infinite; }
.nb-ring.r2::after { animation-delay: 1.2s; } .nb-ring.r3::after { animation-delay: 2.4s; }
@keyframes nbPulse { from { transform: scale(.6); opacity: .8; } to { transform: scale(1.12); opacity: 0; } }
.nb-you { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-ink); background: linear-gradient(145deg, #f2d675, #c9a227); box-shadow: 0 8px 28px rgba(212, 175, 55, .35); }
.nb-you .ic { width: 26px; height: 26px; }
#nb-peers { position: absolute; inset: 0; }
.nb-peer { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 5px; width: 92px; padding: 0; background: none; border: 0; color: var(--text); cursor: pointer; }
.nb-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(212, 175, 55, .5); color: var(--accent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: nbIn .5s var(--ease) both; transition: transform .2s var(--ease), background .2s; }
.nb-av .ic { width: 24px; height: 24px; }
.nb-peer:active .nb-av, .nb-peer.over .nb-av { transform: scale(1.12); background: rgba(212, 175, 55, .22); }
@keyframes nbIn { from { transform: scale(.4); opacity: 0; } }
.nb-pn { max-width: 92px; font-size: 12.5px; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-via { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nb-empty { display: grid; gap: 4px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.45; max-width: 330px; margin: 0 auto 8px; }
.nb-empty b { color: var(--text); font-size: 15px; }
.nb-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.nb-actions #nb-show, .nb-wide { grid-column: 1 / -1; }
.nb-actions .btn { justify-content: center; min-height: 48px; min-width: 0; padding-inline: 10px; font-size: 14px; gap: 7px; white-space: nowrap; }
.nb-rooms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nb-room { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; }
.nb-room .ic { width: 15px; height: 15px; color: var(--accent); }
.nb-room button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 0; color: var(--muted); }
.nb-room button .ic { width: 13px; height: 13px; color: inherit; }
#nb-received { margin-top: 18px; }
.nb-rlist { display: grid; gap: 8px; }
.nb-rrow, .nb-done-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.nb-rmeta { display: grid; min-width: 0; }
.nb-fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }

.nb-sheet { padding-bottom: calc(18px + var(--safe-b)); }
.nb-qr { display: block; width: min(62vw, 240px); height: auto; margin: 6px auto 4px; border-radius: 16px; background: #fff; }
.nb-code { text-align: center; font: 700 36px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; color: var(--accent); margin: 10px 0 2px; }
.nb-ttl { text-align: center; max-width: 300px; margin: 0 auto; line-height: 1.4; }
.nb-sheet-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.nb-sheet-actions .btn { flex: 1 1 0; justify-content: center; min-height: 48px; }
.nb-code-in { text-align: center; font: 700 30px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .3em; padding: 14px 8px; width: 100%; }
.nb-err { color: var(--danger); font-size: 13.5px; text-align: center; margin-top: 8px; }
.nb-scanbox { position: relative; width: 100%; aspect-ratio: 1; max-height: 46vh; margin: 0 auto 12px; border-radius: 18px; overflow: hidden; background: #000; }
.nb-scanbox video { width: 100%; height: 100%; object-fit: cover; }
.nb-scan-frame { position: absolute; inset: 16%; border: 2px solid var(--accent); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.nb-files { list-style: none; display: grid; gap: 6px; max-height: 32vh; overflow: auto; margin: 4px 0 0; padding: 0; }
.nb-files li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--surface); }
.nb-warn, .nb-tip { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; background: rgba(232, 184, 74, .12); border: 1px solid rgba(232, 184, 74, .3); }
.nb-badge { align-self: flex-start; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.nb-badge.ok { background: rgba(95, 214, 138, .14); color: var(--ok); }
.nb-badge.warn { background: rgba(232, 184, 74, .16); color: #e8b84a; }
.nb-ring-wrap { margin: 14px 0 10px; }
.nb-bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.nb-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #b8932a, #f2d675); transition: width .3s linear; }
.is-done .nb-bar i { background: linear-gradient(90deg, #3fae6a, var(--ok)); }
.is-failed .nb-bar i { background: var(--danger); }
.nb-stats { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nb-stats span:nth-child(2) { color: var(--accent); }
.nb-xfile { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-done { display: grid; gap: 8px; margin-top: 12px; max-height: 30vh; overflow: auto; }
.nb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nb-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 13.5px; font-weight: 600; }
.nb-chip .ic { width: 16px; height: 16px; }
.nb-chip.active { background: rgba(212, 175, 55, .18); border-color: var(--accent); color: var(--accent); }
.nb-text-in { width: 100%; resize: none; min-height: 110px; }
.nb-msg { margin: 6px 0 0; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 40vh; overflow: auto; user-select: text; -webkit-user-select: text; }
@media (prefers-reduced-motion: reduce) { .nb-ring::after, .nb-av, .nb-dot { animation: none !important; } .nb-bar i { transition: none; } }

/* ===== Softer gold: buttons use the same dim gold glass as the Nearby / music cards (the download orb stays bright) ===== */
.btn-primary { background: linear-gradient(135deg, rgba(212, 175, 55, .22), rgba(212, 175, 55, .08)); color: #e9cf73; border: 1px solid rgba(212, 175, 55, .42); box-shadow: none; }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, rgba(212, 175, 55, .3), rgba(212, 175, 55, .12)); box-shadow: 0 8px 26px rgba(212, 175, 55, .16); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { background: linear-gradient(135deg, rgba(212, 175, 55, .34), rgba(212, 175, 55, .14)); }
.nb-you { color: #e9cf73; background: linear-gradient(145deg, rgba(212, 175, 55, .28), rgba(212, 175, 55, .1)); border: 1px solid rgba(212, 175, 55, .5); box-shadow: 0 8px 28px rgba(212, 175, 55, .14); }
.nb-bar i { background: linear-gradient(90deg, rgba(184, 147, 42, .85), rgba(233, 207, 115, .85)); }

/* ===== Profile pictures (used in Discover, comments, Nearby and the profile sheet) ===== */
.pf-av { position: relative; flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, rgba(212, 175, 55, .55), rgba(212, 175, 55, .2)); color: #f3e3a2; font: 800 15px var(--font-head); border: 1px solid rgba(212, 175, 55, .4); }
.pf-av i { font-style: normal; }
.pf-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-av-sm { width: 24px; height: 24px; font-size: 11px; }
.pf-av-lg { width: 52px; height: 52px; font-size: 20px; }
.pf-av-xl { width: 112px; height: 112px; font-size: 44px; border-width: 2px; }
.pf-av-fill { width: 100%; height: 100%; border: 0; }
.cm-av.pf-av { color: #f3e3a2; text-transform: uppercase; }
.cm-reply .cm-av.pf-av { width: 28px; height: 28px; }
.reel-by .pf-av, .dmeta2 .pf-av { margin-right: 2px; }
.nb-av { overflow: hidden; }

.pf-card { padding: 14px; }
.pf-card .more-txt b { font-size: 17px; }
.pf-sheet { padding-bottom: calc(18px + var(--safe-b)); max-height: 92vh; overflow-y: auto; }
.pf-avatar-btn { position: relative; display: block; margin: 8px auto 6px; background: none; border: 0; padding: 0; border-radius: 50%; cursor: pointer; }
.pf-cam { position: absolute; right: 2px; bottom: 4px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #1b1810; border: 1px solid rgba(212, 175, 55, .6); color: #e9cf73; }
.pf-cam .ic { width: 17px; height: 17px; }
#pf-remove { display: block; margin: 0 auto 6px; }
.pf-label { display: block; margin: 14px 2px 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pf-row { display: flex; gap: 10px; }
.pf-row .field { flex: 1; min-width: 0; }
.pf-note { margin: 8px 2px 0; line-height: 1.45; }
.pf-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.pf-section h4 { font-size: 15px; margin-bottom: 4px; }
.pf-code-box { margin: 12px 0 2px; padding: 14px; border-radius: 16px; text-align: center; background: rgba(212, 175, 55, .08); border: 1px solid rgba(212, 175, 55, .35); display: grid; gap: 8px; justify-items: center; }
.pf-code { font: 700 34px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; color: #e9cf73; }

/* Nearby: two small buttons under the radar */
.nb-actions { display: flex; justify-content: center; gap: 10px; margin-top: 10px; grid-template-columns: none; }
.nb-actions .btn { flex: 0 1 auto; min-height: 40px; padding-inline: 16px; font-size: 13.5px; border-radius: 999px; }
.nb-actions #nb-show { grid-column: auto; }

/* Profile and sign-in sheets sit at the top so the keyboard never hides the fields */
#profile-sheet, #login-sheet { align-items: start; padding-top: calc(var(--safe-t) + 10px); }
#profile-sheet .sheet, #login-sheet .sheet { max-height: calc(var(--app-h, 100dvh) - var(--safe-t) - 20px); border-radius: 22px; animation: fbDrop .35s var(--ease); }
#profile-sheet .grabber, #login-sheet .grabber { display: none; }

/* Update button (top bar) */
.icon-btn.upd-btn { width: auto; padding: 0 14px 0 11px; gap: 7px; border-radius: 999px; font: 700 13px var(--font-head); color: #e9cf73; border: 1px solid rgba(212, 175, 55, .4); background: linear-gradient(135deg, rgba(212, 175, 55, .2), rgba(212, 175, 55, .07)); }
.icon-btn.upd-btn .ic { width: 18px; height: 18px; }
.icon-btn.upd-btn.spinning .ic, .more-row.spinning .more-ic .ic { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Profile + sign-in: one column, big inputs (16px so iPhone never zooms), no inner scrolling ===== */
.pf-sheet { max-height: none; overflow: visible; padding: 14px 16px calc(16px + var(--safe-b)); touch-action: manipulation; }
#profile-sheet .sheet, #login-sheet .sheet { max-height: none; overflow: visible; }
.pf-sheet .sh-head { margin-bottom: 2px; }
.pf-avatar-btn { margin: 2px auto 4px; }
.pf-av-xl { width: 92px; height: 92px; font-size: 38px; }
.pf-label { margin: 10px 2px 6px; }
.pf-field { position: relative; display: flex; align-items: center; margin-top: 10px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(212, 175, 55, .35); }
.pf-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 175, 55, .15); }
.pf-label + .pf-field { margin-top: 0; }
.pf-field input { flex: 1 1 auto; width: 100%; min-width: 0; height: 52px; padding: 0 14px; background: transparent; border: 0; outline: 0; color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; -webkit-appearance: none; appearance: none; }
.pf-field input::placeholder { color: var(--muted); font-weight: 500; }
#login-code { letter-spacing: .3em; font: 700 20px ui-monospace, SFMono-Regular, Menlo, monospace; }
#login-code::placeholder { letter-spacing: 0; font-family: inherit; font-size: 16px; font-weight: 500; }
.pf-clear { flex: none; width: 34px; height: 34px; margin-right: 9px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); border: 0; color: #fff; }
.pf-clear .ic { width: 15px; height: 15px; }
.pf-save { width: 100%; min-height: 50px; margin-top: 10px; justify-content: center; }
.pf-section { margin-top: 12px; padding-top: 12px; }
.pf-section .nb-sheet-actions { margin-top: 0; }
.pf-note { margin: 8px 2px 0; font-size: 12.5px; }
.pf-name-status { min-height: 16px; margin: 7px 2px 0; font-size: 12px; line-height: 1.35; }
.pf-name-status[hidden] { display: none; }
.pf-name-status[data-state="available"] { color: #4ee19a; }
.pf-name-status[data-state="taken"], .pf-name-status[data-state="invalid"], .pf-name-status[data-state="error"] { color: #ff7182; }
.pf-name-status[data-state="checking"], .pf-name-status[data-state="current"] { color: var(--muted); }

/* Crop sheet */
.crop-stage { position: relative; width: min(78vw, 300px); aspect-ratio: 1; margin: 8px auto 12px; border-radius: 16px; overflow: hidden; background: #000; touch-action: none; }
.crop-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.crop-stage::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(233, 207, 115, .9); box-shadow: 0 0 0 999px rgba(0, 0, 0, .62); pointer-events: none; }
.crop-zoom { display: block; width: min(78vw, 300px); margin: 0 auto; accent-color: #d4af37; }
.crop-hint { text-align: center; margin-top: 6px; }
.nb-diag { min-height: 18px; margin: 2px 4px 0; }

/* Discover: nothing but a loader until the first video is ready */
#view-discover.booting > :not(.disc-boot) { visibility: hidden; }
.disc-boot { position: fixed; inset: 0 0 calc(var(--bottomnav-h) + var(--safe-b)) 0; z-index: 45; display: grid; place-items: center; background: #000; }
.disc-boot .spinner-inline { width: 14px; height: 14px; margin: 0; }

/* Reels: a clear paused state, and the small refresh button */
.reel-paused { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; pointer-events: none; opacity: 0; transform: scale(.92); transition: opacity .18s ease, transform .28s var(--ease); }
.reel-paused.on { opacity: 1; transform: none; }
.rp-disc { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: rgba(12, 12, 16, .5); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.rp-disc .ic { width: 38px; height: 38px; margin-left: 4px; fill: #fff; stroke: #fff; }
.rp-label { font: 700 12px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.reel-btn[aria-label="Refresh"] { width: 40px; height: 40px; opacity: .9; }
.reel-btn[aria-label="Refresh"] .ic { width: 19px; height: 19px; }
.reel-btn.spinning .ic { animation: spin .8s linear infinite; }

/* Verified blue check */
.vbadge { display: inline-flex; vertical-align: -3px; margin-left: 4px; line-height: 0; }
.vbadge .ic, .vbadge .vb-svg { width: 16px; height: 16px; stroke: none; fill: none; filter: drop-shadow(0 1px 3px rgba(29, 155, 240, .45)); }
.pf-card .vbadge .ic { width: 18px; height: 18px; }
.nb-pn .vbadge { margin-left: 2px; } .nb-pn .vbadge .ic { width: 12px; height: 12px; }
.cm-by .vbadge .ic { width: 14px; height: 14px; }

/* Discover is the reels: once they are open, the page of cards behind them is not part of the screen */
#view-discover.reels-only > :not(.seo):not(.disc-boot):not(.disc-feed-error) { display: none; }
.disc-feed-error { position: fixed; z-index: 48; inset: calc(var(--topbar-h) + var(--safe-t)) 16px calc(var(--bottomnav-h) + var(--safe-b)); display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--bg); text-align: center; }

/* Reels side bar: like, comments, share, refresh, post, report */
.reel-btn.liked .ic { fill: #ff3b5c; stroke: #ff3b5c; }
.reel-btn.pop .ic { animation: likePop .4s var(--ease); }
@keyframes likePop { 40% { transform: scale(1.35); } }
.tap-heart { position: absolute; top: 50%; left: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; display: grid; place-items: center; pointer-events: none; animation: heartBurst .8s var(--ease) forwards; }
.tap-heart .ic { width: 96px; height: 96px; fill: #ff3b5c; stroke: #ff3b5c; filter: drop-shadow(0 6px 24px rgba(255, 59, 92, .55)); }
@keyframes heartBurst { 0% { transform: scale(.3); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.3) translateY(-30px); opacity: 0; } }

/* Instagram badge */
.badge[data-p="instagram"]::before { background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); box-shadow: 0 0 10px #d62976; }

/* Comments: sending feels good, and there is no emoji row next to the send button any more */
.cm-send { transition: transform .18s var(--ease), background .2s, opacity .2s; }
.cm-send.sending { opacity: .6; pointer-events: none; animation: cmSending .7s ease-in-out infinite; }
.cm-send.sent { animation: cmSent .5s var(--ease); }
@keyframes cmSending { 50% { transform: scale(.88); } }
@keyframes cmSent { 40% { transform: scale(1.25) rotate(-12deg); } }
.cm-row.cm-new { animation: cmIn .55s var(--ease); }
@keyframes cmIn { from { opacity: 0; transform: translateY(-14px); background: rgba(212, 175, 55, .25); } to { opacity: 1; transform: none; background: transparent; } }
.cm-reply-btn { font-weight: 700; }

/* Profile: auto-post switch */
.pf-switch { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; }
.pf-sw-txt { display: grid; gap: 2px; min-width: 0; }
.pf-sw-txt b { font-size: 14.5px; } .pf-sw-txt small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.pf-switch input { position: absolute; opacity: 0; pointer-events: none; }
.pf-sw-ui { flex: none; width: 46px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .16); position: relative; transition: background .2s; }
.pf-sw-ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .22s var(--ease); }
.pf-switch input:checked + .pf-sw-ui { background: #c9a227; }
.pf-switch input:checked + .pf-sw-ui::after { transform: translateX(18px); }
.pf-switch input:focus-visible + .pf-sw-ui { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Hold on the right side: 2x */
.reel-2x { position: absolute; top: calc(18px + var(--safe-t)); left: 50%; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 7px 14px 7px 10px; border-radius: 999px; transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
    background: rgba(12, 12, 16, .6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font: 800 15px var(--font-head); transition: opacity .15s ease, transform .25s var(--ease); }
.reel-2x.on { opacity: 1; transform: translate(-50%, 0); }
.reel-2x .ic { width: 16px; height: 16px; fill: #fff; stroke: #fff; margin-right: -9px; animation: fastGo .6s linear infinite; }
.reel-2x .ic + .ic { animation-delay: .2s; }
.reel-2x b { margin-left: 12px; }
@keyframes fastGo { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.reel-stage, .reel-stage video { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

.reel-views.bump { animation: viewBump .5s var(--ease); display: inline-block; }
@keyframes viewBump { 40% { transform: scale(1.25); color: #fff; } }

/* Notification bell */
.bell-btn { position: relative; }
.bell-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff3b5c; color: #fff; font: 800 11px/18px var(--font-head); text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.bell-btn.ring .ic { animation: bellRing .9s var(--ease); transform-origin: 50% 0; }
@keyframes bellRing { 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.nt-sheet { max-height: min(78vh, 640px); display: flex; flex-direction: column; }
.nt-sheet .sh-head { gap: 8px; }
.nt-list { overflow-y: auto; margin: 6px -6px 0; padding: 0 6px; display: grid; gap: 4px; align-content: start; overscroll-behavior: contain; }
.nt-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; border-radius: 14px; background: transparent; border: 0; color: var(--text); text-align: left; cursor: pointer; transition: background .15s; }
.nt-row:active { background: var(--surface-2); }
.nt-row.unread { background: rgba(212, 175, 55, .08); }
.nt-av { position: relative; flex: none; width: 44px; height: 44px; }
.nt-av .pf-av { width: 44px; height: 44px; }
.nt-kind { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #1b1810; border: 1px solid rgba(212, 175, 55, .5); color: #e9cf73; }
.nt-kind .ic { width: 11px; height: 11px; }
.nt-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.nt-line { font-size: 14px; line-height: 1.35; } .nt-line b { font-weight: 700; }
.nt-text { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt-ago { flex: none; color: var(--muted); font-size: 12px; }
.nt-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #d4af37; }
.nt-push { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0 8px; padding: 11px 14px; border-radius: 14px; background: rgba(212, 175, 55, .1); border: 1px solid rgba(212, 175, 55, .35); color: var(--text); font-size: 13.5px; text-align: left; }
.nt-push .ic { flex: none; width: 18px; height: 18px; color: #e9cf73; } .nt-push span { flex: 1; }
.nt-push b { color: #e9cf73; font-size: 13px; }
.nt-push.on { background: var(--surface); border-color: var(--border); }
.nt-empty { padding: 28px 10px; }

/* ===== Simple home: the orb sits in the middle of the screen, the link box under it ===== */
#view-home .hero { min-height: calc(var(--app-h, 100dvh) - var(--topbar-h) - var(--safe-t) - var(--bottomnav-h) - var(--safe-b) - 112px); padding: 0; display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; }
#view-home .hero::before { top: 50%; height: 420px; transform: translate(-50%, -50%); }
#view-home .hero .orb-wrap { grid-row: 2; margin: 0 auto; }
#view-home .hero .or-sep { display: none; }
#view-home .hero .dl-card { grid-row: 3; align-self: start; margin-top: 56px; width: 100%; }
@media (max-height: 640px) { #view-home .hero { min-height: 0; padding: 24px 0; display: block; } #view-home .hero .dl-card { margin-top: 0; } }

/* Keep the game shortcut visible on Home without scrolling past the download hero. */
.home-barricade{position:relative;display:flex;align-items:center;gap:14px;min-height:78px;padding:13px 16px;margin:4px 0 22px;border:1px solid rgba(71,190,124,.42);border-radius:19px;background:radial-gradient(ellipse at 100% 0,rgba(48,177,105,.19),transparent 58%),linear-gradient(125deg,rgba(18,93,55,.34),rgba(17,26,23,.94));box-shadow:0 9px 28px rgba(4,41,23,.22);transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.home-barricade:active{transform:scale(.985);border-color:rgba(96,220,149,.7);box-shadow:0 12px 34px rgba(4,65,34,.3)}
.home-barricade .bc-mark{flex:none;width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#31bd78,#16824d);color:#fff;font-size:25px;box-shadow:0 7px 20px rgba(19,153,82,.25)}
.home-barricade>span:nth-child(2){flex:1;min-width:0;display:grid;gap:2px}
.home-barricade b{font:750 16px/1.2 var(--font-head);color:#f5fff8}
.home-barricade small{font-size:12px;line-height:1.35;color:#a6c9b4}
.home-barricade>span:last-child{flex:none;color:#8be0ad;font-size:27px;line-height:1}

/* Push prompt */
.pp-sheet { text-align: center; display: grid; gap: 10px; justify-items: center; padding-bottom: calc(18px + var(--safe-b)); }
.pp-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(212, 175, 55, .14); border: 1px solid rgba(212, 175, 55, .4); color: #e9cf73; }
.pp-ic .ic { width: 28px; height: 28px; }
.pp-text { color: var(--muted); max-width: 320px; line-height: 1.5; margin: 0 0 6px; }
.pp-sheet .btn { width: 100%; max-width: 360px; justify-content: center; }
.pp-note { margin: 0; }

.more-switch { margin: 0 0 4px; }

/* ---- Home: games and sharing ---- */
.home-cards { margin: 16px 0 6px; display: grid; gap: 9px; }
.hc-grid { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.hc-card { position: relative; display: grid; align-content: start; gap: 5px; padding: 11px 11px 10px; border: 1px solid var(--border); border-radius: 18px; color: inherit; text-decoration: none; overflow: hidden; transition: transform .2s var(--ease), border-color .2s; background: linear-gradient(155deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); }
.hc-card:active { transform: scale(.98); }
.hc-card::after { content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; opacity: .18; filter: blur(2px); background: var(--accent); }
.hc-game { border-color: rgba(233, 188, 74, .35); }
.hc-share::after { background: #5aa9ff; }
.hc-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: rgba(233, 188, 74, .14); color: var(--accent); }
.hc-share .hc-ic { background: rgba(90, 169, 255, .14); color: #5aa9ff; }
.hc-ic .ic { width: 19px; height: 19px; }
.hc-mark { font-size: 20px; line-height: 1; }
.hc-card b { font: 700 14px var(--font-head); }
.hc-card small { color: var(--muted); font-size: 10.5px; line-height: 1.32; }
.hc-go { margin-top: 2px; justify-self: start; padding: 5px 9px; border-radius: 999px; background: var(--accent); color: #17130a; font-size: 10.5px; font-weight: 700; }
.hc-share .hc-go { background: #5aa9ff; color: #07121f; }
.hc-account { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(233, 188, 74, .35); border-radius: 18px; background: rgba(233, 188, 74, .08); color: inherit; text-align: left; }
.hc-account[hidden] { display: none; }
.hc-txt { display: grid; flex: 1; min-width: 0; gap: 2px; }
.hc-txt b { font-size: 14px; } .hc-txt small { color: var(--muted); font-size: 12px; }
.hc-chev { width: 18px; height: 18px; color: var(--muted); }
/* ---- Accounts ---- */
.au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 0 14px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.au-tabs button { height: 40px; border: 0; border-radius: 11px; background: none; color: var(--muted); font-weight: 700; transition: background .2s, color .2s; }
.au-tabs button.on { background: var(--accent); color: #17130a; }
.pf-acct { display: grid; gap: 8px; }
.pf-acct-title { margin: 0; }
.pf-danger { color: #ff6b6b; }
.results[hidden] { display: none !important; }

/* ======================= Account page + Profile page ======================= */
.acct, .prof { padding-top: 0; }
.ac-wrap { max-width: 460px; margin: 0 auto; padding: calc(8px + var(--safe-t)) 0 24px; display: grid; gap: 16px; }
.ac-back { position: relative; z-index: 2; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--text, #fff); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(10px); }
.ac-back .ic { width: 20px; height: 20px; }
.ac-hero { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 6px 8px 0; }
.ac-logo { width: 64px; height: 64px; border-radius: 20px; box-shadow: 0 10px 34px rgba(233, 188, 74, .28); }
.ac-hero h1 { margin: 6px 0 0; font: 800 28px/1.15 var(--font-head); letter-spacing: -.01em; }
.ac-sub { margin: 0; max-width: 340px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ac-card { display: grid; gap: 6px; padding: 18px 16px 16px; border: 1px solid var(--border); border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.ac-label { margin: 8px 2px 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ac-hint { margin: 6px 2px 2px; line-height: 1.45; }
.ac-user-status { min-height: 0; margin: 0 3px 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ac-user-status[data-state="checking"] { color: var(--muted); }
.ac-user-status[data-state="available"] { color: #68d39a; }
.ac-user-status[data-state="taken"], .ac-user-status[data-state="invalid"] { color: #ff747e; }
.ac-go { width: 100%; margin-top: 8px; }
.ac-perks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.ac-perks li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .035); }
.ac-perks b { display: block; font-size: 14px; } .ac-perks small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.ac-pk-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(233, 188, 74, .14); color: var(--accent); }
.ac-pk-ic .ic { width: 19px; height: 19px; }
.ac-guest { justify-self: center; color: var(--muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 6px 12px; }

.pr-cover { height: 132px; margin: 0 -16px; padding: calc(10px + var(--safe-t)) 16px 0; background: radial-gradient(120% 140% at 20% 0%, rgba(233, 188, 74, .34), transparent 60%), radial-gradient(90% 120% at 100% 20%, rgba(90, 120, 255, .22), transparent 60%), linear-gradient(180deg, #17140c, transparent); }
.pr-head { display: grid; justify-items: center; gap: 4px; margin-top: -58px; text-align: center; }
.prof .pf-avatar-btn { position: relative; width: 112px; height: 112px; padding: 0; border: 4px solid var(--bg, #0b0b0e); border-radius: 50%; background: none; box-shadow: 0 10px 34px rgba(0, 0, 0, .5); }
.prof .pf-av-xl { width: 104px; height: 104px; font-size: 40px; }
.pr-title { margin: 8px 0 0; font: 800 24px/1.2 var(--font-head); display: inline-flex; align-items: center; gap: 4px; }
.pr-user { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.pr-chip { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pr-chip.on { background: rgba(233, 188, 74, .18); color: var(--accent); }
.prof { max-width: 560px; margin-inline: auto; }
.prof > .pr-card { margin-top: 14px; }
.pr-card { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--theme-surface-2) 76%, transparent), color-mix(in srgb, var(--theme-surface) 72%, transparent)); }
.pr-card[hidden] { display: none; }
.pr-card > b { font-size: 15px; }
.pr-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pr-cta { border-color: rgba(233, 188, 74, .4); background: linear-gradient(160deg, rgba(233, 188, 74, .14), rgba(233, 188, 74, .03)); }
.pr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .pr-actions .btn { flex: 1; min-width: 130px; }
.pr-pass { display: grid; gap: 8px; margin-top: 4px; } .pr-pass[hidden] { display: none; }
.prof .pf-switch { margin: 0; }

/* ======================= Notifications: premium ======================= */
.nt-sheet { max-height: min(86vh, 720px); padding-top: 8px; background: linear-gradient(180deg, rgba(30, 26, 15, .96), rgba(14, 14, 18, .98) 38%); }
.nt-sheet .grabber { margin-bottom: 6px; }
.nt-head { display: flex; align-items: center; gap: 8px; padding: 4px 2px 10px; }
.nt-titles { flex: 1; min-width: 0; }
.nt-titles h3 { margin: 0; font: 800 22px/1.15 var(--font-head); letter-spacing: -.02em; }
.nt-sub { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.nt-readall { padding: 7px 12px; border: 1px solid rgba(233, 188, 74, .4); border-radius: 999px; background: rgba(233, 188, 74, .1); color: var(--accent); font-size: 12px; font-weight: 700; }
.nt-readall[hidden] { display: none; }
.nt-push { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(233, 188, 74, .38); background: linear-gradient(135deg, rgba(233, 188, 74, .16), rgba(233, 188, 74, .04)); color: var(--text); text-align: left; transition: border-color .2s, background .2s; }
.nt-push.on { border-color: var(--border); background: rgba(255, 255, 255, .045); }
.nt-push-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(233, 188, 74, .18); color: var(--accent); }
.nt-push-ic .ic { width: 20px; height: 20px; }
.nt-push-txt { display: grid; flex: 1; min-width: 0; gap: 2px; }
.nt-push-txt b { font-size: 14px; } .nt-push-txt small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.nt-sw { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: background .25s; }
.nt-sw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .28s var(--ease); }
.nt-push.on .nt-sw { background: var(--accent); } .nt-push.on .nt-sw i { transform: translateX(18px); }
.nt-filters { display: flex; gap: 8px; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
.nt-filters::-webkit-scrollbar { display: none; }
.nt-filters button { flex: none; height: 34px; padding: 0 15px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; transition: background .2s, color .2s, border-color .2s; }
.nt-filters button.on { background: var(--accent); border-color: var(--accent); color: #17130a; }
.nt-list { gap: 2px; padding-bottom: calc(10px + var(--safe-b)); }
.nt-day { margin: 10px 4px 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.nt-row { padding: 11px 10px; border-radius: 16px; }
.nt-row.unread { background: linear-gradient(90deg, rgba(233, 188, 74, .14), rgba(233, 188, 74, .03)); box-shadow: inset 3px 0 0 var(--accent); }
.nt-av { width: 46px; height: 46px; } .nt-av .pf-av { width: 46px; height: 46px; }
.nt-kind { width: 22px; height: 22px; right: -5px; bottom: -5px; background: var(--accent); border: 2px solid #14120c; color: #17130a; }
.nt-kind .ic { width: 12px; height: 12px; }
.nt-line { font-size: 14px; } .nt-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nt-dot { display: none; }
.nt-empty { padding: 34px 16px; }

/* ---- top bar: the person, not the app name ---- */
.brand.is-me { gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--border); transition: background .2s, transform .15s; }
.brand.is-me:active { transform: scale(.97); background: rgba(255, 255, 255, .1); }
.brand.is-me .top-av { width: 34px; height: 34px; font-size: 15px; box-shadow: 0 0 0 1.5px rgba(233, 188, 74, .7); }
.brand.is-me .brand-name { font: 700 16px/1 var(--font-head); letter-spacing: 0; }
.brand.is-me .vbadge { margin-left: 0; }

/* ======================= Notifications page ======================= */
.notif { padding-top: 0; }
.nf-wrap { max-width: 640px; margin: 0 auto; padding: calc(10px + var(--safe-t)) 0 24px; display: grid; gap: 14px; }
.nf-head { display: flex; align-items: center; gap: 12px; padding: 2px 0 4px; }
.nf-head .nt-titles h1 { margin: 0; font: 800 26px/1.1 var(--font-head); letter-spacing: -.025em; }
.nf-head .nt-sub { margin-top: 3px; }
.notif .nt-push { margin: 0; }
.notif .nt-filters { margin: 0; padding-bottom: 2px; }
.notif .nt-list { margin: 0; padding: 0 0 8px; gap: 8px; overflow: visible; }
.notif .nt-day { margin: 10px 4px 0; }
.notif .nt-row { padding: 13px 14px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)); transition: transform .15s var(--ease), border-color .2s; }
.notif .nt-row:active { transform: scale(.985); }
.notif .nt-row.unread { border-color: rgba(233, 188, 74, .45); background: linear-gradient(100deg, rgba(233, 188, 74, .17), rgba(233, 188, 74, .03) 70%); box-shadow: none; }
.notif .nt-ago { align-self: flex-start; padding-top: 2px; }
.notif .nt-empty { padding: 56px 16px; }
@media (min-width: 900px) { .nf-wrap { padding-top: 24px; } }

/* ---- notifications page: compact push toggle, clear + remove ---- */
.notif .nt-push { padding: 8px 12px; gap: 10px; border-radius: 14px; }
.notif .nt-push-ic { width: 30px; height: 30px; border-radius: 10px; } .notif .nt-push-ic .ic { width: 16px; height: 16px; }
.notif .nt-push-txt { display: flex; align-items: baseline; gap: 8px; }
.notif .nt-push-txt b { font-size: 14px; } .notif .nt-push-txt small { font-size: 12px; font-weight: 700; color: var(--muted); }
.notif .nt-push.on .nt-push-txt small { color: var(--accent); }
.notif .nt-sw { width: 40px; height: 24px; } .notif .nt-sw i { top: 3px; left: 3px; width: 18px; height: 18px; } .notif .nt-push.on .nt-sw i { transform: translateX(16px); }
.nf-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.nt-clear { padding: 4px 6px; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nt-clear[hidden], .nt-readall[hidden] { display: none; }
.nt-x { flex: none; align-self: center; display: grid; place-items: center; width: 28px; height: 28px; margin-right: -4px; border-radius: 50%; color: var(--muted); opacity: .7; transition: background .15s, opacity .15s; }
.nt-x:active, .nt-x:hover { background: rgba(255, 255, 255, .1); opacity: 1; }
.nt-x .ic { width: 14px; height: 14px; }
.notif .nt-ago { align-self: center; }
.notif .nt-row { cursor: pointer; }
.notif .nt-push-txt small { white-space: nowrap; }

/* ---- a note from the admin above the paste button (premium) ---- */
.home-msg { position: relative; z-index: 2; grid-row: 1; align-self: end; justify-self: center; display: flex; align-items: center; gap: 12px; width: min(100%, 470px); margin: 0 auto 20px; padding: 12px 12px 12px 14px; border-radius: 20px; color: var(--text); background: linear-gradient(135deg, rgba(233, 188, 74, .2), rgba(255, 255, 255, .05) 55%, rgba(233, 188, 74, .08)); border: 1px solid rgba(233, 188, 74, .45); box-shadow: 0 14px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); backdrop-filter: blur(14px); overflow: hidden; animation: hm-in .5s var(--ease) both; transition: opacity .25s, transform .25s; }
.home-msg[hidden] { display: none; }
.home-msg.out { opacity: 0; transform: translateY(-6px) scale(.98); }
.home-msg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%); transform: translateX(-120%); animation: hm-shine 5s ease-in-out 1.2s infinite; pointer-events: none; }
.hm-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: rgba(233, 188, 74, .18); font-size: 20px; }
.hm-ic-vector { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-ic-svg { color: var(--accent, #e9bc4a); }
.hm-ic.svg svg { display: block; width: 1.15em; height: 1.15em; }
.hm-txt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; font-weight: 600; }
.hm-btn { flex: none; padding: 7px 13px; border-radius: 999px; background: var(--accent); color: #17130a; font-size: 12.5px; font-weight: 800; }
.hm-btn[hidden] { display: none; }
.hm-x { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--muted); }
.hm-x .ic { width: 14px; height: 14px; }
@keyframes hm-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hm-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (max-height: 640px) { .home-msg { margin-bottom: 14px; } }

/* ---- the home line: plain writing right under the header, with a flash every 3 seconds ---- */
#view-home > .home-msg { display: block; position: static; grid-row: auto; width: auto; max-width: 560px; margin: 22px auto 0; padding: 4px 8px; text-align: center; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; overflow: visible; animation: none; font-size: 14.5px; line-height: 1.45; }
#view-home > .home-msg[hidden] { display: none; }
#view-home > .home-msg::after { display: none; }
#view-home > .home-msg.pop { animation: hm-pop .5s var(--ease) both; }
#view-home > .home-msg .hm-ic { display: inline; width: auto; height: auto; margin-right: 6px; background: none; font-size: 15px; vertical-align: -1px; }
#view-home > .home-msg .hm-ic-svg { display: inline-grid; width: 18px; height: 18px; margin-right: 5px; vertical-align: -4px; }
#view-home > .home-msg .hm-ic-vector { width: 16px; height: 16px; }
#view-home > .home-msg .hm-txt { display: inline; font-weight: 700; letter-spacing: .005em; color: var(--accent); background: linear-gradient(100deg, var(--accent) 38%, #fff6d2 50%, var(--accent) 62%); background-size: 260% 100%; background-position: 130% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hm-flash 3s ease-in-out infinite; }
#view-home > .home-msg .hm-btn { display: inline; padding: 0; margin-left: 4px; background: none; color: #fff; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(233, 188, 74, .7); }
#view-home > .home-msg .hm-btn[hidden] { display: none; }
@keyframes hm-flash { 0% { background-position: 130% 0; } 35% { background-position: -30% 0; } 100% { background-position: -30% 0; } }
@keyframes hm-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

#view-home > .home-msg .hm-txt { color: var(--hm-c, var(--accent)); background-image: linear-gradient(100deg, var(--hm-c, var(--accent)) 38%, #ffffff 50%, var(--hm-c, var(--accent)) 62%); }
#view-home > .home-msg .hm-btn { text-decoration-color: var(--hm-c, rgba(233, 188, 74, .7)); }
#view-home > .home-msg { max-width: 600px; white-space: pre-line; overflow-wrap: anywhere; }

#view-home > .home-msg.tap { cursor: pointer; }
#view-home > .home-msg.tap .hm-txt { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 4px; -webkit-text-fill-color: transparent; }

/* ---- home line v3: out of the flow, calm 5-second flash, no underlines, a proper button ---- */
#view-home .hero { position: relative; }
#view-home .hero > .home-msg { display: block; position: absolute; left: 50%; top: 22px; z-index: 2; width: min(calc(100% - 8px), 600px); transform: translateX(-50%); margin: 0; padding: 0 6px; text-align: center; overflow-y: auto; scrollbar-width: none; }
#view-home .hero > .home-msg::-webkit-scrollbar { display: none; }
#view-home .hero > .home-msg[hidden] { display: none; }
#view-home .hero > .home-msg.pop { animation: hm-pop2 .6s var(--ease) both; }
@keyframes hm-pop2 { from { opacity: 0; } to { opacity: 1; } }
#view-home .hero > .home-msg .hm-txt { background-image: linear-gradient(105deg, var(--hm-c, var(--accent)) 30%, #ffffff 50%, var(--hm-c, var(--accent)) 70%); background-size: 300% 100%; background-position: 140% 0; animation: hm-flash5 5s ease-in-out infinite; text-decoration: none; }
@keyframes hm-flash5 { 0% { background-position: 140% 0; } 45% { background-position: -40% 0; } 100% { background-position: -40% 0; } }
#view-home .hero > .home-msg.tap { cursor: pointer; }
#view-home .hero > .home-msg.tap .hm-txt { text-decoration: none; }
#view-home .hero > .home-msg .hm-btn { display: inline-block; margin: 8px 0 0 8px; padding: 7px 16px; border-radius: 999px; background: linear-gradient(145deg, var(--hm-b, #e9bc4a), color-mix(in srgb, var(--hm-b, #e9bc4a) 70%, #000)); color: var(--hm-bt, #17130a); font-size: 13px; font-weight: 800; letter-spacing: .01em; text-decoration: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .28); transition: transform .15s var(--ease); }
#view-home .hero > .home-msg .hm-btn:active { transform: scale(.96); }
#view-home .hero > .home-msg .hm-btn[hidden] { display: none; }

/* Global Snatch search */
.search-overlay { align-items: start; justify-items: center; padding: calc(var(--safe-t) + 14px) 14px 14px; }
.search-overlay .modal-backdrop { background: rgba(3, 3, 6, .76); backdrop-filter: blur(8px); }
.search-sheet { width: min(720px, 100%); max-height: min(86dvh, 820px); display: flex; flex-direction: column; overflow: hidden; padding: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: linear-gradient(160deg, #1d1d22, #111115); box-shadow: 0 30px 100px rgba(0,0,0,.6); }
.global-search-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.global-search-head small { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.global-search-head h2 { margin: 3px 0 0; font: 800 22px/1.2 var(--font-head); }
.global-search-head .icon-btn { width: 38px; height: 38px; }
.global-search-input { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 0 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(0,0,0,.34); color: var(--accent); }
.global-search-input:focus-within { border-color: rgba(233,188,74,.68); box-shadow: 0 0 0 4px rgba(233,188,74,.1); }
.global-search-input > .ic { width: 20px; height: 20px; flex: none; }
.global-search-input input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: none; font: 500 16px var(--font); }
.global-search-input input::placeholder { color: var(--muted); }
.global-search-input #search-clear { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.08); font-size: 21px; }
.global-search-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 14px 0 10px; scrollbar-width: none; }
.global-search-tabs::-webkit-scrollbar { display: none; }
.global-search-tabs button, .search-shortcuts button { flex: none; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 8px 13px; color: var(--muted); background: rgba(255,255,255,.04); font: 700 12px var(--font); }
.global-search-tabs button.active { color: #1b1608; border-color: var(--accent); background: var(--accent); }
.global-search-results { min-height: 190px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 10px; }
.search-welcome, .gs-empty { min-height: 190px; display: grid; align-content: center; justify-items: center; gap: 9px; text-align: center; color: var(--muted); }
.search-welcome-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 17px; color: var(--accent); background: rgba(233,188,74,.12); }
.search-welcome-mark .ic { width: 23px; height: 23px; }
.search-welcome b, .gs-empty b { color: var(--text); font: 800 15px var(--font-head); }
.search-welcome p, .gs-empty p { max-width: 340px; margin: 0; font-size: 13px; line-height: 1.45; }
.search-shortcuts { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.search-shortcuts button { color: #e6e4e1; }
.gs-section { margin: 4px 0 16px; }
.gs-section h3 { margin: 6px 4px 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.gs-row { width: 100%; min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 1px solid transparent; border-radius: 15px; color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.gs-row:hover, .gs-row:focus-visible { outline: 0; border-color: rgba(233,188,74,.24); background: rgba(255,255,255,.055); }
.gs-avatar, .gs-thumb { width: 42px; height: 42px; flex: none; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; color: var(--accent); background: rgba(233,188,74,.1); font-weight: 800; }
.gs-avatar img, .gs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gs-saved-icon .ic { width: 19px; height: 19px; }
.gs-thumb { width: 58px; border-radius: 11px; color: #ddd; background: linear-gradient(135deg,#273e37,#171820); }
.gs-thumb-fallback .ic { width: 20px; height: 20px; }
.gs-copy { flex: 1; min-width: 0; display: grid; gap: 4px; }
.gs-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.gs-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.gs-action { flex: none; color: var(--accent); font-size: 11px; font-weight: 800; }
.gs-chevron { width: 17px; height: 17px; flex: none; color: var(--muted); }
.gs-loading { min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; }
.pull-refresh-indicator { --pull-y: 0px; position: fixed; z-index: 999; top: calc(var(--safe-t) + 7px); left: 50%; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border: 1px solid rgba(233,188,74,.25); border-radius: 999px; color: #f6e8be; background: rgba(24,23,24,.96); box-shadow: 0 10px 30px rgba(0,0,0,.42); font: 700 11px var(--font); opacity: 0; pointer-events: none; transform: translate(-50%, calc(-145% + var(--pull-y))); transition: opacity .18s, transform .18s, border-color .18s; }
.pull-refresh-indicator.visible { opacity: 1; transform: translate(-50%, var(--pull-y)); }
.pull-refresh-indicator.ready { border-color: rgba(82,216,142,.65); color: #a9f2c9; }
.pull-refresh-spinner { width: 14px; height: 14px; border: 2px solid rgba(233,188,74,.28); border-top-color: var(--accent); border-radius: 50%; }
.pull-refresh-indicator.refreshing .pull-refresh-spinner { animation: spin .65s linear infinite; }
#pull-refresh-indicator { --pull-progress: 0; --ring-offset: 113px; top: calc(var(--safe-t) + 8px); gap: 10px; min-height: 54px; padding: 4px 12px 4px 4px; border: 1px solid rgba(255,255,255,.075); border-radius: 999px; color: var(--text); background: linear-gradient(135deg, rgba(24,25,29,.88), rgba(10,11,14,.78)); box-shadow: 0 12px 38px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07); -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); transform: translate(-50%, calc(-150% + var(--pull-y))); }
#pull-refresh-indicator.visible { transform: translate(-50%, var(--pull-y)); }
#pull-refresh-indicator.ready { border-color: rgba(95,214,138,.28); color: var(--text); }
.refresh-orb { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.16), transparent 39%), linear-gradient(145deg, rgba(212,175,55,.18), rgba(212,175,55,.045)); box-shadow: inset 0 0 18px rgba(212,175,55,.11), 0 0 22px rgba(212,175,55,.08); transition: color .2s, background .2s, transform .24s var(--ease), box-shadow .24s; }
.refresh-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.refresh-ring circle { fill: none; stroke-width: 1.7; }
.refresh-track { stroke: rgba(255,255,255,.15); }
.refresh-progress { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: var(--ring-offset); filter: drop-shadow(0 0 3px currentColor); transition: stroke-dashoffset .1s linear, stroke .2s; }
.refresh-glyph { width: 17px; height: 17px; z-index: 1; stroke-width: 2.2; transition: transform .3s var(--ease); }
.refresh-glint { position: absolute; top: 5px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: #fff3c2; box-shadow: 0 0 9px 2px rgba(255,226,143,.48); opacity: .82; }
.refresh-copy { display: grid; gap: 1px; min-width: 0; padding-right: 3px; line-height: 1.2; white-space: nowrap; }
.refresh-copy b { font: 750 11px var(--font-head); letter-spacing: .01em; }
.refresh-copy small { color: var(--muted); font: 500 9px var(--font); }
#pull-refresh-indicator.ready .refresh-orb { color: #65e5a0; background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.17), transparent 39%), linear-gradient(145deg, rgba(54,205,129,.22), rgba(54,205,129,.055)); box-shadow: inset 0 0 20px rgba(54,205,129,.12), 0 0 25px rgba(54,205,129,.17); transform: scale(1.055); }
#pull-refresh-indicator.ready .refresh-progress { stroke: #65e5a0; }
#pull-refresh-indicator.refreshing .refresh-glyph { animation: refreshTurn .8s cubic-bezier(.4,0,.2,1) infinite; }
#pull-refresh-indicator.refreshing .refresh-orb { animation: refreshPulse 1.35s ease-in-out infinite; }
@keyframes refreshTurn { to { transform: rotate(360deg); } }
@keyframes refreshPulse { 50% { box-shadow: inset 0 0 24px rgba(212,175,55,.19), 0 0 30px rgba(212,175,55,.2); } }
@media(prefers-reduced-motion:reduce) { #pull-refresh-indicator, #pull-refresh-indicator *, #pull-refresh-indicator::before { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Public creator pages. */
#view-user > :not(#public-profile-content) { display: none !important; }
.pp-back-button { display:grid; place-items:center; width:34px; height:34px; margin:0 0 3px; padding:0; border:1px solid var(--border); border-radius:50%; color:var(--text); background:var(--surface-1); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.pp-back-button:active { transform:scale(.94); background:var(--surface-2); }
.pp-back-button .ic { width:17px; height:17px; }
#public-profile-content > .own-profile-overview { padding-top:8px; }
/* A creator opened from a Discover reel slides in as a full-screen profile while the reel stays mounted. */
#view-user.pp-swipe-profile-overlay {
    position: fixed; z-index: 72; inset: 0; width: 100vw; max-width: none;
    height: var(--app-h, 100dvh); margin: 0; padding: calc(var(--safe-t) + 8px) 16px calc(var(--safe-b) + 24px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: var(--bg); border: 0; box-shadow: none;
    animation: ppCreatorEnter .3s cubic-bezier(.2,.75,.2,1) both;
}
#view-user.pp-swipe-profile-overlay.pp-swipe-profile-exit { animation: ppCreatorExit .21s cubic-bezier(.4,0,.6,1) both; }
#view-user.pp-swipe-profile-overlay .public-profile-content { max-width: 100%; }
@keyframes ppCreatorEnter { from { transform: translateX(100%); opacity: .84; } to { transform: translateX(0); opacity: 1; } }
@keyframes ppCreatorExit { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: .84; } }
@media (prefers-reduced-motion: reduce) {
    #view-user.pp-swipe-profile-overlay { animation-duration: .01ms; }
}
.dby-profile { display: inline; padding: 0; color: inherit; font: inherit; font-weight: 700; }
.dby-profile:disabled { cursor: default; }
.pp-flag { font-size: 17px; }
.pp-following { color: var(--ok); }
.pp-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pp-post { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.pp-post img { width: 100%; height: 100%; object-fit: cover; }
.pp-post-play { position: absolute; top: 8px; right: 8px; filter: drop-shadow(0 2px 5px #000); }
.pp-post-play .ic { width: 15px; height: 15px; }
.pp-post-meta { position: absolute; left: 8px; bottom: 7px; display: flex; align-items: center; gap: 4px; font-size: 11px; text-shadow: 0 1px 4px #000; }
.pp-post-meta .ic { width: 14px; height: 14px; }
.pp-empty, .pp-loading { min-height: 130px; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.pp-empty > span { font-size: 28px; color: var(--accent); }
.pp-empty b { color: var(--text); }
.pp-empty p { max-width: 240px; font-size: 12px; }
/* Profile screens follow the reference layout: round portrait at left, name and three private-count-only
   stats in a single row, with account tools kept beneath the dashboard. */
.prof { max-width: 760px; padding: 0 16px calc(var(--bottomnav-h) + var(--safe-b) + 28px); }
.own-profile-overview { display: grid; grid-template-columns: 94px minmax(0,1fr); align-items: center; gap: 8px 14px; padding: 20px 0 22px; }
.prof .own-profile-overview .pf-avatar-btn { width: 92px; height: 92px; margin: 0; border: 0; box-shadow: 0 3px 18px rgba(0,0,0,.3); }
.own-profile-overview .pf-av-xl { width: 92px; height: 92px; border: 1px solid var(--border); font-size: 34px; }
.own-profile-overview .pf-cam { right: -2px; bottom: 0; width: 28px; height: 28px; }
.own-profile-details { min-width: 0; }
.own-profile-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.own-profile-name .pr-title { min-width: 0; overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; }
.own-profile-overview .pr-user { margin-top: 2px; }
.own-profile-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; margin-top: 13px; }
.own-profile-stats > div { display: grid; justify-items: center; gap: 1px; min-width: 0; }
.own-profile-stats b { font: 800 17px/1.15 var(--font-head); font-variant-numeric: tabular-nums; }
.own-profile-stats span { color: var(--muted); font-size: 10px; }
.own-profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.own-profile-actions .btn { min-height: 46px; border-radius: 14px; }
.profile-library-link { display: flex; align-items: center; gap: 12px; min-height: 66px; margin: 0 0 20px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 16px; color: var(--text); background: linear-gradient(115deg, rgba(212,175,55,.09), rgba(255,255,255,.035)); text-decoration: none; transition: border-color .18s, transform .18s; }
.profile-library-link:active { transform: scale(.99); border-color: rgba(212,175,55,.55); }
.profile-library-icon { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--accent); background: rgba(212,175,55,.12); }
.profile-library-icon .ic { width: 21px; height: 21px; }
.profile-library-link > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.profile-library-link b { font: 700 14px var(--font-head); }
.profile-library-link small { color: var(--muted); font-size: 12px; }
.profile-library-chevron { width: 18px; height: 18px; margin-left: auto; color: var(--muted); }
.profile-guest-prompt { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 12px; margin: 0 0 20px; padding: 15px; overflow: hidden; border: 1px solid rgba(212,175,55,.28); border-radius: 18px; background: radial-gradient(ellipse at 100% 0, rgba(212,175,55,.12), transparent 55%), linear-gradient(135deg, rgba(212,175,55,.075), rgba(255,255,255,.025)); }
.profile-guest-prompt[hidden] { display: none; }
.profile-guest-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(212,175,55,.2); border-radius: 14px; background: rgba(212,175,55,.12); font-size: 21px; }
.profile-guest-copy { display: grid; gap: 3px; min-width: 0; }
.profile-guest-copy > small { color: var(--accent); font: 800 9px var(--font-head); letter-spacing: .14em; }
.profile-guest-copy > b { font: 700 14px var(--font-head); }
.profile-guest-copy > p { margin: 1px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.profile-guest-prompt > .btn { grid-column: 1 / -1; min-height: 43px; border-radius: 13px; }
.profile-guest-login { grid-column: 1 / -1; justify-self: center; padding: 2px 8px; border: 0; background: transparent; color: var(--muted); font: 500 12px var(--font-body); cursor: pointer; }
.profile-guest-login b { color: var(--text); }
.own-profile-sections { display: grid; gap: 12px; padding-bottom: 10px; }
.own-profile-sections[hidden] { display: none; }
.own-edit-card > div:first-child { margin-bottom: 4px; }
.prof #pf-guest, .prof #pf-member { margin-top: 12px; }
.prof #pf-guest[hidden], .prof #pf-member[hidden] { display: none; }
.profile-edit-page { max-width: 620px; padding-bottom: calc(var(--bottomnav-h) + var(--safe-b) + 28px); }
.profile-edit-header { display: flex; align-items: center; gap: 13px; margin: 0 -2px 18px; padding: 12px 0 17px; border-bottom: 1px solid var(--border); }
.profile-edit-header .icon-btn { flex: none; border: 1px solid var(--border); background: var(--surface); }
.profile-edit-page .pf-field input { color:var(--text)!important; caret-color:var(--accent); }
.profile-edit-page .pf-field input::placeholder { color:var(--muted); opacity:1; }
.profile-edit-header h1 { font: 800 21px/1.2 var(--font-head); }
.profile-edit-header p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.profile-edit-identity { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; padding: 12px 14px; }
.profile-edit-identity .pf-avatar-btn { flex: none; width: 66px; height: 66px; margin: 0; }
.profile-edit-identity .pf-av-xl { width: 66px; height: 66px; font-size: 25px; }
.profile-edit-identity > div { display: grid; gap: 3px; min-width: 0; }
.profile-edit-identity > div b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-edit-identity > div span { overflow: hidden; text-overflow: ellipsis; }
.profile-edit-identity #pf-remove { flex: none; margin-left: auto; }
.profile-edit-page .own-profile-sections { gap: 12px; }
.profile-edit-page .own-edit-card { padding: 17px; }
.profile-edit-page .profile-account-card { margin-top: 13px; }
.profile-edit-page .profile-account-card[hidden] { display: none; }

/* App-wide theme picker and live miniature preview. */
.profile-theme-card { gap:12px; }
.profile-appearance-page .profile-theme-card { margin:0 0 16px; padding:16px; }
.profile-theme-apply { width:100%; min-height:46px; margin-top:2px; }
.profile-theme-apply:disabled { opacity:.62; cursor:default; box-shadow:none; }
.profile-theme-copy b { display:block; font-size:16px; }
.profile-theme-copy p { margin-top:3px; }
.profile-theme-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.profile-template-heading { margin-top:3px; color:var(--muted); font-size:12px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.profile-template-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.profile-template-option { min-width:0; display:grid; gap:4px; padding:7px; text-align:left; border:1px solid var(--border); border-radius:15px; background:var(--surface); color:var(--text); transition:transform .18s,border-color .18s,box-shadow .18s; }
.profile-template-option[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),var(--glow); }
.profile-template-option:active { transform:scale(.98); }
.profile-template-option strong { padding:1px 3px 0; font-size:12px; }
.profile-template-option small { padding:0 3px 2px; color:var(--muted); font-size:10px; }
.template-thumb { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4px; height:58px; overflow:hidden; padding:6px; border-radius:10px; }
.template-thumb b { position:absolute; top:0; left:0; right:0; height:10px; border-bottom:1px solid currentColor; opacity:.2; }
.template-thumb span { margin-top:11px; min-height:24px; border-radius:5px; background:currentColor; opacity:.14; }
.template-thumb em { position:absolute; bottom:4px; left:22%; right:22%; height:4px; border-radius:9px; background:var(--thumb-accent); }
.template-thumb.night { color:#e6e8ef; background:#0c0d12; --thumb-accent:#d4af37; }
.template-thumb.clean { color:#263248; background:#f5f7fb; --thumb-accent:#4188f5; }
.template-thumb.sky { color:#27425f; background:#eaf4ff; --thumb-accent:#398bf2; }
.template-thumb.orchid { color:#40334f; background:#f6f0ff; --thumb-accent:#9a70e8; }
.template-thumb.sunset { color:#493329; background:#fff6ef; --thumb-accent:#ee835c; }
.template-thumb.mint { color:#294437; background:#effaf5; --thumb-accent:#41ad7f; }
.profile-theme-option { min-width:0; min-height:68px; display:grid; place-items:center; align-content:center; gap:6px; padding:7px 4px; border:1px solid var(--border); border-radius:15px; background:rgba(255,255,255,.025); color:var(--muted); font-size:11px; transition:border-color .18s,background .18s,transform .18s; }
.profile-theme-option i { width:23px; height:23px; border-radius:50%; background:var(--swatch); box-shadow:0 3px 12px color-mix(in srgb,var(--swatch) 36%,transparent),inset 0 0 0 1px #ffffff55; }
.profile-theme-option[aria-pressed="true"] { color:var(--text); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent); }
.profile-theme-option:active { transform:scale(.96); }
.profile-theme-option[data-profile-theme="gold"] { --swatch:#d4af37; }
.profile-theme-option[data-profile-theme="blue"] { --swatch:#69aaff; }
.profile-theme-option[data-profile-theme="violet"] { --swatch:#b79aff; }
.profile-theme-option[data-profile-theme="pink"] { --swatch:#ff8fab; }
.profile-theme-option[data-profile-theme="green"] { --swatch:#63dda5; }
.profile-theme-option[data-profile-theme="orange"] { --swatch:#ffad69; }
.profile-theme-option[data-profile-theme="cyan"] { --swatch:#55d9d2; }
.profile-theme-option[data-profile-theme="indigo"] { --swatch:#8d9dff; }
.profile-theme-option[data-profile-theme="coral"] { --swatch:#ff806f; }
.profile-theme-option[data-profile-theme="mint"] { --swatch:#75e2bf; }
.profile-theme-option[data-profile-theme="slate"] { --swatch:#b2c1d6; }
.profile-theme-preview { display:block; overflow:hidden; border:1px solid var(--border); border-radius:15px; background:var(--bg); box-shadow:inset 0 0 35px var(--theme-glow); }
.theme-preview-top { height:33px; display:flex; align-items:center; gap:7px; padding:0 10px; color:var(--text); border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--theme-surface) 92%,transparent); font-size:10px; }
.theme-preview-top i { width:16px; height:16px; border-radius:50%; background:var(--grad); }
.theme-preview-top span { margin-left:auto; color:var(--accent); font-size:13px; }
.theme-preview-content { display:grid; gap:7px; padding:9px; color:var(--muted); font-size:9px; }
.theme-preview-card { display:flex; align-items:center; gap:7px; min-height:31px; padding:5px; border:1px solid var(--border); border-radius:9px; background:color-mix(in srgb,var(--theme-surface) 88%,transparent); }
.theme-preview-card span { width:22px; height:20px; border-radius:5px; background:linear-gradient(145deg,var(--theme-surface-2),color-mix(in srgb,var(--accent) 28%,var(--theme-surface))); }
.theme-preview-card em,.theme-preview-card small { display:block; height:4px; width:38%; border-radius:9px; background:var(--accent); opacity:.8; }
.theme-preview-card small { width:22%; margin-left:auto; opacity:.45; }
.theme-preview-card.short { min-height:24px; }
.theme-preview-nav { display:flex; justify-content:space-around; padding:7px 12px; border-top:1px solid var(--border); background:color-mix(in srgb,var(--theme-surface) 92%,transparent); }
.theme-preview-nav i { width:12px; height:12px; border:2px solid var(--muted); border-radius:4px; opacity:.75; }
.theme-preview-nav i:nth-child(3) { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 25%,transparent); }
.profile-theme-status { min-height:0; color:var(--muted); font-size:12px; }
.profile-theme-status:empty { display:none; }

/* Keep sheets and app chrome in the selected color family too. */
.cm-sheet, .cm-emojis, .cm-compose, .profile-sheet, .sheet-panel { background-color:var(--bg); }
.cm-sheet, .cm-emojis, .cm-compose { background:color-mix(in srgb,var(--theme-surface) 96%,var(--bg)); }
.modal .glass, .sheet-panel, .profile-sheet { border-color:var(--border); }
:root[data-user-template="clean"] .topbar,
:root[data-user-template="clean"] .bottom-nav,
:root[data-user-template="sky"] .topbar,
:root[data-user-template="sky"] .bottom-nav,
:root[data-user-template="orchid"] .topbar,
:root[data-user-template="orchid"] .bottom-nav,
:root[data-user-template="sunset"] .topbar,
:root[data-user-template="sunset"] .bottom-nav,
:root[data-user-template="mint"] .topbar,
:root[data-user-template="mint"] .bottom-nav { color:var(--text); }
:root[data-user-template="clean"] .icon-btn,
:root[data-user-template="sky"] .icon-btn,
:root[data-user-template="orchid"] .icon-btn,
:root[data-user-template="sunset"] .icon-btn,
:root[data-user-template="mint"] .icon-btn { background:color-mix(in srgb,var(--theme-surface) 88%,transparent); color:var(--text); border-color:var(--border); }
:root[data-user-template="clean"] .input-wrap,
:root[data-user-template="clean"] .search,
:root[data-user-template="clean"] .select-sm,
:root[data-user-template="clean"] .seg,
:root[data-user-template="sky"] .input-wrap,
:root[data-user-template="sky"] .search,
:root[data-user-template="sky"] .select-sm,
:root[data-user-template="sky"] .seg,
:root[data-user-template="orchid"] .input-wrap,
:root[data-user-template="orchid"] .search,
:root[data-user-template="orchid"] .select-sm,
:root[data-user-template="orchid"] .seg,
:root[data-user-template="sunset"] .input-wrap,
:root[data-user-template="sunset"] .search,
:root[data-user-template="sunset"] .select-sm,
:root[data-user-template="sunset"] .seg,
:root[data-user-template="mint"] .input-wrap,
:root[data-user-template="mint"] .search,
:root[data-user-template="mint"] .select-sm,
:root[data-user-template="mint"] .seg { background:var(--theme-surface); color:var(--text); border-color:var(--border); }
:root[data-user-template="clean"] .input-wrap input,
:root[data-user-template="clean"] .search input,
:root[data-user-template="clean"] .modal .sheet,
:root[data-user-template="clean"] .cm-sheet,
:root[data-user-template="clean"] .cm-emojis,
:root[data-user-template="clean"] .cm-compose,
:root[data-user-template="sky"] .input-wrap input,
:root[data-user-template="sky"] .search input,
:root[data-user-template="sky"] .modal .sheet,
:root[data-user-template="sky"] .cm-sheet,
:root[data-user-template="sky"] .cm-emojis,
:root[data-user-template="sky"] .cm-compose,
:root[data-user-template="orchid"] .input-wrap input,
:root[data-user-template="orchid"] .search input,
:root[data-user-template="orchid"] .modal .sheet,
:root[data-user-template="orchid"] .cm-sheet,
:root[data-user-template="orchid"] .cm-emojis,
:root[data-user-template="orchid"] .cm-compose,
:root[data-user-template="sunset"] .input-wrap input,
:root[data-user-template="sunset"] .search input,
:root[data-user-template="sunset"] .modal .sheet,
:root[data-user-template="sunset"] .cm-sheet,
:root[data-user-template="sunset"] .cm-emojis,
:root[data-user-template="sunset"] .cm-compose,
:root[data-user-template="mint"] .input-wrap input,
:root[data-user-template="mint"] .search input,
:root[data-user-template="mint"] .modal .sheet,
:root[data-user-template="mint"] .cm-sheet,
:root[data-user-template="mint"] .cm-emojis,
:root[data-user-template="mint"] .cm-compose { background:var(--theme-surface); color:var(--text); }
:root[data-user-template="clean"] .pr-card,
:root[data-user-template="clean"] .hc-card,
:root[data-user-template="clean"] .ctile,
:root[data-user-template="clean"] .profile-sheet,
:root[data-user-template="sky"] .pr-card,
:root[data-user-template="sky"] .hc-card,
:root[data-user-template="sky"] .ctile,
:root[data-user-template="sky"] .profile-sheet,
:root[data-user-template="orchid"] .pr-card,
:root[data-user-template="orchid"] .hc-card,
:root[data-user-template="orchid"] .ctile,
:root[data-user-template="orchid"] .profile-sheet,
:root[data-user-template="sunset"] .pr-card,
:root[data-user-template="sunset"] .hc-card,
:root[data-user-template="sunset"] .ctile,
:root[data-user-template="sunset"] .profile-sheet,
:root[data-user-template="mint"] .pr-card,
:root[data-user-template="mint"] .hc-card,
:root[data-user-template="mint"] .ctile,
:root[data-user-template="mint"] .profile-sheet { color:var(--text); border-color:var(--border); }
html[data-user-theme] .barricade { --bc-bg:var(--bg); --bc-card:var(--theme-surface); --bc-border:var(--border); --bc-amber:var(--accent); --bc-text:var(--text); --bc-muted:var(--muted); }
html[data-user-theme] .barricade .bc-tabs { background:var(--theme-surface); }
:root[data-user-template="clean"] .barricade .bc-board,
:root[data-user-template="sky"] .barricade .bc-board,
:root[data-user-template="orchid"] .barricade .bc-board,
:root[data-user-template="sunset"] .barricade .bc-board,
:root[data-user-template="mint"] .barricade .bc-board { background:var(--theme-surface-2); border-color:var(--border); }
:root[data-user-template="clean"] .barricade .bc-cell,
:root[data-user-template="sky"] .barricade .bc-cell,
:root[data-user-template="orchid"] .barricade .bc-cell,
:root[data-user-template="sunset"] .barricade .bc-cell,
:root[data-user-template="mint"] .barricade .bc-cell { background:var(--theme-bg); border-color:color-mix(in srgb,var(--text) 17%,transparent); }
:root[data-user-template="clean"] .barricade .bc-cell.goal,
:root[data-user-template="sky"] .barricade .bc-cell.goal,
:root[data-user-template="orchid"] .barricade .bc-cell.goal,
:root[data-user-template="sunset"] .barricade .bc-cell.goal,
:root[data-user-template="mint"] .barricade .bc-cell.goal { background:color-mix(in srgb,var(--accent) 15%,var(--theme-bg)); }

/* The download home stays focused; product details are on the dedicated About page. */
.home-about-link { display:flex; align-items:center; gap:12px; margin:0 0 18px; padding:13px 15px; border:1px solid var(--border); border-radius:17px; background:linear-gradient(120deg,var(--surface-2),var(--surface)); color:var(--text); }
.home-about-mark { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:12px; background:color-mix(in srgb,var(--accent) 16%,var(--theme-surface)); color:var(--accent); font-size:20px; }
.home-about-link > span:nth-child(2) { flex:1; display:grid; min-width:0; gap:1px; }
.home-about-link b { font:750 13px var(--font-head); }
.home-about-link small { color:var(--muted); font-size:11px; }
.home-about-link > .ic { color:var(--muted); width:18px; height:18px; }
.about-hero { position:relative; display:grid; justify-items:center; gap:9px; padding:34px 14px 28px; margin:12px 0 16px; overflow:hidden; text-align:center; border:1px solid var(--border); border-radius:25px; background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 68%),linear-gradient(145deg,var(--surface-2),var(--surface)); }
.about-back { position:absolute; top:12px; left:12px; width:38px; height:38px; background:var(--surface); }
.about-hero img { width:54px; height:54px; object-fit:cover; border:1px solid var(--border); border-radius:17px; box-shadow:var(--glow); }
.about-eyebrow { margin-top:4px; color:var(--accent); font-size:10px; font-weight:800; letter-spacing:.15em; }
.about-hero h1 { font:800 clamp(27px,7vw,38px)/1.1 var(--font-head); }
.about-hero p { max-width:350px; color:var(--muted); font-size:14px; }
.about-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.about-feature-grid article { display:grid; align-content:start; gap:6px; min-height:128px; padding:14px; border:1px solid var(--border); border-radius:17px; background:linear-gradient(150deg,var(--surface-2),var(--surface)); }
.about-feature-grid article > span { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--theme-surface)); font-size:17px; font-weight:800; }
.about-feature-grid b { font:750 13px var(--font-head); }
.about-feature-grid p { color:var(--muted); font-size:11.5px; line-height:1.45; }
.about-page .seo { margin-top:25px; padding:18px; border:1px solid var(--border); border-radius:22px; background:var(--surface); }
.about-footer { margin-top:24px; }

/* Light home pages use crisp white download surfaces and strong, readable actions. */
:root[data-user-template="clean"] #view-home .dl-card,
:root[data-user-template="sky"] #view-home .dl-card,
:root[data-user-template="orchid"] #view-home .dl-card,
:root[data-user-template="sunset"] #view-home .dl-card,
:root[data-user-template="mint"] #view-home .dl-card { border:1px solid var(--border); background:linear-gradient(155deg,#fff,color-mix(in srgb,var(--theme-surface-2) 58%,#fff)); box-shadow:0 18px 44px rgba(34,54,84,.12); color:var(--text); }
:root[data-user-template="clean"] #view-home .dl-card .input-wrap,
:root[data-user-template="sky"] #view-home .dl-card .input-wrap,
:root[data-user-template="orchid"] #view-home .dl-card .input-wrap,
:root[data-user-template="sunset"] #view-home .dl-card .input-wrap,
:root[data-user-template="mint"] #view-home .dl-card .input-wrap { background:#fff; border-color:var(--border); }
:root[data-user-template="clean"] #view-home .dl-card .seg,
:root[data-user-template="sky"] #view-home .dl-card .seg,
:root[data-user-template="orchid"] #view-home .dl-card .seg,
:root[data-user-template="sunset"] #view-home .dl-card .seg,
:root[data-user-template="mint"] #view-home .dl-card .seg { background:var(--theme-surface-2); border-color:var(--border); }
:root[data-user-template="clean"] #view-home .dl-card .seg button.active,
:root[data-user-template="sky"] #view-home .dl-card .seg button.active,
:root[data-user-template="orchid"] #view-home .dl-card .seg button.active,
:root[data-user-template="sunset"] #view-home .dl-card .seg button.active,
:root[data-user-template="mint"] #view-home .dl-card .seg button.active { background:var(--theme-surface); color:var(--text); }
:root[data-user-template="clean"] #view-home #dl-btn,
:root[data-user-template="sky"] #view-home #dl-btn,
:root[data-user-template="orchid"] #view-home #dl-btn,
:root[data-user-template="sunset"] #view-home #dl-btn,
:root[data-user-template="mint"] #view-home #dl-btn { border:1px solid color-mix(in srgb,var(--accent) 50%,var(--border)); background:var(--grad); color:var(--accent-ink); box-shadow:0 9px 24px color-mix(in srgb,var(--accent) 20%,transparent); }
:root[data-user-template="clean"] #view-home .dl-library-link,
:root[data-user-template="sky"] #view-home .dl-library-link,
:root[data-user-template="orchid"] #view-home .dl-library-link,
:root[data-user-template="sunset"] #view-home .dl-library-link,
:root[data-user-template="mint"] #view-home .dl-library-link { background:var(--theme-surface-2); border-color:var(--border); color:var(--text); }
:root[data-user-template="clean"] #view-home .orb-ring,
:root[data-user-template="sky"] #view-home .orb-ring,
:root[data-user-template="orchid"] #view-home .orb-ring,
:root[data-user-template="sunset"] #view-home .orb-ring,
:root[data-user-template="mint"] #view-home .orb-ring { background:conic-gradient(from 200deg,color-mix(in srgb,var(--accent) 42%,white),var(--accent),color-mix(in srgb,var(--accent) 70%,#24364c),color-mix(in srgb,var(--accent) 42%,white)); filter:drop-shadow(0 6px 22px color-mix(in srgb,var(--accent) 32%,transparent)); }
:root[data-user-template="clean"] #view-home .orb-core,
:root[data-user-template="sky"] #view-home .orb-core,
:root[data-user-template="orchid"] #view-home .orb-core,
:root[data-user-template="sunset"] #view-home .orb-core,
:root[data-user-template="mint"] #view-home .orb-core { background:radial-gradient(80% 80% at 35% 25%,#fff,var(--theme-surface-2) 75%); color:var(--accent); border-color:var(--border); box-shadow:inset 0 0 26px color-mix(in srgb,var(--accent) 12%,transparent),0 10px 25px rgba(34,54,84,.1); }
:root[data-user-template="clean"] #view-home .hero::before,
:root[data-user-template="sky"] #view-home .hero::before,
:root[data-user-template="orchid"] #view-home .hero::before,
:root[data-user-template="sunset"] #view-home .hero::before,
:root[data-user-template="mint"] #view-home .hero::before { background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent) 8%,transparent) 55%,transparent 76%); }
:root[data-user-template="clean"] #view-home .orb-label,
:root[data-user-template="sky"] #view-home .orb-label,
:root[data-user-template="orchid"] #view-home .orb-label,
:root[data-user-template="sunset"] #view-home .orb-label,
:root[data-user-template="mint"] #view-home .orb-label { color:var(--muted); }
.orb::before { box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent); }
.orb-ring { background:conic-gradient(from 200deg,color-mix(in srgb,var(--accent) 40%,white),var(--accent),color-mix(in srgb,var(--accent) 65%,black),color-mix(in srgb,var(--accent) 40%,white)); filter:drop-shadow(0 6px 22px color-mix(in srgb,var(--accent) 35%,transparent)); }
.input-wrap:focus-within { border-color:color-mix(in srgb,var(--accent) 72%,transparent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent); }
.dl-library-link:hover,.dl-library-link:active { border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:color-mix(in srgb,var(--accent) 8%,transparent); }

@media (max-width: 390px) {
    .own-profile-overview { grid-template-columns: 78px minmax(0,1fr); gap: 10px; }
    .prof .own-profile-overview .pf-avatar-btn, .own-profile-overview .pf-av-xl { width: 76px; height: 76px; }
    .own-profile-name .pr-title { font-size: 16px; }
}
@media (max-width: 420px) {
    .public-profile-actions .btn { min-height: 46px; border-radius: 14px; }
}

/* Keep the Instagram-style round portrait and three-column summary compact on phones. */
@media (max-width: 420px) {
    .prof .own-profile-overview .pf-avatar-btn,
    .own-profile-overview .pf-av-xl { width: 76px; height: 76px; }
    .own-profile-overview .pf-av-xl { font-size: 28px; }
    .own-profile-overview { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
}
.own-post-section { margin: 18px 0; }
.own-post-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.own-post-section > header h2 { font: 750 17px/1.25 var(--font-head); }
.own-post-section > header span { color: var(--muted); font-size: 11px; }
.own-post-empty { min-height: 110px; display: grid; place-items: center; padding: 20px; border-top: 1px solid var(--border); color: var(--muted); text-align: center; font-size: 13px; }
.own-post-empty[hidden] { display: none; }
#pull-refresh-indicator { width: 46px; height: 46px; min-height: 0; justify-content: center; gap: 0; padding: 0; border: 0; border-radius: 50%; color: #a6a8ad; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#pull-refresh-indicator.visible { transform: translate(-50%, var(--pull-y)); }
#pull-refresh-indicator.ready { color: #c4c6ca; border: 0; background: transparent; }
#pull-refresh-indicator .refresh-orb { width: 44px; height: 44px; color: inherit; border: 1px solid rgba(180,184,192,.18); background: radial-gradient(circle, rgba(255,255,255,.065), rgba(255,255,255,.015) 70%); box-shadow: 0 4px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06); }
#pull-refresh-indicator.ready .refresh-orb { color: #d1d3d7; border-color: rgba(205,209,216,.38); background: radial-gradient(circle, rgba(255,255,255,.1), rgba(255,255,255,.025) 70%); box-shadow: 0 4px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08); transform: scale(1.04); }
#pull-refresh-indicator .refresh-progress { stroke: currentColor; }
#pull-refresh-indicator.ready .refresh-progress { stroke: #d1d3d7; }
#pull-refresh-indicator.refreshing .refresh-orb { animation-name: refreshPulseGrey; }
#pull-refresh-indicator .refresh-glint, #pull-refresh-indicator .refresh-copy { display: none !important; }
@keyframes refreshPulseGrey { 50% { box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 0 16px rgba(190,194,201,.13), inset 0 1px 0 rgba(255,255,255,.08); } }
@media(max-width:600px) { .search-overlay { padding: calc(var(--safe-t) + 7px) 8px 8px; } .search-sheet { max-height: min(88dvh, 820px); padding: 15px 13px; border-radius: 22px; } .global-search-head h2 { font-size: 20px; } }

/* Header search expands into place, while its results live in the normal page flow. */
.global-search-form { display: none; align-items: center; flex: 1 1 0; min-width: 0; gap: 8px; }
.global-search-form .global-search-input { flex: 1; min-width: 0; min-height: 42px; border-radius: 999px; transition: border-color .2s, background .2s, box-shadow .2s; }
.global-search-form .global-search-input input { font-size: 14px; }
.global-search-form .search-close { width: 38px; height: 38px; }
.search-page { min-height: calc(var(--app-h, 100dvh) - var(--topbar-h) - var(--safe-t)); animation: searchPageIn .28s var(--ease) both; }
.search-page .page-head { padding-top: 26px; }
.search-page .global-search-tabs { margin-top: 4px; }
.search-page .global-search-results { min-height: 220px; overflow: visible; padding: 5px 0 28px; }
@keyframes searchPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Keep search copy and shortcuts readable in the light color templates. */
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .search-page .search-welcome p,
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .search-page .gs-empty p { color: color-mix(in srgb, var(--text) 72%, var(--muted)); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .search-page .search-shortcuts button,
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .search-page .global-search-tabs button { color: var(--text); border-color: var(--border); background: var(--theme-surface); box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 7%, transparent); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .search-page .global-search-tabs button.active { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 18%, var(--theme-surface)); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .search-page .search-shortcuts button:hover,
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .search-page .search-shortcuts button:focus-visible { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, var(--theme-surface)); }
/* Keep the light-theme navigation gently subdued while Discover is selected. */
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .bottom-nav:has(.bn-item[data-nav="discover"].active) { background:color-mix(in srgb,var(--theme-surface-2) 84%,var(--text) 16%); border-top-color:color-mix(in srgb,var(--text) 13%,var(--border)); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .bottom-nav:has(.bn-item[data-nav="discover"].active) .bn-item.active { color:color-mix(in srgb,var(--accent) 76%,var(--text)); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .bottom-nav:has(.bn-item[data-nav="discover"].active) .bn-item.active .ic { transform:translateY(-.5px) scale(1.04); }
body.search-open .topbar { gap: 10px; }
body.search-open .topbar .top-nav,
body.search-open .topbar .install-trigger { display: none !important; }
body.search-open #bell-btn { display: none !important; }
body.search-open .topbar .brand { margin-right: 0; flex: none; }
body.search-open .brand-name { display: none; }
body.search-open .global-search-form { display: flex; animation: searchExpand .32s var(--ease) both; }
@keyframes searchExpand { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(12px); } to { opacity: 1; clip-path: inset(0); transform: none; } }
@media(max-width:420px) {
    body.search-open .topbar { padding-inline: 10px; gap: 7px; }
    body.search-open .brand-logo { width: 30px; height: 30px; }
    body.search-open .global-search-form { gap: 5px; }
    body.search-open .global-search-form .search-close { width: 34px; height: 34px; }
}

/* Pull-to-refresh stays light and unobtrusive instead of covering the page with a card. */
.pull-refresh-indicator { --pull-y: 0px; position: fixed; z-index: 999; top: calc(var(--safe-t) + 7px); left: 50%; display: flex; align-items: center; gap: 7px; padding: 5px 7px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; box-shadow: none; font: 600 10px var(--font); letter-spacing: .02em; opacity: 0; pointer-events: none; transform: translate(-50%, calc(-145% + var(--pull-y))); transition: opacity .18s, transform .18s, color .18s; }
.pull-refresh-indicator.visible { opacity: 1; transform: translate(-50%, var(--pull-y)); }
.pull-refresh-indicator.ready { color: var(--ok); }
.pull-refresh-spinner { width: 15px; height: 15px; border: 2px solid rgba(233,188,74,.24); border-top-color: var(--accent); border-radius: 50%; transition: transform .12s linear; }
.pull-refresh-indicator.refreshing .pull-refresh-spinner { animation: spin .65s linear infinite; }
#view-home .hero > .home-msg { border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; grid-row: auto; align-self: auto; justify-self: auto; gap: 0; }
#view-home .hero > .home-msg.pop { animation: hm-pop2 .6s var(--ease) both; }
#view-home .hero > .home-msg::after { display: none; }
#view-home .hero > .home-msg .hm-ic { display: inline; width: auto; height: auto; margin-right: 6px; background: none; font-size: 15px; vertical-align: -1px; }
#view-home .hero > .home-msg .hm-ic-svg { display: inline-grid; width: 18px; height: 18px; margin-right: 5px; vertical-align: -4px; }
#view-home .hero > .home-msg .hm-ic-vector { width: 16px; height: 16px; }
#view-home .hero > .home-msg .hm-txt { display: inline; font-weight: 700; letter-spacing: .005em; color: var(--hm-c, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* A quiet completion pulse pairs with the refresh haptic without adding a banner. */
#pull-refresh-indicator.refresh-done .refresh-orb { animation: refreshDone .42s ease-out both; }
@keyframes refreshDone {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(190,195,204,.18); }
  55% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(190,195,204,0); }
  100% { transform: scale(1); box-shadow: 0 4px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08); }
}
@media(prefers-reduced-motion:reduce) { #pull-refresh-indicator.refresh-done .refresh-orb { animation: none; } }

/* Discover reels: keep the video immersive and put a clear back control at top left. */
body.viewer-open.viewer-discover .bottom-nav {
  display: grid!important;
  z-index: 62!important;
  background: rgba(10,10,14,.82);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,.1);
}
body.viewer-open.viewer-discover .viewer-close {
  display: grid!important;
  position: fixed!important;
  z-index: 70!important;
  top: calc(env(safe-area-inset-top, 0px) + 12px)!important;
  left: 14px!important;
  width: 44px!important;
  height: 44px!important;
  color: #fff!important;
  border: 1px solid rgba(255,255,255,.2)!important;
  background: rgba(12,12,15,.48)!important;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 5px 18px rgba(0,0,0,.25);
}
body.viewer-open.viewer-discover .viewer-close:active { transform: scale(.94); background: rgba(12,12,15,.7)!important; }

/* Match Barricade chat: settle, then resize and lift the complete sheet above the keyboard. */
#comments-sheet {
  top: 0;
  bottom: auto;
  height: var(--cm-h, var(--app-h, 100dvh));
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body.cm-open #comments-sheet .cm-sheet {
  flex: none;
  height: var(--cm-sheet-height, calc(var(--app-h, 100dvh) * .68));
  min-height: 0;
  max-height: none!important;
  overflow: hidden;
  overscroll-behavior: contain;
  transform: translate3d(0, calc(0px - var(--cm-keyboard-inset, 0px)), 0);
  transition: transform .26s cubic-bezier(.2,.8,.2,1), height .26s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
body.cm-open #comments-sheet.cm-settling .cm-sheet { transition: none!important; }
body.cm-open #comments-sheet .cm-list { min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.cm-open.kb-open #comments-sheet .cm-compose { padding-bottom: 12px; }
.cm-profile-avatar { display: grid; flex: none; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.cm-author-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.cm-author-link:active,.cm-profile-avatar:active { opacity: .72; }
.cm-compose { display: grid; gap: 9px; padding: 10px 14px calc(12px + var(--safe-b)); }
.cm-quick-text,.cm-quick-reactions { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cm-quick-text { flex-wrap: wrap; }
.cm-quick-text button { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.07); color: var(--text); font: 600 13px var(--font-body); white-space: nowrap; cursor: pointer; transition: background .16s, transform .16s, opacity .16s; }
.cm-quick-reactions { justify-content: space-around; padding: 2px 12px 0; }
.cm-quick-reactions button { display: grid; place-items: center; width: 44px; height: 42px; padding: 0; border: 0; border-radius: 14px; background: transparent; font-size: 27px; line-height: 1; cursor: pointer; transition: background .16s, transform .16s, opacity .16s; }
.cm-quick-text button:active,.cm-quick-reactions button:active { transform: scale(.94); background: rgba(212,175,55,.16); }
.cm-quick-text button:disabled,.cm-quick-reactions button:disabled { opacity: .45; pointer-events: none; }

/* Readable comments and theme-aware chrome, including the immersive Discover nav. */
.cm-sheet,.cm-head,.cm-list,.cm-row,.cm-body,.cm-text,.cm-by,.cm-meta,.cm-ago,.cm-like,.cm-del,.cm-reply-btn,.cm-view {
  color:var(--text);
}
.cm-text { color:var(--text)!important; }
.cm-by { color:color-mix(in srgb,var(--text) 78%,var(--muted))!important; }
.cm-meta,.cm-ago,.cm-del,.cm-like,.cm-reply-btn,.cm-view { color:var(--muted)!important; }
.cm-compose input { background:color-mix(in srgb,var(--theme-surface-2) 86%,transparent); color:var(--text); }
.cm-compose input::placeholder { color:var(--muted); opacity:1; }
.cm-compose input:focus { border-color:color-mix(in srgb,var(--accent) 65%,transparent); background:var(--theme-surface-2); }
.reel-info .reel-cap { color:#fff!important; }
.cm-emojis,.cm-compose,.cm-sheet { color:var(--text); }
.cm-grabber { background:color-mix(in srgb,var(--text) 36%,transparent); }
body.viewer-open.viewer-discover .bottom-nav {
  background:color-mix(in srgb,var(--theme-bg) 88%,transparent)!important;
  border-top-color:var(--border)!important;
  color:var(--text)!important;
}
body.viewer-open.viewer-discover .bottom-nav .bn-item { color:var(--muted); }
body.viewer-open.viewer-discover .bottom-nav .bn-item.active,
body.viewer-open.viewer-discover .bottom-nav .bn-item.active .ic { color:var(--accent); }

/* Three additional page-wide styles. Each still works with every independent accent. */
:root[data-user-template="rose"] { --theme-bg:#fff3f6; --theme-surface:#fff; --theme-surface-2:#f8e4eb; --theme-border:rgba(115,42,72,.15); --theme-glow:color-mix(in srgb,var(--accent) 14%,transparent); --text:#33202a; --muted:#735c67; --surface:rgba(255,255,255,.92); --surface-2:#f8e4eb; color-scheme:light; }
:root[data-user-template="ocean"] { --theme-bg:#eff9fd; --theme-surface:#fff; --theme-surface-2:#dceff6; --theme-border:rgba(24,75,103,.15); --theme-glow:color-mix(in srgb,var(--accent) 15%,transparent); --text:#172b38; --muted:#506879; --surface:rgba(255,255,255,.92); --surface-2:#dceff6; color-scheme:light; }
:root[data-user-template="graphite"] { --theme-bg:#11151d; --theme-surface:#1a202b; --theme-surface-2:#252e3b; --theme-border:rgba(188,204,226,.15); --theme-glow:color-mix(in srgb,var(--accent) 12%,transparent); --text:#f1f4f8; --muted:#a7b1c0; --surface:rgba(26,32,43,.94); --surface-2:#252e3b; color-scheme:dark; }
:root[data-user-theme="rose"] { --accent:#ff8fab; --accent-ink:#2b0714; --grad:linear-gradient(135deg,#ffc0d0,#ff779e 52%,#db426e); --glow:0 10px 36px rgba(255,105,145,.28); }
:root[data-user-theme="teal"] { --accent:#35c9b8; --accent-ink:#06221f; --grad:linear-gradient(135deg,#a5f1e8,#35c9b8 52%,#168c8f); --glow:0 10px 36px rgba(53,201,184,.27); }
:root[data-user-theme="lime"] { --accent:#a8d94e; --accent-ink:#1a2607; --grad:linear-gradient(135deg,#e2f7a6,#a8d94e 52%,#66a629); --glow:0 10px 36px rgba(168,217,78,.24); }
:root[data-user-theme="crimson"] { --accent:#f06478; --accent-ink:#2c0910; --grad:linear-gradient(135deg,#ffb0b8,#f06478 52%,#bd354f); --glow:0 10px 36px rgba(240,100,120,.25); }
:root[data-user-theme="lavender"] { --accent:#b69cff; --accent-ink:#1b1230; --grad:linear-gradient(135deg,#e5dcff,#b69cff 52%,#7656d7); --glow:0 10px 36px rgba(182,156,255,.26); }
:root[data-user-theme="ice"] { --accent:#78cfff; --accent-ink:#082033; --grad:linear-gradient(135deg,#d2f2ff,#78cfff 52%,#348bd0); --glow:0 10px 36px rgba(120,207,255,.25); }
:root[data-user-theme="red"] { --accent:#ff5364; --accent-ink:#30080d; --grad:linear-gradient(135deg,#ffabb0,#ff5364 52%,#c82342); --glow:0 10px 36px rgba(255,83,100,.28); }
:root[data-user-template="red"] { --theme-bg:#13090d; --theme-surface:#201116; --theme-surface-2:#301820; --theme-border:rgba(255,110,128,.2); --theme-glow:rgba(255,66,88,.15); --text:#fff1f2; --muted:#c19ba2; --surface:rgba(32,17,22,.94); --surface-2:#301820; color-scheme:dark; }
:root[data-user-template="blue"] { --theme-bg:#081321; --theme-surface:#101f31; --theme-surface-2:#192d43; --theme-border:rgba(111,177,255,.2); --theme-glow:rgba(65,145,255,.16); --text:#edf6ff; --muted:#a3bad1; --surface:rgba(16,31,49,.94); --surface-2:#192d43; color-scheme:dark; }
.template-thumb.rose { color:#5a3445; background:#fff3f6; --thumb-accent:#ee6c98; }
.template-thumb.ocean { color:#294455; background:#eff9fd; --thumb-accent:#3d9fce; }
.template-thumb.graphite { color:#e1e9f4; background:#11151d; --thumb-accent:#78cfff; }
.template-thumb.red { color:#ffe4e7; background:#13090d; --thumb-accent:#ff5364; }
.template-thumb.blue { color:#e2f0ff; background:#081321; --thumb-accent:#69aaff; }
.profile-theme-option[data-profile-theme="rose"] { --swatch:#ff8fab; }
.profile-theme-option[data-profile-theme="teal"] { --swatch:#35c9b8; }
.profile-theme-option[data-profile-theme="lime"] { --swatch:#a8d94e; }
.profile-theme-option[data-profile-theme="crimson"] { --swatch:#f06478; }
.profile-theme-option[data-profile-theme="lavender"] { --swatch:#b69cff; }
.profile-theme-option[data-profile-theme="ice"] { --swatch:#78cfff; }
.profile-theme-option[data-profile-theme="red"] { --swatch:#ff5364; }

/* Keep the light themes crisp and legible on the social surfaces too. */
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .cm-sheet,
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .cm-emojis,
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .cm-compose { background:var(--theme-surface)!important; }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .cm-compose input { background:var(--theme-surface-2); border-color:var(--border); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) .cm-quick-text button { background:var(--theme-surface-2); border-color:var(--border); color:var(--text); }

/* Home downloader: let the complete paste area follow the chosen page style and accent. */
#view-home .hero::before {
  top:0!important;
  height:500px;
  background:
    radial-gradient(ellipse at 50% 12%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 56%),
    radial-gradient(ellipse at 14% 36%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 44%),
    radial-gradient(ellipse at 88% 40%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 48%)!important;
}
#view-home .hero .orb-wrap { position:relative; z-index:1; transform:translateY(-110px); }
#view-home .hero .orb { filter:drop-shadow(0 15px 38px color-mix(in srgb,var(--accent) 42%,transparent)); }
#view-home .hero .orb::before { box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 35%,transparent); }
#view-home .hero .orb::after { border-color:color-mix(in srgb,var(--accent) 36%,transparent); }
#view-home .hero .orb.busy::after { border-color:color-mix(in srgb,var(--accent) 68%,transparent); }
#view-home .hero .orb-ring {
  background:conic-gradient(from 205deg,color-mix(in srgb,var(--accent) 34%,white),var(--accent) 34%,color-mix(in srgb,var(--accent) 78%,black) 74%,color-mix(in srgb,var(--accent) 34%,white))!important;
  filter:drop-shadow(0 5px 24px color-mix(in srgb,var(--accent) 48%,transparent));
}
#view-home .hero .orb-core { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 38%,var(--border)); box-shadow:inset 0 0 30px color-mix(in srgb,var(--accent) 17%,transparent),0 0 28px color-mix(in srgb,var(--accent) 16%,transparent); }
#view-home .hero .orb-label { color:var(--muted); }
#view-home .hero .dl-card .btn-lg { background:var(--grad); color:var(--accent-ink); box-shadow:0 9px 22px color-mix(in srgb,var(--accent) 20%,transparent); }
#view-home .hero .dl-library-link { border-color:var(--border); background:var(--theme-surface-2); color:var(--text); }
#view-home .hero .dl-library-link:hover,#view-home .hero .dl-library-link:active { border-color:color-mix(in srgb,var(--accent) 48%,var(--border)); background:color-mix(in srgb,var(--accent) 10%,var(--theme-surface)); color:var(--accent); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) #view-home .hero .dl-card {
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
  background:linear-gradient(150deg,var(--theme-surface),color-mix(in srgb,var(--theme-surface-2) 76%,var(--theme-surface)))!important;
  box-shadow:0 22px 56px color-mix(in srgb,var(--text) 10%,transparent),0 0 36px color-mix(in srgb,var(--accent) 9%,transparent),inset 0 1px 0 #ffffffb0;
}
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) #view-home .hero .dl-card .input-wrap {
  background:var(--theme-surface)!important;
  border-color:var(--border)!important;
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text) 5%,transparent);
}
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) #view-home .hero .dl-card .input-wrap input { color:var(--text); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) #view-home .hero .dl-card .input-wrap input::placeholder { color:var(--muted); opacity:.86; }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) #view-home .hero .dl-card .seg { background:var(--theme-surface-2); border-color:var(--border); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) #view-home .hero .dl-card .seg button { color:var(--muted); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) #view-home .hero .dl-card .seg button.active { background:var(--theme-surface); color:var(--text); box-shadow:0 2px 7px color-mix(in srgb,var(--text) 10%,transparent); }
:root:is([data-user-template="clean"],[data-user-template="sky"],[data-user-template="orchid"],[data-user-template="sunset"],[data-user-template="mint"],[data-user-template="rose"],[data-user-template="ocean"]) #view-home .hero .orb-core { background:radial-gradient(80% 80% at 35% 25%,var(--theme-surface),var(--theme-surface-2) 78%)!important; }


/* Desktop refresh: a spacious download studio with a focused navigation bar. */
.desktop-hero-copy{display:none}
@media (min-width:1100px){
  :root{--topbar-h:76px}
  .topbar{height:var(--topbar-h);padding:0 max(36px,calc((100vw - 1420px)/2));gap:24px;border-bottom-color:color-mix(in srgb,var(--accent) 20%,var(--border));background:color-mix(in srgb,var(--bg) 88%,transparent)!important;box-shadow:0 14px 48px color-mix(in srgb,var(--bg) 62%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent)}
  .brand{gap:12px}.brand-logo{width:42px;height:42px}.brand-name{font-size:22px;letter-spacing:-.04em}
  .top-nav{gap:6px;margin-left:clamp(26px,5vw,80px)}.top-link{padding:10px 16px;font-size:13px;font-weight:650;letter-spacing:.01em}.top-link.active{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--theme-surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)}
  .topbar .icon-btn{width:44px;height:44px;background:color-mix(in srgb,var(--theme-surface) 70%,transparent);border-color:var(--border)}
  .page{max-width:1480px;padding:0 clamp(34px,5.2vw,86px) calc(var(--mini-h) + 56px)}
  #view-home.page{max-width:1520px;padding-inline:clamp(38px,6vw,100px)}
  #view-home .hero{min-height:650px;height:min(720px,calc(100vh - var(--topbar-h) - 36px));padding:40px 0 32px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);grid-template-rows:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(44px,7vw,112px);row-gap:0;text-align:left}
  #view-home .hero::before{left:7%;top:46%;width:760px;height:580px;transform:translate(-28%,-50%);background:radial-gradient(ellipse at 40% 45%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 64%),radial-gradient(ellipse at 24% 72%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 60%)}
  #view-home .home-msg{grid-column:1/-1;grid-row:1;width:fit-content;max-width:100%;margin:0 0 20px}
  #view-home .desktop-hero-copy{display:block;grid-column:1;grid-row:2;align-self:end;padding:0 0 18px;max-width:590px}
  .desktop-hero-kicker{display:inline-flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--theme-surface) 74%,transparent);color:var(--accent);font:750 10px/1 var(--font-head);letter-spacing:.16em}
  .desktop-hero-kicker i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)}
  .desktop-hero-copy h2{margin:24px 0 16px;font:800 clamp(48px,5.4vw,78px)/.99 var(--font-head);letter-spacing:-.075em;color:var(--text)}
  .desktop-hero-copy h2 em{font-style:normal;color:var(--accent);text-shadow:0 10px 50px color-mix(in srgb,var(--accent) 28%,transparent)}
  .desktop-hero-copy p{max-width:470px;color:var(--muted);font-size:17px;line-height:1.75}
  .desktop-hero-tags{display:flex;gap:9px;margin-top:24px}.desktop-hero-tags span{padding:8px 11px;border:1px solid var(--border);border-radius:9px;background:color-mix(in srgb,var(--theme-surface) 72%,transparent);color:var(--muted);font:700 9px/1 var(--font-head);letter-spacing:.13em}
  #view-home .hero .orb-wrap{grid-column:1;grid-row:3;justify-self:start;display:flex;align-items:center;gap:18px;margin:8px 0 0 6px;transform:none}
  #view-home .hero .orb{width:92px;height:92px;flex:none}.orb-core{inset:8px}.orb-ic{width:34px;height:34px}.orb-pct{font-size:16px}.orb-check{width:24px;height:24px}
  .orb-wrap{gap:12px}.orb-label{font-size:10px;letter-spacing:.12em}
  #view-home .hero .or-sep{display:none}
  #view-home .hero .dl-card{grid-column:2;grid-row:2/4;align-self:center;justify-self:stretch;width:100%;max-width:none;margin:0;padding:24px;border-radius:30px;gap:16px;box-shadow:0 36px 100px color-mix(in srgb,var(--bg) 64%,transparent),0 0 70px color-mix(in srgb,var(--accent) 10%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 11%,transparent)}
  #view-home .hero .dl-card .input-wrap{min-height:72px;border-radius:18px;padding-inline:17px}#view-home .hero .dl-card .input-wrap input{font-size:17px}
  #view-home .hero .dl-card .dl-row{gap:12px}#view-home .hero .dl-card .seg{min-height:56px;padding:5px}#view-home .hero .dl-card .btn-lg{min-height:58px;padding-inline:25px}
  #view-home .hero .dl-library-link{margin-top:2px}
  .home-cards{grid-template-columns:minmax(0,1fr);gap:14px;max-width:1160px;margin:0 auto 28px}
  .hc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hc-card{min-height:156px;padding:22px 24px;border-radius:24px;transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
  .hc-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 44%,var(--border));box-shadow:0 22px 54px color-mix(in srgb,var(--bg) 55%,transparent),0 0 36px color-mix(in srgb,var(--accent) 9%,transparent)}
  .hc-card b{font-size:19px}.hc-card small{max-width:360px;font-size:13px}.hc-card .hc-ic{width:48px;height:48px;border-radius:16px}
  .home-about-link{max-width:1160px;margin:0 auto 34px;padding:16px 20px;border-radius:20px}
  #view-home .results{max-width:1160px;margin-inline:auto}.results .section-head h2{font-size:15px;letter-spacing:.12em}
  .page-head{padding-top:34px}.page-head h1,.page-head .page-title{font-size:36px}
  #view-discover .feed{max-width:560px}
}
@media (min-width:1100px) and (max-height:760px){#view-home .hero{min-height:570px;height:auto;padding-top:24px}#view-home .desktop-hero-copy h2{font-size:clamp(46px,4.8vw,68px)}}