@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Orbitron:wght@400;500;600;700;800&family=Sora:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #07070a;
  --panel: rgba(16, 16, 22, .72);
  --panel-strong: rgba(20, 20, 28, .9);
  --line: rgba(255, 255, 255, .1);
  --muted: #9292a2;
  --text: #f4f2f8;
  --accent-ui: #8b5cf6;
  --danger: #ff4d6d;
  --radius: 22px;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-family: Sora, system-ui, sans-serif; font-size: 16px; line-height: 1.55; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }

.app-shell { position: relative; overflow-x: hidden; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 48px 48px; }
.ambient { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 13% 22%, rgba(139,92,246,.15), transparent 27%), radial-gradient(circle at 90% 75%, rgba(42,193,188,.08), transparent 25%); }
.topbar { position: relative; z-index: 3; width: min(1180px, calc(100% - 40px)); margin: 0 auto; height: 86px; display: flex; align-items: center; justify-content: space-between; }
.language-switch { display:flex; gap:3px; margin-left:auto; margin-right:12px; padding:3px; border:1px solid var(--line); border-radius:9px; background:rgba(10,10,15,.7); }.language-switch a { padding:4px 6px; color:var(--muted); font-size:.68rem; font-weight:700; text-decoration:none; border-radius:6px; }.language-switch a.is-active { color:#fff; background:rgba(139,92,246,.35); }
.brand { font-weight: 800; font-size: 1.25rem; letter-spacing: -.04em; }
.brand span { color: var(--accent-ui); margin-right: 2px; }
.top-actions { display: flex; gap: 8px; align-items: center; }
.top-actions form { margin: 0; }
.notification-button { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.notification-button > span { position: absolute; right: -5px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; border: 2px solid #08080b; border-radius: 99px; color: #fff; background: #ff4770; font: .75rem DM Mono,monospace; }
.ghost-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); cursor: pointer; transition: .2s ease; }
.ghost-button:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }

.glass-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 80px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.eyebrow { margin: 0 0 18px; color: #a7a3b3; font: 500 .75rem/1.2 DM Mono, monospace; letter-spacing: .16em; }
.eyebrow span { display: inline-block; width: 28px; height: 1px; margin: 0 10px 4px 0; background: var(--accent-ui); box-shadow: 0 0 12px var(--accent-ui); }
.primary-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 0 20px; border: 0; border-radius: 13px; color: #fff; font-weight: 700; background: linear-gradient(135deg, #7142e4, #9d66ff); box-shadow: 0 12px 30px rgba(116,65,230,.24); cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(116,65,230,.34); filter: brightness(1.08); }
.primary-button:active { transform: translateY(0); }

.auth-layout { position: relative; width: min(1120px, calc(100% - 40px)); min-height: calc(100vh - 110px); margin: 0 auto; padding: 48px 0 90px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(40px, 8vw, 110px); }
.auth-intro h1 { margin: 0; font-size: clamp(2.7rem, 5.5vw, 5.2rem); line-height: .98; letter-spacing: -.065em; max-width: 700px; }
.auth-intro h1 em { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.52); font-style: normal; }
.auth-intro > p { max-width: 540px; color: var(--muted); font-size: 1.05rem; }
.signal-card { width: fit-content; margin-top: 38px; padding: 12px 18px 12px 12px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); }
.signal-core { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: white; font-weight: 800; background: var(--accent-ui); box-shadow: 0 0 25px rgba(139,92,246,.38); }
.signal-card div { display: grid; }
.signal-card strong { font-size: .83rem; }
.signal-card small { color: var(--muted); font: .75rem DM Mono, monospace; letter-spacing: .08em; }
.auth-card { padding: clamp(24px, 4vw, 38px); }
.auth-heading, .section-heading { display: flex; gap: 17px; align-items: flex-start; margin-bottom: 28px; }
.step-mark, .section-heading > span { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border: 1px solid rgba(139,92,246,.45); border-radius: 11px; color: #b391ff; font: .75rem DM Mono, monospace; background: rgba(139,92,246,.08); }
.auth-heading h2, .section-heading h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.025em; }
.auth-heading p, .section-heading p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.stack-form { display: grid; gap: 16px; }
.stack-form label, .link-edit-grid label { display: grid; gap: 7px; color: #c9c6d1; font-size: .82rem; font-weight: 600; }
input, textarea { width: 100%; color: var(--text); border: 1px solid var(--line); border-radius: 12px; outline: 0; background: rgba(0,0,0,.22); transition: border .2s, box-shadow .2s, background .2s; }
input { height: 48px; padding: 0 14px; }
textarea { padding: 12px 14px; resize: vertical; }
input:focus, textarea:focus { border-color: rgba(139,92,246,.7); box-shadow: 0 0 0 3px rgba(139,92,246,.12); background: rgba(0,0,0,.3); }
input::placeholder, textarea::placeholder { color: #636271; }
.input-prefix { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.22); }
.input-prefix:focus-within { border-color: rgba(139,92,246,.7); box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
.input-prefix span { padding-left: 14px; color: #777482; font: .76rem DM Mono, monospace; white-space: nowrap; }
.input-prefix input { border: 0; background: transparent; box-shadow: none; padding-left: 2px; }
.form-alert { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; border: 1px solid rgba(255,77,109,.26); border-radius: 12px; color: #ff9bad; background: rgba(255,77,109,.08); font-size: .84rem; }
.auth-switch { margin: 22px 0 0; color: var(--muted); text-align: center; font-size: .86rem; }
.auth-switch a { color: #bc9cff; font-weight: 700; }

.dashboard-wrap { position: relative; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 50px 0 110px; }
.dashboard-hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 45px; }
.dashboard-hero h1 { margin: 0; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.06em; }
.dashboard-hero > div > p:last-child { color: var(--muted); }
.profile-address { display: grid; gap: 6px; text-align: right; }
.profile-address span { color: var(--muted); font: .75rem DM Mono, monospace; letter-spacing: .1em; }
.profile-address a { font-weight: 700; }
.profile-address i { margin-left: 6px; color: #a77cff; font-size: .75rem; }
.address-row { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.address-row button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); cursor: pointer; transition: .2s; }
.address-row button:hover, .address-row button.is-copied { border-color: rgba(139,92,246,.45); background: rgba(139,92,246,.12); }
.address-row button i { margin: 0; }
.address-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.address-row button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); cursor: pointer; transition: .2s; }
.address-row button i { margin: 0; }
.address-row button:hover, .address-row button.is-copied { border-color: rgba(139,92,246,.4); background: rgba(139,92,246,.1); }
.dashboard-nav { position: sticky; z-index: 8; top: 12px; width: fit-content; margin: -14px 0 34px; padding: 5px; display: flex; gap: 3px; border: 1px solid var(--line); border-radius: 14px; background: rgba(9,9,13,.78); box-shadow: 0 14px 40px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.dashboard-nav a { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border-radius: 10px; color: var(--muted); font-size: .76rem; font-weight: 600; transition: .2s; }
.dashboard-nav a:hover, .dashboard-nav a.is-active { color: #fff; background: rgba(255,255,255,.07); }
.dashboard-nav a.is-active i { color: #ad89ff; }
.analytics-section { scroll-margin-top: 85px; margin-bottom: 72px; }
.account-center { margin-bottom: 72px; scroll-margin-top: 85px; }
.account-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.connection-card { min-height: 126px; display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 14px; padding: 18px; }
.connection-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 15px; font-size: 1.15rem; background: color-mix(in srgb,currentColor,transparent 90%); }.connection-icon.discord { color: #7f8cff; }.connection-icon.mail { color: #61d5a4; }
.connection-card > div { min-width: 0; display: grid; }.connection-card small { color: #77727f; font: .75rem DM Mono,monospace; }.connection-card strong { overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }.connection-card p { margin: 3px 0 0; color: #85808c; font-size: .76rem; }
.connection-card > a, .connection-card form button { min-height: 37px; padding: 0 10px; border: 1px solid rgba(110,124,255,.28); border-radius: 9px; color: #aab1ff; background: rgba(88,101,242,.08); font-size: .75rem; cursor: pointer; }.connection-card > em { color: #72dcae; font: normal .75rem DM Mono,monospace; }
.connection-card.is-connected { border-color: rgba(75,225,156,.2); }.dev-link { margin-top: 10px; padding: 10px 13px; display: flex; gap: 8px; align-items: center; border: 1px dashed rgba(255,194,81,.3); border-radius: 11px; color: #a99062; font-size: .75rem; }.dev-link a { color: #e9c474; text-decoration: underline; }
.notification-preview { margin-top: 12px; padding: 19px; }.notification-preview > header { display: flex; justify-content: space-between; align-items: center; }.notification-preview h3 { margin: 2px 0 0; font-size: .95rem; }.notification-preview header small { color: #797481; font: .75rem DM Mono,monospace; }.notification-preview header a { color: #a589e6; font-size: .75rem; }.notification-preview > div { display: grid; margin-top: 10px; }.notification-preview > div > a { min-height: 52px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 7px; border-top: 1px solid rgba(255,255,255,.055); }.notification-preview > div > a.is-unread { background: rgba(139,92,246,.04); }.notification-preview > div > a > i { color: #9c7de7; text-align: center; }.notification-preview > div span { display: grid; }.notification-preview strong { font-size: .76rem; }.notification-preview small,.notification-preview time { color: #736f7a; font-size: .75rem; }.notification-preview > div > p { color: #77727f; font-size: .78rem; }
.analytics-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.analytics-heading h2 { margin: 3px 0 0; font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -.045em; }
.section-kicker { margin: 0; color: #9c78ef; font: 500 .75rem DM Mono, monospace; letter-spacing: .13em; }
.live-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid rgba(75,229,156,.2); border-radius: 999px; color: #8fe7bb; background: rgba(75,229,156,.06); font: .75rem DM Mono, monospace; }
.live-badge i { width: 6px; height: 6px; border-radius: 50%; background: #4be59c; box-shadow: 0 0 12px #4be59c; }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat-card { position: relative; min-height: 174px; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(25,24,31,.85), rgba(12,12,17,.85)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.stat-card::after { content: ''; position: absolute; width: 110px; height: 110px; top: -70px; right: -45px; border-radius: 50%; background: #8b5cf6; opacity: .07; filter: blur(20px); }
.stat-card--accent { border-color: rgba(139,92,246,.3); background: linear-gradient(145deg, rgba(87,51,155,.26), rgba(14,13,20,.88) 64%); }
.stat-icon { position: absolute; right: 17px; top: 17px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: #a989f3; background: rgba(255,255,255,.035); }
.stat-card > span { display: block; padding-right: 38px; color: #a7a4b0; font-size: .78rem; }
.stat-card > strong, .stat-value-row > strong { display: block; margin: 15px 0 3px; font-size: 2.35rem; line-height: 1; letter-spacing: -.06em; }
.stat-card > small { color: #777481; font-size: .75rem; }
.stat-value-row { display: flex; align-items: end; gap: 10px; }
.trend { margin-bottom: 3px; padding: 4px 7px; border-radius: 7px; color: #72dea9; background: rgba(75,229,156,.08); font: normal .75rem DM Mono, monospace; }
.trend i { margin-right: 4px; }
.trend--down { color: #ff879a; background: rgba(255,77,109,.08); }
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 14px; margin-top: 14px; }
.chart-panel, .recent-panel { padding: 23px; }
.chart-panel > header, .recent-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.chart-panel h3, .recent-panel h3 { margin: 0; font-size: .95rem; letter-spacing: -.025em; }
.chart-panel header p, .recent-panel header p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; }
.chart-range { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: #8d8999; font: .75rem DM Mono, monospace; letter-spacing: .06em; }
.bar-chart { height: 250px; margin-top: 24px; padding: 18px 5px 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(8px, 2vw, 22px); border-top: 1px solid rgba(255,255,255,.06); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px); background-size: 100% 25%; }
.bar-column { min-width: 0; display: grid; grid-template-rows: 18px 1fr auto auto; justify-items: center; gap: 4px; }
.bar-value { color: #8e8a98; font: .75rem DM Mono, monospace; }
.bar-track { position: relative; width: min(32px, 65%); height: 100%; display: flex; align-items: end; overflow: hidden; border-radius: 7px 7px 3px 3px; background: rgba(255,255,255,.035); }
.bar-track i { display: block; width: 100%; height: max(4px, var(--bar-height)); border-radius: inherit; background: linear-gradient(to top, #6840c7, #b28cff); box-shadow: 0 0 22px rgba(139,92,246,.28); transform-origin: bottom; animation: bar-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.bar-column strong { font-size: .75rem; font-weight: 600; }
.bar-column small { color: #6d6976; font: .75rem DM Mono, monospace; }
.recent-panel > header > i { color: #9b77ed; }
.recent-list { display: grid; margin-top: 15px; }
.recent-item { min-height: 54px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.065); }
.recent-item:first-child { border-top: 0; }
.device-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(139,92,246,.18); border-radius: 9px; color: #9d7ce9; background: rgba(139,92,246,.055); font-size: .75rem; }
.recent-item > div { min-width: 0; display: grid; }
.recent-item strong { overflow: hidden; font-size: .75rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.recent-item small, .recent-item time { color: #777481; font: .75rem/1.35 DM Mono, monospace; }
.recent-item time { text-align: right; }
.recent-empty { min-height: 180px; display: grid; place-content: center; justify-items: center; text-align: center; color: #686572; }
.recent-empty > i { margin-bottom: 9px; font-size: 1.3rem; }
.recent-empty strong { color: #a6a2ae; font-size: .8rem; }
.recent-empty p { margin: 3px 0 0; font-size: .75rem; }
.analytics-note { margin: 12px 4px 0; color: #777481; font-size: .75rem; }
.analytics-note i { margin-right: 6px; color: #8574aa; }
.badge-section { margin-bottom: 72px; scroll-margin-top: 85px; }
.badge-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.badge-heading h2 { margin: 4px 0 3px; font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -.045em; }
.badge-heading > div:first-child > p:last-child { margin: 0; color: var(--muted); font-size: .82rem; }
.current-rank { min-width: 196px; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--rank-color), transparent 70%); border-radius: 14px; background: color-mix(in srgb, var(--rank-color), transparent 92%); box-shadow: 0 0 25px color-mix(in srgb, var(--rank-color), transparent 90%); }
.current-rank > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #111015; background: var(--rank-color); box-shadow: 0 0 15px color-mix(in srgb, var(--rank-color), transparent 45%); }
.current-rank span { display: grid; color: #777481; font: .75rem DM Mono, monospace; }
.current-rank strong { color: var(--rank-color); font-family: Sora, sans-serif; font-size: .78rem; }
.current-rank--empty { --rank-color: #706d78; }
.badge-collection { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.fame-card { position: relative; min-height: 214px; overflow: hidden; padding: 18px; border: 1px solid rgba(255,255,255,.075); border-radius: 18px; background: linear-gradient(145deg, rgba(25,24,30,.76), rgba(11,11,15,.9)); filter: saturate(.25); opacity: .58; transition: transform .25s ease, opacity .25s ease, border-color .25s ease; }
.fame-card::after { content: ''; position: absolute; width: 110px; height: 110px; top: -60px; right: -50px; border-radius: 50%; background: var(--rank-color); opacity: .08; filter: blur(22px); }
.fame-card.is-unlocked { border-color: color-mix(in srgb, var(--rank-color), transparent 70%); filter: none; opacity: 1; background: linear-gradient(145deg, color-mix(in srgb, var(--rank-color), transparent 90%), rgba(11,11,15,.92) 70%); }
.fame-card.is-unlocked:hover { transform: translateY(-3px); }
.fame-card.is-current { box-shadow: 0 13px 40px rgba(0,0,0,.22), inset 0 0 0 1px color-mix(in srgb, var(--rank-color), transparent 74%), 0 0 30px color-mix(in srgb, var(--rank-color), transparent 90%); }
.fame-emblem { position: relative; width: 58px; height: 64px; margin-bottom: 21px; display: grid; place-items: center; color: #77737e; background: rgba(255,255,255,.055); clip-path: polygon(50% 0, 92% 20%, 86% 76%, 50% 100%, 14% 76%, 8% 20%); }
.fame-card.is-unlocked .fame-emblem { color: #121015; background: linear-gradient(145deg, color-mix(in srgb, var(--rank-color), white 25%), var(--rank-color)); box-shadow: 0 0 22px color-mix(in srgb, var(--rank-color), transparent 55%); }
.fame-emblem > span { font-size: 1.35rem; font-weight: 800; }
.fame-emblem > i { position: absolute; right: 13px; bottom: 12px; font-size: .58rem; }
.fame-state { position: absolute; top: 16px; right: 15px; color: #6e6a75; font: .75rem DM Mono, monospace; }
.fame-card.is-unlocked .fame-state { color: var(--rank-color); }
.fame-state i { margin-right: 4px; }
.fame-card h3 { margin: 0; color: #afabb5; font-size: .92rem; letter-spacing: -.025em; }
.fame-card.is-unlocked h3 { color: var(--rank-color); }
.fame-card p { margin: 3px 0 0; color: #77737e; font: .75rem DM Mono, monospace; }
.badge-progress { margin-top: 12px; padding: 18px 20px; display: grid; grid-template-columns: minmax(180px, .48fr) 1fr; align-items: center; gap: 28px; }
.badge-progress-copy { display: grid; }
.badge-progress-copy > span { color: #827e89; font: .75rem DM Mono, monospace; letter-spacing: .08em; }
.badge-progress-copy > strong { margin: 2px 0; font-size: .9rem; }
.badge-progress-copy > small { color: #777481; font-size: .75rem; }
.badge-progress-visual { display: grid; gap: 7px; }
.badge-progress-visual > div { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.065); }
.badge-progress-visual > div i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--rank-color), #4d356f 45%), var(--rank-color)); box-shadow: 0 0 14px color-mix(in srgb, var(--rank-color), transparent 45%); }
.badge-progress-visual > span { color: #85818c; font: .75rem DM Mono, monospace; text-align: right; }
.special-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.special-badge { position: relative; min-height: 92px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid rgba(255,255,255,.075); border-radius: 18px; color: #706d78; background: rgba(15,15,20,.72); filter: saturate(.2); opacity: .62; }
.special-badge.is-owned { opacity: 1; filter: none; }
.special-badge-icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 15px; font-size: 1.15rem; background: color-mix(in srgb, currentColor, transparent 90%); box-shadow: 0 0 25px color-mix(in srgb, currentColor, transparent 88%); }
.special-badge--og.is-owned { color: #b798ff; border-color: rgba(183,152,255,.3); background: linear-gradient(135deg, rgba(139,92,246,.13), rgba(15,15,20,.8)); }
.special-badge--bug.is-owned { color: #53e3ac; border-color: rgba(83,227,172,.28); background: linear-gradient(135deg, rgba(35,181,132,.11), rgba(15,15,20,.8)); }
.special-badge > div { display: grid; }
.special-badge small { font: .75rem DM Mono, monospace; letter-spacing: .08em; opacity: .65; }
.special-badge strong { color: currentColor; font-size: .94rem; }
.special-badge p { margin: 1px 0 0; color: #85818c; font-size: .75rem; }
.special-badge em { padding: 5px 7px; border: 1px solid currentColor; border-radius: 7px; font: normal .75rem DM Mono, monospace; opacity: .62; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.dashboard-grid, .links-section { scroll-margin-top: 85px; }
.settings-panel { padding: 30px; }
.field-row { display: grid; grid-template-columns: 1fr 220px; gap: 15px; }
.stack-form label small { color: var(--muted); font-size: .75rem; font-weight: 400; text-align: right; }
.form-divider { display: flex; align-items: center; gap: 12px; margin: 9px 0 1px; }
.form-divider span { color: #8e8999; font: .75rem DM Mono, monospace; letter-spacing: .13em; }
.form-divider i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.11), transparent); }
.media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.media-picker { min-width: 0; padding: 15px; border: 1px solid rgba(255,255,255,.085); border-radius: 16px; background: rgba(255,255,255,.022); }
.media-picker--wide { grid-column: 1 / -1; order: 3; }
.media-picker > header { min-height: 42px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.media-picker > header > span { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(139,92,246,.22); border-radius: 10px; color: #ad8bf7; background: rgba(139,92,246,.07); }
.media-picker > header > div { min-width: 0; display: grid; }
.media-picker > header strong { font-size: .8rem; }
.media-picker > header small { overflow: hidden; color: #777481; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.media-picker > header em { padding: 4px 6px; border: 1px solid rgba(75,229,156,.18); border-radius: 6px; color: #72d9a5; background: rgba(75,229,156,.055); font: normal .75rem DM Mono, monospace; }
.upload-zone { min-height: 88px; display: flex !important; align-items: center; justify-content: center; flex-direction: column; gap: 6px !important; padding: 13px; border: 1px dashed rgba(139,92,246,.28); border-radius: 12px; color: #aaa5b2 !important; text-align: center; background: rgba(139,92,246,.035); cursor: pointer; transition: .2s; }
.upload-zone:hover, .upload-zone.is-dragging { border-color: rgba(157,102,255,.7); color: #d6caee !important; background: rgba(139,92,246,.085); }
.upload-zone input { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.upload-zone > i { color: #a47ef5; }
.upload-zone > span { max-width: 100%; overflow: hidden; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.remote-field { margin-top: 9px; }
.remote-field summary { width: fit-content; color: #85818e; font-size: .75rem; cursor: pointer; user-select: none; }
.remote-field input { height: 40px; margin-top: 8px; font-size: .75rem; }
.opaque-option { margin-top: 12px; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid rgba(255,255,255,.065); }
.opaque-option > div:first-child { display: grid; }
.opaque-option strong { font-size: .78rem; }
.opaque-option small { color: #777481; font-size: .75rem; }
.opaque-controls { display: flex; align-items: center; gap: 9px; }
.opaque-controls > input[type="color"] { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; overflow: hidden; background: transparent; cursor: pointer; }
.toggle-switch { position: relative; display: block !important; width: 45px; height: 25px; cursor: pointer; }
.toggle-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-switch span { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 99px; background: rgba(255,255,255,.07); transition: .2s; }
.toggle-switch span::after { content: ''; position: absolute; width: 17px; height: 17px; top: 3px; left: 3px; border-radius: 50%; background: #aaa6b2; transition: .2s; }
.toggle-switch input:checked + span { border-color: rgba(157,102,255,.65); background: rgba(139,92,246,.3); }
.toggle-switch input:checked + span::after { left: 23px; background: #c4a8ff; box-shadow: 0 0 10px rgba(157,102,255,.6); }
.free-style-block { display: grid; gap: 18px; }
.style-group { display: grid; gap: 10px; }
.style-group > header { display: flex; justify-content: space-between; align-items: end; gap: 15px; }
.style-group > header > div { display: grid; }
.style-group > header strong { font-size: .82rem; }
.style-group > header small { color: #777481; font-size: .75rem; }
.style-group > header > span { padding: 4px 7px; border: 1px solid rgba(75,229,156,.18); border-radius: 6px; color: #75dbaa; background: rgba(75,229,156,.05); font: .75rem DM Mono, monospace; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.choice-card { display: block !important; cursor: pointer; }
.choice-card > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-card > span { position: relative; min-height: 116px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 2px; padding: 14px; border: 1px solid rgba(255,255,255,.085); border-radius: 13px; color: #a5a1ac; background: rgba(255,255,255,.022); transition: .2s; }
.choice-card > span > i { margin-bottom: 8px; color: #9e7de8; font-size: 1.08rem; font-style: normal; }
.choice-card > span > strong { color: #cbc7d1; font-size: .78rem; }
.choice-card > span > small { color: #74717d; font-size: .75rem; text-align: left; }
.vip-choice { border-color: rgba(234,190,91,.2); }.vip-choice > span > i { color: #e5c57c; }.vip-choice em { color: #e5c57c; font: normal .58rem 'DM Mono',monospace; letter-spacing: .08em; }.vip-choice:has(input:disabled) { opacity: .48; }
.choice-card:hover > span { border-color: rgba(139,92,246,.32); background: rgba(139,92,246,.04); }
.choice-card > input:focus-visible + span { outline: 2px solid #9d66ff; outline-offset: 2px; }
.choice-card > input:checked + span { border-color: rgba(157,102,255,.66); color: #fff; background: linear-gradient(145deg, rgba(139,92,246,.16), rgba(139,92,246,.045)); box-shadow: inset 0 0 0 1px rgba(157,102,255,.08), 0 8px 25px rgba(0,0,0,.16); }
.choice-card > input:checked + span::after { content: '✓'; position: absolute; top: 10px; right: 11px; color: #bc9dff; font: .75rem DM Mono, monospace; }
.font-choice-sora > span > i { font-family: Sora, sans-serif; }
.font-choice-space > span > i { font-family: 'Space Grotesk', sans-serif; }
.font-choice-orbitron > span > i { font-family: Orbitron, sans-serif; }
.remove-media { margin-top: 9px; display: flex !important; grid-template-columns: none !important; align-items: center; grid-auto-flow: column; justify-content: start; gap: 7px !important; color: #898591 !important; font-size: .75rem !important; font-weight: 400 !important; cursor: pointer; }
.remove-media input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.remove-media span { width: 15px; height: 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; background: rgba(0,0,0,.22); }
.remove-media input:checked + span { border-color: #9d66ff; background: #8b5cf6; box-shadow: inset 0 0 0 3px #17131f; }
.color-field { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.22); }
.color-field input { width: 29px; height: 29px; padding: 0; border: 0; border-radius: 7px; overflow: hidden; background: none; }
.color-field output { color: var(--muted); font: .78rem DM Mono, monospace; }
.side-column { display: grid; gap: 16px; }
.mini-preview { position: relative; overflow: hidden; min-height: 280px; padding: 32px 24px 24px; text-align: center; }
.preview-glow { position: absolute; z-index: -1; width: 180px; height: 180px; top: -80px; left: calc(50% - 90px); border-radius: 50%; background: var(--preview-accent); opacity: .22; filter: blur(45px); }
.avatar-preview { width: 78px; height: 78px; margin: 0 auto 16px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--preview-accent); border-radius: 50%; color: white; font-size: 1.5rem; font-weight: 800; background: #17171f; box-shadow: 0 0 0 5px rgba(255,255,255,.035), 0 0 28px color-mix(in srgb, var(--preview-accent), transparent 55%); }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.mini-preview h3 { margin: 0; font-size: 1.25rem; }
.mini-preview > p { margin: 2px 0 22px; color: var(--muted); font-size: .84rem; }
.preview-stat { padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.preview-stat strong { color: var(--text); margin: 0 4px; }
.completion-row { margin-top: 17px; text-align: left; }
.completion-row > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.completion-row > div:first-child strong { color: #c9b5f7; font: .75rem DM Mono, monospace; }
.completion-track { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.completion-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7142e4, #c29eff); box-shadow: 0 0 12px rgba(157,102,255,.45); }
.tip-card { display: flex; gap: 13px; padding: 18px; border: 1px dashed rgba(139,92,246,.3); border-radius: 17px; background: rgba(139,92,246,.055); }
.tip-card > i { color: #a882ff; margin-top: 4px; }
.tip-card strong { font-size: .82rem; }
.tip-card p { margin: 3px 0 0; color: var(--muted); font-size: .77rem; }
.vip-section { margin-top: 72px; scroll-margin-top: 85px; }
.vip-coming-soon { display:flex; align-items:center; gap:14px; margin:18px 0 20px; padding:16px 18px; border:1px solid rgba(167,124,255,.35); border-radius:16px; background:rgba(123,74,210,.12); color:var(--text); }
.vip-coming-soon > i { color:#b68cff; font-size:1.25rem; }
.vip-coming-soon strong { display:block; }
.vip-coming-soon p { margin:4px 0 0; color:var(--muted); font-size:.9rem; }
.profile-meta-dates { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 18px; margin:14px 0 4px; color:var(--muted); font-size:.75rem; }
.profile-meta-dates i { color:var(--accent); margin-right:5px; }
.profile-signup-cta { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin:18px 0 4px; padding:14px 16px; border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius:14px; background:color-mix(in srgb, var(--accent) 10%, transparent); text-align:left; }
.profile-signup-cta > div { flex:1 1 180px; }
.profile-signup-cta strong, .profile-signup-cta small { display:block; }
.profile-signup-cta small { margin-top:3px; color:var(--muted); font-size:.75rem; }
.profile-signup-cta a { padding:9px 13px; border-radius:10px; background:var(--accent); color:#fff; font-size:.8rem; font-weight:700; text-decoration:none; }
.profile-signup-cta .profile-signup-login { background:transparent; color:var(--muted); border:1px solid var(--line); }
.roadmap-section { margin-top:72px; scroll-margin-top:85px; }
.dashboard-wrap > section, .dashboard-wrap > aside { content-visibility:auto; contain:layout paint style; contain-intrinsic-size:720px; }
.dashboard-wrap img, .dashboard-wrap video { content-visibility:auto; }
.roadmap-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.roadmap-item { display:flex; align-items:center; gap:12px; min-width:0; padding:15px; border:1px solid var(--line); border-radius:15px; background:rgba(14,13,20,.72); }
.roadmap-item > i { flex:0 0 34px; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#bd9cff; background:rgba(139,92,246,.14); }
.roadmap-item > div { min-width:0; flex:1; }
.roadmap-item strong, .roadmap-item small { display:block; }
.roadmap-item small { margin-top:4px; color:var(--muted); font-size:.78rem; }
.roadmap-status { flex:0 0 auto; padding:5px 8px; border-radius:999px; font-size:.66rem; font-style:normal; white-space:nowrap; color:#bfffe0; background:rgba(42,193,140,.12); }
.roadmap-status--bientôt-disponible { color:#ffd18b; background:rgba(240,167,58,.14); }
.roadmap-status--en-préparation { color:#cdb8ff; background:rgba(139,92,246,.14); }
.status-list { display:grid; gap:12px; margin-top:22px; max-width:760px; }
.status-row { display:flex; align-items:center; gap:14px; padding:18px; }
.status-row > div { flex:1; }.status-row strong, .status-row small { display:block; }.status-row small { margin-top:4px; color:var(--muted); }
.status-row em { color:#65e6aa; font-style:normal; font-size:.75rem; font-weight:700; }
.status-dot { width:11px; height:11px; border-radius:50%; background:#65e6aa; box-shadow:0 0 14px #65e6aa; }
.status-dot--down { background:#ff5f7a; box-shadow:0 0 14px #ff5f7a; }.status-label--down { color:#ff8096 !important; }
.status-overview { display:flex; align-items:center; gap:13px; max-width:760px; margin-top:22px; padding:17px 19px; }.status-overview > div { flex:1; }.status-overview strong,.status-overview small { display:block; }.status-overview small { margin-top:4px; color:var(--muted); }.status-overview a { color:#cbb2ff; font-size:.8rem; text-decoration:none; }.status-pulse { width:12px; height:12px; border-radius:50%; background:#65e6aa; box-shadow:0 0 0 6px rgba(101,230,170,.1),0 0 18px #65e6aa; }.status-pulse--down { background:#ff5f7a; box-shadow:0 0 0 6px rgba(255,95,122,.1),0 0 18px #ff5f7a; }.status-footer { display:flex; flex-wrap:wrap; gap:14px 22px; max-width:760px; margin-top:18px; color:var(--muted); font-size:.78rem; }.status-footer i { color:#a77aff; margin-right:5px; }
.maintenance-page { min-height:70vh; display:grid; place-items:center; }.maintenance-card { max-width:560px; padding:42px; text-align:center; }.maintenance-card > i { color:#bd9cff; font-size:2.5rem; margin-bottom:18px; }.maintenance-card h1 { margin:8px 0; }.maintenance-card p:not(.section-kicker) { color:var(--muted); }.maintenance-card .primary-button { display:inline-flex; margin-top:18px; text-decoration:none; }
.maintenance-admin { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:18px 0 26px; padding:22px; }.maintenance-admin p { color:var(--muted); margin:7px 0 0; }.maintenance-admin button { border:1px solid rgba(255,180,80,.4); border-radius:10px; padding:11px 14px; color:#ffd18b; background:rgba(255,180,80,.1); cursor:pointer; }
@media (max-width: 620px) { .roadmap-grid { grid-template-columns:1fr; } .roadmap-item { align-items:flex-start; flex-wrap:wrap; } .roadmap-status { margin-left:46px; } }
.vip-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.roadmap-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(234,190,91,.2); border-radius: 999px; color: #ddbd72; background: rgba(234,190,91,.055); font: .75rem DM Mono, monospace; white-space: nowrap; }
.vip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vip-card { position: relative; overflow: hidden; min-height: 246px; padding: 21px; border: 1px solid rgba(234,190,91,.12); border-radius: 18px; background: linear-gradient(145deg, rgba(35,30,25,.68), rgba(14,13,17,.88)); }
.vip-card::after { content: ''; position: absolute; width: 100px; height: 100px; top: -48px; right: -44px; border-radius: 50%; background: #d9aa4a; opacity: .09; filter: blur(22px); }
.vip-icon { width: 39px; height: 39px; margin-bottom: 21px; display: grid; place-items: center; border: 1px solid rgba(234,190,91,.2); border-radius: 11px; color: #e3bd68; background: rgba(234,190,91,.06); }
.vip-card > span { color: #9b8252; font: .75rem DM Mono, monospace; letter-spacing: .1em; }
.vip-card h3 { margin: 6px 0 5px; font-size: .95rem; letter-spacing: -.025em; }
.vip-card p { min-height: 56px; margin: 0 0 18px; color: #85808b; font-size: .75rem; }
.vip-card button { min-height: 36px; padding: 0 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: #77727b; background: rgba(255,255,255,.025); font-size: .75rem; cursor: not-allowed; }
.vip-card button.is-unlocked { color: #70e0ae; border-color: rgba(75,225,156,.28); background: rgba(75,225,156,.08); cursor: default; }
.vip-card button i { margin-right: 6px; }
.vip-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }.vip-actions-grid > article { padding: 20px; }.vip-actions-grid small { color: #9b8252; font: .75rem DM Mono,monospace; letter-spacing: .08em; }.vip-actions-grid h3 { margin: 4px 0; font-size: .95rem; }.vip-actions-grid p { margin: 0; color: #827d89; font-size: .76rem; }.vip-checkout { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.vip-checkout button,.gift-redeem button,.custom-domain button { min-height: 40px; padding: 0 12px; border: 1px solid rgba(234,190,91,.25); border-radius: 10px; color: #e5c57c; background: rgba(234,190,91,.07); cursor: pointer; }.vip-checkout button:disabled,.custom-domain button:disabled { color: #6f6a75; border-color: var(--line); cursor: not-allowed; }.gift-redeem form,.custom-domain form { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 10px; }.gift-redeem input,.custom-domain input { height: 40px; }.cloud-status > span { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; color: #8a8490; font: .75rem DM Mono,monospace; }.cloud-status > span i { width: 6px; height: 6px; border-radius: 50%; background: #77727d; }.cloud-status > span.is-ready { color: #68d9a8; }.cloud-status > span.is-ready i { background: #4be59c; box-shadow: 0 0 10px #4be59c; }
.admin-zone { padding-top: 72px; scroll-margin-top: 85px; }
.admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.admin-heading h2 { margin: 4px 0 3px; font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -.045em; }
.admin-heading p:last-child { margin: 0; color: var(--muted); font-size: .82rem; }
.admin-crown { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255,82,119,.26); border-radius: 999px; color: #ff829e; background: rgba(255,56,99,.07); font: .75rem DM Mono, monospace; white-space: nowrap; }
.admin-grid { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr); gap: 14px; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.admin-stat-card { min-height: 116px; padding: 17px; display: flex; gap: 12px; align-items: flex-start; }
.admin-stat-card > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(168,123,255,.28); border-radius: 10px; color: #b999ff; background: rgba(139,92,246,.1); }
.admin-stat-card > div { min-width: 0; display: grid; gap: 3px; }
.admin-stat-card small { color: #817b8b; font: 10px 'DM Mono', monospace; letter-spacing: .12em; }
.admin-stat-card strong { font-size: 1.65rem; letter-spacing: -.04em; }
.admin-stat-card p { margin: 0; color: #817b8b; font-size: .72rem; line-height: 1.35; }
.event-control, .badge-control { padding: 23px; }
.event-control > header, .badge-control > header { display: flex; align-items: center; gap: 12px; }
.event-control > header > span, .badge-control > header > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,80,122,.24); border-radius: 12px; color: #ff7897; background: rgba(255,57,102,.07); }
.event-control header div, .badge-control header div { display: grid; }
.event-control header small, .badge-control header small { color: #86515f; font: .75rem DM Mono, monospace; letter-spacing: .07em; }
.event-control h3, .badge-control h3 { margin: 1px 0 0; font-size: 1rem; }
.event-live-row { min-height: 42px; margin: 22px 0 13px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(70,229,155,.18); border-radius: 11px; color: #72dea9; background: rgba(70,229,155,.055); font: .75rem DM Mono, monospace; }
.event-live-row > i { width: 7px; height: 7px; border-radius: 50%; background: #4be59c; box-shadow: 0 0 12px #4be59c; }
.event-live-row > span { margin-left: auto; color: #8b9290; }
.event-live-row--closed { color: #a5a1ad; border-color: var(--line); background: rgba(255,255,255,.025); }
.event-live-row--closed > i { background: #77737f; box-shadow: none; }
.event-control > p { min-height: 48px; color: #8e8997; font-size: .8rem; }
.event-control > p strong { color: #c9c4d1; }
.admin-launch { width: 100%; min-height: 44px; border: 1px solid rgba(255,79,122,.28); border-radius: 12px; color: #fff; font-weight: 700; background: linear-gradient(135deg, #aa2949, #f24f78); cursor: pointer; }
.admin-launch:disabled { color: #77737e; border-color: var(--line); background: rgba(255,255,255,.03); cursor: not-allowed; }
.admin-user-list { max-height: 310px; margin-top: 19px; display: grid; overflow-y: auto; }
.admin-user-row { min-height: 65px; display: grid; grid-template-columns: minmax(130px,1fr) auto auto 36px; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.07); }
.admin-user-row:first-child { border-top: 0; }
.admin-user-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.admin-user-identity > span { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #c3aaff; background: rgba(139,92,246,.12); font-weight: 700; }
.admin-user-identity > div { min-width: 0; display: grid; }
.admin-user-identity strong, .admin-user-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-identity strong { font-size: .78rem; }
.admin-user-identity small { color: #76727d; font-size: .75rem; }
.admin-user-row > label { cursor: pointer; }
.admin-user-row > label input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.admin-user-row > label span { display: block; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: #716d78; font-size: .75rem; }
.admin-user-row > label input:checked + span { border-color: rgba(139,92,246,.4); color: #c1a8ff; background: rgba(139,92,246,.1); }
.admin-user-row > button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; color: #a98bf2; background: rgba(255,255,255,.035); cursor: pointer; }
.links-section { padding-top: 68px; }
.links-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 24px; align-items: start; }
.add-link-form { position: sticky; top: 20px; padding: 24px; }
.add-link-form h3 { margin: 0 0 3px; }
.link-list { display: grid; gap: 12px; }
.link-editor { display: grid; grid-template-columns: 38px 1fr 38px; align-items: end; gap: 12px; padding: 17px; }
.link-number { align-self: center; color: #777482; font: .75rem DM Mono, monospace; }
.link-edit-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr 86px 38px; align-items: end; gap: 10px; }
.link-edit-grid input { height: 42px; font-size: .8rem; }
.link-edit-grid label { font-size: .75rem; }
.icon-button { width: 38px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); cursor: pointer; transition: .2s; }
.icon-button.save { color: #b99cff; }
.icon-button.danger { color: #ff8298; }
.icon-button:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.empty-state { padding: 55px 25px; text-align: center; color: var(--muted); }
.empty-state > i { font-size: 1.6rem; color: #706d7b; }
.empty-state h3 { margin: 13px 0 2px; color: var(--text); }
.empty-state p { margin: 0; }
.toast { position: fixed; z-index: 20; right: 24px; bottom: 24px; max-width: min(380px, calc(100% - 48px)); padding: 14px 18px; border: 1px solid rgba(139,92,246,.4); border-radius: 13px; background: #191720; box-shadow: 0 15px 45px rgba(0,0,0,.45); animation: toast-in .35s ease both; }
.toast--error { border-color: rgba(255,77,109,.45); }
.toast--leaving { animation: toast-out .3s ease both; }

.not-found { position: relative; width: min(600px, calc(100% - 40px)); margin: 14vh auto; padding: 45px; text-align: center; }
.not-found > span { color: #a987fa; font: .75rem DM Mono, monospace; letter-spacing: .13em; }
.not-found h1 { margin: 16px 0 4px; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.05em; }
.not-found p { color: var(--muted); }
.not-found .primary-button { margin-top: 18px; }

.profile-page { position: relative; overflow: hidden; background: #030305; }
.profile-page.font-sora { font-family: Sora, system-ui, sans-serif; }
.profile-page.font-space { font-family: 'Space Grotesk', system-ui, sans-serif; }
.profile-page.font-orbitron { font-family: Orbitron, system-ui, sans-serif; letter-spacing: .01em; }
.profile-background, .profile-background video, .background-image, .background-shade, .background-grid { position: fixed; inset: 0; width: 100%; height: 100%; }
.profile-background video { object-fit: cover; }
.background-image { object-fit: cover; }
.background-shade { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent), transparent 86%), transparent 42%), linear-gradient(rgba(1,1,3,.35), rgba(1,1,3,.72)); backdrop-filter: blur(2px); }
.background-grid { opacity: .2; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to bottom, transparent, black 35%, transparent); }
.profile-page--default .profile-background { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent), transparent 72%), transparent 28%), radial-gradient(circle at 15% 85%, rgba(25,174,167,.12), transparent 25%), #050507; }
.profile-page--opaque .profile-background { background: var(--background-solid); }
.free-effect-layer { position: fixed; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.effect-particles .free-effect-layer span { position: absolute; left: var(--particle-x); top: 108%; width: var(--particle-size); height: var(--particle-size); border-radius: 50%; opacity: 0; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent), transparent 35%); animation: particle-rise var(--particle-speed) var(--particle-delay) linear infinite; }
.effect-scanlines::after { content: ''; position: fixed; z-index: 4; inset: 0; pointer-events: none; opacity: .2; background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255,255,255,.1) 4px); mix-blend-mode: overlay; }
.effect-neon .profile-card { animation: neon-breathe 3.6s ease-in-out infinite; }
.effect-neon .background-shade { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent), transparent 75%), transparent 45%), linear-gradient(rgba(1,1,3,.35), rgba(1,1,3,.74)); }
.effect-particles .free-effect-layer span { will-change: transform, opacity; }
.effect-aurora .background-shade { background: radial-gradient(ellipse at 20% 20%, color-mix(in srgb, var(--accent), transparent 58%), transparent 42%), radial-gradient(ellipse at 80% 75%, rgba(36,211,190,.22), transparent 45%), linear-gradient(135deg, rgba(4,3,12,.35), rgba(1,1,4,.78)); animation: aurora-shift 9s ease-in-out infinite alternate; }
.effect-matrix .profile-card { box-shadow: 0 35px 110px rgba(0,0,0,.65), 0 0 35px rgba(52,255,145,.2); }
.effect-matrix::after { content: ''; position: fixed; z-index: 1; inset: 0; pointer-events: none; opacity: .16; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(52,255,145,.5) 6px), linear-gradient(90deg, transparent 48%, rgba(52,255,145,.35) 50%, transparent 52%); animation: matrix-scan 2.8s linear infinite; }
.effect-glitch .profile-card { animation: profile-glitch 2.8s steps(1) infinite; }
.effect-hologram .profile-card { border-color: color-mix(in srgb, var(--accent), #5ee7ff 35%); background: linear-gradient(135deg, color-mix(in srgb, var(--accent), transparent 88%), rgba(64,210,255,.08), rgba(7,7,10,.7)); box-shadow: 0 0 45px color-mix(in srgb, var(--accent), transparent 78%); }
.effect-embers .free-effect-layer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 110%, rgba(255,112,45,.3), transparent 25%), radial-gradient(circle at 80% 100%, rgba(255,45,112,.2), transparent 25%); animation: embers-pulse 3s ease-in-out infinite alternate; }
.enter-overlay { position: fixed; z-index: 10; inset: 0; width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 13px; border: 0; color: white; background: rgba(2,2,4,.48); backdrop-filter: blur(18px); cursor: pointer; transition: opacity .65s ease, backdrop-filter .65s ease; }
.enter-overlay::before { content: ''; position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.08); pointer-events: none; }
.enter-symbol { width: 66px; height: 66px; margin-bottom: 13px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent), white 20%); border-radius: 50%; color: var(--accent); font-size: 2rem; font-weight: 800; box-shadow: 0 0 35px color-mix(in srgb, var(--accent), transparent 55%); animation: pulse 2.4s ease-in-out infinite; }
.enter-overlay strong { font: 500 .8rem DM Mono, monospace; letter-spacing: .2em; }
.enter-overlay small { color: rgba(255,255,255,.5); font: .75rem DM Mono, monospace; }
.enter-line { width: 1px; height: 42px; margin-top: 8px; background: linear-gradient(var(--accent), transparent); }
.enter-overlay.is-leaving { opacity: 0; backdrop-filter: blur(0); pointer-events: none; }
.enter-overlay.is-gone { display: none; }
.profile-stage { position: relative; z-index: 2; min-height: 100vh; padding: 55px 20px; display: grid; place-items: center; opacity: 0; transform: scale(.965) translateY(10px); transition: opacity .75s .1s ease, transform .75s .1s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.profile-stage.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.profile-card { position: relative; overflow: hidden; width: min(500px, 100%); padding: clamp(24px, 5vw, 34px); border: 1px solid rgba(255,255,255,.14); border-radius: 26px; background: rgba(7,7,10,.62); box-shadow: 0 35px 110px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--accent), transparent 91%) inset; backdrop-filter: blur(24px) saturate(120%); }
.profile-noise { position: absolute; inset: 0; opacity: .025; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.profile-card header { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.public-avatar { position: relative; width: 74px; height: 74px; display: grid; place-items: center; border: 2px solid var(--accent); border-radius: 50%; color: white; font-size: 1.5rem; font-weight: 800; background: #15151c; box-shadow: 0 0 0 5px rgba(255,255,255,.035), 0 0 25px color-mix(in srgb, var(--accent), transparent 50%); }
.public-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.public-avatar i { position: absolute; right: 1px; bottom: 3px; width: 13px; height: 13px; border: 3px solid #0a0a0e; border-radius: 50%; background: var(--accent); }
.profile-title h1 { margin: 0; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.045em; }
.profile-title p { margin: 3px 0 0; color: var(--accent); font: .75rem DM Mono, monospace; }
.profile-views { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.5); font: .7rem DM Mono, monospace; }
.public-fame-badge { position: relative; margin: 22px 0 0; min-height: 54px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--rank-color), transparent 68%); border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--rank-color), transparent 88%), rgba(255,255,255,.025)); box-shadow: inset 0 0 22px color-mix(in srgb, var(--rank-color), transparent 94%); }
.public-fame-mark { position: relative; width: 36px; height: 40px; display: grid; place-items: center; color: #111015; font-size: 1rem; font-weight: 800; background: var(--rank-color); clip-path: polygon(50% 0, 92% 20%, 86% 76%, 50% 100%, 14% 76%, 8% 20%); box-shadow: 0 0 18px color-mix(in srgb, var(--rank-color), transparent 50%); }
.public-fame-mark i { position: absolute; right: 8px; bottom: 7px; font-size: .42rem; }
.public-fame-badge > span:nth-child(2) { display: grid; }
.public-fame-badge small { color: rgba(255,255,255,.45); font: .75rem DM Mono, monospace; letter-spacing: .08em; }
.public-fame-badge strong { color: var(--rank-color); font-size: .82rem; }
.public-fame-badge > i { color: var(--rank-color); opacity: .72; }
.public-special-badges { position: relative; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.public-special { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid currentColor; border-radius: 8px; font: 500 .75rem DM Mono, monospace; letter-spacing: .05em; background: rgba(8,8,12,.48); }
.public-special--og { color: #c2a8ff; box-shadow: inset 0 0 16px rgba(139,92,246,.09); }
.public-special--bug { color: #64e7b5; box-shadow: inset 0 0 16px rgba(51,220,157,.08); }
.public-bio { position: relative; margin: 24px 0; color: #c2beca; font-size: .92rem; white-space: pre-line; }
.public-fame-badge + .public-bio { margin-top: 18px; }
.public-links { position: relative; display: grid; gap: 10px; margin-top: 24px; }
.public-links a { min-height: 58px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 8px 15px 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.045); transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease; }
.public-links a:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent), transparent 25%); background: color-mix(in srgb, var(--accent), transparent 89%); box-shadow: 0 12px 35px rgba(0,0,0,.28), 0 0 20px color-mix(in srgb, var(--accent), transparent 85%); }
.link-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent), transparent 60%); border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 91%); }
.public-links a > span:nth-child(2) { font-weight: 650; font-size: .9rem; }
.link-arrow { color: rgba(255,255,255,.36); font-size: .7rem; transition: color .2s, transform .2s; }
.public-links a:hover .link-arrow { color: var(--accent); transform: translate(2px,-2px); }
.public-empty { padding: 25px; color: rgba(255,255,255,.45); text-align: center; font-size: .85rem; }
.profile-card footer { position: relative; display: flex; justify-content: space-between; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.38); font: .75rem DM Mono, monospace; letter-spacing: .07em; }
.profile-card footer span:first-child { color: color-mix(in srgb, var(--accent), white 18%); font-weight: 500; }
.audio-control { position: fixed; z-index: 5; right: 22px; bottom: 22px; min-width: 82px; height: 40px; display: flex; justify-content: center; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(8,8,11,.68); backdrop-filter: blur(14px); cursor: pointer; }
.audio-control i { color: var(--accent); }
.audio-control span { color: rgba(255,255,255,.55); font: .75rem DM Mono, monospace; }
.audio-control.is-muted i { color: rgba(255,255,255,.4); }
.community-event { position: fixed; z-index: 6; left: 22px; bottom: 22px; width: min(390px, calc(100% - 44px)); overflow: hidden; padding: 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; color: #fff; background: linear-gradient(145deg, rgba(18,17,24,.94), rgba(7,7,11,.96)); box-shadow: 0 25px 75px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(24px); animation: event-rise .7s .5s cubic-bezier(.2,.8,.2,1) both; }
.community-event::before { content: ''; position: absolute; width: 160px; height: 160px; left: -70px; top: -100px; border-radius: 50%; background: #5865f2; opacity: .17; filter: blur(35px); pointer-events: none; }
.community-event-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #8d8997; font: 500 .75rem DM Mono, monospace; letter-spacing: .06em; }
.community-event-top > span { display: inline-flex; align-items: center; gap: 7px; }
.community-event-top > span > i:not(.fa-solid) { width: 6px; height: 6px; border-radius: 50%; background: #5af0af; box-shadow: 0 0 12px #5af0af; }
.community-event-top time { color: #d1cbd8; }
.community-event-title { position: relative; display: flex; align-items: center; gap: 12px; margin: 17px 0 14px; }
.event-slash { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(88,101,242,.5); border-radius: 14px; color: #9ca5ff; font-size: 1.4rem; font-weight: 800; background: rgba(88,101,242,.13); box-shadow: 0 0 25px rgba(88,101,242,.15); }
.community-event-title > div { display: grid; }
.community-event-title small, .leaderboard-title small { color: #85818d; font: .75rem DM Mono, monospace; letter-spacing: .08em; }
.community-event-title strong { font-size: .95rem; }
.community-event-title em { margin: 0 5px; color: #666270; font: normal .75rem DM Mono, monospace; }
.event-vote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.event-vote-form button { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; color: #c6c2ce; background: rgba(255,255,255,.035); cursor: pointer; transition: .2s ease; }
.event-vote-form button:first-of-type:hover { border-color: #7289ff; color: #aeb7ff; background: rgba(88,101,242,.13); transform: translateY(-2px); }
.event-vote-form button:last-of-type:hover { border-color: #ff597d; color: #ff9ab0; background: rgba(255,63,105,.11); transform: translateY(-2px); }
.event-vote-form button > i { width: 27px; font-size: 1rem; }
.event-vote-form button span { display: grid; color: #77737e; font: .75rem DM Mono, monospace; text-align: left; }
.event-vote-form button strong { color: currentColor; font-family: Sora, sans-serif; font-size: .76rem; }
.community-event > footer { position: relative; display: flex; justify-content: space-between; margin-top: 11px; color: #666270; font: .75rem DM Mono, monospace; }
.event-message { min-height: 58px; margin: 0; padding: 12px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; color: #a7a3af; background: rgba(255,255,255,.03); font-size: .78rem; }
.event-message--success { border-color: rgba(74,224,156,.2); color: #86ddb4; background: rgba(74,224,156,.055); }
.leaderboard-title { position: relative; display: flex; justify-content: space-between; align-items: end; margin: 17px 0 9px; }
.leaderboard-title > div { display: grid; }
.leaderboard-title strong { font-size: 1rem; }
.leaderboard-title > span { color: #827e89; font: .75rem DM Mono, monospace; }
.event-leaderboard { max-height: 380px; margin: 0; padding: 0; display: grid; overflow-y: auto; list-style: none; }
.event-leaderboard li { min-height: 50px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.065); }
.event-leaderboard li:first-child { border-top: 0; }
.event-leaderboard li.is-current-profile { margin: 0 -6px; padding: 0 6px; border-radius: 9px; background: color-mix(in srgb, var(--accent), transparent 91%); }
.leader-rank { color: #817d89; font: .75rem DM Mono, monospace; text-align: center; }
.event-leaderboard li:nth-child(1) .leader-rank { color: #ffd767; font-weight: 700; }
.event-leaderboard li:nth-child(2) .leader-rank { color: #d5dbe5; }
.event-leaderboard li:nth-child(3) .leader-rank { color: #d28b55; }
.event-leaderboard a { min-width: 0; display: flex; align-items: center; gap: 9px; }
.leader-avatar { flex: 0 0 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; color: #bfa7fb; background: rgba(139,92,246,.12); font-size: .75rem; font-weight: 700; }
.leader-avatar img { width: 100%; height: 100%; object-fit: cover; }
.event-leaderboard a > span:last-child { min-width: 0; display: grid; }
.event-leaderboard a strong, .event-leaderboard a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-leaderboard a strong { font-size: .76rem; }
.event-leaderboard a small { color: #716d79; font: .75rem DM Mono, monospace; }
.event-leaderboard li > em { color: #ff7897; font: normal .75rem DM Mono, monospace; }
.event-leaderboard .leaderboard-empty { display: flex; justify-content: center; gap: 8px; color: #7e7a86; font-size: .76rem; }

select { width: 100%; height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: #111118; outline: 0; }
.special-badge--verified.is-owned { color: #58b9ff; border-color: rgba(88,185,255,.3); }
.special-badge--creator.is-owned { color: #f39cff; border-color: rgba(243,156,255,.28); }
.special-badge--early.is-owned { color: #7ee69c; border-color: rgba(126,230,156,.28); }
.special-badge--winner.is-owned { color: #ffd45c; border-color: rgba(255,212,92,.3); }
.special-badge--top.is-owned { color: #ff729c; border-color: rgba(255,114,156,.3); }
.quests-section, .creator-tools { margin-bottom: 72px; scroll-margin-top: 85px; }
.quests-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 12px; }
.quests-heading h2 { margin: 4px 0 0; font-size: clamp(1.5rem,3vw,2.15rem); }
.quests-heading > strong { color: #b99bff; font: 1.4rem DM Mono,monospace; }
.quest-progress { height: 7px; margin-bottom: 14px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.quest-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6740c7,#c39fff); box-shadow: 0 0 16px rgba(139,92,246,.4); }
.quest-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.quest-card { min-height: 104px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; color: #706c79; background: rgba(255,255,255,.025); }
.quest-card.is-done { color: #79deb2; border-color: rgba(73,225,157,.2); background: rgba(73,225,157,.045); }
.quest-card > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.045); }
.quest-card > div { display: grid; }
.quest-card strong { color: #b8b4c0; font-size: .76rem; }
.quest-card small { color: #726e79; font-size: .75rem; line-height: 1.3; }
.advanced-style-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.advanced-style-grid label { align-content: start; }
.advanced-style-grid output { float: right; color: #aa8cf2; font: .75rem DM Mono,monospace; }
.advanced-style-grid input[type="range"] { height: 28px; padding: 0; accent-color: #8b5cf6; }
.preview-bio { min-height: 38px; margin: -12px 0 14px !important; color: #898491 !important; font-size: .75rem !important; }
.creator-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.playlist-panel, .guestbook-panel { padding: 23px; }
.playlist-panel h3, .guestbook-panel h3 { margin: 0 0 16px; font-size: .95rem; }
.playlist-panel h3 i, .guestbook-panel h3 i { margin-right: 8px; color: #a787f4; }
.playlist-add { display: grid; grid-template-columns: 1fr 1fr auto 40px; gap: 8px; }
.playlist-add input { height: 42px; font-size: .78rem; }
.playlist-add > label { height: 42px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: #aaa5b2; font-size: .75rem; cursor: pointer; }
.playlist-add > label input { position: absolute; width: 1px; opacity: 0; }
.playlist-add > button { border: 1px solid rgba(139,92,246,.3); border-radius: 10px; color: #b799ff; background: rgba(139,92,246,.09); cursor: pointer; }
.track-list, .dashboard-guestbook { display: grid; margin-top: 14px; }
.track-list > div { min-height: 46px; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; border-top: 1px solid rgba(255,255,255,.06); }
.track-list > div > span { color: #6f6b77; font: .75rem DM Mono,monospace; }
.track-list strong { font-size: .78rem; }
.track-list button, .dashboard-guestbook button { border: 0; color: #ff7894; background: transparent; cursor: pointer; }
.track-list > p, .dashboard-guestbook > p { color: #77727f; font-size: .78rem; }
.dashboard-guestbook > div { position: relative; padding: 10px 30px 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.dashboard-guestbook span { display: flex; justify-content: space-between; }
.dashboard-guestbook strong { font-size: .78rem; }
.dashboard-guestbook small { color: #716d78; font: .75rem DM Mono,monospace; }
.dashboard-guestbook p { margin: 3px 0 0; color: #9a95a2; font-size: .76rem; }
.dashboard-guestbook form { position: absolute; right: 0; top: 12px; }
.admin-search { height: 40px; margin-top: 16px; font-size: .78rem; }
.admin-user-list { max-height: 420px; }
.admin-user-row { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; }
.admin-badge-form { display: grid; grid-template-columns: minmax(130px,1fr) minmax(230px,1.5fr) 36px; align-items: center; gap: 8px; }
.admin-badge-picks { display: flex; flex-wrap: wrap; gap: 5px; }
.admin-badge-picks label { cursor: pointer; }
.admin-badge-picks input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.admin-badge-picks span { display: block; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; color: #6f6b77; font-size: .75rem; }
.admin-badge-picks input:checked + span { color: #bea5ff; border-color: rgba(139,92,246,.36); background: rgba(139,92,246,.1); }
.admin-badge-form > button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; color: #aa8cf3; background: rgba(255,255,255,.035); cursor: pointer; }
.admin-ban-form { grid-column: 1 / -1; display: flex; justify-content: end; }
.admin-ban-form button { border: 0; color: #ff8099; background: transparent; font-size: .75rem; cursor: pointer; }
.reports-panel { margin-top: 14px; padding: 22px; }
.reports-panel > header { display: flex; justify-content: space-between; align-items: center; }
.reports-panel h3 { margin: 3px 0 0; }
.reports-panel > header > span { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #ff8099; background: rgba(255,70,110,.1); }
.reports-list { display: grid; margin-top: 14px; }
.reports-list > div { display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.reports-list span { display: grid; }
.reports-list strong { font-size: .76rem; }
.reports-list small, .reports-list p { color: #77727f; font-size: .75rem; }
.reports-list button { min-height: 34px; border: 1px solid var(--line); border-radius: 9px; color: #8addb7; background: rgba(73,225,157,.05); cursor: pointer; }
.reports-empty { color: #77727f; }
.admin-ops-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 14px; margin-top: 14px; }.gift-admin,.audit-panel { padding: 22px; }.gift-admin h3,.audit-panel h3 { margin: 4px 0 13px; }.gift-admin > form { display: grid; grid-template-columns: 1fr 80px 80px; gap: 7px; }.gift-admin > form button { grid-column: 1/-1; min-height: 40px; border: 1px solid rgba(139,92,246,.3); border-radius: 10px; color: #c0a6ff; background: rgba(139,92,246,.08); cursor: pointer; }.gift-list { max-height: 180px; margin-top: 10px; display: grid; overflow-y: auto; }.gift-list > span { display: grid; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.06); }.gift-list strong { font-size: .76rem; }.gift-list small { color: #77727f; font-size: .75rem; }.audit-panel > header { display: flex; justify-content: space-between; }.audit-panel > header > span { color: #a98aec; font: .8rem DM Mono,monospace; }.audit-panel > div { max-height: 280px; overflow-y: auto; }.audit-panel article { min-height: 50px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; border-top: 1px solid rgba(255,255,255,.06); }.audit-panel article > i { color: #8d70d1; }.audit-panel article > span { display: grid; }.audit-panel article strong { font-size: .75rem; }.audit-panel article small,.audit-panel article time { color: #716c78; font-size: .75rem; }
.explore-wrap { position: relative; width: min(1120px,calc(100% - 40px)); margin: 0 auto; padding: 55px 0 100px; }
.explore-hero { margin-bottom: 45px; }
.explore-hero h1 { margin: 6px 0 22px; font-size: clamp(2.4rem,6vw,5rem); line-height: 1; letter-spacing: -.065em; }
.explore-search { max-width: 700px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; padding: 6px; border: 1px solid rgba(139,92,246,.25); border-radius: 16px; background: rgba(18,17,24,.82); box-shadow: 0 20px 60px rgba(0,0,0,.28); }
.explore-search > i { text-align: center; color: #8d70d2; }
.explore-search input { border: 0; background: transparent; box-shadow: none; }
.explore-search button { height: 40px; padding: 0 14px; border: 0; border-radius: 10px; color: white; background: #7749dc; cursor: pointer; }
.explore-section { margin-top: 42px; }
.explore-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.explore-heading h2 { margin: 0; font-size: 1.15rem; }
.explore-heading > span, .explore-heading > a { color: #817b89; font: .75rem DM Mono,monospace; }
.explore-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.explore-card { position: relative; min-width: 0; min-height: 78px; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,rgba(25,24,31,.82),rgba(12,12,17,.88)); transition: .2s ease; }
.explore-card:hover { transform: translateY(-2px); border-color: rgba(139,92,246,.38); }
.explore-rank { position: absolute; left: 5px; top: 4px; color: #b795ff; font: .75rem DM Mono,monospace; }
.explore-avatar { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(139,92,246,.3); border-radius: 14px; color: #c3adf8; background: rgba(139,92,246,.1); font-weight: 700; }
.explore-avatar img { width: 100%; height: 100%; object-fit: cover; }
.explore-copy { min-width: 0; display: grid; }
.explore-copy strong, .explore-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-copy strong { font-size: .8rem; }
.explore-copy small, .explore-views { color: #77727f; font: .75rem DM Mono,monospace; }
.explore-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.explore-grid--compact { grid-template-columns: 1fr 1fr; }
.explore-empty { padding: 35px; color: #77727f; border: 1px dashed var(--line); border-radius: 16px; }
.simple-page-wrap { position: relative; width: min(960px,calc(100% - 40px)); margin: 0 auto; padding: 55px 0 100px; }.simple-page-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }.simple-page-heading h1 { margin: 4px 0 0; font-size: clamp(2rem,5vw,3.8rem); letter-spacing: -.055em; }.simple-page-heading p { color: #88838f; }.simple-page-heading button,.simple-page-heading > a { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; color: #a88be9; background: rgba(255,255,255,.025); cursor: pointer; }.notifications-list { display: grid; gap: 9px; }.notifications-list > a { min-height: 76px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 13px; padding: 14px; }.notifications-list > a.is-unread { border-color: rgba(139,92,246,.3); background: rgba(139,92,246,.065); }.notifications-list > a > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #b495fa; background: rgba(139,92,246,.1); }.notifications-list p { margin: 2px 0 0; color: #85808c; font-size: .78rem; }.notifications-list time { color: #6f6a76; font: .75rem DM Mono,monospace; }.season-history { display: grid; gap: 14px; }.season-card { padding: 20px; }.season-card > header { display: flex; gap: 15px; align-items: center; color: #817c89; font: .75rem DM Mono,monospace; }.season-card > header span { color: #b697ff; }.season-card > header em { margin-left: auto; font-style: normal; }.season-card ol { margin: 14px 0 0; padding: 0; list-style: none; }.season-card li { min-height: 52px; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; border-top: 1px solid rgba(255,255,255,.06); }.season-card li > span { color: #8c78ba; font: .75rem DM Mono,monospace; }.season-card li a { display: grid; }.season-card li strong { font-size: .8rem; }.season-card li small { color: #716d78; font-size: .75rem; }.season-card li > em { color: #ff7c9d; font: normal .75rem DM Mono,monospace; }.account-action-wrap { position: relative; width: min(520px,calc(100% - 40px)); margin: 8vh auto; }.account-action-card { padding: 32px; }.account-action-icon { width: 52px; height: 52px; margin-bottom: 19px; display: grid; place-items: center; border: 1px solid rgba(139,92,246,.3); border-radius: 15px; color: #b493ff; background: rgba(139,92,246,.1); }.account-action-card h1 { margin: 7px 0; font-size: 2rem; }.account-action-card > p { color: #8a8592; }.account-success { margin: 14px 0; padding: 10px; border: 1px solid rgba(74,225,156,.2); border-radius: 10px; color: #77dbae; background: rgba(74,225,156,.05); }.dev-reset-link { display: block; margin-top: 14px; color: #d0ae62; text-align: center; text-decoration: underline; }
.profile-page { overflow-x: hidden; overflow-y: auto; }
.profile-card { background: rgba(7,7,10,var(--card-opacity)); backdrop-filter: blur(var(--card-blur)) saturate(120%); }
.position-left .profile-stage { place-items: center start; padding-left: 8vw; }
.position-right .profile-stage { place-items: center end; padding-right: 8vw; }
.cursor-crosshair, .cursor-crosshair * { cursor: crosshair !important; }
.cursor-neon, .cursor-neon * { cursor: cell !important; }
.animation-float .profile-card { animation: profile-float 4s ease-in-out infinite; }
.animation-glitch .profile-card { animation: profile-glitch 5s steps(1) infinite; }
.public-special--verified { color: #61c1ff; }.public-special--creator { color: #efa2ff; }.public-special--early { color: #78e69a; }.public-special--winner { color: #ffd45c; }.public-special--top { color: #ff759e; }
.public-special--discord { color: #98a3ff; }
.discord-widget-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 0; padding: 14px 16px; border: 1px solid rgba(152,163,255,.18); border-radius: 13px; background: rgba(88,101,242,.06); }
.discord-widget-option > div { display: grid; gap: 3px; }.discord-widget-option strong { font-size: .82rem; }.discord-widget-option small { color: #817b8b; font-size: .74rem; }
.discord-widget { position: relative; display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 11px 13px; border: 1px solid rgba(152,163,255,.28); border-radius: 14px; background: linear-gradient(120deg, rgba(88,101,242,.16), rgba(10,10,16,.4)); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.discord-widget-avatar { position: relative; width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; overflow: visible; border-radius: 50%; color: #b6bcff; background: rgba(88,101,242,.25); }
.discord-widget-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }.discord-status-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border: 2px solid #111117; border-radius: 50%; background: #3ba55d; }
.discord-widget > div:nth-child(2) { min-width: 0; display: grid; gap: 1px; }.discord-widget small { color: #9296d8; font: 10px 'DM Mono',monospace; letter-spacing: .1em; }.discord-widget strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }.discord-widget p { margin: 1px 0 0; color: #7fd89e; font-size: .7rem; }.discord-widget p i { font-size: .45rem; vertical-align: 1px; }.discord-widget-mark { margin-left: auto; color: #8f98ff; font-size: 1.1rem; }
.public-links a { border-left: 2px solid color-mix(in srgb,var(--provider-color),transparent 40%); }
.public-links a > span:nth-child(2) { display: grid; }
.public-links a > span:nth-child(2) strong { font-size: .86rem; }
.public-links a > span:nth-child(2) small { color: #77727f; font: .75rem DM Mono,monospace; }
.profile-reactions, .public-guestbook { position: relative; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.profile-reactions > div, .public-guestbook > header { display: flex; align-items: center; justify-content: space-between; }
.profile-reactions > div { align-items: end; }
.profile-reactions > div > strong, .public-guestbook header strong { font-size: .84rem; }
.profile-reactions > div > small, .public-guestbook header small { color: #77727f; font: .75rem DM Mono,monospace; }
.profile-reactions form { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 10px; }
.profile-reactions button { min-height: 45px; display: flex; justify-content: center; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.035); cursor: pointer; }
.profile-reactions button.is-selected { border-color: var(--accent); background: color-mix(in srgb,var(--accent),transparent 88%); }
.profile-reactions button em { color: #8a8592; font: normal .75rem DM Mono,monospace; }
.public-guestbook header > div { display: grid; }.public-guestbook header > i { color: var(--accent); }
.public-guestbook > div { max-height: 225px; overflow-y: auto; margin-top: 9px; }
.public-guestbook article { padding: 9px 0; border-top: 1px solid rgba(255,255,255,.055); }
.public-guestbook article > span { display: flex; justify-content: space-between; }
.public-guestbook article strong { font-size: .76rem; }.public-guestbook article time { color: #6f6a77; font: .75rem DM Mono,monospace; }
.public-guestbook article p, .guestbook-empty { margin: 3px 0 0; color: #a09ba7; font-size: .77rem; }
.public-guestbook details { margin-top: 8px; }.public-guestbook summary { color: #9c82dc; font-size: .76rem; cursor: pointer; }
.public-guestbook form, .profile-actions details form { display: grid; gap: 7px; margin-top: 9px; }
.public-guestbook input, .public-guestbook textarea, .profile-actions textarea { min-height: 40px; font-size: .76rem; }
.public-guestbook form button, .profile-actions form button { min-height: 38px; border: 0; border-radius: 9px; color: white; background: var(--accent); cursor: pointer; }
.profile-actions { position: relative; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
.profile-actions > button, .profile-actions > a, .profile-actions > details > summary { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; color: #918b99; background: rgba(255,255,255,.025); font-size: .75rem; cursor: pointer; }
.profile-actions details { position: relative; }.profile-actions details form { position: absolute; z-index: 4; right: 0; bottom: 42px; width: 230px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #111117; box-shadow: 0 18px 45px rgba(0,0,0,.5); }
.audio-player { position: fixed; z-index: 5; right: 22px; bottom: 22px; width: min(310px,calc(100% - 44px)); padding: 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(8,8,12,.86); backdrop-filter: blur(18px); }
.audio-now { display: flex; align-items: center; gap: 9px; }.audio-now > i { color: var(--accent); }.audio-now span { min-width: 0; display: grid; }.audio-now small { color: #6f6a77; font: .75rem DM Mono,monospace; }.audio-now strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.audio-progress { height: 18px; padding: 0; accent-color: var(--accent); }
.audio-controls { display: grid; grid-template-columns: 30px 34px 30px 16px 1fr; align-items: center; gap: 5px; }.audio-controls button { height: 30px; border: 0; border-radius: 8px; color: #d8d2df; background: rgba(255,255,255,.045); cursor: pointer; }.audio-controls > i { color: #77727f; font-size: .7rem; }.audio-controls input { height: 18px; padding: 0; accent-color: var(--accent); }
@keyframes profile-float { 50% { transform: translateY(-7px); } }
@keyframes profile-glitch { 0%,94%,100% { transform:none; filter:none; } 95% { transform:translateX(3px); filter:hue-rotate(70deg); } 96% { transform:translateX(-2px); } }
.created-gift-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 11px; border: 1px solid rgba(104,217,168,.3); border-radius: 10px; background: rgba(104,217,168,.07); }.created-gift-code span { display: grid; gap: 3px; }.created-gift-code small { color: #68d9a8; font: .63rem 'DM Mono',monospace; letter-spacing: .08em; }.created-gift-code strong { color: #d7ffe9; font: .9rem 'DM Mono',monospace; letter-spacing: .06em; }.created-gift-code button { width: 32px; height: 32px; border: 1px solid rgba(104,217,168,.25); border-radius: 8px; color: #8be5bc; background: rgba(104,217,168,.08); cursor: pointer; }

@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }
.public-special--vip { color: #f0c866; }.public-special--founder { color: #ff75c8; }
.special-badge--vip.is-owned { color: #f0c866; border-color: rgba(240,200,102,.3); }.special-badge--founder.is-owned { color: #ff75c8; border-color: rgba(255,117,200,.3); }
@keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }
@keyframes pulse { 50% { transform: scale(1.06); box-shadow: 0 0 55px color-mix(in srgb, var(--accent), transparent 45%); } }
@keyframes bar-rise { from { transform: scaleY(0); opacity: .2; } }
@keyframes particle-rise { 0% { transform: translate3d(0,0,0) scale(.6); opacity: 0; } 12% { opacity: var(--particle-opacity); } 88% { opacity: var(--particle-opacity); } 100% { transform: translate3d(var(--particle-drift), -120vh, 0) scale(1.15); opacity: 0; } }
@keyframes neon-breathe { 0%, 100% { box-shadow: 0 35px 110px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--accent), transparent 91%) inset, 0 0 28px color-mix(in srgb, var(--accent), transparent 88%); } 50% { box-shadow: 0 35px 110px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--accent), transparent 84%) inset, 0 0 58px color-mix(in srgb, var(--accent), transparent 75%); } }
@keyframes aurora-shift { from { filter: hue-rotate(0deg) saturate(1); transform: scale(1); } to { filter: hue-rotate(28deg) saturate(1.3); transform: scale(1.06); } }
@keyframes matrix-scan { from { transform: translateY(-8%); } to { transform: translateY(8%); } }
@keyframes embers-pulse { from { opacity: .45; transform: scale(1); } to { opacity: .9; transform: scale(1.08); } }
@keyframes event-rise { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; padding-top: 20px; gap: 45px; }
  .auth-intro { padding-top: 30px; }
  .auth-intro h1 { max-width: 620px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
  .badge-collection { grid-template-columns: repeat(3, 1fr); }
  .vip-grid { grid-template-columns: 1fr 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .account-status-grid,.vip-actions-grid,.admin-ops-grid,.admin-stats-grid { grid-template-columns: 1fr; }
  .quest-grid { grid-template-columns: repeat(2,1fr); }
  .explore-grid { grid-template-columns: repeat(2,1fr); }
  .creator-tools-grid { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: 1fr 1fr; }
  .links-layout { grid-template-columns: 1fr; }
  .add-link-form { position: static; }
  .link-edit-grid { grid-template-columns: 1fr 1fr; }
  .link-edit-grid .icon-button { width: 100%; }
  .link-editor { align-items: start; }
}

@media (max-width: 620px) {
  html { font-size: 15px; }
  body { overflow-x: hidden; }
  .topbar { width: calc(100% - 28px); height: 70px; }
  .top-actions .ghost-button { padding: 0 10px; font-size: .8rem; }
  .auth-layout, .dashboard-wrap { width: calc(100% - 28px); }
  .auth-layout { padding-bottom: 55px; }
  .auth-intro h1 { font-size: 2.65rem; }
  .signal-card { display: none; }
  .auth-card, .settings-panel { padding: 21px; }
  .dashboard-wrap { padding-top: 34px; }
  .dashboard-nav { width: 100%; overflow-x: auto; }
  .dashboard-nav::-webkit-scrollbar { display: none; }
  .dashboard-nav a { flex: 1 0 auto; justify-content: center; }
  .dashboard-hero { align-items: flex-start; flex-direction: column; }
  .profile-address { text-align: left; }
  .address-row { justify-content: flex-start; }
  .address-row { justify-content: flex-start; }
  .field-row, .side-column { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .media-picker--wide { grid-column: auto; order: 0; }
  .vip-heading { align-items: flex-start; flex-direction: column; }
  .vip-grid { grid-template-columns: 1fr; }
  .vip-card, .glass-panel, .settings-panel { min-width: 0; }
  .vip-card button, .vip-checkout button, .gift-redeem button, .custom-domain button { width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .badge-heading { align-items: flex-start; flex-direction: column; }
  .badge-collection { grid-template-columns: 1fr 1fr; }
  .special-badges { grid-template-columns: 1fr; }
  .advanced-style-grid { grid-template-columns: 1fr; }
  .explore-columns { grid-template-columns: 1fr; gap: 0; }
  .explore-grid, .explore-grid--compact { grid-template-columns: 1fr; }
  .explore-search { grid-template-columns: 36px 1fr; }.explore-search button { grid-column: 1 / -1; }
  .playlist-add { grid-template-columns: 1fr 1fr; }
  .admin-badge-form { grid-template-columns: 1fr 36px; }.admin-badge-picks { grid-column: 1 / -1; grid-row: 2; }.admin-badge-form > button { grid-column: 2; grid-row: 1; }
  .reports-list > div { grid-template-columns: 1fr; }
  .connection-card { grid-template-columns: 48px 1fr; }.connection-card > a,.connection-card > form,.connection-card > em { grid-column: 2; justify-self: start; }
  .vip-checkout { align-items: flex-start; flex-direction: column; }
  .simple-page-heading { align-items: flex-start; flex-direction: column; }
  .admin-heading { align-items: flex-start; flex-direction: column; }
  .admin-user-row { grid-template-columns: 1fr auto auto 34px; }
  .fame-card { min-height: 200px; }
  .badge-progress { grid-template-columns: 1fr; gap: 15px; }
  .stat-card { min-height: 155px; padding: 16px; }
  .stat-card > strong, .stat-value-row > strong { font-size: 1.85rem; }
  .stat-icon { width: 30px; height: 30px; right: 13px; top: 13px; }
  .chart-panel, .recent-panel { padding: 18px; }
  .bar-chart { gap: 6px; height: 215px; }
  .link-editor { grid-template-columns: 1fr 42px; }
  .link-number { display: none; }
  .link-edit-grid { grid-template-columns: 1fr; }
  .link-editor, .link-editor form, .admin-user-row { min-width: 0; max-width: 100%; }
  .link-editor input, .link-editor select, .link-editor textarea { max-width: 100%; }
  .link-editor > form:last-child { grid-column: 2; grid-row: 1; }
  .profile-stage { padding: 24px 14px 80px; }
  .profile-card { border-radius: 22px; }
  .profile-card header { grid-template-columns: auto 1fr; }
  .profile-card { width: 100%; padding: 22px 17px; }
  .profile-title h1 { font-size: clamp(1.45rem, 7vw, 2rem); overflow-wrap: anywhere; }
  .profile-bio, .public-bio { overflow-wrap: anywhere; }
  .profile-signup-cta { align-items: stretch; }
  .profile-signup-cta a { text-align: center; flex: 1 1 130px; }
  .profile-meta-dates { align-items: flex-start; flex-direction: column; gap: 6px; font-size: .7rem; }
  .public-links a { min-height: 54px; }
  .profile-views { grid-column: 2; }
  .enter-overlay::before { inset: 10px; }
  .community-event { left: 12px; bottom: 12px; width: calc(100% - 24px); max-height: 70vh; overflow-y: auto; border-radius: 17px; }
  .audio-control { right: 14px; top: 14px; bottom: auto; }
  .audio-player { right: 12px; top: 12px; bottom: auto; width: calc(100% - 24px); }
  .position-left .profile-stage, .position-right .profile-stage { place-items: center; padding-left: 14px; padding-right: 14px; }
}

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

/* Stable account layout for cached/slow-loading external assets. */
.account-center .connection-card > * { min-width: 0; }
.account-center .connection-card > a,
.account-center .connection-card > em,
.account-center .connection-card > form { justify-self: end; white-space: nowrap; }
.account-center .notification-preview > header > div { min-width: 0; }
.account-center .notification-preview > div > p {
  margin: 8px 0 2px;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,.08);
  border-radius: 12px;
}

@media (max-width: 720px) {
  .connection-card { grid-template-columns: 44px minmax(0,1fr); }
  .connection-card > a,
  .connection-card > em,
  .connection-card > form { grid-column: 2; justify-self: start; }
}