:root {
    --bg-deep-black: #050505;
    --panel-black: rgba(12, 12, 12, 0.95);
    --card-black: rgba(20, 20, 20, 0.8);
    --kb-red: #d32f2f;
    --kb-red-glow: rgba(211, 47, 47, 0.6);
    --splash-teal: #00e5ff;
    --teal-glow: rgba(0, 229, 255, 0.5);
    --text-light: #ffffff;
    --text-dim: #b0b0b0;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    background-color: var(--bg-deep-black);
    color: var(--text-light);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex; justify-content: center; align-items: center; min-height: 100vh;
    padding: 10px; overflow-x: hidden;
}

.bg-graphics {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background: radial-gradient(circle at 50% 50%, #150505 0%, #050505 100%);
}

.mist { position: absolute; width: 150%; height: 150%; top: -25%; left: -25%; filter: blur(80px); opacity: 0.15; pointer-events: none; }
.mist-1 { background: radial-gradient(circle at 20% 30%, var(--kb-red) 0%, transparent 40%); animation: mistMove 20s infinite alternate; }
.mist-2 { background: radial-gradient(circle at 80% 70%, var(--splash-teal) 0%, transparent 40%); animation: mistMove 25s infinite alternate-reverse; }

@keyframes mistMove { from { transform: translate(0, 0); } to { transform: translate(5%, 5%); } }

.bear-watermark {
    position: absolute; bottom: 20px; right: 20px; font-size: 200px;
    color: rgba(255, 255, 255, 0.02); pointer-events: none; z-index: -1;
}
.bear-watermark::before { content: "\f1b0"; font-family: "Font Awesome 5 Free"; font-weight: 900; }

.portal-container { width: 100%; max-width: 600px; z-index: 10; margin: auto; }
.glass { 
    background: var(--panel-black); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-top: 4px solid var(--kb-red); 
    box-shadow: 0 25px 60px rgba(0,0,0,0.9); border-radius: 24px;
    overflow: hidden; /* Keeps everything inside the frame */
}
.panel { padding: 30px 20px; text-align: center; }
.glow-text { text-shadow: 0 0 15px var(--kb-red-glow); font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.teal-text { color: var(--splash-teal); text-shadow: 0 0 10px var(--teal-glow); }
.subtitle { color: var(--text-dim); margin-bottom: 25px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 3px; }

.scrollable-stats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; max-height: 50vh; overflow-y: auto; padding-right: 5px; }
.scrollable-stats::-webkit-scrollbar { width: 4px; }
.scrollable-stats::-webkit-scrollbar-thumb { background: var(--splash-teal); border-radius: 10px; }

.stat-card {
    background: var(--card-black); border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.05); border-right: 4px solid var(--splash-teal);
    padding: 15px 18px; display: flex; align-items: center; text-align: left;
}

.stat-icon-wrapper {
    background: rgba(255, 255, 255, 0.02); width: 45px; height: 45px; border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; margin-right: 15px; 
    border: 1px solid rgba(0, 229, 255, 0.2); flex-shrink: 0;
}
.stat-icon { font-size: 1.2rem; color: var(--splash-teal); }
.stat-info h3 { font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 2px; }
.stat-info p { font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1.1; }

.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; gap: 10px; width: 100%; }
.user-profile-header { display: flex; align-items: center; min-width: 0; }
#user-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--splash-teal); margin-right: 10px; flex-shrink: 0; }
.user-profile-header h2 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-actions { display: flex; gap: 8px; flex-shrink: 0; }

.btn { padding: 10px 15px; border: none; border-radius: 10px; font-weight: 700; cursor: pointer; transition: 0.3s; font-size: 0.85rem; }
.twitch-btn { background: #9146FF; color: #fff; width: 100%; margin-top: 15px; }
.logout-btn { background: rgba(255,255,255,0.05); color: var(--text-dim); border: 1px solid rgba(255,255,255,0.1); }
.home-btn { background: rgba(0, 229, 255, 0.1); color: var(--splash-teal); border: 1px solid rgba(0, 229, 255, 0.2); }

#download-card-btn { background: linear-gradient(135deg, var(--splash-teal), #00b8d4); color: #000; width: 100%; margin-top: 5px; }

/* MOBILE FRAME PROTECTION */
@media (max-width: 480px) {
    .dashboard-header { flex-direction: column; align-items: center; text-align: center; gap: 15px; }
    .user-profile-header { flex-direction: column; gap: 8px; }
    #user-avatar { margin-right: 0; }
    .header-actions { width: 100%; justify-content: center; }
    .home-btn, .logout-btn { flex: 1; max-width: 150px; }
    .stat-info p { font-size: 1.1rem; }
}