:root{font-family:Arial,Helvetica,sans-serif;color:#20232a;background:#fff;color-scheme:light;--page-bg:#fff;--panel-bg:#fff;--text:#20232a;--muted:#6b7280;--line:#eceef1;--control-bg:#fff;--control-text:#454b55;--control-line:#e5e7eb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
:root[data-theme="dark"]{color-scheme:dark;--page-bg:#111318;--panel-bg:#171920;--text:#f4f5f7;--muted:#a1a5af;--line:#292c34;--control-bg:#191b22;--control-text:#e5e7eb;--control-line:#383b45}
*{box-sizing:border-box}
html,body{min-width:0;min-height:100%;margin:0}
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--page-bg);color:var(--text);transition:background .18s ease,color .18s ease}
.topbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,6vw,88px);background:var(--page-bg);border-bottom:1px solid var(--line);transition:background .18s ease,border-color .18s ease}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:700 19px Arial,Helvetica,sans-serif;letter-spacing:-.55px}
.brand-logo{width:34px;height:34px;object-fit:contain;border-radius:8px}
.header-actions{display:flex;align-items:center;gap:14px}
.header-profile{display:flex;align-items:center;gap:9px;min-width:0;color:var(--text);font-size:13px}
.header-profile[hidden]{display:none}
.profile-avatar,.profile-fallback{width:34px;height:34px;flex:0 0 34px;border-radius:50%}
.profile-avatar{object-fit:cover}
.profile-fallback{display:grid;place-items:center;background:#5865f2;color:#fff;font-weight:700}
.profile-fallback[hidden]{display:none}
.profile-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.theme-toggle{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--control-bg);color:var(--text);cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.theme-toggle:hover{background:var(--line)}
.theme-toggle:focus-visible{outline:3px solid #aeb6ff;outline-offset:3px}
.theme-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sun-icon,:root[data-theme="dark"] .moon-icon{display:none}
:root[data-theme="dark"] .sun-icon{display:block}
.main-content{flex:1;display:grid;place-items:center;padding:clamp(28px,7vh,64px) clamp(16px,5vw,24px)}
.welcome-card[hidden],.dashboard[hidden]{display:none}
.welcome-card{width:min(100%,390px);padding:0;text-align:center}
.dashboard{width:min(100%,560px)}
.dashboard-heading{text-align:center}
.dashboard-heading .intro{margin-bottom:28px}
.eyebrow{margin:0 0 9px;color:#5865f2;font-size:11px;font-weight:700;letter-spacing:1.5px}
.redeem-card{padding:22px;border:1px solid var(--line);border-radius:10px;background:var(--panel-bg);box-shadow:0 8px 30px #1018280a}
.redeem-card label{display:block;margin-bottom:9px;color:var(--text);font-size:13px;font-weight:600}
.redeem-row{display:flex;gap:10px}
.redeem-row input{width:100%;min-width:0;height:46px;padding:0 13px;border:1px solid var(--control-line);border-radius:7px;outline:none;background:var(--control-bg);color:var(--control-text);font:14px Arial,Helvetica,sans-serif;transition:border-color .15s ease,box-shadow .15s ease}
.redeem-row input::placeholder{color:var(--muted)}
.redeem-row input:focus{border-color:#5865f2;box-shadow:0 0 0 3px #5865f226}
.redeem-button{min-width:112px;padding:0 16px;border:0;border-radius:7px;background:#5865f2;color:#fff;font:600 13px Arial,Helvetica,sans-serif;cursor:pointer;transition:background .15s ease}
.redeem-button:hover{background:#4752c4}
.redeem-button:focus-visible{outline:3px solid #aeb6ff;outline-offset:3px}
.redeem-feedback{margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
h1{margin:0;color:var(--text);font:700 27px/1.25 Arial,Helvetica,sans-serif;letter-spacing:-.8px}
.intro{margin:10px 0 26px;color:var(--muted);font-size:14px;line-height:1.6}
.discord-button{width:100%;height:48px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:7px;background:#5865f2;color:#fff;font:600 14px Arial,Helvetica,sans-serif;cursor:pointer;transition:background .15s ease}
.discord-button:hover{background:#4752c4}
.discord-button:focus-visible{outline:3px solid #aeb6ff;outline-offset:3px}
.discord-icon{width:20px;height:20px}
.discord-button[hidden],.redeem-feedback[hidden]{display:none}
.logout-button{padding:7px 12px;border:1px solid var(--control-line);border-radius:6px;color:var(--control-text);background:var(--control-bg);font:600 12px Arial,Helvetica,sans-serif;cursor:pointer}
.logout-button:hover{background:var(--line)}
.footer{padding:20px;text-align:center;color:var(--muted);font-size:12px}
.footer-divider{display:inline-block;width:3px;height:3px;margin:0 9px 3px;border-radius:50%;background:#a9adb5}
@media(max-width:480px){.topbar{min-height:66px;padding:0 20px}.header-actions{gap:9px}.header-profile{gap:6px}.profile-name{max-width:90px}.header-profile .logout-button{padding:6px 8px}.main-content{padding:32px 20px}.welcome-card{max-width:360px}.redeem-card{padding:17px}h1{font-size:clamp(21px,6.5vw,24px)}}
@media(max-width:340px){.topbar{padding-inline:12px}.header-actions{gap:7px}.header-profile{gap:5px;font-size:12px}.profile-avatar,.profile-fallback{width:30px;height:30px;flex-basis:30px}.profile-name{max-width:66px}.header-profile .logout-button{padding:5px 6px}.main-content{padding-inline:16px}.intro{font-size:13px}.redeem-row{flex-direction:column}.redeem-button{height:44px}}
@media(max-height:480px) and (orientation:landscape){.topbar{min-height:58px}.main-content{padding-block:20px}.footer{padding:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}