.pk-score{position:fixed;left:0;top:0;z-index:1000;height:100vh;width:100vw;background-image:url(/images/stage.jpg);background-size:cover}.pk-score__your{font-size:5rem;width:100vw;text-align:center;position:absolute;top:15vh;text-shadow:-1px 1px 5px black}.pk-score__number{position:absolute;width:100vw;text-align:center;font-size:12rem;top:25vh;font-weight:800;text-shadow:-2px 2px 6px black}.pk-score__review{position:absolute;width:100vw;text-align:center;font-size:3rem;top:62vh;text-shadow:-1px 1px 5px black}.pk-score__canvas{position:absolute;top:0;left:0;width:100%;height:100%}.dashboard{min-height:100vh;background:linear-gradient(135deg,#0d0d0d,#1a1a2e);padding:24px;max-width:1400px;margin:0 auto}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;flex-wrap:wrap;gap:16px}.header-left h1{font-size:1.8rem;margin:0;background:linear-gradient(135deg,#7c4dff,#ff4081);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.last-update{color:#666;font-size:.85rem}.header-right{display:flex;gap:12px}.btn-refresh,.btn-logout{padding:8px 16px;font-size:.9rem}.btn-refresh{background:#333}.btn-logout{background:#444}.dashboard-login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0d0d0d,#1a1a2e)}.login-card{background:#1a1a1a;padding:48px;border-radius:16px;text-align:center;max-width:400px;width:90%}.login-card h1{font-size:2rem;margin-bottom:8px}.login-card h2{color:#888;font-weight:400;margin-bottom:32px}.login-card input{margin-bottom:16px}.login-card .error{color:#f44;margin-bottom:16px}.period-filter{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}.period-filter>span{color:#888;font-weight:500}.period-buttons{display:flex;gap:8px}.period-buttons button{padding:8px 16px;background:#222;border:1px solid #333;font-size:.9rem}.period-buttons button.active{background:var(--accent);border-color:var(--accent)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:24px}.stat-card{background:linear-gradient(135deg,#1e1e2e,#252535);border-radius:16px;padding:24px;display:flex;gap:16px;align-items:center;border:1px solid #333;transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.stat-icon{font-size:2.5rem}.stat-content{flex:1}.stat-value{font-size:2rem;font-weight:700;background:linear-gradient(135deg,#fff,#ccc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-title{color:#aaa;font-size:.9rem;margin-top:4px}.stat-subtitle{color:#666;font-size:.8rem;margin-top:2px;display:flex;align-items:center;gap:8px}.growth{font-weight:600;padding:2px 6px;border-radius:4px;font-size:.75rem}.growth.positive{background:#4caf5033;color:#4caf50}.growth.negative{background:#f4433633;color:#f44336}.totals-row{display:flex;gap:24px;margin-bottom:32px;flex-wrap:wrap;background:#1a1a1a;padding:16px 24px;border-radius:12px}.total-item{display:flex;flex-direction:column;gap:4px}.total-label{color:#666;font-size:.8rem;text-transform:uppercase}.total-value{color:#fff;font-size:1.1rem;font-weight:600}.dashboard-section{background:#1a1a1a;border-radius:16px;padding:24px;margin-bottom:24px}.dashboard-section h2{font-size:1.2rem;margin:0 0 20px;display:flex;align-items:center;gap:8px}.active-rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.active-room-card{background:linear-gradient(135deg,#2d2d3d,#1e1e2e);border-radius:12px;padding:16px;border:1px solid #444}.room-code{font-size:1.4rem;font-weight:700;color:var(--accent);margin-bottom:8px}.room-info{display:flex;gap:12px;font-size:.85rem;color:#888;margin-bottom:8px}.now-playing-mini{font-size:.8rem;color:#aaa;background:#333;padding:6px 10px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.charts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px;margin-bottom:24px}.chart-section{min-height:300px}.daily-chart{height:220px;display:flex;flex-direction:column}.chart-bars{flex:1;display:flex;align-items:flex-end;gap:8px;padding-bottom:8px}.chart-bar-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}.chart-bar{width:100%;max-width:40px;background:linear-gradient(180deg,#ff4081,#7c4dff);border-radius:4px 4px 0 0;min-height:4px;display:flex;align-items:flex-start;justify-content:center;transition:height .3s}.bar-value{font-size:.7rem;color:#fff;font-weight:600;transform:translateY(-18px)}.bar-label{font-size:.65rem;color:#666;margin-top:4px;white-space:nowrap}.chart-legend{text-align:center;color:#666;font-size:.8rem;padding-top:12px;border-top:1px solid #333;margin-top:8px}.peak-hours-chart{display:flex;flex-direction:column}.hours-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.hour-cell{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;background:#222;transition:background-color .3s}.hour-label{font-size:.75rem;color:#fff;font-weight:500}.top-content-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}.top-list{display:flex;flex-direction:column;gap:12px}.top-item{display:flex;align-items:center;gap:12px;padding:12px;background:#222;border-radius:10px;transition:background .2s}.top-item:hover{background:#2a2a2a}.rank{font-size:1.2rem;min-width:32px;text-align:center}.song-thumb{width:48px;height:36px;object-fit:cover;border-radius:4px}.song-info,.user-info{flex:1;min-width:0}.song-title,.user-name{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-count,.song-count{font-size:.8rem;color:#888}.user-avatar{width:40px;height:40px;background:linear-gradient(135deg,#7c4dff,#ff4081);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.2rem}.bar-container{width:80px;height:8px;background:#333;border-radius:4px;overflow:hidden}.bar{height:100%;background:linear-gradient(90deg,#ff4081,#7c4dff);border-radius:4px;transition:width .3s}.bar.user-bar{background:linear-gradient(90deg,#7c4dff,#3f51b5)}.empty-state{color:#666;text-align:center;padding:32px}@media (max-width: 768px){.dashboard{padding:16px}.dashboard-header{flex-direction:column;align-items:flex-start}.header-left h1{font-size:1.4rem}.stats-grid{grid-template-columns:repeat(2,1fr)}.charts-row,.top-content-row{grid-template-columns:1fr}.totals-row{flex-direction:column;gap:12px}.bar-container{display:none}}:root{--bg: #0d0d0d;--card: #1a1a1a;--accent: #ff4081;--text: #fff;--muted: #888}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100dvh}button{cursor:pointer;border:none;border-radius:8px;padding:12px 24px;font-size:1rem;font-weight:600;background:var(--accent);color:#fff;transition:opacity .2s}button:disabled{opacity:.5;cursor:not-allowed}button:hover:not(:disabled){opacity:.85}input{padding:12px 16px;border-radius:8px;border:1px solid #333;background:#222;color:#fff;font-size:1rem;width:100%}.container{max-width:480px;margin:0 auto;padding:24px 16px}.card{background:var(--card);border-radius:12px;padding:20px;margin-bottom:16px}h1,h2,h3{margin:0 0 16px}.queue-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #333}.queue-item:last-child{border-bottom:none}.ranking-item{display:flex;justify-content:space-between;padding:6px 0}.now-playing{background:linear-gradient(135deg,#ff4081,#7c4dff);border-radius:12px;padding:20px;margin-bottom:16px;text-align:center}.player-wrapper{position:relative;width:100%;padding-bottom:56.25%;background:#000;border-radius:12px;overflow:hidden;margin-bottom:16px}.player-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}.tabs{display:flex;gap:8px;margin-bottom:16px}.tabs button{flex:1;background:#333}.tabs button.active{background:var(--accent)}.yt-container{position:relative;width:100%;height:0;padding-bottom:56.25%;background:#000;border-radius:12px;overflow:hidden}.yt-container>div,.yt-container iframe{position:absolute!important;top:0;left:0;width:100%!important;height:100%!important;border:none}
