.remote-v2{--phone-accent:#d7eadf;--phone-line:#ffffff15;background:radial-gradient(ellipse at 90% -10%,#23423c66,transparent 40%),radial-gradient(ellipse at 0 60%,#23314733,transparent 60%),#0b1017;color:#eff3f7;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.remote-v2 .remote-shell{max-width:490px;padding:calc(19px + env(safe-area-inset-top)) 22px calc(25px + env(safe-area-inset-bottom))}.remote-v2 .remote-header{padding-bottom:16px}.remote-v2 .remote-header .brand{font-size:26px;font-weight:650;color:#fff}.remote-v2 .brand-mark{color:#e1ebe8}.remote-v2 .remote-label{font-size:9px;letter-spacing:1.6px;color:#9aaeb1}.remote-v2 .icon-button{border:1px solid #ffffff20;background:#ffffff08;color:#e3e9f4;width:44px;height:44px;flex-shrink:0}
.remote-v2 .connection-row{border-top:1px solid var(--phone-line);padding:12px 0;color:#b4c2d1;font-size:11px;letter-spacing:0}.remote-v2 .connection-status{font-size:11px;color:#bed7ca}.remote-v2 .room-label{font-size:8px;color:#8194a4;letter-spacing:1.4px}.remote-v2 #sleep-indicator{font-size:10px;color:#ddd1b3}
.remote-v2 .now-playing{padding:18px;margin:5px 0 18px;min-height:101px;background:linear-gradient(135deg,#ffffff12,#ffffff06);border:1px solid #ffffff15;border-radius:24px;box-shadow:inset 0 1px #ffffff13,0 14px 40px #0002;gap:14px}.remote-v2 .now-art{width:59px;height:66px;position:relative;overflow:hidden;border-radius:15px;background:#202d35;border:1px solid #ffffff14}.remote-v2 .now-art img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}.remote-v2 .now-art img.content-cover{inset:0;width:100%;height:100%;object-fit:cover}.remote-v2 .now-copy>span{font-size:9px;letter-spacing:1.35px;color:#aabeb9}.remote-v2 .now-copy h1{font-size:19px;line-height:1.25;font-weight:600;margin:6px 0}.remote-v2 .now-subtitle{font-size:12px;color:#9caebd;line-height:1.4}.remote-v2 .now-subtitle.has-error{font-size:11px;color:#ead3b3}.remote-v2 .playing-bars{gap:3px}.remote-v2 .playing-bars i{background:#c5ded0}
.remote-v2 .remote-apps{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:20px}.remote-v2 .remote-apps button{height:67px;padding:9px 3px;display:flex;flex-direction:column;justify-content:center;gap:7px;font-size:11px;color:#d4dfe6;border:1px solid #ffffff13;border-radius:18px;background:#ffffff05;position:relative}.remote-v2 .remote-apps button.active{border-color:#c4ddd46b;background:#a9cfbf18;color:white;box-shadow:inset 0 1px #ffffff1c}.remote-v2 .remote-apps button .icon{width:23px;height:23px}.remote-v2 .remote-apps button img{height:25px;width:24px}.remote-v2 .remote-apps button>span:last-child{margin:0}.remote-v2 .remote-apps button>span:last-child .icon{margin:0}.remote-v2 .remote-apps button[data-launch=youtube]>span:first-child{color:#ef9d9d}.remote-v2 .remote-apps button[data-launch=spotify]>span:first-child{color:#8cd9a8}.remote-v2 .remote-apps button[data-launch=twitch]>span:first-child{color:#c4aff0}
.remote-v2 .control-mode{margin:0 0 13px;gap:12px}.remote-v2 .segmented{border:1px solid #ffffff10;background:#131d27;border-radius:13px;flex:1;padding:4px}.remote-v2 .segmented button{flex:1;justify-content:center;min-height:40px;font-size:12px;border-radius:10px;color:#8fa2b4}.remote-v2 .segmented .active{background:#31404a;color:#f1f6f5;box-shadow:0 2px 8px #0003}.remote-v2 .control-mode>.icon-button{width:46px;height:46px;border-radius:13px}
.remote-v2 .dpad-section{min-height:245px;padding:3px 0 10px}.remote-v2 .dpad{width:226px;height:226px;background:linear-gradient(145deg,#283640,#17232e);border:1px solid #ffffff1c;border-radius:50%;box-shadow:inset 0 2px 1px #ffffff15,0 20px 50px #0004;gap:0}.remote-v2 .dpad button{color:#d8e2e9;border-radius:50%;background:none;min-width:0;min-height:0}.remote-v2 .dpad .dpad-ok{background:linear-gradient(140deg,#dfece6,#b9cdc6);color:#20332e;font-size:16px;font-weight:700;box-shadow:inset 0 1px #fff9,0 8px 22px #0005;width:72px;height:72px;justify-self:center;align-self:center}.remote-v2 .dpad button:active{background-color:#ffffff14}.remote-v2 .dpad .dpad-ok:active{background:#f1f8f2;transform:scale(.96)}.remote-v2 .dpad .icon{width:25px;height:25px}.remote-v2 .tab-buttons{margin:13px 0 0;gap:8px}.remote-v2 .tab-buttons button{font-size:11px;min-height:38px;border:1px solid #ffffff10;background:#ffffff04;border-radius:11px;color:#a7b8c6;flex:1;display:flex;align-items:center;justify-content:center;gap:7px}
.remote-v2 .touchpad{height:225px;border:1px solid #ffffff1e;border-radius:28px;background:radial-gradient(ellipse at 30% 0,#ffffff08,transparent 80%),#17222d}.remote-v2 .touchpad-center>span:not(.touch-cross){font-size:18px;color:#c4d1dc}.remote-v2 .touchpad-center small{font-size:11px;color:#7990a2}.remote-v2 .pad-hint{font-size:10px;padding:10px 3px;color:#8399aa}
.remote-v2 .navigation-row{padding:9px 0 17px;gap:12px}.remote-v2 .navigation-row button{min-height:56px;border-radius:15px;gap:5px;background:#ffffff04;border:1px solid #ffffff0b;font-size:11px;color:#acbfcd;flex:1}.remote-v2 .navigation-row .home-button{background:#263a36;border-color:#b0cbb32d;color:#e5efe9}.remote-v2 .navigation-row .icon{width:23px;height:23px}
.remote-v2 .playback-panel{border:1px solid #ffffff13;border-radius:23px;background:linear-gradient(140deg,#ffffff0a,#ffffff04);padding:15px 18px 12px}.remote-v2 .timeline{font-size:10px;color:#9aaebc;gap:10px}.remote-v2 .progress-track{background:#ffffff18;height:4px;position:relative;overflow:visible}.remote-v2 #progress-fill{background:#d4e5dc}.remote-v2 #remote-scrub{position:absolute;inset:-10px 0;width:100%;height:24px;margin:0;opacity:0;cursor:pointer;touch-action:pan-x}.remote-v2 .transport{margin:13px 0}.remote-v2 .play-button{width:56px;height:56px;background:#e1ebe5;color:#20332d;box-shadow:0 6px 20px #0003}.remote-v2 .transport>button:not(.play-button){color:#c3d1da}.remote-v2 .transport small{font-size:9px}.remote-v2 .volume-row{gap:10px;border-top:1px solid #ffffff0b;padding-top:11px}.remote-v2 .volume-row button{width:37px;height:37px;color:#a9c0cb}.remote-v2 .volume-meter{height:4px;background:#ffffff13}.remote-v2 #volume-fill{background:#aecabc}.remote-v2 #volume-value{font-size:10px;color:#849eac;min-width:28px}
.remote-v2 .remote-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:17px 0 0}.remote-v2 .remote-shortcuts button{min-height:57px;border:1px solid #ffffff10;border-radius:15px;background:#ffffff03;flex-direction:column;gap:6px;font-size:10px;color:#9eb3c2}.remote-v2 .remote-shortcuts .icon{width:19px;height:19px}.remote-v2 .remote-footer{padding:19px 0 0;font-size:9px;color:#627e8c}.remote-v2 .footer-moon .icon{width:12px;height:12px}
.remote-v2 .sheet{width:min(460px,100vw);max-height:91dvh;margin:auto auto 0;padding:25px 24px calc(27px + env(safe-area-inset-bottom));border:1px solid #ffffff25;border-bottom:0;border-radius:29px 29px 0 0;background:linear-gradient(135deg,#23313bf7,#101b27fc);box-shadow:0 -20px 90px #0005;color:#f1f5f7;overflow:auto}.remote-v2 .sheet::backdrop{background:#02060a99;backdrop-filter:blur(8px)}.remote-v2 .sheet-heading{margin-bottom:20px;gap:15px}.remote-v2 .sheet h2{font-size:26px;letter-spacing:-.9px;margin-top:5px}.remote-v2 .sheet h3{font-size:14px;font-weight:600;margin:0 0 16px;color:#dee8ed}.remote-v2 .sheet h3 .icon{width:17px;height:17px;color:#abc9bc;vertical-align:middle;margin-right:5px}.remote-v2 .sheet label{font-size:12px;color:#acbfcd;margin-top:14px;margin-bottom:9px;display:block}.remote-v2 .sheet input:not([type=range]):not([type=checkbox]),.remote-v2 .sheet select,.remote-v2 .sheet textarea{background:#07121b88;color:#edf3f4;border:1px solid #ffffff1b;border-radius:13px;padding:13px 14px;font-size:16px;width:100%;min-height:48px}.remote-v2 .sheet p{font-size:12px;color:#94aab8;line-height:1.6}.remote-v2 .sheet .settings-group{padding:22px 0;border-top:1px solid #ffffff12;margin:0}.remote-v2 .sheet .settings-group:first-of-type{border-top:0}.remote-v2 .sheet input[type=range]{width:100%;height:29px;margin:0;padding:0;accent-color:#c8dfd2;cursor:pointer}.remote-v2 .range-heading{display:flex!important;align-items:center;justify-content:space-between;gap:10px}.remote-v2 .range-heading output{color:#dfebe5;white-space:nowrap;font-size:12px}.remote-v2 .switch-label{display:flex!important;gap:18px;align-items:center;justify-content:space-between}.remote-v2 .switch-label strong{display:block;font-size:14px;color:#e4edef;font-weight:550}.remote-v2 .switch-label small{display:block;margin-top:6px;font-size:11px;color:#9badbc;line-height:1.5}.remote-v2 .switch-label input{accent-color:#b6d9c8;width:22px;height:22px;flex-shrink:0}.remote-v2 .preset-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:20px}.remote-v2 .preset-row button{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:8px;min-height:70px;background:#ffffff08;border:1px solid #ffffff15;border-radius:15px;font-size:10px}.remote-v2 .preset-row .icon{width:22px;height:22px;color:#d1e0d8}.remote-v2 .sleep-pills{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.remote-v2 .sleep-pills button{border:1px solid #ffffff19;border-radius:16px;background:#ffffff06;min-height:64px;font-size:21px;font-weight:600}.remote-v2 .sleep-pills small{display:block;font-size:9px;font-weight:400;margin-top:3px;color:#adc0ca}.remote-v2 .sleep-pills button.active{background:#a7d4bd22;border-color:#bad5bd80}.remote-v2 #remote-sleep-countdown{font-size:11px;color:#aec4b9}.remote-v2 .sheet .settings-action{font-size:13px;min-height:50px;color:#bfd0dc;padding:10px 0;gap:12px}.remote-v2 .sheet .primary-button{background:#d8e8df;color:#1d332b;border:0}.remote-v2 .sheet .secondary-button{border-radius:14px;background:#ffffff0b;border:1px solid #ffffff1c;color:#d6e4e8;min-height:44px;margin:12px 0;font-size:13px}.remote-v2 .sheet .small-note{font-size:11px}.remote-v2 .version{font-size:8px!important;letter-spacing:1.1px;margin-top:20px}
.remote-v2 .remote-device{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 0;font-size:12px;color:#b3c8d5}.remote-v2 .remote-device button{font-size:11px;color:#d6c3bc;padding:10px}.remote-v2 .remote-mixer-row{padding:14px 0;border-bottom:1px solid #ffffff0b}.remote-v2 .remote-mixer-row label{display:flex;justify-content:space-between;margin:0 0 10px;gap:15px}.remote-v2 .remote-mixer-row label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remote-v2 .remote-mixer-row>div{display:flex;align-items:center;gap:15px}.remote-v2 .remote-mixer-row button{border:1px solid #ffffff18;padding:8px 12px;border-radius:10px;font-size:11px;min-width:65px}.remote-v2 #remote-app-mixer,.remote-v2 #remote-system-mixer{margin:20px 0}.remote-v2 .remote-recent{display:flex;align-items:center;gap:10px;border-bottom:1px solid #ffffff12;padding:12px 0}.remote-v2 .remote-recent-main{display:flex;align-items:center;text-align:left;gap:13px;flex:1;min-width:0}.remote-v2 .recent-art{width:60px;height:72px;flex-shrink:0;border-radius:11px;overflow:hidden;position:relative;display:grid;place-items:center;background:#ffffff08}.remote-v2 .recent-art img{height:40px;width:36px;object-fit:contain}.remote-v2 .recent-art .content-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.remote-v2 .remote-recent-main>span:last-child{min-width:0;display:flex;flex-direction:column;gap:7px}.remote-v2 .remote-recent small{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#9bb6a9}.remote-v2 .remote-recent strong{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.remote-v2 .remote-recent-main>span:last-child>span{font-size:11px;color:#8fa7b8}.remote-v2 .recent-remove{padding:8px;color:#889da9}.remote-v2 .recent-remove .icon{width:17px;height:17px}.remote-v2 .remote-empty{padding:25px 0}
.remote-v2 .pair-screen{padding-top:35px}.remote-v2 .pair-screen h1{color:#f1f5f5;font-size:49px;line-height:1.05;letter-spacing:-2.5px}.remote-v2 .pair-screen h1 em{font-style:normal;color:#b0cabc}.remote-v2 .pair-screen>p{font-size:15px;color:#a6b8c6}.remote-v2 .pair-screen .primary-button{background:#d5e7dc;color:#1b3529;border-radius:16px;min-height:54px;font-size:15px}.remote-v2 #pin{background:#111f2b;border:1px solid #ffffff25;border-radius:16px;color:#f1f6f7;font-size:30px;letter-spacing:12px}.remote-v2 .pair-illustration{color:#c4d9cc}.remote-v2 .pair-wifi{font-size:11px;color:#829dac}
@media(max-width:360px){.remote-v2 .remote-shell{padding-left:16px;padding-right:16px}.remote-v2 .now-playing{padding:14px;gap:11px}.remote-v2 .now-copy h1{font-size:17px}.remote-v2 .remote-apps{gap:6px}.remote-v2 .remote-apps button{font-size:10px;border-radius:15px}.remote-v2 .now-art{width:49px;height:57px}.remote-v2 .dpad{width:212px;height:212px}.remote-v2 .dpad-section{min-height:235px}.remote-v2 .sheet{padding-left:18px;padding-right:18px}.remote-v2 .pair-screen h1{font-size:43px}}
@media(min-height:930px){.remote-v2 .remote-shell{padding-top:calc(27px + env(safe-area-inset-top))}.remote-v2 .now-playing{margin-top:10px;margin-bottom:23px}.remote-v2 .dpad{width:246px;height:246px}.remote-v2 .dpad-section{padding-top:10px;min-height:284px}.remote-v2 .touchpad{height:265px}.remote-v2 .navigation-row{padding-top:16px;padding-bottom:22px}}
@media(prefers-reduced-motion:reduce){.remote-v2 button,.remote-v2 .playing-bars i{animation:none;transition:none}}
.remote-v2 .remote-shell{padding-bottom:180px}.remote-v2 .playback-panel{position:fixed;z-index:20;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));width:min(calc(100vw - 32px),446px);padding:12px 17px 10px;background:linear-gradient(140deg,#253440f5,#16232ff7);backdrop-filter:blur(24px);box-shadow:0 0 0 1px #ffffff08,0 -12px 45px #0005}.remote-v2 .transport{margin:8px 0}.remote-v2 .play-button{width:50px;height:50px}.remote-v2 .volume-row{padding-top:7px}.remote-v2 .now-playing{min-height:85px;padding:14px;margin-bottom:14px}.remote-v2 .now-art{width:51px;height:57px}.remote-v2 .remote-apps{margin-bottom:14px}.remote-v2 .remote-apps button{height:62px}.remote-v2 .dpad{width:212px;height:212px}.remote-v2 .dpad-section{min-height:244px;padding-top:0}.remote-v2 .tab-buttons{margin-top:10px}.remote-v2 .tab-buttons button{min-height:34px}.remote-v2 .navigation-row{padding-top:7px;padding-bottom:10px}.remote-v2 .navigation-row button{min-height:51px}.remote-v2 .remote-shortcuts{padding-top:10px}.remote-v2 dialog{z-index:100}
.remote-v2 .dpad{width:190px;height:190px}.remote-v2 .dpad-section{min-height:220px;padding-bottom:4px}.remote-v2 .tab-buttons{margin-top:8px}.remote-v2 .touchpad{height:190px}.remote-v2 .remote-header-actions{display:flex;align-items:center;gap:8px}.remote-v2 .remote-header-actions>#search-open{font-size:0;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff20;display:grid;place-items:center;background:#ffffff08}.remote-v2 .remote-header-actions>#search-open .icon{width:20px;height:20px}.remote-v2 .remote-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}

.remote-v2 .remote-apps button[data-launch=tiktok]>span:first-child{color:#c4f5f0;filter:drop-shadow(1px 1px 0 #fe2c55)}

.remote-apps img.service-logo{width:29px;height:29px;object-fit:contain}.remote-apps [data-launch="tiktok"] img{border-radius:6px}