.dl-off{display:none!important}
:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#152c38;background:#f3f6f7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,.file-button{cursor:pointer;border:1px solid #cbd8dd;border-radius:9px;background:white;padding:10px 15px;color:#183742;font-weight:600}button:hover{background:#e8f2f0}button:disabled{opacity:.5;cursor:wait}.primary,.file-button{background:#087d6a;color:white;border-color:#087d6a}.primary:hover{background:#076857}input,select{width:100%;margin-top:7px;padding:11px;border:1px solid #c5d3d9;border-radius:8px;background:white}label{display:block;font-size:14px;font-weight:600;margin:15px 0}.muted{color:#617782;line-height:1.6;font-size:14px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.7px;color:#67858d}h1{font-size:31px;letter-spacing:-1px;margin:7px 0}h2{font-size:19px;letter-spacing:-.4px;margin:0 0 8px}small{display:block;color:#69828b;font-size:12px;margin-top:8px}.brandmark{background:#0f8671;color:white;border-radius:12px;padding:12px;font-size:17px;font-weight:800;display:inline-block}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 25% 30%,#d7eae4,transparent 65%),#edf3f4}.login form{width:min(430px,92vw);padding:38px;border:1px solid #d8e3e4;border-radius:20px;background:white;box-shadow:0 25px 80px #183b4210}.login h1{font-size:38px;line-height:1.12}.login button{width:100%;margin-top:10px}#login-error{color:#aa3838;font-size:14px}aside{position:fixed;inset:0 auto 0 0;width:236px;background:#102b34;padding:29px 20px;color:#f1f8f7;display:flex;flex-direction:column}.logo{display:flex;gap:12px;align-items:center;font-size:19px;font-weight:650}.logo small{font-size:9px;letter-spacing:1.5px;color:#8fafb4;margin-top:5px}nav{margin-top:44px;display:grid;gap:8px}nav button{background:transparent;border:none;color:#a8c0c6;text-align:left;padding:13px 15px}nav button:hover,nav .selected{background:#1e424b;color:white}.sidebar-footer{margin-top:auto;font-size:13px;line-height:1.6}.sidebar-footer button{margin-top:20px;background:transparent;color:#c9dbdf;border-color:#34515a}main{margin-left:236px;padding:36px 42px;max-width:1700px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.header-status{font-size:12px;color:#577780;display:flex;align-items:center;gap:8px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#139577}.badge{display:inline-block;background:#e5efed;color:#276154;padding:5px 9px;border-radius:6px;font-size:12px;font-weight:600}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stats article,.panel,.screen-card{background:white;border:1px solid #dce5e8;border-radius:13px;padding:23px}.stats p{font-size:13px;color:#607a83;margin:0 0 14px}.stats strong{font-size:34px;letter-spacing:-1.5px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:30px 0 17px}.device-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}.screen-card h3{margin:12px 0;font-size:17px}.screen-card p{font-size:13px;line-height:1.6;margin:6px 0;overflow-wrap:anywhere}.offline{background:#f1e9dd;color:#8b642e}.revoked{background:#f9e4e3;color:#9b4440}.error-text{color:#ab3a3a}.licence-ok{background:#e0f0e9;color:#0b5e4f;border-radius:9px;padding:13px 15px;font-weight:650;margin:12px 0;line-height:1.5}.info-note{padding:18px 0;font-size:12px;color:#71868e;line-height:1.6}.empty{padding:40px;text-align:center;color:#6c818b;border:1px dashed #c7d7dc;border-radius:12px;background:#f9fbfb}.panel{margin-bottom:20px}.pairing-row,.media-row,.device-row{background:white;border:1px solid #dde6e9;border-radius:11px;padding:17px 20px;display:flex;gap:20px;align-items:center;justify-content:space-between;margin:10px 0}.pairing-row strong{font-family:Consolas,monospace;letter-spacing:2px}.device-details{flex:1;min-width:200px}.device-details p{margin:7px 0;font-size:13px;line-height:1.55}.device-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.device-controls select{width:175px;margin:0}.danger{color:#a43e3e}.upload-panel{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}.file-button input{display:none}.media-row strong{font-size:14px;overflow-wrap:anywhere}.two-column{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}.media-choice{display:flex;align-items:center;gap:10px;font-size:13px;padding:10px;border-bottom:1px solid #edf1f2}.media-choice input{width:18px;margin:0}.media-choice label{margin:0;font-weight:400;overflow-wrap:anywhere}.group-row{padding:12px 0;border-bottom:1px solid #e5ecee;font-size:14px}#notice{padding:13px 17px;background:#e0f0e9;border-radius:9px;margin-bottom:20px;font-size:14px}#notice.error{background:#fae8e5;color:#9c4138}footer{margin-top:36px;padding-top:20px;border-top:1px solid #dce5e8;font-size:11px;color:#80939a;display:flex;justify-content:space-between}#upload-status{font-size:13px;width:100%}[hidden]{display:none!important}@media(max-width:1000px){main{padding:25px; margin-left:200px}aside{width:200px}.two-column{grid-template-columns:1fr}.device-row{align-items:flex-start;flex-direction:column}}@media(max-width:680px){aside{position:relative;width:auto;padding:18px}nav{display:flex;flex-wrap:wrap;margin-top:18px;gap:3px}nav button{font-size:12px;padding:9px}.sidebar-footer{display:none}main{margin:0;padding:20px}.stats{grid-template-columns:1fr}header{align-items:flex-start;gap:20px}.header-status{max-width:140px;flex-wrap:wrap}.section-heading{gap:15px}.section-heading button{font-size:12px}footer{gap:15px}}
.banner{padding:13px 17px;background:#fbe9d0;color:#7a4b12;border-radius:9px;margin-bottom:20px;font-size:14px}textarea{width:100%;margin-top:7px;padding:11px;border:1px solid #c5d3d9;border-radius:8px;font:12px Consolas,monospace}code{font-family:Consolas,monospace;font-size:12px}.wrap{overflow-wrap:anywhere;display:block}.three-column{display:grid;grid-template-columns:1fr 1.4fr 1.2fr;gap:14px}label.inline{display:flex;gap:8px;align-items:center}label.inline input{width:auto;margin:0}.audit-row{font-size:13px;padding:6px 0;border-bottom:1px solid #edf1f2}@media(max-width:1000px){.three-column{grid-template-columns:1fr}}
.inline-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.short-id{font:600 12px Consolas,monospace;color:#3d7f73;margin-left:6px}.device-row{flex-wrap:wrap}.device-settings{flex-basis:100%;display:grid;grid-template-columns:auto 1fr auto;gap:8px 10px;align-items:center;border-top:1px solid #e5ecee;padding-top:12px}.device-settings label{margin:0;font-size:13px}.device-settings input,.device-settings select{margin:0}.device-settings input[hidden]{display:none}@media(max-width:680px){.device-settings{grid-template-columns:1fr}}
.source-pick{display:flex;gap:8px;flex-wrap:wrap}.source-pick select{width:200px}.source-pick input{flex:1;min-width:240px}
.mono-wrap{font:12px Consolas,monospace;overflow-wrap:anywhere;color:#5d7680}
.user-chip{display:inline-block;margin-left:10px;background:#102b34;color:#fff;padding:6px 11px;border-radius:16px;font-size:12px;font-weight:600}.playlist-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:15px;margin-bottom:22px}.playlist-card{background:white;border:1px solid #dce5e8;border-radius:13px;padding:20px;transition:box-shadow .3s,border-color .3s}.playlist-card.just-saved{border-color:#087d6a;box-shadow:0 0 0 3px #087d6a33}.pl-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.pl-head h3{margin:0;font-size:17px;overflow-wrap:anywhere}.pl-items{margin:12px 0;padding-left:20px;font-size:13px;line-height:1.7;overflow-wrap:anywhere}.editor{border:2px solid #087d6a}.pick-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}.pick-head button{padding:6px 11px;font-size:13px}.pick-list{max-height:340px;overflow:auto;border:1px solid #e5ecee;border-radius:9px}
.inline-notice{margin-top:14px;padding:12px 15px;border-radius:9px;background:#e0f0e9;color:#0b5e4f;font-size:14px;font-weight:600;line-height:1.5;animation:pop .25s ease-out}.inline-notice.error{background:#fae8e5;color:#9c4138}@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.inline-upload{display:inline-block;margin:6px 0 4px}
.xfer{margin:8px 0;font-size:13px}.xfer progress{display:block;width:100%;max-width:420px;height:10px;margin-top:5px;accent-color:#087d6a}.pending{color:#8b642e}.ok-text{color:#0b5e4f}
.attention{box-shadow:0 0 0 3px #e7b54a}.group-row select{margin-top:6px;max-width:320px}.group-row p{margin:4px 0}
.brand-tile{background:#030405;border-radius:14px;padding:12px 16px;display:inline-block}.brand-tile img{height:46px;display:block}.side-logo{height:34px;width:auto;display:block}
/* ---- X24 dashboard ---- */
.small{font-size:12px}.dash-welcome{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}.dash-welcome h2{font-size:24px;margin:0}.dash-welcome p{margin:4px 0 0}.dash-actions{display:flex;gap:10px}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:20px}.kpi{position:relative;overflow:hidden;background:white;border:1px solid #dce5e8;border-radius:14px;padding:16px 16px 14px}.kpi strong{display:block;font-size:30px;letter-spacing:-1px;margin-top:10px}.kpi p{margin:2px 0 0;font-size:13px;font-weight:600;color:#3d5862}.kpi small{margin-top:4px}
.kpi-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;font-size:16px}.kpi::after{content:"";position:absolute;right:-30px;bottom:-40px;width:120px;height:90px;border-radius:50%;opacity:.12}
.k-total .kpi-icon{background:#e3f1ff}.k-total .kpi-icon::before{content:"\25A3";color:#2f6fd6}.k-total::after{background:#2f6fd6}
.k-online .kpi-icon{background:#dff5ec}.k-online .kpi-icon::before{content:"\25CF";color:#14a37f}.k-online::after{background:#14a37f}
.k-playing .kpi-icon{background:#e5f6f1}.k-playing .kpi-icon::before{content:"\25B6";color:#087d6a}.k-playing::after{background:#087d6a}
.k-offline .kpi-icon{background:#fde8e8}.k-offline .kpi-icon::before{content:"\23FB";color:#d64545}.k-offline::after{background:#d64545}
.k-sched .kpi-icon{background:#fff3dc}.k-sched .kpi-icon::before{content:"\25F7";color:#d48a06}.k-sched::after{background:#f2b134}
.k-media .kpi-icon{background:#efe9fb}.k-media .kpi-icon::before{content:"\25A4";color:#7a55c7}.k-media::after{background:#7a55c7}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.dash-side .panel{margin-bottom:20px}.section-heading.tight{margin:0 0 14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:6px 12px;border-radius:999px;font-size:12px;background:#f2f6f7}.chip.on{background:#102b34;color:white;border-color:#102b34}button.link{border:none;background:none;color:#087d6a;padding:4px}
.screen-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.screen-tile{border:1px solid #dde6e9;border-radius:14px;overflow:hidden;background:#fbfdfd;display:flex;flex-direction:column}.screen-tile.s-offline .frame{filter:grayscale(1) brightness(.55)}
.frame{position:relative;background:#05080a;height:168px;display:grid;place-items:center;overflow:hidden}
.mini-player{width:100%;height:100%;display:grid;place-items:center}.mini-player img,.mini-player video{width:100%;height:100%;object-fit:cover;display:block}
.mini-player.vertical{width:95px;height:168px;background:#000;box-shadow:0 0 0 1px #1d2a30}
.mini-empty{display:grid;place-items:center;gap:6px;color:#8aa3ab;text-align:center;padding:10px}.mini-empty .big{font-size:30px;color:#4f6b74}
.pill{position:absolute;top:9px;left:9px;font-size:11px;font-weight:700;padding:4px 9px 4px 20px;border-radius:999px;background:#ffffffe6;color:#183742}.pill::before{content:"";position:absolute;left:8px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:currentColor}
.p-playing{color:#087d6a}.p-playing::before{animation:pulse 1.6s infinite}.p-paused,.p-idle{color:#b07607}.p-offline,.p-revoked{color:#c53c3c}.p-downloading{color:#2f6fd6}.p-blocked{color:#7a55c7}
@keyframes pulse{0%{box-shadow:0 0 0 0 #14a37f88}70%{box-shadow:0 0 0 7px #14a37f00}100%{box-shadow:0 0 0 0 #14a37f00}}
.caption{position:absolute;left:0;right:0;bottom:0;padding:18px 10px 7px;font-size:11px;color:white;background:linear-gradient(transparent,#000c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption:empty{display:none}
.tile-body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:6px}.tile-body p{margin:0;font-size:13px}.tile-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.tile-title h3{margin:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.short-id{font-size:11px;color:#7d949b;font-family:Consolas,monospace}
.on-time{color:#0b7d61;font-weight:600}.off-time{color:#b23b3b;font-weight:600}.uptime small{margin:0 0 4px}
.timeline{position:relative;height:7px;border-radius:4px;background:#f0d9d9;overflow:hidden}.timeline span{position:absolute;top:0;bottom:0;background:#19a982}
.tile-actions{display:flex;gap:6px;margin-top:4px}.tile-actions button{padding:6px 10px;font-size:12px;flex:1}.tile-body progress{width:100%;height:6px}
.donut-wrap{display:flex;align-items:center;gap:18px}.donut{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;flex:none}.donut-hole{width:80px;height:80px;border-radius:50%;background:white;display:grid;place-items:center;align-content:center;text-align:center}.donut-hole strong{font-size:24px}.donut-hole small{margin:0}
.legend{list-style:none;padding:0;margin:0;font-size:13px;flex:1}.legend li{display:flex;align-items:center;gap:8px;padding:4px 0}.legend i{width:9px;height:9px;border-radius:50%}.legend b{margin-left:auto}
button.link{white-space:nowrap}.up-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #edf2f3}.up-row:last-child{border:none}.up-row strong{font-size:13px}.up-row small{margin-top:2px}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap}.t-wait{background:#fff3dc;color:#9a6505}.t-run{background:#dff5ec;color:#087d6a}.t-done{background:#eef2f3;color:#5e747c}.t-bad{background:#fde8e8;color:#b23b3b}
.alert{margin:0 0 8px;padding:8px 10px;border-radius:8px;font-size:13px;line-height:1.4}.a-off,.a-err{background:#fdeeee;color:#a23636}.a-warn{background:#fff6e4;color:#8a5a00}.a-info{background:#e8f1fd;color:#28539c}.ok-text{color:#0b7d61}
.bars{display:flex;align-items:flex-end;gap:14px;height:170px;padding-top:6px}.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}.bar-col small{margin:0;font-size:11px}.bar-col span{font-size:12px;color:#5d747c}.bar{width:100%;max-width:46px;min-height:3px;border-radius:7px 7px 3px 3px;background:linear-gradient(#26c49a,#0f8671)}
.sched-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}.sch-summary{font-size:13px;color:#0b5e4f;background:#eef8f4;border-radius:8px;padding:10px 12px}.sch-summary:empty{display:none}
.sched-row{background:white;border:1px solid #dde6e9;border-radius:11px;padding:15px 18px;display:flex;gap:20px;align-items:center;justify-content:space-between;margin:10px 0}.sched-row h3{margin:0 0 6px;font-size:15px}.sched-row p{margin:4px 0;font-size:13px}
@media(max-width:1400px){.kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:1100px){.dash-grid{grid-template-columns:1fr}.sched-grid{grid-template-columns:1fr 1fr}}@media(max-width:680px){.kpis{grid-template-columns:1fr 1fr}.sched-grid{grid-template-columns:1fr}.sched-row{flex-direction:column;align-items:flex-start}}
/* ---- groups, logos ---- */
.pick-title{font-size:13px;font-weight:600;margin:14px 0 6px}.member-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;max-height:260px;overflow:auto;margin-bottom:12px}
.member{display:flex;align-items:center;gap:8px;margin:0;padding:8px 10px;border:1px solid #e1e9ec;border-radius:8px;font-weight:500;font-size:13px;cursor:pointer}.member input{width:16px;margin:0}.member small{margin:0 0 0 auto;font-size:11px}
.member:has(input:checked){border-color:#0f8671;background:#eef8f4}
.group-card{border:1px solid #dde6e9;border-radius:12px;padding:16px;margin-bottom:14px}.group-edit{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.group-edit label{margin:0 0 6px}
.login-logo{height:44px;display:block;margin-bottom:6px}.side-logo{height:30px;width:auto;display:block}.logo{gap:10px;align-items:flex-end}.side-tag{font-size:10px;letter-spacing:2px;color:#8fafb4;margin:0 0 2px}
button.attention{box-shadow:0 0 0 3px #f2b13466}

.media-list{margin:8px 0}.media-list .ml-title{font-weight:650;margin:0 0 4px}.media-list ul{list-style:none;margin:0;padding:0}.media-list li{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:13px;overflow-wrap:anywhere}
.lamp{flex:none;width:9px;height:9px;border-radius:50%;background:#cfd9dc}.lamp.on{background:#16a34a;box-shadow:0 0 0 3px #16a34a33,0 0 8px #16a34a;animation:lampPulse 1.6s ease-in-out infinite}
.ml-now{font-weight:650;color:#0b5e4f}.ml-tag{font-size:11px;font-weight:700;color:#16a34a;background:#e0f5e8;border-radius:5px;padding:1px 6px}
@keyframes lampPulse{50%{box-shadow:0 0 0 5px #16a34a11,0 0 3px #16a34a}}
.sync-box{margin:10px 0;padding:12px 14px;background:#f4f9f8;border:1px solid #d6e6e2;border-radius:10px}.sync-head{display:flex;align-items:center;gap:8px;margin:0 0 8px!important}.sync-ok{color:#0b5e4f;font-weight:650;margin:0!important}
.bar{height:8px;background:#dbe8e5;border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:#087d6a;border-radius:6px;transition:width .6s}.bar.indet i{animation:indet 1.2s ease-in-out infinite alternate;width:35%!important}@keyframes indet{from{margin-left:0}to{margin-left:65%}}
.spinner{width:14px;height:14px;border:2px solid #b8d5ce;border-top-color:#087d6a;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}
.sync-files{list-style:none;margin:10px 0 0;padding:0}.sync-files li{display:flex;gap:10px;align-items:center;font-size:13px;padding:3px 0}.sync-files li span:nth-child(2){flex:1;overflow-wrap:anywhere}.sync-files li span:first-child{width:16px;text-align:center;font-weight:700}.st-done{color:#16a34a}.st-copying{color:#087d6a}.st-failed{color:#ab3a3a}.st-pending{color:#8aa0a7}

.sch-add-row{display:flex;gap:10px;align-items:center;max-width:640px}.sch-add-row select{margin:0}.sch-groups{display:grid;gap:8px;margin:10px 0 6px;max-width:640px}
.sch-chip{display:flex;align-items:center;gap:10px;background:#f4f9f8;border:1px solid #d6e6e2;border-radius:9px;padding:8px 10px}.sch-chip b{background:#087d6a;color:white;border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:12px;flex:none}
.sch-chip span{font-weight:650}.sch-chip small{margin:0;flex:1}.sch-chip button{padding:4px 10px}.sch-summary.bad{color:#9c4138;background:#fae8e5}
.device-row.is-online,.screen-card.is-online{border-left:6px solid #16a34a}.device-row.is-offline,.screen-card.is-offline{border-left:6px solid #dc2626}
.badge.on{background:#dcfce7;color:#166534}.badge.off{background:#fee2e2;color:#991b1b}.status-on{color:#166534;font-weight:650}.status-off{color:#b91c1c;font-weight:650}
.screen-tile.s-online{box-shadow:inset 0 4px 0 #16a34a}.screen-tile.s-offline{box-shadow:inset 0 4px 0 #dc2626}

.src-pick{display:grid;gap:8px;margin:6px 0 14px}.src-pick .sch-add-row{max-width:none}
.plays-select{min-width:min(420px,100%)}

/* ================= X24 Hub DL – dashboard redesign (black & white brand, X24 logo) ================= */
:root{--ink:#111214;--ink2:#1c1d20;--line:#e6e8eb;--soft:#f5f6f8;--muted:#6b7280;--gold:#f5b301;--green:#16a34a;--red:#dc2626;--amber:#f59e0b;--blue:#2563eb;--violet:#7c3aed}
:root{color:var(--ink);background:#f4f5f7}
.primary,.file-button{background:var(--ink);border-color:var(--ink);color:#fff}.primary:hover{background:#2a2b30}
button{border-color:#d9dce1;color:var(--ink)}button:hover{background:#f1f2f4}
/* sidebar */
aside{background:linear-gradient(180deg,#0b0b0c 0%,#141416 70%,#1b1710 100%);width:230px;padding:26px 16px}
aside::after{content:"";position:absolute;left:0;right:0;bottom:120px;height:220px;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(245,179,1,.07) 22px 23px);pointer-events:none}
.logo{justify-content:center;flex-direction:column;gap:2px}.side-logo{width:120px}.side-tag{letter-spacing:4px!important;color:#cfd2d6!important}
nav{margin-top:34px;gap:4px}nav button{display:flex;align-items:center;gap:14px;color:#d6d8dc;font-weight:500;border-radius:10px;padding:12px 14px}
nav button:hover{background:#1f2023;color:#fff}nav .selected{background:linear-gradient(90deg,#3a2f10,#1d1d20);color:#fff;font-weight:650;box-shadow:inset 3px 0 0 var(--gold)}
nav .selected .nav-ico{color:var(--gold)}.nav-ico{display:inline-grid;place-items:center;color:#c9ccd1}
.sidebar-footer{position:relative;z-index:1;background:#161719;border:1px solid #26282c;border-radius:14px;padding:14px;color:#e5e7eb}
.sidebar-footer button{width:100%;text-align:left;margin-top:10px;border-color:#2b2d31;color:#d1d5db}.sidebar-footer button:hover{background:#222428}
main{margin-left:230px;padding:30px 36px}
/* header */
header{margin-bottom:18px}h1#page-title{font-size:34px;letter-spacing:-1px}
.header-status{gap:12px}.header-status .dot{background:var(--green)}#demo-label{background:#e8f6ee;color:#166534}
.bell{display:inline-grid;place-items:center;width:38px;height:38px;color:var(--ink);position:relative}.bell::after{content:"";position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.user-chip{background:var(--ink);color:#fff;border-radius:22px;padding:8px 14px;font-weight:600}
/* hero */
.dash-welcome{display:grid;grid-template-columns:1fr 340px auto;align-items:center;gap:24px;background:linear-gradient(100deg,#fff 0%,#f7f7f8 55%,#ececee 100%);border:1px solid var(--line);border-radius:18px;padding:22px 26px;margin-bottom:18px;overflow:hidden}
.dash-welcome h2{font-size:24px}.hero-line{margin:4px 0 0;color:#374151;font-size:15px}
.hero-tv{position:relative;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-screen{width:230px;height:120px;border-radius:8px;border:6px solid #0d0d0f;background:radial-gradient(ellipse at 30% 20%,#5b6470 0%,#1f242b 45%,#0b0d10 100%);display:grid;place-items:center;box-shadow:0 18px 40px rgba(0,0,0,.25);transform:perspective(600px) rotateY(-14deg)}
.hero-screen img{width:92px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}.hero-stand{width:120px;height:10px;margin-top:4px;background:linear-gradient(#c9ccd1,#9ca3af);border-radius:3px}
.dash-actions{display:flex;gap:10px}.dash-actions .primary{padding:12px 18px}
/* KPI cards */
.kpis{grid-template-columns:repeat(5,1fr);gap:16px}
.kpi{border:1px solid var(--line);border-radius:18px;padding:16px 18px 12px;box-shadow:0 8px 24px rgba(17,18,20,.05)}
.kpi::after{display:none}.kpi-top{display:flex;justify-content:space-between;align-items:flex-start}
.kpi-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center}
.kpi-go{width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center;border-color:var(--line);background:#fff}
.kpi-body{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.kpi-txt p{margin:0;font-size:14px;font-weight:650;color:var(--ink)}
.kpi-txt strong{font-size:34px;margin-top:4px}.kpi-txt small{margin-top:2px}
.kpi-ring{--p:0;--c:var(--blue);width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),#eef0f3 0);display:grid;place-items:center;flex:none}
.kpi-ring span{width:60px;height:60px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.kpi-bars{display:flex;gap:4px;align-items:flex-end;height:30px;justify-content:flex-end;margin-top:-6px}.kpi-bars i{width:7px;border-radius:3px;background:var(--c,#cbd5e1);opacity:.75}
.k-total{--c:var(--blue)}.k-total .kpi-icon{background:#e0ebff;color:var(--blue)}.k-total .kpi-ring{--c:var(--blue)}.k-total .kpi-bars i{background:#93b4f5}
.k-online{background:linear-gradient(160deg,#fff 55%,#effaf3)}.k-online .kpi-icon{background:#dcfce7;color:var(--green)}.k-online .kpi-ring{--c:var(--green)}.k-online .kpi-bars i{background:#86d7a3}
.k-playing{background:linear-gradient(160deg,#fff 55%,#f5f0ff)}.k-playing .kpi-icon{background:#ede4ff;color:var(--violet)}.k-playing .kpi-ring{--c:var(--violet)}.k-playing .kpi-bars i{background:#c4b0f5}
.k-offline{background:linear-gradient(160deg,#fff 55%,#fff1f1)}.k-offline .kpi-icon{background:#fee2e2;color:var(--red)}.k-offline .kpi-ring{--c:var(--red)}.k-offline .kpi-bars i{background:#f59a9a}
.k-sched{background:linear-gradient(160deg,#fff 55%,#fff8e6)}.k-sched .kpi-icon{background:#fff1c7;color:#d97706}.k-sched .kpi-ring{--c:var(--amber)}.k-sched .kpi-bars i{background:#f8cf6a}
/* live screens */
.dash-grid{gap:18px}.panel{border-radius:18px;border-color:var(--line)}
.dash-wall .section-heading{flex-wrap:wrap;gap:12px}.dash-wall h2{font-size:22px}
.live-note{display:flex;align-items:center;gap:8px;margin:2px 0 0;font-size:13px;color:#374151}.live-note .dot{background:var(--green)}
.wall-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.wall-tools{display:flex;gap:6px;align-items:center}
.chips .chip{border-radius:20px;padding:7px 14px;background:#f1f2f4;border-color:transparent;font-size:13px}.chips .chip.on{background:var(--ink);color:#fff}
.dash-search{width:180px;margin:0;border-radius:20px;padding:8px 14px;border-color:var(--line)}
.view-btn{width:38px;height:38px;padding:0;display:grid;place-items:center;border-radius:10px}.view-btn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.screen-wall{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:16px}
.screen-tile{border-radius:16px;border-color:var(--line);background:#fff;box-shadow:0 6px 18px rgba(17,18,20,.05)}
.screen-tile.s-online,.screen-tile.s-offline{box-shadow:0 6px 18px rgba(17,18,20,.05)}
.screen-tile .frame{background:#0b0b0d}.screen-tile .pill{border-radius:8px;font-weight:650}
.screen-tile .tile-actions button:first-child{background:var(--ink);color:#fff;border-color:var(--ink)}
.screen-tile .tile-actions{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}
.screen-wall.list-view{grid-template-columns:1fr!important}.screen-wall.list-view .screen-tile{flex-direction:row}.screen-wall.list-view .frame{width:220px;flex:none}
.add-tile{border:2px dashed #d5d9df;background:linear-gradient(170deg,#fff 60%,#eef2ff);cursor:pointer;min-height:300px;justify-content:center}
.add-body{padding:24px;text-align:center}.add-plus{width:62px;height:62px;border-radius:50%;background:#eceef1;display:grid;place-items:center;font-size:32px;margin:0 auto 14px;color:#374151}
.add-body h3{margin:6px 0}.add-form{display:grid;gap:8px;margin-top:12px}.add-form input{margin:0}
/* side panels */
.dash-side .panel h2{font-size:18px}.alert{border-radius:12px}
/* map + plays */
.dash-grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin:18px 0}
.dash-map{height:360px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#e9ecef}
.map-tools{margin-top:12px;display:grid;gap:8px}.map-row{display:flex;gap:8px;flex-wrap:wrap}.map-row input,.map-row select{margin:0;flex:1;min-width:130px}
.plays{display:grid;gap:8px;max-height:430px;overflow:auto}
.play-row{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff}
.play-thumb{width:64px;height:40px;border-radius:8px;background:#111;color:#fff;display:grid;place-items:center;overflow:hidden;flex:none}.play-thumb img{width:100%;height:100%;object-fit:cover}
.play-mid{flex:1;min-width:0}.play-mid strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-mid small{margin-top:2px}
.play-btn{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important;padding:7px 14px}
.viewer{position:fixed;inset:0;background:rgba(10,10,12,.7);display:grid;place-items:center;z-index:2000}.viewer[hidden]{display:none}
.viewer-card{width:min(900px,94vw);background:#fff;border-radius:16px;padding:16px}.viewer-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.viewer-card iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#000}
@media(max-width:1300px){.kpis{grid-template-columns:repeat(3,1fr)}.dash-grid2{grid-template-columns:1fr}.dash-welcome{grid-template-columns:1fr auto}.hero-tv{display:none}}
.kpi .kpi-icon::before{content:none!important;display:none!important}

/* ---- dashboard banner: dark stage with the X24 light-reveal video, blended into the page ---- */
.dash-welcome{position:relative;grid-template-columns:minmax(0,1fr) auto;min-height:230px;padding:30px 34px;border:0;
 background:radial-gradient(ellipse at 72% 60%,#1a1a1d 0%,#060607 55%,#000 100%);color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.dash-welcome>div:first-child,.dash-actions{position:relative;z-index:2}
.dash-welcome h2{color:#fff;font-size:28px}.dash-welcome .hero-line{color:#d1d5db}.dash-welcome #dash-sub{color:#9ca3af}
.hero-media{position:absolute;inset:0 0 0 30%;z-index:1;pointer-events:none;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 82%,transparent 100%)}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:center 55%;opacity:.95}
.dash-welcome::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(0,0,0,.55));z-index:1;pointer-events:none}
.dash-actions{align-self:end}.dash-actions .primary{background:#fff;color:#111;border-color:#fff}.dash-actions .primary:hover{background:#e5e7eb}
.dash-actions button:not(.primary){background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28)}.dash-actions button:not(.primary):hover{background:rgba(255,255,255,.14)}
.hero-tv{display:none}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}.hero-media{background:url(/banner-poster.jpg) center/cover}}
.side-logo{width:150px}.login-logo{width:240px}
.dash-welcome{grid-template-columns:minmax(0,1fr);min-height:250px;align-content:center}
.dash-actions{justify-self:start;align-self:start;margin-top:16px}
.hero-media{inset:0 2% 0 auto;width:min(620px,52%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 90%,transparent 100%)}
.hero-video{object-fit:contain;object-position:center}
.side-logo{width:170px}
.hero-media{isolation:auto}.hero-video{mix-blend-mode:screen;filter:contrast(1.12) brightness(.96)}
.hero-media{-webkit-mask-image:radial-gradient(ellipse 62% 78% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 78% at 50% 50%,#000 55%,transparent 100%)}
.hero-media{-webkit-mask-image:none;mask-image:none}
.hero-video{-webkit-mask-image:radial-gradient(ellipse 60% 75% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 60% 75% at 50% 50%,#000 55%,transparent 100%)}
.dash-welcome{background:linear-gradient(90deg,#17171a 0%,#0a0a0b 38%,#000 58%,#000 100%)}

/* ---- screen locations map ---- */
.dash-map{height:380px;background:#fff!important;border-color:#eef0f2}.dash-map.street{background:#e9ecef!important}
.dash-map .leaflet-control-zoom a{color:#111}.leaflet-container{font:inherit}
.map-mode{display:flex;gap:4px;background:#f1f2f4;border-radius:20px;padding:3px}.map-mode button{border:0;background:transparent;border-radius:16px;padding:6px 12px;font-size:13px}.map-mode button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.pin-wrap{background:none;border:0}.pin{position:relative;display:block;width:22px;height:22px}
.pin i{position:absolute;inset:5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff,0 2px 6px rgba(0,0,0,.25)}
.pin::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:var(--c);opacity:.18;animation:pinpulse 2.6s ease-out infinite}
.pin.approx i{background:#fff;border:3px dashed var(--c);inset:4px}.pin.approx::before{animation:none;opacity:.1}
@keyframes pinpulse{0%{transform:scale(.6);opacity:.35}100%{transform:scale(1.6);opacity:0}}
.st-playing{--c:#16a34a}.st-idle{--c:#f59e0b}.st-dl{--c:#2563eb}.st-off{--c:#dc2626}.st-blocked{--c:#7c3aed}
.map-tip{background:#fff;border:0;border-radius:12px;box-shadow:0 8px 24px rgba(17,18,20,.15);padding:10px 14px;font-size:13px}.map-tip::before{display:none}
.map-tip b{display:block;font-size:14px;margin-bottom:4px}.tt-st{display:flex;align-items:center;gap:6px;color:#4b5563}.tt-st i{width:9px;height:9px;border-radius:50%;background:var(--c);display:inline-block}
/* ---- Drive folder picker ---- */
.src-row{display:flex;gap:8px}.src-row input{margin:0;flex:1}.browse-btn{white-space:nowrap}
.source-pick{display:flex;gap:8px;flex-wrap:wrap}.source-pick>*{flex:1;min-width:160px}.source-pick .browse-btn{flex:0 0 auto}
.picker-card{max-width:640px}.picker-card input[type=search]{margin:0 0 10px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:8px;font-size:13px}.crumb{border:0;background:#f1f2f4;padding:5px 10px;border-radius:14px;font-size:13px}.crumbs .sep{color:#9ca3af}
.folder-list{max-height:320px;overflow:auto;display:grid;gap:6px;margin-bottom:10px}
.folder-row{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:6px}
.folder-name{flex:1;text-align:left;border:0;background:transparent;display:flex;align-items:center;gap:8px;font-weight:600}.folder-name svg{color:#6b7280}
.folder-row .primary{padding:7px 12px}.picker-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.folder-pick .pick-label{display:block;font-size:14px;font-weight:600;margin:15px 0 7px}

/* ---- media manager ---- */
.media-card{width:min(1100px,96vw);max-height:92vh;overflow:auto}
.viewer-head small{display:block;margin-top:2px}.link-btn{display:inline-flex;align-items:center;padding:10px 14px;border:1px solid #d9dce1;border-radius:9px;color:#111;text-decoration:none;font-weight:600}
.dropzone{display:grid;place-items:center;gap:4px;margin:12px 0;padding:22px;border:2px dashed #cfd4da;border-radius:14px;background:#fafbfc;cursor:pointer;text-align:center}
.dropzone.over{border-color:#111;background:#f1f2f4}
.upload-queue{display:grid;gap:6px;margin-bottom:10px}.up-row2{display:grid;grid-template-columns:minmax(0,1fr) 180px 200px;gap:10px;align-items:center;font-size:13px;padding:6px 10px;border:1px solid var(--line);border-radius:10px}
.up-row2 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.up-row2 progress{width:100%}.up-row2 small{margin:0}.up-row2.done{background:#f0fdf4}.up-row2.bad{background:#fef2f2}.up-row2.bad small{color:#b91c1c}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.media-item{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;cursor:grab}
.media-item.dragging{opacity:.4}.media-item.not-played{opacity:.65}
.media-thumb{position:relative;aspect-ratio:16/9;background:#111;color:#fff;display:grid;place-items:center;font-size:22px}.media-thumb img{width:100%;height:100%;object-fit:cover}
.media-no{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.65);color:#fff;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:700}
.media-badge{position:absolute;right:8px;top:8px;background:#f59e0b;color:#111;border-radius:8px;padding:2px 8px;font-size:11px;font-weight:700}
.media-name{padding:8px 10px 4px;display:flex;flex-direction:column;gap:4px;min-height:52px}.media-name strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-name small{margin:0}
.media-name input{margin:0;padding:6px 8px}.media-actions{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:4px;padding:6px 8px 10px}.media-actions button{padding:6px 4px;font-size:12px}
.media-actions button.arm{background:#dc2626;color:#fff;border-color:#dc2626}
.media-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.src-row{flex-wrap:wrap}.src-row .picked-name{flex-basis:100%;margin:2px 0 0;color:#16a34a;font-weight:600}

/* chosen X24cloud folder shown by name (link kept hidden) */
.folder-chip{flex:1;min-width:0;text-align:left;margin:0;padding:8px 12px;border:1px solid #d4d4d8;border-radius:8px;background:#f8fafc;color:#111;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:text}
.folder-chip.empty{color:#71717a;font-weight:400}
.source-pick .folder-chip{max-width:340px}

/* groups and schedules in different light colours, so they are easy to tell apart */
.group-card input,.group-card .folder-chip,.group-card .member{background:#fff}
#schedule-list .sched-row,.sched-row{background:#fff7ec;border:1px solid #f0dcb8;border-left:4px solid #d99a3c}

/* each screen group in its own light colour (same family as the dashboard cards) */
.group-card.gc-0{background:#eef5ff;border:1px solid #cddff7;border-left:4px solid #2f6fd6}
.group-card.gc-1{background:#edf9f4;border:1px solid #c6eadb;border-left:4px solid #14a37f}
.group-card.gc-2{background:#f4f0ff;border:1px solid #ddd3f7;border-left:4px solid #7c5cd6}
.group-card.gc-3{background:#fff4f6;border:1px solid #f6d3da;border-left:4px solid #d6456a}
.group-card.gc-4{background:#eefafc;border:1px solid #c9e9ef;border-left:4px solid #1b9ab3}
.group-card.gc-5{background:#f3f7ec;border:1px solid #d9e6c4;border-left:4px solid #6c9a2e}

/* X24Play dialogs (replace the browser's "localhost says" boxes) */
.dlg-ov{z-index:3000;background:rgba(10,10,12,.55);backdrop-filter:blur(2px);animation:dlgfade .15s ease}
.dlg-card{width:min(440px,92vw);background:#fff;border-radius:16px;padding:22px 24px 18px;box-shadow:0 24px 60px rgba(0,0,0,.28);border-top:4px solid #111;animation:dlgpop .18s ease}
.dlg-card.danger{border-top-color:#c0392b}
.dlg-brand{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:12px}
.dlg-mark{display:inline-grid;place-items:center;width:28px;height:20px;border-radius:5px;background:#111;color:#fff;font-size:10px;letter-spacing:0}
.dlg-title{margin:0 0 6px;font-size:17px;line-height:1.35;color:#111}
.dlg-text{margin:0 0 4px;color:#4b5563;font-size:14px;line-height:1.5}
.dlg-input{width:100%;margin:12px 0 0;box-sizing:border-box}
.dlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.dlg-actions button{min-width:96px}
.danger-solid{background:#c0392b!important;border-color:#c0392b!important;color:#fff!important}
.danger-solid:hover{background:#a93226!important}
@keyframes dlgfade{from{opacity:0}to{opacity:1}}
@keyframes dlgpop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* cloud storage page */
.st-head{display:flex;gap:10px;align-items:baseline;margin:6px 0 8px}.st-head strong{font-size:22px}
.st-bar{height:12px;border-radius:8px;background:#eef1f4;overflow:hidden}.st-fill{height:100%;background:#2f6fd6;border-radius:8px}.st-fill.high{background:#d99a3c}.st-fill.full{background:#c0392b}
.st-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.st-facts div{background:#f6f8fa;border-radius:10px;padding:10px 12px}.st-facts small{display:block;color:#6b7280}.st-facts b{font-size:15px;word-break:break-all}
.st-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e5e9ec;border-radius:10px;margin:8px 0;background:#fff}
.st-dir{background:#f8fafc}.st-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;text-align:left;background:none;border:0;padding:0;cursor:default}
button.st-name{cursor:pointer}.st-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:420px}.st-name small{color:#6b7280}
.st-acts{display:flex;gap:8px;flex-shrink:0}
@media(max-width:800px){.st-facts{grid-template-columns:1fr 1fr}.st-row{flex-wrap:wrap}}

/* background upload box (bottom right) */
.upl-pill{position:fixed;right:20px;bottom:20px;z-index:2500;background:#111;color:#fff;border:0;border-radius:999px;padding:11px 18px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.25);cursor:pointer}
.upl-pill.bad{background:#c0392b}.upl-pill[hidden]{display:none}

/* schedule edit pop-up */
.sch-modal-card{width:min(1100px,96vw);max-height:92vh;overflow:auto;padding:0;background:transparent}
.sch-modal-card form.in-modal{margin:0;box-shadow:0 24px 60px rgba(0,0,0,.28);border-top:4px solid #d99a3c}

/* schedule folders (several, in play order) */
.sch-folders{display:flex;flex-wrap:wrap;gap:6px;background:none!important;padding:0!important}
.sch-fchip{display:inline-flex;align-items:center;gap:6px;background:#fff7ec;border:1px solid #f0dcb8;border-radius:8px;padding:4px 6px 4px 8px;font-size:13px}
.sch-fchip b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#d99a3c;color:#fff;font-size:11px}
.sch-fchip button{padding:2px 7px;font-size:12px;min-width:0}

/* Save buttons stay grey until something changes */
button:disabled{cursor:not-allowed}

/* activity log: one bar per day */
.audit-head{margin-bottom:8px}
.audit-day{border:1px solid #e5e9ec;border-radius:10px;margin:6px 0;background:#fff}
.audit-day summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;list-style:none}
.audit-day summary::-webkit-details-marker{display:none}
.audit-day summary::before{content:"\25B8";margin-right:8px;color:#6b7280}.audit-day[open] summary::before{content:"\25BE"}
.audit-day summary strong{flex:1}
.audit-day .audit-row{padding:6px 14px;border-top:1px solid #f0f2f4;font-size:13px}

/* live tile: picture of the current media; dimmed when the screen is offline */
.mini-player.dim img{opacity:.45;filter:grayscale(.6)}
.play-thumb img{background:#111}

/* live tile: media thumbnail fills the whole box; orientation shown as a tag */
.screen-tile .mini-player,.screen-tile .mini-player.vertical{width:100%;height:100%;box-shadow:none;background:#000}
.screen-tile .mini-player img{width:100%;height:100%;object-fit:cover}
.frame .orient{position:absolute;top:10px;right:10px;z-index:2;font-size:11px;font-weight:600;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px 9px;backdrop-filter:blur(4px)}

/* schedule overlap notice */
.overlap-note{margin:6px 0 0;padding:7px 10px;border-radius:8px;background:#fff1dc;border:1px solid #f3c98b;color:#8a4b00;font-size:13px}
.t-warn{background:#fff1dc;color:#8a4b00}

/* weekly repeat */
.rep-days{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}.rep-day{display:inline-flex;align-items:center;gap:5px;border:1px solid #dde6e9;border-radius:8px;padding:5px 9px;font-size:13px;cursor:pointer}
/* scrolling text, reports */
.four-column{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@media(max-width:1000px){.four-column{grid-template-columns:1fr 1fr}}
.four-column input[type=color]{height:40px;padding:3px;margin-top:7px;width:100%}
label.tk-on{align-self:end;padding-bottom:10px}
.tk-targets{display:flex;flex-direction:column;gap:6px;margin:8px 0 14px}
.tk-screen{position:relative;width:min(480px,100%);aspect-ratio:16/9;background:linear-gradient(135deg,#1f3a46,#0b1418);border-radius:8px;overflow:hidden;margin-bottom:14px}
.tk-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.tk-bar span{display:inline-block;padding-left:100%;animation:tk-scroll 10s linear infinite;font-family:'Noto Sans','Nirmala UI','Kartika',sans-serif}
@keyframes tk-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.tk-row{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #edf1f2}.tk-row:last-child{border-bottom:none}
.tk-row>div:nth-child(2){flex:1;min-width:0}.tk-row strong{margin-right:8px}
.tk-text{margin:4px 0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-swatch{width:44px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;border:1px solid #d4d4d8;flex:none}
.tk-act{display:flex;gap:6px;flex:none}
.rp-table{width:100%;border-collapse:collapse;font-size:13px}.rp-table th,.rp-table td{text-align:left;padding:6px 8px;border-bottom:1px solid #edf1f2}.rp-table td:nth-child(3),.rp-table th:nth-child(3){text-align:right}
/* pop-up notices (no page scroll) */
#notice{display:none!important}
#toast-stack{position:fixed;top:18px;right:22px;z-index:3000;display:flex;flex-direction:column;gap:10px;width:min(420px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border-radius:11px;background:#0f2a33;color:#fff;font-size:14px;line-height:1.45;box-shadow:0 10px 30px rgba(0,0,0,.22);animation:toast-in .2s ease-out}
.toast.error{background:#9c2f25}
.toast.out{opacity:0;transform:translateX(20px);transition:all .25s}
.toast-icon{font-weight:800}.toast-text{flex:1;overflow-wrap:anywhere}
.toast-close{background:none;border:none;color:inherit;padding:0 2px;opacity:.75;font-size:13px}.toast-close:hover{opacity:1}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* bell */
.bell::after{display:none}
.bell.has::after{display:block}
.bell[data-count]:not([data-count=""])::after{content:attr(data-count);display:grid;place-items:center;top:2px;right:0;width:auto;min-width:17px;height:17px;padding:0 4px;font:700 10px/1 Inter,Arial,sans-serif;color:#fff;border-radius:9px}
.bell:hover{background:#eef3f5;border-radius:10px}
.bell-pop{position:absolute;top:46px;right:0;z-index:2500;width:min(400px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:#fff;border:1px solid #dde6e9;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18);padding:6px 16px 14px;text-align:left}
.bell-pop h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5e747c;margin:14px 0 6px}
.bell-pop p{margin:6px 0;font-size:13px}
.bell-pop .a-off,.bell-pop .a-err,.bell-pop .a-warn{cursor:pointer}
.bell-msg{display:flex;gap:10px}.bell-msg.error span:last-child{color:#9c2f25}
/* devices: one clear card per screen */
#device-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:18px;align-items:start}
@media(max-width:700px){#device-list{grid-template-columns:1fr}}
#device-list .device-row{margin:0;padding:0;gap:0;border:1px solid #d6e1e5;border-radius:14px;box-shadow:0 2px 10px rgba(16,43,52,.07);overflow:hidden;background:#fff}
#device-list .device-row>*{padding-left:20px;padding-right:20px}
#device-list .device-details{width:100%;padding-top:0;padding-bottom:10px}
#device-list .device-details h2{margin:0 -20px 10px;padding:14px 20px;background:#f4f8f9;border-bottom:1px solid #e3eaed;font-size:17px}
#device-list .device-row.is-online .device-details h2{background:#eefaf3}
#device-list .device-row.is-offline .device-details h2{background:#fdf1f0}
#device-list .device-controls{width:100%;padding-top:12px;padding-bottom:14px;border-top:1px solid #edf1f2;background:#fbfcfd}
#device-list .device-settings{width:100%;margin:0;padding:14px 20px 16px;background:#fbfcfd}
#device-list .device-row.is-unlinked{border-left:6px solid #d99a1e}
#device-list .device-row.is-unlinked .device-details h2{background:#fff8e8}
.unlinked-tag{margin-left:10px;vertical-align:middle}
/* device settings: label above each field, folder name in full */
#device-list .device-settings.dev-set{display:block}
.dev-head{margin:0 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5e747c}
.dev-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dev-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;min-width:0}
.dev-label{font-size:12px;font-weight:600;color:#3f5660}
.dev-field input,.dev-field select{width:100%;margin:0}
.dev-folder{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px dashed #cbd8dd;border-radius:10px;background:#fff}
.dev-folder .folder-chip{max-width:none;width:100%;white-space:normal;overflow-wrap:anywhere}
.dev-folder-btns{display:flex;gap:8px}.dev-folder-btns button{flex:1;margin:0}
.dev-foot{display:flex;justify-content:flex-end}.dev-foot button{min-width:160px}
@media(max-width:560px){.dev-two{grid-template-columns:1fr}}
/* ---- X24 XPromax (same style as Xpro) ---- */
.edition{margin:14px auto 0;text-align:center;display:flex;flex-direction:column;gap:3px;padding:8px 10px;border:1px solid #2a2f35;border-radius:10px;background:#15181c;max-width:200px}
.edition strong{font-size:13px;letter-spacing:3px;color:#fff;text-transform:uppercase}.edition span{font-size:11px;line-height:1.35;color:#aeb3b9}
/* scrolling text form: same look as the other fields */
#tk-text{font:15px/1.5 Inter,'Noto Sans','Nirmala UI',Arial,sans-serif;padding:10px 12px;min-height:64px;resize:vertical}
.four-column select{height:44px}
.four-column input[type=color]{height:44px;padding:4px;border:1px solid #c5d3d9;border-radius:8px;background:#fff;cursor:pointer}
.tk-bar.top{top:0;bottom:auto}
.tk-bar span.rtl{animation-name:tk-scroll-right}
@keyframes tk-scroll-right{from{transform:translateX(-100%)}to{transform:translateX(0)}}
/* centre pop-up for every save / edit / error message */
#toast-stack{display:none}
.notice-back{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;background:rgba(10,20,24,.28);animation:nb-in .15s ease-out}
.notice-back.out{opacity:0;transition:opacity .18s}
.notice-card{width:min(420px,calc(100vw - 32px));background:#fff;border-radius:16px;padding:26px 26px 20px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.28);border-top:5px solid #14a37f;animation:nc-in .18s ease-out}
.notice-card.error{border-top-color:#c0392b}
.notice-icon{width:46px;height:46px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font:800 22px/1 Inter,Arial,sans-serif;background:#e0f5ee;color:#0b7d60}
.notice-card.error .notice-icon{background:#fbe5e2;color:#b23b2e}
.notice-title{margin:0 0 6px;font-size:17px}.notice-msg{margin:0 0 18px;font-size:14px;line-height:1.5;color:#3f5660;overflow-wrap:anywhere}
.notice-card button{min-width:110px}
@keyframes nb-in{from{opacity:0}to{opacity:1}}@keyframes nc-in{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
/* alignment: buttons line up with the fields next to them */
.inline-row{align-items:flex-end}
.inline-row>label{flex:1 1 260px;max-width:460px;margin:0}
.inline-row>button,.inline-row>.file-button{height:44px;margin:0}
.inline-row>input[type=file]{flex:1 1 260px;max-width:460px;margin:0;height:44px;padding:8px}
input,select{min-height:44px}
textarea{font:14px/1.5 Inter,Segoe UI,Arial,sans-serif}
.panel>button+button,.panel form>button+button{margin-left:8px}
.bulk-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 16px}
.bulk-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5e747c}
.bulk-btns{display:flex;gap:8px;flex-wrap:wrap}
.group-card>.bulk-btns{justify-content:flex-end;margin-bottom:10px}
button.bulk-stop{color:#b23b2e;border-color:#e6b9b3}
/* ---- Devices: clean screen cards ---- */
#device-list{grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:20px}
#device-list .device-row.dcard{border:1px solid #e1e8eb;border-left:1px solid #e1e8eb;border-radius:16px;box-shadow:0 4px 18px rgba(16,43,52,.06);transition:box-shadow .2s}
#device-list .device-row.dcard:hover{box-shadow:0 8px 28px rgba(16,43,52,.12)}
#device-list .dcard .device-details{padding:0}
.dc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #eef2f4}
.dc-title{display:flex;align-items:center;gap:10px;min-width:0}.dc-title strong{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-id{font:600 11px Consolas,monospace;color:#5e747c;background:#f1f5f6;border-radius:6px;padding:3px 7px}
.dc-dot{width:10px;height:10px;border-radius:50%;flex:none}
.dc-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.dc-pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.dc-seen{font-size:11px;color:#7a8d94}
.dc-on.dc-dot{background:#16a34a;box-shadow:0 0 0 4px #16a34a22}.dc-pill.dc-on{background:#e3f7ec;color:#0f7a3f}
.dc-off.dc-dot{background:#dc2626}.dc-pill.dc-off{background:#fde8e8;color:#b42318}
.dc-wait.dc-dot{background:#d99a1e}.dc-pill.dc-wait{background:#fff4dc;color:#8a5a00}
.dc-info.dc-dot{background:#3b82f6}.dc-pill.dc-info{background:#e7f0ff;color:#1d4fb8}
.dc-rev.dc-dot{background:#9aa5ab}.dc-pill.dc-rev{background:#eef1f2;color:#5e6b70}
.dc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;padding:16px 20px 6px}
.dc-item{min-width:0;display:flex;flex-direction:column;gap:3px}.dc-item.wide{grid-column:1/-1}
.dc-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7a8d94}
.dc-value{font-size:14px;color:#152c38;overflow-wrap:anywhere}
.dc-notes{padding:4px 20px 12px}.dc-notes p{margin:6px 0;font-size:13px}
.dc-warn{color:#b42318;background:#fdf1f0;border-radius:8px;padding:8px 10px}
.dc-hint{color:#8a5a00;background:#fff8e8;border-radius:8px;padding:8px 10px}
.dc-list summary{cursor:pointer;font-size:13px;font-weight:600;color:#3f5660;margin-top:6px}
.dc-list ol{margin:8px 0 0 18px;padding:0;font-size:13px;max-height:180px;overflow:auto}.dc-list li.now{font-weight:700;color:#087d6a}
#device-list .dcard .device-controls{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 20px;background:#fafcfd;border-top:1px solid #eef2f4}
.dc-main{display:flex;gap:8px;flex-wrap:wrap}.dc-main button,.dc-more summary{font-size:14px;padding:8px 14px;height:auto;min-height:38px}
.dc-more{position:relative}
.dc-more summary{list-style:none;cursor:pointer;border:1px solid #cbd8dd;border-radius:9px;background:#fff;font-weight:600}
.dc-more summary::-webkit-details-marker{display:none}
.dc-more-items{position:absolute;right:0;bottom:calc(100% + 6px);z-index:30;min-width:240px;background:#fff;border:1px solid #dde6e9;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.15);padding:10px;display:flex;flex-direction:column;gap:8px}
.dc-more-items button{width:100%;text-align:left;margin:0}
.dc-store{display:flex;flex-direction:column;gap:4px;font-size:12px;margin:0}.dc-store select{width:100%}
#device-list .dcard .dc-settings{border-top:1px solid #eef2f4}
.dc-settings>summary{cursor:pointer;padding:12px 20px;font-size:13px;font-weight:600;color:#3f5660;list-style:none}
.dc-settings>summary::-webkit-details-marker{display:none}
.dc-settings[open]>summary{border-bottom:1px solid #eef2f4}
#device-list .dcard .dc-settings .device-settings{border:0;padding:14px 20px 18px}
@media(max-width:560px){.dc-grid{grid-template-columns:1fr}}
/* card hover: lift + accent line + soft glow */
#device-list .device-row.dcard{position:relative;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
#device-list .device-row.dcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#14a37f,#3b82f6);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;z-index:1}
#device-list .device-row.dcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(16,43,52,.16);border-color:#cfe0e5}
#device-list .device-row.dcard:hover::before{transform:scaleX(1)}
#device-list .device-row.dcard:hover .dc-dot{transform:scale(1.25)}
.dc-dot{transition:transform .22s ease}
@media (prefers-reduced-motion:reduce){#device-list .device-row.dcard,#device-list .device-row.dcard::before,.dc-dot{transition:none}#device-list .device-row.dcard:hover{transform:none}}
/* ---- KPI cards: 5 in one row at 100% zoom (laptops too), compact sizes ---- */
section .kpis,.kpis{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.kpi{min-width:0;padding:14px 14px 10px}
.kpi-icon{width:40px;height:40px;border-radius:12px}
.kpi-go{width:30px;height:30px}
.kpi-body{gap:8px}
.kpi-txt{min-width:0}
.kpi-txt p{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-txt strong{font-size:clamp(24px,2.2vw,32px)}
.kpi-txt small{display:block;font-size:12px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kpi-ring{width:clamp(52px,4.6vw,72px);height:clamp(52px,4.6vw,72px)}
.kpi-ring span{width:76%;height:76%;font-size:12px}
.kpi-bars{height:22px}.kpi-bars i{width:6px}
@media(max-width:1100px){section .kpis,.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){section .kpis,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* hover: lift, colour line, icon pop */
.kpi{position:relative;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;cursor:default}
.kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#14a37f,#3b82f6);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.kpi:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(16,43,52,.14);border-color:#cfe0e5}
.kpi:hover::before{transform:scaleX(1)}
.kpi-icon,.kpi-ring,.kpi-go{transition:transform .25s ease}
.kpi:hover .kpi-icon{transform:scale(1.08) rotate(-4deg)}
.kpi:hover .kpi-ring{transform:scale(1.05)}
.kpi:hover .kpi-go{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.kpi,.kpi::before,.kpi-icon,.kpi-ring,.kpi-go{transition:none}.kpi:hover{transform:none}}
/* same hover for live screen tiles and group cards */
.screen-card,.group-card{transition:transform .22s ease,box-shadow .22s ease}
.screen-card:hover,.group-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(16,43,52,.16)}
@media (prefers-reduced-motion:reduce){.screen-card,.group-card{transition:none}.screen-card:hover,.group-card:hover{transform:none}}
/* dashboard: map + Recently played stay side by side down to 900px */
.dash-grid2{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
@media(max-width:900px){.dash-grid2{grid-template-columns:1fr}}
.dash-grid2>.panel{margin:0;min-width:0}
#dash-plays{max-height:420px;overflow:auto}
/* devices: every card the same height; warnings in a fixed one-line slot */
#device-list{align-items:stretch}
#device-list .device-row.dcard{display:flex;flex-direction:column}
#device-list .dcard .device-details{flex:1 1 auto;display:flex;flex-direction:column}
#device-list .dcard .device-controls,#device-list .dcard .dc-settings{width:100%;margin-top:0}
.dc-notes{min-height:52px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.dc-notes .dc-warn,.dc-notes .dc-hint,.dc-notes .dc-ok{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;padding:7px 10px;border-radius:8px}
.dc-ok{color:#0f7a3f;background:#effaf3}
.dc-notes .xfer span{font-size:12px}
.dc-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-settings>summary{padding:12px 20px}
/* live screens: keep tiles (and the + tile) in one line on normal laptop widths */
.screen-wall:not(.list-view){grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;gap:14px;align-items:stretch}
.screen-wall:not(.list-view) .add-tile{min-height:0;height:100%}
.screen-wall:not(.list-view) .screen-tile .frame{aspect-ratio:16/10}
.screen-wall:not(.list-view) .screen-tile .frame{height:auto}
/* ---- Live screens: one row of media-style cards (thumbnail + name + one line), scrolls sideways when full ---- */
.screen-wall:not(.list-view){display:flex!important;gap:18px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.screen-wall:not(.list-view)>.screen-tile{flex:0 0 220px;scroll-snap-align:start;background:transparent;border:0;box-shadow:none;padding:0;border-radius:0;display:flex;flex-direction:column}
.screen-wall:not(.list-view)>.screen-tile:hover{transform:none;box-shadow:none}
.screen-wall:not(.list-view) .screen-tile .frame{height:auto;aspect-ratio:16/10;border-radius:14px;box-shadow:0 6px 18px rgba(16,43,52,.12);transition:transform .25s ease,box-shadow .25s ease}
.screen-wall:not(.list-view) .screen-tile:hover .frame{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 32px rgba(16,43,52,.22)}
.screen-wall:not(.list-view) .screen-tile .frame img,.screen-wall:not(.list-view) .screen-tile .frame video{width:100%;height:100%;object-fit:cover}
.screen-wall:not(.list-view) .frame .pill{top:auto;bottom:8px;left:8px;font-size:11px;padding:3px 8px;background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(4px)}
.screen-wall:not(.list-view) .frame .orient{top:8px;right:8px;font-size:10px;padding:2px 7px;background:rgba(0,0,0,.5);color:#fff;border:0}
.screen-wall:not(.list-view) .frame .caption{display:none}
.screen-wall:not(.list-view) .tile-body{padding:10px 2px 0;gap:2px;display:flex;flex-direction:column}
.screen-wall:not(.list-view) .tile-title{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.screen-wall:not(.list-view) .tile-title h3{margin:0;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen-wall:not(.list-view) .tile-title .short-id{font-size:10px}
.screen-wall:not(.list-view) .tile-body>p{margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen-wall:not(.list-view) .tile-body .uptime{display:none}
.screen-wall:not(.list-view) .tile-actions{display:flex;gap:6px;margin-top:8px}
.screen-wall:not(.list-view) .tile-actions button{flex:1;font-size:12px;padding:6px 8px;min-height:30px;height:auto}
@media (hover:hover){.screen-wall:not(.list-view) .tile-actions{opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
 .screen-wall:not(.list-view) .screen-tile:hover .tile-actions,.screen-wall:not(.list-view) .screen-tile:focus-within .tile-actions{opacity:1;transform:none}}
.screen-wall:not(.list-view)>.add-tile{flex:0 0 220px;aspect-ratio:16/10;height:auto;min-height:0;align-self:flex-start;border:2px dashed #d5d9df;border-radius:14px;background:#fafbfc}
.screen-wall:not(.list-view)>.add-tile:hover{border-color:#14a37f;background:#f2fbf8}
/* devices: more compact cards */
#device-list{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}
.dc-head{padding:11px 16px}
.dc-title{gap:8px}.dc-title strong{font-size:15px}
.dc-id{font-size:10px;padding:2px 6px}
.dc-dot{width:8px;height:8px}
.dc-pill{font-size:11px;padding:3px 8px}.dc-seen{font-size:10px}
.dc-grid{gap:8px 14px;padding:10px 16px 4px}
.dc-label{font-size:10px}
.dc-value{font-size:13px}
.dc-notes{padding:2px 16px 8px;min-height:40px}
.dc-notes .dc-warn,.dc-notes .dc-hint,.dc-notes .dc-ok{font-size:12px;padding:5px 9px}
#device-list .dcard .device-controls{padding:8px 16px}
.dc-main{gap:6px}
.dc-main button,.dc-more summary{font-size:13px;padding:6px 11px;min-height:32px}
.dc-settings>summary{padding:8px 16px;font-size:12px}
#device-list .dcard .dc-settings .device-settings{padding:10px 16px 14px}
/* ---- device cards v2: picture band on top ---- */
#device-list{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
#device-list .device-row.dcard{border:0;border-radius:16px;box-shadow:0 1px 2px rgba(16,43,52,.06),0 6px 20px rgba(16,43,52,.07)}
#device-list .device-row.dcard::before{display:none}
.dc-band{position:relative;height:150px;background:#0b0f12;overflow:hidden}
.dc-band .dc-thumb{position:absolute;inset:0;width:100%;height:100%;border-radius:0;margin:0}
.dc-band .dc-thumb img,.dc-band .dc-thumb video{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dc-band .mini-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#7d8a90}
.dc-band .mini-empty .big{font-size:26px}.dc-band .mini-empty small{font-size:12px}
.dc-band-off .dc-thumb,.dc-band-rev .dc-thumb{filter:grayscale(1) brightness(.55)}
.dc-band::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(transparent,rgba(0,0,0,.72));pointer-events:none}
.dc-band-over{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;z-index:1}
.dc-band-over .dc-pill{box-shadow:0 2px 8px rgba(0,0,0,.25)}
.dc-ori{font-size:10px;font-weight:600;color:#fff;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:999px;backdrop-filter:blur(4px)}
.dc-band-cap{position:absolute;left:12px;right:12px;bottom:9px;z-index:1;color:#fff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
.dcard:hover .dc-band .dc-thumb img{transform:scale(1.05)}
.dc-head{border-bottom:0;padding:12px 16px 2px}
.dc-head .dc-right .dc-pill{display:none}
.dc-grid{padding-top:6px}
.dc-idle{color:#5e747c;background:#f3f6f7}
#device-list .device-row.dcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,43,52,.16)}
/* ---- device cards v3: tidy at any zoom ---- */
#device-list{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));align-items:start}
#device-list .device-row.dcard{overflow:visible}
#device-list .dcard .dc-band{border-radius:16px 16px 0 0}
#device-list .dcard .dc-settings:last-child,#device-list .dcard .device-controls:last-child{border-radius:0 0 16px 16px}
#device-list .dcard .device-controls{flex-wrap:nowrap}
.dc-main{flex-wrap:nowrap;min-width:0}
.dc-main button{white-space:nowrap}
.dc-more summary{width:34px;min-height:32px;padding:0;display:grid;place-items:center;font-size:18px;line-height:1;letter-spacing:1px}
.dc-more-items{bottom:auto;top:calc(100% + 6px);right:0;z-index:60}
.dc-settings>summary{white-space:nowrap}
#device-list .dcard .dc-settings .device-settings{background:#fafcfd}
#device-list .dcard .dev-two{grid-template-columns:1fr 1fr}
#device-list .dcard .dev-foot button{min-width:0;width:100%}
#device-list .device-row.dcard:hover{transform:translateY(-3px)}
/* ---- dashboard: hover on every box ---- */
#overview .panel,#overview .dash-welcome,#overview .info-note{position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
#overview .panel::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#14a37f,#3b82f6);transform:scaleX(0);transform-origin:left;transition:transform .35s ease;pointer-events:none}
#overview .panel:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(16,43,52,.13);border-color:#cfe0e5}
#overview .panel:hover::before{transform:scaleX(1)}
#overview .dash-welcome:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(0,0,0,.28)}
#overview .info-note:hover{transform:translateY(-2px)}
/* small items inside the boxes */
#overview #dash-alerts .alert,#overview #dash-upcoming>*,#overview #dash-plays>*{transition:transform .2s ease,background-color .2s ease}
#overview #dash-alerts .alert:hover,#overview #dash-upcoming>*:hover,#overview #dash-plays>*:hover{transform:translateX(4px)}
#overview #dash-hours .bar{transition:filter .2s ease,transform .2s ease;transform-origin:bottom}
#overview #dash-hours .bar-col:hover .bar{filter:brightness(1.15);transform:scaleY(1.04)}
@media (prefers-reduced-motion:reduce){#overview .panel,#overview .dash-welcome,#overview .info-note,#overview .panel::before,#overview #dash-alerts .alert,#overview #dash-upcoming>*,#overview #dash-plays>*,#overview #dash-hours .bar{transition:none}#overview .panel:hover,#overview .dash-welcome:hover{transform:none}}
/* dashboard boxes: top line follows the rounded corners exactly (like the top cards) */
#overview .panel::before{left:0;right:0;top:0;bottom:0;height:auto;border-radius:inherit;padding-top:3px;
 background:linear-gradient(90deg,#14a37f,#3b82f6);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
 transform:none;clip-path:inset(0 100% 0 0 round 0);transition:clip-path .4s ease}
#overview .panel:hover::before{transform:none;clip-path:inset(0 0 0 0)}