.os-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem;position:relative;z-index:20}.os-page--single{gap:.75rem}.os-toggle{display:flex;gap:2px;border-radius:8px;overflow:hidden;border:1px solid hsl(var(--color-border-neutral) / .3);background:hsl(var(--color-background-primary) / .5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.os-toggle__btn{font-family:Tektur,system-ui,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.45rem 1.2rem;border:none;background:transparent;color:hsl(var(--color-text-tertiary));cursor:pointer;transition:all .25s ease}.os-toggle__btn:hover{color:hsl(var(--color-text-secondary));background:hsl(var(--color-background-surface) / .3)}.os-toggle__btn--active{color:hsl(var(--color-primary));background:hsl(var(--color-primary) / .12);box-shadow:inset 0 0 10px hsl(var(--color-glow-primary) / .15)}@media(max-width:900px){.os-page{flex-direction:column;gap:2rem;padding:1rem}}.os-card{position:relative;width:380px;max-width:100%;border-radius:18px;overflow:hidden;border:1px solid hsl(var(--color-border-neutral) / .35);box-shadow:0 0 40px hsl(var(--color-glow-primary) / .08),0 8px 32px #0000008c}.os-card__bg{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;z-index:0}.os-card__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#0e141bd1,#0b0f14e0 40%,#070a0df0);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:1}.os-card__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:1.75rem 1.5rem 1.5rem}.os-brand{text-align:center;margin-bottom:.5rem}.os-brand__logo{font-family:Tektur,system-ui,sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:.08em;color:hsl(var(--color-text-primary));display:flex;align-items:center;justify-content:center;gap:.35rem}.os-brand__logo-icon{color:hsl(var(--color-primary));font-size:1.1rem}.os-brand__title{font-family:Tektur,system-ui,sans-serif;font-weight:700;font-size:1.6rem;letter-spacing:.18em;color:hsl(var(--color-text-primary));text-transform:uppercase;margin-top:.15rem;text-shadow:0 0 20px hsl(var(--color-glow-primary) / .3)}.os-brand__subtitle{font-family:Lekton,monospace;font-size:.8rem;letter-spacing:.15em;color:hsl(var(--color-text-tertiary));text-transform:uppercase;margin-top:.15rem}.os-status{font-family:Tektur,system-ui,sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:.35rem 1rem;border-radius:4px;margin:.75rem 0;transition:all .3s ease}.os-status--disconnected{color:#e45858;text-shadow:0 0 8px hsl(0 72% 62% / .4)}.os-status--connected,.os-status--buffering{color:#fc3;text-shadow:0 0 8px hsl(45 100% 60% / .4);animation:os-pulse-text 1.5s ease-in-out infinite}.os-status--playing{color:hsl(var(--color-primary));text-shadow:0 0 12px hsl(var(--color-glow-primary) / .5)}@keyframes os-pulse-text{0%,to{opacity:1}50%{opacity:.5}}.os-dial{position:relative;width:180px;height:180px;margin:.5rem 0}.os-dial__ring{position:absolute;top:0;right:0;bottom:0;left:0}.os-dial__ring circle{fill:none;stroke-linecap:round}.os-dial__ring-bg{stroke:hsl(var(--color-background-surface) / .6);stroke-width:3}.os-dial__ring-progress{stroke:hsl(var(--color-primary));stroke-width:3;filter:drop-shadow(0 0 6px hsl(var(--color-glow-primary) / .6));transition:stroke-dashoffset .3s ease}.os-dial__ticks{position:absolute;top:0;right:0;bottom:0;left:0}.os-dial__center{position:absolute;top:18px;right:18px;bottom:18px;left:18px;border-radius:50%;background:radial-gradient(circle at center,hsl(var(--color-background-tertiary)),hsl(var(--color-background-primary)));border:1px solid hsl(var(--color-border-neutral) / .3);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 20px hsl(var(--color-background-overlay-95) / .6),0 0 15px hsl(var(--color-glow-primary) / .15)}.os-dial__live-badge{font-family:Tektur,system-ui,sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:.15em;color:hsl(var(--color-primary));text-shadow:0 0 12px hsl(var(--color-glow-primary) / .6);padding:.3rem .7rem;border-radius:6px;border:1px solid hsl(var(--color-primary) / .4);background:hsl(var(--color-primary) / .08)}.os-dial__live-badge--active{animation:os-live-pulse 2s ease-in-out infinite}.os-dial__play-icon{width:50px;height:50px;color:hsl(var(--color-text-secondary));filter:drop-shadow(0 0 8px hsl(var(--color-glow-primary) / .3));cursor:pointer;transition:transform .2s ease,color .2s ease}.os-dial__play-icon:hover{transform:scale(1.08);color:hsl(var(--color-primary))}@keyframes os-live-pulse{0%,to{box-shadow:0 0 8px hsl(var(--color-glow-primary) / .3)}50%{box-shadow:0 0 20px hsl(var(--color-glow-primary) / .6)}}.os-dial--large{width:200px;height:200px}.os-dial--large .os-dial__center{top:22px;right:22px;bottom:22px;left:22px;cursor:pointer;transition:box-shadow .3s ease}.os-dial--large .os-dial__center:hover{box-shadow:inset 0 0 20px hsl(var(--color-background-overlay-95) / .6),0 0 30px hsl(var(--color-glow-primary) / .35)}.os-glass{background:hsl(var(--color-background-primary) / .55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid hsl(var(--color-border-neutral) / .25);border-radius:10px;box-shadow:inset 0 0 15px hsl(var(--color-background-overlay-95) / .5)}.os-counter{text-align:center;padding:.65rem .85rem}.os-counter__label{font-family:Tektur,system-ui,sans-serif;font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--color-text-tertiary));margin-bottom:.25rem}.os-counter__value{font-family:Lekton,monospace;font-size:2.6rem;font-weight:700;line-height:1;color:hsl(var(--color-primary));text-shadow:0 0 10px hsl(var(--color-glow-primary) / .5),0 0 20px hsl(var(--color-glow-primary) / .3);letter-spacing:.05em}.os-meter{display:flex;flex-direction:column;align-items:center;padding:.65rem .85rem}.os-meter__label{font-family:Tektur,system-ui,sans-serif;font-size:.65rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--color-text-tertiary));margin-bottom:.4rem}.os-meter__bars{display:flex;gap:3px;height:90px;align-items:flex-end}.os-meter__bar{width:10px;border-radius:2px;transition:height .15s ease,background .15s ease,box-shadow .15s ease;min-height:3px}.os-meter__bar--green{background:#2dd22d;box-shadow:0 0 4px #2dd22d80}.os-meter__bar--yellow{background:#f4d125;box-shadow:0 0 4px #f4d12580}.os-meter__bar--red{background:#df3a3a;box-shadow:0 0 4px #df3a3a80}.os-meter__bar--off{background:hsl(var(--color-background-surface) / .4);box-shadow:none}.os-meter__text{font-family:Lekton,monospace;font-size:.72rem;color:hsl(var(--color-text-secondary));margin-top:.5rem;text-align:center}.os-stats-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%;margin-top:.5rem}.os-info-bar{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:.65rem;padding:.5rem .75rem;border-radius:8px;background:hsl(var(--color-background-primary) / .4);border:1px solid hsl(var(--color-border-neutral) / .15)}.os-info-bar__item{font-family:Tektur,system-ui,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--color-text-secondary))}.os-info-bar__value{color:hsl(var(--color-primary));margin-left:.35rem}.os-codec{font-family:Lekton,monospace;font-size:.72rem;color:hsl(var(--color-text-tertiary));text-align:center;margin-top:.5rem;letter-spacing:.08em}.os-btn{font-family:Tektur,system-ui,sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1.4rem;border:1px solid hsl(var(--color-primary) / .4);border-radius:8px;background:hsl(var(--color-primary) / .1);color:hsl(var(--color-primary));cursor:pointer;transition:all .25s ease;margin-top:.5rem}.os-btn:hover{background:hsl(var(--color-primary) / .2);box-shadow:0 0 15px hsl(var(--color-glow-primary) / .3);border-color:hsl(var(--color-primary) / .6)}.os-btn:disabled{opacity:.4;cursor:default;box-shadow:none}.os-btn--danger{border-color:#df3a3a66;background:#df3a3a1a;color:#e45858}.os-btn--danger:hover{background:#df3a3a33;box-shadow:0 0 15px #df3a3a4d;border-color:#df3a3a99}.os-listener-stats{text-align:center;width:100%;margin-top:.75rem}.os-listener-stats__group{margin-bottom:.65rem}.os-listener-stats__heading{font-family:Tektur,system-ui,sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--color-primary));margin-bottom:.15rem}.os-listener-stats__value{font-family:Lekton,monospace;font-size:.82rem;color:hsl(var(--color-text-secondary));letter-spacing:.05em}.os-view-label{font-family:Tektur,system-ui,sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:hsl(var(--color-text-tertiary));text-align:center;margin-bottom:.5rem}