/* Liquid Glass-inspired visual layer. Layout bounds live in site-layout.css. */
:root, html[data-theme='light'] {
    color-scheme: light;
    --background-end-color: #e7edf5;
    --text-dark: #192b42;
    --text-light: #4e6075;
    --accent-color: #075cbd;
    --discord-color: #4854b8;
    --twitch-color: #7441ba;
    --border-color: rgba(62, 84, 112, .16);
    --glass-surface: rgba(244, 249, 255, .50);
    --glass-control: rgba(255, 255, 255, .38);
    --glass-hover: rgba(255, 255, 255, .65);
    --glass-edge: rgba(255, 255, 255, .85);
    --glass-bottom: rgba(85, 111, 146, .20);
    --glass-shadow: 0 24px 70px -28px rgba(41, 66, 100, .35), 0 5px 15px -8px rgba(41, 66, 100, .18);
    --input-background: rgba(255, 255, 255, .48);
    --input-border: rgba(50, 79, 116, .20);
    --glass-blue: #4b91d0;
    --glass-peach: #efb5a1;
    --glass-mint: #9ad8cf;
    --glass-ink: #43638c;
    --danger-ink: #aa243b;
}
html[data-theme='dark'] {
    color-scheme: dark;
    --background-end-color: #0e1a2b;
    --text-dark: #f3f7ff;
    --text-light: #bccbde;
    --accent-color: #91c9ff;
    --discord-color: #b9c4ff;
    --twitch-color: #d2b4ff;
    --border-color: rgba(206, 225, 255, .17);
    --glass-surface: rgba(28, 43, 64, .57);
    --glass-control: rgba(218, 235, 255, .075);
    --glass-hover: rgba(218, 235, 255, .16);
    --glass-edge: rgba(233, 246, 255, .36);
    --glass-bottom: rgba(204, 224, 255, .10);
    --glass-shadow: 0 30px 80px -26px rgba(0, 6, 20, .65), 0 6px 20px -10px rgba(0, 0, 0, .35);
    --input-background: rgba(8, 22, 39, .33);
    --input-border: rgba(208, 230, 255, .23);
    --glass-blue: #295d92;
    --glass-peach: #916878;
    --glass-mint: #337c80;
    --glass-ink: #a7c7ee;
    --danger-ink: #ffabb8;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--text-dark);
}
button, input, select, textarea { font-family: inherit; }
.site-background {
    background:
        radial-gradient(ellipse at 12% 15%, var(--glass-mint), transparent 55%),
        radial-gradient(ellipse at 95% 85%, var(--glass-peach), transparent 58%),
        var(--background-end-color);
}
.site-background::before {
    width: 85vw; height: 75vh;
    top: -15%; left: 30%;
    background: radial-gradient(ellipse at 40% 45%, var(--glass-blue), transparent 68%);
    filter: blur(30px);
    opacity: .82;
    animation: glass-drift 30s ease-in-out infinite alternate;
}
.site-background::after {
    width: 125vw; height: 46vw; min-height: 320px;
    left: -35%; bottom: -8%; right: auto;
    border-radius: 50%;
    background: linear-gradient(155deg, rgba(255,255,255,.22), rgba(255,255,255,.03) 42%, transparent 63%);
    border-top: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 -18px 55px rgba(255,255,255,.08), inset 0 22px 50px rgba(255,255,255,.08);
    filter: blur(2px);
    transform: rotate(-28deg);
    animation: none;
}
@keyframes glass-drift {
    from { transform: translate(-3%, 2%) scale(1); }
    to { transform: translate(8%, 8%) scale(1.1); }
}

.content-card, .modal-container {
    position: relative;
    border: 1px solid var(--glass-bottom);
    border-top-color: var(--glass-edge);
    border-left-color: var(--glass-edge);
    border-radius: 36px;
    background: linear-gradient(145deg, rgba(255,255,255,.11), transparent 48%), var(--glass-surface);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
    backdrop-filter: blur(28px) saturate(145%);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.09);
    padding: 40px;
    opacity: 1;
    animation: glass-appear .6s ease both;
    transition: background-color .3s ease, box-shadow .3s ease;
}
.content-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(650px circle at var(--glass-x, 15%) var(--glass-y, 0%), rgba(255,255,255,.13), transparent 62%);
}
@keyframes glass-appear {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: 0 0; }
}

body > .user-menu, body > .theme-switcher {
    background: linear-gradient(135deg, rgba(255,255,255,.14), transparent), var(--glass-surface);
    border: 1px solid var(--glass-bottom);
    border-top-color: var(--glass-edge);
    border-left-color: var(--glass-edge);
    box-shadow: 0 8px 24px -10px rgba(13,32,59,.30), inset 0 1px 1px rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
}
body > .user-menu { min-height: 50px; padding: 4px 6px; }
.user-menu a { font-size: 14px; font-weight: 600; min-height: 40px; display: inline-flex; align-items: center; }
.user-menu .username { font-size: 14px; }
.user-menu a.logout-link { color: var(--danger-ink); background: rgba(224,65,95,.08); }
.user-menu a.login-button:hover, html[data-theme='dark'] .user-menu a.login-button:hover { background: var(--glass-hover); }
body > .theme-switcher { transition: transform .25s ease, background .25s ease; }
.theme-switcher svg { width: 21px; height: 21px; }

h1 { letter-spacing: -.045em; font-size: clamp(30px, 4vw, 42px); line-height: 1.12; font-weight: 700; text-wrap: balance; }
h2 { letter-spacing: -.025em; }
p { color: var(--text-light); }
.page-home .content-card { max-width: 880px; padding: 46px; }
.page-home .hero-title { font-size: clamp(36px, 5vw, 62px); line-height: 1.04; letter-spacing: -.055em; margin-bottom: 18px; }
.hero-title span { color: var(--glass-ink); }
.page-home .hero-subtitle { margin-bottom: 34px; font-size: 16px; }
.section-label { margin: 0 0 16px; color: var(--text-light); font-size: 11px; letter-spacing: .13em; font-weight: 700; text-transform: uppercase; }
.page-home .social-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.page-home .service-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.page-home .cta-button, .home-button {
    position: relative;
    min-height: 54px;
    padding: 15px;
    border-radius: 21px;
    border: 1px solid var(--border-color);
    border-top-color: var(--glass-edge);
    background: linear-gradient(155deg, rgba(255,255,255,.14), transparent 70%), var(--glass-control);
    box-shadow: 0 5px 12px -8px rgba(12,34,57,.2), inset 0 1px 0 rgba(255,255,255,.2);
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.page-home .social-links .cta-button { min-height: 104px; flex-direction: column; gap: 12px; }
.page-home .social-links .cta-button img { margin-right: 0 !important; width: 25px !important; height: 25px !important; }
.page-home .cta-button.instagram-btn { background-color: rgba(213,88,121,.10); }
.page-home .cta-button.steam-btn { background-color: rgba(67,125,181,.09); }
.page-home .cta-button.tiktok-btn { background-color: rgba(93,128,142,.09); }
.page-home .cta-button.discord-btn { background-color: rgba(103,111,220,.13); }
.page-home .service-links .cta-button { min-height: 76px; margin: 0; font-size: 13px; text-align: left; justify-content: flex-start; gap: 10px; }
.page-home .service-links .cta-button > img, .page-home .service-links .cta-button > svg { margin-right: 0 !important; }
.page-home .service-links .cta-button::after { content: '↗'; margin-left: auto; color: var(--text-light); font-size: 17px; }
.page-home .minecraft-btn { color: var(--text-dark); }
.page-home .section-divider { height: 1px; background: var(--border-color); opacity: 1; margin: 30px 0 25px; }
html[data-theme='light'] .page-home .tiktok-btn img,
html[data-theme='light'] .page-home .discord-btn img { filter: brightness(.25) !important; }

.form-group label { font-size: 13px; font-weight: 600; margin-bottom: 9px; }
.form-control, .rovancs-input {
    border-radius: 16px;
    min-height: 50px;
    color: var(--text-dark);
    border: 1px solid var(--input-border);
    background: var(--input-background);
    box-shadow: inset 0 2px 4px rgba(0,10,30,.025), 0 1px 0 rgba(255,255,255,.18);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus, .rovancs-input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 4px rgba(61,142,221,.16); }
.btn, .home-button {
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.35);
    background: linear-gradient(160deg, #3489e2, #1460b7);
    color: #fff;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 7px 20px -9px rgba(5,77,155,.5);
    min-height: 50px;
    font-size: 15px;
}
.btn-reset { border-radius: 50px; font-size: 14px; padding: 14px; color: var(--danger-ink); border-color: rgba(194,66,88,.25); background: rgba(194,66,88,.07); }
.btn-reset:hover { background: rgba(194,66,88,.16); color: var(--danger-ink); }
.feedback { border-radius: 18px; font-size: 14px; line-height: 1.5; }
.form-switch { font-size: 14px; line-height: 1.6; }
.checkbox-group label { font-size: 14px; }
.checkbox-group input { accent-color: #2376ce; width: 17px; height: 17px; }
.page-login .content-card { max-width: 460px; }
.page-login .content-card p { color: var(--text-light); }
#qr-code { border-radius: 22px; }
.page-error .error-svg { width: 60px; height: 60px; color: var(--accent-color); margin: 6px 0 24px; }
.page-error h1 { font-size: clamp(28px, 4vw, 36px); }
.page-error p { line-height: 1.65; }

.rovancs-table th { color: var(--text-light); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.rovancs-table th, .rovancs-table td { border-color: var(--border-color); }
.rovancs-table td { font-variant-numeric: tabular-nums; }
.rovancs-input { min-height: 44px; font-size: 16px; }
.grand-total-container { border-top: 1px solid var(--glass-edge); padding-top: 24px; margin-top: 24px; }
.grand-total-label { font-size: 16px; color: var(--text-light); }
.grand-total-value { font-size: 30px; font-variant-numeric: tabular-nums; color: var(--text-dark); letter-spacing: -.04em; }
.page-stats .content-card { padding: 28px; }
.page-stats .streamer-sidebar { border-color: var(--border-color); }
.streamer-item { border: 1px solid transparent; border-radius: 18px; margin-bottom: 7px; }
.streamer-item.active { background: var(--glass-control); border-color: var(--glass-edge); box-shadow: 0 4px 12px -8px rgba(0,0,0,.3); }
.streamer-name { font-size: 14px; }
.streamer-points { font-size: 12px; margin-top: 5px; }
.page-stats .dashboard-heading { margin: 0 0 24px; font-size: 28px; }

:where(a, button, input):focus-visible { outline: 3px solid var(--accent-color); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
    .page-home .cta-button:hover { background-color: var(--glass-hover); color: var(--text-dark); transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(12,34,57,.35), inset 0 1px 0 var(--glass-edge); }
    .theme-switcher:hover { transform: translateY(-2px); }
}
.page-home .cta-button:active, .btn:active, .home-button:active, .theme-switcher:active { transform: scale(.97); }
@media (max-width: 840px) {
    .page-home .content-card { padding: 34px 28px; }
    .content-card { border-radius: 30px; padding: 32px 26px; }
}
@media (max-width: 600px) {
    .page-home .content-card { padding: 30px 22px; }
    .page-home .hero-title { font-size: clamp(30px, 8.6vw, 38px); }
    .page-home .hero-subtitle { font-size: 14px; margin-bottom: 26px; }
    .page-home .social-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .page-home .social-links .cta-button { min-height: 90px; gap: 9px; }
    .page-home .service-links { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .page-home .service-links .cta-button { min-height: 56px; border-radius: 18px; }
    .page-home .section-divider { margin: 24px 0 20px; }
    .content-card { padding: 28px 22px; border-radius: 28px; }
    .page-stats .content-card { padding: 22px 18px; }
    .page-rovancs .content-card { padding: 28px 14px; }
    .grand-total-label { font-size: 15px; }
    .grand-total-value { font-size: 29px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .content-card, .modal-container, body > .user-menu, body > .theme-switcher { background: var(--background-end-color); }
}
@media (prefers-reduced-transparency: reduce) {
    .content-card, .modal-container, body > .user-menu, body > .theme-switcher { background: var(--background-end-color); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    .site-background::before, .content-card, .modal-container { animation: none; }
    .content-card, .cta-button, .btn, .theme-switcher, body { transition: none; }
    .page-home .cta-button:hover { transform: none; }
}