.lofi-page{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}.lofi-navbar{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);position:sticky;top:0;z-index:100}.lofi-logo{display:flex;align-items:center;gap:var(--spacing-sm);text-decoration:none;transition:transform .2s ease}.lofi-logo:hover{transform:scale(1.05)}.lofi-logo-img{width:28px;height:28px}.lofi-logo-text{font-size:1.1rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px}.lofi-nav-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.lofi-nav-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);color:var(--text-secondary);text-decoration:none;font-size:.8rem;font-weight:500;transition:all .2s ease}.lofi-nav-btn:hover{background:var(--glass-bg-hover);color:var(--text-primary);border-color:var(--accent-primary)}.lofi-nav-btn svg{fill:currentColor}.lofi-nav-btn-youtube:hover{border-color:red;color:red}.lofi-nav-btn-local:hover{border-color:#ffa726;color:#ffa726}.lofi-firefox-warning{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:linear-gradient(90deg,#ff980026,#ff57221a);border-bottom:1px solid rgba(255,152,0,.3);color:#ffb74d;font-size:.85rem}.lofi-firefox-warning svg{flex-shrink:0;color:#ff9800}.lofi-firefox-warning span{flex:1}.lofi-firefox-warning a{color:#ffd54f;text-decoration:underline;cursor:pointer}.lofi-firefox-warning a:hover{color:#fff}.lofi-firefox-warning.hidden{display:none}.lofi-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:var(--spacing-lg)}.lofi-split-layout{display:flex;gap:var(--spacing-lg);width:100%;max-width:1200px;align-items:flex-start}.lofi-player-side{flex:1.1;display:flex;flex-direction:column;gap:var(--spacing-md)}.lofi-stations-side{flex:.9;position:sticky;top:80px}.lofi-stations-card{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--spacing-lg);box-shadow:0 20px 60px #0006}.lofi-large-categories{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.lofi-large-cat-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:var(--control-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-secondary);font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease}.lofi-large-cat-btn:hover{background:var(--glass-bg-hover);color:var(--text-primary);border-color:var(--accent-primary)}.lofi-large-cat-btn.active{background:var(--accent-gradient);border-color:var(--accent-primary);color:#fff}.lofi-category-filters{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-bottom:var(--spacing-md)}.lofi-filter-pill{padding:var(--spacing-xs) var(--spacing-sm);background:var(--control-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);color:var(--text-secondary);font-family:inherit;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s ease}.lofi-filter-pill:hover{background:var(--glass-bg-hover);color:var(--text-primary);border-color:var(--accent-primary)}.lofi-filter-pill.active{background:var(--accent-gradient);border-color:var(--accent-primary);color:#fff}.lofi-player-card{width:100%;background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 20px 60px #0006}.lofi-station-info{padding:var(--spacing-lg);text-align:center;background:linear-gradient(135deg,#dc26261f,#ea580c1a,#f59e0b1f,#fbbf2414)}.lofi-now-playing{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.lofi-live-badge{display:flex;align-items:center;gap:6px;padding:4px 12px;background:#ff525233;border:1px solid rgba(255,82,82,.4);border-radius:var(--radius-full);color:#ff5252;font-size:.7rem;font-weight:700;letter-spacing:1px}.lofi-live-dot{width:8px;height:8px;background:#ff5252;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.lofi-station-name{font-size:1.8rem;font-weight:700;color:var(--text-primary);margin:var(--spacing-sm) 0 0}.lofi-station-desc{font-size:.9rem;color:var(--text-muted);margin:0}.lofi-video-wrapper{aspect-ratio:16 / 9;background:#000;position:relative}.lofi-video-wrapper iframe,.lofi-video-wrapper>div{width:100%;height:100%;border:none}.lofi-controls{padding:var(--spacing-md) var(--spacing-lg);background:#0000004d;border-top:1px solid var(--glass-border)}.lofi-control-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);flex-wrap:wrap}.lofi-volume-control{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-secondary)}.lofi-volume-control svg{fill:currentColor;flex-shrink:0}.lofi-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100px;height:4px;background:var(--control-bg);border-radius:2px;cursor:pointer}.lofi-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent-gradient);border-radius:50%;cursor:pointer}.lofi-volume-value{font-size:.8rem;color:var(--text-muted);min-width:35px}.lofi-timer-control{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-secondary)}.lofi-timer-control svg{fill:currentColor;flex-shrink:0}.lofi-timer-label{font-size:.8rem;color:var(--text-muted);white-space:nowrap}.lofi-plus-minus-control{display:flex;align-items:center;gap:4px}.lofi-plus-minus-btn{display:flex;align-items:center;justify-content:center;width:28px;height:26px;padding:0;background:var(--control-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-secondary);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.lofi-plus-minus-btn:hover{background:var(--glass-bg-hover);color:var(--text-primary);border-color:var(--accent-primary)}.lofi-plus-minus-value{min-width:52px;text-align:center;font-size:.8rem;font-weight:600;color:var(--text-primary)}.lofi-timer-remaining{font-size:.8rem;color:var(--accent-primary);font-weight:600}.lofi-stations{padding:var(--spacing-lg);border-top:1px solid var(--glass-border)}.lofi-stations-title{font-size:.9rem;font-weight:600;color:var(--text-muted);margin:0 0 var(--spacing-md);text-align:center;text-transform:uppercase;letter-spacing:1px}.lofi-station-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-md)}.lofi-station-card{display:flex;flex-direction:column;align-items:stretch;padding:0;background:var(--control-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-secondary);font-family:inherit;cursor:pointer;transition:all .2s ease;overflow:hidden;text-align:center}.lofi-station-card:hover{background:var(--glass-bg-hover);border-color:var(--accent-primary);color:var(--text-primary);transform:translateY(-3px);box-shadow:0 8px 24px #0000004d}.lofi-station-card.active{border-color:var(--accent-primary);box-shadow:0 0 0 2px #f59e0b66}.lofi-station-card-thumb{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#ffffff0a}.lofi-station-card.active .lofi-station-card-thumb{box-shadow:inset 0 0 0 2px #f59e0b4d}.lofi-station-card-title{display:block;padding:var(--spacing-sm) var(--spacing-sm);font-size:.8rem;font-weight:600;color:var(--text-primary);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lofi-session{display:flex;gap:var(--spacing-xl);padding:var(--spacing-md) var(--spacing-lg);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full)}.lofi-session-item{display:flex;flex-direction:column;align-items:center;gap:2px}.lofi-session-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.lofi-session-value{font-size:1.1rem;font-weight:600;color:var(--text-primary);font-family:SF Mono,monospace}@media (max-width: 900px){.lofi-split-layout{flex-direction:column}.lofi-stations-side{position:static;width:100%}.lofi-player-side{width:100%}}@media (max-width: 600px){.lofi-navbar{padding:var(--spacing-sm) var(--spacing-md)}.lofi-nav-btn span{display:none}.lofi-player-card,.lofi-stations-card{border-radius:var(--radius-lg)}.lofi-station-grid{grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm)}.lofi-station-card-title{font-size:.75rem}.lofi-control-row{flex-direction:column;align-items:stretch}.lofi-volume-control,.lofi-timer-control{justify-content:center}.lofi-slider{flex:1;max-width:150px}}