.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}.pomo-card{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-xl);padding:var(--spacing-lg);box-shadow:0 10px 40px #0000004d;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.pomo-header{display:flex;align-items:center;justify-content:space-between;width:100%}.pomo-title{font-size:.95rem;font-weight:700;color:var(--text-primary)}.pomo-cycle{font-size:.8rem;font-weight:600;color:var(--text-muted);background:#ffffff0f;padding:4px 10px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.08)}.pomo-modes{display:flex;gap:4px;width:100%;padding:4px;background:#ffffff0a;border-radius:var(--radius-md)}.pomo-mode-btn{flex:1;padding:8px 6px;background:transparent;border:none;border-radius:8px;color:var(--text-muted);font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.pomo-mode-btn:hover{color:var(--text-primary);background:#ffffff0f}.pomo-mode-btn.active{background:#f59e0b26;color:var(--accent-primary)}.pomo-ring-wrap{position:relative;width:140px;height:140px;display:flex;align-items:center;justify-content:center}.pomo-ring{width:100%;height:100%;transform:rotate(-90deg)}.pomo-ring-bg{fill:none;stroke:#ffffff0f;stroke-width:5}.pomo-ring-progress{fill:none;stroke:var(--accent-primary);stroke-width:5;stroke-linecap:round;stroke-dasharray:326.73;stroke-dashoffset:0;transition:stroke-dashoffset .5s ease}.pomo-card[data-pomo-state=focus] .pomo-ring-progress{stroke:#f59e0b}.pomo-card[data-pomo-state=short] .pomo-ring-progress{stroke:#34d399}.pomo-card[data-pomo-state=long] .pomo-ring-progress{stroke:#60a5fa}.pomo-time{position:absolute;font-size:1.8rem;font-weight:700;color:var(--text-primary);font-family:SF Mono,Fira Code,monospace;letter-spacing:1px;cursor:pointer;transition:color .2s ease}.pomo-time:hover{color:var(--accent-primary)}.pomo-card.pomo-running .pomo-time{cursor:default}.pomo-card.pomo-running .pomo-time:hover{color:var(--text-primary)}.pomo-time-input{position:absolute;width:80px;padding:6px 4px;background:#0009;border:1.5px solid var(--accent-primary);border-radius:10px;color:var(--text-primary);font-size:1.5rem;font-weight:700;font-family:SF Mono,Fira Code,monospace;text-align:center;outline:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;z-index:2}.pomo-time-input::-webkit-inner-spin-button,.pomo-time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pomo-time-input.hidden{display:none}.pomo-hint{font-size:.7rem;color:var(--text-muted);opacity:.5;transition:opacity .2s ease;margin-top:-4px}.pomo-card.pomo-running .pomo-hint{opacity:0;pointer-events:none}.pomo-controls{display:flex;align-items:center;gap:var(--spacing-sm)}.pomo-btn{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;cursor:pointer;transition:all .2s ease;font-family:inherit}.pomo-btn svg{fill:currentColor}.pomo-btn-primary{width:48px;height:48px;background:var(--accent-gradient);color:#fff;box-shadow:0 4px 16px var(--accent-glow)}.pomo-btn-primary:hover{transform:scale(1.08);box-shadow:0 6px 24px var(--accent-glow)}.pomo-btn-secondary{width:38px;height:38px;background:#ffffff14;color:var(--text-secondary);border:1px solid rgba(255,255,255,.1)}.pomo-btn-secondary:hover{background:#ffffff24;color:var(--text-primary)}.pomo-card.pomo-running{border-color:#f59e0b40;box-shadow:0 10px 40px #0000004d,0 0 0 1px #f59e0b1a}.pomo-card.pomo-running[data-pomo-state=short]{border-color:#34d39940}.pomo-card.pomo-running[data-pomo-state=long]{border-color:#60a5fa40}@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}}