/* Generated by scripts/build-auth-css.cjs; source: app.css + auth templates. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/static/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --bg: #0B111E; --surface: #111A2B; --raised: #18233A; --line: rgba(226, 236, 250, 0.08); --line-strong: rgba(226, 236, 250, 0.14); --text: #F1F5FB; --muted: #9DB0CC; --faint: #6E82A2; --accent: #5A9BE0; --accent-strong: #3D7EC7; --accent-deep: #2C5F9E; --accent-soft: rgba(61, 126, 199, 0.14); --accent-line: rgba(90, 155, 224, 0.42); --link: #7CB3EC; --gold: #E9BD68; --coin-glow: rgba(233, 189, 104, 0.38); --wine: #C74965; --rose: #D96A82; --win: #3FBF87; --sheen: linear-gradient(180deg, rgba(226, 236, 250, 0.05), transparent 42%); --ease: cubic-bezier(.22, 1, .36, 1); --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --shadow-md: 0 8px 24px -12px rgba(4, 10, 22, 0.7); --shadow-lg: 0 24px 60px -24px rgba(4, 10, 22, 0.8); --radius: var(--r-md); --launch: var(--bg); --paper: var(--text); --action: var(--accent-strong); }
*, ::before, ::after { box-sizing: border-box; }
html, body { margin: 0px; min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; color: var(--text); font: 400 16px / 1.55 Inter, "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; background: linear-gradient(180deg, #101828 0, var(--bg) 780px) no-repeat, var(--bg); }
body::before { content: ""; position: fixed; inset: 0px; pointer-events: none; z-index: 0; background: radial-gradient(70% 42% at 50% -8%, rgba(61, 126, 199, 0.22), transparent 62%); }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--text); }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }
button, .btn, .sso-btn, .seg-opt, .role-card, .linkish, .pw-toggle, .dash-balance, summary, [data-open-email], [data-copy], [data-copy-target], input[type="submit"], input[type="button"], input[type="reset"], input[type="file"] { cursor: pointer; }
a[href] { cursor: pointer; }
input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="tel"], input[type="search"], input[type="url"], textarea { cursor: text; }
select { cursor: pointer; }
button:disabled, .btn:disabled, .sso-btn:disabled, [aria-disabled="true"] { cursor: not-allowed; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }
.top { position: sticky; top: 0px; z-index: 20; background: rgba(11, 17, 30, 0.76); backdrop-filter: blur(22px) saturate(150%); border-bottom: 1px solid var(--line); }
.top-inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img, .brand .brand-lockup { display: block; height: 32px; width: auto; }
.pay-mark { display: block; margin: 0px 0px 18px; border-radius: 14px; }
.desk { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 0.85rem; font-weight: 680; flex: 1 1 0%; min-width: 0px; overflow-x: auto; scrollbar-width: none !important; }
.desk::-webkit-scrollbar { display: none !important; width: 0px !important; height: 0px !important; }
.desk a, .sheet a { color: var(--muted); }
.desk a:hover, .sheet a:hover { color: var(--text); }
.desk .btn.sm { color: rgb(255, 255, 255); }
.top-inner > .lang { margin-left: 4px; flex-shrink: 0; }
.lang { position: relative; flex-shrink: 0; }
.lang-btn { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; box-sizing: border-box; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--muted); padding: 0px; }
.lang-btn:hover, .lang[open] > .lang-btn { color: var(--text); background: var(--raised); border-color: var(--line); }
.lang-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.lang-btn::-webkit-details-marker { display: none; }
.lang-flag { display: inline-flex; align-items: center; justify-content: center; }
.lang-flag img { display: none !important; }
.lang-flag::before { content: ""; display: block; width: 22px; height: 22px; background: currentcolor; mask: url("/static/icons/language.svg") center center / contain no-repeat; }
.lang-menu { position: absolute; right: 0px; top: calc(100% + 8px); min-width: 168px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 6px; display: grid; gap: 2px; box-shadow: var(--shadow-lg); z-index: 30; }
.lang-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); font-weight: 700; font-size: 14px; text-decoration: none; }
.lang-menu a:hover, .lang-menu a.on { color: var(--text); background: var(--raised); }
.sheet .lang { margin: 6px 0px; }
.sheet .lang-menu { position: static; box-shadow: none; }
.user-nav-badge, .who { display: flex; align-items: center; gap: 12px; margin-left: 6px; padding-left: 18px; border-left: 1px solid var(--line); }
.user-nav-name, .who-name { color: var(--text); font-weight: 700; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-user-header { padding: 8px 0px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.mob-user-name { color: rgb(255, 255, 255); font-weight: 700; font-size: 1.05rem; }
.mob { display: none; position: relative; }
.mob summary { list-style: none; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--raised); display: grid; place-content: center; gap: 5px; cursor: pointer; }
.mob summary::-webkit-details-marker { display: none; }
.mob summary span { display: block; width: 16px; height: 1.5px; background: var(--text); }
.sheet { position: absolute; right: 0px; top: calc(100% + 8px); min-width: 228px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg); }
main.wrap { flex: 1 1 0%; padding: 48px 0px 80px; }
footer { position: relative; z-index: 1; color: var(--faint); font-size: 12px; padding: 28px 16px 40px; text-align: center; }
h1, h2, h3, p { margin-top: 0px; }
h1, h2 { font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.12; margin: 0px 0px 12px; }
h2 { font-size: 1.05rem; letter-spacing: -0.015em; margin: 0px 0px 14px; }
.kicker { color: var(--accent); letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; font-weight: 800; margin: 0px 0px 10px; }
.kicker .reg { letter-spacing: 0px; text-transform: none; top: -0.18em; }
.lede { color: var(--muted); max-width: 38rem; font-size: 1.05rem; line-height: 1.55; margin: 0px 0px 8px; }
.fine { font-size: 13px; color: var(--faint); margin-top: 18px; max-width: 32rem; }
.muted { color: var(--muted); }
code { font: 12px / 1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--raised); border: 1px solid var(--line); padding: 0.1rem 0.35rem; border-radius: 6px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.row.center { justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--control-height, 46px); padding: 0 var(--control-padding-inline, 20px); border: 1px solid transparent; border-radius: var(--control-radius, var(--r-md)); background: var(--control-primary-background, linear-gradient(180deg, var(--accent), var(--accent-strong))); color: var(--control-primary-text, #fff); font-weight: 760; cursor: pointer; box-shadow: rgba(255, 255, 255, 0.22) 0px 1px 0px inset, rgba(61, 126, 199, 0.6) 0px 12px 28px -14px; transition: transform .16s var(--ease), filter .16s var(--ease), border-color .16s var(--ease); }
.btn:hover { filter: brightness(1.08); color: rgb(255, 255, 255); transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; transform: none; }
.btn.is-busy { cursor: wait; }
.btn.ghost { background: rgba(24, 35, 58, 0.55); border-color: var(--line-strong); box-shadow: none; color: var(--text); }
.btn.ghost:hover { border-color: var(--accent-line); filter: none; }
.btn.wine { background: var(--wine); box-shadow: rgba(255, 255, 255, 0.16) 0px 1px 0px inset, rgba(199, 73, 101, 0.5) 0px 12px 28px -14px; }
.btn.xl { min-height: 50px; padding: 0px 22px; font-size: 1.02rem; width: 100%; }
.btn.sm { min-height: 40px; padding: 0px 15px; font-size: 0.82rem; }
.done-card .btn.xl { width: auto; min-width: 220px; }
.page { max-width: 820px; }
.page > .lede { margin-bottom: 8px; }
.page .surface { margin-top: 36px; }
.pay-flow, .auth, .dest-flow { max-width: 520px; margin: 0px auto; }
.pay-flow h1, .dest-flow h1 { font-size: clamp(1.8rem, 4vw, 2.25rem); }
.payout-card .empty { margin: 4px 0px 8px; }
.payout-card .fine { margin-top: 10px; }
.dest-now .kicker { margin-bottom: 6px; }
.dest-now .row { margin: 0px; flex-shrink: 0; }
.dest-now .btn { width: auto; }
.dest-opt .ico { width: 36px; height: 36px; border-radius: 10px; }
.dest-pane > .muted { margin: 0px 0px 12px; }
.dest-pane .btn { width: 100%; }
.dest-pane .stack { margin-top: 4px; }
.withdraw-bar .btn { width: auto; min-width: 7.5rem; min-height: 48px; }
@media (max-width: 560px) {
.withdraw-bar .btn { width: 100%; }
}
.hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 36rem; }
.hero .row { margin-top: 32px; }
.pay-mark { display: block; width: 52px; height: 52px; margin-bottom: 22px; }
.balance { font-size: clamp(3.2rem, 7vw, 4.6rem); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gold); letter-spacing: -0.04em; line-height: 1; margin: 0px 0px 12px; text-shadow: 0 0 40px var(--coin-glow); }
.balance span { font-size: 1.05rem; font-weight: 600; color: var(--muted); letter-spacing: 0px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0px 20px; }
.stats div { background: var(--sheen), var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px 18px; }
.stats span { display: block; color: var(--faint); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.stats strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.02em; }
.pack { background: var(--sheen), var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 22px 20px; position: relative; display: flex; flex-direction: column; min-height: 240px; box-shadow: var(--shadow-md); }
.pack h2 { margin: 0px 3rem 0px 0px; font-size: 1.05rem; }
.pack .pill.rec { position: absolute; top: 18px; right: 16px; }
.pack .muted { font-size: 13px; margin: 0px 0px 12px; }
.pack .btn.xl, .pack .paypal-btn { margin-top: auto; }
label { display: block; margin: 14px 0px 8px; color: var(--muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; }
input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="tel"], input:not([type]), select, textarea { width: 100%; background: var(--raised); border: 1px solid var(--line-strong); color: var(--text); padding: 14px; border-radius: 12px; }
input::placeholder { color: var(--faint); }
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stack { display: flex; flex-direction: column; gap: 2px; }
.stack .btn.xl { margin-top: 12px; }
.empty { color: var(--muted); border: 1px dashed var(--line-strong); padding: 28px 18px; border-radius: var(--r-lg); text-align: center; margin: 8px 0px 20px; }
.err { color: rgb(255, 192, 200); background: rgba(199, 73, 101, 0.14); border: 1px solid rgba(199, 73, 101, 0.32); padding: 12px 16px; border-radius: 12px; max-width: 640px; margin: 0px auto 20px; }
.toast { background: rgba(63, 191, 135, 0.12); border: 1px solid rgba(63, 191, 135, 0.32); color: rgb(184, 240, 200); padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; }
.feed li .muted { grid-column: 1; font-size: 12px; color: rgb(148, 163, 184); }
.feed li .num, .feed li .status { grid-area: 1 / 2 / span 2; align-self: center; }
.status { text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; font-weight: 800; }
.status.completed { color: var(--win); }
.status.pending, .status.processing { color: var(--gold); }
.status.failed, .status.returned { color: var(--wine); }
form.inline { display: inline; }
.linkish { background: none; border: 0px; color: var(--muted); cursor: pointer; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 680; }
.linkish:hover { color: var(--text); }
.list { list-style: none; padding: 0px; }
.list li { padding: 0.5rem 0px; border-bottom: 1px solid var(--line); }
fieldset { border: 1px solid var(--line-strong); border-radius: var(--r-md); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0px; border-bottom: 1px solid var(--line); }
.steps li.done, .steps li.current { color: var(--text); }
.steps li.done::before, .steps li.current::before { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.steps li.done::before { content: ""; background: var(--accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / 13px; border-color: var(--accent-strong); }
.pay-hero .lede { margin: 0px 0px 16px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0px; margin: 16px 0px 0px; }
.trust li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.trust li::before { content: ""; display: inline-block; width: 13px; height: 13px; flex-shrink: 0; background-color: var(--accent); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center center / contain no-repeat; }
.rail-card { background: var(--sheen), var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.rail-card.on { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.rail-head { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: transparent; border: 0px; padding: 16px 18px; color: inherit; cursor: pointer; text-decoration: none; }
.rail-head:hover { background: rgba(226, 236, 250, 0.03); }
a.rail-head:hover { color: inherit; }
.rail-copy { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0%; min-width: 0px; }
.rail-copy strong { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.rail-copy em { font-style: normal; color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rail-copy .id-check { width: 20px; height: 20px; margin-inline-start: 0px; }
.ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: var(--accent-soft) center/22px no-repeat; }
.ico.bank { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235A9BE0' viewBox='0 0 24 24'%3E%3Cpath d='M3 10h18v2H3zm2 3h2v6H5zm4 0h2v6H9zm4 0h2v6h-2zm4 0h2v6h-2zM12 3l9 6H3z'/%3E%3C/svg%3E"); }
.ico.pp { background-color: rgba(0, 121, 193, 0.12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.8 21.6h-3.6c-.3 0-.5-.2-.4-.5l3.1-18.8c0-.2.2-.3.4-.3h6.3c3.4 0 5.6 1.7 5.1 4.7-.6 3.6-3.1 5.6-6.6 5.6H9.9l-.9 5.8c0 .2-.2.3-.4.3h-.8z' fill='%23003087'/%3E%3Cpath d='M10.2 16.9h2.3c3.1 0 5.4-1.7 5.9-4.8.4-2.6-1.3-4.3-4.4-4.3H8.3c-.2 0-.4.2-.4.4l-2.1 13c0 .2.1.4.3.4h3.1l.9-4.3c.1-.2.2-.4.4-.4z' fill='%230079C1'/%3E%3Cpath d='M9.9 12.3l.9-5.5h3.2c1.3 0 2.4.3 3.1.9-.4 2.8-2.6 4.6-5.7 4.6H9.9z' fill='%2300457C'/%3E%3C/svg%3E"); }
.ico.vn { background-color: rgb(0, 140, 255); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18.8 3.5c.8 1.4 1.2 2.8 1.1 4.3-.2 3.5-3.3 8.9-6.3 12.8H8.8L5.5 5.6h4.5l1.7 10.4c1.2-2 2.6-5 2.9-7.2.2-1.6-.2-2.7-.8-3.4l5-1.9z' fill='%23FFFFFF'/%3E"); }
.ico.totp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%235A9BE0' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l9 4v6c0 5.5-3.8 10.7-9 12-5.2-1.3-9-6.5-9-12V5l9-4zm0 6a5 5 0 100 10 5 5 0 000-10zm0 2.2a2.8 2.8 0 110 5.6 2.8 2.8 0 010-5.6z'/%3E%3C/svg%3E"); }
.ico.key { background-color: rgba(61, 126, 199, 0.22); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%237CB3EC' viewBox='0 0 24 24'%3E%3Cpath d='M12.6 10.2A5.5 5.5 0 1014 14h-2.2l-.8.8v2.2H9v2H7v2H3v-3.6l5.4-5.4a5.5 5.5 0 014.2-1.8zm4.9-3.7a2 2 0 11-2 2 2 2 0 012-2z'/%3E%3C/svg%3E"); }
.panel { padding: 0px 18px 18px; border-top: 1px solid var(--line); }
.panel[hidden] { display: none; }
.panel-lede { color: var(--muted); font-size: 0.95rem; margin: 14px 0px 12px; }
.sso { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0px 0px 4px; }
.sso:not(:has(a)):not(:has(button)) { display: none; }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 0px 14px; border-radius: 10px; border: 1px solid transparent; font-size: 14px; font-weight: 650; line-height: 18px; letter-spacing: 0px; text-decoration: none; box-shadow: none; box-sizing: border-box; cursor: pointer; transition: filter .16s var(--ease), opacity .16s var(--ease), background .16s var(--ease); }
.sso-btn .mark-slot { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; }
.sso-btn .mark-slot img { max-width: 22px; max-height: 22px; width: 22px; height: 22px; object-fit: contain; display: block; }
.sso-btn:hover { filter: none; transform: none; }
.sso-btn.google { background: rgb(255, 255, 255); border-color: rgb(116, 119, 117); color: rgb(31, 31, 31); }
.sso-btn.google:hover { background: rgb(248, 249, 250); color: rgb(31, 31, 31); }
.sso-btn.twitch { background: rgb(145, 70, 255); color: rgb(255, 255, 255); }
.sso-btn.twitch:hover { color: rgb(255, 255, 255); background: rgb(119, 44, 232); }
.sso-btn.kick { background: rgb(0, 0, 0); border-color: rgb(83, 252, 24); color: rgb(83, 252, 24); font-weight: 700; }
.sso-btn.kick:hover { color: rgb(83, 252, 24); background: rgb(17, 17, 17); }
.sso-btn.kick .mark-slot img { filter: invert(84%) sepia(72%) saturate(459%) hue-rotate(52deg) brightness(101%) contrast(102%); }
.sso-btn.discord { background: rgb(88, 101, 242); color: rgb(255, 255, 255); }
.sso-btn.discord:hover { color: rgb(255, 255, 255); background: rgb(71, 82, 196); }
.sso-btn.steam { background: rgb(23, 26, 33); border-color: rgb(27, 40, 56); color: rgb(199, 213, 224); }
.sso-btn.steam:hover { color: rgb(255, 255, 255); background: rgb(27, 40, 56); }
.sso-btn.microsoft { background: rgb(47, 47, 47); border-color: rgb(47, 47, 47); color: rgb(255, 255, 255); }
.sso-btn.microsoft:hover { color: rgb(255, 255, 255); background: rgb(59, 59, 59); }
.sso-btn.xbox { background: rgb(16, 124, 16); border-color: rgb(16, 124, 16); color: rgb(255, 255, 255); font-weight: 700; }
.sso-btn.xbox:hover { color: rgb(255, 255, 255); background: rgb(14, 107, 14); }
.sso-btn.paypal { background: rgb(255, 255, 255); border-color: rgb(0, 112, 186); color: rgb(0, 48, 135); }
.sso-btn.paypal:hover { color: rgb(0, 48, 135); background: rgb(245, 247, 250); }
.sso-btn.tiktok { background: rgb(255, 255, 255); border-color: rgba(22, 24, 35, 0.12); color: rgb(22, 24, 35); font-weight: 600; }
.sso-btn.tiktok:hover { color: rgb(22, 24, 35); background: rgb(248, 248, 248); }
.sso-btn.x { background: rgb(0, 0, 0); border: 1px solid rgb(231, 233, 234); color: rgb(255, 255, 255); font-weight: 600; }
.sso-btn.x:hover { color: rgb(255, 255, 255); background: rgb(20, 20, 20); border-color: rgb(255, 255, 255); }
.sso-btn.email { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); border-color: transparent; color: rgb(255, 255, 255); font-weight: 760; box-shadow: rgba(255, 255, 255, 0.22) 0px 1px 0px inset, rgba(61, 126, 199, 0.6) 0px 12px 28px -14px; }
.sso-btn.email:hover { color: rgb(255, 255, 255); filter: brightness(1.08); background: linear-gradient(180deg, var(--accent), var(--accent-strong)); }
.sso-btn.email:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sso-btn.email .mark-slot svg { display: block; }
.sso-group-label { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin: 16px 0px 8px; }
.sso-low { margin-top: 16px; opacity: 0.92; }
.sso-low:not(:has(a)) { display: none; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin: 10px 0px 4px; }
.or::before, .or::after { content: ""; flex: 1 1 0%; height: 1px; background: var(--line-strong); }
.done-card { text-align: center; padding: 28px 8px 12px; }
.done-card .done-icon, .done-card .check { width: 60px; height: 60px; margin: 0px auto 16px; border-radius: 50%; background: linear-gradient(135deg, rgba(233, 189, 104, 0.18) 0%, rgba(212, 155, 40, 0.1) 100%); border: 1.5px solid rgba(233, 189, 104, 0.45); box-shadow: rgba(233, 189, 104, 0.2) 0px 0px 24px; color: var(--gold); font-size: 1.6rem; font-weight: 800; display: grid; place-items: center; }
.done-card .kicker { color: var(--gold); font-weight: 700; letter-spacing: 0.08em; }
.change-wrap .row { margin-top: 14px; }
.row.wrap { flex-wrap: wrap; }
.mfa-flow .rail-card .panel { display: block; }
.qr-wrap { display: grid; grid-template-columns: 212px 1fr; gap: 18px; align-items: start; margin: 16px 0px 8px; }
.qr { background: rgb(241, 245, 251); border-radius: 12px; padding: 8px; line-height: 0; }
.qr svg { display: block; width: 196px; height: 196px; }
.secret { font-size: 12px; letter-spacing: 0.04em; word-break: break-all; color: var(--text); }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; list-style: none; padding: 0px; margin: 16px auto; max-width: 22rem; text-align: left; }
.codes code { font-size: 1rem; letter-spacing: 0.06em; }
.tile-meta .avatar { width: 56px; height: 56px; min-width: 56px; min-height: 56px; max-width: 56px; max-height: 56px; flex: 0 0 56px; border-radius: 50%; object-fit: cover; margin-top: -28px; border: 3px solid var(--surface); box-shadow: var(--shadow-md); }
.creator-tile .rail-copy { padding-top: 12px; gap: 4px; }
.mini-id .avatar { width: 44px; height: 44px; margin-top: -18px; border: 2px solid var(--raised); }
.dash-head .lede { margin: 0px; }
.dash-balance.usd strong { font-size: 1.7rem; }
.auth-stage { position: relative; max-width: 960px; margin: 16px auto 40px; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.auth-backdrop { position: relative; background: linear-gradient(rgba(11, 17, 30, 0.2) 0%, rgba(11, 17, 30, 0.85) 100%), url("/static/look/login-backdrop.webp") center center / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px; overflow: hidden; border-right: 1px solid var(--line); }
.auth-backdrop-content { position: relative; z-index: 2; }
.auth-backdrop-title { font-size: 1.6rem; font-weight: 700; color: var(--text); margin: 0px 0px 8px; letter-spacing: -0.01em; }
.auth-backdrop-sub { font-size: 0.95rem; color: var(--muted); margin: 0px; line-height: 1.5; }
.auth-main { padding: 40px 48px; display: flex; flex-direction: column; justify-content: center; background: rgba(17, 26, 43, 0.96); backdrop-filter: blur(16px); }
@media (max-width: 820px) {
.auth-stage { grid-template-columns: 1fr; max-width: 480px; min-height: auto; }
.auth-backdrop { display: none; }
.auth-main { padding: 32px 24px; }
}
.auth-card { width: min(440px, 100%); margin: 0px auto; background: var(--sheen), var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 32px 28px 28px; box-shadow: var(--shadow-lg); }
.auth-card.signup { width: min(460px, 100%); }
.field { margin: 0px 0px 16px; }
.field > label { display: block; margin: 0px 0px 6px; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.field-hint { margin: 0px 0px 8px; color: var(--faint); font-size: 12px; font-weight: 500; line-height: 1.4; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 4.5rem; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0px; color: var(--link); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: 8px; }
.pw-toggle:hover { color: var(--text); }
.terms-agree { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0px 4px; cursor: pointer; user-select: none; }
.terms-agree input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0px 0px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.terms-agree span { font-size: 13px; line-height: 1.45; color: var(--muted); }
.terms-agree a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.terms-agree a:hover { color: var(--text); }
.auth-card .or { margin: 18px 0px 12px; }
.auth-card h1 { font-size: clamp(1.7rem, 4vw, 2.1rem); }
.auth-card .lede { font-size: 0.98rem; }
.auth-card.compact { padding: 18px 18px 16px; border-radius: 22px; }
.auth-card.compact h1 { font-size: 1.45rem; margin: 0px 0px 8px; }
.auth-card.compact .kicker { margin-bottom: 6px; }
.auth-card.compact .lede { font-size: 0.9rem; margin-bottom: 8px; }
.auth-card.compact .stack label { margin: 8px 0px 4px; }
.auth-card.compact input[type="email"], .auth-card.compact input[type="password"], .auth-card.compact input[type="text"] { padding: 10px 12px; }
.auth-card.compact .btn.xl { min-height: 42px; margin-top: 8px; }
.auth-card.compact .fine { margin-top: 10px; }
.auth-card.compact .seg { margin: 4px 0px 10px; }
.auth-card.compact .field { margin: 0px 0px 10px; }
.auth-card.compact .field > label { margin: 0px 0px 4px; }
body:has(.auth-card.compact) main.wrap { padding: 16px 0px 32px; }
.verify .lede { margin-bottom: 16px; }
.otp-field input { font-variant-numeric: tabular-nums; letter-spacing: 0.18em; font-size: 1.35rem; font-weight: 650; text-align: center; }
.resend { margin: 12px 0px 0px; text-align: center; }
.resend .linkish[disabled] { opacity: 0.55; cursor: not-allowed; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out; box-shadow: rgb(24, 35, 58) 0px 0px 0px 1000px inset !important; -webkit-text-fill-color: rgb(241, 245, 249) !important; caret-color: rgb(241, 245, 249) !important; }
.auth-card.verify { border: 1px solid var(--line-strong); box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 40px -15px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px; }
.verify-badge-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.25); display: flex; align-items: center; justify-content: center; color: rgb(129, 140, 248); margin-bottom: 12px; }
.passkey-action-wrap { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.passkey-hero-btn { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; width: 100%; }
.passkey-hero-btn:disabled { background: rgba(30, 41, 59, 0.7); border: 1px solid rgba(99, 102, 241, 0.3); color: rgb(148, 163, 184); cursor: wait; }
.passkey-status-msg { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 10px 0px 0px; min-height: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.other-ways-clean { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.other-ways-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.84rem; font-weight: 600; padding: 6px 4px; border-radius: 8px; transition: color 0.15s; list-style: none; user-select: none; }
.other-ways-toggle::-webkit-details-marker { display: none; }
.other-ways-toggle:hover { color: rgb(255, 255, 255); }
.other-ways-clean[open] .other-ways-toggle .chevron { transform: rotate(180deg); }
.other-ways-toggle .chevron { transition: transform 0.2s; }
.other-ways-content { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.alt-method-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: var(--raised); border: 1px solid var(--line); border-radius: 10px; color: var(--text); cursor: pointer; text-align: left; font-size: 0.86rem; transition: background 0.15s, border-color 0.15s; }
.alt-method-btn:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--line-strong); }
.alt-method-btn strong { display: block; font-size: 0.88rem; color: rgb(255, 255, 255); }
.alt-method-btn .muted { display: block; font-size: 0.76rem; color: var(--muted); }
.alt-method-details { border: 1px solid var(--line); border-radius: 10px; background: var(--raised); overflow: hidden; }
.alt-method-details summary.alt-method-btn { background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; list-style: none; }
.alt-method-details summary::-webkit-details-marker { display: none; }
.alt-form-body { padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.alt-sso-wrap { margin-top: 6px; padding-top: 8px; }
.alt-sso-label { font-size: 0.78rem; color: var(--muted); margin: 0px 0px 8px; }
.other-ways { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.other-ways summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 650; margin-bottom: 10px; }
.other-ways summary:hover { color: var(--text); }
.auth-card .other-ways { margin-top: 14px; padding-top: 12px; }
.auth-card .other-ways .sso-note { margin-top: 8px; }
.other-ways .stack { margin-top: 10px; }
.other-ways .sso { margin-top: 8px; }
.extra-form { margin-top: 8px; }
.settings { max-width: 640px; }
.set-row .muted { font-size: 13px; }
.settings .surface { padding: 18px 20px 10px; margin-top: 18px; }
.settings .surface > h2 { margin-bottom: 8px; }
.page > h1 { font-size: clamp(1.7rem, 3vw, 2.1rem); }
.profile-page .avatar, .profile-page .avatar.photo, .look-stage .avatar, .look-stage .avatar.photo, .hub .avatar, .hub .avatar.photo { object-fit: var(--avatar-fit, cover); object-position: var(--avatar-pos, 50% 20%); }
.profile-head .avatar.xl { margin-top: -52px; border: 3px solid var(--surface); position: relative; z-index: 1; box-shadow: none; }
.lede:empty, .bio:empty, .page-quote:empty { display: none; }
.avatar-edit .avatar { pointer-events: none; }
.profile-head .avatar-edit .avatar.xl { margin-top: 0px; }
.theme-chip.on, .theme-chip:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gallery-edit .check { padding: 6px 8px; font-size: 12px; }
.extras button.on { border-color: var(--gold); background: rgba(233, 189, 104, 0.12); }
label.check, .check { display: inline-flex; align-items: center; gap: 10px; color: rgb(203, 213, 225); font-size: 13.5px; font-weight: 500; margin: 8px 0px; cursor: pointer; width: auto; max-width: 100%; height: auto; white-space: normal; line-height: 1.4; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; }
label.check span, .check span { color: rgb(203, 213, 225); font-size: 13px; font-weight: 500; }
label.check input[type="checkbox"], label.check input[type="radio"], .check input { width: 16px; min-width: 16px; height: 16px; margin: 0px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.cheat .btn { margin-left: 6px; }
.director .kicker { grid-column: 1 / -1; }
input[type="file"] { padding: 12px; background: var(--raised); border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); }
.page .donate-grid .surface { margin-top: 0px; }
.donate-card.primary { box-shadow: var(--shadow-lg); }
.donate-card .row { margin-top: 16px; }
.avatar.xl { width: 88px; height: 88px; font-size: 2rem; box-shadow: none; }
img.avatar, img.avatar.photo { object-fit: var(--avatar-fit, cover); object-position: var(--avatar-pos, 50% 20%); }
.gift-flow .lede { margin-bottom: 18px; }
.coin-picks button.on { border-color: var(--gold); background: rgba(233, 189, 104, 0.14); color: var(--gold); }
.coin-picks button.all { min-width: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); border: 0px; }
textarea { resize: vertical; min-height: 88px; line-height: 1.45; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-strong); color: rgb(255, 255, 255); display: grid; place-items: center; flex-shrink: 0; font-size: 1rem; font-weight: 800; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.25rem; }
.identity { display: flex; align-items: center; gap: 16px; margin: 0px 0px 18px; }
.identity h1 { margin: 0px; }
@media (max-width: 860px) {
.bento, .packages, .stats, .dash { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.wrap { width: min(1120px, 100% - 32px); }
.desk { display: none; }
.mob { display: block; }
main.wrap { padding: 32px 0px 64px; }
.profile-head .avatar.xl { margin-top: -40px; }
.bento, .packages, .stats, .dash { grid-template-columns: 1fr; }
.avatar.xl { width: 72px; height: 72px; font-size: 1.65rem; }
.row { flex-direction: column; }
.row .btn, .btn.xl { width: 100%; }
.qr-wrap { grid-template-columns: 1fr; }
.done-card .btn.xl { width: 100%; }
.auth-card { padding: 24px 20px 22px; border-radius: 22px; }
.auth-card.compact { padding: 16px 14px 14px; }
.sso { gap: 5px; }
}
.marks { display: flex; align-items: center; gap: 8px; margin: 2px 0px 8px; font-size: 13px; color: var(--faint); }
.marks a { color: inherit; }
.league-club .avatar, .league-open .avatar, .league-prime .avatar { box-shadow: 0 0 0 3px var(--league-ring); }
.profile-head.league-club .avatar.xl, .profile-head.league-open .avatar.xl, .profile-head.league-prime .avatar.xl { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--league-ring); }
.league-rising .avatar, .profile-head.league-rising .avatar.xl { box-shadow: none; }
.tile-meta .avatar { border-color: var(--surface); }
.creator-tile.league-rising .avatar, .board-row.league-rising .avatar { box-shadow: none; border-color: var(--surface); }
.creator-tile .rail-copy em, .board-who em { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; min-width: 0px; }
.league { display: inline-flex; align-items: center; height: 22px; padding: 0px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--line-strong); color: var(--muted); background: transparent; }
.photo-crop-viewfinder.avatar { width: min(360px, 100%); aspect-ratio: 1 / 1; margin-inline: auto; border-radius: 50%; }
.photo-crop-status.error { color: var(--danger); }
.board-row .avatar { width: 40px; height: 40px; }
.rail-copy strong { display: inline-flex; align-items: center; }
.verify-page .lede { max-width: 42rem; }
input:read-only, textarea:read-only { opacity: 0.78; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
.btn { transition: none; }
.btn:hover { transform: none; }
}
.search-input-wrap .search-icon, .search-input-wrap > .luminight-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: var(--faint); pointer-events: none; z-index: 2; }
.genre-chip img.luminight-icon { flex-shrink: 0; }
.genre-chip.on { color: rgb(255, 255, 255); background: var(--accent); border-color: var(--accent); }
.tile-actions .btn { flex: 1 1 0%; text-align: center; }
.messages-user-meta .avatar { width: 44px; height: 44px; }
.msg-bubble.me { align-self: flex-end; background: var(--accent); color: rgb(255, 255, 255); border-bottom-right-radius: 4px; }
.msg-bubble.me .msg-time { text-align: right; }
.unread-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0px 5px; border-radius: 9px; background: var(--accent, #3D7EC7); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; line-height: 1; margin-left: 6px; vertical-align: middle; }
.unread-dot.inline { width: 8px; min-width: 8px; height: 8px; padding: 0px; border-radius: 50%; background: rgb(16, 185, 129); }
.member-empty-coins .btn { margin-top: 12px; }
.recurring-card.on, .recurring-card.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(96, 165, 250, 0.35); transform: translateY(-2px); }
.extra-thumb-overlay .btn { flex: 1 1 auto; min-width: 0px; min-height: 40px; padding: 8px; font-size: 0.78rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.extra-fields .field { margin: 0px; }
@keyframes stageFadeIn { 
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.sso-btn.passkey { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); }
.sso-btn.passkey:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); }
.card-status-msg.err { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); color: rgb(252, 165, 165); }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.saved-card-radio.selected .saved-card-inner { background: rgba(233, 189, 104, 0.08); border-color: rgb(233, 189, 104); box-shadow: rgb(233, 189, 104) 0px 0px 0px 1px; }
.new-card-option.selected .saved-card-inner { color: rgb(255, 255, 255); }
.card-digits-block .muted { font-size: 0.76rem; color: rgb(100, 116, 139); }
@keyframes modalPop { 
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
.reup-pack-option.selected { border-color: rgb(245, 158, 11); background: rgba(245, 158, 11, 0.1); box-shadow: rgb(245, 158, 11) 0px 0px 0px 1px inset; }
.reup-feedback.error { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: rgb(252, 165, 165); }
.reup-feedback.success { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3); color: rgb(110, 231, 183); }
@keyframes thanks-pop { 
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes thanks-pulse { 
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.18); opacity: 0.9; }
}
.thanks-account-actions .btn { font-size: 0.92rem; padding: 10px 18px; border-radius: 10px; }
.thanks-actions-row .btn { min-width: 180px; }
@media (max-width: 640px) {
.thanks-actions-row .btn { width: 100%; }
}
body.chat-body-viewport .sandbox, body.chat-body-viewport header.top { flex-shrink: 0 !important; }
body.chat-body-viewport main.wrap, body:has(.chat-page) main.wrap { flex: 1 1 0px !important; min-height: 0px !important; height: auto !important; max-height: none !important; padding: 0px !important; max-width: 100% !important; width: 100% !important; margin: 0px !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
.chat-thread-avatar-wrap .avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; }
.chat-target-avatar-wrap .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
@keyframes drawerSlideDown { 
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.toggle-label .muted { font-size: 0.76rem; color: rgb(112, 132, 153); }
.chat-bubble-row.me { justify-content: flex-end; }
.chat-bubble-row.me .chat-bubble { background: rgb(43, 82, 120); color: rgb(255, 255, 255); border-radius: 14px 14px 4px; }
.chat-bubble-row.me .chat-bubble-foot { color: rgb(126, 157, 184); }
.chat-bubble-row.me .chat-checks { color: rgb(134, 150, 160); display: inline-flex; align-items: center; vertical-align: middle; }
.chat-bubble-row.me .chat-checks.delivered { color: rgb(134, 150, 160); }
.chat-bubble-row.me .chat-checks.read { color: rgb(83, 189, 235); }
@keyframes coinFly { 
  0% { opacity: 1; transform: translate(0px, 0px) scale(0.5) rotate(0deg); }
  60% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1.3) rotate(var(--rot)); }
  100% { opacity: 0; transform: translate(calc(var(--tx) * 1.2), calc(var(--ty) + 100px)) scale(0.8) rotate(calc(var(--rot) * 2)); }
}
.chat-bubble-row.me .chat-checks.single-tick { color: rgb(134, 150, 160); opacity: 0.85; }
.chat-bubble-row.me .voice-play-btn { background: rgb(255, 255, 255); color: rgb(32, 65, 96); }
.chat-bubble-row.me .voice-waveform .bar.active { background: rgb(255, 255, 255) !important; }
.chat-bubble-row.me .voice-meta { color: rgb(154, 182, 207); }
.report-dialog { width: min(92vw, 520px); max-height: 90vh; overflow: auto; padding: 24px; border: 1px solid rgb(104, 128, 158); border-radius: 14px; background: rgb(21, 32, 51); color: rgb(255, 255, 255); }
.report-dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
.report-dialog form { display: flex; flex-wrap: wrap; gap: 12px; }
.report-dialog label { display: block; width: 100%; }
.report-dialog textarea { display: block; width: 100%; min-height: 120px; margin-top: 8px; }
.moderation-notice { margin: 12px 0px; padding: 16px; border: 1px solid rgb(104, 128, 158); border-radius: 10px; }
.chat-lightbox.show { display: flex; }
@keyframes popoverFadeIn { 
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes pulseDot { 
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}
@keyframes waveBar { 
  0% { height: 4px; }
  100% { height: 14px; }
}
.pack .pack-badge-bonus { position: absolute; top: 18px; right: 16px; padding: 3px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; border-radius: 6px; background: rgba(233, 189, 104, 0.15); color: var(--gold); border: 1px solid rgba(233, 189, 104, 0.3); }
.pricing-amount .value { font-size: 3.2rem; font-weight: 850; letter-spacing: -0.04em; color: rgb(255, 255, 255); line-height: 1; }
.plus-compare-table .check, .cell-free .check, .cell-plus .check { color: rgb(74, 222, 128); font-weight: 700; margin-right: 4px; }
.faq-item summary .chevron { transition: transform 0.2s; color: var(--muted); flex-shrink: 0; }
.faq-item[open] summary .chevron { transform: rotate(180deg); color: rgb(250, 204, 21); }
.luminight-icon { display: inline-block; vertical-align: -0.18em; object-fit: contain; border: 0px; background: transparent; flex-shrink: 0; pointer-events: none; image-rendering: auto; filter: drop-shadow(rgba(0, 0, 0, 0.15) 0px 1px 2px); transition: transform 0.15s, filter 0.2s; }
.luminight-icon:hover { transform: scale(1.05); filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 4px); }
@keyframes diamondShimmer { 
  0% { transform: translateY(-100%) rotate(25deg); }
  35% { transform: translateY(100%) rotate(25deg); }
  100% { transform: translateY(100%) rotate(25deg); }
}
@media print {
body * { visibility: hidden !important; }
#receiptModal, #receiptModal * { visibility: visible !important; }
#receiptModal { position: absolute !important; left: 0px !important; top: 0px !important; width: 100% !important; height: auto !important; background: transparent !important; display: block !important; padding: 0px !important; }
}
.footer-language { display: flex; justify-content: flex-start; padding: 20px 0px; }
.footer-language .lang-btn { display: flex; gap: 8px; width: auto; padding: 0px 12px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 14px; }
.footer-language .lang-menu { inset: auto auto calc(100% + 8px) 0px; max-height: min(360px, 60vh); overflow-y: auto; }
.footer-language .lang-current { white-space: nowrap; }
.footer-language { flex-wrap: wrap; align-items: center; gap: 8px; }
img[src*="/media/"][src*="/avatar"], img[src*="/media/"][src*="/banner"], .profile-cover img, .profile-page img.avatar, .look-stage img.avatar, .hub img.avatar { object-fit: cover !important; }
.supporter-progress > p.muted { margin: 16px 0px 0px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 11px; line-height: 1.6; color: rgb(130, 145, 169); }
.photo-crop-viewfinder:not(.avatar)::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: rgb(0, 0, 0); opacity: calc(var(--crop-dim, 24) * .01); }
.photo-crop-viewfinder:not(.avatar)::before { content: ""; position: absolute; z-index: 1; inset: auto 0px 0px; height: 72px; background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
@keyframes staff-badge-shimmer { 
  0%, 25% { background-position: 100% 0px; }
  75%, 100% { background-position: 0% 0px; }
}
@media (min-width: 1024px) {
body { font-size: 15px; }
main.wrap { padding-top: 28px; padding-bottom: 48px; }
h1, .page > h1 { font-size: 30px; }
.lede { font-size: 15px; }
.btn { min-height: 38px; padding-inline: 16px; border-radius: 10px; }
.btn.xl { min-height: 42px; font-size: 15px; }
.btn.sm { min-height: 34px; padding-inline: 12px; }
.page .surface { margin-top: 24px; }
.tile-meta .avatar { width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: 44px; max-height: 44px; flex-basis: 44px; }
.creator-tile .rail-copy strong { font-size: 14px; }
.field { margin-bottom: 10px; }
label { margin-top: 10px; margin-bottom: 6px; }
}
@media (min-width: 1024px) {
.creator-tile .rail-copy { min-width: 0px; flex: 1 1 0%; }
.creator-tile .rail-copy em { flex-wrap: wrap; overflow-wrap: anywhere; gap: 4px 6px; }
}
.profile-head .avatar.xl { width: 80px; height: 80px; flex-shrink: 0; margin-top: -32px; }
.profile-head .avatar-edit .avatar.xl { margin-top: 0px; }
@media (max-width: 560px) {
.profile-head .avatar.xl { width: 72px; height: 72px; margin-top: -28px; }
.profile-head .avatar-edit .avatar.xl { margin-top: 0px; }
}