/* ============================================================
   More About — public artist page
   ============================================================ */

:root {
    --accent: #7b61ff;
    --accent-2: #ec4899;
    --radius: 16px;
    --max: 600px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Hide the up/down spinner on number inputs everywhere. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

body.public {
    font-family: var(--font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    padding: 0 16px;
    overflow-x: clip;
}

/* Custom / AI-generated page background (sits behind everything, with a scrim
   so text stays readable). */
body.public.has-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
body.public.has-bg::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.65));
}
body.public.has-bg.theme-light::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.75));
}

/* ---- Themes ---- */
.theme-dark   { background: #0e0e12; color: #f5f5f7; }
.theme-light  { background: #f6f6f9; color: #16161a; }
.theme-mono   { background: #111; color: #fafafa; }
.theme-sunset {
    background: linear-gradient(160deg, #2b1055 0%, #7597de 100%);
    color: #fff;
}

/* Fresh / futuristic gradient themes (match the admin palettes) */
.theme-violet {
    background:
        radial-gradient(900px 500px at 110% -10%, rgba(124,92,255,0.35), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, rgba(236,72,153,0.28), transparent 55%),
        linear-gradient(180deg, #0c0c11, #14111d);
    color: #f5f3fb;
}
.theme-ocean {
    background:
        radial-gradient(900px 500px at 110% -10%, rgba(14,165,233,0.38), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, rgba(34,211,238,0.26), transparent 55%),
        linear-gradient(180deg, #07101a, #0b1824);
    color: #eafaff;
}
.theme-emerald {
    background:
        radial-gradient(900px 500px at 110% -10%, rgba(16,185,129,0.36), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, rgba(132,204,22,0.24), transparent 55%),
        linear-gradient(180deg, #08130f, #0c1c16);
    color: #eafff5;
}
.theme-rose {
    background:
        radial-gradient(900px 500px at 110% -10%, rgba(244,63,94,0.36), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, rgba(251,146,60,0.26), transparent 55%),
        linear-gradient(180deg, #150a0e, #1e1014);
    color: #fff0f3;
}
.theme-midnight {
    background:
        radial-gradient(900px 500px at 110% -10%, rgba(99,102,241,0.30), transparent 60%),
        linear-gradient(180deg, #0a0a0f, #101019);
    color: #eef0ff;
}
.theme-aurora {
    background:
        radial-gradient(800px 480px at 0% 0%, rgba(56,189,248,0.32), transparent 60%),
        radial-gradient(800px 480px at 100% 0%, rgba(168,85,247,0.30), transparent 60%),
        radial-gradient(900px 520px at 50% 120%, rgba(16,185,129,0.26), transparent 60%),
        linear-gradient(180deg, #080b14, #0d1320);
    color: #eef6ff;
}

.profile {
    max-width: var(--max);
    margin: 0 auto;
    padding: 56px 0 64px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    animation: page-fade 0.34s ease;
    position: relative;
}
@keyframes page-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .profile { animation: none; } }

/* ---- Avatar ---- */
.avatar img,
.avatar-fallback {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.15);
}
.theme-light .avatar img,
.theme-light .avatar-fallback { border-color: rgba(0, 0, 0, 0.08); }

.avatar-fallback {
    display: grid;
    place-items: center;
    font-size: 44px;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
}

/* Avatar as a "story" launcher — tap to play the creator's photos & videos. */
.avatar-story {
    position: relative; padding: 0; border: 0; background: none; cursor: pointer;
    display: inline-block; line-height: 0; border-radius: 50%;
    transition: transform 0.12s ease;
}
.avatar-story:hover { transform: translateY(-2px); }
.avatar-story:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.avatar-ring {
    display: inline-grid; place-items: center; border-radius: 50%; padding: 4px;
    background: conic-gradient(from 210deg, #f59e0b, #ec4899, #7c5cff, #22d3ee, #f59e0b);
}
.avatar-story.seen .avatar-ring { background: rgba(255,255,255,0.28); }
.avatar-story .avatar-ring img,
.avatar-story .avatar-ring .avatar-fallback { border: 3px solid #0b0b14; }
.theme-light .avatar-story .avatar-ring img,
.theme-light .avatar-story .avatar-ring .avatar-fallback { border-color: #f6f6f9; }
.avatar-story-badge {
    position: absolute; bottom: 4px; right: 4px; z-index: 2;
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 800; line-height: 1;
    padding: 4px 8px; border-radius: 999px; color: #fff;
    background: linear-gradient(120deg, var(--accent), #ec4899);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.avatar-story-badge svg { width: 12px; height: 12px; }

.name { font-size: 24px; font-weight: 700; margin: 4px 0 0; }
.verified-badge {
    display: inline-block;
    vertical-align: -2px;
    margin-left: 4px;
    color: #f59e0b;
}
/* Off-screen honeypot field: invisible to humans, present for naive bots. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
.bio  { margin: 0; opacity: 0.85; line-height: 1.5; max-width: 460px; }

/* ---- Handle + gallery + subscriptions ---- */
.handle { margin: 0; font-size: 14px; opacity: 0.6; }

.gallery { width: 100%; margin-top: 8px; }
.gallery-title {
    font-size: 18px; font-weight: 700; margin: 6px 0 14px; text-align: center;
    letter-spacing: 0.2px;
}
.gallery-title::after {
    content: ""; display: block; width: 38px; height: 3px; margin: 8px auto 0;
    border-radius: 3px; background: linear-gradient(90deg, var(--accent), #ec4899);
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.gallery-item { margin: 0; position: relative; }
.gallery-item img {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}
/* "24h story" countdown chip. */
.g-clock {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    font-size: 11px; font-weight: 700; color: #fff;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px);
    pointer-events: none;
}
/* Gold "Exclusive" badge on an admirers-only gallery tile the viewer can see. */
.gi-excl {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    color: #2a2000; padding: 3px 8px; border-radius: 999px;
    background: linear-gradient(120deg, #ffe07a, #f5b301);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); pointer-events: none;
}
.gi-excl svg { width: 10px; height: 10px; }
/* Visible (unlocked) reels are tappable to view full size. */
.gallery .gallery-item { cursor: zoom-in; }
.gallery .gallery-item img { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.gallery .gallery-item:hover img,
.gallery .gallery-item:focus-within img {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}
.gallery .gallery-item .expand-ico {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center; font-size: 14px;
    background: rgba(0, 0, 0, 0.45); color: #fff;
    backdrop-filter: blur(4px); pointer-events: none;
    opacity: 0; transition: opacity 0.2s ease;
}
.gallery .gallery-item:hover .expand-ico,
.gallery .gallery-item:focus-within .expand-ico { opacity: 1; }
.gallery-item figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    font-size: 12px; padding: 18px 10px 8px; text-align: left;
    color: #fff; border-radius: 0 0 16px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}
@media (min-width: 760px) {
    .gallery, .locked-gallery { width: min(96vw, 760px); margin-left: 50%; transform: translateX(-50%); }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ---- Restricted content protection (deterrent) ---- */
.gallery-item.protected img {
    -webkit-user-select: none; user-select: none;
    -webkit-user-drag: none; -webkit-touch-callout: none;
    pointer-events: none;
}
.gallery-item.protected .wm {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.55);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    transform: rotate(-20deg);
    pointer-events: none; user-select: none;
    background:
        repeating-linear-gradient(
            -20deg,
            transparent 0 90px,
            rgba(255, 255, 255, 0.04) 90px 180px
        );
}
.protect-note { font-size: 12px; opacity: 0.6; margin: 12px 0 0; }

/* When the page loses focus (likely a capture), blur restricted media. */
body.has-protected.shielded .gallery-item.protected img { filter: blur(22px); }
body.has-protected.shielded .gallery-item.protected .wm { color: rgba(255, 255, 255, 0.9); }

.subscribe-card {
    width: 100%;
    padding: 22px;
    border-radius: var(--radius);
    text-align: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(236, 72, 153, 0.18));
    border: 1px dashed rgba(255, 255, 255, 0.3);
}
.theme-light .subscribe-card { border-color: rgba(0, 0, 0, 0.12); }
.subscribe-card .lock-badge {
    width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%;
    display: grid; place-items: center; font-size: 22px; color: #fff;
    background: linear-gradient(135deg, var(--accent), #ec4899);
}
.subscribe-card h2 { margin: 0 0 4px; font-size: 18px; }
.subscribe-card p { margin: 0 0 14px; opacity: 0.85; font-size: 14px; }
.sub-card-price {
    margin: 0 0 14px !important; font-size: 22px; font-weight: 800; opacity: 1 !important;
}
.sub-card-price span { font-size: 13px; font-weight: 600; opacity: 0.7; }
.sub-card-price em {
    display: block; font-style: normal; font-size: 13px; font-weight: 600;
    opacity: 0.75; margin-top: 2px;
}
.sub-perk { font-size: 13px; opacity: 0.8; margin: 6px 0 0; }
.subscribe-btn { display: inline-block; text-decoration: none; }

/* Save / bookmark a creator page */
.save-creator { margin: 2px 0 0; }
.save-btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; cursor: pointer; }
.save-btn.is-saved { background: var(--accent); border-color: var(--accent); color: #fff; }
.save-btn.is-saved .ico { fill: currentColor; }

/* Floating "Save contact" (vCard) button — adds the creator to the phone's
   contacts with their unique link + profile photo. */
.save-contact-fab {
    position: fixed; z-index: 60;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 18px; border-radius: 999px;
    background: var(--accent, #7c3aed); color: #fff; text-decoration: none;
    font-weight: 700; font-size: 14px; line-height: 1;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.save-contact-fab:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.46); }
@media (pointer: coarse) {
    .save-contact-fab { width: 44px; height: 44px; }
}
.save-contact-fab:active { transform: translateY(0); }
.save-contact-fab svg { flex: none; }
@media (max-width: 480px) {
    .save-contact-fab { padding: 14px; }
    .save-contact-fab .save-contact-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .save-contact-fab { transition: none; } }

/* ---- Tip Jar: floating "Tip" button (bottom-left) + modal ---- */
.tip-fab {
    position: fixed; z-index: 60;
    left: max(16px, env(safe-area-inset-left));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 18px; border: 0; cursor: pointer; border-radius: 999px; font-family: inherit;
    background: var(--tip, #3D95CE); color: #fff; font-weight: 700; font-size: 14px; line-height: 1;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.tip-fab:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.46); }
.tip-fab:active { transform: translateY(0); }
@media (pointer: coarse) {
    .tip-fab { min-height: 44px; }
}
.tip-fab svg { flex: none; }
@media (max-width: 480px) {
    .tip-fab { padding: 14px; }
    .tip-fab .tip-fab-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tip-fab { transition: none; } }

.tip-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.tip-modal[hidden] { display: none; }
.tip-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tip-modal-card {
    position: relative; z-index: 1; width: min(360px, 100%);
    background: #14141a; color: #f4f4f7; border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px; padding: 26px 22px 22px; text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.tip-modal-x { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: inherit; opacity: 0.65; cursor: pointer; padding: 4px; line-height: 0; }
.tip-modal-x:hover { opacity: 1; }
.tip-modal-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 12px; color: var(--tip, #3D95CE); text-transform: uppercase; letter-spacing: 0.05em; }
.tip-modal-name { margin: 8px 0 16px; font-size: 15px; color: #cfcfe0; }
.tip-modal-name strong { color: #fff; }
.tip-qr { width: 172px; height: 172px; margin: 0 auto; background: #fff; border-radius: 12px; padding: 8px; display: grid; place-items: center; }
.tip-qr svg { width: 100%; height: 100%; display: block; }
.tip-scan { margin: 8px 0 2px; }
.tip-handle-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.tip-handle { font-size: 15px; font-weight: 700; background: rgba(255, 255, 255, 0.08); padding: 8px 12px; border-radius: 10px; word-break: break-all; }
.tip-handle-row .btn { padding: 8px 12px; font-size: 13px; }
.tip-open-app { display: block; width: 100%; margin-top: 4px; background: var(--tip, #3D95CE); border-color: var(--tip, #3D95CE); color: #fff; }
.tip-zelle-note { margin: 10px 0 0; }
.tip-disclaimer { margin: 14px 0 0; opacity: 0.6; font-size: 11px; }
body.tip-open { overflow: hidden; }

/* ---- Tip Jar settings card (Account → Profile) ---- */
.tipjar-card { margin-top: 18px; }
.tipjar-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 18px; }
.tipjar-head .tier-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(200, 170, 60, 0.16); color: #d9b64a; vertical-align: middle; }
.tipjar-head p { margin: 0 0 4px; }
.tipjar-lock { margin-top: 12px; padding: 14px 16px; border: 1px dashed var(--line, rgba(128,128,128,0.3)); border-radius: 12px; font-size: 14px; }
.tipjar-lock a { font-weight: 700; }

/* Buttons used on public pages (profile + subscribe). */
.public .btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}
.public .btn.primary {
    color: #fff;
    background: linear-gradient(120deg, var(--accent), #ec4899);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}
.public .btn.primary:hover { transform: translateY(-1px); }
.public .btn:not(.primary) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: inherit;
}

/* ---- Subscribe page ---- */
.subscribe-page { max-width: 440px; }
.sub-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 6px; }
.sub-hero-av { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; flex: none; margin-bottom: 8px;
    display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #fff;
    border: 3px solid rgba(255,255,255,0.14); box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, var(--accent), #ec4899); }
.sub-hero-av img { width: 100%; height: 100%; object-fit: cover; }
.sub-hero .name { margin: 0; font-size: 22px; }
.sub-hero .bio { margin: 2px 0 0; opacity: 0.8; }
.sub-tiers { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.sub-form {
    width: 100%; display: flex; flex-direction: column; gap: 10px;
    padding: 18px; border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
/* Tier "card" — the price is the hero, perks listed, CTA at the bottom. */
.sub-card { position: relative; padding: 24px 22px; gap: 14px;
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%), rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 50px rgba(0,0,0,0.35); }
.sub-card.elite { border-color: rgba(236, 72, 153, 0.5); }
.sub-tier-tag { align-self: center; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    color: #fff; padding: 4px 12px; border-radius: 999px;
    background: linear-gradient(120deg, var(--accent), #ec4899); }
.sub-price-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 4px 0 2px; }
.sub-price-amount { font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -0.02em;
    background: linear-gradient(120deg, #fff, color-mix(in srgb, var(--accent) 60%, #fff)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sub-price-per { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; }
.sub-benefits { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sub-benefits li { display: flex; align-items: center; gap: 10px; font-size: 14px; opacity: 0.92; }
.sub-benefits li .ico { color: var(--accent); flex: none; }
.sub-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
/* Card is a flex column that can hold more than one payment option. */
.sub-card { display: flex; flex-direction: column; }
.sub-card .sub-form { background: transparent; border: none; padding: 0; gap: 12px; }
.sub-or { display: flex; align-items: center; gap: 10px; margin: 2px 0;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; }
.sub-or::before, .sub-or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.16); }
.sub-signed-in { display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px; opacity: 0.85; margin: 2px 0 4px; }
.sub-signed-in .ico { color: #4ade80; flex: none; }
.sub-wallet-line { font-size: 13px; opacity: 0.8; margin: 8px 0 0; text-align: center; }
.sub-altpay { width: 100%; margin-top: 6px; font-size: 14px; }
.sub-altpay summary { cursor: pointer; text-align: center; opacity: 0.75; font-weight: 600;
    padding: 8px 0; list-style: none; }
.sub-altpay summary::-webkit-details-marker { display: none; }
.sub-altpay summary:hover { opacity: 1; }
.sub-altpay[open] summary { margin-bottom: 8px; }
.sub-altpay .token-pay { margin-top: 8px; }
.sub-tier { display: flex; align-items: baseline; justify-content: space-between; }
.sub-tier h2 { margin: 0; font-size: 18px; }
.sub-price { margin: 0; font-size: 24px; font-weight: 800; }
.sub-price span { font-size: 13px; font-weight: 600; opacity: 0.7; }
.sub-form input[type=email], .sub-form input[type=text] {
    width: 100%; padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.25); color: inherit;
}
.sub-form .code-input { letter-spacing: 8px; font-size: 22px; text-align: center; }
.sub-returning { width: 100%; margin-top: 8px; font-size: 14px; opacity: 0.9; }
.sub-returning summary { cursor: pointer; padding: 8px 0; }
.subscribe-page .handle a { color: inherit; opacity: 0.85; text-decoration: none; font-weight: 600; }
.subscribe-page .handle a:hover { opacity: 1; text-decoration: underline; }
.alert { width: 100%; padding: 11px 14px; border-radius: 10px; font-size: 14px; }
.alert.success { background: rgba(22, 52, 31, 0.85); color: #b7f0c6; }
.alert.error { background: rgba(58, 26, 26, 0.85); color: #ffb4b4; }
.alert.info { background: rgba(26, 37, 64, 0.85); color: #b9ccff; }

.made-with { font-size: 12px; opacity: 0.45; color: inherit; text-decoration: none; }
.made-with:hover { opacity: 0.8; }
@media (pointer: coarse) {
    .made-with { display: inline-block; padding: 12px 8px; }
}
.made-with { display: inline-flex; align-items: center; gap: 6px; }
.made-with .brand-mark { border-radius: 6px; flex: 0 0 auto; }

.god-view-banner {
    width: 100%; box-sizing: border-box; margin-bottom: 8px;
    padding: 10px 14px; border-radius: 12px; font-size: 13px; text-align: center;
    background: linear-gradient(120deg, rgba(34,211,238,0.22), rgba(168,85,247,0.22));
    border: 1px dashed rgba(255,255,255,0.35); color: #fff;
}

/* ---- Social icons ---- */
.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin: 6px 0 4px;
}
.social {
    color: inherit;
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    opacity: 0.9;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.social:hover { transform: translateY(-2px); opacity: 1; }
/* Touch devices: keep the icon the same size but grow the tappable area to the
   ~44px platform minimum (these links are the main CTA on a profile). */
@media (pointer: coarse) {
    .social { width: 44px; height: 44px; }
}

.social-icon {
    width: 26px;
    height: 26px;
    display: block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    /* default / fallback icon (link) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M10.6 13.4a1 1 0 0 1 0-1.4l3-3a1 1 0 0 1 1.4 1.4l-3 3a1 1 0 0 1-1.4 0Z'/%3E%3Cpath fill='black' fill-rule='evenodd' d='M8 16a4 4 0 0 1 0-5.7l2-2 1.4 1.4-2 2A2 2 0 0 0 12 14.6l2-2L15.4 14l-2 2A4 4 0 0 1 8 16Zm8-8a4 4 0 0 1 0 5.7l-2 2L12.6 14l2-2A2 2 0 0 0 12 9.4l-2 2L8.6 10l2-2A4 4 0 0 1 16 8Z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M8 16a4 4 0 0 1 0-5.7l2-2 1.4 1.4-2 2A2 2 0 0 0 12 14.6l2-2L15.4 14l-2 2A4 4 0 0 1 8 16Zm8-8a4 4 0 0 1 0 5.7l-2 2L12.6 14l2-2A2 2 0 0 0 12 9.4l-2 2L8.6 10l2-2A4 4 0 0 1 16 8Z'/%3E%3C/svg%3E");
}

.icon-instagram { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.2c3.2 0 3.6 0 4.9.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s0 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.21 15.58 2.2 15.2 2.2 12s0-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.21 8.8 2.2 12 2.2Zm0 1.8c-3.15 0-3.5.01-4.74.07-.9.04-1.38.19-1.7.32-.43.16-.74.36-1.06.68-.32.32-.52.63-.68 1.06-.13.32-.28.8-.32 1.7C3.21 8.6 3.2 8.95 3.2 12s.01 3.4.07 4.64c.04.9.19 1.38.32 1.7.16.43.36.74.68 1.06.32.32.63.52 1.06.68.32.13.8.28 1.7.32 1.24.06 1.59.07 4.74.07s3.5-.01 4.74-.07c.9-.04 1.38-.19 1.7-.32.43-.16.74-.36 1.06-.68.32-.32.52-.63.68-1.06.13-.32.28-.8.32-1.7.06-1.24.07-1.59.07-4.64s-.01-3.4-.07-4.64c-.04-.9-.19-1.38-.32-1.7a2.85 2.85 0 0 0-.68-1.06 2.85 2.85 0 0 0-1.06-.68c-.32-.13-.8-.28-1.7-.32C15.5 4.01 15.15 4 12 4Zm0 3.06A4.94 4.94 0 1 1 7.06 12 4.94 4.94 0 0 1 12 7.06Zm0 1.8A3.14 3.14 0 1 0 15.14 12 3.14 3.14 0 0 0 12 8.86Zm5.13-3.2a1.15 1.15 0 1 1-1.15 1.15 1.15 1.15 0 0 1 1.15-1.15Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2.2c3.2 0 3.6 0 4.9.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s0 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.21 15.58 2.2 15.2 2.2 12s0-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.21 8.8 2.2 12 2.2Zm0 4.86A4.94 4.94 0 1 1 7.06 12 4.94 4.94 0 0 1 12 7.06Zm0 1.8A3.14 3.14 0 1 0 15.14 12 3.14 3.14 0 0 0 12 8.86Zm5.13-3.2a1.15 1.15 0 1 1-1.15 1.15 1.15 1.15 0 0 1 1.15-1.15Z'/%3E%3C/svg%3E"); }

.icon-youtube { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M23 12s0-3.4-.43-5a2.62 2.62 0 0 0-1.85-1.85C19.13 4.7 12 4.7 12 4.7s-7.13 0-8.72.45A2.62 2.62 0 0 0 1.43 7C1 8.6 1 12 1 12s0 3.4.43 5a2.62 2.62 0 0 0 1.85 1.85c1.59.45 8.72.45 8.72.45s7.13 0 8.72-.45A2.62 2.62 0 0 0 22.57 17C23 15.4 23 12 23 12ZM9.75 15.27V8.73L15.5 12Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M23 12s0-3.4-.43-5a2.62 2.62 0 0 0-1.85-1.85C19.13 4.7 12 4.7 12 4.7s-7.13 0-8.72.45A2.62 2.62 0 0 0 1.43 7C1 8.6 1 12 1 12s0 3.4.43 5a2.62 2.62 0 0 0 1.85 1.85c1.59.45 8.72.45 8.72.45s7.13 0 8.72-.45A2.62 2.62 0 0 0 22.57 17C23 15.4 23 12 23 12ZM9.75 15.27V8.73L15.5 12Z'/%3E%3C/svg%3E"); }

.icon-spotify { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.59 14.43a.62.62 0 0 1-.86.21c-2.35-1.44-5.3-1.76-8.79-.96a.62.62 0 1 1-.28-1.22c3.8-.87 7.08-.5 9.72 1.11.3.18.39.57.21.86Zm1.22-2.72a.78.78 0 0 1-1.07.26c-2.69-1.65-6.79-2.13-9.97-1.17a.78.78 0 1 1-.45-1.49c3.63-1.1 8.15-.56 11.23 1.33.37.23.49.71.26 1.07Zm.1-2.83C14.8 9.16 9.4 8.97 6.3 9.91a.94.94 0 1 1-.54-1.8c3.56-1.08 9.52-.87 13.27 1.36a.94.94 0 0 1-.96 1.61Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm4.59 14.43a.62.62 0 0 1-.86.21c-2.35-1.44-5.3-1.76-8.79-.96a.62.62 0 1 1-.28-1.22c3.8-.87 7.08-.5 9.72 1.11.3.18.39.57.21.86Zm1.22-2.72a.78.78 0 0 1-1.07.26c-2.69-1.65-6.79-2.13-9.97-1.17a.78.78 0 1 1-.45-1.49c3.63-1.1 8.15-.56 11.23 1.33.37.23.49.71.26 1.07Zm.1-2.83C14.8 9.16 9.4 8.97 6.3 9.91a.94.94 0 1 1-.54-1.8c3.56-1.08 9.52-.87 13.27 1.36a.94.94 0 0 1-.96 1.61Z'/%3E%3C/svg%3E"); }

.icon-facebook { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.78-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.78-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12Z'/%3E%3C/svg%3E"); }

.icon-x { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M18.9 2H22l-7.5 8.6L23 22h-6.8l-5.3-7-6.1 7H1.7l8-9.2L1 2h7l4.8 6.3L18.9 2Zm-1.2 18h1.9L7.1 4H5.1l12.6 16Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M18.9 2H22l-7.5 8.6L23 22h-6.8l-5.3-7-6.1 7H1.7l8-9.2L1 2h7l4.8 6.3L18.9 2Zm-1.2 18h1.9L7.1 4H5.1l12.6 16Z'/%3E%3C/svg%3E"); }

.icon-tiktok { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M16 3c.3 2.1 1.5 3.6 3.5 3.9V10c-1.3 0-2.5-.4-3.5-1.1v6.2A5.6 5.6 0 1 1 10.4 9.5v3.1a2.5 2.5 0 1 0 1.7 2.4V3H16Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M16 3c.3 2.1 1.5 3.6 3.5 3.9V10c-1.3 0-2.5-.4-3.5-1.1v6.2A5.6 5.6 0 1 1 10.4 9.5v3.1a2.5 2.5 0 1 0 1.7 2.4V3H16Z'/%3E%3C/svg%3E"); }

.icon-soundcloud { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M2 14v3a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-1 0Zm2-1v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-1 0Zm2-1v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-1 0Zm2-1v6a.5.5 0 0 0 1 0v-6a.5.5 0 0 0-1 0Zm2-.5V18a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-1 0Zm2.5-2A3.5 3.5 0 0 0 11 11v7h8.5a2.5 2.5 0 0 0 0-5c-.2 0-.4 0-.6.07A4 4 0 0 0 14.5 7.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M2 14v3a.5.5 0 0 0 1 0v-3a.5.5 0 0 0-1 0Zm2-1v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-1 0Zm2-1v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-1 0Zm2-1v6a.5.5 0 0 0 1 0v-6a.5.5 0 0 0-1 0Zm2-.5V18a.5.5 0 0 0 1 0v-7a.5.5 0 0 0-1 0Zm2.5-2A3.5 3.5 0 0 0 11 11v7h8.5a2.5 2.5 0 0 0 0-5c-.2 0-.4 0-.6.07A4 4 0 0 0 14.5 7.5Z'/%3E%3C/svg%3E"); }

.icon-email { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 2v.4l8 5 8-5V6H4Zm16 2.5-8 5-8-5V18h16Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 2v.4l8 5 8-5V6H4Zm16 2.5-8 5-8-5V18h16Z'/%3E%3C/svg%3E"); }

.icon-website { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.9 6h-2.8a15.7 15.7 0 0 0-1.3-3.4A8 8 0 0 1 18.9 8ZM12 4c.8 1 1.5 2.4 1.9 4h-3.8c.4-1.6 1.1-3 1.9-4ZM4.3 14a8 8 0 0 1 0-4h3.2a17.7 17.7 0 0 0 0 4Zm.8 2h2.8c.3 1.2.8 2.4 1.3 3.4A8 8 0 0 1 5.1 16Zm2.8-8H5.1a8 8 0 0 1 4.1-3.4C8.7 5.6 8.2 6.8 7.9 8ZM12 20c-.8-1-1.5-2.4-1.9-4h3.8c-.4 1.6-1.1 3-1.9 4Zm2.4-6H9.6a15.5 15.5 0 0 1 0-4h4.8a15.5 15.5 0 0 1 0 4Zm.3 5.4c.5-1 1-2.2 1.3-3.4h2.8a8 8 0 0 1-4.1 3.4ZM16.5 14a17.7 17.7 0 0 0 0-4h3.2a8 8 0 0 1 0 4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.9 6h-2.8a15.7 15.7 0 0 0-1.3-3.4A8 8 0 0 1 18.9 8ZM12 4c.8 1 1.5 2.4 1.9 4h-3.8c.4-1.6 1.1-3 1.9-4ZM4.3 14a8 8 0 0 1 0-4h3.2a17.7 17.7 0 0 0 0 4Zm.8 2h2.8c.3 1.2.8 2.4 1.3 3.4A8 8 0 0 1 5.1 16Zm2.8-8H5.1a8 8 0 0 1 4.1-3.4C8.7 5.6 8.2 6.8 7.9 8ZM12 20c-.8-1-1.5-2.4-1.9-4h3.8c-.4 1.6-1.1 3-1.9 4Zm2.4-6H9.6a15.5 15.5 0 0 1 0-4h4.8a15.5 15.5 0 0 1 0 4Zm.3 5.4c.5-1 1-2.2 1.3-3.4h2.8a8 8 0 0 1-4.1 3.4ZM16.5 14a17.7 17.7 0 0 0 0-4h3.2a8 8 0 0 1 0 4Z'/%3E%3C/svg%3E"); }

.icon-twitch { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z'/%3E%3C/svg%3E"); }

.icon-discord { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.317 4.369a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.099.245.197.372.291a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.331c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.317 4.369a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.099.245.197.372.291a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.331c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E"); }

.icon-patreon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z'/%3E%3C/svg%3E"); }

.icon-threads { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.36-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.74-1.762-.5-.588-1.27-.886-2.29-.894h-.027c-.819 0-1.929.225-2.636 1.273L7.27 7.418c.948-1.405 2.487-2.178 4.342-2.178h.043c3.6.027 5.55 2.34 5.74 6.282.13.078.265.16.39.245 1.286.74 2.198 1.835 2.674 3.227.665 1.957.696 5.149-1.953 7.741C16.594 22.79 14.554 23.978 12.186 24z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.36-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.74-1.762-.5-.588-1.27-.886-2.29-.894h-.027c-.819 0-1.929.225-2.636 1.273L7.27 7.418c.948-1.405 2.487-2.178 4.342-2.178h.043c3.6.027 5.55 2.34 5.74 6.282.13.078.265.16.39.245 1.286.74 2.198 1.835 2.674 3.227.665 1.957.696 5.149-1.953 7.741C16.594 22.79 14.554 23.978 12.186 24z'/%3E%3C/svg%3E"); }

/* ---- Link buttons ---- */
.links {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
}
.music {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}
.music-embed { width: 100%; }
.music-embed-more {
    display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700;
    color: var(--accent); text-decoration: none; opacity: 0.9;
}
.music-embed-more:hover { opacity: 1; }
.link-btn {
    display: block;
    width: 100%;
    padding: 16px 18px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.12s ease, background 0.12s ease;
}
.link-btn:hover { transform: scale(1.02); background: var(--accent); border-color: var(--accent); color: #fff; }

.theme-light .link-btn { background: #fff; border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.theme-light .link-btn:hover { background: var(--accent); color: #fff; }

/* Link buttons with an icon: keep label centered, float the icon left. */
.link-btn.has-icon { position: relative; display: flex; align-items: center; gap: 12px; text-align: center; }
.link-btn-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; overflow: hidden; display: block; }
.link-btn-icon > img { width: 100%; height: 100%; display: block; }
.link-btn-icon.emoji { display: inline-grid; place-items: center; font-size: 22px; border-radius: 0; }
.link-btn-label { flex: 1; min-width: 0; }
/* Optical balance so the centered label isn't pushed by the icon. */
.link-btn.has-icon .link-btn-label { margin-right: 28px; }

/* ---- Rich link cards ---- */
.link-card {
    display: flex; align-items: stretch; gap: 0; width: 100%;
    border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
    transition: transform 0.12s ease, background 0.12s ease;
}
.link-card:hover { transform: scale(1.02); background: rgba(255, 255, 255, 0.14); }
.theme-light .link-card { background: #fff; border-color: rgba(0,0,0,0.1); }
.link-card-media { position: relative; flex: 0 0 96px; overflow: hidden; }
.link-card-media img { width: 96px; height: 96px; display: block; }
.link-card-emoji { width: 96px; height: 96px; display: grid; place-items: center; font-size: 44px; background: rgba(255, 255, 255, 0.06); }
.link-card.no-thumb .link-card-media { display: none; }
/* Half-width cards: shrink the thumbnail so the title has room to show. */
.lk-width-half .link-card-media { flex: 0 0 64px; }
.lk-width-half .link-card-media img, .lk-width-half .link-card-emoji { width: 64px; height: 64px; }
.lk-width-half .link-card-emoji { font-size: 30px; }
.lk-width-half .link-card-body { padding: 10px 12px; }
.play-badge {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #fff; font-size: 22px; text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    background: rgba(0,0,0,0.25);
}
.link-card-body { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.link-card-title { font-weight: 600; }
.link-card-provider { font-size: 12px; opacity: 0.7; }

.link-embed { width: 100%; }
.link-embed-title { display: block; font-weight: 600; margin-bottom: 8px; }

/* ---- Page stream: optional half-width cards (two per row) ---- */
.page-stream { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.page-stream > .stream-item { flex: 1 1 100%; min-width: 0; position: relative; }
.page-stream > .stream-item.lk-width-half { flex: 0 1 calc(50% - 7px); display: flex; }
.page-stream > .stream-item.lk-width-half > *:not(.lk-sticker) { width: 100%; }
@media (max-width: 360px) {
    .page-stream > .stream-item.lk-width-half { flex-basis: 100%; }
}

/* ---- Section titles between links (imported / creator-added headers) ---- */
.page-stream > .page-section {
    flex: 1 1 100%; width: 100%; min-width: 0;
    margin: 16px 2px 2px; padding: 0 2px 8px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: inherit;
    opacity: 0.66; border-bottom: 1px solid currentColor;
}
.page-stream > .page-section:first-child { margin-top: 2px; }

/* ---- Feature card: full-bleed background image with the title overlaid ---- */
.link-feature {
    position: relative; display: flex; align-items: flex-end; min-height: 152px;
    width: 100%; padding: 16px; border-radius: var(--radius); overflow: hidden;
    text-decoration: none; color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.14); transition: transform 0.12s ease;
}
/* No image yet: still unmistakably a cover, so choosing the style shows. */
.link-feature.no-img { background: linear-gradient(135deg, var(--accent), #ec4899); }
.link-feature-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.link-feature:hover { transform: scale(1.02); }
.link-feature-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.12) 100%);
}
.link-feature-body { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 100%; }
.link-feature-icon { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.link-feature-icon.emoji { display: inline-grid; place-items: center; font-size: 26px; border-radius: 0; background: none; }
.link-feature-title { font-weight: 700; font-size: 17px; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.lk-width-half .link-feature { min-height: 132px; }

/* How the creator framed their custom image — fill vs fit whole, zoom, and the
   focal point they dragged to. Defaults are a plain centred crop. */
.link-btn-icon > img,
.link-card-media img,
.link-feature-img {
    object-fit: var(--lk-fit, cover);
    object-position: var(--lk-pos, 50% 50%);
    transform: scale(var(--lk-zoom, 1));
    transform-origin: var(--lk-pos, 50% 50%);
}

/* ---- Per-link highlight animations (motion-safe) ---- */
@media (prefers-reduced-motion: no-preference) {
    .lk-anim-pulse  { animation: lkPulse 2.4s ease-in-out infinite; }
    .lk-anim-wiggle { animation: lkWiggle 3s ease-in-out infinite; }
    .lk-anim-bounce { animation: lkBounce 2.6s ease-in-out infinite; }
    .lk-anim-tada   { animation: lkTada 3.2s ease-in-out infinite; }
    .lk-anim-glow   { animation: lkGlow 2.2s ease-in-out infinite; }
    .lk-anim-shine  { position: relative; overflow: hidden; }
    .lk-anim-shine::after {
        content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
        transform: skewX(-18deg); animation: lkShine 3.4s ease-in-out infinite;
        pointer-events: none; z-index: 3;
    }
}
@keyframes lkPulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes lkWiggle { 0%, 92%, 100% { transform: rotate(0); } 94% { transform: rotate(-1.6deg); } 96% { transform: rotate(1.6deg); } 98% { transform: rotate(-1deg); } }
@keyframes lkBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes lkTada {
    0%, 100% { transform: scale(1) rotate(0); }
    12% { transform: scale(0.95) rotate(-2deg); }
    24%, 48%, 72% { transform: scale(1.05) rotate(-2deg); }
    36%, 60% { transform: scale(1.05) rotate(2deg); }
    84% { transform: scale(1) rotate(0); }
}
@keyframes lkGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(124, 92, 255, 0)); }
    50% { filter: drop-shadow(0 0 12px var(--accent)); }
}
@keyframes lkShine { 0% { left: -60%; } 60%, 100% { left: 130%; } }

/* ---- Colorful per-link stickers: a bright badge on the link's corner ---- */
.lk-sticker {
    position: absolute; top: 7px; right: 8px; z-index: 4;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px 3px 7px; border-radius: 999px;
    font-size: 10.5px; font-weight: 800; line-height: 1.35;
    letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
    white-space: nowrap; pointer-events: none;
    background: linear-gradient(135deg, #7c5cff, #4f46e5);
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transform: rotate(6deg); transform-origin: center;
}
.lk-sticker-emoji { font-size: 11px; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
    .lk-sticker { animation: lkStickerPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
    .lk-sticker-live { animation: lkStickerPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both, lkStickerLive 1.8s ease-in-out 0.6s infinite; }
}
@keyframes lkStickerPop { 0% { opacity: 0; transform: rotate(6deg) scale(0.4); } 100% { opacity: 1; transform: rotate(6deg) scale(1); } }
@keyframes lkStickerLive { 0%, 100% { transform: rotate(6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.09); } }
.lk-sticker-new     { background: linear-gradient(135deg, #34d399, #059669); }
.lk-sticker-hot     { background: linear-gradient(135deg, #fb923c, #ef4444); }
.lk-sticker-sale    { background: linear-gradient(135deg, #f472b6, #db2777); }
.lk-sticker-free    { background: linear-gradient(135deg, #2dd4bf, #0891b2); }
.lk-sticker-popular { background: linear-gradient(135deg, #f59e0b, #d97706); }
.lk-sticker-vip     { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.lk-sticker-live    { background: linear-gradient(135deg, #f87171, #dc2626); }
.lk-sticker-limited { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.lk-sticker-tap     { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.lk-sticker-top     { background: linear-gradient(135deg, #eab308, #b45309); }
.lk-sticker-deal    { background: linear-gradient(135deg, #10b981, #047857); }
.lk-sticker-love    { background: linear-gradient(135deg, #fb7185, #e11d48); }

/* ============================================================
   Free-floating page stickers (Instagram-story style)
   ============================================================ */
.sticker-layer {
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none; overflow: visible;
}
.psticker {
    position: absolute; top: 20%; left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1; user-select: none; -webkit-user-select: none;
    will-change: transform;
}
.pst-emoji { font-size: 44px; line-height: 1; display: block;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); }
/* 3D graphic sticker (Fluent Emoji PNG) used free-floating. */
.pst-img { width: 58px; height: 58px; object-fit: contain; display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); -webkit-user-drag: none; }
/* Animated sticker (Noto Animated Emoji WebP, loops on its own). */
.pst-anim { width: 58px; height: 58px; object-fit: contain; display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.32)); -webkit-user-drag: none; }
/* A label sticker (New/Hot/…) used free-floating: neutralise the corner-badge
   absolute positioning / tilt / entrance so the wrapper controls placement. */
.psticker .lk-sticker,
.psticker-pick .lk-sticker {
    position: static; top: auto; right: auto;
    transform: none; animation: none; font-size: 15px;
}

/* ---- Owner-only floating "Stickers" entry button ---- */
.psticker-fab {
    position: fixed; right: 14px; bottom: 78px; z-index: 55;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 16px; border-radius: 999px; text-decoration: none;
    font-size: 14px; font-weight: 700; color: #fff;
    background: linear-gradient(120deg, #7b61ff, #ec4899);
    box-shadow: 0 8px 22px rgba(123, 97, 255, 0.45);
    padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
}
.psticker-fab:hover { transform: translateY(-2px); }
.psticker-fab-label { line-height: 1; }

/* ---- Edit mode: the sticker studio ---- */
body.pst-editing .sticker-layer { pointer-events: auto; touch-action: pan-y; }
body.pst-editing .psticker { pointer-events: auto; cursor: grab; touch-action: none; }
body.pst-editing .psticker.is-dragging { cursor: grabbing; }
body.pst-editing .psticker.is-selected {
    outline: 2px dashed rgba(255, 255, 255, 0.9);
    outline-offset: 6px; border-radius: 8px;
}
/* Hide distractions while decorating. */
body.pst-editing .pf-topbar,
body.pst-editing .save-contact-fab,
body.pst-editing .tip-fab,
body.pst-editing .admirer-back { display: none !important; }

/* Placed GIF sticker (renders from GIPHY's CDN). */
.pst-gif {
    width: 96px; height: auto; max-height: 120px; display: block;
    object-fit: contain; border-radius: 10px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4)); -webkit-user-drag: none;
}

/* Desktop: dock the studio as a left sidebar and shift the page to the right. */
@media (min-width: 901px) {
    body.pst-editing { padding-left: 360px; }
}
/* Mobile: leave room so page content clears the minimised drawer. */
@media (max-width: 900px) {
    body.pst-editing { padding-bottom: 132px; }
}

.pst-studio {
    position: fixed; z-index: 60; display: flex; flex-direction: column;
    background: rgba(14, 12, 24, 0.97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    color: #fff;
}
@media (min-width: 901px) {
    .pst-studio {
        left: 0; top: 0; bottom: 0; width: 360px;
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.35);
    }
}
@media (max-width: 900px) {
    .pst-studio {
        left: 0; right: 0; bottom: 0; max-height: 62vh;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transition: transform 0.28s ease;
    }
    body.pst-drawer-min .pst-studio { transform: translateY(calc(100% - 120px)); }
}

.pst-studio-grip {
    display: none; width: 100%; height: 22px; border: 0; background: transparent;
    cursor: pointer; position: relative; flex: 0 0 auto;
}
@media (max-width: 900px) {
    .pst-studio-grip { display: block; }
    .pst-studio-grip::before {
        content: ""; position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
        width: 40px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.32);
    }
}

.pst-studio-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px 10px; flex: 0 0 auto;
}
@media (min-width: 901px) { .pst-studio-head { padding-top: 18px; } }
.pst-studio-title {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 800; letter-spacing: -0.01em;
}
.pst-studio-done {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px; text-decoration: none;
    font-size: 13px; font-weight: 700; color: #fff;
    background: linear-gradient(120deg, #7b61ff, #ec4899);
    box-shadow: 0 6px 16px rgba(123, 97, 255, 0.4);
}

.pst-tabs {
    display: flex; gap: 6px; padding: 0 12px 8px; flex: 0 0 auto;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pst-tabs::-webkit-scrollbar { display: none; }
.pst-tab {
    flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.72); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.pst-tab.is-active {
    background: linear-gradient(120deg, #7b61ff, #ec4899);
    color: #fff; border-color: transparent;
}

.pst-panels { flex: 1 1 auto; overflow-y: auto; padding: 4px 14px 12px; min-height: 0; }
.pst-panel { display: none; }
.pst-panel.is-active { display: block; }

.psticker-group { margin-bottom: 12px; }
.psticker-group-name {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.5);
    margin: 0 0 6px 2px; font-weight: 700;
}
.psticker-row {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px;
}
.psticker-pick {
    aspect-ratio: 1 / 1; width: 100%; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    transition: transform 0.12s ease, background 0.12s ease;
}
.psticker-pick:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); }
.psticker-pick .pst-emoji { font-size: 28px; filter: none; }
.psticker-pick .pst-img, .psticker-pick .pst-anim { width: 38px; height: 38px; filter: none; }

/* Labels: full-width pills, fully legible (no clipping). */
.psticker-row-labels { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.psticker-pick-label {
    aspect-ratio: auto; height: 44px; padding: 0 10px; justify-content: flex-start;
}
.psticker-pick-label .lk-sticker { font-size: 14px; }

/* GIF search tab. */
.pst-gif-search {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    padding: 0 12px; height: 42px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06);
}
.pst-gif-ico { flex: 0 0 auto; color: rgba(255, 255, 255, 0.5); }
.pst-gif-input {
    flex: 1; border: 0; background: transparent; color: #fff;
    font-size: 15px; outline: none; height: 100%;
}
.pst-gif-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.pst-gif-grid { columns: 2; column-gap: 8px; }
.pst-gif-grid[data-loading] { opacity: 0.5; }
.pst-gif-pick {
    display: block; width: 100%; height: auto; aspect-ratio: auto;
    margin: 0 0 8px; padding: 0; border-radius: 10px; overflow: hidden;
    break-inside: avoid; background: rgba(255, 255, 255, 0.05);
}
.pst-gif-thumb { display: block; width: 100%; height: auto; }
.pst-gif-empty { font-size: 13px; color: rgba(255, 255, 255, 0.55); padding: 14px 4px; text-align: center; }
.pst-gif-setup { padding: 10px 6px; font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.55; }
.pst-gif-setup-emoji { font-size: 30px; display: block; margin-bottom: 6px; }
.pst-gif-setup-title { font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 6px; }
.pst-gif-setup-sub { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.pst-gif-setup a { color: #b7a6ff; }
.pst-gif-setup code { background: rgba(255, 255, 255, 0.1); padding: 1px 6px; border-radius: 5px; font-size: 12px; }
.pst-gif-link {
    display: inline; padding: 0; border: 0; background: none; cursor: pointer;
    color: #b7a6ff; font: inherit; font-weight: 700; text-decoration: underline;
}

.psticker-credit {
    margin: 6px 2px 0; padding: 6px 2px 0; font-size: 10.5px;
    color: rgba(255, 255, 255, 0.42); border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.psticker-credit a { color: rgba(255, 255, 255, 0.62); }

.pst-studio-foot {
    display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
    padding: 8px 16px 12px; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.psticker-hint { font-size: 12px; color: rgba(255, 255, 255, 0.55); flex: 1; line-height: 1.4; }
.psticker-saved { font-size: 12px; font-weight: 700; min-width: 48px; text-align: right; }
.psticker-saved.is-saving { color: #f59e0b; }
.psticker-saved.is-ok { color: #34d399; }
.psticker-saved.is-fail { color: #f87171; }

/* Floating selection toolbar (follows the selected sticker). */
.psticker-tools {
    position: fixed; z-index: 62; display: flex; gap: 6px; padding: 6px;
    border-radius: 12px; background: rgba(20, 17, 32, 0.96);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.pst-tool {
    min-width: 38px; height: 36px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06); color: #fff;
    font-size: 17px; font-weight: 700; cursor: pointer;
}
.pst-tool:hover { background: rgba(255, 255, 255, 0.14); }
.pst-tool.ps-del { background: rgba(229, 72, 77, 0.2); border-color: rgba(229, 72, 77, 0.5); color: #ff8b8f; }

@media (prefers-reduced-motion: no-preference) {
    .psticker { animation: pstIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
}
@keyframes pstIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Faded avatar: melts a transparent PNG into the page background ---- */
.avatar-fade { line-height: 0; }
.avatar-fade img {
    width: 152px; height: 152px; border: 0; border-radius: 0; background: none;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.theme-light .avatar-fade img { border: 0; }
/* Faded avatar that's also a story launcher: drop the ring, keep it tappable. */
.avatar-story.avatar-fade { border-radius: 0; }
.avatar-story.avatar-fade .avatar-ring { background: none; padding: 0; }
.avatar-story.avatar-fade .avatar-ring img,
.theme-light .avatar-story.avatar-fade .avatar-ring img { border: 0; }

/* ---- Cover photo header: the profile photo as a full-width banner up top ---- */
.profile-cover {
    position: relative; width: 100vw; max-width: 100vw;
    margin-top: -56px; margin-bottom: 22px; line-height: 0;
}
.profile-cover-img { width: 100%; height: min(46vh, 420px); object-fit: cover; object-position: center 30%; display: block;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.profile-cover-scrim {
    position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.55) 100%);
}
@media (max-width: 640px) { .profile-cover-img { height: min(38vh, 320px); } }

/* ---- Multi-platform smart-link card ---- */
.smart-card {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px;
    border-radius: var(--radius); text-decoration: none; color: inherit;
    background: linear-gradient(120deg, rgba(124,92,255,0.22), rgba(236,72,153,0.18));
    border: 1px solid rgba(255,255,255,0.16); transition: transform 0.12s ease, filter 0.12s ease;
}
.smart-card:hover { transform: scale(1.02); filter: brightness(1.08); }
.smart-thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.smart-info { display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.smart-title { font-weight: 700; }
.smart-artist { font-size: 13px; opacity: 0.8; }
.smart-cta { font-size: 12px; font-weight: 700; opacity: 0.85; margin-top: 2px; }
.smart-platforms { display: flex; align-items: center; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.smart-plat { display: inline-flex; width: 18px; height: 18px; }
.smart-plat svg { width: 18px; height: 18px; }
.smart-plat-more { font-size: 11px; font-weight: 700; opacity: 0.7; }

/* ---- Smart-link landing page ---- */
.track-page .profile { position: relative; }
.track-close {
    position: absolute; top: 0; right: 0; z-index: 5;
    display: inline-grid; place-items: center; width: 38px; height: 38px;
    border-radius: 50%; text-decoration: none; font-size: 18px; line-height: 1;
    color: #fff; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18);
    transition: background 0.15s ease, transform 0.12s ease;
}
.track-close:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.05); }
.track-page .track-art {
    width: 200px; height: 200px; border-radius: 20px; background-size: cover; background-position: center;
    box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.track-platform { display: flex; align-items: center; justify-content: space-between; }
.track-go { opacity: 0.7; }
.track-ico { flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; }
.track-ico svg { width: 26px; height: 26px; }
.track-platform .link-btn-label { flex: 1; text-align: left; }

/* ---- Locked (tokenized) gallery items ---- */
.locked-gallery { width: 100%; margin-top: 8px; }
.locked-head { font-size: 16px; margin: 0 0 10px; }
.locked-item { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.locked-thumb { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 9 / 16; background: linear-gradient(160deg, #2b2b34, #14141b); }
.locked-thumb img { width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(0.6); transform: scale(1.1); }
.locked-thumb video { width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(0.6); transform: scale(1.1); }
.locked-veil { position: absolute; inset: 0; display: grid; place-items: center; }
.locked-ico { font-size: 28px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.locked-meta { display: flex; flex-direction: column; gap: 6px; }
.locked-cap { font-size: 13px; opacity: 0.85; }
.unlock-btn { width: 100%; }

/* ---- Reveal / Vegas jackpot celebration ---- */
.reveal-stage {
    position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(circle at center, rgba(60,30,120,0.9), rgba(0,0,0,0.94));
    opacity: 0; transition: opacity 0.3s ease;
}
.reveal-stage.jackpot { background: radial-gradient(circle at center, rgba(120,70,10,0.55), rgba(40,20,90,0.92) 55%, rgba(0,0,0,0.96)); }
.reveal-stage.jackpot::before {
    content: ""; position: absolute; inset: -25%;
    background: conic-gradient(from 0deg, rgba(255,210,90,0.12), transparent 25%, rgba(255,210,90,0.12) 50%, transparent 75%, rgba(255,210,90,0.12));
    animation: anim-spin 8s linear infinite;
}
.reveal-stage.playing { opacity: 1; }
.reveal-stage.out { opacity: 0; }
.reveal-box { position: relative; text-align: center; z-index: 2; }
.reveal-pack {
    font-size: 120px; display: inline-block; filter: drop-shadow(0 8px 30px rgba(255,200,80,0.6));
    animation: reveal-shake 0.45s ease 4, reveal-pop 0.7s ease 1.9s forwards;
}
@keyframes reveal-shake {
    0%,100% { transform: rotate(0) scale(1); }
    25% { transform: rotate(-14deg) scale(1.12); }
    75% { transform: rotate(14deg) scale(1.12); }
}
@keyframes reveal-pop {
    0% { transform: scale(1); opacity: 1; }
    55% { transform: scale(1.7); opacity: 1; }
    100% { transform: scale(2.6); opacity: 0; }
}
.reveal-title {
    font-size: clamp(40px, 11vw, 84px); font-weight: 900; letter-spacing: 0.02em; margin: 6px 0 0;
    background: linear-gradient(100deg, #ffe27a, #ffb01f 40%, #fff3b0 60%, #ffb01f);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 4px 26px rgba(255,180,30,0.45);
    animation: reveal-title-pop 0.5s cubic-bezier(.2,1.4,.4,1) 0.15s both, jackpot-shimmer 2.2s linear 0.6s infinite;
}
@keyframes reveal-title-pop { from { opacity: 0; transform: scale(0.5) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes jackpot-shimmer { to { background-position: 220% 0; } }

/* Tier-coloured celebration variants */
.reveal-stage.reveal-gold { background: radial-gradient(circle at center, rgba(245,179,1,0.4), rgba(40,20,90,0.92) 55%, rgba(0,0,0,0.96)); }
.reveal-stage.reveal-platinum { background: radial-gradient(circle at center, rgba(124,92,255,0.4), rgba(20,12,60,0.92) 55%, rgba(0,0,0,0.96)); }
.reveal-stage.reveal-platinum::before {
    background: conic-gradient(from 0deg, rgba(245,158,11,0.16), rgba(236,72,153,0.16) 25%, rgba(124,92,255,0.16) 50%, rgba(34,211,238,0.16) 75%, rgba(245,158,11,0.16));
}
.reveal-platinum .reveal-pack { filter: drop-shadow(0 8px 30px rgba(124,92,255,0.7)); }
.reveal-platinum .reveal-title {
    background: linear-gradient(100deg, #f59e0b, #ec4899 33%, #7c5cff 66%, #22d3ee);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 4px 26px rgba(124,92,255,0.5);
}
.reveal-platinum .reveal-msg { text-shadow: 0 2px 16px rgba(124,92,255,0.8); }
.reveal-msg {
    color: #fff; font-size: clamp(18px, 4.5vw, 30px); font-weight: 800; margin-top: 10px;
    opacity: 0; animation: reveal-msg 0.6s ease 0.5s forwards;
    text-shadow: 0 2px 16px rgba(124,92,255,0.8);
}
@keyframes reveal-msg { to { opacity: 1; transform: translateY(-4px); } }
.reveal-burst, .reveal-coins { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.confetti {
    position: absolute; top: -6%; width: 11px; height: 16px; border-radius: 2px;
    animation: confetti-fall 2s ease-out forwards;
}
@keyframes confetti-fall {
    0% { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(108vh) rotate(720deg); opacity: 0; }
}
.coin {
    position: absolute; top: -8%; line-height: 1;
    animation: coin-drop 2s ease-in forwards;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
@keyframes coin-drop {
    0% { transform: translateY(-10vh) rotateY(0deg) scale(0.9); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translateY(112vh) rotateY(1080deg) scale(1.1); opacity: 0.9; }
}
.gallery-item.just-revealed { animation: just-revealed 1.6s ease; }
@keyframes just-revealed {
    0% { box-shadow: 0 0 0 0 rgba(255,200,80,0); }
    20% { box-shadow: 0 0 0 8px rgba(255,200,80,0.85); }
    100% { box-shadow: 0 0 0 0 rgba(255,200,80,0); }
}
@media (prefers-reduced-motion: reduce) {
    .reveal-pack, .reveal-msg, .reveal-title, .confetti, .coin,
    .reveal-stage.jackpot::before, .gallery-item.just-revealed { animation: none !important; }
}

/* ---- Subscriber feed ---- */
/* ============================================================
   App shell — left sidebar used by the Admirer view, matching the
   creator dashboard & God Mode (logo + grouped nav). Lives here so the
   admirer pages (on style.css) share the exact same chrome.
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }
.app-side {
    flex: 0 0 220px; width: 220px; align-self: stretch;
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: rgba(12, 12, 20, 0.72); backdrop-filter: blur(20px) saturate(160%);
    border-right: 1px solid rgba(255,255,255,0.1);
}
.app-brand { font-weight: 700; color: #fff; text-decoration: none; font-size: 17px; display: inline-flex; align-items: center; gap: 9px; padding: 4px 8px 12px; }
.app-brand::before {
    content: ""; width: 22px; height: 22px; border-radius: 7px; flex: none;
    background: linear-gradient(120deg, var(--accent), #ec4899); box-shadow: 0 3px 10px rgba(124, 92, 255, 0.5);
}
.app-pill {
    align-self: flex-start; margin: 0 0 4px 8px;
    display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800;
    letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: #fff;
    background: linear-gradient(120deg, rgba(34,211,238,0.26), rgba(168,85,247,0.26));
    border: 1px dashed rgba(255,255,255,0.4);
}
.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav-group { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); padding: 12px 10px 4px; }
.app-nav a {
    color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px; font-weight: 500;
    padding: 9px 11px; border-radius: 10px; transition: background 0.15s ease, color 0.15s ease;
    display: flex; align-items: center; gap: 10px;
}
.app-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.app-nav a.active { color: #fff; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.app-nav-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 2px; }
.app-nav .logout { color: #ff9a9a; }
.app-nav-email {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: rgba(255,255,255,0.55); padding: 4px 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-nav-email svg { color: var(--accent); flex: none; }
.app-nav .switch-link { color: var(--accent); }
/* Dashboard switcher — full-width rows to move between Creator / Admirer /
   Account dashboards, with the current one highlighted. Sits at the top of the
   nav (right under the section pill); a divider separates it from the nav. */
.dash-switch { margin: 2px 0 6px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.dash-switch-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 2px 7px; }
.dash-switch-grid { display: flex; flex-direction: column; gap: 6px; }
.app-nav .dash-switch-btn { display: flex; flex-direction: row; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 10px; text-decoration: none; font-size: 13px; font-weight: 600;
    color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.app-nav .dash-switch-btn:hover { color: #fff; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.28); }
.app-nav .dash-switch-btn .dsb-ico { display: inline-flex; flex: none; }
.app-nav .dash-switch-btn .dsb-label { color: inherit; }
.app-nav .dash-switch-btn.is-current,
.app-nav .dash-switch-btn.is-current:hover { color: #fff; background: linear-gradient(120deg, var(--accent), #ec4899);
    border-color: transparent; box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.nav-avatar { flex: none; border-radius: 50%; object-fit: cover; display: inline-block;
    border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.nav-avatar.fallback { display: inline-grid; place-items: center; color: #fff; font-weight: 700;
    font-size: 11px; line-height: 1; background: linear-gradient(135deg, var(--accent), #ec4899); border-color: transparent; }
.app-nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; margin-left: auto; }
.app-work { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) {
    .app-shell { flex-direction: column; }
    .app-side { flex: none; width: 100%; height: auto; position: sticky; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; }
    .app-brand { padding: 0; }
    .app-pill { margin: 0; }
    .app-nav-toggle { display: block; }
    .app-nav { display: none; flex-basis: 100%; }
    body.nav-open .app-nav { display: flex; }
    .app-nav-foot { margin-top: 6px; }
    /* Comfortable touch rows in the mobile menu. */
    .app-nav a, .app-nav .dash-switch-btn { min-height: 44px; }
    /* The bar is sticky, so an open menu taller than the screen would pin at
       top:0 with its lower half off-screen and no way to scroll to it (the
       page scrolls, the pinned bar doesn't). Cap it to the viewport height and
       let the menu scroll inside itself instead. */
    body.nav-open .app-side {
        max-height: 100vh;
        max-height: 100dvh;   /* excludes mobile browser chrome where supported */
        overflow-y: auto;
        overscroll-behavior: contain; /* don't scroll the page behind at the ends */
        -webkit-overflow-scrolling: touch;
    }
}

body.feed-page { padding: 0; }
.feed-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.1);
    position: sticky; top: 0; backdrop-filter: blur(12px); background: rgba(10,10,18,0.6); z-index: 5;
}
.feed-brand { font-weight: 700; color: #fff; text-decoration: none; }
.feed-who { font-size: 13px; opacity: 0.8; }
.feed-who a { color: var(--accent); }
.feed-main { max-width: 560px; margin: 0 auto; padding: 24px 16px 64px; }
.feed-auth, .feed-head { text-align: center; margin-bottom: 20px; }
.feed-auth h1, .feed-head h1 { margin: 0 0 6px; }
.feed-auth form { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 14px auto 0; }
.feed-auth input { padding: 13px 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.3); color: inherit; }
.feed-empty { text-align: center; padding: 40px 16px; opacity: 0.85; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.feed-list { display: flex; flex-direction: column; gap: 18px; }
.feed-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); overflow: hidden; }
.feed-card-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.feed-author { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.feed-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.feed-avatar.fallback { display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; }
.feed-author-name { font-weight: 600; }
.tier-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: linear-gradient(120deg, var(--accent), #ec4899); color: #fff; }
.feed-photo { width: 100%; display: block; }
.feed-caption { margin: 0; padding: 12px 14px 0; }
.feed-time { display: block; padding: 8px 14px 14px; font-size: 12px; opacity: 0.6; }

/* ---- Standalone Account page (its own left-sidebar chrome) ---- */
body.account-page { padding: 0; }
.account-main { max-width: 560px; margin: 0 auto; padding: 26px 16px 72px; }

/* ---- Account page sections (earnings, payouts, membership) ---- */
.account-main .store-head { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; margin: 32px 0 4px; }
.account-main .store-head .ico { color: var(--accent); }
.account-main .section-intro { opacity: 0.7; font-size: 13px; margin: 0 0 6px; }
.account-main .card {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px; padding: 18px; margin-top: 14px;
}
.account-main .card > label { display: block; font-size: 13px; font-weight: 600; opacity: 0.9; margin-bottom: 15px; }
.account-main .card > label:last-of-type { margin-bottom: 0; }
.account-main .card label input[type="text"],
.account-main .card label select {
    width: 100%; margin-top: 7px; padding: 12px 14px; border-radius: 10px; font-size: 15px;
    border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.28); color: inherit;
}
.account-main .card label .hint { display: block; font-weight: 400; opacity: 0.6; margin-top: 6px; }
.account-main .check { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; margin-bottom: 14px; }
.account-main .check:last-of-type { margin-bottom: 16px; }
.account-main .check input { width: auto; margin: 0; accent-color: var(--accent); }
.account-main .card .btn { margin-top: 4px; }
.account-main .deposit-form { width: 100%; margin: 0; }
.account-main .cashout-card .deposit-amount { margin-bottom: 14px; }
.account-main .deposit-amount {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px;
    background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.16);
}

/* ---- Embedded Square card field ---- */
.account-main .sq-card {
    margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px;
    background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.16); min-height: 52px;
}
.account-main .sq-card-msg { margin: 0 0 12px; }
.account-main .linklike {
    background: none; border: 0; padding: 0; font: inherit; color: var(--accent, #7c5cff);
    cursor: pointer; text-decoration: underline;
}
html.dash-light .account-main .sq-card { background: #f3f4fa; border-color: rgba(20,22,50,0.14); }

/* ---- Payment-method picker (Subscription): matches the /checkout options ---- */
.account-main .pay-methods-intro { margin: 26px 0 10px; }
.account-main .pay-acc {
    border: 1.5px solid rgba(20,22,50,0.12); border-radius: 14px; margin: 0 0 12px; background: #fff; overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-main .pay-acc:hover { border-color: color-mix(in srgb, var(--accent) 45%, rgba(20,22,50,0.14)); }
.account-main .pay-acc[open] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.account-main .pay-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 15px 18px; }
.account-main .pay-acc > summary::-webkit-details-marker { display: none; }
.account-main .pay-opt-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.account-main .pay-opt-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; }
.account-main .pay-opt-title .ico { color: var(--accent); flex: none; }
.account-main .pay-opt-desc { font-size: 12.5px; opacity: 0.62; }
.account-main .pay-opt-side { display: flex; align-items: center; gap: 9px; flex: none; }
.account-main .pay-opt-logos { display: flex; align-items: center; gap: 5px; }
.account-main .pay-opt-logos img { height: 22px; width: auto; border-radius: 4px; box-shadow: 0 1px 3px rgba(20,22,50,0.16); }
.account-main .pay-opt-logos .pay-opt-coin { width: 22px; height: 22px; border-radius: 50%; box-shadow: none; }
.account-main .pay-acc-status { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(20,22,50,0.07); opacity: 0.8; white-space: nowrap; }
.account-main .pay-acc-status.on { background: rgba(22,163,74,0.15); color: #15803d; opacity: 1; }
.account-main .pay-acc > summary::after { content: ''; width: 8px; height: 8px; flex: none; margin-left: 2px; opacity: 0.4;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; }
.account-main .pay-acc[open] > summary::after { transform: rotate(-135deg); }
.account-main .pay-acc-body { padding: 16px 18px 18px; border-top: 1px solid rgba(20,22,50,0.10); }
.account-main .pay-acc-body > label { display: block; font-size: 13px; font-weight: 600; opacity: 0.9; margin-bottom: 15px; }
.account-main .pay-acc-body label input[type="text"] {
    width: 100%; margin-top: 7px; padding: 12px 14px; border-radius: 10px; font-size: 15px;
    border: 1px solid rgba(20,22,50,0.16); background: #fff; color: inherit;
}
.account-main .pay-acc-body .hint { display: block; font-weight: 400; opacity: 0.6; margin-top: 6px; }
.account-main .pay-acc-body .wallet-help { margin-top: 6px; }
.account-main .pay-acc-body .badge.is-green { background: rgba(22,163,74,0.15); color: #15803d; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
@media (max-width: 620px) { .account-main .pay-opt-logos { display: none; } }

/* ---- Plan-tab yearly savings (checkout-style) ---- */
.account-main .tier-save { display: inline-flex; align-items: center; gap: 3px; color: #16a34a; font-weight: 700; }
.account-main .tier-save-pill { display: inline-flex; align-items: center; gap: 5px; margin: -2px 0 4px; padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 800; color: #0b3d2c; background: linear-gradient(120deg, #4ade80, #22c55e); box-shadow: 0 6px 16px rgba(34,197,94,0.32); }
.account-main .btn-save { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #0b3d2c; background: linear-gradient(120deg, #4ade80, #22c55e); }

/* ---- Plan status hero (current tier + expiry, big & obvious) ---- */
.account-main .plan-status-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    margin: 0 0 18px; padding: 20px 22px; border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, rgba(20,22,50,0.10));
    background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, #fff), color-mix(in srgb, var(--accent) 4%, #fff)); }
.account-main .plan-status-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; letter-spacing: 0.01em; opacity: 0.85; }
.account-main .plan-status-until { margin: 8px 0 2px; font-size: 30px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.account-main .plan-status-sub { margin: 0; font-size: 13.5px; font-weight: 600; opacity: 0.7; }
.account-main .plan-status-hero-cta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 200px; }
.account-main .plan-status-hero-cta .btn { text-align: center; white-space: nowrap; }
.account-main .plan-status-alt { background: rgba(20,22,50,0.05); border-color: rgba(20,22,50,0.14); color: inherit; font-size: 12.5px; padding: 9px 16px; }
.account-main .plan-autorenew-hint { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 15px; border-radius: 14px; font-size: 13.5px; line-height: 1.45;
    background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.account-main .plan-autorenew-hint .ico, .account-main .plan-autorenew-hint svg { flex: none; margin-top: 1px; opacity: 0.85; }
@media (max-width: 560px) {
    .account-main .plan-status-hero-cta { min-width: 100%; }
    .account-main .plan-status-until { font-size: 25px; }
}

/* ---- Pending referral bonus banner ---- */
.account-main .ref-pending-banner {
    display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 16px;
    border-radius: 14px; border: 1px solid rgba(201,162,60,0.45);
    background: linear-gradient(120deg, rgba(201,162,60,0.16), rgba(124,92,255,0.12));
}
.account-main .ref-pending-ico {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(201,162,60,0.22); color: #e6c057;
}
.account-main .ref-pending-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; }
.account-main .ref-pending-body strong { display: block; margin-bottom: 2px; }
.account-main .ref-pending-body span { color: var(--muted, #9aa6b8); }
.account-main .ref-pending-banner .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
    .account-main .ref-pending-banner { flex-wrap: wrap; }
    .account-main .ref-pending-banner .btn { width: 100%; justify-content: center; }
}

/* ---- Email notification preferences ---- */
.account-main .notif-group {
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    opacity: 0.55; margin: 20px 0 4px;
}
.account-main .notif-card .notif-group:first-of-type { margin-top: 2px; }
.account-main .notif-card .notif-row {
    display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 13px 0; cursor: pointer;
    font-weight: 400; border-top: 1px solid rgba(255,255,255,0.08);
}
.account-main .notif-card .notif-group + .notif-row { border-top: 0; }
.account-main .notif-card .notif-row input[type="checkbox"] {
    width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); cursor: pointer;
}
.account-main .notif-text { display: flex; flex-direction: column; gap: 2px; }
.account-main .notif-label { font-size: 14px; font-weight: 600; opacity: 0.95; }
.account-main .notif-card .notif-row .hint { display: block; font-weight: 400; opacity: 0.6; font-size: 13px; margin: 0; }
.account-main .notif-card .form-save { margin-top: 20px; }

/* Membership tier cards */
.account-main .tier-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0 16px; }
.account-main .tier-card {
    display: flex; flex-direction: column; gap: 5px; padding: 18px; border-radius: 16px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13);
}
.account-main .tier-card.tier-gold { border-color: rgba(245,179,1,0.4); background: linear-gradient(155deg, rgba(245,179,1,0.12), rgba(255,255,255,0.03)); }
.account-main .tier-card.tier-platinum { border-color: rgba(124,92,255,0.5); background: linear-gradient(150deg, rgba(245,158,11,0.10), rgba(236,72,153,0.10) 35%, rgba(124,92,255,0.10) 68%, rgba(34,211,238,0.13)); }
.account-main .tier-card.is-current { box-shadow: 0 0 0 2px var(--accent) inset; }
.account-main .tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account-main .tier-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 16px; }
.account-main .tier-current-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #fff; }
.account-main .tier-price { font-size: 26px; font-weight: 800; margin: 2px 0; display: flex; align-items: baseline; gap: 4px; }
.account-main .tier-price span { font-size: 14px; font-weight: 600; opacity: 0.6; }
.account-main .tier-tbd { font-size: 16px; font-weight: 700; opacity: 0.7; }
.account-main .tier-yearly { margin: 0; }
.account-main .tier-tagline { opacity: 0.75; font-size: 13px; margin: 2px 0 8px; }
.account-main .tier-perks { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.account-main .tier-perks li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.account-main .tier-perks li .ico { color: #4ade80; flex: none; }
.account-main .tier-perk-meta { opacity: 0.85; }
.account-main .tier-buy, .account-main .tier-buy-options { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.account-main .tier-buy { margin-top: 0; }
.account-main .tier-buy .muted { margin: 0 0 2px; }
.account-main .tier-card .btn { width: 100%; }

/* Membership status + settings card */
.account-main .pro-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; padding: 18px; margin-top: 4px; }
.account-main .pro-card.is-pro { border-color: color-mix(in srgb, var(--accent) 45%, rgba(255,255,255,0.12)); }
.account-main .pro-status { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.account-main .pro-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,0.08); }
.account-main .pro-badge.on { background: linear-gradient(120deg, var(--accent), #ec4899); color: #fff; }
.account-main .pro-settings { display: flex; flex-direction: column; gap: 12px; margin: 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 14px; }
.account-main .pro-settings .check { margin-bottom: 0; }
/* Consistent breathing room above a card's primary save button. */
.account-main .card .form-save { margin-top: 20px; }
.account-main .deposit-amount + .form-save { margin-top: 18px; }
.account-main .tier-need-funds { margin: 6px 0 0; display: flex; align-items: center; gap: 5px; }
.account-main .tier-need-funds a { color: var(--accent); }

/* ---- Account profile-customization tab (ported from the creator dashboard) ---- */
.account-main .avatar-row { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.account-main .avatar-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.14); flex: none; }
.account-main .avatar-preview.placeholder { display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #ec4899); color: #fff; font-size: 28px; font-weight: 700; }
.account-main .grow { flex: 1 1 auto; }
.account-main .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .account-main .grid-2 { grid-template-columns: 1fr; } }
.account-main .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; margin-top: 6px; }
.account-main .vbg-cat { margin: 16px 0 2px; font-size: 13px; font-weight: 700; opacity: 0.72; letter-spacing: 0.01em; }
.account-main .vbg-cat:first-of-type { margin-top: 8px; }
.account-main .theme-swatch { position: relative; display: block; cursor: pointer; border-radius: 14px; padding: 6px; border: 1px solid rgba(255,255,255,0.14); transition: border-color 0.15s ease, transform 0.1s ease; }
.account-main .theme-swatch:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.28); }
.account-main .theme-swatch.is-selected,
.account-main .theme-swatch:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.account-main .theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }.account-main .theme-thumb { display: block; height: 64px; border-radius: 10px; background-attachment: initial !important; }
.account-main .theme-name { display: block; font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 7px; text-align: center; }
.account-main .pub-thumb-dark { background: #0e0e12; }
.account-main .pub-thumb-light { background: #f6f6f9; }
.account-main .pub-thumb-mono { background: #111; }
.account-main .pub-thumb-sunset { background: linear-gradient(160deg, #2b1055, #7597de); }
.account-main .pub-thumb-violet { background: radial-gradient(120px 80px at 100% 0%, rgba(124,92,255,0.7), transparent 60%), linear-gradient(180deg, #0c0c11, #14111d); }
.account-main .pub-thumb-ocean { background: radial-gradient(120px 80px at 100% 0%, rgba(14,165,233,0.7), transparent 60%), linear-gradient(180deg, #07101a, #0b1824); }
.account-main .pub-thumb-emerald { background: radial-gradient(120px 80px at 100% 0%, rgba(16,185,129,0.7), transparent 60%), linear-gradient(180deg, #08130f, #0c1c16); }
.account-main .pub-thumb-rose { background: radial-gradient(120px 80px at 100% 0%, rgba(244,63,94,0.7), transparent 60%), linear-gradient(180deg, #150a0e, #1e1014); }
.account-main .pub-thumb-midnight { background: radial-gradient(120px 80px at 100% 0%, rgba(99,102,241,0.6), transparent 60%), linear-gradient(180deg, #0a0a0f, #101019); }
.account-main .pub-thumb-aurora { background: radial-gradient(80px 60px at 0% 0%, rgba(56,189,248,0.7), transparent 60%), radial-gradient(80px 60px at 100% 0%, rgba(168,85,247,0.7), transparent 60%), linear-gradient(180deg, #080b14, #0d1320); }
.account-main .anim-thumb-none { background: repeating-linear-gradient(45deg, #2a2a33 0 8px, #1c1c24 8px 16px); }
.account-main .anim-thumb-aurora { background: linear-gradient(120deg, #38bdf8, #a855f7, #10b981, #38bdf8); }
.account-main .anim-thumb-space { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 70%, #fff, transparent), radial-gradient(1px 1px at 80% 20%, #fff, transparent), linear-gradient(180deg, #05010f, #0b0524); }
.account-main .anim-thumb-sunset { background: linear-gradient(160deg, #f59e0b, #ec4899, #7c3aed); }
.account-main .anim-thumb-ocean { background: linear-gradient(180deg, #0ea5e9, #0369a1, #22d3ee); }
.account-main .anim-thumb-nightclub { background: linear-gradient(120deg, #ec4899, #8b5cf6, #06b6d4, #ec4899); }
.account-main .anim-thumb-neon { background: linear-gradient(120deg, #ff00e5, #00e5ff, #ff00e5); }
.account-main .anim-thumb-mesh { background: radial-gradient(60px 60px at 20% 20%, #f43f5e, transparent 60%), radial-gradient(60px 60px at 80% 30%, #8b5cf6, transparent 60%), radial-gradient(60px 60px at 50% 80%, #10b981, transparent 60%), #0d1320; }
.account-main .anim-thumb-bubbles { background: radial-gradient(circle at 25% 70%, rgba(56,189,248,.8) 0 7px, transparent 8px), radial-gradient(circle at 60% 40%, rgba(236,72,153,.8) 0 5px, transparent 6px), radial-gradient(circle at 80% 75%, rgba(255,255,255,.6) 0 6px, transparent 7px), linear-gradient(180deg, #0b1437, #1a1140); }
.account-main .anim-thumb-matrix { background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(60,255,120,.7) 10px 12px, transparent 12px 22px), #020a02; }
.account-main .anim-thumb-confetti { background: radial-gradient(circle at 20% 30%, #f43f5e 0 3px, transparent 4px), radial-gradient(circle at 55% 60%, #38bdf8 0 3px, transparent 4px), radial-gradient(circle at 75% 25%, #f59e0b 0 3px, transparent 4px), radial-gradient(circle at 40% 80%, #10b981 0 3px, transparent 4px), linear-gradient(180deg, #10142b, #1b1030); }
.account-main .anim-thumb-racing { background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,60,80,.8) 10px 13px, transparent 13px 26px), repeating-linear-gradient(90deg, transparent 0 18px, rgba(60,200,255,.7) 18px 21px, transparent 21px 40px), radial-gradient(circle at 50% 120%, #2a1240, #0a0a12 70%); }
.account-main .anim-thumb-stadium { background: radial-gradient(40% 60% at 20% 0%, rgba(255,255,225,.5), transparent 60%), radial-gradient(40% 60% at 80% 0%, rgba(255,255,225,.45), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 12px, transparent 12px 24px), linear-gradient(180deg, #0b2a16, #07160d); }
.account-main .anim-thumb-anime { background: radial-gradient(circle at 25% 30%, #ff8cbf 0 4px, transparent 5px), radial-gradient(circle at 65% 55%, #fff 0 3px, transparent 4px), radial-gradient(circle at 80% 25%, #ffb3d9 0 4px, transparent 5px), linear-gradient(180deg, #6db3ff, #ffb3d9); }
.account-main .anim-thumb-runway { background: conic-gradient(from 200deg at 50% 0%, transparent 0 42%, rgba(255,225,190,.6) 50%, transparent 58%), linear-gradient(160deg, #2b1b24, #c79a6a); }
.account-main .anim-thumb-equalizer { background: repeating-radial-gradient(circle at 50% 100%, transparent 0 8px, rgba(168,85,247,.6) 8px 11px, transparent 11px 20px), linear-gradient(180deg, #1a0b2e, #3b1060); }
.account-main .bg-preview-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.account-main .bg-preview { width: 120px; height: 80px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.3) center/cover no-repeat; display: grid; place-items: center; flex: 0 0 auto; }
/* Page-background drag & drop dropzone */
.account-main .bg-dropzone { position: relative; display: grid; place-items: center; width: 100%; min-height: 180px;
    border: 1.5px dashed rgba(255,255,255,0.22); border-radius: 16px; background: rgba(0,0,0,0.28);
    cursor: pointer; overflow: hidden; transition: border-color 0.15s ease, background 0.15s ease; }
.account-main .bg-dropzone:hover, .account-main .bg-dropzone.is-drag { border-color: var(--accent); background: rgba(255,255,255,0.05); }
.account-main .bg-dropzone.is-drag { border-style: solid; }
.account-main .bg-dropzone.has-image { border-style: solid; border-color: rgba(255,255,255,0.14); }
.account-main .bg-dropzone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.account-main .bg-dropzone-preview { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.account-main .bg-dropzone-placeholder { display: flex; flex-direction: column; align-items: center; gap: 7px;
    color: rgba(255,255,255,0.7); font-size: 13px; text-align: center; line-height: 1.35; pointer-events: none; padding: 24px; }
.account-main .bg-dropzone-placeholder .bg-dz-ico { color: var(--accent); }
.account-main .bg-dropzone-placeholder .hint { font-size: 11px; }
.account-main .bg-dropzone-uploading { position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(0,0,0,0.55); color: #fff; font-weight: 700; font-size: 14px; }
.account-main .bg-dropzone-uploading[hidden], .account-main .bg-dropzone-placeholder[hidden] { display: none; }
.account-main .card label input[type="color"] { width: 56px; height: 36px; padding: 2px; border-radius: 8px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.18); cursor: pointer; }
.account-main .card label input[type="file"] { margin-top: 7px; font-size: 13px; }
.account-main .card label textarea { width: 100%; margin-top: 7px; padding: 12px 14px; border-radius: 10px; font-size: 15px;
    border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.28); color: inherit; font-family: inherit; resize: vertical; }

/* ---- Appearance (dashboard light/dark) tab ---- */
.account-main .appearance-options { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.account-main .appearance-opt { flex: 1 1 160px; cursor: pointer; border-radius: 14px; padding: 14px; border: 1px solid rgba(255,255,255,0.14);
    display: flex; align-items: center; gap: 10px; font-weight: 600; transition: border-color 0.15s ease; }
.account-main .appearance-opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.account-main .appearance-opt input { position: absolute; opacity: 0; pointer-events: none; }
.account-main .appearance-swatch { width: 38px; height: 38px; border-radius: 9px; flex: none; border: 1px solid rgba(255,255,255,0.18); }

/* ---- Public page style: controls + live phone preview (creator-style) ---- */
.account-main-wide { max-width: 1240px; }
.account-main .pagestyle-form { display: grid; grid-template-columns: minmax(0, 1fr) 414px; gap: 24px; align-items: start; }
.account-main .pagestyle-fields { min-width: 0; }
.account-main .pagestyle-preview { position: sticky; top: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.account-main .pagestyle-preview .preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 390px; max-width: 100%; font-size: 13px; color: rgba(255,255,255,0.5); }
.account-main .pagestyle-preview .phone-frame { width: 390px; max-width: 100%; height: min(800px, calc(100vh - 120px)); border-radius: 38px; padding: 12px;
    background: #0b0a12; border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 20px 55px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.04); }
.account-main .pagestyle-preview .phone-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 27px; background: #11101a; }
.account-main .pagestyle-preview .preview-open { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600;
    color: var(--accent); text-decoration: none; }
.account-main .pagestyle-autosave { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13px; color: rgba(255,255,255,0.6); }
.account-main .pagestyle-autosave .autosave-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); flex: none; transition: background 0.2s ease; }
.account-main .pagestyle-autosave[data-state="saving"] .autosave-dot { background: #f5b301; animation: autosave-pulse 0.9s ease-in-out infinite; }
.account-main .pagestyle-autosave[data-state="saved"] { color: #34d399; }
.account-main .pagestyle-autosave[data-state="saved"] .autosave-dot { background: #34d399; }
.account-main .pagestyle-autosave[data-state="error"] { color: #f87171; }
.account-main .pagestyle-autosave[data-state="error"] .autosave-dot { background: #f87171; }
@keyframes autosave-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@media (max-width: 860px) {
    .account-main .pagestyle-form { grid-template-columns: 1fr; }
    .account-main .pagestyle-preview { position: static; order: -1; }
}
.account-main .appearance-swatch.dark { background: linear-gradient(135deg, #0c0c11, #1a1922); }
.account-main .appearance-swatch.light { background: linear-gradient(135deg, #f3f3fb, #d9d9ec); }

/* ---- Light dashboard theme for the admirer + account shells ---- */
html.dash-light body.account-page,
html.dash-light body.feed-page {
    background: linear-gradient(180deg, #f6f7fb, #eef0f7) fixed;
    color: #1c1b2e;
}
html.dash-light body.account-page .app-side,
html.dash-light body.feed-page .app-side {
    background: rgba(255,255,255,0.82); border-right: 1px solid rgba(20,22,50,0.1);
}
html.dash-light .app-brand { color: #1c1b2e; }
html.dash-light .app-nav-toggle { color: #1c1b2e; }
/* Active nav + section pill: in light mode a 30% accent tint with white text
   washes out, so use accent-colored text on a soft accent wash instead. */
html.dash-light .app-nav a.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
html.dash-light .app-pill { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
html.dash-light .app-nav a { color: rgba(28,27,46,0.72); }
html.dash-light .app-nav a:hover { color: #1c1b2e; background: rgba(20,22,50,0.05); }
html.dash-light .app-nav-group { color: rgba(28,27,46,0.5); }
html.dash-light .app-nav-email { color: rgba(28,27,46,0.6); }
html.dash-light .app-nav-foot { border-top-color: rgba(20,22,50,0.1); }
html.dash-light .dash-switch { border-bottom-color: rgba(20,22,50,0.1); }
html.dash-light .account-main .card,
html.dash-light .account-main .tier-card,
html.dash-light .account-main .pro-card {
    background: #fff; border-color: rgba(20,22,50,0.1); box-shadow: 0 1px 3px rgba(20,22,50,0.06);
}
html.dash-light .account-main .wallet-balance { background: linear-gradient(135deg, rgba(124,92,255,0.12), rgba(236,72,153,0.1)); border-color: rgba(20,22,50,0.1); }
html.dash-light .account-main .deposit-amount { background: #f3f4fa; border-color: rgba(20,22,50,0.14); }
html.dash-light .account-main .card label input[type="text"],
html.dash-light .account-main .card label input[type="number"],
html.dash-light .account-main .card label textarea,
html.dash-light .account-main .card label select,
html.dash-light .account-main .deposit-amount input,
html.dash-light .account-main .wallet-redeem input { background: #fff; color: #1c1b2e; border-color: rgba(20,22,50,0.16); }
html.dash-light .account-main .muted,
html.dash-light .account-main .section-intro,
html.dash-light .account-main .hint { color: rgba(28,27,46,0.6); }
html.dash-light .account-main .store-head,
html.dash-light .account-main .feed-head h1 { color: #1c1b2e; }
html.dash-light .account-main .wallet-history li { border-bottom-color: rgba(20,22,50,0.08); }
html.dash-light .account-main .notif-card .notif-row { border-top-color: rgba(20,22,50,0.09); }
html.dash-light .account-main .wh-delta.plus { color: #1a8a4f; }
html.dash-light .account-main .wh-delta.minus { color: #c92a2a; }
html.dash-light .account-main .creator-row { background: #fff; border-color: rgba(20,22,50,0.1); }
html.dash-light .feed-main .feed-card { background: #fff; border-color: rgba(20,22,50,0.1); }
html.dash-light .feed-main .story-cap,
html.dash-light .feed-main .feed-head h1,
html.dash-light .feed-main .muted { color: #1c1b2e; }
html.dash-light .app-nav .switch-link,
html.dash-light .app-nav .logout { color: var(--accent); }
html.dash-light .app-nav .logout { color: #d6336c; }
html.dash-light .dash-switch-label { color: rgba(28,27,46,0.55); }
html.dash-light .app-nav .dash-switch-btn { color: #1c1b2e; background: #eef0f7; border-color: rgba(20,22,50,0.16); }
html.dash-light .app-nav .dash-switch-btn:hover { color: #1c1b2e; background: #e6e9f3; border-color: rgba(20,22,50,0.28); }
html.dash-light .app-nav .dash-switch-btn.is-current,
html.dash-light .app-nav .dash-switch-btn.is-current:hover { color: #fff; background: linear-gradient(120deg, var(--accent), #ec4899); border-color: transparent; }
/* Buttons in the light account/admirer dashboards: solid, readable. The
   primary keeps its accent gradient; danger gets a readable red. */
html.dash-light body.account-page .btn:not(.primary),
html.dash-light body.feed-page .btn:not(.primary) {
    background: #fff; border-color: rgba(20,22,50,0.16); color: #1c1b2e;
    box-shadow: 0 1px 2px rgba(30,30,70,0.08);
}
html.dash-light body.account-page .btn:not(.primary):hover,
html.dash-light body.feed-page .btn:not(.primary):hover { background: #f3f4fa; }
html.dash-light body.account-page .btn.danger,
html.dash-light body.feed-page .btn.danger {
    color: #c92a2a; background: #fff4f4; border-color: rgba(201,42,42,0.3);
}
html.dash-light body.account-page .btn.danger:hover,
html.dash-light body.feed-page .btn.danger:hover { background: #ffe3e3; }
html.dash-light body.account-page .wallet-redeem summary,
html.dash-light body.feed-page .wallet-redeem summary { color: #1c1b2e; }
html.dash-light body.account-page .badge { color: #1c1b2e; }
/* Appearance / Public page style controls in the light dashboard theme. */
html.dash-light .account-main .theme-name { color: rgba(28,27,46,0.72); }
html.dash-light .account-main .theme-swatch { border-color: rgba(20,22,50,0.16); }
html.dash-light .account-main .theme-swatch:hover { border-color: rgba(20,22,50,0.32); }
html.dash-light .account-main .bg-dropzone { border-color: rgba(20,22,50,0.22); background: #f3f4fa; }
html.dash-light .account-main .bg-dropzone:hover,
html.dash-light .account-main .bg-dropzone.is-drag { border-color: var(--accent); background: #eef0f7; }
html.dash-light .account-main .bg-dropzone.has-image { border-color: rgba(20,22,50,0.14); }
html.dash-light .account-main .bg-dropzone-placeholder { color: rgba(28,27,46,0.7); }
html.dash-light .account-main .pagestyle-preview .preview-head { color: rgba(28,27,46,0.55); }
html.dash-light .account-main .pagestyle-autosave { color: rgba(28,27,46,0.6); }
html.dash-light .account-main .pagestyle-autosave .autosave-dot { background: rgba(20,22,50,0.25); }
html.dash-light .account-main .appearance-opt { border-color: rgba(20,22,50,0.16); }
html.dash-light .account-main .appearance-opt:has(input:checked) { border-color: var(--accent); }
html.dash-light .account-main .card label { color: #1c1b2e; }

/* ---- Stories rail (admirer feed) ---- */
.story-rail { list-style: none; display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 14px;
    margin: 0 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.story-rail::-webkit-scrollbar { display: none; }
.story-cell { flex: 0 0 auto; }
.story-ring { background: none; border: 0; padding: 0; cursor: pointer; display: flex;
    flex-direction: column; align-items: center; gap: 6px; width: 76px; color: inherit; }
.story-ring-grad { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%;
    padding: 3px; background: conic-gradient(from 210deg, #f59e0b, #ec4899, #7c5cff, #22d3ee, #f59e0b); }
.story-ring.seen .story-ring-grad { background: rgba(255,255,255,0.22); }
.story-av { width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--bg, #0b0b14); background: #1a1a26; }
.story-av.fallback { display: grid; place-items: center; font-weight: 800; font-size: 24px; color: #fff;
    background: linear-gradient(135deg, var(--accent), #ec4899); }
.story-cap { font-size: 12px; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
.story-ring:hover .story-cap { opacity: 1; }
.story-hint { text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0.6; }

/* ---- Fullscreen story viewer ---- */
body.sv-open { overflow: hidden; }
.story-viewer { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.story-viewer[hidden] { display: none; }
.sv-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.92); backdrop-filter: blur(6px); }
.sv-stage { position: relative; width: min(440px, 100vw); height: min(92vh, 860px);
    background: #05050a; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
@media (max-width: 520px) { .sv-stage { width: 100vw; height: 100vh; border-radius: 0; } }
.sv-bars { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4; display: flex; gap: 4px; }
.sv-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.3); overflow: hidden; }
.sv-bar > i { display: block; height: 100%; width: 0; background: #fff; }
.sv-head { position: absolute; top: 22px; left: 12px; right: 12px; z-index: 4;
    display: flex; align-items: center; justify-content: space-between; }
.sv-author { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; }
.sv-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.sv-av.fallback { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    font-weight: 700; background: linear-gradient(135deg, var(--accent), #ec4899); }
.sv-meta { display: flex; flex-direction: column; line-height: 1.2; }
.sv-name { font-weight: 700; font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.sv-time { font-size: 11px; opacity: 0.85; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.sv-close { background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
    opacity: 0.9; padding: 0 6px; }
.sv-media { flex: 1; display: grid; place-items: center; background: #000; min-height: 0; }
.sv-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sv-media.locked .sv-img { filter: blur(26px) brightness(0.55); transform: scale(1.12); }
.sv-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; z-index: 4;
    padding: 40px 18px 22px; color: #fff; font-size: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0)); text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.sv-tap { position: absolute; top: 64px; bottom: 0; width: 34%; z-index: 3;
    background: none; border: 0; cursor: pointer; }
.sv-tap-prev { left: 0; }
.sv-tap-next { right: 0; width: 66%; }
/* Exclusive tag (top) + locked overlay (centre, with unlock CTA) */
.sv-tag { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 5;
    display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800;
    letter-spacing: 0.03em; padding: 5px 12px; border-radius: 999px; color: #fff;
    background: linear-gradient(120deg, var(--accent), #ec4899); box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
.sv-lock { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px;
    color: #fff; pointer-events: none; }
/* display:flex/inline-flex above would otherwise override the hidden attribute. */
.sv-tag[hidden], .sv-lock[hidden] { display: none; }
.sv-lock-ico { font-size: 44px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5)); }
.sv-lock-title { font-size: 22px; font-weight: 800; margin: 6px 0 0; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.sv-lock-sub { font-size: 14px; opacity: 0.9; margin: 0 0 8px; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.sv-lock-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 20px; border-radius: 999px; font-weight: 800; font-size: 14px; text-decoration: none;
    color: #fff; background: linear-gradient(120deg, var(--accent), #ec4899);
    box-shadow: 0 8px 22px rgba(124,92,255,0.45); }
.sv-lock-btn:hover { filter: brightness(1.06); }

/* Floating "back to feed" for a signed-in admirer viewing a creator page */
.admirer-back { position: fixed; top: 14px; left: 14px; z-index: 50; display: inline-flex; align-items: center;
    gap: 6px; padding: 8px 14px 8px 10px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600;
    color: #fff; background: rgba(10,10,18,0.6); border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(10px); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.admirer-back:hover { background: rgba(10,10,18,0.8); }
.admirer-back svg { transform: rotate(180deg); }


/* ---- Wallet + token store ---- */
.wallet-balance { text-align: center; padding: 24px; margin-bottom: 20px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(124,92,255,0.25), rgba(236,72,153,0.2)); border: 1px solid rgba(255,255,255,0.15); }
.wallet-balance.pop { animation: just-revealed 1.2s ease; }
.wallet-coin { font-size: 30px; }
.wallet-num { display: block; font-size: 44px; font-weight: 800; line-height: 1.1; }
.wallet-label { font-size: 13px; opacity: 0.8; }
.store-head { font-size: 16px; margin: 18px 0 10px; }
.store-pack { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px;
    border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); margin: 0; }
.store-tokens { font-size: 22px; font-weight: 800; }
.store-price { opacity: 0.8; font-size: 14px; }
.store-pack .btn { width: 100%; }

/* Admirer sub-nav + creator lists (subscriptions / saved) */
.feed-nav { display: flex; gap: 8px; justify-content: center; margin: 0 0 18px; flex-wrap: wrap; }
.feed-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; text-decoration: none; color: inherit; opacity: 0.75;
    border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); }
.feed-nav a.active, .feed-nav a:hover { opacity: 1; border-color: var(--accent); }
.creator-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.creator-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.creator-id { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; flex: 1; }
.creator-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.creator-av.fallback { display: grid; place-items: center; font-weight: 700; background: var(--accent); color: #fff; }
.creator-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-tag { flex: none; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.creator-tag.subscribed { color: #4ade80; }
.creator-tag.ending { color: #f5b301; }
.creator-tag.muted { opacity: 0.6; }
a.creator-tag { padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.creator-actions { flex: none; display: flex; align-items: center; gap: 12px; }
.unsub-form { margin: 0; }
.creator-resub { font-size: 12px; font-weight: 700; text-decoration: none; color: var(--accent, #7c5cff);
    padding: 5px 12px; border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }
.creator-resub:hover { background: rgba(124,92,255,0.12); }
.creator-unsub { background: none; border: 0; padding: 4px 6px; cursor: pointer;
    font-size: 12px; font-weight: 600; color: var(--muted); border-radius: 8px; }
.creator-unsub:hover { color: #f87171; background: rgba(248,113,113,0.12); }
.store-membership { margin-top: 18px; padding: 18px; border-radius: 16px;
    background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.25); }
.wallet-redeem { margin-top: 18px; }
.wallet-redeem summary { cursor: pointer; padding: 8px 0; }
.wallet-redeem form { display: flex; gap: 8px; margin-top: 8px; }
.wallet-redeem input { flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.3); color: inherit; }
.wallet-history { list-style: none; padding: 0; margin: 8px 0 0; }
.wallet-history li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 14px; }
.wh-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wh-reason { font-weight: 600; }
.wh-meta { font-size: 12px; opacity: 0.6; }

.wh-delta { flex: none; }
.wh-delta.plus { color: #7ef0b0; font-weight: 700; }
.wh-delta.minus { color: #ff9aa9; font-weight: 700; }
.wallet-credit { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px;
    font-weight: 700; padding: 3px 10px; border-radius: 999px; color: #ffe07a;
    background: rgba(245, 179, 1, 0.16); }
.wallet-credit .ico { width: 13px; height: 13px; }
html.dash-light .account-main .wallet-credit { color: #8a5300; background: rgba(245,179,1,0.22); }

/* ---- Wallet money-in sources (deposited / referral / earnings) ---- */
.wallet-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 8px; }
.wsrc { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 16px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
.wsrc-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 6px; color: #fff; }
.wsrc-deposit  .wsrc-ico { background: linear-gradient(135deg, #34d399, #10b981); }
.wsrc-referral .wsrc-ico { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.wsrc-earned   .wsrc-ico { background: linear-gradient(135deg, #fb7185, #ec4899); }
.wsrc-amt { font-size: 22px; font-weight: 800; line-height: 1.1; }
.wsrc-label { font-size: 13px; font-weight: 600; }
.wsrc-sub { font-size: 11px; opacity: 0.6; }
@media (max-width: 620px) { .wallet-sources { grid-template-columns: 1fr; } }
html.dash-light .account-main .wsrc { background: #fff; border-color: rgba(20,22,50,0.1); }

/* ---- Referral / account stat cards (the account area loads style.css, not admin.css) ---- */
.account-main .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 6px 0 22px; }
.account-main .stat-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
    padding: 18px 20px; display: flex; flex-direction: column; gap: 7px; }
.account-main .stat-card.elite { border-color: rgba(236,72,153,0.45); }
.account-main .stat-num { font-size: 28px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.account-main .stat-label { font-size: 12.5px; opacity: 0.62; font-weight: 600; }
html.dash-light .account-main .stat-card { background: #fff; border-color: rgba(20,22,50,0.1); }

/* ---- Referrals report ---- */
.reflink-card { margin-top: 4px; }
.reflink-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.reflink-row input { flex: 1; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.3); color: inherit; font-weight: 700; }
.reflink-row .btn { flex: none; white-space: nowrap; }
.account-main .card > .hint { display: block; margin-top: 10px; font-size: 13px; line-height: 1.45; opacity: 0.65; }
.account-main .apikeys td code { font-size: 12px; }
.account-main .apikeys td.right { white-space: nowrap; }
.reftable-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); }
.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px; font-size: 13px; }
.pager-info { color: var(--muted); }
.pager-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-cur { color: var(--muted); padding: 0 4px; }
.reftable { width: 100%; border-collapse: collapse; font-size: 14px; }
.reftable th, .reftable td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: middle; }
.reftable th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; font-weight: 700; }
.reftable th.right, .reftable td.right { text-align: right; }
.reftable tfoot td { border-bottom: 0; border-top: 1px solid rgba(255,255,255,0.18); font-size: 15px; }
.reftable tbody tr:last-child td { border-bottom: 0; }
.ref-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ref-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.ref-av.fallback { display: grid; place-items: center; font-weight: 700; background: var(--accent); color: #fff; }
.ref-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ref-id .small { font-size: 12px; }
.ref-pending { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; opacity: 0.7; }
.ref-pending .ico { width: 13px; height: 13px; }
.muted.small.block { display: block; margin-top: 2px; }
html.dash-light .account-main .reftable-wrap { border-color: rgba(20,22,50,0.1); }
html.dash-light .account-main .reftable th,
html.dash-light .account-main .reftable td { border-bottom-color: rgba(20,22,50,0.08); }
html.dash-light .account-main .reflink-row input { background: #fff; border-color: rgba(20,22,50,0.16); }

/* ---- Media ---- */
.media {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 22px;
}
.media-title { font-size: 15px; font-weight: 600; margin: 0 0 8px; opacity: 0.85; }
.embed-16x9 { position: relative; width: 100%; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; }
.embed-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-fixed { width: 100%; border: 0; border-radius: 12px; }

/* ---- Footer ---- */
.profile-footer { margin-top: 36px; }
.admin-link { font-size: 12px; opacity: 0.45; color: inherit; text-decoration: none; }
.admin-link:hover { opacity: 0.8; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Pay-with-tokens (subscribe page) ---- */
.token-pay {
    margin-top: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: inherit;
    font-weight: 600;
}
.token-pay:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.06); }
.theme-light .token-pay { border-color: rgba(0, 0, 0, 0.18); }
.token-note { font-size: 13px; opacity: 0.8; margin: 14px 0 0; text-align: center; }
.token-note a { color: var(--accent); font-weight: 600; }

/* ---- Lightbox (full-size reel viewer) ---- */
.lightbox {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    padding: 24px;
    opacity: 0; transition: opacity 0.2s ease;
}
.lightbox.open { opacity: 1; }
.lightbox figure {
    margin: 0; position: relative; max-width: 100%; max-height: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lightbox img {
    max-width: min(92vw, 560px); max-height: 86vh;
    width: auto; height: auto; object-fit: contain;
    border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    display: block;
}
.lightbox figcaption { color: #fff; font-size: 14px; text-align: center; max-width: 560px; }
.lightbox .lb-close {
    position: absolute; top: -14px; right: -14px;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: #fff; color: #111; font-size: 20px; line-height: 1;
    display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
/* Protected images keep their per-viewer watermark + no-save behaviour in the lightbox. */
.lightbox.protected img {
    -webkit-user-select: none; user-select: none;
    -webkit-user-drag: none; -webkit-touch-callout: none;
}
.lightbox .wm {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    transform: rotate(-20deg); pointer-events: none; user-select: none;
}
body.lb-open { overflow: hidden; }
body.has-protected.shielded .lightbox.protected img { filter: blur(22px); }
@media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } }

/* ============================================================
   Gallery card (profile) — single entry point to the gallery
   ============================================================ */
.gallery-card-link {
    display: block; width: 100%; margin-top: 8px;
    text-decoration: none; color: inherit;
    border-radius: 20px; overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gallery-card-link:hover, .gallery-card-link:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
}
.gc-thumbs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
    aspect-ratio: 4 / 2.2; background: rgba(0, 0, 0, 0.2);
}
.gc-thumb { position: relative; overflow: hidden; }
.gc-thumb img, .gc-thumb video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.gc-thumb.locked img, .gc-thumb.locked video { filter: blur(14px) brightness(0.6); transform: scale(1.1); }
.gc-lock {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 22px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.gc-play {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 20px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}
.gc-body { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.gc-title { font-size: 16px; font-weight: 700; }
.gc-count { font-size: 13px; opacity: 0.7; }

/* ============================================================
   Dedicated gallery page
   ============================================================ */
.gallery-page-head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 12px; margin-top: 4px;
}
.gallery-page-head .name { margin: 0; }
.g-back, .g-back-spacer { min-width: 56px; }
.g-back {
    text-decoration: none; color: inherit; opacity: 0.8;
    font-size: 15px; font-weight: 600; padding: 6px 4px;
}
.g-back:hover { opacity: 1; }
.gallery-grid-full { margin-top: 18px; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gallery-grid-full .gallery-item { cursor: zoom-in; }
.gallery-item video {
    width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
    border-radius: 16px; display: block; background: #000;
}
.gi-play {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px;
    background: rgba(0, 0, 0, 0.5); color: #fff; backdrop-filter: blur(4px);
    pointer-events: none;
}
.gallery-item.locked .unlock-btn { width: 100%; margin-top: 8px; }
.gallery-item.locked { display: flex; flex-direction: column; gap: 0; }
.profile-footer { margin-top: 28px; }
.profile-footer .made-with { text-decoration: none; opacity: 0.7; }
.profile-footer .made-with:hover { opacity: 1; }

/* Demo-page disclosure (Creative Commons imagery + rights notice). */
.pf-demo-note {
    margin: 26px auto 0;
    max-width: 520px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(20, 20, 30, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    text-align: center;
}
.pf-demo-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: rgba(255, 255, 255, 0.12);
    padding: 3px 10px; border-radius: 999px;
}
.pf-demo-note p {
    margin: 8px 0 0;
    font-size: 12px; line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}
.pf-demo-note a { color: rgba(255, 255, 255, 0.92); }

/* Smaller previews on the dedicated gallery (3-up). */
.gallery-grid-full .gallery-item img,
.gallery-grid-full .gallery-item video { border-radius: 10px; }
.gallery-grid-full .locked-thumb { border-radius: 10px; }
.gallery-grid-full .gi-play { width: 24px; height: 24px; font-size: 10px; top: 6px; right: 6px; }
.gallery-grid-full .locked-ico { font-size: 22px; }
.gallery-grid-full .unlock-btn { font-size: 12px; padding: 7px 8px; }

/* Filter chips (Photos / Videos / Exclusive). */
.gallery-filter {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 16px auto 2px; width: 100%;
}
.gf-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: inherit; border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.gf-btn:hover { background: rgba(255, 255, 255, 0.1); }
.gf-btn.active {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.gf-ico { font-size: 14px; line-height: 1; }
.gallery-empty-filter { text-align: center; opacity: 0.6; margin: 24px 0; }
.gallery-item.filtered-out { display: none !important; }

/* ============================================================
   Fullscreen viewer (TikTok / Instagram style)
   ============================================================ */
body.gv-open { overflow: hidden; }
.gv-overlay[hidden] { display: none; }
.gv-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0, 0, 0, 0.96);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s ease;
}
.gv-overlay.open { opacity: 1; }
.gv-stage {
    position: relative; max-width: 100vw; max-height: 100vh;
    display: flex; align-items: center; justify-content: center;
}
.gv-media {
    max-width: 100vw; max-height: 100vh;
    width: auto; height: auto; object-fit: contain;
    border-radius: 0;
}
/* Videos always present as vertical 9:16 reels (cropped), matching the grid. */
video.gv-media {
    height: 92vh; aspect-ratio: 9 / 16; width: auto; max-width: 100vw;
    object-fit: cover; background: #000;
}
@media (min-width: 760px) {
    .gv-media { max-width: 92vw; max-height: 92vh; border-radius: 14px; }
    video.gv-media { height: 88vh; border-radius: 14px; }
}
.gv-stage .wm {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    transform: rotate(-20deg); pointer-events: none; user-select: none;
}
.gv-caption {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
    color: #fff; font-size: 14px; text-align: center; padding: 28px 18px 22px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
    pointer-events: none;
}
.gv-close {
    position: fixed; top: 16px; right: 16px; z-index: 1002;
    width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 20px; line-height: 1;
    display: grid; place-items: center; backdrop-filter: blur(6px);
}
.gv-close:hover { background: rgba(255, 255, 255, 0.26); }
.gv-nav {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 1002;
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 26px; line-height: 1;
    display: grid; place-items: center; backdrop-filter: blur(6px);
}
.gv-nav:hover { background: rgba(255, 255, 255, 0.24); }
.gv-prev { left: 14px; }
.gv-next { right: 14px; }
@media (max-width: 759px) {
    .gv-nav { top: auto; bottom: 76px; transform: none; }
    .gv-prev { left: 18px; }
    .gv-next { right: 18px; }
}
@media (prefers-reduced-motion: reduce) { .gv-overlay { transition: none; } }

/* ============================================================
   Fluent-style inline icons (icon() helper)
   ============================================================ */
.ico {
    display: inline-block; vertical-align: -0.18em;
    width: 1em; height: 1em; flex: none;
}
.ico path, .ico rect, .ico circle, .ico line, .ico polyline, .ico polygon { vector-effect: non-scaling-stroke; }

/* ============================================================
   Exclusive (Admirers-only) content — gold "Exclusive" ribbon +
   blurred locked preview in the page stream. Matches the dashboard.
   ============================================================ */
/* Wrapper around an exclusive item the viewer CAN see (admirer/owner): the
   real item renders normally with a gold "EXCLUSIVE" bar flush along the
   bottom. overflow:hidden + radius clip the bar to the item's rounded shape;
   the item's bottom corners are squared so it sits flush on the bar. */
.excl-wrap { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); padding-bottom: 22px; }
.excl-wrap > :not(.excl-ribbon) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Gold "EXCLUSIVE" bar attached to the BOTTOM edge of the item, full width.
   Used on both accessible (admirer) and locked items; the parent clips it to
   the rounded bottom corners so it fits the shape with no floating gap. */
.excl-ribbon {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
    color: #2a2000; white-space: nowrap; overflow: hidden; pointer-events: none;
    background: linear-gradient(180deg, #ffe07a, #f5b301);
}

/* Locked preview — a blurred, real-looking card for non-admirers. The whole
   tile links to the subscribe flow; no destination URL or player is exposed. */
.excl-locked {
    position: relative; display: block; width: 100%; overflow: hidden; padding-bottom: 22px;
    border-radius: var(--radius); text-decoration: none; color: inherit;
    border: 1px solid rgba(245, 179, 1, 0.35);
    background:
        repeating-linear-gradient(-45deg, rgba(245,179,1,0.06) 0 10px, rgba(245,179,1,0.02) 10px 20px),
        rgba(255, 255, 255, 0.05);
    transition: transform 0.12s ease, border-color 0.12s ease;
}
.excl-locked:hover { transform: translateY(-1px); border-color: rgba(245, 179, 1, 0.6); }
.excl-locked-inner {
    display: flex; align-items: center; gap: 12px; padding: 16px 18px;
    filter: blur(5px) brightness(0.72); transform: scale(1.02); pointer-events: none;
}
.excl-locked-media {
    flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
    display: grid; place-items: center; background: rgba(255, 255, 255, 0.08);
}
.excl-locked-media img { width: 100%; height: 100%; object-fit: cover; }
.excl-locked-emoji { font-size: 26px; line-height: 1; }
.excl-locked-glyph { opacity: 0.85; }
.excl-locked-title {
    font-weight: 700; font-size: 16px; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.excl-locked-veil {
    position: absolute; top: 0; left: 0; right: 0; bottom: 22px; z-index: 3; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 14px;
}
.excl-locked-lock { color: #f5b301; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)); }
.excl-locked-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 800; color: #fff;
    padding: 9px 16px; border-radius: 999px;
    background: linear-gradient(120deg, var(--accent), #ec4899);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.excl-locked:hover .excl-locked-cta { filter: brightness(1.06); }

/* ---- Wallet deposit (USD) ---- */
.deposit-form { width: min(92vw, 420px); margin: 0 auto; text-align: left; }
.deposit-amount {
    display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; padding: 10px 14px;
    background: rgba(255,255,255,0.05);
}
.deposit-cur { font-size: 22px; font-weight: 800; opacity: 0.8; }
.deposit-amount input { flex: 1; border: 0; background: transparent; color: inherit; font-size: 22px; font-weight: 700; outline: none; }
.deposit-form .hint { display: block; margin-top: 8px; opacity: 0.7; font-size: 13px; }

/* ---- Pay-method picker (cards vs crypto) ---- */
.pay-pick-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; margin: 4px 0 8px; }
.pay-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.pay-pick-opt {
    display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: 12px; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.pay-pick-opt:hover { border-color: rgba(255,255,255,0.32); }
.pay-pick-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.pay-pick-name { font-size: 14px; font-weight: 700; }
.pay-pick-hint { font-size: 11.5px; opacity: 0.62; line-height: 1.25; }
.pay-pick-opt:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.pay-pick-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 380px) { .pay-pick { grid-template-columns: 1fr; } }
/* Light theme (account dashboard) */
html.dash-light .pay-pick-opt { background: #fff; border-color: rgba(20,22,50,0.14); }
html.dash-light .pay-pick-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #fff); }

/* ============================================================
   Public-page customization (font, header, buttons, name,
   animated backgrounds) — available to every creator.
   ============================================================ */

/* ---- Header layouts (Linktree-style presets) ---- */
/* Classic = default centered look (no overrides needed). */

/* Left-aligned: avatar and all header text hug the left edge. */
body.public.head-left .profile { text-align: left; align-items: flex-start; }
body.public.head-left .socials { justify-content: flex-start; }
body.public.head-left .avatar img,
body.public.head-left .avatar-fallback { width: 92px; height: 92px; }

/* Hero banner: oversized rounded-rectangle avatar + larger name. */
body.public.head-banner .avatar img,
body.public.head-banner .avatar-fallback { width: 154px; height: 154px; border-radius: 24px; }
body.public.head-banner .name { font-size: 30px; letter-spacing: -0.01em; }
body.public.head-banner .profile { padding-top: 40px; }

/* Compact: small avatar, tight spacing — more links above the fold. */
body.public.head-compact .profile { gap: 8px; padding-top: 36px; }
body.public.head-compact .avatar img,
body.public.head-compact .avatar-fallback { width: 68px; height: 68px; }
body.public.head-compact .name { font-size: 19px; }
body.public.head-compact .bio { font-size: 13px; }

/* Big circle: oversized circular avatar, centered, large name. */
body.public.head-big .avatar img,
body.public.head-big .avatar-fallback { width: 168px; height: 168px; border-width: 4px; }
body.public.head-big .name { font-size: 32px; letter-spacing: -0.01em; }

/* ---- Button shape: applies to EVERY link kind (buttons, cards, smart music,
   embeds, locked previews) — but never the gallery, which has its own look.
   Exclusive items keep a moderate radius (not full pill) so the vertical
   ribbon always reads as a clean, well-cut rounded rectangle. ---- */
body.public.btn-pill .link-btn { border-radius: 999px; }
body.public.btn-pill .link-card,
body.public.btn-pill .smart-card,
body.public.btn-pill .music-embed,
body.public.btn-pill .link-embed,
body.public.btn-pill .media-item,
body.public.btn-pill .link-embed iframe,
body.public.btn-pill .music-embed iframe,
body.public.btn-pill .media-item iframe { border-radius: 28px; overflow: hidden; }

body.public.btn-square .link-btn,
body.public.btn-square .link-card,
body.public.btn-square .smart-card,
body.public.btn-square .excl-locked,
body.public.btn-square .excl-wrap,
body.public.btn-square .music-embed,
body.public.btn-square .link-embed,
body.public.btn-square .media-item,
body.public.btn-square .link-embed iframe,
body.public.btn-square .music-embed iframe,
body.public.btn-square .media-item iframe { border-radius: 4px; overflow: hidden; }

/* ---- Display-name styles ---- */
body.public.name-accent .name { color: var(--accent); }
body.public.name-gradient .name {
    background: linear-gradient(100deg, var(--accent), #ec4899 70%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Public page photo gallery (carousel + fullscreen zoom) ---- */
.gallery-carousel { position: relative; width: 100%; margin: 6px 0 14px; }
.gallery-viewport {
    overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 18px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; background: rgba(0,0,0,0.22);
}
.gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-track { display: flex; }
.gallery-slide {
    position: relative; flex: 0 0 100%; scroll-snap-align: center; margin: 0;
    aspect-ratio: 4 / 5; max-height: 72vh;
}
.gallery-img-btn {
    display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: zoom-in;
    background: transparent; border-radius: 18px; overflow: hidden;
}
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-slide video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.gallery-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
    width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); pointer-events: none;
}
.gallery-play svg { margin-left: 3px; }
.gallery-cap {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px;
    font-size: 13px; color: #fff; pointer-events: none;
    background: linear-gradient(transparent, rgba(0,0,0,0.62)); border-radius: 0 0 18px 18px;
}
.gallery-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; font-size: 22px; line-height: 1; color: #fff;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
}
.gallery-arrow:hover { background: rgba(0,0,0,0.65); }
.gallery-arrow.prev { left: 8px; }
.gallery-arrow.next { right: 8px; }
.gallery-dots { display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.gallery-dot {
    width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: rgba(255,255,255,0.32); transition: transform 0.15s ease, background 0.15s ease;
}
.gallery-dot.is-active { background: var(--accent); transform: scale(1.3); }
/* The dot stays small, but give it a finger-sized invisible hit area.
   The hit area must stay narrower than the spacing between two dots: at 7px
   wide with a 7px gap the centres were only 14px apart, so a 34px hit area
   covered its neighbours and a tap landed on the wrong photo. Centres are now
   27px apart and the hit area is 26px, so they no longer overlap. */
.gallery-dot { position: relative; }
.gallery-dot::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 26px; height: 26px; transform: translate(-50%, -50%);
}

/* Touch devices: lift the last few controls to the ~44px platform minimum.
   Scoped to coarse pointers so mouse-driven layouts are untouched. */
@media (pointer: coarse) {
    .gallery-arrow { width: 44px; height: 44px; }
    .btn { min-height: 44px; }
}
html.theme-light .gallery-dot, body.theme-light .gallery-dot { background: rgba(0,0,0,0.22); }

/* Fullscreen lightbox */
.gallery-lightbox {
    position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
    background: rgba(6,7,12,0.94); opacity: 0; transition: opacity 0.2s ease;
    touch-action: none; overscroll-behavior: contain;
}
.gallery-lightbox.is-on { opacity: 1; }
.gallery-lightbox[hidden] { display: none; }
.gl-img {
    max-width: 96vw; max-height: 92vh; object-fit: contain; user-select: none;
    will-change: transform; touch-action: none; cursor: grab; -webkit-user-drag: none;
}
.gl-img[hidden] { display: none; }
.gl-video { max-width: 96vw; max-height: 92vh; object-fit: contain; background: #000; outline: none; }
.gl-video[hidden] { display: none; }
.gallery-lightbox.is-video .gl-hint { display: none; }
.gl-close, .gl-arrow {
    position: fixed; z-index: 4001; border: 0; cursor: pointer; color: #fff;
    background: rgba(255,255,255,0.12); backdrop-filter: blur(6px);
    display: grid; place-items: center;
}
.gl-close { top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; }
.gl-arrow { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; font-size: 28px; line-height: 1; }
.gl-arrow.prev { left: 14px; }
.gl-arrow.next { right: 14px; }
.gl-close:hover, .gl-arrow:hover { background: rgba(255,255,255,0.22); }
.gl-hint {
    position: fixed; left: 0; right: 0; bottom: 18px; text-align: center; margin: 0;
    font-size: 12px; color: rgba(255,255,255,0.7); pointer-events: none;
    animation: gl-hint-fade 4.5s ease forwards;
}
@keyframes gl-hint-fade { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }
body.gl-open { overflow: hidden; }
@media (max-width: 540px) { .gl-arrow { width: 40px; height: 40px; font-size: 24px; } }

/* ---- Animated backgrounds (pure CSS, available to everyone) ---- */
body.public.anim-bg { color: #f3f5ff; background-attachment: fixed; }
/* Readability scrim above the moving background, below content. */
body.public.anim-bg::after {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.52));
    pointer-events: none;
}
/* Generic extra motion layer (each preset styles it). */
body.public.anim-bg::before {
    content: ""; position: fixed; inset: -30%; z-index: -2; pointer-events: none;
}

/* HD video backgrounds — a full-page looping <video> behind the readability
   scrim (anim-bg::after, z-index:-1). body.video-bg also carries the poster as
   a background-image, so reduced-motion users still get a static backdrop. */
.bg-video {
    position: fixed; inset: 0; z-index: -2;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
    background: #05060a;
}
body.public.video-bg { background-attachment: fixed; }
@media (prefers-reduced-motion: reduce) {
    .bg-video { display: none; }
}

/* Aurora — flowing curtains of light */
body.public.anim-aurora {
    background: linear-gradient(125deg, #06122e, #1f8fff, #7c3aed, #10b981, #06122e);
    background-size: 300% 300%;
    animation: anim-pan 12s ease-in-out infinite;
}
body.public.anim-aurora::before {
    background:
        radial-gradient(40% 60% at 30% 30%, rgba(56,189,248,0.5), transparent 60%),
        radial-gradient(45% 55% at 70% 60%, rgba(168,85,247,0.5), transparent 60%);
    filter: blur(40px);
    animation: anim-mesh-move 9s ease-in-out infinite alternate;
}

/* Sunset — warm gradient drift */
body.public.anim-sunset {
    background: linear-gradient(160deg, #2b1055, #7c3aed, #ec4899, #f59e0b, #2b1055);
    background-size: 300% 300%;
    animation: anim-pan 13s ease infinite;
}

/* Ocean — rolling waves */
body.public.anim-ocean {
    background: linear-gradient(200deg, #041f33, #0ea5e9, #22d3ee, #041f33);
    background-size: 300% 300%;
    animation: anim-pan 10s ease-in-out infinite;
}
body.public.anim-ocean::before {
    inset: 0;
    background: repeating-linear-gradient(110deg, rgba(255,255,255,0.06) 0 18px, transparent 18px 46px);
    animation: anim-slide 7s linear infinite;
}

/* Nightclub — pulsing spotlights + sweeping color */
body.public.anim-nightclub {
    background:
        radial-gradient(50% 60% at 25% 15%, rgba(236,72,153,0.6), transparent 60%),
        radial-gradient(50% 60% at 75% 20%, rgba(6,182,212,0.55), transparent 60%),
        radial-gradient(60% 60% at 50% 95%, rgba(139,92,246,0.6), transparent 60%),
        #060409;
}
body.public.anim-nightclub::before {
    background: conic-gradient(from 0deg at 50% 0%, rgba(236,72,153,0.22), transparent 25%, rgba(6,182,212,0.22) 50%, transparent 75%, rgba(139,92,246,0.22));
    animation: anim-spin 9s linear infinite, anim-club 5s ease-in-out infinite alternate;
}

/* Neon — receding perspective grid */
body.public.anim-neon { background: #07021a; }
body.public.anim-neon::before {
    inset: -20%;
    background-image:
        linear-gradient(rgba(0,229,255,0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,0,229,0.4) 1px, transparent 1px);
    background-size: 44px 44px;
    transform: perspective(320px) rotateX(62deg);
    transform-origin: 50% 100%;
    animation: anim-grid 1.7s linear infinite;
}

/* Deep space — drifting, twinkling starfield */
body.public.anim-space {
    background:
        radial-gradient(60% 50% at 70% 30%, rgba(124,58,237,0.4), transparent 60%),
        radial-gradient(50% 50% at 20% 70%, rgba(14,165,233,0.28), transparent 60%),
        linear-gradient(180deg, #05010f, #0b0524);
}
body.public.anim-space::before {
    inset: -50%;
    background-image:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 40% 70%, #fff, transparent),
        radial-gradient(1px 1px at 65% 20%, #fff, transparent),
        radial-gradient(1px 1px at 80% 50%, #fff, transparent),
        radial-gradient(2px 2px at 50% 85%, #cfe0ff, transparent),
        radial-gradient(1px 1px at 90% 80%, #fff, transparent);
    background-size: 380px 380px;
    animation: anim-drift 32s linear infinite, anim-twinkle 4s ease-in-out infinite;
}

/* Floating orbs — bubbles rising */
body.public.anim-bubbles { background: linear-gradient(180deg, #0b1437, #1a1140); }
body.public.anim-bubbles::before {
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.16) 0 10px, transparent 11px),
        radial-gradient(circle, rgba(56,189,248,0.22) 0 16px, transparent 17px),
        radial-gradient(circle, rgba(236,72,153,0.20) 0 7px, transparent 8px);
    background-size: 120px 120px, 220px 220px, 80px 80px;
    background-position: 0 0, 60px 40px, 30px 10px;
    animation: anim-rise 13s linear infinite;
}

/* Gradient mesh — blobs slowly roaming */
body.public.anim-mesh { background: #0a0e1c; }
body.public.anim-mesh::before {
    background:
        radial-gradient(35% 35% at 20% 20%, rgba(244,63,94,0.55), transparent 60%),
        radial-gradient(40% 40% at 80% 25%, rgba(139,92,246,0.55), transparent 60%),
        radial-gradient(45% 45% at 50% 85%, rgba(16,185,129,0.5), transparent 60%);
    filter: blur(34px);
    animation: anim-mesh-move 14s ease-in-out infinite alternate;
}

/* Digital rain — falling green code */
body.public.anim-matrix { background: #020a02; }
body.public.anim-matrix::before {
    inset: 0;
    background: linear-gradient(180deg, transparent 0, rgba(60,255,120,0.55) 45%, rgba(60,255,120,0) 72%);
    background-size: 24px 240px;
    opacity: 0.55; mix-blend-mode: screen;
    animation: anim-fall 1.4s linear infinite;
}

/* Confetti — multicolor dots falling */
body.public.anim-confetti { background: linear-gradient(180deg, #10142b, #1b1030); }
body.public.anim-confetti::before {
    inset: 0;
    background-image:
        radial-gradient(circle, #f43f5e 0 4px, transparent 5px),
        radial-gradient(circle, #38bdf8 0 4px, transparent 5px),
        radial-gradient(circle, #f59e0b 0 4px, transparent 5px),
        radial-gradient(circle, #10b981 0 4px, transparent 5px);
    background-size: 90px 90px, 130px 130px, 70px 70px, 110px 110px;
    background-position: 0 0, 30px 0, 60px 0, 95px 0;
    animation: anim-confetti-fall 6s linear infinite;
}

/* Cars / racing — layered neon speed streaks rushing past */
body.public.anim-racing { background: radial-gradient(circle at 50% 120%, #2a1240, #0a0a12 70%); }
body.public.anim-racing::before {
    inset: -10%;
    background:
        repeating-linear-gradient(90deg, transparent 0 80px, rgba(255,60,80,0.55) 80px 86px, transparent 86px 200px),
        repeating-linear-gradient(90deg, transparent 0 120px, rgba(60,200,255,0.45) 120px 124px, transparent 124px 300px),
        repeating-linear-gradient(90deg, transparent 0 50px, rgba(255,200,40,0.3) 50px 53px, transparent 53px 160px);
    filter: blur(1.5px);
    animation: anim-streak 0.5s linear infinite;
}

/* Sports / stadium — scrolling field stripes under pulsing floodlights */
body.public.anim-stadium { background: linear-gradient(180deg, #0b2a16, #07160d); }
body.public.anim-stadium::before {
    inset: 0;
    background:
        radial-gradient(38% 50% at 18% -6%, rgba(255,255,225,0.28), transparent 60%),
        radial-gradient(38% 50% at 82% -6%, rgba(255,255,225,0.24), transparent 60%),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 64px, transparent 64px 128px);
    background-size: 100% 100%, 100% 100%, 256px 100%;
    animation: anim-stadium 5s ease-in-out infinite alternate;
}

/* Anime — soft sky with falling sakura petals */
body.public.anim-anime { background: linear-gradient(180deg, #6db3ff, #ffb3d9); }
body.public.anim-anime::before {
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,182,217,0.95) 0 5px, transparent 6px),
        radial-gradient(circle, rgba(255,255,255,0.85) 0 4px, transparent 5px),
        radial-gradient(circle, rgba(255,130,185,0.9) 0 6px, transparent 7px);
    background-size: 120px 170px, 200px 230px, 90px 140px;
    background-position: 10px 0, 60px 0, 100px 0;
    animation: anim-petals 9s linear infinite;
}

/* Fashion / runway — champagne gradient drift under a sweeping spotlight */
body.public.anim-runway {
    background: linear-gradient(160deg, #2b1b24, #4a2c3a, #c79a6a, #2b1b24);
    background-size: 300% 300%;
    animation: anim-pan 16s ease infinite;
}
body.public.anim-runway::before {
    inset: -40%;
    background: conic-gradient(from 0deg at 50% 0%, transparent 0 42%, rgba(255,225,190,0.28) 50%, transparent 58%);
    animation: anim-spin 13s linear infinite;
}

/* Music — purple stage with sound rings pulsing up from the bottom */
body.public.anim-equalizer { background: linear-gradient(180deg, #1a0b2e, #3b1060); }
body.public.anim-equalizer::before {
    inset: 0; transform-origin: 50% 100%;
    background:
        repeating-radial-gradient(circle at 50% 100%, transparent 0 28px, rgba(168,85,247,0.22) 28px 31px, transparent 31px 68px),
        repeating-radial-gradient(circle at 50% 100%, transparent 0 46px, rgba(34,211,238,0.16) 46px 49px, transparent 49px 110px);
    animation: anim-rings 2.4s ease-out infinite;
}

@keyframes anim-pan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes anim-club { 0% { filter: hue-rotate(0deg) brightness(1); } 100% { filter: hue-rotate(70deg) brightness(1.3); } }
@keyframes anim-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-190px,-150px,0); } }
@keyframes anim-twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes anim-slide { from { transform: translateX(0); } to { transform: translateX(-46px); } }
@keyframes anim-spin { to { transform: rotate(360deg); } }
@keyframes anim-grid { from { background-position: 0 0; } to { background-position: 0 44px; } }
@keyframes anim-rise { from { background-position: 0 0, 60px 40px, 30px 10px; } to { background-position: 0 -480px, 60px -620px, 30px -410px; } }
@keyframes anim-mesh-move { from { transform: translate(-6%, -4%) scale(1.05); } to { transform: translate(6%, 5%) scale(1.16); } }
@keyframes anim-fall { from { background-position: 0 -240px; } to { background-position: 0 0; } }
@keyframes anim-confetti-fall { to { background-position: 10px 620px, 40px 680px, 70px 580px, 105px 640px; } }
@keyframes anim-streak { from { background-position: 0 30%, 0 55%, 0 75%; } to { background-position: -200px 30%, -300px 55%, -160px 75%; } }
@keyframes anim-stadium { 0% { filter: brightness(0.85); background-position: 0 0, 0 0, 0 0; } 100% { filter: brightness(1.18); background-position: 0 0, 0 0, 128px 0; } }
@keyframes anim-petals { to { background-position: 40px 660px, 90px 680px, 70px 540px; } }
@keyframes anim-rings { from { opacity: 0.85; transform: scaleY(0.7); } to { opacity: 0; transform: scaleY(1.25); } }

@media (prefers-reduced-motion: reduce) {
    body.public.anim-bg,
    body.public.anim-bg::before { animation: none !important; }
}

/* ---- View switcher pill (admirer area) ---- */
.view-switch { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.view-pill {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
    padding: 5px 11px; border-radius: 999px; color: #fff;
    background: linear-gradient(120deg, rgba(34,211,238,0.28), rgba(168,85,247,0.28));
    border: 1px dashed rgba(255,255,255,0.4);
}
.view-switch-link { font-size: 13px; text-decoration: none; opacity: 0.85; display: inline-flex; align-items: center; gap: 5px; }
.view-switch-link:hover { opacity: 1; text-decoration: underline; }
.feed-view-switch { margin-left: auto; }

/* ---- Payout accounts (cash-out destinations) ---- */
.account-main .cashout-dest { display: block; font-size: 13px; font-weight: 600; opacity: 0.9; margin-top: 4px; }
.account-main .cashout-dest select { width: 100%; margin-top: 7px; padding: 12px 14px; border-radius: 10px; font-size: 15px; border: 1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.28); color: inherit; }
.account-main .payout-accounts { margin-top: 14px; }
.account-main .po-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.account-main .po-head strong { font-size: 15px; }
.account-main .po-head .muted { opacity: 0.6; font-size: 12.5px; }
.account-main .po-empty { margin: 0 0 16px; font-size: 14px; opacity: 0.7; }
.account-main .po-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.account-main .po-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
    background: rgba(255,255,255,0.04);
}
.account-main .po-badge {
    flex: none; width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #fff;
}
.account-main .po-badge svg { width: 20px; height: 20px; }
.account-main .po-badge.po-crypto { background: linear-gradient(120deg, var(--accent), #ec4899); box-shadow: 0 4px 12px rgba(124,92,255,0.4); }
.account-main .po-badge.po-fiat { background: rgba(255,255,255,0.08); color: inherit; opacity: 0.9; }
.account-main .po-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.account-main .po-name { font-size: 14px; font-weight: 600; }
.account-main .po-acct { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; }
.account-main .po-acct .po-tag { opacity: 0.65; }
.account-main .po-net { font-size: 12px; opacity: 0.55; }
.account-main .po-remove { flex: none; margin: 0; }
.account-main .po-remove .btn { padding: 8px 11px; color: #fca5a5; border: 1px solid rgba(248,113,113,0.32); background: rgba(248,113,113,0.08); }
.account-main .po-remove .btn:hover { background: rgba(248,113,113,0.16); }
.account-main .po-remove .btn svg { width: 15px; height: 15px; }

.account-main .po-add { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 18px; margin: 0; }
.account-main .po-add label { display: block; font-size: 13px; font-weight: 600; opacity: 0.9; margin-bottom: 15px; }
.account-main .po-add .muted.small { font-weight: 400; opacity: 0.55; }
.account-main .po-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 520px) { .account-main .po-add-grid { grid-template-columns: 1fr; } }
.account-main .po-acct-row { display: flex; gap: 8px; align-items: stretch; margin-top: 7px; }
.account-main .po-acct-row input[type="text"] { flex: 1; min-width: 0; margin-top: 0; }
.account-main .po-scan-btn { flex: none; white-space: nowrap; padding: 0 14px; }
.account-main .po-scan-btn[hidden] { display: none !important; }
.account-main .po-scan-btn svg { width: 15px; height: 15px; }
.account-main .po-scanner { margin: 4px 0 16px; padding: 12px; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; background: rgba(0,0,0,0.28); text-align: center; }
.account-main .po-scanner video { width: 100%; max-width: 300px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: #000; display: block; margin: 0 auto 8px; }
.account-main .po-scanner .hint { display: block; margin: 0 0 10px; }
html.dash-light .account-main .po-item { background: #f6f7fb; border-color: rgba(20,22,50,0.1); }
html.dash-light .account-main .po-badge.po-fiat { background: rgba(20,22,50,0.08); }
html.dash-light .account-main .po-scanner { background: #f3f4fa; border-color: rgba(20,22,50,0.14); }
html.dash-light .account-main .cashout-dest select { background: #fff; border-color: rgba(20,22,50,0.16); }

/* "How to get a wallet" helper on the receive-wallets card */
.account-main .wallet-help { margin: 12px 0 0; border: 1px solid var(--line, rgba(20,22,50,0.12)); border-radius: 12px; background: var(--card, rgba(255,255,255,0.03)); overflow: hidden; }
.account-main .wallet-help > summary { cursor: pointer; list-style: none; padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.account-main .wallet-help > summary::-webkit-details-marker { display: none; }
.account-main .wallet-help > summary::before { content: "?"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.account-main .wallet-help[open] > summary { border-bottom: 1px solid var(--line, rgba(20,22,50,0.1)); }
.account-main .wallet-help-body { padding: 4px 16px 14px; font-size: 13px; line-height: 1.55; opacity: 0.92; }
.account-main .wallet-help-body ol { margin: 8px 0; padding-left: 20px; }
.account-main .wallet-help-body li { margin: 0 0 7px; }
.account-main .wallet-help-body code { background: rgba(123,97,255,0.12); color: var(--accent); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
.account-main .wallet-help-body a { color: var(--accent); font-weight: 700; }

/* Crypto plan checkout (Plan tab) */
.account-main .tier-buy-crypto { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.account-main .tier-asset { font-size: 12px; font-weight: 600; opacity: 0.85; display: flex; align-items: center; gap: 6px; }
.account-main .tier-asset select { flex: 1; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line, rgba(20,22,50,0.16)); background: var(--card, #fff); color: inherit; font: inherit; }
.account-main .tier-crypto-btns { display: flex; gap: 8px; }
.account-main .tier-crypto-btns .btn { flex: 1; }

/* ============================================================
   ✦ Public profile — premium motion & polish (v2)
   Theme-respecting micro-animations for the link-in-bio page.
   Disabled under prefers-reduced-motion.
   ============================================================ */

/* Staggered entrance for the profile's link cards & sections. */
.profile > * { animation: rise-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.profile > *:nth-child(1) { animation-delay: 0.02s; }
.profile > *:nth-child(2) { animation-delay: 0.07s; }
.profile > *:nth-child(3) { animation-delay: 0.12s; }
.profile > *:nth-child(4) { animation-delay: 0.17s; }
.profile > *:nth-child(5) { animation-delay: 0.22s; }
.profile > *:nth-child(6) { animation-delay: 0.27s; }
.profile > *:nth-child(n+7) { animation-delay: 0.32s; }
@keyframes rise-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Link cards: lift + a soft light-sweep on hover. */
.link-card { position: relative; overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), background 0.2s ease, box-shadow 0.22s ease; }
.link-card:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 16px 34px rgba(0,0,0,0.32); }
.theme-light .link-card:hover { box-shadow: 0 16px 34px rgba(40,30,90,0.14); }
.link-card::after {
    content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-16deg); transition: left 0.6s ease;
}
.link-card:hover::after { left: 150%; }

/* Story avatar ring slowly rotates to draw the eye (only when unseen). */
.avatar-story:not(.seen) .avatar-ring { animation: ring-spin 9s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.avatar-story:not(.seen) .avatar-ring > * { animation: ring-spin 9s linear infinite reverse; }

/* Social icons: springier hover. */
.social { transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), opacity 0.15s ease; }
.social:hover { transform: translateY(-3px) scale(1.12); }

/* Subscription card: gentle lift + accent glow on hover. */
.sub-card { transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease; }
.sub-card:hover { transform: translateY(-2px); box-shadow: 0 26px 60px rgba(0,0,0,0.42), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.sub-cta { transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease; }
.sub-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* Gallery thumbs: subtle zoom on hover. */
.gallery-grid > * { overflow: hidden; }
.gallery-grid img { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
.gallery-grid a:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    .profile > *, .avatar-story .avatar-ring, .avatar-story .avatar-ring > * { animation: none !important; }
    .link-card, .link-card::after, .social, .sub-card, .gallery-grid img { transition: none !important; }
}

/* Controls: brand-accent checkboxes/radios + tactile press on public forms. */
input[type=checkbox], input[type=radio] { accent-color: var(--accent); cursor: pointer; transition: transform 0.1s ease; }
input[type=checkbox]:active, input[type=radio]:active { transform: scale(0.88); }
.sub-form input:focus { outline: none; border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }

/* =====================================================================
   Unified guided checkout page (/checkout)
   ===================================================================== */
.checkout-page { max-width: 560px; }
.co-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.co-av img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.14); }
.co-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; text-decoration: none; margin-left: auto; }
.co-back:hover { color: #fff; }

.co-summary { text-align: center; padding: 22px; border-radius: var(--radius); margin-bottom: 16px;
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%), rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 16px 44px rgba(0,0,0,0.32); }
.co-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: #fff; padding: 4px 12px; border-radius: 999px; background: linear-gradient(120deg, var(--accent), #ec4899); }
.co-title { font-size: 22px; margin: 12px 0 2px; }
.co-sub { color: var(--muted); margin: 0 0 12px; }
.co-amount { font-size: 42px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.co-amount .co-per { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 5px; }
.co-amount .co-was { font-size: 20px; font-weight: 600; color: var(--muted); text-decoration: line-through; margin-right: 10px; letter-spacing: 0; }
.co-save-pill { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: #0b3d2c;
    background: linear-gradient(120deg, #4ade80, #22c55e); box-shadow: 0 4px 14px rgba(34,197,94,0.4); }
.co-save-pill .ico { flex: none; }
.co-upsell { display: flex; align-items: center; gap: 11px; margin: -6px 0 16px; padding: 12px 14px; border-radius: 13px; text-decoration: none;
    background: color-mix(in srgb, #22c55e 12%, rgba(255,255,255,0.04)); border: 1px solid color-mix(in srgb, #22c55e 40%, transparent);
    color: inherit; transition: transform 0.12s ease, border-color 0.15s ease; }
.co-upsell:hover { transform: translateY(-1px); border-color: color-mix(in srgb, #22c55e 65%, transparent); }
.co-upsell-ic { flex: none; color: #22c55e; display: inline-flex; }
.co-upsell-txt { flex: 1; font-size: 13.5px; line-height: 1.35; }
.co-upsell-txt strong { color: #22c55e; }
.co-upsell-arrow { flex: none; font-size: 18px; color: #22c55e; }

/* Promo / coupon on checkout */
.co-coupon-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: 0.02em; color: #4c1d95;
    background: linear-gradient(120deg, #c4b5fd, #a78bfa); box-shadow: 0 4px 14px rgba(139,92,246,0.35); }
.co-coupon { margin: -4px 0 16px; }
.co-coupon-form { display: flex; gap: 8px; }
.co-coupon-form input[type="text"] { flex: 1; min-width: 0; }
.co-coupon-apply { flex: none; }
.co-coupon-on { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600;
    color: #15803d; background: color-mix(in srgb, #22c55e 12%, transparent);
    border: 1px solid color-mix(in srgb, #22c55e 35%, transparent); border-radius: 11px; padding: 10px 12px; }
.co-coupon-on strong { letter-spacing: 0.03em; }
.co-coupon-remove { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: underline; }
.co-coupon-err { font-size: 13px; font-weight: 600; color: #dc2626; margin: 0 0 8px; }

.co-autorenew { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 0 0 14px; padding: 11px 13px;
    border-radius: 12px; cursor: pointer; font-size: 13px; line-height: 1.4;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.co-autorenew input { margin: 2px 0 0; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }

.co-step { border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); padding: 18px; background: rgba(255,255,255,0.04); }
.co-step-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.co-step-head-2 { margin-bottom: 12px; }
.co-step-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none;
    border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; }

.co-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.co-options { display: flex; flex-direction: column; gap: 10px; }
.co-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
    padding: 14px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; }
.co-opt:hover { border-color: rgba(255,255,255,0.32); }
.co-opt:active { transform: scale(0.99); }
#co-card:checked ~ .co-options .co-opt-card,
#co-crypto:checked ~ .co-options .co-opt-crypto { border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 13%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.co-opt-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-opt-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.co-opt-title .ico { color: var(--accent); flex: none; }
.co-opt-desc { font-size: 12.5px; color: var(--muted); }
.co-logos { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.co-logo-card { height: 22px; width: auto; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.co-logo-coin { width: 22px; height: 22px; }

.co-panel { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(255,255,255,0.15); }
#co-card:checked ~ .co-panels .co-panel-card,
#co-crypto:checked ~ .co-panels .co-panel-crypto { display: block; animation: coReveal 0.25s ease; }
@keyframes coReveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.co-card-brands { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.co-card-brands img { height: 26px; width: auto; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.co-brand-square { height: 28px !important; border-radius: 6px; margin-right: 4px; }

.co-note { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); margin: 10px 0 14px; }
.co-note .ico { flex: none; color: #4ade80; }
.co-cta { width: 100%; justify-content: center; }

.co-coins { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.co-coin { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 11px 13px; border-radius: 11px;
    border: 1.5px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); transition: border-color 0.15s ease, background 0.15s ease; }
.co-coin:hover { border-color: rgba(255,255,255,0.3); }
.co-coin input { position: absolute; opacity: 0; width: 0; height: 0; }
.co-coin-logo { width: 26px; height: 26px; flex: none; }
.co-coin-name { font-weight: 700; }
.co-coin-net { font-size: 12px; color: var(--muted); }
.co-coin-check { margin-left: auto; opacity: 0; color: var(--accent); flex: none; }
.co-coin:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.co-coin:has(input:checked) .co-coin-check { opacity: 1; }

.co-foot { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-top: 16px; }
.co-foot .ico { flex: none; }

/* Plan tier buy links (crypto/card now chosen on the checkout page). */
.tier-buy-options { display: flex; flex-direction: column; gap: 8px; }
.tier-buy-options .btn, .tier-buy-link { width: 100%; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    #co-card:checked ~ .co-panels .co-panel-card,
    #co-crypto:checked ~ .co-panels .co-panel-crypto { animation: none; }
}

/* Checkout — light iOS "liquid glass" surface (no dark theme anywhere). */
body.checkout-light {
    color: #1c1b2e;
    background:
        radial-gradient(1100px 600px at 100% -10%, rgba(124, 92, 255, 0.16), transparent 60%),
        radial-gradient(900px 600px at -10% 110%, rgba(236, 72, 153, 0.12), transparent 55%),
        linear-gradient(180deg, #f7f8ff, #eef1fb);
    background-attachment: fixed;
}
body.checkout-light .co-back { color: #6b6982; }
body.checkout-light .co-back:hover { color: #1c1b2e; }
body.checkout-light .co-summary {
    background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 44px rgba(70, 70, 140, 0.12);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
}
body.checkout-light .co-sub,
body.checkout-light .co-opt-desc,
body.checkout-light .co-coin-net,
body.checkout-light .co-note,
body.checkout-light .co-foot { color: #6b6982; }
body.checkout-light .co-step {
    background: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 34px rgba(70, 70, 140, 0.10);
    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
}
body.checkout-light .co-opt,
body.checkout-light .co-coin {
    background: rgba(255, 255, 255, 0.66); border-color: rgba(20, 22, 50, 0.10);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.checkout-light .co-opt:hover,
body.checkout-light .co-coin:hover { border-color: rgba(20, 22, 50, 0.22); }
body.checkout-light .co-panel { border-top-color: rgba(20, 22, 50, 0.12); }
body.checkout-light .co-logo-card,
body.checkout-light .co-card-brands img { box-shadow: 0 1px 3px rgba(20, 22, 50, 0.16); }
body.checkout-light .co-cta { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 34%, transparent); }

/* ===== Gamer Profile ===================================================== */
/* "Play Anywhere" summary card (opens the full platform list in a modal). */
.gamer-smart {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    margin: 10px 0;
    border-radius: var(--radius, 16px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: linear-gradient(120deg, rgba(124, 92, 255, 0.22), rgba(46, 211, 167, 0.16));
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.gamer-smart:hover { transform: translateY(-2px); filter: brightness(1.06); }
.gamer-smart-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
}
.gamer-smart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gamer-smart-title { font-weight: 800; font-size: 15px; }
.gamer-smart-plats { display: flex; align-items: center; gap: 9px; }
.gamer-smart-plats .gamer-icon { width: 20px; height: 20px; }
.gamer-smart-more { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.72); }
.gamer-smart-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .gamer-smart { transition: none; } }
/* Full platform list shown inside the Gamer Profile modal */
.pf-modal-card .gamer-list { grid-template-columns: 1fr; text-align: left; margin-top: 10px; }
.pf-modal-card .gamer-item { margin: 0; }

/* Legacy inline card (kept for any old markup) */
.gamer-card {
    margin: 18px 0;
    padding: 16px 16px 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    text-align: left;
}
.gamer-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
}
.gamer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.gamer-item { margin: 0; }
.gamer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid var(--gamer-color, var(--accent));
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.gamer-link:hover,
.gamer-link:focus-visible {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--gamer-color, var(--accent));
    outline: none;
}
.gamer-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: block;
    background-color: var(--gamer-color, currentColor);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    /* fallback = gamepad glyph, overridden per platform below */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 8h10a5 5 0 0 1 5 5c0 2.2-.9 4.5-2.9 4.5-1.3 0-2.1-1-3-2.1a1.6 1.6 0 0 0-1.2-.6H9.1a1.6 1.6 0 0 0-1.2.6c-.9 1.1-1.7 2.1-3 2.1C2.9 17.5 2 15.2 2 13a5 5 0 0 1 5-5zm1 2v2H6v1.6h2v2h1.6v-2h2V12h-2v-2H8zm7.5.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm2 2.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 8h10a5 5 0 0 1 5 5c0 2.2-.9 4.5-2.9 4.5-1.3 0-2.1-1-3-2.1a1.6 1.6 0 0 0-1.2-.6H9.1a1.6 1.6 0 0 0-1.2.6c-.9 1.1-1.7 2.1-3 2.1C2.9 17.5 2 15.2 2 13a5 5 0 0 1 5-5zm1 2v2H6v1.6h2v2h1.6v-2h2V12h-2v-2H8zm7.5.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm2 2.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E");
}
.gamer-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.gamer-plat {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}
.gamer-handle {
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gamer-go {
    margin-left: auto;
    flex: 0 0 auto;
    opacity: 0.5;
}
.gamer-link.is-copied .gamer-go::after {
    content: "Copied!";
    margin-left: 6px;
    font-size: 0.7rem;
}
.gamer-link.is-static { position: relative; }

/* Per-platform brand icons (0,2,0 so they beat the .gamer-icon fallback and
   don't disturb the shared .social-icon.icon-* rules). */
.gamer-icon.icon-steam {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658a3.5 3.5 0 0 1 1.912-.59c.063 0 .125.004.188.006l2.861-4.142V8.91a4.526 4.526 0 0 1 4.524-4.524 4.526 4.526 0 0 1 4.524 4.527 4.526 4.526 0 0 1-4.524 4.525h-.105l-4.076 2.911c0 .052.004.105.004.159a3.396 3.396 0 0 1-3.39 3.396 3.4 3.4 0 0 1-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.605 0 11.979 0zM7.54 18.21l-1.473-.61a2.5 2.5 0 0 0 1.314 1.25c1.297.539 2.793-.076 3.332-1.375a2.54 2.54 0 0 0 .005-1.949 2.53 2.53 0 0 0-1.377-1.383 2.53 2.53 0 0 0-1.878-.03l1.523.63a1.867 1.867 0 1 1-1.445 3.467zm11.415-9.303a3.02 3.02 0 0 1-3.015 3.015 3.02 3.02 0 0 1-3.015-3.015 3.02 3.02 0 0 1 3.015-3.015 3.02 3.02 0 0 1 3.015 3.015zm-5.273-.005a2.267 2.267 0 0 1 2.265-2.266 2.267 2.267 0 0 1 2.266 2.266 2.266 2.266 0 0 1-2.266 2.265 2.265 2.265 0 0 1-2.265-2.265z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658a3.5 3.5 0 0 1 1.912-.59c.063 0 .125.004.188.006l2.861-4.142V8.91a4.526 4.526 0 0 1 4.524-4.524 4.526 4.526 0 0 1 4.524 4.527 4.526 4.526 0 0 1-4.524 4.525h-.105l-4.076 2.911c0 .052.004.105.004.159a3.396 3.396 0 0 1-3.39 3.396 3.4 3.4 0 0 1-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.605 0 11.979 0zM7.54 18.21l-1.473-.61a2.5 2.5 0 0 0 1.314 1.25c1.297.539 2.793-.076 3.332-1.375a2.54 2.54 0 0 0 .005-1.949 2.53 2.53 0 0 0-1.377-1.383 2.53 2.53 0 0 0-1.878-.03l1.523.63a1.867 1.867 0 1 1-1.445 3.467zm11.415-9.303a3.02 3.02 0 0 1-3.015 3.015 3.02 3.02 0 0 1-3.015-3.015 3.02 3.02 0 0 1 3.015-3.015 3.02 3.02 0 0 1 3.015 3.015zm-5.273-.005a2.267 2.267 0 0 1 2.265-2.266 2.267 2.267 0 0 1 2.266 2.266 2.266 2.266 0 0 1-2.266 2.265 2.265 2.265 0 0 1-2.265-2.265z'/%3E%3C/svg%3E");
}
.gamer-icon.icon-xbox {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4.102 21.033A11.947 11.947 0 0 0 12 24a11.96 11.96 0 0 0 7.902-2.967c1.877-1.912-4.316-8.709-7.902-11.417-3.582 2.708-9.779 9.505-7.898 11.417zm11.16-14.406c2.5 2.961 7.484 10.313 6.076 12.912A11.944 11.944 0 0 0 24 12.004a11.94 11.94 0 0 0-3.57-8.536s-.027-.022-.082-.042c-.063-.022-.152-.045-.281-.045-.592 0-1.985.434-4.805 3.246zM3.654 3.426c-.061.02-.089.042-.089.042A11.945 11.945 0 0 0 0 12.004c0 2.955 1.07 5.66 2.845 7.75-1.417-2.604 3.5-9.95 6.007-12.91-2.633-2.62-3.921-3.259-4.508-3.259-.119 0-.199.018-.264.043zm.61-.55C6.06 1.062 8.9 0 11.99 0h.01c3.09 0 5.929 1.062 7.727 2.876-.06-.043-.653-.416-1.44-.416-.847 0-1.99.428-3.68 1.844l-2.61 1.916-2.608-1.916C7.7 2.888 6.556 2.46 5.71 2.46c-.788 0-1.38.373-1.446.416z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4.102 21.033A11.947 11.947 0 0 0 12 24a11.96 11.96 0 0 0 7.902-2.967c1.877-1.912-4.316-8.709-7.902-11.417-3.582 2.708-9.779 9.505-7.898 11.417zm11.16-14.406c2.5 2.961 7.484 10.313 6.076 12.912A11.944 11.944 0 0 0 24 12.004a11.94 11.94 0 0 0-3.57-8.536s-.027-.022-.082-.042c-.063-.022-.152-.045-.281-.045-.592 0-1.985.434-4.805 3.246zM3.654 3.426c-.061.02-.089.042-.089.042A11.945 11.945 0 0 0 0 12.004c0 2.955 1.07 5.66 2.845 7.75-1.417-2.604 3.5-9.95 6.007-12.91-2.633-2.62-3.921-3.259-4.508-3.259-.119 0-.199.018-.264.043zm.61-.55C6.06 1.062 8.9 0 11.99 0h.01c3.09 0 5.929 1.062 7.727 2.876-.06-.043-.653-.416-1.44-.416-.847 0-1.99.428-3.68 1.844l-2.61 1.916-2.608-1.916C7.7 2.888 6.556 2.46 5.71 2.46c-.788 0-1.38.373-1.446.416z'/%3E%3C/svg%3E");
}
.gamer-icon.icon-playstation {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.985 2.596v17.548l3.972 1.261V6.688c0-.55.24-.9.657-.756.548.171.658.71.658 1.257v4.322c2.469 1.19 4.412-.008 4.412-3.148 0-3.223-1.135-4.653-4.469-5.795-1.311-.45-3.727-1.192-5.63-1.593zM9.28 22.94l6.375-2.274c.723-.26.834-.628.246-.819-.588-.192-1.653-.147-2.376.146l-4.245 1.5v-2.398l.24-.081s1.221-.435 2.938-.625c1.717-.19 3.821.024 5.474.649 1.862.588 2.072 1.454.981 1.977-1.09.523-6.257 2.436-6.257 2.436l-2.653.02-.717-.529zm-8.514-.503c-1.75-.618-2.038-1.905-1.24-2.503.74-.553 1.998-.968 1.998-.968l5.203-1.851v2.108l-3.744 1.34c-.66.237-.762.572-.226.83.535.257 1.49.32 2.15.083l1.82-.66v1.885c-.116.02-.245.04-.362.058-1.796.293-3.708.174-5.4-.422z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.985 2.596v17.548l3.972 1.261V6.688c0-.55.24-.9.657-.756.548.171.658.71.658 1.257v4.322c2.469 1.19 4.412-.008 4.412-3.148 0-3.223-1.135-4.653-4.469-5.795-1.311-.45-3.727-1.192-5.63-1.593zM9.28 22.94l6.375-2.274c.723-.26.834-.628.246-.819-.588-.192-1.653-.147-2.376.146l-4.245 1.5v-2.398l.24-.081s1.221-.435 2.938-.625c1.717-.19 3.821.024 5.474.649 1.862.588 2.072 1.454.981 1.977-1.09.523-6.257 2.436-6.257 2.436l-2.653.02-.717-.529zm-8.514-.503c-1.75-.618-2.038-1.905-1.24-2.503.74-.553 1.998-.968 1.998-.968l5.203-1.851v2.108l-3.744 1.34c-.66.237-.762.572-.226.83.535.257 1.49.32 2.15.083l1.82-.66v1.885c-.116.02-.245.04-.362.058-1.796.293-3.708.174-5.4-.422z'/%3E%3C/svg%3E");
}
.gamer-icon.icon-nintendo {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.176 24h3.674c3.376 0 6.15-2.774 6.15-6.15V6.15C24 2.775 21.226 0 17.85 0H14.1c-.074 0-.15.075-.15.15v23.7c0 .075.076.15.226.15zm4.574-13.199c1.351 0 2.399 1.05 2.399 2.399 0 1.35-1.048 2.4-2.399 2.4-1.35 0-2.4-1.05-2.4-2.4 0-1.349 1.05-2.399 2.4-2.399zM11.4 24c.074 0 .149-.075.149-.15V.15c0-.075-.075-.15-.225-.15H6.15C2.775 0 0 2.775 0 6.15v11.7C0 21.226 2.775 24 6.15 24H11.4zM4.762 4.762c-.9.898-.9 2.4 0 3.298.899.9 2.4.9 3.299 0 .899-.899.899-2.4 0-3.298-.9-.9-2.4-.9-3.299 0z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.176 24h3.674c3.376 0 6.15-2.774 6.15-6.15V6.15C24 2.775 21.226 0 17.85 0H14.1c-.074 0-.15.075-.15.15v23.7c0 .075.076.15.226.15zm4.574-13.199c1.351 0 2.399 1.05 2.399 2.399 0 1.35-1.048 2.4-2.399 2.4-1.35 0-2.4-1.05-2.4-2.4 0-1.349 1.05-2.399 2.4-2.399zM11.4 24c.074 0 .149-.075.149-.15V.15c0-.075-.075-.15-.225-.15H6.15C2.775 0 0 2.775 0 6.15v11.7C0 21.226 2.775 24 6.15 24H11.4zM4.762 4.762c-.9.898-.9 2.4 0 3.298.899.9 2.4.9 3.299 0 .899-.899.899-2.4 0-3.298-.9-.9-2.4-.9-3.299 0z'/%3E%3C/svg%3E");
}
.gamer-icon.icon-roblox {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.164 0L0 19.236 18.836 24 24 4.764zm9.71 15.107l-5.66-1.512 1.512-5.66 5.66 1.512z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5.164 0L0 19.236 18.836 24 24 4.764zm9.71 15.107l-5.66-1.512 1.512-5.66 5.66 1.512z'/%3E%3C/svg%3E");
}
/* Re-scope Twitch/Discord (defined earlier for socials) so the gamepad
   fallback on .gamer-icon doesn't win by source order. */
.gamer-icon.icon-twitch {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z'/%3E%3C/svg%3E");
}
.gamer-icon.icon-discord {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.317 4.369a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.099.245.197.372.291a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.331c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.317 4.369a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.1 13.1 0 0 1-1.872-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.099.245.197.372.291a.077.077 0 0 1-.006.127 12.3 12.3 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.331c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z'/%3E%3C/svg%3E");
}

/* Dashboard: "Find my profiles" platform chips */
.gamer-pick {
    border: 0;
    margin: 12px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.gamer-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    user-select: none;
}
.gamer-chip input { margin: 0; }
.gamer-chip:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.gamer-chip.is-owned {
    opacity: 0.55;
    cursor: not-allowed;
}
.gamer-chip .gamer-icon {
    width: 18px;
    height: 18px;
    background-color: currentColor;
}

/* ===== Public profile: floating actions, Admire CTA, Share & Report ===== */
.pf-topbar {
    position: fixed;
    z-index: 60;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right));
    display: flex;
    gap: 8px;
}
.pf-tb-btn {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #fff;
    background: rgba(20, 20, 30, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease, background 0.15s ease;
}
.pf-tb-btn:hover { transform: translateY(-2px); background: rgba(30, 30, 44, 0.72); }
.pf-tb-btn:active { transform: translateY(0); }
/* Declared after the base rule above so it actually wins the cascade. */
@media (pointer: coarse) {
    .pf-tb-btn { width: 44px; height: 44px; }
}
.pf-tb-report:hover { color: #ff8a8a; }
.pf-tb-btn.save-btn.is-saved { color: var(--accent, #7c5cff); background: rgba(124, 92, 255, 0.22); }
@media (prefers-reduced-motion: reduce) { .pf-tb-btn { transition: none; } }

/* Admire CTA + explainer bubble — inline, centered under the bio */
.pf-admire {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 6px 0 14px;
}
.pf-admire-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.pf-admire-hint {
    position: relative;
    max-width: min(90%, 320px);
    text-align: center;
    font-size: 12px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(20, 20, 30, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
.pf-admire-hint::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 9px;
    height: 9px;
    background: rgba(20, 20, 30, 0.72);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

/* Shared modal shell (Share + Report) */
.pf-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; }
.pf-modal[hidden] { display: none; }
.pf-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pf-modal-card {
    position: relative;
    width: 100%;
    max-width: 380px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #16161f;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: 26px 22px 22px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.pf-modal-x {
    position: absolute; top: 6px; right: 6px; background: none; border: 0; color: inherit;
    opacity: 0.65; cursor: pointer; padding: 0; line-height: 0;
    width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
}
.pf-modal-x:hover { opacity: 1; }
.pf-modal-brand { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent, #7c5cff); }
.pf-modal-name { margin: 6px 0 14px; font-size: 16px; }
.pf-modal-sub { margin: 6px 0 14px; text-align: left; }

.pf-qr { width: 190px; height: 190px; margin: 0 auto 14px; background: #fff; border-radius: 14px; padding: 10px; }
.pf-qr svg { width: 100%; height: 100%; display: block; }
.pf-link-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pf-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); text-align: left; }
.pf-native-share { width: 100%; margin-bottom: 12px; }
.pf-share-nets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }
.pf-share-net {
    flex: 1 1 auto;
    min-width: 84px;
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.15s ease;
}
.pf-share-net:hover { background: rgba(255, 255, 255, 0.16); }
.pf-tips { text-align: left; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 14px; }
.pf-tips-h { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.pf-tips ul { margin: 0; padding-left: 18px; }
.pf-tips li { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); margin: 3px 0; }

/* Report form */
.pf-report-form { text-align: left; display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.pf-report-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; }
.pf-report-form select,
.pf-report-form textarea,
.pf-report-form input[type="email"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font: inherit;
    font-weight: 400;
}
.pf-report-form textarea { resize: vertical; }
/* font: inherit picks up the 13px label size; iOS zooms the page on focus
   below 16px, so lift the controls back up on touch devices. */
@media (pointer: coarse) {
    .pf-report-form select,
    .pf-report-form textarea,
    .pf-report-form input[type="email"] { font-size: 16px; }
}
.pf-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden; }
.pf-report-msg { font-size: 13px; padding: 8px 10px; border-radius: 8px; }
.pf-report-msg.is-error { color: #ffb4b4; background: rgba(220, 38, 38, 0.14); }
.pf-report-done { text-align: center; font-weight: 600; padding: 14px 0; }

body.pf-modal-open { overflow: hidden; }

.app-nav-page { font-size: 12.5px !important; opacity: .8; }