:root{color-scheme:dark;font-family:Segoe UI,Inter,sans-serif;line-height:1.5;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0}img{display:block;max-width:100%}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit}:root{--night: #11161c;--deep-slate: #18212b;--soft-slate: #22303d;--steel-blue: #8fafc7;--cyan-accent: #8fa68e;--warm-coral: #c58f82;--mist: #e2e8ee;--muted-mist: #a8b4bf;--glow-blue: #2a7fff;--background: var(--night);--surface-1: var(--deep-slate);--surface-2: var(--soft-slate);--text-main: var(--mist);--muted-text: var(--muted-mist);--accent-primary: var(--steel-blue);--accent-secondary: var(--cyan-accent);--accent-coral: var(--warm-coral);--accent-blue: var(--glow-blue);--border-soft: rgb(143 175 199 / 16%);--border-strong: rgb(143 175 199 / 28%);--panel-shadow: 0 24px 50px rgb(0 0 0 / 26%)}body{background:linear-gradient(180deg,#11161cfa,#0a0e12),var(--background);color:var(--text-main)}::selection{background:#2a7fff5c;color:var(--mist)}.shell{min-height:100vh;padding:16px 12px 112px}.shell__backdrop{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at top left,rgb(42 127 255 / 16%),transparent 26%),radial-gradient(circle at top right,rgb(197 143 130 / 14%),transparent 24%),linear-gradient(180deg,rgb(24 33 43 / 66%),transparent 34%)}.navbar,.content,.player-bar{position:relative;z-index:1}.navbar{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;max-width:1200px;margin:0 auto 18px;padding:14px;border:1px solid var(--border-soft);border-radius:26px;background:linear-gradient(180deg,#18212bf5,#11161cf5);box-shadow:var(--panel-shadow)}.navbar__brand img{width:88px;height:auto;display:block}.navbar__pages{display:flex;gap:8px;align-items:center;justify-content:flex-start;min-width:0;overflow-x:auto;scrollbar-width:none}.navbar__pages::-webkit-scrollbar{display:none}.navbar__page,.genre-pill,.favorite-toggle,.player-bar__button{border:0;border-radius:999px;font:inherit;font-weight:700}.navbar__page{padding:10px 14px;background:transparent;color:var(--muted-text);white-space:nowrap}.navbar__page--active{background:#8fafc72e;color:var(--text-main)}.content{max-width:1200px;margin:0 auto}.search-panel{display:flex;align-items:center;gap:10px;margin-bottom:14px}.search-panel__input-container{flex:1 1 auto;position:relative;display:flex;align-items:center;min-width:0}.search-panel__input-container input{width:100%;min-width:0;padding:14px 44px 14px 16px;border:1px solid rgb(143 175 199 / 16%);border-radius:20px;background:#090d13f0;color:var(--text-main);font:inherit}.search-panel__input-container input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.search-panel__input-container input::placeholder{font-style:italic}.search-panel__clear{position:absolute;right:14px;background:transparent;border:0;color:var(--muted-text);font-size:1.4rem;font-weight:400;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s ease}.search-panel__clear:hover{color:var(--text-main)}.search-panel__count{flex:0 0 auto;width:115px;text-align:center;padding:10px 0;border-radius:999px;background:#22303db8;color:var(--text-main);font-size:.88rem;font-weight:700;white-space:nowrap}.genre-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.genre-pill{padding:10px 14px;background:#22303db8;color:var(--text-main)}.genre-pill--active{background:#8fafc73d;box-shadow:inset 0 0 0 1px #8fafc733}.feedback{color:var(--accent-coral)}.empty-state{display:grid;gap:8px;padding:24px 18px;border:1px solid var(--border-soft);border-radius:24px;background:linear-gradient(180deg,#18212beb,#11161ceb);color:var(--muted-text)}.station-list{display:grid;gap:10px}.station-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid rgb(143 175 199 / 12%);border-radius:22px;background:linear-gradient(180deg,#18212bf0,#11161ceb)}.station-row--active{border-color:#2a7fff6b;box-shadow:0 0 0 1px #2a7fff29}.station-row__main{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;min-width:0;padding:0;border:0;background:transparent;color:inherit;text-align:left}.station-row__logo,.station-row__fallback,.player-bar__logo,.player-bar__fallback{width:64px;height:64px;border-radius:18px;object-fit:cover}.station-row__fallback,.player-bar__fallback{display:grid;place-items:center;font-weight:800;letter-spacing:.08em}.station-row__copy{min-width:0;display:grid;gap:4px}.station-row__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.station-row__badge{display:inline-block;padding:1px 6px;border-radius:6px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}.station-row__badge--warning{background-color:#c58f8224;color:var(--accent-coral);border:1px solid rgb(197 143 130 / 28%)}.station-row__copy strong,.player-bar__copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.station-row__copy span,.player-bar__copy span,.player-bar__empty{color:var(--muted-text);font-size:.92rem}.station-row__actions{display:flex;justify-self:end;align-items:center}.favorite-toggle{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0;background:transparent;color:var(--muted-text);line-height:1}.favorite-toggle--active{color:#e34141}.favorite-toggle__icon{width:22px;height:22px;display:block}.player-bar{position:fixed;right:0;bottom:0;left:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgb(143 175 199 / 14%);background:#06090df5;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.player-bar__left{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;min-width:0}.player-bar__copy{display:grid;gap:4px;min-width:0}.player-bar__warning{color:var(--accent-coral)!important}.player-bar__button{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;padding:0;border:1px solid rgb(143 175 199 / 18%);background:transparent;color:#fff}.player-bar__button:disabled{cursor:default;opacity:.88}.player-bar__actions{display:flex;align-items:center;gap:12px}.player-bar__favorite{transition:transform .2s ease,color .2s ease}.player-bar__favorite:hover{transform:scale(1.1)}.player-bar__button-icon{width:26px;height:26px;flex:0 0 auto;display:block}.player-bar__button-icon--spin{animation:player-bar-spin .9s linear infinite}@keyframes player-bar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(min-width:900px){.shell{padding:18px 18px 108px}.station-list{grid-template-columns:repeat(2,minmax(0,1fr))}.navbar__brand img{width:104px}}@media(max-width:640px){.navbar{grid-template-columns:auto minmax(0,1fr);padding:10px;gap:8px}.navbar__brand{min-width:0}.navbar__brand img{width:58px}.navbar__pages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0;gap:4px;width:100%;overflow:visible}.navbar__page{min-width:0;padding:10px 8px;font-size:.84rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.genre-pills{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.genre-pill{min-width:0;padding:9px 4px;font-size:.78rem;text-align:center;overflow:hidden;text-overflow:ellipsis}.station-row__actions{justify-content:flex-end}.player-bar{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.player-bar__button{width:54px;height:54px;justify-self:end}.player-bar__left{grid-template-columns:56px minmax(0,1fr);gap:10px}.player-bar__logo,.player-bar__fallback{width:56px;height:56px;border-radius:16px}.player-bar__copy strong{font-size:.94rem}.player-bar__copy span,.player-bar__empty{font-size:.84rem}.search-panel{align-items:center;gap:8px}.search-panel__input-container input{padding:12px 38px 12px 14px}.search-panel__count{width:105px;padding:10px 0;font-size:.82rem}.player-bar__actions{gap:8px}}
