:root{color-scheme:dark;--gold:#f4bd4e;--panel:#131c26;--edge:#ffffff23}*{box-sizing:border-box}body{margin:0;background:#0d141c;color:#f6f3ed;font:16px system-ui,-apple-system,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;color:inherit;background:transparent}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}input,select,textarea{font-size:16px!important}.shell{display:flex;min-height:100dvh}.sidebar{width:228px;flex-shrink:0;background:#0a1018;border-right:1px solid var(--edge);padding:22px 13px;display:flex;flex-direction:column}.brand{font-size:21px;color:white;padding:0 7px 25px}.brand:first-letter{color:var(--gold)}nav{display:grid;gap:5px}nav button{text-align:left;padding:12px;border-radius:9px;font-size:14px}nav button.active,nav button:hover{background:#e9b74726;color:var(--gold)}nav hr{width:100%;border:0;border-top:1px solid var(--edge);margin:14px 0}.server{margin-top:auto;padding:15px 8px;border-radius:10px;background:#17222e;font-size:13px;color:#73d6a1}.server small{display:block;color:#bbc3ce;margin-top:5px}.content{flex:1;min-width:0;display:flex;flex-direction:column}header{height:62px;display:flex;align-items:center;gap:12px;padding:0 20px;background:#0d141ce8;border-bottom:1px solid var(--edge)}header button{font-size:24px}.head-spacer{flex:1}.mobile-brand,.mobile-menu{display:none}main{flex:1}.hero{min-height:65vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at 55% 40%,#4b5a64,#172638 65%,#0d141c)}.scenery{position:absolute;inset:0;background:linear-gradient(0deg,#0d141c 1%,#0d141c30 45%,#0d141c88 100%),linear-gradient(130deg,#172b38,#385260,#121d2c) center/cover;opacity:.7}.hero-content{position:relative;text-align:center;padding:40px 16px 32px}.record-wrap{width:min(35vh,300px);height:min(35vh,300px);position:relative;margin:0 auto 26px}.record{height:100%;width:100%;border-radius:50%;background:repeating-radial-gradient(circle at center,#111 0px,#171717 2px,#0b0b0b 4px,#222 5px,#080808 7px);border:6px solid #080808;box-shadow:0 15px 45px #000a;display:grid;place-items:center}.record-label{width:36%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#e4b955 0 10%,#253e57 11% 100%);font-size:10px;letter-spacing:1px}.tonearm{position:absolute;right:3%;top:5%;height:58%;width:9px;background:linear-gradient(90deg,#a9a9a9,#333,#ddd);transform:rotate(23deg);transform-origin:top;box-shadow:2px 2px 5px #000}body.playing .record{animation:spin 4s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}h1{font-size:clamp(23px,3vw,38px);margin:0 0 8px}.hero p{margin:0;color:#ddd}.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}.hero-actions button,.primary{background:linear-gradient(120deg,#e5ac40,#ffdb80);color:#171717;padding:13px 20px;border-radius:10px;font-weight:700}.welcome,.page{padding:25px;max-width:1000px;margin:auto}.page h1{margin:15px 0 22px}.panel{background:#17212c;border:1px solid var(--edge);padding:20px;border-radius:15px;margin:14px 0}.panel p{line-height:1.6;color:#c6d0da}.panel button,.panel input[type=file]{background:#263342;border-radius:9px;padding:12px;margin:8px 6px 8px 0;max-width:100%}.panel input[type=search],.panel input[type=text]{background:#0c1520;border:1px solid #ffffff40;padding:12px;border-radius:9px;width:100%;color:white}.muted{color:#adb9c5}.player{min-height:90px;background:#0a1018;border-top:1px solid var(--edge);display:flex;align-items:center;gap:14px;padding:12px 24px}.cover{display:grid;place-items:center;width:50px;height:50px;background:#364657;border-radius:9px}.track{min-width:150px}.track small{display:block;color:#aeb8c5;margin-top:4px}.player-actions{display:flex;gap:15px;align-items:center;justify-content:center;flex:1}.player-actions button{font-size:19px}.player-actions .play{border:2px solid var(--gold);border-radius:50%;width:45px;height:45px}.volume{display:flex;align-items:center;gap:8px}.volume input{accent-color:var(--gold);width:90px}.bottom-nav{display:none}.overlay{position:fixed;inset:0;background:#05070bcf;display:grid;place-items:center;z-index:30;padding:20px}.hidden{display:none!important}.dialog{background:#18232e;border:1px solid #ffffff2c;border-radius:18px;padding:28px;width:min(420px,100%)}.dialog label{display:block;margin:16px 0}.dialog input{display:block;width:100%;background:#0d141c;color:white;border:1px solid #ffffff44;padding:13px;border-radius:9px;margin-top:8px}.dialog .primary{width:100%}#auth-error{color:#ff9999;min-height:20px}@media(max-width:800px){.sidebar{display:none;position:fixed;z-index:20;inset:0 auto 0 0;box-shadow:0 0 0 100vw #0009}.sidebar.open{display:flex}.mobile-menu,.mobile-brand{display:block}.mobile-brand{padding:0;font-size:18px}.hero{min-height:62vh}.record-wrap{width:220px;height:220px}.hero-actions{display:grid;grid-template-columns:1fr 1fr}.hero-actions button{font-size:14px}.player{padding:9px 12px;gap:8px;min-height:72px}.player-actions{gap:7px}.player-actions button{font-size:15px}.player-actions button:first-child,.player-actions button:last-child,.volume{display:none}.track{min-width:0;flex:1;font-size:13px}.track small{font-size:11px}.bottom-nav{display:flex;justify-content:space-around;position:sticky;bottom:0;background:#0a1018;border-top:1px solid var(--edge);padding:7px 0 env(safe-area-inset-bottom)}.bottom-nav button{font-size:20px}.bottom-nav small{display:block;font-size:10px}.page{padding:16px}}

.youtube-frame{width:100%;aspect-ratio:16/9;max-width:960px;margin:12px auto;position:relative}.youtube-frame iframe{width:100%;height:100%;border:0}.ytresults{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.ytitem{display:flex;align-items:center;gap:12px;text-align:left;padding:8px;border:1px solid #354052;border-radius:10px;background:#182330;color:white;cursor:pointer}.ytitem img{width:110px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}.ytitem span{min-width:0}.ytitem strong{display:block;font-size:13px}.ytitem small{display:block;color:#9ca3af}.panel form{display:flex;flex-wrap:wrap;gap:8px}.panel form input{min-width:180px;flex:1}.page{overflow-wrap:anywhere}@media(max-width:600px){.ytresults{grid-template-columns:1fr}.ytitem img{width:105px}.youtube-frame{max-width:100%}}

/* Persistent, crossfading landscape slideshow; images remain in data/slides. */
.scenery{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.slide-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.5s ease-in-out;filter:saturate(.88) brightness(.7)}
.slide-layer.visible{opacity:1}
.hero-content{position:relative;z-index:2}
.scenery:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,15,24,.65),rgba(8,15,24,.12),rgba(8,15,24,.5))}
.slide-manager{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px;margin:14px 0}
.slide-tile{border:1px solid #ffffff30;border-radius:12px;padding:7px;background:#0e1721}
.slide-tile img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px}
.slide-tile button{font-size:12px;color:#ffc6c6;margin-top:7px}
@media(prefers-reduced-motion:reduce){.slide-layer{transition:none}}

/* TMusic 2.4.2: mockup-aligned responsive shell and settings */
:root{--gold:#f7c75e;--panel:#141e29;--edge:#ffffff19}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:#0a1018}.sidebar{width:222px;background:#080e15;padding:20px 13px}.brand{font-weight:750;letter-spacing:.2px}.sidebar nav button{padding:13px 12px}.content>header{height:56px;background:#09111ad9}.hero{min-height:calc(100dvh - 147px);display:grid;place-items:center;background:#182939}.hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#09111af2 0%,#09111a20 55%,#09111a40 100%)}.hero-content{width:100%;padding:24px 24px 34px}.record-wrap{width:clamp(210px,27vw,370px);height:clamp(210px,27vw,370px);margin:0 auto 25px}.record{border:7px solid #08090b;box-shadow:0 22px 80px #000b,inset 0 0 28px #000}.record-label{width:37%;background:radial-gradient(circle,#e5b651 0 5%,#151c26 6% 14%,#253b4d 15% 100%);border:4px solid #0c0f14;font-size:30px;color:#f7c75e}.tonearm{right:4%;top:0;height:56%;width:12px;border-radius:10px;background:linear-gradient(90deg,#c9c8c1,#474d53,#e1dfd5);transform:rotate(28deg)}.hero h1{font-size:clamp(22px,2.5vw,34px);text-shadow:0 2px 14px #000}.hero p{font-size:14px}.hero-progress{height:4px;width:min(470px,75vw);background:#cdd1d566;border-radius:10px;margin:25px auto 18px}.hero-progress span{display:block;background:var(--gold);width:31%;height:100%;border-radius:10px}.hero-transport{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,55px);font-size:19px}.hero-play{border:2px solid var(--gold);color:var(--gold);width:56px;height:56px;display:grid;place-items:center;border-radius:50%;font-size:24px}.hero-actions{display:none}.welcome{max-width:1200px;padding:30px}.welcome-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.welcome-grid button{min-height:115px;background:linear-gradient(140deg,#1d2b39,#17212c);border:1px solid var(--edge);border-radius:14px;padding:20px;font-size:22px;text-align:left}.welcome-grid b,.welcome-grid small{display:block;font-size:14px;margin-top:7px}.welcome-grid small{color:#aebbc7;font-size:12px}.player{min-height:78px}.page{max-width:1180px;padding:26px 30px}.panel{background:#15202c;border:1px solid #ffffff16;box-shadow:0 6px 20px #0002}.panel input:not([type=checkbox]):not([type=file]),.panel select{min-width:0;background:#0c151f!important;color:#fff!important;border:1px solid #ffffff30!important;border-radius:9px;padding:11px 12px}.panel button.primary{background:linear-gradient(110deg,#e7b74b,#ffdb83)!important;color:#171717!important}.settings-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}.settings-tabs{position:sticky;top:14px;display:grid;gap:5px;background:#131d27;border:1px solid var(--edge);border-radius:14px;padding:10px}.settings-tabs button{padding:13px;text-align:left;border-radius:9px;font-size:14px}.settings-tabs button.active,.settings-tabs button:hover{background:#f7c75e21;color:var(--gold)}.settings-content .panel{margin:0}.settings-content .panel[hidden]{display:none}.settings-content .panel h2{font-size:19px}.settings-content .panel form{display:flex;align-items:center;gap:10px}.settings-content .panel form input{min-height:42px}.settings-content .panel p{font-size:13px}.slide-tile{background:#0e1721}.slide-tile img{aspect-ratio:16/9}.slide-empty{border:1px dashed #ffffff38;border-radius:12px;padding:25px;color:#aebac6;text-align:center}.ytresults{grid-template-columns:repeat(auto-fill,minmax(285px,1fr))}.ytitem{background:#172431;padding:10px}.ytitem img{width:115px}.scenery{background:linear-gradient(135deg,#253c4c,#132433)!important;opacity:1}.slide-layer{filter:saturate(.98) brightness(.8)}.scenery:after{background:linear-gradient(0deg,#0b121ac0,#0b121a10 50%,#0b121a60)}
@media(max-width:800px){.sidebar{width:250px}.hero{min-height:calc(100dvh - 210px)}.record-wrap{width:min(64vw,290px);height:min(64vw,290px)}.hero-content{padding:20px 12px 24px}.hero h1{font-size:22px}.hero-transport{gap:23px}.hero-play{width:50px;height:50px}.welcome-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.welcome{padding:20px}.page{padding:18px 14px}.settings-shell{grid-template-columns:1fr}.settings-tabs{position:static;display:flex;overflow-x:auto;white-space:nowrap;gap:4px}.settings-tabs button{flex-shrink:0;padding:10px 12px}.settings-content .panel form{align-items:stretch}.player{min-height:68px}.bottom-nav{z-index:5}.hero-progress{margin-top:20px}}
@media(max-width:430px){.record-wrap{width:61vw;height:61vw}.hero{min-height:calc(100dvh - 192px)}.hero-content{padding:12px 10px}.hero h1{font-size:19px}.hero p{font-size:12px}.hero-transport{gap:16px}.hero-play{width:45px;height:45px}.welcome-grid button{padding:13px;min-height:100px}.settings-content .panel form{flex-direction:column}.settings-content .panel form input,.settings-content .panel form button{width:100%}.settings-content .panel{padding:16px}}

/* T Music Server: compact contextual help and YouTube split workspace */
.info-trigger{display:inline-grid;place-items:center;width:25px;height:25px;margin-left:8px;border:1px solid #f7c75e77;border-radius:50%;background:transparent;color:#f7c75e;font-size:16px;vertical-align:middle;cursor:pointer}
.info-overlay{position:fixed;inset:0;background:#000b;z-index:9999;display:none;align-items:center;justify-content:center;padding:18px}
.info-overlay.visible{display:flex}.info-dialog{width:min(440px,100%);background:#17212c;color:#f4f4f4;border:1px solid #ffffff33;border-radius:16px;padding:22px;box-shadow:0 20px 80px #0009}.info-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.info-head h2{margin:0;font-size:19px}.info-close{font-size:26px;line-height:1;background:transparent}.info-body{font-size:14px;line-height:1.65;color:#cdd6df;margin:20px 0}.info-done{padding:10px 22px}
.youtube-workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px;align-items:start;margin-top:15px}.youtube-stage{min-width:0}.youtube-results-pane{min-width:0;background:#15202c;border:1px solid #ffffff20;border-radius:12px;overflow:hidden}.youtube-results-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid #ffffff20}.youtube-results-head button{border:1px solid #ffffff30;border-radius:7px;padding:5px 9px;color:#f7c75e}.youtube-workspace .ytresults{display:grid;grid-template-columns:1fr;gap:7px;padding:8px;max-height:65vh;overflow-y:auto}.youtube-workspace .ytitem{width:100%;text-align:left}.youtube-workspace .ytitem img{width:90px}.youtube-workspace.results-collapsed{grid-template-columns:minmax(0,1fr) 46px}.youtube-workspace.results-collapsed .youtube-results-head strong,.youtube-workspace.results-collapsed .ytresults{display:none}.youtube-workspace.results-collapsed .youtube-results-head{justify-content:center;padding:8px 3px}
@media(max-width:800px){.youtube-workspace{grid-template-columns:minmax(0,1fr)}.youtube-workspace.results-collapsed{grid-template-columns:minmax(0,1fr)}.youtube-workspace.results-collapsed .youtube-results-pane{width:46px;justify-self:end}.youtube-workspace .ytresults{max-height:45vh}}

/* T Music Server v2.4.3 brand */
.brand{display:flex;align-items:center;gap:7px;font-size:17px;white-space:nowrap}
.brand .tmusic-logo{width:30px;height:30px;object-fit:cover;border-radius:7px;flex:none}
.mobile-brand .tmusic-logo{width:25px;height:25px}
@media(max-width:600px){.mobile-brand{font-size:14px;gap:5px}}

/* Locked brand asset: the emblem and the login logo come from the approved 2026-10-23 design. */
.auth-identity{display:flex;justify-content:center;margin-bottom:14px}.auth-identity img{max-height:136px;max-width:100%;object-fit:contain}.mobile-brand{align-items:center}.mobile-brand .tmusic-logo{vertical-align:middle}
/* Interactive media controls - version 2.4.6 (reference artwork remains locked) */
.hero-transport button{appearance:none;background:transparent;color:inherit;border:0;padding:4px;cursor:pointer;font-size:inherit}
.hero-transport .hero-play{background:#09111abb;border:2px solid var(--gold);color:var(--gold);width:56px;height:56px;display:grid;place-items:center;border-radius:50%;font-size:22px}
.hero-progress{height:auto;background:none}.hero-progress input{width:100%;cursor:pointer;accent-color:var(--gold)}
.playback-notice{min-height:1.15rem;margin:5px auto 0!important;font-size:12px!important;max-width:min(600px,90vw)}
.player{flex-wrap:wrap}.player-actions button.enabled,.hero-transport button.enabled{color:var(--gold)!important;text-shadow:0 0 10px #f7c75e80}
.player-actions button:disabled,.hero-transport button:disabled{opacity:.42;cursor:not-allowed}
.cover{overflow:hidden;flex-shrink:0}.cover img{width:100%;height:100%;object-fit:cover}.track{overflow:hidden}.track strong,.track small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.playback-bar{display:flex;gap:7px;align-items:center;font-size:10px;color:#c8d0da}.playback-bar input{accent-color:var(--gold);width:100px;cursor:pointer}
.tmusic-video-dock{display:none;position:fixed;z-index:15;right:16px;bottom:122px;width:min(360px,calc(100vw - 32px));height:auto;aspect-ratio:16/9;background:#090c10;border:1px solid #b5944d;border-radius:10px;box-shadow:0 10px 34px #000a;overflow:hidden}
.tmusic-video-dock.visible{display:flex;flex-direction:column}.tmusic-video-dock.in-page{right:auto;bottom:auto;aspect-ratio:auto;border-radius:9px}
.video-dock-head{height:26px;background:#090e14d9;display:flex;align-items:center;padding:3px 8px;gap:6px;flex-shrink:0}
.video-dock-head small{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;color:#e9d9b3}
.video-dock-head a{color:var(--gold);text-decoration:underline;font-size:11px;white-space:nowrap}
.video-dock-head button{background:transparent;color:#eee;font-size:19px;padding:0 4px;line-height:1;cursor:pointer}
#tmusic-video-mount{flex:1;min-height:0;position:relative}#tmusic-video-mount iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.youtube-player-placeholder{width:100%;aspect-ratio:16/9;min-height:210px;display:grid;place-items:center;background:linear-gradient(140deg,#101c27,#03080d);border:1px dashed #c9a34e70;border-radius:10px;text-align:center;padding:24px;color:#d2d6db}
.yt-result-row{display:flex;gap:5px;min-width:0}.yt-result-row .ytitem{min-width:0;flex:1}.yt-queue-button{align-self:stretch;background:#1c3040;color:var(--gold);border:1px solid #46515e;border-radius:8px;padding:4px 10px;font-size:22px;cursor:pointer}
.browser-queue-item{display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff20;padding:9px 0;min-width:0}.browser-queue-item.active{color:var(--gold)}.browser-queue-item img{width:88px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}.browser-queue-item div{flex:1;min-width:0}.browser-queue-item strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.browser-queue-item small{display:block;color:#9ba9ba}.browser-queue-item button{padding:8px;border-radius:7px;background:#263342;color:var(--gold);cursor:pointer;white-space:nowrap}
@media(max-width:800px){.playback-bar{width:100%;order:8;justify-content:center}.playback-bar input{width:min(240px,62vw)}.tmusic-video-dock{bottom:125px;right:8px;width:min(260px,calc(100vw - 16px));z-index:11}.tmusic-video-dock.in-page{z-index:11}.youtube-player-placeholder{min-height:175px}.hero-transport .hero-play{width:50px;height:50px}.browser-queue-item img{width:66px}.browser-queue-item button{font-size:12px}}

/* T Music Server 2.4.7: viewport-fit control deck; all actions stay in view. */
html,body{height:100%;overflow:hidden}
.shell{height:100dvh;min-height:0;overflow:hidden}
.content{height:100dvh;min-height:0;overflow:hidden}
.content>header{flex:0 0 54px;height:54px}
#main{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#b3894b #0e1620}
.player{flex:0 0 auto;min-height:66px;gap:clamp(7px,1vw,14px);padding:8px clamp(10px,1.6vw,24px);flex-wrap:nowrap}
.track{flex:0 1 230px;min-width:0;max-width:230px;font-size:13px}
.track small{font-size:11px}
.player-actions{gap:clamp(8px,1.7vw,24px);flex:1 1 auto;min-width:168px}
.player-actions .play{width:40px;height:40px}
.playback-bar{flex:0 1 190px;min-width:120px}
.playback-bar input{width:100%;min-width:40px}
.hero{min-height:100%;height:auto;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-content{width:100%;padding:clamp(12px,2.1dvh,24px) clamp(14px,2vw,30px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(7px,1.2dvh,12px)}
.hero-content>h1,.hero-content>p{margin:0}
.record-wrap{--vinyl-base:clamp(118px,min(24vw,29dvh),260px);width:calc(var(--vinyl-base) * var(--vinyl-scale,.8));height:auto;aspect-ratio:1;margin:0 auto clamp(4px,1dvh,12px);flex-shrink:0;transition:width .17s ease}
.record{width:100%;height:100%}
.hero h1{font-size:clamp(18px,2.2vw,29px);margin:0}
.hero p{font-size:clamp(11px,1vw,14px)}
.hero-progress{margin:3px auto 0;height:20px;width:min(480px,72vw)}
.hero-progress input{display:block;width:100%}
.hero-transport{gap:clamp(15px,3vw,43px)}
.hero-transport button{font-size:19px}
.hero-transport .hero-play{width:clamp(38px,5dvh,48px);height:clamp(38px,5dvh,48px);font-size:19px}
.playback-notice{max-height:2.3em;overflow:hidden;text-overflow:ellipsis}
.hero-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(7px,1.1vw,13px);width:min(920px,100%);margin:4px auto 0}
.hero-actions button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:clamp(52px,9dvh,76px);padding:8px 10px;background:linear-gradient(135deg,#1b2c3cd9,#0e1825eb);border:1px solid #f7c75e50;border-radius:12px;color:#f2f3f6;font-size:clamp(12px,1.1vw,15px);box-shadow:0 3px 20px #0004}
.hero-actions button:hover{background:#f7c75e22;border-color:var(--gold)}
.hero-actions button>span{color:var(--gold);font-size:clamp(20px,2vw,28px)}
.hero-actions button>b{min-width:0;font-weight:600}
.vinyl-control{position:absolute;right:12px;top:10px;display:flex;align-items:center;gap:8px;padding:5px 9px;background:#08121cbb;border:1px solid #ffffff2c;border-radius:10px;z-index:3;font-size:11px;color:#ddd}
.vinyl-control input{width:80px;accent-color:var(--gold);height:16px}
.vinyl-control output{color:var(--gold);width:32px;text-align:right;font-variant-numeric:tabular-nums}
.scenery-caption{position:absolute;bottom:8px;left:18px;background:#0c1621a8;padding:5px 9px;border:1px solid #ffffff20;border-radius:7px;font-size:11px;color:#e9ddc9;pointer-events:none}
.scenery-caption:empty{display:none}
.scenery .slide-layer{will-change:opacity;background-size:cover;background-position:center 48%}
@media(max-width:1080px){.volume{display:none}.playback-bar{flex-basis:150px}.track{flex-basis:170px}}
@media(max-width:800px){
.content>header{flex-basis:48px;height:48px}
.hero{min-height:100%}
.hero-content{gap:clamp(6px,1.05dvh,10px);padding:16px 10px 12px}
.record-wrap{--vinyl-base:clamp(125px,min(56vw,28dvh),240px)}
.hero-progress{margin-top:1px;width:min(370px,78vw)}
.hero-actions{grid-template-columns:repeat(2,minmax(0,1fr));width:min(430px,100%);gap:7px;margin-top:1px}
.hero-actions button{min-height:clamp(42px,6.7dvh,60px);padding:6px 8px}
.hero-actions button>span{font-size:19px}
.hero-actions button>b{font-size:12px}
.hero h1{font-size:clamp(17px,4vw,22px)}
.hero-transport{gap:clamp(10px,4.5vw,25px)}
.player{min-height:76px;flex-wrap:wrap;padding:6px 8px;gap:5px}
.player .cover{width:34px;height:34px}
.player .track{min-width:0;max-width:none;flex:1 1 85px}
.player-actions{flex:0 0 auto;gap:9px;min-width:0}
.player-actions button{font-size:15px}
.player-actions button:first-child,.player-actions button:last-child{display:block}
.player-actions .play{height:34px;width:34px}
.playback-bar{order:8;flex:1 0 100%;min-width:0;width:100%;gap:5px}
.playback-bar input{width:100%;max-width:none}
.bottom-nav{flex-shrink:0;position:relative;padding:6px 0 max(6px,env(safe-area-inset-bottom))}
.vinyl-control{top:7px;right:7px;padding:4px 6px;gap:5px}
.vinyl-control label{display:none}
.vinyl-control input{width:65px}
.scenery-caption{bottom:6px;left:8px;font-size:10px}
.tmusic-video-dock{bottom:150px}
}
@media(max-width:430px){.record-wrap{--vinyl-base:clamp(118px,min(58vw,26dvh),210px)}.hero-content{padding:12px 8px 9px;gap:5px}.hero-progress{height:14px}.hero-actions button{min-height:45px}.hero-transport .hero-play{height:40px;width:40px}.playback-notice{min-height:12px!important;font-size:10px!important}.hero h1{font-size:17px}}
@media(max-height:630px){.hero-content{gap:5px;padding-top:10px;padding-bottom:8px}.record-wrap{--vinyl-base:clamp(105px,min(22vw,24dvh),175px);margin-bottom:0}.hero-actions button{min-height:44px}.hero-progress{height:15px}.vinyl-control{top:5px}}
@media(prefers-reduced-motion:reduce){.record-wrap{transition:none}}

.slide-tile-caption{display:block;font-size:11px;line-height:1.3;color:#d1d8e0;min-height:27px;margin:5px 1px 0}
.slide-tile button:disabled{opacity:.63;cursor:default;background:#172631;color:#eac67f}

/* Server settings diagnostics. No host OS changes from browser. */
.system-facts{padding:11px 12px;border:1px solid #e1bf754d;background:#121d27;border-radius:9px;line-height:1.6;overflow-wrap:anywhere}
.os-instructions{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;padding:12px;background:#0a1420;border:1px solid #b08b4266;border-radius:9px;color:#f4deb1;font-size:12px}
#tmusic-os-target{width:min(100%,520px);padding:9px;background:#121d27;color:#fff;border:1px solid #b08b4266;border-radius:8px;margin:8px 0 10px}

/* T MUSIC SERVER 2.4.9 - USER LOCKED REFERENCE B88E5846. Desktop/mobile layout. */
:root{--gold:#edce70;--accent:#8153ff;--accent-glow:#a084ff;--panel:#0b1524;--edge:#ffffff28}
body{background:#050d17;color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.sidebar{width:190px;padding:12px 13px;background:linear-gradient(180deg,#081525,#09101e 65%,#0d1221);border-right:1px solid #ffffff28}
.sidebar .brand{padding:0 3px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--gold);font-size:15px;font-weight:850}
.sidebar .brand .tmusic-logo{width:90px;height:87px;object-fit:contain}
.sidebar nav{gap:6px}.sidebar nav button{font-size:14px;padding:13px 12px;border-radius:9px}
.sidebar nav button.active,.sidebar nav button:hover{background:linear-gradient(100deg,#643ef9a8,#4d318d44);color:#fff;border-left:3px solid #976dff;box-shadow:inset 0 0 15px #8457ff1f}
.server{border-radius:0;background:none;color:#b4a0ff;font-size:11px;padding:8px 4px;line-height:1.65}
.server small{color:#bdc5d6;font-size:10px}
.content{position:relative;background:#081527}
.content>header{position:absolute;z-index:9;left:0;right:0;top:0;background:transparent;border:0;pointer-events:none;height:88px;flex-basis:88px;justify-content:flex-end;padding:9px 20px}
.content>header>*{pointer-events:auto}
.top-identity{position:absolute;top:9px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;white-space:nowrap;text-shadow:0 2px 12px #001}
.top-identity strong{font-size:clamp(22px,3vw,43px);line-height:1.05;font-weight:850;letter-spacing:.25px}
.top-identity strong em{font-style:normal;color:var(--gold)}
.top-identity small{font-size:10px;letter-spacing:2.5px;color:#e0e1e8;margin-top:5px}
#header-addons{font-size:13px!important;padding:10px 15px;border-radius:13px;background:#ffffff1b;border:1px solid #ffffff40;white-space:nowrap}
#header-alerts{font-size:23px!important}#quick-search{display:none}
#user{border-radius:50%;width:40px;height:40px;background:linear-gradient(120deg,#6e52a8,#1b5d77);border:1px solid #ffffff44}
#main{overflow:hidden!important}
.hero{height:100%;min-height:100%;display:flex;align-items:stretch;position:relative;background:#12283d}
.hero .scenery{opacity:1}.hero .slide-layer{filter:saturate(1.04) brightness(.96)}
.hero .scenery::after{background:linear-gradient(180deg,#05132370 0%,#00142a15 45%,#050c18a1 100%)}
.hero-shade{background:linear-gradient(180deg,#04122430,#00000010 32%,#030c1b70 100%)}
.hero-content{padding:clamp(135px,18dvh,160px) 22px 96px;gap:9px;justify-content:center}
.hero-tabs{position:absolute;z-index:6;top:clamp(84px,11.5dvh,105px);left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:4px;border-radius:30px;background:#091529af;border:1px solid #ffffff55;box-shadow:0 10px 28px #050b1dbb;backdrop-filter:blur(14px);width:min(520px,calc(100% - 40px))}
.hero-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;border-radius:24px;min-height:38px;padding:6px 9px;font-size:13px;color:#ecedf2}
.hero-tabs button.active{background:linear-gradient(110deg,#8c59ff,#4c2bc4);box-shadow:0 0 15px #7948ff88;color:white}
.hero-tabs button:hover{background:#6550b14d}
.record-wrap{--vinyl-base:clamp(130px,min(19vw,31dvh),270px);margin:0 auto 5px}
.record{border:3px solid #07070c;box-shadow:0 6px 38px #000a,0 0 9px #a56cff,inset 0 0 20px #000}
.record-label{background:radial-gradient(circle,#ead5a4 0 5%,#13121c 6% 10%,#38647b 11% 100%);border:3px solid #0b0d12}
.record-label span{display:none}.tonearm{height:57%;width:7px;right:0;top:4%}
.hero h1{font-size:clamp(19px,1.65vw,24px);margin:0;text-shadow:0 2px 12px #000e}
.hero p{font-size:12px}
.hero-progress{display:none}
.hero-transport{gap:clamp(16px,3.3vw,43px);margin-top:12px}
.hero-transport button{font-size:22px}
.hero-transport .hero-play{background:linear-gradient(125deg,#9457ff,#5b2fe9);box-shadow:0 0 21px #854cffb0;color:white;border:1px solid #ab8dff;height:48px;width:48px}
.hero-actions{display:none!important}
.vinyl-control{right:11px;top:auto;bottom:83px;opacity:.66;z-index:3}
.vinyl-control:hover,.vinyl-control:focus-within{opacity:1}
.scenery-caption{bottom:87px;font-size:10px}
.player{position:absolute;z-index:7;left:16px;right:16px;bottom:12px;min-height:66px;border:1px solid #ffffff65;border-radius:18px;background:linear-gradient(110deg,#0a1729b9,#181b2cb3);backdrop-filter:blur(20px);box-shadow:0 10px 45px #0009;gap:clamp(8px,1vw,15px)}
.player .cover{height:46px;width:46px;flex-shrink:0;border:1px solid #ffffff44}
.player .track{max-width:250px;flex:1 1 150px}
.player-actions{flex:0 1 220px;gap:12px}
.player-actions button.enabled{color:#ab86ff!important;text-shadow:0 0 10px #9e78ff}
.player-actions .play{border-color:#9671ff;background:#7546e6;box-shadow:0 0 12px #794bff88}
.playback-bar{flex:1 1 140px}.playback-bar input,.hero-progress input{accent-color:#8553ff}
.volume input{accent-color:#8553ff}
.bottom-nav{z-index:12}
.page{padding-top:110px;max-height:100%;overflow-y:auto}
.page .panel{background:#0c1728e8;border-color:#ffffff26}
@media(min-width:801px) and (max-height:680px){.hero-content{padding-top:126px;padding-bottom:84px}.record-wrap{--vinyl-base:clamp(120px,24dvh,185px)}.hero-transport{margin-top:2px}}
@media(max-width:800px){
.sidebar{width:220px}.content>header{position:relative;z-index:9;height:46px;flex:0 0 46px;justify-content:flex-end;background:#05101c;align-items:center;padding:2px 13px;border-bottom:1px solid #ffffff17}
.content>header .mobile-menu{margin-right:auto;font-size:19px}
.top-identity{top:11px}.top-identity strong{font-size:17px}.top-identity small{display:none}
.mobile-brand{display:none!important}#header-addons,#header-alerts{display:none}#quick-search{display:block;font-size:22px!important}.head-spacer{display:none}
.hero{height:100%;min-height:100%;overflow:hidden}.hero-tabs{top:8px;width:calc(100% - 23px);border-radius:22px}
.hero-tabs button{font-size:11px;min-height:32px;gap:3px;padding:5px 3px}
.hero-content{padding:58px 10px 26px;justify-content:center;gap:8px}
.record-wrap{--vinyl-base:clamp(155px,min(52vw,33dvh),250px);margin:0 auto 12px}
.hero h1{font-size:clamp(16px,4.2vw,21px)}.hero-transport{margin:9px 0 0}.hero-progress{display:flex;width:min(350px,90vw);margin:5px auto 0}
.hero-actions{display:none!important}.vinyl-control{top:auto;bottom:8px;right:9px}
.scenery-caption{bottom:8px}.player{position:relative;left:auto;right:auto;bottom:auto;border-radius:0;min-height:86px;border-left:0;border-right:0;border-bottom:0;box-shadow:none;background:#07111ce8;backdrop-filter:none;padding:5px 10px}
.player-actions{gap:10px}.player-actions .play{height:35px;width:35px}
.bottom-nav{background:#07101d;border-top:1px solid #ffffff20}
.bottom-nav button.active{color:#a079ff;text-shadow:0 0 12px #a079ff66}
.page{padding:15px;overflow-y:auto;max-height:100%}
.tmusic-video-dock{bottom:155px}
}
@media(max-width:430px){.hero-content{padding-top:52px;padding-bottom:18px}.record-wrap{--vinyl-base:clamp(145px,min(51vw,31dvh),210px);margin-bottom:6px}.hero-transport .hero-play{width:43px;height:43px}.hero-transport{gap:clamp(13px,5vw,25px)}.hero-tabs{top:7px}.vinyl-control{display:none}.scenery-caption{display:none}}
@media(max-height:650px) and (max-width:800px){.record-wrap{--vinyl-base:clamp(100px,22dvh,160px)}.hero-content{padding-top:49px;gap:4px}.hero h1{font-size:16px}.hero-transport{margin-top:2px}.hero-progress{margin:0}}

/* 2.5.0: persistent independent 3-tab workspace and edge-to-edge video layout */
.content>.hero-tabs{position:absolute;z-index:11;top:clamp(65px,9dvh,94px);left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:28px;background:#08152cc9;border:1px solid #ffffff53;backdrop-filter:blur(15px);box-shadow:0 8px 24px #0007;width:min(540px,calc(100% - 32px))}
.content>.hero-tabs[hidden]{display:none!important}
.content>.hero-tabs button{flex:1;min-height:38px;border-radius:24px;color:#f3f1fa;font-size:13px;white-space:nowrap}
.content>.hero-tabs button.active{background:linear-gradient(105deg,#8c59ff,#4c2bc4);box-shadow:0 0 16px #8557ff88;color:white}
.content>.hero-tabs button:focus-visible{outline:2px solid #c9b4ff;outline-offset:2px}
#main>.page.youtube-page{width:100%;max-width:none!important;margin:0;padding:clamp(115px,14dvh,145px) clamp(14px,2vw,38px) 110px;overflow-y:auto;height:100%;max-height:100%;}
.youtube-page>h1{margin:0 0 8px;font-size:clamp(19px,1.7vw,27px)}
.youtube-page>.panel{margin:8px 0 14px;padding:clamp(12px,1.3vw,20px)}
.youtube-page #ytsearch{display:flex;align-items:center;flex-wrap:nowrap;gap:12px}
.youtube-page #ytsearch input{flex:1;min-width:0;margin:0;height:48px}
.youtube-page #ytsearch button{flex:none;margin:0;min-height:46px}
.youtube-page .youtube-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,32%);width:100%;gap:clamp(12px,1.2vw,22px);align-items:start;margin:0}
.youtube-page .youtube-stage{min-width:0;min-height:0}
.youtube-page #ytplayer{width:100%;aspect-ratio:16/9;min-height:0!important;max-width:none!important;border-radius:14px;overflow:hidden;background:#080f1e}
.youtube-page #ytplayer iframe{width:100%!important;height:100%!important;position:absolute;inset:0;border:0}
.youtube-page .youtube-player-placeholder{position:relative;display:grid;place-items:center}
.youtube-page .youtube-results-pane{width:100%;max-height:min(62dvh,760px);overflow:hidden}
.youtube-page .ytresults{max-height:calc(min(62dvh,760px) - 48px);overflow:auto;scrollbar-width:thin}
.youtube-page .yt-result-row{padding:2px}
.youtube-page .ytitem{width:100%;min-height:78px}
.youtube-page .ytitem img{width:clamp(90px,8vw,135px);flex-shrink:0}
.youtube-page .ytitem strong{font-size:clamp(12px,.9vw,15px);line-height:1.35}
.youtube-page .ytitem small{font-size:12px}
.youtube-page .youtube-workspace.results-collapsed{grid-template-columns:minmax(0,1fr) 48px}
@media(max-width:1000px){.youtube-page .youtube-workspace{grid-template-columns:minmax(0,1fr) minmax(260px,35%)}}
@media(max-width:800px){.content>.hero-tabs{top:51px;width:calc(100% - 24px)}.content>.hero-tabs button{font-size:11px;min-height:33px}#main>.page.youtube-page{padding:96px 12px 20px}.youtube-page .youtube-workspace,.youtube-page .youtube-workspace.results-collapsed{grid-template-columns:minmax(0,1fr)}.youtube-page #ytplayer{aspect-ratio:16/9}.youtube-page .youtube-results-pane{max-height:none}.youtube-page .ytresults{max-height:36dvh}.youtube-page .youtube-workspace.results-collapsed .youtube-results-pane{width:100%}.youtube-page #ytsearch{gap:7px}.youtube-page #ytsearch button{padding:10px;font-size:12px}.youtube-page .ytitem img{width:106px}}
@media(min-width:801px) and (max-height:750px){#main>.page.youtube-page{padding-top:112px}.youtube-page .youtube-results-pane{max-height:48dvh}.youtube-page .ytresults{max-height:calc(48dvh - 48px)}}

/* 2.5.2 desktop density & YouTube alignment. Preserve locked brand & mobile UI. */
@media(min-width:801px){
 .sidebar{width:clamp(160px,11.4vw,198px)!important;padding:13px 9px!important}
 .sidebar nav button{font-size:12px!important;padding:9px 10px!important}
 .brand{font-size:15px!important}
 .top-identity strong{font-size:clamp(18px,2vw,30px)!important}
 .hero-content{padding-top:clamp(112px,16dvh,155px)!important;padding-bottom:84px!important;gap:4px!important}
 .record-wrap{--vinyl-base:clamp(114px,20dvh,190px)!important}
 .hero h1{font-size:clamp(15px,1.25vw,21px)!important;max-width:72ch;margin-inline:auto}
 .hero-transport{gap:clamp(10px,1.4vw,24px)!important}
 .player{min-height:55px!important;padding:5px 12px!important;gap:8px!important}
 .player .cover{width:35px!important;height:35px!important}
 .player .track{max-width:190px!important;font-size:12px!important}
 .player .track small{font-size:10px!important}
 .player-actions{gap:9px!important;flex:0 0 auto!important}
 .player-actions button{font-size:13px!important}
 .player-actions .play{width:33px!important;height:33px!important}
 .playback-bar{flex:1 1 auto!important;max-width:none!important}
 .playback-bar span{font-size:10px!important;white-space:nowrap}
 .volume input{width:70px!important}
 #main>.page.youtube-page{padding:clamp(104px,13dvh,132px) clamp(12px,1.6vw,26px) 72px!important}
 .youtube-page .youtube-workspace{grid-template-columns:minmax(0, 1.9fr) minmax(280px,1fr)!important;align-items:start!important}
 .youtube-page .ytitem{min-height:64px!important}
 .youtube-page .ytitem img{width:96px!important}
 .youtube-page .ytitem strong{font-size:12px!important}
 .youtube-page .ytitem small{font-size:10px!important}
 .youtube-page .ytresults{max-height:calc(100dvh - 280px)!important}
 .youtube-page .youtube-results-pane{max-height:calc(100dvh - 235px)!important}
}
.tmusic-video-dock.in-page{position:fixed!important;margin:0!important;transform:none!important;z-index:16!important;box-sizing:border-box!important;overflow:hidden!important}
.tmusic-video-dock.in-page #tmusic-video-mount{width:100%!important;flex:1!important;min-height:0!important}
.tmusic-video-dock.in-page iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important}

/* 2.5.3 fluid full-viewport layout and always-available floating video */
html,body{width:100%;min-height:100%;margin:0}
.shell{width:100%;min-height:100dvh;max-width:none}
.content{min-width:0;width:100%;min-height:100dvh}
#main{min-width:0;max-width:none;width:100%}
#main>.page{width:100%;max-width:none;box-sizing:border-box}
.hero{min-height:calc(100dvh - 0px)}
.hero-content{max-width:100%;box-sizing:border-box}
.youtube-page .youtube-workspace{width:100%;max-width:none;min-width:0;grid-template-columns:minmax(0,1.85fr) minmax(260px,1fr)}
.youtube-page .youtube-workspace>*{min-width:0}
.youtube-page #ytplayer{aspect-ratio:16/9;width:100%;max-width:100%}
.player .track{min-width:0}.player .track strong,.player .track small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.tmusic-video-dock.floating{position:fixed!important;left:auto!important;top:auto!important;right:clamp(8px,1vw,20px)!important;bottom:clamp(80px,12dvh,130px)!important;width:clamp(220px,25vw,380px)!important;height:auto!important;aspect-ratio:16/9;z-index:120!important;border-radius:12px;box-shadow:0 14px 42px #000c}
.tmusic-video-dock.floating #tmusic-video-mount{width:100%;flex:1;min-height:0}
.tmusic-video-dock.floating iframe{width:100%!important;height:100%!important}
@media(max-width:700px){
 .youtube-page .youtube-workspace{grid-template-columns:minmax(0,1fr)!important}
 .tmusic-video-dock.floating{width:min(56vw,240px)!important;right:8px!important;bottom:125px!important}
 .record-wrap{max-width:min(45vw,25dvh)!important}
}
@media(max-height:550px){.record-wrap{--vinyl-base:clamp(80px,18dvh,130px)!important}.hero-content{padding-top:80px!important}.tmusic-video-dock.floating{bottom:65px!important}}

.network-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.network-grid label{font-size:12px;color:#d1d5df}.network-grid input{display:block;width:100%;margin-top:6px;box-sizing:border-box}@media(max-width:700px){.network-grid{grid-template-columns:minmax(0,1fr)}}

/* 2.5.5 mobile layout hardening */
@media(max-width:800px){
 html,body,.shell,.content,#main{max-width:100%;overflow-x:clip}
 #main>.page{max-width:100%;width:100%;min-width:0;padding:14px 12px!important}
 .settings-shell,.settings-content,.settings-content>.panel{min-width:0;max-width:100%;width:100%}
 .settings-tabs{display:flex!important;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;position:relative;gap:4px;padding:5px;white-space:nowrap}
 .settings-tabs button{flex:0 0 auto!important;min-width:max-content;font-size:12px;padding:9px 11px}
 .settings-content .panel{padding:14px 12px;overflow-wrap:anywhere}
 .settings-content .panel form{display:flex;flex-wrap:wrap;min-width:0;max-width:100%;width:100%}
 .settings-content .panel input,.settings-content .panel select{max-width:100%;min-width:0}
 #update-file{width:100%;max-width:100%;display:block;font-size:12px;overflow:hidden}
 #update-status{overflow-wrap:anywhere;white-space:normal}
 .hero{min-height:0!important;height:calc(100dvh - 112px);height:calc(100svh - 112px)}
 .hero-content{min-height:0;max-height:100%;padding-bottom:12px!important;gap:clamp(3px,1dvh,9px)!important}
 .hero .record-wrap{--vinyl-base:clamp(122px,min(47vw,25dvh),206px)!important;margin-bottom:4px!important}
 .hero-transport{margin-top:6px!important}
 .content>.player{flex:0 0 auto;min-height:68px!important;max-height:100px;overflow:hidden;position:relative!important}
 .bottom-nav{position:sticky;bottom:0;z-index:21}
 body:has(.hero:not(.hidden)) .content>.player{display:none!important}
 .hero-tabs{max-width:calc(100vw - 20px)}
}
@media(max-width:390px){.hero .record-wrap{--vinyl-base:clamp(110px,min(44vw,23dvh),175px)!important}}

/* 2.5.6 — approved design-lock settings workspace; existing forms and handlers retained */
.tm-settings-page{padding:clamp(12px,1.8vw,26px)!important;background:linear-gradient(135deg,#06111ce8,#0a1726f0)!important;min-height:100%;color:#eef3ff}
.tm-settings-title{margin:0!important;font-size:clamp(22px,2vw,30px)!important;font-weight:750}
.tm-settings-subtitle{font-size:12px!important;margin:3px 0 14px!important;color:#9cacbd}
.tm-settings-page .settings-shell{display:grid!important;grid-template-columns:minmax(180px,215px) minmax(0,1.3fr) minmax(240px,.85fr)!important;gap:12px!important;align-items:start;width:100%;max-width:none;min-width:0}
.tm-settings-page .settings-tabs{position:sticky!important;top:0;display:flex!important;flex-direction:column!important;gap:4px;min-width:0;width:100%;max-width:100%;overflow:visible!important;white-space:normal!important;padding:8px;background:#081727ed;border:1px solid #ffffff20;border-radius:14px}
.tm-settings-page .tm-settings-nav-item{display:flex!important;align-items:center;text-align:left;gap:11px;width:100%;min-width:0!important;padding:10px 9px!important;border-radius:9px;color:#cbd3e2;font-size:13px!important;line-height:1.25;white-space:normal}
.tm-settings-nav-item .tm-nav-icon{width:22px;flex-shrink:0;text-align:center;font-size:20px;color:#d6e0f2}
.tm-settings-nav-item strong{display:block;font-weight:650}.tm-settings-nav-item small{display:block;font-size:10px;color:#8192a8;margin-top:3px}
.tm-settings-page .tm-settings-nav-item.active{color:#fff!important;background:linear-gradient(95deg,#6533d1bb,#34216b99)!important;box-shadow:inset 3px 0 0 #ac79ff,0 0 16px #6831e634}.tm-settings-page .tm-settings-nav-item.active small{color:#d6cbf9}
.tm-settings-page .settings-content{min-width:0;max-width:100%;width:100%;background:#09192b;border:1px solid #ffffff20;border-radius:14px;padding:12px;box-sizing:border-box}
.tm-settings-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;padding-bottom:12px;border-bottom:1px solid #ffffff1a}
.tm-settings-heading h2{font-size:19px;margin:0;font-weight:720}.tm-settings-heading p{font-size:11px;color:#9aabba;margin:3px 0 0}
.tm-settings-page .tm-save-button{flex:none;background:linear-gradient(120deg,#5e28c8,#39208e)!important;border:1px solid #8b5cf670;color:#fff;border-radius:9px;padding:9px 13px;font-size:12px;font-weight:650;cursor:pointer}
.tm-settings-page .settings-content>.panel{margin:0!important;min-width:0;max-width:100%;box-shadow:none;background:#101f30;border:1px solid #ffffff18;border-radius:12px;padding:clamp(12px,1.4vw,20px)}
.tm-settings-page .settings-content>.panel[hidden]{display:none!important}.tm-settings-page .settings-content>.panel h2{font-size:15px}
.tm-settings-page .settings-content .panel input:not([type=checkbox]):not([type=file]),.tm-settings-page .settings-content .panel select,.tm-settings-page .settings-content .panel textarea{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.tm-settings-page .settings-content .panel form{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;max-width:100%}
.tm-settings-page .settings-content .panel form>label{flex:1 1 180px;min-width:0}
.tm-settings-aside{display:grid;gap:11px;min-width:0}.tm-aside-card{padding:13px;border-radius:12px;background:#0d1f30;border:1px solid #ffffff1b;min-width:0}.tm-aside-card h3{font-size:13px;margin:0 0 12px}.tm-aside-card p{font-size:12px}.tm-settings-aside .tm-online{color:#4bdd9b}
.tm-ui-preview{height:160px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:24px 8px 10px;background:linear-gradient(#06132254,#06132288),url('/tmusic/static/slides/02-ha-long.webp') center/cover;border-radius:9px;text-align:center;box-sizing:border-box}
.tm-ui-preview strong{font-size:clamp(16px,1.8vw,25px);color:#f2cc68;letter-spacing:1px;text-shadow:0 1px 5px #000}
.tm-ui-preview small{font-size:8px;letter-spacing:1px}.tm-preview-tabs{display:flex;margin-top:13px;background:#0c1930ca;padding:7px 9px;border-radius:22px;gap:10px;font-size:9px;white-space:nowrap;max-width:100%}.tm-preview-tabs span:first-child{color:#e3c2ff}
.tm-aside-card>button{display:block;width:100%;text-align:left;padding:10px 11px;border:1px solid #ffffff24;border-radius:9px;margin-top:6px;color:#e1e6ff;background:#273655;font-size:12px;cursor:pointer}
@media(max-width:1200px){.tm-settings-page .settings-shell{grid-template-columns:190px minmax(0,1fr)!important}.tm-settings-aside{grid-column:2;grid-template-columns:repeat(3,minmax(0,1fr))}.tm-ui-preview{height:105px;padding:10px 4px}.tm-preview-tabs{gap:4px;font-size:7px}}
@media(max-width:800px){.tm-settings-page{padding:12px 10px 115px!important}.tm-settings-page .settings-shell{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}.tm-settings-page .settings-tabs{position:relative!important;top:auto;display:flex!important;flex-direction:row!important;overflow-x:auto!important;overscroll-behavior-x:contain;scrollbar-width:thin;white-space:nowrap!important;padding:4px!important;border-radius:12px}.tm-settings-page .tm-settings-nav-item{flex:0 0 auto!important;width:auto!important;min-width:max-content!important;padding:10px 12px!important;border-radius:9px;gap:6px}.tm-settings-nav-item small{display:none!important}.tm-settings-nav-item strong{font-size:12px;white-space:nowrap}.tm-settings-nav-item .tm-nav-icon{width:auto;font-size:15px}.tm-settings-page .settings-content{padding:10px}.tm-settings-page .settings-content>.panel{padding:12px;overflow-wrap:anywhere}.tm-settings-page .settings-content .panel form{display:flex;flex-direction:column;align-items:stretch}.tm-settings-page .settings-content .panel form>label{flex:auto}.tm-settings-heading h2{font-size:16px}.tm-settings-aside{grid-column:auto;grid-template-columns:minmax(0,1fr)}.tm-settings-aside .tm-aside-card:first-child{display:none}.tm-settings-page .tm-save-button{padding:9px;font-size:11px}.tm-settings-page #update-file{width:100%;max-width:100%}}

/* 2.5.7: coherent settings structure and narrow viewport overflow protection */
.tm-settings-page,.tm-settings-page *{box-sizing:border-box}
.tm-settings-page{width:100%;max-width:100%;min-width:0;overflow-x:clip}
.tm-settings-page .settings-shell,.tm-settings-page .settings-content,.tm-settings-page .settings-content>.panel{min-width:0;max-width:100%}
.tm-settings-page .settings-content input:not([type=checkbox]),.tm-settings-page .settings-content select,.tm-settings-page .settings-content textarea{min-width:0;max-width:100%}
.tm-settings-page .settings-content pre{white-space:pre-wrap;overflow-wrap:anywhere}
.tm-settings-page .settings-content [hidden]{display:none!important}
.tm-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.tm-status-grid>div{padding:15px;border:1px solid #ffffff24;border-radius:13px;background:#ffffff09;min-width:0}
.tm-status-grid small{display:block;color:#b2acc7;font-size:11px;margin-bottom:9px}
.tm-status-grid strong{display:block;overflow-wrap:anywhere;font-size:13px}
.tm-settings-page .tm-settings-nav-item:focus-visible,.tm-save-button:focus-visible{outline:2px solid #ae8bff;outline-offset:2px}
@media(max-width:800px){.tm-status-grid{grid-template-columns:1fr}.tm-settings-page .settings-tabs{max-width:100%;min-width:0}.tm-settings-page .settings-shell{width:100%;max-width:100%}.tm-settings-page .tm-settings-heading{min-width:0;flex-wrap:wrap}.tm-settings-page .settings-content form>*{min-width:0;max-width:100%}}

/* T Music 2.5.7 source patch: search is list-only; video belongs to Now Playing */
.youtube-page .youtube-workspace,.youtube-page .youtube-workspace.results-collapsed{display:block!important;grid-template-columns:none!important;max-width:100%!important}
.youtube-page .youtube-results-pane{max-height:calc(100dvh - 260px);overflow-y:auto}
.youtube-page .ytresults{max-height:none!important}
.tm-view-toggle{display:flex;gap:7px;justify-content:center;margin:3px auto 10px;position:relative;z-index:3}
.tm-view-toggle button{font-size:13px;color:#e8e1d4;border:1px solid #ffffff4b;border-radius:8px;padding:8px 14px;background:#0d1520c9}
.tm-view-toggle button.active{border-color:#f4bd4e;background:#f4bd4e29;color:#f4bd4e}
.tm-hero-video-slot:not([hidden]){display:block;width:min(75vw,1000px);aspect-ratio:16/9;max-height:min(52dvh,600px);margin:0 auto 12px;background:#0a0b10;border:1px solid #f4bd4e55;border-radius:12px;overflow:hidden}
.record-wrap[hidden],.tm-hero-video-slot[hidden]{display:none!important}
#tmusic-fullscreen{font-size:23px!important;min-width:36px;min-height:36px;border-radius:7px;border:1px solid #ffffff33}
#tmusic-fullscreen:hover{color:#f4bd4e;border-color:#f4bd4e}
@media(max-width:800px){.tm-hero-video-slot:not([hidden]){width:96%;max-height:40dvh}}

/* Device management - 2.5.8 */
.tm-devices .tm-device{margin:12px 0;padding:14px}.tm-devices .tm-device button{margin:6px 6px 0 0}.tm-devices .tm-danger{border:1px solid #a93b56;color:#ff9db5;background:transparent}.tm-pair-guide p{line-height:1.65}.tm-pair-guide code{overflow-wrap:anywhere}

.tm-connect-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px;border:1px solid #5557;border-radius:12px;margin:10px 0}.tm-connect-row strong{min-width:150px}.tm-connect-row.selected{outline:2px solid #c9a767}.tm-connect-row button{padding:9px 12px}

/* T Music 2.5.9 7-inch kiosk: 3 primary tabs + transport toolbar */
@media (max-width: 1024px) {
 .sidebar{position:fixed!important;left:0;top:0;bottom:0;height:100dvh;width:min(270px,80vw);z-index:1005;transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 18px 55px #0009}
 .sidebar.open{transform:translateX(0)}
 .content{margin-left:0!important;width:100%!important;min-width:0}
 #menu{display:inline-flex!important;align-items:center;justify-content:center;min-width:38px;min-height:38px}
 .hero-tabs{display:flex!important;max-width:100%;justify-content:space-around}
 .bottom-nav{display:none!important}
 .top-identity{display:none!important}
 .hero-actions{display:none!important}
 .player{position:relative;z-index:2}
}
.tm-connect-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;border:1px solid #ffffff30;padding:12px;border-radius:12px;margin:8px 0}

.tm-network-live{padding:10px 12px;border-radius:10px;border:1px solid #4b6984;background:#152537;color:#d6e6f4;line-height:1.5}

/* T Music 2.6.x network audit comparison (read-only) */
#tm-net-audit-report{display:grid;gap:7px;margin-top:12px}
.tm-config-check{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center;border:1px solid currentColor;padding:10px;border-radius:9px}
.tm-config-check small{overflow-wrap:anywhere}
.tm-config-ok{color:#40d9a0;background:rgba(42,150,105,.1)}
.tm-config-mismatch{color:#ff9a9a;background:rgba(180,45,45,.1)}
.tm-config-unknown{color:#f2ce79;background:rgba(182,137,44,.08)}

/* 2.6.2: fullscreen means the video itself, not the app window. */
#tmusic-video-dock:fullscreen, #tmusic-video-dock:-webkit-full-screen{
 position:fixed!important;inset:0!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
 width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;
 margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
 z-index:2147483647!important;aspect-ratio:auto!important;display:flex!important;
 flex-direction:column!important;background:#000!important;transform:none!important;box-shadow:none!important;
}
#tmusic-video-dock:fullscreen .video-dock-head,#tmusic-video-dock:-webkit-full-screen .video-dock-head{height:0!important;min-height:0!important;overflow:hidden!important;padding:0!important;border:0!important}
#tmusic-video-dock:fullscreen #tmusic-video-mount,#tmusic-video-dock:-webkit-full-screen #tmusic-video-mount{position:relative!important;flex:1 1 auto!important;min-height:0!important;width:100%!important;height:100%!important}
#tmusic-video-dock:fullscreen iframe,#tmusic-video-dock:-webkit-full-screen iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;border:0!important}


/* TNVN player UI lock: playback controls belong to Đang phát, bottom toolbar is informational. */
.tm-hero-tools{display:flex;align-items:center;justify-content:center;gap:12px;z-index:5;position:relative}
.tm-hero-tools>button,.tm-volume-group>button{min-height:34px;border:1px solid #aa936e75;border-radius:12px;background:#111a2cd9;color:#e9d3a7;padding:7px 13px;cursor:pointer}
.tm-volume-group{position:relative}
.tm-volume-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:51;display:flex;gap:8px;align-items:center;padding:13px 15px;background:#101b2cf5;border:1px solid #e6ca8e80;border-radius:14px;box-shadow:0 12px 28px #0009;min-width:180px}
.tm-volume-popup[hidden]{display:none!important}
.tm-volume-popup input{width:125px;accent-color:#dbb56a}
.tm-volume-popup output{color:#ecd6aa;min-width:36px;font-size:12px}
.tm-info-toolbar .tm-cast{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.tm-toolbar-target{position:relative;flex:0 0 auto}
.tm-device-picker{position:absolute;z-index:200;bottom:calc(100% + 12px);right:0;display:grid;gap:5px;min-width:225px;max-width:min(84vw,320px);padding:10px;background:#111b2cf7;border:1px solid #ad945b9a;border-radius:12px;box-shadow:0 12px 30px #000a}
.tm-device-picker button{display:block;text-align:left;background:transparent;color:#f2e8cd;border:0;border-radius:7px;padding:11px;cursor:pointer}
.tm-device-picker button:hover{background:#33415b}
.tm-device-picker small{color:#9caabd;padding:8px}
.tm-app-fullscreen{width:38px;min-width:38px;border:1px solid #ad945b7d!important;border-radius:10px!important;background:#1b263b!important;color:#f5d99c!important;font-size:21px}
.tm-info-toolbar .track{flex:1 1 auto!important;max-width:none!important}
.tm-info-toolbar .track strong{font-size:13px}
.tm-info-toolbar .cover{flex:0 0 auto}
.hero-content .record-wrap{position:relative}
.tm-vinyl-seek{position:absolute;inset:-12px;border-radius:50%;z-index:5;cursor:crosshair;touch-action:none;outline-offset:6px;--tm-progress:0%;background:conic-gradient(from 210deg,#e8ba67 0 var(--tm-progress),#ffffff35 var(--tm-progress) 83.33%,transparent 83.33% 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),black calc(100% - 7px));mask:radial-gradient(farthest-side,transparent calc(100% - 8px),black calc(100% - 7px))}
.tm-vinyl-seek[aria-disabled="true"]{cursor:default;opacity:.5}
.tm-disc-info{display:flex!important;align-items:center;justify-content:center;flex-direction:column;gap:2px;text-align:center;position:relative;z-index:2;font-variant-numeric:tabular-nums;transform:none!important}
.tm-disc-info b{font-size:clamp(7px,1vw,10px);letter-spacing:.03em;color:#f6e5b9}
.tm-disc-info small{font-size:clamp(5px,.85vw,8px);white-space:nowrap;color:#fff5d8}
.record-label .tm-disc-info{width:100%;height:100%}
.hero-progress{display:none!important}
.tm-video-view .hero-progress{display:flex!important;align-items:center;justify-content:center;gap:9px;width:min(500px,95%);margin:6px auto}
.tm-video-view .hero-progress input{flex:1;min-width:80px;accent-color:#d2a968}
.tm-video-view .hero-progress [data-playback-time]{white-space:nowrap;color:#f6e7c3;font-size:12px}
#tmusic-fullscreen{display:none!important}
body:has(.hero:not(.hidden)) .content>.player.tm-info-toolbar{display:flex!important}
@media(max-width:800px){
 .content>.player.tm-info-toolbar{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:6px;min-height:52px!important;padding:6px 10px!important;overflow:visible!important;position:relative!important;z-index:15}
 .tm-info-toolbar .track{min-width:0;max-width:none!important}
 .tm-info-toolbar .track strong{font-size:11px}
 .tm-info-toolbar .track small{font-size:9px}
 .tm-info-toolbar .cover{width:28px!important;height:28px!important}
 .tm-info-toolbar .tm-cast{max-width:118px;font-size:10px;padding:6px}
 .tm-app-fullscreen{width:32px;min-width:32px;font-size:17px}
 .tm-vinyl-seek{inset:-10px}
 .tm-disc-info small{font-size:6px}
 .tm-hero-tools{gap:7px}
 .tm-hero-tools>button,.tm-volume-group>button{font-size:11px;padding:7px 9px}
 .tm-video-view .hero-progress{flex-wrap:wrap}
}


/* UI: a single track title lives in bottom toolbar; clear video timeline */
.tm-video-view .hero-content > h1[data-now-title],.tm-video-view .hero-content > p[data-now-channel],.tm-video-view .playback-notice{display:none!important}
.tm-video-view .video-dock-message{font-size:0!important;overflow:hidden;max-height:0!important;padding:0!important}
.tm-video-view .hero-progress{width:min(700px,96%)!important;background:#081225de!important;border:1px solid #d4aa6790;border-radius:12px;padding:8px 12px;min-height:46px}
.tm-video-view .hero-progress [data-playback-time]{font-size:15px!important;font-weight:750;color:#fff!important;text-shadow:0 1px 3px #000;min-width:100px;text-align:center}
.tm-video-view .hero-progress input{min-width:140px;cursor:pointer}
.tm-info-toolbar .track{min-width:0}
.tm-info-toolbar .track strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
@media(max-width:800px){.tm-video-view .hero-progress [data-playback-time]{font-size:12px!important}.tm-video-view .hero-progress{padding:5px 8px}}

/* 2026-10 visual consistency across Chromium/Linux and mobile */
.tm-icon{display:inline-block;flex:none;vertical-align:middle;stroke:currentColor;fill:none;overflow:visible;width:17px;height:17px}
.sidebar nav button{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.4;min-height:34px;text-align:left}
.sidebar nav button .tm-icon{width:15px;height:15px;opacity:.95}
header button .tm-icon,.tm-info-toolbar button .tm-icon{width:18px;height:18px}
.sidebar nav [hidden]{display:none!important}
.tm-settings-page h1,.tm-settings-heading h1{font-size:clamp(19px,1.45vw,24px)!important;line-height:1.2;letter-spacing:0}
.tm-settings-page .tm-settings-heading h2{font-size:16px!important;line-height:1.3}
.tm-settings-page .settings-content h2{font-size:14px!important;line-height:1.3}
.tm-settings-page .settings-shell{gap:12px!important}
.tm-settings-page .settings-content>.panel{padding:14px!important}
.tm-settings-page .settings-tabs .tm-settings-nav-item{padding:8px!important;min-height:43px;gap:8px}
.tm-settings-page .settings-tabs .tm-settings-nav-item strong{font-size:12px!important}
.tm-settings-page .settings-tabs .tm-settings-nav-item small{font-size:10px!important}
.tm-settings-page .settings-content p,.tm-settings-page .settings-content label{font-size:12px;line-height:1.45}
.tm-settings-page .settings-content input,.tm-settings-page .settings-content select{font-size:12px;min-height:35px}
.tm-devices .tm-selected-device-panel{border:1px solid #b5945180;background:#17263b;padding:14px;border-radius:12px;margin:12px 0 16px}
.tm-devices .tm-selected-device-panel strong{color:#e8c681;font-size:13px}
.tm-devices .tm-selected-device-panel p{margin:6px 0 0;font-size:12px}
body [hidden]{display:none!important}
@media(max-width:800px){.tm-settings-page .settings-shell{grid-template-columns:minmax(0,1fr)!important}.sidebar nav button{font-size:13px}.tm-settings-page .settings-content>.panel{padding:12px!important}}

/* Desktop player cleanup: one track title only in bottom toolbar. */
@media(min-width:801px){
 .hero-content > h1[data-now-title],.hero-content > p[data-now-channel],.hero-content > .playback-notice{display:none!important}
 .tm-transport-flanked{display:flex!important;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,16px);width:min(780px,98%);margin:10px auto!important;flex-wrap:nowrap}
 .tm-transport-flanked>.tm-hero-tools{display:contents!important}
 .tm-transport-flanked>.tm-hero-tools>#tm-video-fullscreen{order:-10;white-space:nowrap}
 .tm-transport-flanked>.tm-hero-tools>.tm-volume-group{order:10;position:relative}
 .tm-transport-flanked>.hero-transport{order:0;display:flex!important;align-items:center;justify-content:center;gap:clamp(6px,1vw,15px);margin:0!important;flex:0 1 auto;min-width:0}
 .hero-progress{display:flex!important;align-items:center;justify-content:center;gap:12px;margin:10px auto!important;width:min(720px,90%)!important;min-height:44px;padding:7px 12px;background:#07101dcc;border:1px solid #d4aa675c;border-radius:12px}
 .hero-progress [data-playback-time]{display:block!important;font-variant-numeric:tabular-nums;color:#f7ead4;font-size:15px;font-weight:700;white-space:nowrap;min-width:105px;text-shadow:0 1px 3px #000}
 .hero-progress input{flex:1;min-width:120px;accent-color:#d3a95e}
}
@media(max-width:800px){.tm-transport-flanked{display:flex;flex-direction:column;align-items:center;gap:5px}.tm-transport-flanked>.tm-hero-tools{order:2}.tm-transport-flanked>.hero-transport{order:1}}

/* 2.6.5 final cascade: fluid player, consistent icon metrics, low-cost Pi rendering */
:root{--tm-ui-icon:clamp(17px,1.15vw,21px);--tm-player-vinyl:min(42vw,52dvh,580px)}
.tm-icon,button>.tm-icon,nav button>.tm-icon,header button>.tm-icon{width:var(--tm-ui-icon)!important;height:var(--tm-ui-icon)!important;flex:0 0 var(--tm-ui-icon);vertical-align:middle;stroke-width:1.8}
.sidebar nav button{display:flex;align-items:center;gap:11px;min-height:40px;line-height:1.2}
.sidebar nav button .tm-icon{margin:0}
.hero-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
header>button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px}
.tm-weather{display:flex;align-items:center;gap:6px;flex:0 1 auto;padding:4px 8px;border:1px solid #ffffff2e;border-radius:9px;background:#091626ba;color:#f0e2c0;font-size:12px;white-space:nowrap;z-index:2;max-width:280px}
.tm-weather-icon{font-size:20px}.tm-weather select{font-size:11px!important;color:#eee;background:#111e30;border:1px solid #ffffff29;border-radius:5px;max-width:103px;padding:4px 3px}
@media(min-width:801px){
 .hero-content{width:100%!important;max-width:100%!important;min-height:calc(100dvh - 175px);padding:clamp(90px,13dvh,150px) 20px 25px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1dvh,14px)!important}
 .hero-content .record-wrap{--vinyl-base:var(--tm-player-vinyl)!important;width:calc(var(--tm-player-vinyl) * var(--vinyl-scale,1))!important;max-width:min(58dvh,600px)!important;height:auto!important;aspect-ratio:1;margin:0 auto 9px!important;flex:0 0 auto}
 .tm-hero-video-slot:not([hidden]){width:min(85%,calc(70dvh * 16 / 9),1280px)!important;max-width:1280px!important;max-height:65dvh!important;height:auto!important;aspect-ratio:16/9!important;margin:0 auto 10px!important}
 .hero-progress{width:min(980px,85%)!important}
 .tm-transport-flanked{width:min(970px,90%)!important}
 .hero-transport button{font-size:clamp(20px,1.55vw,28px)}
 .hero-transport .hero-play{width:clamp(45px,4vw,62px);height:clamp(45px,4vw,62px)}
 .tm-settings-page .settings-shell{max-width:1500px}
}
@media(min-width:801px) and (max-height:750px){.hero-content .record-wrap{--vinyl-base:min(30vw,43dvh)!important}.tm-hero-video-slot:not([hidden]){width:min(82%,calc(52dvh * 16 / 9),1100px)!important}.hero-content{padding-top:90px!important;gap:6px!important}}
@media(max-width:800px){.tm-weather{position:absolute;top:56px;right:12px;font-size:10px;max-width:210px;padding:3px 5px}.tm-weather select{max-width:80px;font-size:10px!important}.tm-weather-icon{font-size:14px}.hero-content .record-wrap{--vinyl-base:min(67vw,33dvh)!important;width:calc(var(--vinyl-base) * var(--vinyl-scale,1))!important;max-width:100%!important}.tm-hero-video-slot:not([hidden]){width:min(95vw,calc(42dvh * 16 / 9))!important;max-height:42dvh!important;aspect-ratio:16/9!important}.sidebar nav button{min-height:42px}}
@media(max-width:440px){.tm-weather{top:57px;right:5px;max-width:165px}.tm-weather select{max-width:60px}.hero-content .record-wrap{--vinyl-base:min(64vw,32dvh)!important}}

/* 2.6.5 nav single-layer correction: one tab row only. */
.content > .hero-tabs { isolation:isolate; background:#09172be6!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:0 8px 22px #02071466!important; border:1px solid #ffffff34!important; }
.content > .hero-tabs::before,.content > .hero-tabs::after { content:none!important; display:none!important; }
.content > .hero-tabs[hidden],#main .hero-tabs {display:none!important;}
.content > .hero-tabs > button {position:relative;z-index:1;background:transparent;box-shadow:none;transform:none;}
.content > .hero-tabs > button.active { background:linear-gradient(110deg,#8252ed,#572bc4)!important;box-shadow:0 1px 12px #8252ed55!important;}

/* 2.6.6 desktop/mobile settings design-lock refinements */
.tm-settings-page{font-size:13px!important}
.tm-settings-page .settings-shell{grid-template-columns:205px minmax(400px,1fr) 270px!important;gap:12px!important;max-width:1530px!important;margin:0 auto}
.tm-settings-page h1.tm-settings-title{font-size:20px!important;line-height:1.25!important;margin:0 0 2px!important}
.tm-settings-page .tm-settings-subtitle{font-size:11px!important;margin:0 0 12px!important;opacity:.78}
.tm-settings-page .settings-tabs{padding:6px!important;border-radius:12px!important;align-self:start}
.tm-settings-page .tm-settings-nav-item{min-height:45px!important;padding:7px 9px!important;gap:9px!important;border-radius:9px!important}
.tm-settings-page .tm-settings-nav-item strong{font-size:12px!important;line-height:1.25!important}
.tm-settings-page .tm-settings-nav-item small{font-size:10px!important;line-height:1.2!important}
.tm-settings-page .tm-nav-icon{display:inline-flex!important;width:17px!important;height:17px!important;align-items:center;justify-content:center;font-size:14px!important;line-height:1!important;flex-shrink:0}
.tm-settings-page .settings-content{min-width:0!important}
.tm-settings-page .settings-content>.panel{padding:14px 16px!important;border-radius:12px!important}
.tm-settings-page .settings-content h2{font-size:15px!important;line-height:1.35!important;margin:0 0 8px!important}
.tm-settings-page .settings-content p,.tm-settings-page .settings-content label{font-size:12px!important;line-height:1.5!important}
.tm-settings-page .settings-content button{min-height:34px!important;font-size:12px!important}
.tm-settings-page .tm-settings-aside{min-width:0!important}
.tm-settings-page .tm-settings-aside h3{font-size:12px!important}
.tm-settings-page .tm-settings-heading{padding:5px 0 10px!important;margin-bottom:8px!important;min-height:0!important}
.tm-settings-page .tm-settings-heading h2{font-size:16px!important}
.tm-settings-page #update-key-status{overflow-wrap:anywhere}
@media(max-width:1199px){.tm-settings-page .settings-shell{grid-template-columns:185px minmax(0,1fr)!important}.tm-settings-page .tm-settings-aside{display:none!important}}
@media(max-width:720px){.tm-settings-page .settings-shell{display:block!important}.tm-settings-page .settings-tabs{display:flex!important;overflow-x:auto!important;gap:4px!important;margin-bottom:9px!important}.tm-settings-page .tm-settings-nav-item{min-width:125px!important;flex:0 0 auto!important}.tm-settings-page .settings-content>.panel{padding:11px!important}.tm-settings-page .tm-settings-heading{align-items:center!important}}

/* 2.6.7: transparent seek controls, restrained toolbar geometry. */
.hero-progress,.tm-video-view .hero-progress,.hero .hero-progress{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:4px 0!important;backdrop-filter:none!important;}
.hero-progress [data-playback-time]{background:transparent!important;border:0!important;box-shadow:none!important;color:#f9e5c0!important;text-shadow:0 1px 3px #000b;}
.player.tm-info-toolbar,.content>.player.tm-info-toolbar{border-radius:5px!important;}


/* 2.6.8: responsive Pi kiosk; never allow player to overflow short displays */
:root{--tm-player-safe-height:calc(100dvh - 175px)}
.content{min-height:0}
.hero{min-height:0!important;height:var(--tm-player-safe-height);max-height:none;overflow:hidden;display:flex!important;flex-direction:column}
.hero-content{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(3px,0.9dvh,12px);padding:clamp(6px,1.2dvh,16px) 12px!important;overflow:hidden}
.hero-content .record-wrap{--vinyl-base:min(46vw,calc((100dvh - 255px)*.68),520px)!important;width:clamp(90px,var(--vinyl-base),520px)!important;height:auto!important;max-height:min(48dvh,calc(100dvh - 270px))!important;aspect-ratio:1;flex:0 1 auto;margin:0 auto!important}
.hero-content .record-wrap .record{height:100%;width:100%}
.hero .hero-progress{flex:0 0 auto!important;min-height:0!important;margin:clamp(3px,0.8dvh,8px) auto!important}
.hero .tm-transport-flanked{flex:0 0 auto!important;margin:clamp(2px,.6dvh,8px) auto!important}
.hero-transport{gap:clamp(7px,1.3vw,20px)!important}
.hero-play{width:clamp(35px,4.5dvh,56px)!important;height:clamp(35px,4.5dvh,56px)!important}
.hero .vinyl-control{flex:0 0 auto}
.tm-info-toolbar{flex:0 0 auto}
.tm-device-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 14px}
.tm-device-summary-item{display:flex;flex-direction:column;min-width:0;padding:12px 14px;border:1px solid #d8b06a4f;background:#1b2a3b;border-radius:7px}
.tm-device-summary-item small{color:#b1c0cf;font-size:11px;margin-bottom:5px}
.tm-device-summary-item strong{font-size:14px;color:#f2d79a;overflow-wrap:anywhere}
.tm-device-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;margin-top:12px}
.tm-device-card{background:#101d2d;border:1px solid #3a4d65;border-radius:8px;padding:15px;min-width:0}
.tm-device-card-top{display:flex;align-items:center;gap:10px}
.tm-device-card-name{display:flex;flex-direction:column;min-width:0;gap:4px}
.tm-device-card-name strong{font-size:15px;overflow-wrap:anywhere}
.tm-device-card-name small{color:#a5b5c9;font-size:12px}
.tm-device-kind-icon{font-size:25px;color:#e3bf76}
.tm-device-badges{display:flex;gap:5px;flex-wrap:wrap;margin:11px 0}
.tm-device-badge{font-size:10px;border-radius:4px;padding:4px 7px;background:#273950;color:#d1deeb}
.tm-device-badge.online{color:#7ae0a3}.tm-device-badge.offline{color:#ffb8b8}
.tm-device-badge.selected{background:#53408a;color:#f5ebff}.tm-device-badge.playing{background:#1e6848;color:#ddffdf}
.tm-device-now{font-size:12px;color:#e0e7ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-device-actions{display:flex;gap:8px;flex-wrap:wrap}
.tm-device-actions button{padding:8px 11px!important;font-size:12px!important;margin:0!important}
.tm-device-alert{color:#ffc773}
@media (min-width:801px) and (max-height:850px){
 :root{--tm-player-safe-height:calc(100dvh - 135px)}
 .hero-tabs{flex:0 0 auto}
 .hero-content .record-wrap{--vinyl-base:min(40vw,calc((100dvh - 200px)*.67),460px)!important}
 .hero-content .hero-progress{padding:2px 4px!important}
 .hero .hero-transport{margin:0!important}
}
@media (max-height:650px){
 :root{--tm-player-safe-height:calc(100dvh - 118px)}
 .hero-content .record-wrap{--vinyl-base:min(35vw,calc((100dvh - 160px)*.62),360px)!important}
 .hero .vinyl-control{display:none!important}
 .hero .hero-progress{min-height:0!important}
 .hero-content{gap:2px!important}
}
@media (max-width:800px){
 :root{--tm-player-safe-height:calc(100dvh - 152px)}
 .hero-content .record-wrap{--vinyl-base:min(76vw,calc((100dvh - 260px)*.65),380px)!important;max-height:42dvh!important}
 .tm-device-summary{grid-template-columns:1fr}
 .tm-device-cards{grid-template-columns:1fr}
}
.tm-music-video-dock.in-page,.tmusic-video-dock.in-page{
 width:min(calc(100% - 24px),calc((100dvh - 275px)*16/9),1160px)!important;
 max-width:100%!important;
 max-height:calc(100dvh - 275px)!important;
 aspect-ratio:16/9!important;
 height:auto!important;
 margin-inline:auto!important
}
.tm-music-video-dock.floating,.tmusic-video-dock.floating{
 width:min(28vw,calc((100dvh - 140px)*.46),380px)!important;
 max-height:min(32dvh,230px)!important
}
@media(max-height:620px){
 .tmusic-video-dock.in-page{width:min(calc(100% - 16px),calc((100dvh - 160px)*16/9))!important;max-height:calc(100dvh - 160px)!important}
 .tmusic-video-dock.floating{width:min(25vw,260px)!important;max-height:26dvh!important;bottom:68px!important}
}

/* Remote theater fallback: fullscreen browser API needs local user activation. */
.tm-remote-theater{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:9999!important;background:#05070b!important;border:0!important;border-radius:0!important;}
.tm-remote-theater #tmusic-video-mount{width:100%!important;height:100%!important;}

/* FIX 2.6.7: use a single measured video viewport; do not override JS positioning. */
.tmusic-video-dock.visible.in-page:not(:fullscreen):not(.tm-remote-theater){
  box-sizing:border-box!important;position:fixed!important;
  aspect-ratio:auto!important;width:var(--tm-dock-w,640px)!important;
  height:var(--tm-dock-h,360px)!important;
  left:var(--tm-dock-x,0px)!important;top:var(--tm-dock-y,0px)!important;
  right:auto!important;bottom:auto!important;
  max-width:none!important;max-height:none!important;
  margin:0!important;transform:none!important;border-radius:8px!important;
}
.tmusic-video-dock.in-page .video-dock-head{display:none!important}
.tmusic-video-dock.in-page #tmusic-video-mount{flex:1 1 auto!important;height:100%!important;min-height:0!important;min-width:0!important;overflow:hidden!important}
.tmusic-video-dock.in-page #tmusic-video-mount iframe{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important}
.tmusic-video-dock:not(.visible){display:none!important}
.tmusic-video-dock.floating:not(.tm-remote-theater){max-width:calc(100vw - 24px)!important}

/* 2.6.7 UI repair: remove empty strip caused by fixed-size hero inside flex main. */
@media(min-width:801px){
 .content{display:flex!important;flex-direction:column!important;height:100dvh!important;min-height:0!important}
 .content>#main{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}
 .content>#main>.hero{flex:1 1 auto!important;height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}
 .hero-content{min-height:0!important;height:100%!important;max-height:100%!important;flex:1 1 auto!important;justify-content:center!important;overflow:hidden!important}
 .content>.player.tm-info-toolbar{flex:0 0 auto!important;margin:0!important}
 .hero-content .tm-hero-video-slot:not([hidden]){flex:0 1 auto!important;min-height:0!important;max-height:min(54dvh,calc(100dvh - 260px))!important;aspect-ratio:16/9!important}
}
/* The video dock alone owns the frame: never draw a second black border/backdrop. */
.tmusic-video-dock.visible.in-page:not(:fullscreen):not(.tm-remote-theater){padding:0!important;box-shadow:none!important;border:1px solid #ad905c85!important;background:#060910!important;overflow:hidden!important}
.tmusic-video-dock.visible.in-page #tmusic-video-mount{height:100%!important;flex:1!important;min-height:0!important}
.tm-device-picker .tm-pick-heading{display:block;padding:8px 11px 4px;color:#b9c6d8;font-size:11px;border-top:1px solid #ffffff20;margin-top:4px}
.tm-device-picker button.is-selected{background:#4a317c!important;color:#fff2cf!important}
.tm-device-picker button:disabled{opacity:.45;cursor:not-allowed}

/* Cloud Connect control in Network settings */
.tm-cloud-settings{padding:14px;margin-bottom:18px;border:1px solid #6b7d9340;border-radius:8px;background:#122237}
.tm-cloud-settings h2{font-size:17px;margin:0 0 8px}
.tm-cloud-fields{display:flex;align-items:end;flex-wrap:wrap;gap:8px}
.tm-cloud-fields label{flex:1 1 250px;font-size:12px}
.tm-cloud-fields input{display:block;width:100%;min-width:0;margin-top:7px;padding:9px;border:1px solid #4e6075;border-radius:5px;background:#081727;color:#fff}
.tm-cloud-fields button{border-radius:5px;padding:10px 12px}.tm-cloud-result{font-size:12px;margin:10px 0;color:#e8c47d;overflow-wrap:anywhere}