@import "https://fonts.googleapis.com/css2?family=Doto:wght@800&display=swap";:root{--bg-color:#3b3d45;--radio-body:#4a4d56;--radio-body-dark:#373940;--radio-body-light:#5f636e;--screen-bg:#2d1810;--screen-glow:#ff641e66;--text-orange:#ff8c5a;--text-orange-glow:#ff8c5acc;--text-orange-dark:#b84a22;--knob-base:#2a2c31;--knob-top:#3d4047;--knob-top-light:#525660;--knob-orange-top:#ff7d45;--knob-orange-base:#cc4e1a}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background-color:#0f1012;justify-content:center;align-items:center;width:100%;height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;overflow:hidden}.modern-retro-player-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.player-body{box-sizing:border-box;background-color:#3b3d42;background-image:linear-gradient(#44464c 0%,#2f3035 100%);border:1px solid #232427;border-radius:20px;flex-direction:column;justify-content:space-between;width:300px;height:540px;padding:12px 16px 16px;display:flex;position:relative;box-shadow:0 25px 60px #000c,inset 0 1.5px 2px #ffffff1f,inset 0 -2.5px 4px #000000a6}.player-upper-block{flex-direction:column;gap:12px;width:100%;display:flex}.radio-header-bar{justify-content:space-between;align-items:center;height:32px;padding:0 4px;display:flex;position:relative}.philips-logo-wrapper{justify-content:center;align-items:center;width:63px;height:14px;display:flex;position:relative}.philips-wordmark-logo{opacity:.95;width:100%;height:auto;display:block}.header-power-btn-pocket{box-sizing:border-box;background:#0f1012;border:1.5px solid #2f3035;border-top:1px solid #000;border-left:1px solid #000;border-radius:15px;justify-content:center;align-items:center;width:50px;height:30px;padding:1.5px;display:flex;box-shadow:inset 0 2px 4px #000000d9,0 1px 1px #ffffff1f}.header-power-btn-pill{background-blend-mode:overlay;cursor:pointer;background-color:#55575e;background-image:linear-gradient(#ffffff40 0%,#ffffff0d 25%,#00000026 50%,#ffffff0d 75%,#00000073 100%),linear-gradient(90deg,#4b4e56 0%,#636772 25%,#3f4147 50%,#636772 75%,#4b4e56 100%);border:1px solid #484b52;border-radius:13.5px;outline:none;justify-content:center;align-items:center;width:47px;height:27px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;box-shadow:0 3px 6px #0000008c,inset 0 1px 1px #fff6}.header-power-btn-pill:before{content:"";pointer-events:none;background:repeating-linear-gradient(90deg,#ffffff0a 0 1px,#0000 1px 2px);border-radius:13.5px;position:absolute;inset:0}.header-power-btn-pill:active,.header-power-btn-pill.active{transform:scale(.96)}.header-power-btn-pill.active{background-color:#3b3d42;box-shadow:0 1px 2px #00000059,inset 0 2px 4px #00000080,inset 0 -1px 1px #ffffff1f}.header-power-btn-pill.active svg{stroke:#fff;filter:drop-shadow(0 0 3px #fffffff2)}.orange-display-screen{box-sizing:border-box;background-color:#060708;border:1.5px solid #1a1a1c;border-radius:16px;height:220px;transition:border-color .5s;position:relative;overflow:hidden;box-shadow:inset 0 10px 20px #000000f2,0 1px 1px #ffffff05}.orange-display-screen:before{content:"";opacity:1;z-index:1;background:radial-gradient(circle,#f18225 0%,#a44813 60%,#4c1b03 100%);transition:opacity .5s cubic-bezier(.4,0,.2,1);position:absolute;inset:0;box-shadow:inset 0 4px 10px #000000a6}.orange-display-screen.off{border-color:#1a1a1c}.orange-display-screen.off:before{opacity:0;transition-delay:.15s}.screen-reflection{pointer-events:none;z-index:5;background:linear-gradient(135deg,#ffffff2e 0%,#fff0 65%);height:50%;position:absolute;top:0;left:0;right:0}.screen-inner-layout{box-sizing:border-box;z-index:3;flex-direction:column;justify-content:space-between;height:100%;padding:14px 16px 0;transition:opacity .15s cubic-bezier(.4,0,1,1);display:flex;position:relative}.orange-display-screen.off .screen-inner-layout{opacity:0;pointer-events:none}.lcd-info-group{flex-direction:column;flex:1;justify-content:center;gap:8px;padding-top:8px;display:flex}.lcd-station-title-box{text-align:center;box-sizing:border-box;max-width:200px;margin:0 auto;padding:4px 12px}.lcd-station-title{color:#1c1510;text-shadow:0 1px 1px #ffffff26;letter-spacing:.5px;text-overflow:ellipsis;white-space:nowrap;font-family:Doto,monospace;font-size:.935rem;font-weight:800;overflow:hidden}.calibrating-container{justify-content:center;align-items:center;gap:12px;display:flex}.sliding-squares-loader{align-items:center;gap:3px;display:flex}.sliding-squares-loader .square{background-color:#1c1510;border-radius:1px;width:3.9px;height:3.9px;animation:1s infinite lcdPulse}.sliding-squares-loader .square:first-child{animation-delay:0s}.sliding-squares-loader .square:nth-child(2){animation-delay:.15s}.sliding-squares-loader .square:nth-child(3){animation-delay:.3s}@keyframes lcdPulse{0%,to{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}.lcd-city-badge{color:#1c1510;opacity:.85;text-shadow:0 1px 1px #ffffff26;text-transform:uppercase;white-space:nowrap;box-sizing:border-box;border:1px dotted #1c151059;border-radius:3px;max-width:82px;height:16px;padding:2px 4px 2px 6px;font-family:Doto,monospace;font-size:.7rem;font-weight:800;line-height:12px;display:block;position:absolute;top:16px;left:16px;overflow:hidden}.lcd-city-badge span{animation:12s linear infinite lcdScroll;display:inline-block}@keyframes lcdScroll{0%,15%{transform:translate(0)}45%,55%{transform:translate(min(0px,72px - 100%))}85%,to{transform:translate(0)}}.lcd-mute-badge{color:#1c1510;opacity:.85;filter:drop-shadow(0 1px 1px #ffffff26);box-sizing:border-box;justify-content:center;align-items:center;gap:4px;height:16px;font-family:Doto,monospace;font-size:.65rem;font-weight:800;line-height:1;display:flex;position:absolute;top:16px;right:16px}.lcd-preset-badge{color:#1c1510;opacity:.85;text-shadow:0 1px 1px #ffffff26;box-sizing:border-box;border:1px dotted #1c151059;border-radius:3px;justify-content:center;align-items:center;height:16px;padding:2px 4px 2px 6px;font-family:Doto,monospace;font-size:.78rem;font-weight:800;line-height:1;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.lcd-tuner-container{box-sizing:border-box;margin-left:-16px;margin-right:-16px;padding:4px 0 8px}.lcd-frequency-row{justify-content:center;align-items:center;gap:18px;display:flex}.lcd-digits-container{align-items:baseline;display:flex}.lcd-freq-numbers{color:#1c1510;letter-spacing:1px;text-shadow:0 1px 1px #ffffff26,0 0 1.5px #00000059;font-family:Doto,monospace;font-size:2.65rem;font-weight:800;line-height:1}.lcd-unit{color:#1c1510;text-shadow:0 1px 1px #ffffff26,0 0 1.5px #00000059;margin-left:6px;font-family:Doto,monospace;font-size:1.2rem;font-weight:800}.lcd-side-meter{opacity:.65;flex-direction:column;gap:3px;display:flex}.meter-tick{background-color:#fff;border-radius:.5px;width:7px;height:2px}.lcd-bottom-spacer{height:10px}.saved-stations-overlay-screen{z-index:10;box-sizing:border-box;background:#0e0f11f5;flex-direction:column;padding:12px 16px 28px;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;inset:0}.saved-stations-overlay-screen.closed{transform:translateY(100%)}.saved-stations-overlay-screen.open{transform:translateY(0)}.overlay-header{border-bottom:none;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:8px;display:flex}.overlay-back-btn{cursor:pointer;background:#f18225;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;padding:0;display:flex}.overlay-header span{color:#fff;font-size:.8rem;font-weight:500}.overlay-list-scroll{flex:1;grid-template-columns:repeat(3,1fr);align-content:start;gap:6px;display:grid}.empty-saved-msg{color:#6b7280;text-align:center;padding-top:40px;font-size:.75rem}.saved-station-item-row{cursor:grab;aspect-ratio:161/167;text-align:left;box-sizing:border-box;background:#1f1f1f;border:1px solid #ffffff0d;border-radius:8px;flex-direction:column;justify-content:space-between;align-items:stretch;min-width:0;padding:6px;transition:background-color .15s;display:flex;position:relative}.saved-station-item-row.empty{cursor:pointer;background:#333;border:1px dashed #ffffff26}.saved-station-item-row:active{cursor:grabbing}.saved-station-item-row:hover{background:#2a2a2a}.saved-station-item-row.active{border-color:#f18225}.saved-item-top{width:100%;display:flex}.saved-item-preset-id{color:#d97706;margin:0;font-size:.55rem;font-weight:500;line-height:1}.saved-station-item-row.empty .saved-item-preset-id{color:#d9770666}.saved-item-mid{flex-flow:wrap;align-items:baseline;gap:4px;width:100%;margin-top:auto;margin-bottom:2px;display:flex}.saved-item-freq{color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:1.05rem;font-weight:600;line-height:1.1;overflow:hidden}.saved-station-item-row.active .saved-item-freq{color:#fff}.saved-item-bottom{width:100%;display:flex}.saved-item-name{color:#9ca3af;white-space:nowrap;text-overflow:ellipsis;width:100%;font-size:.5rem;font-weight:400;overflow:hidden}.saved-item-delete-btn{color:#111;cursor:pointer;z-index:2;background:#ef4444;border:none;border-radius:4px;justify-content:center;align-items:center;width:18px;height:18px;padding:0;display:flex;position:absolute;top:-4px;right:-4px;box-shadow:0 2px 6px #0006}.saved-item-delete-btn:hover{background:#dc2626}.delete-confirm-overlay{z-index:100;background:#000000bf;border-radius:20px;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.delete-confirm-popup{text-align:center;background:#2a2a2a;border:1px solid #ffffff1a;border-radius:12px;width:80%;max-width:240px;padding:20px;box-shadow:0 10px 25px #00000080}.delete-confirm-popup p{color:#fff;margin:0 0 20px;font-size:.95rem}.delete-confirm-actions{justify-content:center;gap:12px;display:flex}.delete-confirm-cancel{color:#ccc;cursor:pointer;background:#444;border:none;border-radius:6px;flex:1;padding:10px;font-size:.85rem;font-weight:500}.delete-confirm-ok{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:6px;flex:1;padding:10px;font-size:.85rem;font-weight:500}.delete-confirm-cancel:hover{background:#555}.delete-confirm-ok:hover{background:#dc2626}.ruler-ticks-viewport{box-sizing:border-box;flex:1;justify-content:space-between;align-items:flex-end;height:38px;margin-top:4px;display:flex;position:relative}.ruler-tick-item{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;height:100%;display:flex;position:relative}.ruler-tick-num-lbl{color:#1c1510bf;white-space:nowrap;font-family:Doto,monospace;font-size:.85rem;font-weight:800;position:absolute;top:0;left:50%;transform:translate(-50%)}.ruler-tick-line-mark{background-color:#1c151059;width:1px;height:8px;position:absolute;bottom:0}.ruler-tick-item.labeled .ruler-tick-line-mark{background-color:#1c151099;width:1.5px;height:14px}.lcd-tuner-pointer{z-index:10;pointer-events:none;background:linear-gradient(90deg,#70747c 0%,#d8dbe2 50%,#585b62 100%);border-radius:1.5px;width:3.5px;height:28px;position:absolute;bottom:-8px;transform:translate(-50%);box-shadow:0 1px 2px #0006}.ruler-tick-line-mark.green-glow{z-index:5;background-color:#22c55e;width:1.5px;height:12px;bottom:-12px;box-shadow:0 0 5px #22c55e}.bottom-action-footer-bar{box-sizing:border-box;background:linear-gradient(#2b2c31 0%,#151619 100%);border:1px solid #111214;border-radius:8px;justify-content:space-between;align-items:center;height:42px;margin-top:15px;padding:2px;display:flex;box-shadow:0 4px 10px #00000073,inset 0 1.5px 2px #ffffff14}.footer-icon-btn{color:#8e8f92;cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;width:50px;height:36px;font-size:1.25rem;font-weight:500;transition:all .15s;display:flex}.footer-icon-btn:active:not(.disabled){background:#0003;box-shadow:inset 0 1px 3px #000c}.footer-icon-btn.active{color:#fff}.footer-icon-btn.disabled{opacity:.3;cursor:not-allowed}.menu-btn{border-radius:6px 0 0 6px}.plus-btn{border-radius:0 6px 6px 0}.footer-centered-pill{box-sizing:border-box;background:linear-gradient(#202124 0%,#0c0d0f 100%);border:1px solid #101113;border-radius:18px;flex:0 0 140px;justify-content:center;align-items:center;gap:24px;height:36px;margin:0 4px;padding:0;transition:opacity .4s;display:flex;box-shadow:inset 0 1.5px 2px #000000e6,0 1px 1px #ffffff08}.footer-centered-pill.disabled{opacity:.3;pointer-events:none}.skip-btn{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:6px;display:flex}.skip-btn svg{fill:#8e8f92;transition:fill .15s}.skip-btn:active svg{fill:#fff}.pill-divider-line{background-color:#111214;width:1px;height:18px;box-shadow:1px 0 #ffffff0d}.rotary-knobs-section{box-sizing:border-box;justify-content:center;align-items:center;width:100%;padding:10px 0 10px 30px;display:flex}.volume-knob-wrapper{transform-origin:50%;margin-left:-24px;transform:scale(.6)}.volume-knob-wrapper .tuning-knob-label{bottom:-5px;transform:translate(-50%)scale(1.6666)}.rotary-tuning-knob-container{flex-shrink:0;justify-content:center;align-items:center;width:160px;height:160px;display:flex;position:relative}.outer-ring-ticks{border-radius:50%;width:144px;height:144px;position:absolute}.outer-ring-ticks:before{content:"";box-sizing:border-box;border:3px solid #3b3d42;border-bottom-color:#0000;border-radius:50%;position:absolute;inset:4px}.tuning-knob-label{letter-spacing:2px;color:#55585d;font-family:Doto,monospace;font-size:.7rem;font-weight:600;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.outer-ring-ticks .tick{transform-origin:1.5px 72px;background-color:#55585d;border-radius:1.5px;width:3px;height:14px;position:absolute;top:0;left:calc(50% - 1.5px)}.outer-ring-ticks .tick-1{transform:rotate(-135deg)}.outer-ring-ticks .tick-2{transform:rotate(-67.5deg)}.outer-ring-ticks .tick-3{transform:rotate(0)}.outer-ring-ticks .tick-4{transform:rotate(67.5deg)}.outer-ring-ticks .tick-5{transform:rotate(135deg)}.outer-ring-ticks .sub-tick{transform-origin:1px 69px;background-color:#55585d73;border-radius:1px;width:2px;height:8px;position:absolute;top:3px;left:calc(50% - 1px)}.outer-ring-ticks .sub-1{transform:rotate(-112.5deg)}.outer-ring-ticks .sub-2{transform:rotate(-90deg)}.outer-ring-ticks .sub-3{transform:rotate(-45deg)}.outer-ring-ticks .sub-4{transform:rotate(-22.5deg)}.outer-ring-ticks .sub-5{transform:rotate(22.5deg)}.outer-ring-ticks .sub-6{transform:rotate(45deg)}.outer-ring-ticks .sub-7{transform:rotate(90deg)}.outer-ring-ticks .sub-8{transform:rotate(112.5deg)}.tuning-knob-base{cursor:grab;z-index:5;background:linear-gradient(135deg,#383b40 0%,#222427 100%);border:1px solid #1a1c1e;border-radius:50%;width:110px;height:110px;position:relative;box-shadow:0 12px 18px #0009,0 4px 6px #0006,inset 0 2px 2px #ffffff1a,inset 0 -2px 4px #0000004d,0 0 0 5px #26282b}.tuning-knob-base:active{cursor:grabbing}.knob-indicator-notch{transform-origin:2.5px 45px;background-color:#121315;border-radius:2.5px;width:5px;height:18px;transition:background-color .4s,box-shadow .4s;position:absolute;top:10px;left:calc(50% - 2.5px);box-shadow:inset 0 1px 2px #000c,0 1px #ffffff0d}.volume-indicator-triangle{transform-origin:5.5px 47px;filter:drop-shadow(0 1px #ffffff26);width:11px;height:9px;position:absolute;top:8px;left:calc(50% - 5.5px)}.rotary-knobs-section.on .knob-indicator-notch{background-color:#ff8c00;box-shadow:inset 0 1px 2px #0006,0 1px #ffffff0d,0 0 8px #ff8c0066}
