:root {
    --ink: #12182f;
    --muted: #65708a;
    --paper: #fffdfb;
    --line: rgba(18, 24, 47, .12);
    --coral: #ff6f68;
    --aqua: #31c6c4;
    --mint: #89dfc4;
    --sun: #ffc64b;
    --navy: #11182f;
    --shadow: 0 22px 60px rgba(17, 24, 47, .18);
}

* { box-sizing: border-box; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: radial-gradient(circle at top left, rgba(49, 198, 196, .18), transparent 30rem), linear-gradient(145deg, #fff7ee 0%, #effdff 48%, #fff9f1 100%);
    font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html:has(body:not([data-age-group="guest"])) { height: 100%; overflow: hidden; }
body:not([data-age-group="guest"]) { height: 100%; overflow: hidden; overscroll-behavior: none; }
button, input, textarea, select { font: inherit; }
.app-shell { width: min(100%, 430px); min-height: 100vh; margin: 0 auto; background: rgba(255, 255, 255, .6); }
body:not([data-age-group="guest"]) .app-shell { height: 100%; min-height: 0; overflow: hidden; }
.brand-row { display: flex; align-items: center; gap: .75rem; }
.brand-mark { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; color: white; background: linear-gradient(135deg, var(--coral), var(--aqua)); border-radius: 1.15rem; box-shadow: 0 14px 26px rgba(49, 198, 196, .28); }
.brand-row h1, .wordmark { margin: 0; font-size: 2rem; font-weight: 900; color: var(--coral); }
.hero-copy h2 { max-width: 11ch; margin: .4rem 0 1rem; font-size: clamp(2.25rem, 10vw, 3.2rem); line-height: .95; font-weight: 900; letter-spacing: 0; }
.hero-copy p { color: var(--muted); font-size: 1rem; }
.soft-label { color: var(--aqua) !important; font-weight: 800; }
.signup-card, .blocked-card, .profile-card, .wallet-card { padding: 1.2rem; background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .7); border-radius: 1.5rem; box-shadow: var(--shadow); }
.blocked-card { width: 100%; text-align: center; }
.blocked-card h1 { font-size: 1.7rem; font-weight: 900; }
.safety-ribbon, .age-silo, .safety-strip { display: flex; align-items: center; gap: .6rem; color: #1c817f; background: rgba(137, 223, 196, .18); border: 1px solid rgba(49, 198, 196, .2); border-radius: 999px; padding: .75rem .9rem; font-weight: 800; }
.form-label { color: var(--ink); font-size: .85rem; font-weight: 800; }
.form-control, .form-select { border: 1px solid var(--line); border-radius: .9rem; }
.form-control:focus, .form-select:focus { border-color: var(--aqua); box-shadow: 0 0 0 .25rem rgba(49, 198, 196, .16); }
.auth-tabs { padding: .3rem; background: #f2f7f8; border-radius: .9rem; }
.auth-tabs .nav-link { color: var(--muted); border-radius: .7rem; font-weight: 900; }
.auth-tabs .nav-link.active { color: white; background: var(--navy); }
.btn-spark { color: white; background: linear-gradient(135deg, var(--coral), var(--aqua)); border: 0; border-radius: 999px; font-weight: 900; box-shadow: 0 12px 26px rgba(255, 111, 104, .22); transition: transform .2s ease, box-shadow .2s ease; }
.btn-spark:hover, .btn-spark:active { color: white; transform: translateY(-1px); }
.tiny-note { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.mobile-app { position: relative; display: grid; height: 100vh; height: 100svh; height: 100dvh; min-height: 0; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.topbar { z-index: 55; display: flex; grid-row: 1; grid-column: 1; min-height: calc(3.7rem + env(safe-area-inset-top)); align-items: center; justify-content: space-between; padding: max(.55rem, env(safe-area-inset-top)) 1rem .45rem; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.wordmark { font-size: 1.55rem; }
.live-dot { display: inline-block; width: .48rem; height: .48rem; margin-left: .25rem; vertical-align: middle; background: #23ad83; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 3px rgba(35,173,131,.16); transition: background .2s ease, box-shadow .2s ease; }
.live-dot.offline { background: #df6b64; box-shadow: 0 0 0 3px rgba(223,107,100,.16); }
.icon-btn, .coin-pill { position: relative; display: grid; place-items: center; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 8px 22px rgba(17, 24, 47, .08); }
.icon-btn { width: 2.75rem; height: 2.75rem; border-radius: 50%; }
.icon-btn.small { width: 2.25rem; height: 2.25rem; }
.coin-pill { display: flex; gap: .35rem; min-height: 2.65rem; padding: 0 .8rem; color: #7a5600; font-weight: 900; background: linear-gradient(135deg, #fff8dc, #fff); }
.age-silo { justify-content: center; width: fit-content; margin: 0 auto 1rem; background: white; box-shadow: 0 10px 24px rgba(17, 24, 47, .08); }
.app-notices { grid-row: 2; grid-column: 1; }
.app-notices:empty { display: none; }
.staff-chip { display: flex; align-items: center; gap: .45rem; margin: .4rem auto; padding: .55rem .8rem; width: fit-content; max-width: calc(100% - 2rem); color: #5a3d00; background: rgba(255, 198, 75, .2); border: 1px solid rgba(255, 198, 75, .4); border-radius: .9rem; font-size: .78rem; font-weight: 900; }
.verification-banner { display: flex; align-items: flex-start; gap: .7rem; margin: .5rem 1rem; padding: .75rem; color: #6a4a00; background: #fff5cf; border: 1px solid rgba(255, 198, 75, .5); border-radius: 1rem; }
.verification-banner i { font-size: 1.35rem; }
.verification-banner strong, .verification-banner span { display: block; }
.verification-banner span { margin-top: .15rem; font-size: .78rem; line-height: 1.35; }
.view { display: none; grid-row: 3; grid-column: 1; min-height: 0; padding: .55rem 1rem 1rem; overflow-y: auto; overscroll-behavior: contain; animation: rise .28s ease both; scrollbar-width: none; }
.view::-webkit-scrollbar { display: none; }
.view.active { display: block; }
#discoverView.active { display: flex; flex-direction: column; overflow: hidden; }
.view h2 { margin: .4rem 0 1rem; font-size: 1.65rem; font-weight: 900; }
.deck { position: relative; flex: 1 1 auto; height: auto; min-height: 0; }
.profile-swipe-card { --card-start: #6ed2ff; --card-end: #2a536c; --fx-color-1: #31c6c4; --fx-color-2: #ffc64b; --fx-color-3: #ff6f68; --fx-angle: 135deg; --fx-speed: 8s; --fx-play: running; position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: white; background: linear-gradient(145deg, var(--card-start), var(--card-end)); border-radius: 1.4rem; box-shadow: var(--shadow); touch-action: pan-y; user-select: none; transition: transform .28s ease, opacity .28s ease; }
.profile-swipe-card.dragging { transition: none; }
.profile-swipe-card[data-tone="coral"] { --card-start: #ff9a8d; --card-end: #384061; }
.profile-swipe-card[data-tone="aqua"] { --card-start: #64d7e3; --card-end: #21586e; }
.profile-swipe-card[data-tone="mint"] { --card-start: #90e7c7; --card-end: #2a6170; }
.profile-swipe-card[data-tone="sun"] { --card-start: #ffd46a; --card-end: #5e5877; }
.profile-swipe-card.owned-border_aura { border: 4px solid var(--fx-color-1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-color-2) 48%, transparent), 0 18px 48px color-mix(in srgb, var(--fx-color-3) 32%, transparent); animation: auraBreathe var(--fx-speed) ease-in-out infinite; animation-play-state: var(--fx-play); }
.profile-swipe-card.owned-border_sunrise { border: 4px solid var(--fx-color-1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fx-color-2) 32%, transparent), var(--shadow); animation: sunriseGlow var(--fx-speed) ease-in-out infinite; animation-play-state: var(--fx-play); }
.profile-swipe-card.owned-border_soft_glow { border: 3px solid var(--fx-color-1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-color-2) 46%, transparent), 0 18px 48px color-mix(in srgb, var(--fx-color-3) 34%, transparent); }
.profile-swipe-card.owned-border_sparkle { border: 4px dashed var(--fx-color-1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fx-color-2) 28%, transparent), var(--shadow); animation: sparkleShift var(--fx-speed) linear infinite; animation-play-state: var(--fx-play); }
.profile-swipe-card.owned-border_prism, .profile-swipe-card.owned-border_ribbon { border: 5px solid transparent; background: linear-gradient(145deg, var(--card-start), var(--card-end)) padding-box, linear-gradient(var(--fx-angle), var(--fx-color-1), var(--fx-color-2), var(--fx-color-3), var(--fx-color-1)) border-box; background-size: 100% 100%, 240% 240%; animation: gradientOrbit var(--fx-speed) ease-in-out infinite; animation-play-state: var(--fx-play); }
.profile-swipe-card.owned-border_ribbon { border-width: 4px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-2) 22%, transparent), var(--shadow); }
.profile-swipe-card.owned-border_bubble { border: 5px dotted var(--fx-color-1); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fx-color-2) 28%, transparent), 0 16px 38px color-mix(in srgb, var(--fx-color-3) 25%, transparent); animation: bubbleBorder var(--fx-speed) ease-in-out infinite; animation-play-state: var(--fx-play); }
.profile-swipe-card.owned-border_comet { border: 4px solid var(--fx-color-1); box-shadow: 8px -8px 0 -3px var(--fx-color-2), -8px 8px 0 -3px var(--fx-color-3), 0 0 28px color-mix(in srgb, var(--fx-color-1) 52%, transparent), var(--shadow); animation: cometTrace var(--fx-speed) ease-in-out infinite; animation-play-state: var(--fx-play); }
.profile-swipe-card.owned-border_neon { border: 4px solid var(--fx-color-1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fx-color-2) 28%, transparent), 0 0 32px color-mix(in srgb, var(--fx-color-3) 70%, transparent), var(--shadow); animation: neonPulse var(--fx-speed) ease-in-out infinite; animation-play-state: var(--fx-play); }
.profile-swipe-card.boosted { animation: boostPulse 2.4s ease-in-out infinite; }
.boost-badge { position: absolute; left: 1rem; top: 1rem; z-index: 2; padding: .45rem .7rem; background: rgba(255, 198, 75, .92); color: #5a3d00; border-radius: 999px; font-size: .78rem; font-weight: 900; }
.profile-art { position: absolute; inset: 0; display: grid; place-items: center; font-size: 8rem; font-weight: 900; color: rgba(255, 255, 255, .88); }
.swipe-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-art::before, .profile-art::after { position: absolute; content: ""; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.profile-art::before { width: 11rem; height: 11rem; transform: translateY(-2rem); }
.profile-art::after { width: 18rem; height: 18rem; opacity: .35; transform: translate(5rem, 5rem); }
.profile-art span { z-index: 1; }
.card-menu { position: absolute; top: 1rem; right: 1rem; z-index: 3; }
.card-body-safe { position: relative; padding: 1.25rem; background: linear-gradient(180deg, transparent, rgba(10, 18, 34, .82) 30%, rgba(10, 18, 34, .92)); }
.profile-title { display: flex; align-items: center; gap: .45rem; }
.profile-title h2 { margin: 0; color: white; font-size: 2rem; line-height: 1; }
.verified { color: #88f1df; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .75rem 0; }
.chips span { padding: .45rem .7rem; color: var(--ink); background: rgba(255, 255, 255, .92); border-radius: 999px; font-size: .8rem; font-weight: 800; }
.distance, .card-copy { margin: 0; color: rgba(255, 255, 255, .9); }
.report-link { color: white; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; padding: .45rem .75rem; font-weight: 800; backdrop-filter: blur(12px); }
.action-row { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: .6rem .65rem .5rem; }
.swipe-btn { display: grid; width: clamp(3.5rem, 16vw, 4.25rem); height: clamp(3.5rem, 16vw, 4.25rem); place-items: center; justify-self: center; background: white; border: 2px solid currentColor; border-radius: 50%; font-size: 1.75rem; box-shadow: 0 12px 28px rgba(17, 24, 47, .12); transition: transform .18s ease; }
.swipe-btn small { margin-top: -.8rem; font-size: .65rem; font-weight: 900; }
.swipe-btn:active { transform: scale(.93); }
.swipe-btn:disabled { opacity: .35; cursor: not-allowed; }
.profile-swipe-card.swipe-left { opacity: 0; transform: translateX(-120%) rotate(-12deg); }
.profile-swipe-card.swipe-right { opacity: 0; transform: translateX(120%) rotate(12deg); }
.skip { color: var(--coral); } .super { color: var(--sun); } .like { color: var(--aqua); }
.empty-state { display: grid; min-height: 14rem; padding: 2rem; place-items: center; align-content: center; gap: .5rem; color: var(--muted); text-align: center; background: white; border: 1px dashed rgba(18, 24, 47, .18); border-radius: 1.2rem; }
.empty-state i { color: var(--aqua); font-size: 2rem; }
.empty-state strong { color: var(--ink); font-size: 1.05rem; }
.empty-state p { margin: 0; font-size: .85rem; }
.profile-avatar { display: grid; width: 5rem; height: 5rem; margin-bottom: .8rem; place-items: center; color: white; background: linear-gradient(135deg, var(--coral), var(--aqua)); border-radius: 1.2rem; font-size: 2rem; font-weight: 900; }
.profile-avatar.photo, .mini-avatar.photo { object-fit: cover; }
.verified-badge { color: var(--aqua); font-size: .95em; }
.photo-upload { display: grid; gap: .45rem; margin: 1rem 0; padding: .9rem; background: #f7fbfb; border: 1px solid var(--line); border-radius: 1rem; }
.photo-upload p { font-size: .75rem; line-height: 1.4; }
.profile-edit-form { display: grid; gap: .55rem; margin: 1rem 0; }
.profile-edit-form h4 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 900; }
.profile-edit-form .form-label { margin: .15rem 0 -.25rem; }
.profile-card h3 { font-size: 1.35rem; font-weight: 900; }
.account-status { display: grid; gap: .55rem; margin: 1rem 0; }
.account-status div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); }
.account-status dt, .account-status dd { margin: 0; font-size: .8rem; }
.account-status dd { color: var(--muted); font-weight: 800; text-transform: capitalize; }
.privacy-settings { display: grid; gap: .6rem; margin: 1rem 0 1.2rem; padding: .9rem; background: #f7fbfb; border-radius: 1rem; }
.privacy-settings h4 { margin: 0 0 .25rem; font-size: 1rem; font-weight: 900; }
.privacy-settings .form-check { display: flex; justify-content: space-between; gap: 1rem; min-height: auto; margin: 0; padding: 0; }
.privacy-settings .form-check-input { order: 2; margin: .1rem 0 0; }
.privacy-settings span { font-size: .82rem; font-weight: 800; }
.bottom-nav { z-index: 50; display: grid; grid-row: 4; grid-column: 1; width: 100%; min-height: calc(4.5rem + env(safe-area-inset-bottom)); grid-auto-flow: column; grid-auto-columns: minmax(3.35rem, 1fr); gap: .1rem; padding: .55rem .35rem calc(.55rem + env(safe-area-inset-bottom)); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: var(--navy); border-radius: 1.35rem 1.35rem 0 0; box-shadow: 0 -18px 40px rgba(17, 24, 47, .22); }
.bottom-nav::-webkit-scrollbar { display: none; }
.bottom-nav button { position: relative; display: grid; min-width: 0; gap: .15rem; color: rgba(255, 255, 255, .66); background: none; border: 0; font-size: .6rem; font-weight: 800; }
.nav-badge { position: absolute; top: -.1rem; left: calc(50% + .45rem); display: grid; min-width: 1.05rem; height: 1.05rem; padding: 0 .22rem; place-items: center; color: white; background: var(--coral); border: 2px solid var(--navy); border-radius: 999px; font-size: .52rem; line-height: 1; }
.bottom-nav i { font-size: 1.25rem; }
.bottom-nav button.active { color: var(--coral); }
.stack-list, .safety-grid, .store-list, .reward-list, .coin-pack-list, .moderation-list, .ticket-list { display: grid; gap: .85rem; }
.list-card, .shop-item, .reward-item, .coin-pack { display: flex; align-items: center; gap: .8rem; padding: .85rem; background: white; border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: 0 10px 24px rgba(17, 24, 47, .07); }
.shop-item, .reward-item, .coin-pack { justify-content: space-between; align-items: flex-start; }
.shop-item p, .reward-item p, .coin-pack p { margin: .15rem 0; color: var(--muted); font-size: .86rem; }
.mini-type { color: var(--aqua); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.wallet-card { margin-bottom: .9rem; box-shadow: 0 10px 24px rgba(17, 24, 47, .07); }
.wallet-card h3 { font-size: 1.08rem; font-weight: 900; }
.coin-status { color: #7a5600; background: rgba(255, 198, 75, .24); }
.premium-preview { position: relative; height: 18rem; margin: .85rem 0 1rem; }
.premium-preview .preview-card { position: relative; inset: auto; height: 100%; min-height: 0; }
.effect-customizer { display: none; margin: -.15rem 0 1rem; padding: 1rem; background: #f7fbfb; border: 1px solid var(--line); border-radius: 1rem; }
.effect-customizer.open { display: block; animation: customizerIn .25s ease both; }
.effect-customizer.locked { padding: .85rem; }
.customizer-locked, .customizer-head { display: flex; align-items: center; gap: .75rem; }
.customizer-locked > i { display: grid; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; place-items: center; color: #7a5600; background: rgba(255, 198, 75, .24); border-radius: .75rem; }
.customizer-locked p, .customizer-head p { margin: .1rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.customizer-head { justify-content: space-between; margin-bottom: .9rem; }
.customizer-head > i { color: var(--coral); font-size: 1.35rem; }
.color-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.color-row label { display: grid; gap: .3rem; color: var(--muted); font-size: .7rem; font-weight: 900; text-align: center; }
.color-row input[type="color"] { width: 100%; height: 2.75rem; padding: .2rem; background: white; border: 1px solid var(--line); border-radius: .75rem; cursor: pointer; }
.preset-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .8rem 0; }
.gradient-preset { height: 2.2rem; background: var(--preset); border: 3px solid white; border-radius: .7rem; box-shadow: 0 0 0 1px var(--line); transition: transform .18s ease; }
.gradient-preset:active { transform: scale(.94); }
.angle-control { display: grid; gap: .35rem; margin: .7rem 0; }
.angle-control > span, .motion-control > span { display: flex; justify-content: space-between; color: var(--ink); font-size: .78rem; font-weight: 900; }
.angle-control input { accent-color: var(--aqua); }
.motion-control > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; margin-top: .4rem; padding: .3rem; background: white; border: 1px solid var(--line); border-radius: .8rem; }
.motion-control button { min-height: 2rem; color: var(--muted); background: transparent; border: 0; border-radius: .55rem; font-size: .72rem; font-weight: 900; }
.motion-control button.active { color: white; background: var(--navy); }
.customizer-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: .5rem; margin-top: .85rem; }
.customizer-actions .btn { min-height: 2.45rem; border-radius: .75rem; font-size: .78rem; font-weight: 900; }
.shop-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; padding: .35rem; margin: .9rem 0; background: #f7fbfb; border: 1px solid var(--line); border-radius: 1rem; }
.shop-tabs button { min-height: 2.35rem; color: var(--muted); background: transparent; border: 0; border-radius: .75rem; font-size: .78rem; font-weight: 900; }
.shop-tabs button.active { color: white; background: var(--navy); }
.shop-item.previewing { border-color: rgba(49, 198, 196, .45); box-shadow: 0 0 0 4px rgba(49, 198, 196, .1), 0 10px 24px rgba(17, 24, 47, .07); }
.shop-item.selected { border-color: rgba(49, 198, 196, .45); box-shadow: 0 0 0 3px rgba(49, 198, 196, .09); }
.shop-select { display: flex; min-width: 0; align-items: center; gap: .65rem; padding: 0; color: var(--ink); text-align: left; background: transparent; border: 0; }
.shop-select strong, .shop-select small { display: block; }
.shop-select small { color: var(--muted); }
.effect-swatch { display: block; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, var(--coral), var(--aqua)); border: 3px solid var(--sun); border-radius: .75rem; }
.shop-preview { position: relative; inset: auto; width: 100%; height: 15rem; }
.shop-preview .profile-art { font-size: 5rem; }
.gradient-controls { display: grid; gap: .7rem; margin-top: .8rem; padding: .8rem; background: #f7fbfb; border: 1px solid var(--line); border-radius: .9rem; }
.gradient-controls label > span { display: block; margin-bottom: .25rem; color: var(--muted); font-size: .72rem; font-weight: 900; }
.color-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; }
.color-row input[type="color"] { width: 100%; height: 2.4rem; padding: .15rem; background: white; border: 1px solid var(--line); border-radius: .6rem; }
.shop-actions { display: grid; gap: .35rem; justify-items: end; min-width: 6.5rem; }
.shop-actions .btn { width: 100%; border-radius: .8rem; font-weight: 900; }
.effect-control-list { display: grid; gap: .65rem; }
.effect-control { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; background: #f7fbfb; border: 1px solid var(--line); border-radius: .95rem; }
.effect-control p { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 800; }
.effect-control .btn { border-radius: .8rem; font-weight: 900; }
.name-gradient, .name-duotone, .name-spectrum, .name-bubble, .name-echo { color: transparent !important; background: linear-gradient(var(--fx-angle, 90deg), var(--fx-color-1, #ff746d), var(--fx-color-2, #ffc64b), var(--fx-color-3, #31c6c4)); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.name-shimmer { color: transparent !important; background: linear-gradient(var(--fx-angle, 90deg), var(--fx-color-1, #fff), var(--fx-color-2, #a7fff1), var(--fx-color-3, #fff)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmerName var(--fx-speed, 8s) ease-in-out infinite; animation-play-state: var(--fx-play, running); text-shadow: none; }
.name-duotone { background-size: 180% 100%; }
.name-spectrum { background-size: 240% 100%; animation: spectrumSlide var(--fx-speed, 8s) ease-in-out infinite; animation-play-state: var(--fx-play, running); }
.name-bubble { filter: drop-shadow(0 3px 0 color-mix(in srgb, var(--fx-color-2) 34%, transparent)); animation: bubbleName var(--fx-speed, 8s) ease-in-out infinite; animation-play-state: var(--fx-play, running); }
.name-echo { filter: drop-shadow(2px 2px 0 color-mix(in srgb, var(--fx-color-3) 48%, transparent)); background-size: 180% 100%; animation: echoName var(--fx-speed, 8s) ease-in-out infinite; animation-play-state: var(--fx-play, running); }
.name-outline { color: white !important; -webkit-text-stroke: 1px rgba(18, 24, 47, .35); text-shadow: 0 2px 0 rgba(18, 24, 47, .25); }
.list-card .name-outline { color: var(--ink) !important; -webkit-text-stroke: .7px rgba(49, 198, 196, .45); text-shadow: none; }
.name-soft-glow { color: #faffff !important; text-shadow: 0 0 12px rgba(137, 223, 196, .95), 0 2px 10px rgba(18, 24, 47, .22); }
.list-card .name-soft-glow { color: var(--ink) !important; text-shadow: 0 0 10px rgba(49, 198, 196, .42); }
.name-underline { position: relative; color: inherit; }
.name-underline::after { position: absolute; left: 0; right: 0; bottom: -.18rem; height: .2rem; content: ""; background: linear-gradient(90deg, var(--coral), var(--sun), var(--aqua)); border-radius: 999px; transform-origin: left; animation: underlineGrow 2.6s ease-in-out infinite; }
.avatar { display: grid; flex: 0 0 auto; width: 3.1rem; height: 3.1rem; place-items: center; color: white; background: linear-gradient(135deg, var(--coral), var(--aqua)); border-radius: 1rem; font-weight: 900; }
.avatar-lg { width: 5rem; height: 5rem; margin-bottom: 1rem; border-radius: 1.5rem; font-size: 2rem; }
.list-card p, .profile-card p { margin: 0; color: var(--muted); }
.list-card strong { display: block; }
.list-card .ms-auto { display: flex; gap: .35rem; }
.safety-grid article, .kpi, .admin-metric, .admin-panel, .moderation-card { padding: 1rem; background: white; border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: 0 10px 24px rgba(17, 24, 47, .07); }
.safety-grid i { color: var(--aqua); font-size: 1.8rem; }
.safety-grid h3, .profile-card h3 { margin: .45rem 0 .25rem; font-size: 1.05rem; font-weight: 900; }
#matchesView.active { position: relative; }
.chat-panel { position: absolute; inset: .55rem 1rem 1rem; z-index: 45; display: flex; min-height: 0; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: var(--shadow); overflow: hidden; }
.chat-head, .message-form { display: flex; align-items: center; gap: .6rem; padding: .8rem; background: white; border-bottom: 1px solid var(--line); font-weight: 900; }
.message-form { border-top: 1px solid var(--line); border-bottom: 0; }
.messages { display: flex; flex: 1; flex-direction: column; gap: .65rem; padding: 1rem; overflow-y: auto; }
.chat-monitor-notice { display: flex; align-items: flex-start; gap: .55rem; padding: .65rem .8rem; color: #5d4800; background: #fff6d8; border-bottom: 1px solid rgba(255,198,75,.4); font-size: .72rem; font-weight: 800; line-height: 1.35; }
.chat-monitor-notice i { flex: 0 0 auto; font-size: 1rem; }
.chat-monitor-notice button { flex: 0 0 auto; margin: -.15rem -.25rem 0 auto; padding: .15rem; color: inherit; background: transparent; border: 0; }
.message { max-width: 84%; padding: .7rem .8rem; background: white; border: 1px solid var(--line); border-radius: 1rem 1rem 1rem .25rem; box-shadow: 0 8px 18px rgba(17,24,47,.06); }
.message.mine { align-self: flex-end; color: white; background: var(--aqua); border-color: transparent; border-radius: 1rem 1rem .25rem 1rem; }
.message strong, .message small { display: block; font-size: .68rem; }
.message p { margin: .15rem 0; font-size: .88rem; }
.message small { opacity: .72; }
.moderation-messages { min-height: 16rem; max-height: 55vh; background: #f7fbfb; border-radius: 1rem; }
.verification-photo { width: 100%; aspect-ratio: 1; margin-bottom: .75rem; object-fit: cover; border-radius: .9rem; }
.verification-review-photo { display: block; width: min(100%, 24rem); max-height: 24rem; margin: 0 auto .85rem; object-fit: contain; background: #eef7f7; border: 1px solid var(--line); border-radius: .5rem; }
.verification-review-meta { padding: .7rem; color: var(--muted); background: #f4f9f9; border-radius: .5rem; font-size: .8rem; font-weight: 800; }
.verification-decisions { display: grid; grid-template-columns: 1fr 1fr; }
.moderation-history { display: grid; gap: .45rem; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.moderation-history > strong { font-size: .82rem; }
.moderation-history > div { padding: .6rem; background: #f4f9f9; border-left: 3px solid var(--aqua); border-radius: .35rem; }
.moderation-history span, .moderation-history small { display: block; color: var(--muted); font-size: .68rem; font-weight: 800; }
.moderation-history p { margin: .2rem 0; font-size: .78rem; }
.bubble { max-width: 82%; padding: .7rem .85rem; background: white; border-radius: 1rem 1rem 1rem .25rem; box-shadow: 0 8px 18px rgba(17, 24, 47, .06); }
.bubble.me { align-self: flex-end; color: white; background: var(--aqua); border-radius: 1rem 1rem .25rem 1rem; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.section-head p { margin: 0; color: var(--muted); font-size: .9rem; }
.ticket-create-btn { flex: 0 0 auto; color: white; background: var(--coral); border-color: transparent; }
.ticket-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-bottom: .75rem; }
.ticket-summary div { min-width: 0; padding: .75rem .6rem; background: white; border: 1px solid var(--line); border-radius: .9rem; box-shadow: 0 8px 20px rgba(17, 24, 47, .06); }
.ticket-summary span { display: block; min-height: 2.2em; color: var(--muted); font-size: .68rem; font-weight: 900; line-height: 1.1; }
.ticket-summary strong { display: block; margin-top: .25rem; font-size: 1.45rem; line-height: 1; }
.ticket-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; margin-bottom: .85rem; padding: .3rem; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: .9rem; }
.ticket-tabs button { min-height: 2.2rem; padding: .25rem; color: var(--muted); background: transparent; border: 0; border-radius: .65rem; font-size: .68rem; font-weight: 900; line-height: 1.05; }
.ticket-tabs button.active { color: white; background: var(--navy); }
.ticket-card { width: 100%; padding: .9rem; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 1.05rem; box-shadow: 0 10px 24px rgba(17, 24, 47, .07); transition: transform .18s ease, border-color .18s ease; }
.ticket-card:active { transform: scale(.985); }
.ticket-card-top, .ticket-detail-status { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.ticket-id { color: var(--aqua); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.ticket-card > strong { display: block; font-size: .98rem; }
.ticket-card > p { display: -webkit-box; margin: .25rem 0 .7rem; overflow: hidden; color: var(--muted); font-size: .83rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ticket-description { padding: .8rem; color: var(--muted); background: #f7fbfb; border-radius: .8rem; }
.ticket-conversation { display: grid; gap: .65rem; margin: 1rem 0; }
.ticket-message { padding: .7rem .8rem; background: white; border: 1px solid var(--line); border-radius: .85rem; }
.ticket-message.internal { background: #fff6d8; border-color: rgba(255,198,75,.45); }
.ticket-message strong, .ticket-message small { display: block; font-size: .7rem; }
.ticket-message p { margin: .2rem 0; font-size: .86rem; }
.ticket-message small { color: var(--muted); }
.ticket-reply-form { padding-top: .8rem; border-top: 1px solid var(--line); }
.reward-quiz { display: grid; gap: .55rem; }
.reward-quiz .form-label { margin: .25rem 0 -.25rem; }
.ticket-meta { display: flex; flex-wrap: wrap; gap: .45rem .7rem; color: var(--muted); font-size: .68rem; font-weight: 800; }
.priority-text { color: #a13c33; }
.info-pill { color: #315f8c; background: rgba(84, 168, 255, .16); }
.ticket-detail-status > span:last-child { color: var(--muted); font-size: .78rem; font-weight: 800; }
.ticket-description { padding: .85rem; color: var(--ink); background: #f7fbfb; border-radius: .8rem; font-size: .9rem; }
.ticket-timeline { position: relative; display: grid; gap: .75rem; margin: 1rem 0; }
.timeline-entry { display: grid; grid-template-columns: 1.8rem 1fr; gap: .55rem; }
.timeline-entry > i { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; color: var(--aqua); background: rgba(49, 198, 196, .12); border-radius: .55rem; }
.timeline-entry.internal > i { color: #7a5600; background: rgba(255, 198, 75, .2); }
.timeline-entry strong, .timeline-entry span { display: block; font-size: .75rem; }
.timeline-entry span { color: var(--muted); }
.timeline-entry p { margin: .2rem 0 0; font-size: .88rem; }
.ticket-reply { padding-top: .85rem; border-top: 1px solid var(--line); }
.ticket-staff-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.ticket-staff-actions:empty { display: none; }
.ticket-staff-actions .btn { border-radius: .75rem; font-size: .75rem; font-weight: 900; }
.role-line { margin-bottom: .65rem !important; font-weight: 900; }
.moderator-brief { display: flex; gap: .75rem; margin-bottom: .8rem; padding: .85rem; color: #176966; background: rgba(137, 223, 196, .2); border: 1px solid rgba(49, 198, 196, .24); border-radius: 1rem; }
.moderator-brief > i { flex: 0 0 auto; font-size: 1.4rem; }
.moderator-brief p { margin: .1rem 0 0; color: #327a78; font-size: .78rem; line-height: 1.35; }
.moderation-toolbar { display: grid; gap: .5rem; margin-bottom: .65rem; }
.moderation-toolbar .input-group-text { color: var(--aqua); background: white; border-color: var(--line); border-radius: .8rem 0 0 .8rem; }
.moderation-toolbar .form-control, .moderation-toolbar .form-select { min-height: 2.55rem; font-size: .8rem; }
.mod-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; padding: .35rem; margin-bottom: .9rem; background: rgba(255, 255, 255, .72); border: 1px solid var(--line); border-radius: 1rem; }
.mod-tabs button { min-height: 2.35rem; color: var(--muted); background: transparent; border: 0; border-radius: .75rem; font-size: .84rem; font-weight: 900; }
.mod-tabs button.active { color: white; background: var(--navy); }
.moderation-kpis, .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: .9rem; }
.kpi span, .admin-metric span { display: block; color: var(--muted); font-size: .78rem; font-weight: 900; line-height: 1.15; }
.kpi strong, .admin-metric strong { display: block; margin-top: .35rem; font-size: 2rem; line-height: 1; }
.kpi.ok, .admin-metric.ok { border-color: rgba(49, 198, 196, .28); }
.kpi.watch, .admin-metric.watch { border-color: rgba(255, 198, 75, .42); }
.kpi.alert, .admin-metric.alert { border-color: rgba(255, 111, 104, .42); }
.admin-metric i { color: var(--aqua); font-size: 1.35rem; }
.moderation-card.priority-high { border-color: rgba(255, 111, 104, .38); }
.mod-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .6rem; }
.case-type { color: var(--aqua); font-size: .74rem; font-weight: 900; text-transform: uppercase; }
.moderation-card h3, .admin-panel h3 { margin: .15rem 0 .2rem; font-size: 1.04rem; font-weight: 900; }
.moderation-card p { margin: .25rem 0; color: var(--muted); font-size: .9rem; }
.status-pill { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; padding: .4rem .58rem; border-radius: 999px; font-size: .72rem; font-weight: 900; }
.alert-pill { color: #8e2c24; background: rgba(255, 111, 104, .18); }
.watch-pill { color: #7a5600; background: rgba(255, 198, 75, .22); }
.ok-pill { color: #16716f; background: rgba(49, 198, 196, .16); }
.mod-status { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; color: var(--ink); font-size: .82rem; font-weight: 900; }
.mod-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .85rem; }
.mod-actions .btn { border-radius: .8rem; font-weight: 900; }
.case-context { display: grid; gap: .5rem; }
.case-context .status-pill { width: fit-content; }
.case-context p { margin: 0; color: var(--muted); }
.case-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin: 1rem 0; }
.case-evidence div { min-width: 0; padding: .65rem; background: #f7fbfb; border-radius: .75rem; }
.case-evidence span, .case-evidence strong { display: block; overflow-wrap: anywhere; font-size: .68rem; }
.case-evidence span { color: var(--muted); }
.case-note-list { display: grid; gap: .5rem; }
.case-note-list > div { display: flex; gap: .5rem; padding: .65rem; background: rgba(255, 198, 75, .12); border-radius: .75rem; }
.case-note-list p { margin: 0; font-size: .78rem; }
.case-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.case-tool-grid .btn { font-size: .75rem; font-weight: 900; }
.admin-panel { margin-bottom: .8rem; }
.staff-list, .audit-list { display: grid; gap: .55rem; }
.staff-row { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) minmax(6.6rem, 8.5rem); gap: .55rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.staff-row:last-child { border-bottom: 0; }
.staff-avatar { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; color: white; background: linear-gradient(135deg, var(--aqua), var(--coral)); border-radius: .7rem; font-weight: 900; }
.staff-row strong, .staff-row span { display: block; }
.staff-row span { color: var(--muted); font-size: .7rem; }
.staff-row .form-select { font-size: .72rem; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-controls { display: grid; gap: .35rem; }
.staff-disabled { color: #16716f; background: rgba(137, 223, 196, .18); }
.audit-entry { display: grid; grid-template-columns: 2rem 1fr; gap: .55rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.audit-entry:last-child { border-bottom: 0; }
.audit-entry > i { color: var(--aqua); }
.audit-entry strong { display: block; font-size: .8rem; text-transform: capitalize; }
.audit-entry p, .audit-entry span { margin: 0; color: var(--muted); font-size: .7rem; }
.match-content { border: 0; border-radius: 1.6rem; background: linear-gradient(145deg, #fff, #edfffb); }
.match-burst { display: grid; width: 5rem; height: 5rem; margin: 0 auto 1rem; place-items: center; color: white; background: linear-gradient(135deg, var(--coral), var(--sun)); border-radius: 50%; font-size: 2.2rem; animation: pop .65s cubic-bezier(.2, 1.3, .32, 1); }
.safety-modal-list { display: grid; gap: .8rem; }
.safety-modal-list div { display: flex; gap: .7rem; padding: .85rem; background: #f7fbfb; border-radius: 1rem; }
.safety-modal-list i { color: var(--aqua); font-size: 1.25rem; }
.toast-safe { position: fixed; left: 50%; bottom: 6.6rem; z-index: 100; width: min(calc(100% - 2rem), 390px); padding: .85rem 1rem; color: white; background: var(--navy); border-radius: 1rem; box-shadow: var(--shadow); transform: translateX(-50%); animation: toastIn .25s ease both; }
@keyframes rise { from { opacity: .35; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(.65) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, .75rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes boostPulse { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 7px rgba(255, 198, 75, .2), var(--shadow); } }
@keyframes shimmerName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes underlineGrow { 0%, 100% { transform: scaleX(.55); } 50% { transform: scaleX(1); } }
@keyframes sparkleShift { 0%, 100% { border-color: var(--fx-color-1); } 50% { border-color: var(--fx-color-2); } }
@keyframes neonPulse { 0%, 100% { filter: saturate(.9); } 50% { filter: saturate(1.25); } }
@keyframes auraBreathe { 0%, 100% { filter: saturate(.9); } 50% { filter: saturate(1.16); } }
@keyframes sunriseGlow { 0%, 100% { border-color: var(--fx-color-1); } 50% { border-color: var(--fx-color-2); } }
@keyframes gradientOrbit { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
@keyframes bubbleBorder { 0%, 100% { border-color: var(--fx-color-1); } 50% { border-color: var(--fx-color-3); } }
@keyframes cometTrace { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(18deg); } }
@keyframes spectrumSlide { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes bubbleName { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
@keyframes echoName { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 80% 50%; } }
@keyframes customizerIn { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 431px) { .app-shell { box-shadow: 0 0 0 1px rgba(18, 24, 47, .08), var(--shadow); } }
.legal-page { width: min(100% - 2rem, 46rem); margin: 0 auto; padding: 3rem 0; }
.legal-page h1 { font-weight: 900; }
.legal-page h2 { margin-top: 2rem; font-size: 1.15rem; font-weight: 900; }
.legal-page p { color: var(--muted); line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }