:root{--bg: #121212;--card: #1E1E1E;--card-hover: #252525;--divider: #2A2A2A;--sidebar: #181818;--topbar: #1A1A1A;--text-primary: #FFFFFF;--text-secondary: #888888;--text-tertiary: #555555;--button-inactive: #444444;--accent: #4798A4;--accent-alt: #69B898;--accent-purple:#9778CB;--online: #4CAF50;--offline: #F44336;--sidebar-width: 220px;--topbar-height: 52px}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--bg);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:13px;line-height:1.4;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}button{cursor:pointer;border:none;background:none;color:inherit;font:inherit;padding:0}input{font:inherit;color:inherit}#app{height:100vh;display:flex;flex-direction:column;background:var(--bg)}.topbar{height:var(--topbar-height);background:var(--topbar);border-bottom:1px solid var(--divider);display:flex;align-items:stretch;flex:0 0 auto}.topbar .logo-col{width:var(--sidebar-width);border-right:1px solid var(--divider);display:flex;align-items:center;justify-content:center;cursor:pointer}.topbar .logo-col img{height:30px;width:110px;object-fit:contain}.topbar .right{flex:1;display:flex;align-items:center;gap:12px;padding:0 14px}.search{flex:0 1 420px;display:flex;align-items:center;gap:8px;background:var(--card);padding:7px 10px}.search svg{width:12px;height:12px;color:var(--text-secondary)}.search input{flex:1;background:transparent;border:none;outline:none;color:var(--text-primary);font-size:13px}.search .clear{color:var(--text-secondary);font-size:14px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.volume{display:flex;align-items:center;gap:6px;background:var(--card);padding:4px 8px}.volume .speaker{color:var(--text-secondary);width:18px;height:18px;display:flex;align-items:center;justify-content:center}.volume input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:90px;height:4px;background:var(--button-inactive);border-radius:2px;outline:none}.volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}.volume input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.mini-player{display:flex;align-items:center;gap:8px;background:var(--card);padding:4px 8px;cursor:pointer;max-width:220px}.mini-player .pp{width:22px;height:22px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}.mini-player .text{display:flex;flex-direction:column;min-width:0}.mini-player .name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.mini-player .sub{font-size:9px;color:var(--text-secondary)}.fav-btn{display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--button-inactive);color:var(--text-primary);font-size:11px;font-weight:700}.fav-btn.active{background:var(--accent);color:#fff}.fav-btn .star{font-size:12px}.main{flex:1 1 auto;display:grid;grid-template-columns:var(--sidebar-width) 1fr;min-height:0}.sidebar{background:var(--sidebar);border-right:1px solid var(--divider);overflow-y:auto;padding:0}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:var(--divider)}.section{border-bottom:1px solid var(--divider)}.section-header{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;width:100%;text-align:left}.section-header .icon{color:var(--accent);font-size:11px;width:14px;text-align:center}.section-header .title{flex:1;font-size:12px;font-weight:700;color:var(--text-primary)}.section-header .chev{color:var(--text-secondary);font-size:9px;font-weight:700}.section-body{padding-bottom:6px}.row-check,.row-radio{display:flex;align-items:center;gap:8px;padding:4px 18px;font-size:12px;color:var(--text-primary);width:100%;text-align:left;cursor:pointer}.row-check .box{width:14px;height:14px;background:var(--button-inactive);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700}.row-check.on .box{background:var(--accent)}.row-radio .dot-outer{width:12px;height:12px;border-radius:50%;background:var(--button-inactive);display:flex;align-items:center;justify-content:center}.row-radio.on .dot-outer{background:var(--accent)}.row-radio .dot-inner{width:4px;height:4px;border-radius:50%;background:#fff;display:none}.row-radio.on .dot-inner{display:block}.toggle-online{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;font-size:12px}.toggle-online .switch{width:30px;height:18px;background:var(--button-inactive);border-radius:9px;position:relative;transition:background .15s}.toggle-online .switch:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}.toggle-online.on .switch{background:var(--accent)}.toggle-online.on .switch:after{transform:translate(12px)}.reset-filters{margin:8px 12px 12px;padding:8px;background:var(--button-inactive);color:#fff;font-size:11px;font-weight:600;width:calc(100% - 24px)}.station-area{position:relative;display:flex;flex-direction:column;min-height:0}.station-list{overflow-y:auto;flex:1}.station-list::-webkit-scrollbar{width:8px}.station-list::-webkit-scrollbar-thumb{background:var(--divider)}.station-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--card);border-bottom:1px solid var(--divider);border-left:3px solid transparent;cursor:pointer;transition:background .1s}.station-row:hover,.station-row:active{background:var(--card-hover)}.station-row.current{background:var(--card-hover);border-left-color:var(--accent)}.station-row .icon-wrap{width:36px;height:36px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:4px;flex:0 0 36px}.station-row .icon-wrap img{width:100%;height:100%;object-fit:cover}.station-row .icon-wrap.fallback{color:#fff;font-size:14px;font-weight:700}.station-row .info{flex:1;min-width:0}.station-row .name-line{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}.station-row .meta{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.station-row .playing-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}.row-actions{display:flex;gap:4px}.row-actions button{width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}.row-actions .play{background:var(--accent)}.row-actions .star{background:var(--button-inactive);color:var(--text-secondary)}.row-actions .star.on{color:var(--accent)}.row-actions .info-btn{background:var(--button-inactive);color:var(--text-secondary)}.row-actions .info-btn:disabled{opacity:.4;cursor:default}.fade-bottom{position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(to bottom,rgba(18,18,18,0),rgba(18,18,18,.6) 50%,var(--bg));pointer-events:none}.loading-row,.empty-row{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:var(--text-secondary);font-size:12px;gap:10px}.empty-row .title{color:var(--text-primary);font-weight:600;font-size:13px}.empty-row .retry{padding:6px 12px;background:var(--accent);color:#fff;font-size:12px}.spinner{width:14px;height:14px;border:2px solid var(--divider);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-row.inline-error{flex-direction:row;gap:10px;color:var(--offline);font-size:12px;flex-wrap:wrap}.retry.small{padding:5px 12px;font-size:11px;background:var(--accent);color:#fff}.overlay-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100}.overlay-card{width:380px;background:var(--bg);border:1px solid var(--divider)}.overlay-card header{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--divider)}.overlay-card header h2{margin:0;font-size:13px;font-weight:700}.overlay-card header .x{width:24px;height:24px;background:var(--button-inactive);color:var(--text-primary);font-size:12px;display:flex;align-items:center;justify-content:center}.overlay-card .body{padding:18px;display:flex;flex-direction:column;align-items:center;gap:14px}.overlay-card .big-icon{width:96px;height:96px;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:700}.overlay-card .big-icon img{width:100%;height:100%;object-fit:cover}.overlay-card .station-name{font-size:16px;font-weight:700;text-align:center}.overlay-card .station-meta{font-size:11px;color:var(--text-secondary)}.overlay-card .controls{display:flex;gap:18px;align-items:center}.overlay-card .controls button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--button-inactive);color:var(--text-secondary);font-size:14px}.overlay-card .controls .pp{width:54px;height:54px;background:var(--accent);color:#fff;font-size:18px}.overlay-card .controls .fav.on{color:var(--accent)}.overlay-card .vol{display:flex;gap:8px;align-items:center;width:100%;padding:0 12px}.overlay-card .vol input{flex:1}.overlay-card .err{color:var(--offline);font-size:11px;text-align:center;padding:0 14px}.login-bg{height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#1f1f1f,#0e0e0e);padding:24px}.login-box{width:320px;max-width:100%;background:var(--card);border:1px solid var(--divider);padding:28px 24px;text-align:center}.login-logo{width:180px;height:auto;margin-bottom:14px}.login-box h1{font-size:18px;font-weight:700;margin:0 0 18px}.login-form{display:flex;flex-direction:column;gap:10px}.login-form input{background:var(--bg);border:1px solid var(--divider);padding:10px 12px;color:var(--text-primary);font-size:14px;outline:none}.login-form input:focus{border-color:var(--accent)}.login-submit{background:var(--accent);color:#fff;padding:10px;font-size:14px;font-weight:600;margin-top:4px}.login-submit:disabled{opacity:.6}.login-error{color:var(--offline);font-size:12px;min-height:14px}.login-hint{color:var(--text-secondary);font-size:11px;margin-top:14px}.settings-card{width:420px;max-height:84vh;display:flex;flex-direction:column}.settings-body{padding:14px 18px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.settings-me{color:var(--text-secondary);font-size:12px;margin:0 0 6px}.settings-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin:14px 0 6px;font-weight:700}.settings-form{display:flex;flex-direction:column;gap:6px}.settings-form input{background:var(--bg);border:1px solid var(--divider);padding:8px 10px;color:var(--text-primary);font-size:13px;outline:none}.settings-form input:focus{border-color:var(--accent)}.settings-btn{background:var(--accent);color:#fff;padding:8px;font-size:13px;font-weight:600;align-self:flex-start;padding-inline:16px}.settings-btn.logout{background:var(--button-inactive)}.settings-msg{font-size:11px;min-height:12px}.settings-msg.ok{color:var(--accent-alt)}.settings-msg.err{color:var(--offline)}.settings-userlist{list-style:none;margin:0;padding:0;border:1px solid var(--divider)}.settings-userlist li{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--divider);font-size:13px}.settings-userlist li:last-child{border-bottom:0}.settings-del{background:var(--button-inactive);color:var(--text-secondary);padding:4px 10px;font-size:11px}.settings-del:hover{background:var(--offline);color:#fff}.settings-logout-row{margin-top:18px;display:flex;justify-content:flex-end}.settings-btn-top{width:28px;height:28px;background:var(--button-inactive);color:var(--text-secondary);font-size:14px;display:flex;align-items:center;justify-content:center}.settings-btn-top:hover{color:var(--accent)}.favorites-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--topbar);border-bottom:1px solid var(--divider)}.favorites-header .star{color:var(--accent)}.favorites-header h2{margin:0;font-size:13px;font-weight:900;flex:1}.favorites-header .count{font-size:11px;color:var(--text-secondary)}.hamburger{display:none;width:36px;height:36px;background:var(--button-inactive);color:var(--text-primary);font-size:16px;align-items:center;justify-content:center;flex:0 0 auto}.sidebar-backdrop{display:none;position:fixed;inset:var(--topbar-height) 0 0 0;background:#00000080;z-index:40}.sidebar-backdrop.show{display:block}*:focus{outline:none}button:focus-visible,input:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (max-width: 1100px){:root{--sidebar-width: 200px}.search{max-width:320px}.volume input[type=range]{width:70px}.mini-player .name{max-width:100px}}@media (max-width: 760px){:root{--topbar-height: 56px}.topbar .logo-col{width:auto;min-width:70px;padding:0 8px}.topbar .logo-col img{width:50px;height:24px}.topbar .right{padding:0 8px;gap:8px}.hamburger{display:flex}.search{flex:1 1 auto;max-width:none}.search input{font-size:16px}.volume,.mini-player .text{display:none}.mini-player{padding:4px 6px}.mini-player .pp{width:28px;height:28px}.fav-btn{padding:6px 8px}.settings-btn-top{width:34px;height:34px}.main{grid-template-columns:1fr}.sidebar{position:fixed;top:var(--topbar-height);bottom:0;left:0;width:280px;max-width:85vw;z-index:50;transform:translate(-100%);transition:transform .25s ease;border-right:1px solid var(--divider)}.sidebar.open{transform:translate(0)}.station-row{padding:12px;min-height:60px}.row-actions button{width:36px;height:36px;font-size:14px}.row-check,.row-radio{padding:8px 18px;min-height:36px}.section-header,.toggle-online{padding:12px}.login-box{width:100%;max-width:380px}.settings-card{width:92vw;max-width:480px;max-height:88vh}.overlay-card{width:92vw;max-width:420px}}@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){:root{--topbar-height: 48px}.topbar .logo-col img{height:22px}.station-row{padding:6px 10px;min-height:48px}}@media (min-width: 1600px){body{font-size:14px}.station-row{padding:12px 14px;min-height:64px}.station-row .name-line{font-size:15px}.station-row .meta{font-size:13px}.row-actions button{width:32px;height:32px;font-size:14px}.row-check,.row-radio{padding:6px 18px;font-size:14px}button:focus-visible,input:focus-visible{outline-width:3px;outline-offset:3px}}@media (hover: none){.station-row:hover{background:var(--card)}.settings-btn-top:hover{color:var(--text-secondary)}}