:root{
  --bg:#0b0c16;
  --bg2:#111323;
  --sidebar:#251a61;
  --sidebar2:#3a268b;
  --card:#171925;
  --card2:#1d2030;
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.15);
  --text:#f7f8ff;
  --muted:#9da3b7;
  --muted2:#70778d;
  --purple:#7a4df3;
  --purple2:#9b4df1;
  --magenta:#ec3fc5;
  --coral:#ff8f76;
  --green:#39dc8c;
  --red:#ff485e;
  --yellow:#ffbd45;
  --blue:#59a9ff;
  --shadow:0 20px 50px rgba(0,0,0,.28);
  --radius:24px;
  --font:"Aeonik","Inter","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font)}
button,input,select{font:inherit}button{color:inherit}[hidden]{display:none!important}
.app{width:100%;height:100%;background:radial-gradient(circle at 78% -20%,rgba(236,63,197,.12),transparent 34%),radial-gradient(circle at 20% 115%,rgba(122,77,243,.12),transparent 36%),var(--bg)}

/* LOGIN */
.login-view{position:fixed;inset:0;display:grid;place-items:center;z-index:20;padding:24px}
.login-bg{position:fixed;inset:-12%;z-index:0;background:linear-gradient(120deg,#080511,#181047 42%,#5b1d78 72%,#2e122d);background-size:180% 180%;animation:loginFlow 18s ease-in-out infinite alternate;overflow:hidden}
.login-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 32%,rgba(122,77,243,.48),transparent 28%),radial-gradient(circle at 72% 46%,rgba(236,63,197,.35),transparent 28%),radial-gradient(circle at 82% 14%,rgba(255,143,118,.25),transparent 22%);filter:blur(28px)}
.login-bg i{position:absolute;width:720px;height:720px;border:1px solid rgba(255,255,255,.045);border-radius:50%;left:5%;top:8%;animation:ring 34s linear infinite}.login-bg i:nth-child(2){width:930px;height:930px;left:auto;right:-10%;top:12%;animation-duration:44s}.login-bg i:nth-child(3){width:520px;height:520px;left:48%;top:60%;animation-direction:reverse;animation-duration:28s}
@keyframes loginFlow{to{background-position:100% 70%}}@keyframes ring{to{transform:rotate(360deg)}}
.glass{background:rgba(17,18,27,.82);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,.13);box-shadow:var(--shadow)}
.login-card{position:relative;z-index:1;width:min(520px,92vw);padding:52px 54px 46px;border-radius:32px;background:linear-gradient(160deg,rgba(26,22,38,.94),rgba(9,10,16,.88))}
.login-logo{display:block;width:250px;margin:0 auto 24px}.login-product{text-align:center;font-size:40px;font-weight:800;letter-spacing:-.045em}.login-copy{text-align:center;color:#a7a4b7;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:8px 0 36px}.access-field span,label>span{display:block;color:#aeb3c3;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px}.access-field input,.field{width:100%;border:1px solid rgba(255,255,255,.13);background:#0c0d15;color:#fff;border-radius:14px;padding:15px 16px;outline:none;transition:.18s}.access-field input{font-size:25px;text-align:center;letter-spacing:.38em;padding:18px}.access-field input:focus,.field:focus{border-color:rgba(155,77,241,.78);box-shadow:0 0 0 4px rgba(155,77,241,.12)}.form-error{min-height:20px;margin-top:12px;text-align:center;color:#ff7f8e;font-size:13px}

/* APP SHELL */
.control-view{width:100%;height:100dvh;display:grid;grid-template-columns:112px minmax(0,1fr);padding:14px;gap:14px}
.sidebar{height:100%;border-radius:30px;background:linear-gradient(180deg,var(--sidebar),#1d184b 58%,#171532);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;padding:18px 12px;overflow:hidden}
.sidebar-brand{width:68px;height:68px;display:grid;place-items:center;margin-bottom:20px}.sidebar-brand img{width:44px;height:auto}
.sidebar-nav,.sidebar-bottom{width:100%;display:flex;flex-direction:column;gap:10px}.sidebar-bottom{margin-top:auto}
.nav-btn{width:100%;height:74px;border:0;border-radius:18px;background:transparent;color:#b9b9d0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:.18s;position:relative}.nav-btn span{font-size:25px;line-height:1}.nav-btn b{font-size:11px;letter-spacing:.02em}.nav-btn:hover{background:rgba(255,255,255,.07);color:#fff}.nav-btn.active{background:#fff;color:#2b2267;box-shadow:0 14px 32px rgba(0,0,0,.18)}.nav-btn.active:before{content:"";position:absolute;left:-12px;width:5px;height:42px;border-radius:0 8px 8px 0;background:linear-gradient(180deg,var(--magenta),var(--coral))}.nav-btn.utility{height:60px}.nav-btn.utility span{font-size:21px}.nav-btn.utility b{font-size:9px}
.workspace{height:100%;min-width:0;display:grid;grid-template-rows:82px minmax(0,1fr);gap:14px}
.topbar{border-radius:26px;background:rgba(17,18,28,.86);border:1px solid var(--line);box-shadow:0 14px 30px rgba(0,0,0,.2);display:flex;align-items:center;padding:0 24px;gap:22px;backdrop-filter:blur(18px)}
.brand-wrap{display:flex;align-items:center;gap:18px}.top-logo{width:152px;height:auto}.product-name{font-size:23px;font-weight:800;letter-spacing:-.035em;padding-left:18px;border-left:1px solid var(--line-strong)}
.top-statuses{display:flex;gap:10px;flex:1}.status-pill{height:36px;padding:0 14px;border-radius:999px;background:#11131d;border:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.08em;color:#b3b8c8}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6770ff}.status-dot.online{background:var(--green);box-shadow:0 0 15px rgba(57,220,140,.65)}.clock{text-align:right;min-width:150px}.clock strong{display:block;font-size:24px;font-variant-numeric:tabular-nums}.clock small{display:block;color:#979dae;font-size:11px;margin-top:3px;letter-spacing:.03em}
.view-stack{min-height:0;position:relative}.app-view{height:100%;min-height:0}.app-view.active{display:grid;grid-template-rows:68px minmax(0,1fr);gap:14px}
.page-title{display:flex;align-items:end;padding:0 6px}.page-title-row{justify-content:space-between;align-items:center}.page-title span{display:block;color:#777f96;font-size:10px;font-weight:800;letter-spacing:.16em}.page-title h1{margin:2px 0 0;font-size:34px;letter-spacing:-.04em}.page-title-row .source-tabs{align-self:center}

/* GENERIC CARDS */
.card{background:linear-gradient(150deg,#191b28 0%,#11131e 100%);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);pointer-events:none}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.section-label,.eyebrow{display:block;color:#82899c;font-size:10px;font-weight:800;letter-spacing:.17em}.card h2{margin:4px 0 0;font-size:24px;letter-spacing:-.035em}.badge{height:32px;padding:0 12px;border-radius:999px;background:#232635;border:1px solid var(--line);display:flex;align-items:center;font-size:10px;font-weight:800;color:#bbc0cf;letter-spacing:.07em}.badge.live{color:#bcf5d8;border-color:rgba(57,220,140,.35);background:rgba(57,220,140,.08)}
.soft-btn,.btn,.mini-action,.source-tab,.round-btn,.main-play,.volume-step,.bank-tab,.cat-chip,.bank-plus,.jingle-stop-btn{border:1px solid var(--line-strong);background:#202331;color:#fff;border-radius:14px;cursor:pointer;transition:.17s}.soft-btn:hover,.btn:hover,.mini-action:hover,.source-tab:hover,.round-btn:hover,.main-play:hover,.volume-step:hover,.bank-tab:hover,.cat-chip:hover,.bank-plus:hover,.jingle-stop-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.28)}

/* DASHBOARD */
.dashboard-grid{min-height:0;display:grid;grid-template-columns:1.05fr 1.18fr .82fr;grid-template-rows:minmax(0,1fr) 190px;gap:16px}.timer-card,.signal-card,.operation-card{padding:26px}.timer-card{grid-column:1;grid-row:1}.signal-card{grid-column:2;grid-row:1}.operation-card{grid-column:3;grid-row:1}.launch-card{grid-row:2;border:0;border-radius:24px;cursor:pointer;color:#fff;display:grid;grid-template-columns:72px 1fr 44px;align-items:center;text-align:left;padding:24px 28px;box-shadow:var(--shadow);transition:.2s}.launch-card:hover{transform:translateY(-2px) scale(1.002)}.music-launch{grid-column:1 / span 2;background:linear-gradient(125deg,#5443d9,#7957ef 58%,#b055ed)}.jingle-launch{grid-column:3;background:linear-gradient(125deg,#ed3e9e,#e35676 56%,#ff9072)}.launch-icon{width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:32px}.launch-card b{display:block;font-size:27px}.launch-card small{display:block;font-size:12px;margin-top:6px;color:rgba(255,255,255,.78);letter-spacing:.08em}.launch-arrow{font-size:52px;font-weight:300;justify-self:end;color:rgba(255,255,255,.85)}
.timer-display{font-size:128px;font-weight:800;letter-spacing:-.065em;line-height:.9;margin:28px 0 24px;font-variant-numeric:tabular-nums}.timer-config{display:grid;grid-template-columns:115px 18px 115px 150px;gap:10px;align-items:end}.timer-config label span{margin-bottom:8px}.timer-config input{width:100%;height:58px;border-radius:14px;border:1px solid var(--line-strong);background:#0d0f18;color:#fff;font-size:25px;font-weight:700;padding:0 16px}.colon{font-size:28px;color:#778096;padding-bottom:13px;text-align:center}.soft-btn{height:58px;font-size:12px;font-weight:800;letter-spacing:.05em}.timer-actions{margin-top:22px}.ride-action{width:100%;height:76px;border:0;border-radius:18px;font-size:20px;font-weight:900;letter-spacing:.02em;cursor:pointer;transition:.17s}.ride-action.start{background:linear-gradient(180deg,#2fbf74,#168d52);box-shadow:0 14px 30px rgba(47,191,116,.18),inset 0 1px 0 rgba(255,255,255,.2)}.ride-action.stop{background:linear-gradient(180deg,#ff5368,#b91e34);box-shadow:0 14px 30px rgba(255,72,94,.18),inset 0 1px 0 rgba(255,255,255,.2)}
.signal-card{display:flex;flex-direction:column;--tone:57,220,140;background:linear-gradient(145deg,rgba(15,42,31,.88),#11131e 62%)}.signal-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.signal-light{width:128px;height:128px;border-radius:50%;padding:18px;border:2px solid rgba(var(--tone),.42);box-shadow:0 0 0 14px rgba(var(--tone),.06),0 0 55px rgba(var(--tone),.16)}.signal-light span{display:block;width:100%;height:100%;border-radius:50%;background:rgb(var(--tone));box-shadow:0 0 32px rgba(var(--tone),.95),0 0 75px rgba(var(--tone),.25)}.signal-main strong{font-size:62px;letter-spacing:-.045em;line-height:1;margin-top:26px}.signal-main #alertText{display:none}.signal-red{--tone:255,72,94;background:linear-gradient(145deg,#5d111d,#2a0b12 66%,#150a0d)}.signal-card.is-flashing{animation:alarmFlash .85s ease-in-out infinite}@keyframes alarmFlash{0%,100%{box-shadow:var(--shadow),0 0 25px rgba(255,72,94,.25)}50%{box-shadow:var(--shadow),0 0 85px rgba(255,72,94,.7);filter:brightness(1.26)}}.alert-ack{height:48px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.25);border-radius:14px;font-weight:800;cursor:pointer}.alert-stack{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.alert-entry{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:12px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.1)}.alert-entry i{width:8px;height:8px;border-radius:50%;background:var(--red)}.alert-entry strong{font-size:11px}.alert-entry span{display:none}.alert-entry b{font-size:9px;color:#aeb4c5}.operation-card{display:flex;flex-direction:column}.closing-card{margin-top:26px;background:#10121c;border:1px solid var(--line);border-radius:20px;padding:20px}.closing-card span{display:block;color:#8f96a9;font-size:11px;font-weight:800;letter-spacing:.12em}.closing-card strong{display:block;margin-top:8px;font-size:62px;letter-spacing:-.05em;font-variant-numeric:tabular-nums}.operation-list{display:flex;flex-direction:column;margin-top:18px}.operation-list>div{min-height:58px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:17px}.operation-list>div:last-child{border-bottom:0}.operation-list span{color:#c4c7d4}.operation-list strong{font-size:21px;font-variant-numeric:tabular-nums}

/* MUSIC PAGE */
.source-tabs{display:flex;gap:8px;background:#151722;border:1px solid var(--line);border-radius:16px;padding:5px}.source-tab{height:46px;padding:0 22px;font-size:12px;font-weight:900;letter-spacing:.04em;background:transparent;border:0}.source-tab.active{background:linear-gradient(120deg,#5d43df,#9a3ce4);box-shadow:0 8px 22px rgba(122,77,243,.24)}
.music-workspace{height:100%;padding:20px;display:grid;grid-template-rows:minmax(0,1fr) 124px;gap:16px}.music-source{display:none;min-height:0}.music-source.active{display:grid}.music-source#localSource{grid-template-rows:62px minmax(0,1fr) 112px 30px;gap:12px}.music-source#spotifySource{grid-template-rows:minmax(0,1fr)}.music-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.category-row,.bank-tabs{display:flex;align-items:center;gap:10px;min-width:0;overflow-x:auto;padding:3px 2px;scrollbar-width:none}.category-row::-webkit-scrollbar,.bank-tabs::-webkit-scrollbar{display:none}.cat-wrap,.bank-wrap{display:flex;align-items:center;gap:5px}.cat-chip,.bank-tab,.bank-plus{height:48px;padding:0 19px;white-space:nowrap;font-size:14px;font-weight:800;background:#222536;border-color:rgba(255,255,255,.11)}.cat-chip.active,.bank-tab.active{background:linear-gradient(120deg,#6748e9,#a341e7);border-color:rgba(255,255,255,.18);box-shadow:0 8px 20px rgba(122,77,243,.22)}.cat-chip.plus,.bank-plus{width:48px;padding:0;font-size:22px}.cat-edit,.bank-edit{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:#252839;color:#fff;cursor:pointer}.library-top{display:flex;align-items:center;gap:10px;color:#8991a6}.library-top span{font-size:13px}.mini-action{height:38px;padding:0 12px;font-size:11px;font-weight:800}.track-list{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:9px;padding-right:4px}.track-row{min-height:72px;border:1px solid var(--line);background:#12141f;border-radius:17px;padding:9px 14px;display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:14px;transition:.17s}.track-row:hover{background:#1a1d2a;border-color:rgba(255,255,255,.14)}.track-row.active{background:linear-gradient(90deg,rgba(122,77,243,.18),#181b28);border-color:rgba(122,77,243,.55)}.track-play{width:44px;height:44px;border:0;border-radius:14px;background:#2d3150;color:#fff;font-size:16px;cursor:pointer}.track-row strong{display:block;font-size:17px}.track-row span{display:block;color:#8f96a8;font-size:12px;margin-top:4px}.track-index{font-variant-numeric:tabular-nums}.track-edit{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#252838;color:#fff}.library-empty,.queue-empty{height:100%;display:grid;place-items:center;color:#798197;font-size:15px}.player-dock{min-height:112px;border:1px solid var(--line);background:linear-gradient(100deg,#12141f,#171927);border-radius:20px;padding:14px 16px;display:flex;align-items:center;gap:16px}.main-play{width:74px;height:74px;border-radius:22px;background:linear-gradient(145deg,#2fbf74,#15844c);border-color:rgba(57,220,140,.35);font-size:28px;flex:0 0 74px}.now-copy{min-width:0;flex:1}.now-copy small{display:block;color:#858da3;font-size:10px;font-weight:900;letter-spacing:.14em}.now-copy strong{display:block;font-size:28px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}.now-copy span{display:block;color:#a1a8b9;font-size:14px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-actions{display:flex;gap:10px}.round-btn{width:48px;height:48px;border-radius:15px;font-size:25px}.progress-row{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:12px;color:#8b92a5;font-size:12px;font-variant-numeric:tabular-nums}.progress-row input[type=range],.volume-control input[type=range],.range-field input[type=range]{width:100%;accent-color:var(--purple2)}
.spotify-connect-card{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.spotify-orb{width:90px;height:90px;border-radius:28px;display:grid;place-items:center;background:#1ed760;color:#07160d;font-size:36px;font-weight:900;margin-bottom:18px}.spotify-connect-card strong{font-size:28px}.spotify-connect-card p{color:#8e96aa}.spotify-btn{margin-top:12px;height:50px;padding:0 20px;background:#1ed760;color:#07160d;font-weight:900}.spotify-layout{height:100%;display:grid;grid-template-rows:34px minmax(0,1fr) 112px 30px auto;gap:10px}.spotify-topline{display:flex;align-items:center;justify-content:space-between;color:#8e96a9;font-size:11px}.spotify-topline span{display:flex;align-items:center;gap:9px}.text-btn{border:0;background:none;color:#9ba3b5;font-size:10px;font-weight:900;cursor:pointer}.text-btn.danger{color:#ff7a89}.spotify-queue-wrap{min-height:0;display:grid;grid-template-rows:32px minmax(0,1fr)}.queue-title{font-size:12px;font-weight:900;color:#a7adbc;letter-spacing:.12em;display:flex;align-items:center}.spotify-queue{min-height:0;overflow:auto;display:grid;grid-auto-rows:78px;gap:8px;padding-right:3px}.queue-row{border:1px solid var(--line);background:#12141f;border-radius:16px;padding:8px 12px;display:grid;grid-template-columns:34px 56px 1fr;align-items:center;gap:12px}.queue-number{color:#6f778b;font-size:12px}.queue-row img,.queue-cover-fallback{width:54px;height:54px;border-radius:12px;object-fit:cover}.queue-cover-fallback{display:grid;place-items:center;background:#262b43}.queue-row strong{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-row small{display:block;margin-top:4px;color:#939aac;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spotify-cover{width:74px;height:74px;border-radius:16px;overflow:hidden;background:#292d45;display:grid;place-items:center;flex:0 0 74px}.spotify-cover img{width:100%;height:100%;object-fit:cover}.inline-note{padding:8px 12px;border-radius:10px;background:rgba(255,189,69,.08);color:#ffd77d;font-size:11px}
.volume-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.volume-card{background:#151722;border:1px solid var(--line);border-radius:20px;padding:16px 18px}.volume-label{display:flex;align-items:center;justify-content:space-between}.volume-label>span{display:flex;align-items:center;gap:8px}.volume-label b{font-size:14px}.volume-label small{color:#7d8599;font-size:10px;margin-left:3px}.volume-label strong{font-size:20px}.volume-control{display:grid;grid-template-columns:42px 1fr 42px;gap:10px;align-items:center;margin-top:12px}.volume-step{height:42px;border-radius:13px;font-size:21px}

/* JINGLE PAGE */
.jingle-stop-btn{height:50px;padding:0 24px;background:linear-gradient(180deg,#ff5368,#b91f35);border-color:rgba(255,72,94,.48);font-size:13px;font-weight:900;letter-spacing:.05em}.jingle-workspace{height:100%;padding:20px;display:grid;grid-template-rows:64px minmax(0,1fr);gap:16px}.jingle-toolbar{display:flex;align-items:center;gap:12px;min-width:0}.bank-tabs{flex:1}.pad-grid{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,1fr);gap:14px;padding-right:4px;align-content:start}.jingle-pad{position:relative;border:1px solid rgba(255,255,255,.13);border-radius:22px;padding:22px;cursor:pointer;overflow:hidden;background:linear-gradient(145deg,#302767,#1d1a3a);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 28px rgba(0,0,0,.2);transition:.16s;min-height:150px}.jingle-pad:nth-child(4n+2){background:linear-gradient(145deg,#4e2771,#261a3f)}.jingle-pad:nth-child(4n+3){background:linear-gradient(145deg,#203e77,#182746)}.jingle-pad:nth-child(4n+4){background:linear-gradient(145deg,#5e2d44,#321a29)}.jingle-pad:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.25);filter:brightness(1.08)}.jingle-pad:active{transform:translateY(1px) scale(.997)}.jingle-pad .pad-number{font-size:12px;color:rgba(255,255,255,.48);font-variant-numeric:tabular-nums}.jingle-pad strong{position:absolute;left:22px;right:22px;bottom:24px;font-size:27px;line-height:1.05;letter-spacing:-.02em}.jingle-pad i{position:absolute;width:130px;height:130px;border-radius:50%;right:-42px;top:-50px;background:radial-gradient(circle,rgba(255,255,255,.15),transparent 65%)}.jingle-pad.playing{background:linear-gradient(145deg,#1faa69,#0f603c);border-color:rgba(94,255,171,.75);box-shadow:0 0 0 2px rgba(57,220,140,.17),0 0 42px rgba(57,220,140,.28),inset 0 1px 0 rgba(255,255,255,.18)}.jingle-pad.playing:after{content:"LÄUFT";position:absolute;top:20px;right:20px;height:28px;padding:0 10px;border-radius:999px;background:rgba(0,0,0,.25);display:flex;align-items:center;font-size:10px;font-weight:900;letter-spacing:.08em}.jingle-pad.add-pad{background:#151722;border-style:dashed;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#8e96aa}.jingle-pad.add-pad b{font-size:34px}.jingle-pad.add-pad strong{position:static;font-size:16px}.pad-admin{position:absolute;top:14px;right:14px;display:flex;gap:6px;z-index:3}.pad-admin button{width:30px;height:30px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:#fff}.empty-box{height:100%;display:grid;place-items:center;text-align:center;color:#8c94a8}.empty-box strong{display:block;font-size:30px}.empty-box span{display:block;font-size:13px;margin-top:7px}

/* MODALS / SETTINGS */
.modal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(4,5,10,.68);backdrop-filter:blur(12px);display:grid;place-items:center;padding:24px;opacity:0;transition:.16s}.modal-backdrop.open{opacity:1}.modal{width:min(520px,94vw);max-height:90vh;overflow:auto;border-radius:26px;padding:26px;position:relative}.modal.wide{width:min(760px,94vw)}.modal-close{position:absolute;right:18px;top:18px;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:#181b28;color:#fff;font-size:22px}.modal h3{font-size:28px;margin:6px 0 18px}.modal p{color:#949bad}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.range-field{display:flex;gap:12px;align-items:center}.range-field strong{min-width:55px}.upload-zone{display:block;margin-top:14px;border:1px dashed rgba(155,77,241,.45);border-radius:16px;padding:20px;background:rgba(122,77,243,.04)}.upload-zone input{display:block;margin-bottom:12px}.upload-zone b{display:block;font-size:14px}.upload-zone span{display:block;margin-top:5px;color:#878fa2;text-transform:none;letter-spacing:0;font-size:11px}.modal-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;margin-top:20px}.btn{min-height:44px;padding:0 15px;font-weight:800}.btn-primary{background:linear-gradient(120deg,#6545e6,#b544df);border-color:transparent}.btn-danger{background:rgba(255,72,94,.12);border-color:rgba(255,72,94,.38);color:#ff8594}.btn-ghost{background:#1b1e2a}.btn.full{width:100%}
.settings-drawer{position:fixed;z-index:55;right:16px;top:16px;bottom:16px;width:min(450px,92vw);background:#151722;border:1px solid var(--line);border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.55);display:grid;grid-template-rows:80px minmax(0,1fr) 86px;transform:translateX(calc(100% + 30px));transition:.22s}.settings-drawer.open{transform:none}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line)}.drawer-head h2{margin:3px 0 0;font-size:25px}.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:#202331;color:#fff;font-size:20px}.drawer-scroll{overflow:auto;padding:18px}.drawer-scroll section{padding:15px 0;border-bottom:1px solid var(--line)}.drawer-scroll section:last-child{border-bottom:0}.drawer-scroll h3{font-size:17px;margin:0 0 12px}.setting-card{background:#1b1e2b;border:1px solid var(--line);border-radius:16px;padding:14px;margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px}.compact-time{width:128px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.toggle-row input{width:22px;height:22px;accent-color:var(--purple)}.optional-time{margin-top:12px}.drawer-foot{padding:16px 20px;border-top:1px solid var(--line)}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px}.toast{position:fixed;z-index:90;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:#191c29;border:1px solid var(--line-strong);border-radius:14px;padding:12px 18px;transition:.18s;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translateX(-50%)}.loading-overlay{position:fixed;z-index:80;inset:0;background:rgba(6,7,12,.75);display:grid;place-items:center;align-content:center;gap:12px}.loading-overlay img{width:70px;animation:loadPulse 1s ease-in-out infinite alternate}.loading-overlay span{font-weight:800}@keyframes loadPulse{to{transform:scale(1.08);filter:brightness(1.25)}}

/* 1920x1080 is primary. Lower sizes scroll inside views rather than shrinking controls. */
@media(max-width:1500px){
  .control-view{grid-template-columns:96px minmax(0,1fr);padding:10px;gap:10px}.sidebar{border-radius:24px;padding:12px 9px}.nav-btn{height:66px}.workspace{grid-template-rows:72px minmax(0,1fr);gap:10px}.topbar{border-radius:22px;padding:0 18px}.top-logo{width:132px}.product-name{font-size:20px}.page-title h1{font-size:29px}.dashboard-grid{grid-template-rows:minmax(0,1fr) 150px;gap:12px}.timer-card,.signal-card,.operation-card{padding:20px}.timer-display{font-size:100px;margin:20px 0}.signal-light{width:100px;height:100px}.signal-main strong{font-size:48px}.closing-card strong{font-size:48px}.operation-list>div{min-height:48px;font-size:14px}.operation-list strong{font-size:17px}.launch-card{padding:18px 22px}.launch-card b{font-size:23px}.music-workspace,.jingle-workspace{padding:16px}.pad-grid{grid-auto-rows:minmax(135px,1fr)}.jingle-pad strong{font-size:23px}.now-copy strong{font-size:24px}
}
@media(max-width:1180px){
  html,body{overflow:auto}.control-view{height:auto;min-height:100vh;grid-template-columns:86px minmax(820px,1fr)}.workspace{min-height:100vh}.view-stack{min-height:760px}.dashboard-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}.timer-card{grid-column:1}.signal-card{grid-column:2}.operation-card{grid-column:1 / -1}.music-launch{grid-column:1}.jingle-launch{grid-column:2}.pad-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.volume-grid{grid-template-columns:1fr}
}

/* ======================================================================
   RideControl 2.9 — calmer blue operator UI / 1920x1080 primary
   ====================================================================== */
:root{
  --bg:#080b14;
  --bg2:#0d1323;
  --sidebar:#17255b;
  --sidebar2:#253d94;
  --card:#111622;
  --card2:#171e2d;
  --purple:#536dff;
  --purple2:#6b7cff;
  --magenta:#8e5cff;
  --blue:#4f8fff;
}
.app{
  background:
    radial-gradient(circle at 28% -12%,rgba(58,91,210,.22),transparent 34%),
    radial-gradient(circle at 92% 18%,rgba(38,78,180,.14),transparent 30%),
    radial-gradient(circle at 15% 110%,rgba(45,68,158,.13),transparent 33%),
    linear-gradient(145deg,#070a12,#0b1020 58%,#080b14);
}
.sidebar{background:linear-gradient(180deg,#21377f 0%,#18275d 48%,#111a3c 100%)}
.nav-btn.active:before{background:linear-gradient(180deg,#5f83ff,#70a2ff)}
.topbar{background:rgba(12,16,28,.9)}
.card{background:linear-gradient(150deg,#131927 0%,#0d111c 100%)}

/* Dashboard: only the three operational cards, nothing decorative below. */
.dashboard-grid{
  grid-template-columns:1.02fr 1.16fr .82fr;
  grid-template-rows:minmax(0,1fr);
  gap:18px;
}
.timer-card,.signal-card,.operation-card{grid-row:1;min-height:0}
.timer-card{grid-column:1}.signal-card{grid-column:2}.operation-card{grid-column:3}
.launch-card{display:none!important}
.timer-display{margin:34px 0 30px;font-size:clamp(112px,7vw,148px)}
.timer-config{grid-template-columns:122px 20px 122px minmax(145px,1fr)}
.timer-actions{margin-top:28px}
.ride-action{height:82px;font-size:22px}

/* Operation list: countdown is a normal row and has no seconds. */
.operation-card{padding:28px;display:flex;flex-direction:column}
.operation-list{margin-top:26px;display:flex;flex-direction:column;gap:0}
.operation-list>div{min-height:68px;font-size:18px}
.operation-list strong{font-size:22px}
.operation-list .closing-row{min-height:82px;border-radius:17px;background:#0a0f1a;border:1px solid rgba(105,135,220,.17);padding:0 16px;margin-bottom:8px}
.operation-list .closing-row span{font-weight:800;color:#eef2ff}
.operation-list .closing-row strong{font-size:34px;color:#fff;letter-spacing:-.03em}
.closing-card{display:none!important}

/* Alarm must blink as a fully filled card. No outer neon pulse. */
.signal-card{background:linear-gradient(145deg,#10231c,#0d1517 72%);box-shadow:var(--shadow)}
.signal-card.is-flashing{
  animation:fullCardAlarm .52s steps(1,end) infinite!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:var(--shadow)!important;
  filter:none!important;
}
@keyframes fullCardAlarm{
  0%,49%{background:#b71128;color:#fff}
  50%,100%{background:#490812;color:#fff}
}
.signal-card.is-flashing:before{background:transparent!important}
.signal-card.is-flashing .signal-light{border-color:rgba(255,255,255,.55);box-shadow:none}
.signal-card.is-flashing .signal-light span{background:#fff;box-shadow:none}
.signal-card.is-flashing .signal-main strong{color:#fff}
.signal-main strong{font-size:clamp(54px,3.8vw,72px)}

/* MUSIC PAGE — Local and Spotify are always visible, stacked and spacious. */
.app-view[data-view-panel="music"].active{grid-template-rows:58px minmax(0,1fr);gap:12px}
.music-page-grid{
  min-height:0;height:100%;display:grid;
  grid-template-rows:minmax(250px,.82fr) minmax(320px,1.08fr) 112px;
  gap:14px;
}
.music-source{display:grid!important;min-height:0}
.source-block{padding:18px 20px;overflow:hidden}
.source-block-head{height:42px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.source-block-head h2{font-size:24px;margin:2px 0 0;letter-spacing:-.03em}
.local-block{grid-template-rows:42px 54px minmax(54px,1fr) 82px 24px;gap:9px}
.spotify-block{grid-template-rows:42px minmax(0,1fr);gap:10px}
.music-toolbar{display:contents}
.category-row{height:54px;gap:10px;padding:2px 0}
.cat-chip,.bank-tab,.bank-plus{height:48px;min-height:48px;padding:0 20px;font-size:14px;border-radius:13px}
.track-list{gap:7px;overflow:auto;padding-right:3px}
.track-row{min-height:52px;padding:7px 12px;border-radius:13px;grid-template-columns:38px minmax(0,1fr) auto auto;gap:10px}
.track-play{width:36px;height:36px;border-radius:10px}
.track-row strong{font-size:15px}.track-row span{font-size:11px;margin-top:2px}
.player-dock{min-height:82px;padding:9px 12px;border-radius:16px;background:#0b0f19}
.main-play{width:58px;height:58px;flex:0 0 58px;border-radius:16px;font-size:22px}
.now-copy strong{font-size:22px;margin-top:3px}.now-copy span{font-size:12px;margin-top:3px}
.now-actions{gap:8px}.round-btn{width:42px;height:42px;border-radius:13px;font-size:21px}
.progress-row{grid-template-columns:42px 1fr 42px;gap:9px;font-size:10px}
.spotify-source-head .spotify-topline{min-width:0}
.spotify-topline{font-size:11px}.spotify-topline b{max-width:260px;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spotify-layout{min-height:0;display:grid;grid-template-rows:82px 24px minmax(0,1fr) auto;gap:9px}
.spotify-player-dock{order:0}
.spotify-cover{width:58px;height:58px;flex:0 0 58px;border-radius:13px}
.spotify-queue-wrap{min-height:0;display:grid;grid-template-rows:28px minmax(0,1fr);order:2}
.queue-title{font-size:11px}
.spotify-queue{min-height:0;overflow:auto;display:grid;grid-auto-rows:50px;gap:6px;padding-right:3px}
.queue-row{min-height:50px;border-radius:12px;padding:5px 10px;grid-template-columns:28px 38px 1fr;gap:9px;background:#0c111c}
.queue-row img,.queue-cover-fallback{width:36px;height:36px;border-radius:8px}
.queue-row strong{font-size:13px}.queue-row small{font-size:10px;margin-top:2px}.queue-number{font-size:10px}
.inline-note{font-size:10px;padding:6px 9px}
.spotify-connect-card{height:100%;min-height:0}

/* Three independent dark volume controls: Local / Spotify / Jingles. */
.volume-grid-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.volume-card{background:linear-gradient(180deg,#0b0f17,#080b11);border-color:rgba(255,255,255,.10);border-radius:17px;padding:13px 15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.volume-label b{font-size:13px}.volume-label strong{font-size:18px}.volume-label small{font-size:9px}
.volume-control{grid-template-columns:38px 1fr 38px;gap:9px;margin-top:9px}.volume-step{height:36px;border-radius:10px;background:#111722;border-color:#252d3c;color:#d9deea}
.volume-control input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:#202735;accent-color:#738092;outline:none}
.volume-control input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:#202735}
.volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#e6eaf2;border:3px solid #596275;margin-top:-5px;box-shadow:0 1px 5px rgba(0,0,0,.5)}
.volume-control input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:#202735}
.volume-control input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#e6eaf2;border:3px solid #596275}
.volume-control input[type=range]:disabled{opacity:.4}
.spotify-dot{background:#61a1ff;box-shadow:0 0 12px rgba(97,161,255,.45)}

/* Jingles: one calm green state, strong red while playing. */
.jingle-pad,
.jingle-pad:nth-child(4n+2),
.jingle-pad:nth-child(4n+3),
.jingle-pad:nth-child(4n+4){
  background:linear-gradient(145deg,#145a42,#0c3829)!important;
  border-color:rgba(76,221,157,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 28px rgba(0,0,0,.18)!important;
}
.jingle-pad:hover{filter:brightness(1.12)}
.jingle-pad.playing{
  background:linear-gradient(145deg,#c71d36,#72101f)!important;
  border-color:rgba(255,101,120,.72)!important;
  box-shadow:0 0 0 2px rgba(255,72,94,.12),0 0 36px rgba(255,72,94,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.jingle-pad.playing:after{background:rgba(0,0,0,.28)}
.jingle-pad.add-pad{background:#101622!important;border-color:rgba(255,255,255,.13)!important}
.bank-tab.active{background:linear-gradient(135deg,#365ac4,#4d6cdd);box-shadow:0 8px 20px rgba(65,99,210,.22)}

/* Admin: only one Ducking value remains. */
.settings-drawer{background:#101621}
.setting-card{background:#151d2b}

@media(max-width:1500px){
  .dashboard-grid{grid-template-rows:minmax(0,1fr)}
  .music-page-grid{grid-template-rows:minmax(220px,.8fr) minmax(285px,1.1fr) 104px}
  .timer-display{font-size:96px;margin:24px 0}
  .timer-config{grid-template-columns:100px 16px 100px minmax(120px,1fr)}
  .operation-list{margin-top:16px}.operation-list>div{min-height:53px;font-size:14px}.operation-list strong{font-size:17px}.operation-list .closing-row{min-height:64px}.operation-list .closing-row strong{font-size:27px}
  .signal-main strong{font-size:48px}
  .volume-card{padding:10px 12px}.volume-control{margin-top:7px}
}
@media(max-width:1180px){
  .music-page-grid{height:auto;grid-template-rows:auto auto auto}.volume-grid-three{grid-template-columns:1fr}
}
/* Specificity fixes for the split Music page. */
#localSource.local-block{grid-template-rows:42px 54px minmax(54px,1fr) 82px 24px!important;gap:9px!important;height:auto!important}
#spotifySource.spotify-block{grid-template-rows:42px minmax(0,1fr)!important;gap:10px!important;height:auto!important}
/* Lock desktop workspaces to the viewport; internal lists scroll instead. */
@media(min-width:1181px){
  .control-view{height:100dvh!important;min-height:0!important;overflow:hidden!important}
  .workspace{height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}
  .view-stack{height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}
  .app-view,.app-view.active{height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}
  .music-page-grid{height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}
}
/* Compact the Local block without shrinking labels; use the width for Spotify queue density. */
.source-block{padding:12px 16px}
#localSource.local-block{grid-template-rows:34px 48px minmax(44px,1fr) 64px 20px!important;gap:6px!important}
#spotifySource.spotify-block{grid-template-rows:34px minmax(0,1fr)!important;gap:7px!important}
.source-block-head{height:34px}.source-block-head h2{font-size:21px}.source-block-head .section-label{font-size:9px}
.category-row{height:48px}.cat-chip{height:44px;min-height:44px;padding:0 17px;font-size:13px}
.track-row{min-height:42px;padding:5px 10px;grid-template-columns:34px minmax(0,1fr) auto auto}.track-play{width:32px;height:32px}.track-row strong{font-size:14px}.track-row span{font-size:10px}
.player-dock{min-height:64px;padding:6px 10px}.main-play{width:48px;height:48px;flex-basis:48px;border-radius:13px}.now-copy strong{font-size:20px}.now-copy small{font-size:9px}.now-copy span{font-size:11px}.round-btn{width:38px;height:38px;font-size:19px}
.spotify-layout{grid-template-rows:64px 20px minmax(0,1fr) auto;gap:6px}
.spotify-cover{width:48px;height:48px;flex-basis:48px}.progress-row{font-size:9px;grid-template-columns:38px 1fr 38px}
.spotify-queue-wrap{grid-template-rows:22px minmax(0,1fr)}
.spotify-queue{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:50px;gap:6px;align-content:start}
.queue-row{min-width:0;grid-template-columns:24px 34px minmax(0,1fr);padding:5px 7px;gap:7px}.queue-row img,.queue-cover-fallback{width:32px;height:32px}.queue-row strong{font-size:11px}.queue-row small{font-size:9px}.queue-number{font-size:9px}
@media(max-width:1500px){.spotify-queue{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Countdown row intentionally matches the other Betrieb rows. */
.operation-list .closing-row{min-height:68px;border-radius:0;background:transparent;border:0;border-bottom:1px solid var(--line);padding:0;margin:0}
.operation-list .closing-row span{font-weight:400;color:#c4c7d4}.operation-list .closing-row strong{font-size:22px;letter-spacing:0}
@media(max-width:1500px){.operation-list .closing-row{min-height:53px}.operation-list .closing-row strong{font-size:17px}}

/* ======================================================================
   RideControl 3.0 — four clear workspaces: Control / Musik / Spotify / Jingles
   1920×1080 @ 100% is the primary operator layout.
   ====================================================================== */

/* Sidebar: four primary areas stay readable. */
.sidebar-nav{gap:8px}
.sidebar-nav .nav-btn{height:68px}
.sidebar-nav .nav-btn span{font-size:23px}
.sidebar-nav .nav-btn b{font-size:11px}

/* Betrieb: countdown is a counter, not a wall-clock time. */
.operation-list .counter-row{
  margin-top:8px!important;
  border:1px solid rgba(255,189,69,.24)!important;
  background:rgba(255,189,69,.07)!important;
  border-radius:14px!important;
  padding:0 14px!important;
}
.operation-list .counter-row span{color:#ffc65c!important;font-weight:800!important}
.operation-list .counter-row strong{color:#ffbd45!important;font-size:27px!important;font-variant-numeric:tabular-nums}

/* Shared pages */
.app-view[data-view-panel="music"].active,
.app-view[data-view-panel="spotify"].active,
.app-view[data-view-panel="jingles"].active{grid-template-rows:68px minmax(0,1fr);gap:14px}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.panel-title-row h2{font-size:28px;margin:3px 0 0;letter-spacing:-.035em}
.page-bottom-control{min-height:0}

/* ----------------------------------------------------------------------
   LOCAL MUSIC — playlists left, titles right, fixed transport + volume below
   ---------------------------------------------------------------------- */
.local-page{
  height:100%;min-height:0;
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) 132px;
  gap:16px;
}
.playlist-panel,.library-panel,.transport-card{min-height:0;padding:22px}
.playlist-panel{grid-column:1;grid-row:1;display:grid;grid-template-rows:56px minmax(0,1fr);gap:14px}
.playlist-list{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px}
.playlist-list>.cat-chip,.playlist-list>.cat-wrap{width:100%;flex:0 0 auto}
.playlist-list .cat-wrap{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:7px;align-items:center}
.playlist-list .cat-chip{
  width:100%;height:56px;min-height:56px;padding:0 18px;border-radius:15px;
  text-align:left;font-size:16px;font-weight:800;background:#202438;border-color:rgba(255,255,255,.1);
}
.playlist-list .cat-chip.active{background:linear-gradient(135deg,#4f42c8,#6f4ee0);border-color:rgba(142,118,255,.55);box-shadow:0 10px 24px rgba(64,50,174,.18)}
.playlist-list .cat-chip.plus{text-align:center;font-size:24px}
.playlist-list .cat-edit{width:38px;height:38px;border-radius:11px;background:#171b29;border:1px solid rgba(255,255,255,.12);color:#dfe3ef;cursor:pointer}
.library-panel{grid-column:2;grid-row:1;display:grid;grid-template-rows:56px minmax(0,1fr);gap:14px}
.library-top{display:flex;align-items:center;gap:12px;color:#959caf;font-size:13px}
.library-top .mini-action{height:40px;padding:0 14px;font-size:11px}
.library-track-list{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px}
.library-track-list .track-row{
  min-height:66px;padding:10px 14px;border-radius:15px;
  grid-template-columns:44px minmax(0,1fr) 38px 36px;gap:12px;
  background:#111522;border:1px solid rgba(255,255,255,.075);
}
.library-track-list .track-row.active{background:linear-gradient(90deg,rgba(77,76,207,.25),rgba(16,21,34,.94));border-color:rgba(116,104,232,.38)}
.library-track-list .track-play{width:42px;height:42px;border-radius:12px}
.library-track-list .track-row strong{font-size:17px}
.library-track-list .track-row span{font-size:12px;margin-top:3px}
.transport-card{
  grid-column:1 / span 2;grid-row:2;
  display:grid;grid-template-columns:minmax(0,1fr) 430px;grid-template-rows:72px 24px;
  column-gap:24px;row-gap:5px;align-items:center;
}
.transport-main{display:flex;align-items:center;gap:15px;min-width:0}
.transport-card .main-play{width:58px;height:58px;flex:0 0 58px}
.transport-card .now-copy{min-width:0;flex:1}
.transport-card .now-copy strong{font-size:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.transport-card .now-copy span{font-size:13px}
.transport-card .progress-row{grid-column:1;grid-row:2;margin:0}
.transport-card .page-volume{grid-column:2;grid-row:1 / span 2;align-self:stretch;padding:13px 16px;border-radius:16px;background:#0c1019;border:1px solid rgba(255,255,255,.085);display:flex;flex-direction:column;justify-content:center}

/* ----------------------------------------------------------------------
   SPOTIFY — independent dashboard page
   ---------------------------------------------------------------------- */
.spotify-page{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 132px;gap:16px}
.spotify-main-card{min-height:0;padding:22px;display:grid;grid-template-rows:56px minmax(0,1fr);gap:14px}
.spotify-page-content{min-height:0;display:grid;grid-template-rows:96px 26px minmax(0,1fr) auto;gap:10px}
.spotify-page-content .spotify-player-dock{min-height:96px;padding:12px 16px;background:#0c111d;border:1px solid rgba(255,255,255,.08);border-radius:18px}
.spotify-page-content .main-play{width:66px;height:66px;flex:0 0 66px}
.spotify-page-content .spotify-cover{width:66px;height:66px;flex:0 0 66px}
.spotify-page-content .now-copy strong{font-size:28px}
.spotify-page-content .now-copy span{font-size:14px}
.spotify-page-content .progress-row{margin:0}
.spotify-page-content .spotify-queue-wrap{min-height:0;display:grid;grid-template-rows:28px minmax(0,1fr);gap:7px}
.spotify-page-content .spotify-queue{
  min-height:0;overflow:auto;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:68px;gap:9px;align-content:start;padding-right:4px;
}
.spotify-page-content .queue-row{min-width:0;min-height:68px;border-radius:14px;padding:8px 10px;grid-template-columns:28px 46px minmax(0,1fr);gap:10px;background:#101522;border:1px solid rgba(255,255,255,.065)}
.spotify-page-content .queue-row img,.spotify-page-content .queue-cover-fallback{width:46px;height:46px;border-radius:10px}
.spotify-page-content .queue-row strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spotify-page-content .queue-row small{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-volume-card{padding:18px 22px;display:grid;grid-template-columns:minmax(0,1fr) 430px;grid-template-rows:auto auto;column-gap:24px;align-content:center}
.page-volume-card .volume-label,.page-volume-card .volume-control{grid-column:2}
.page-volume-card:before{content:"AUSGANG";position:relative;grid-column:1;grid-row:1 / span 2;align-self:center;color:#6f7890;font-size:11px;font-weight:800;letter-spacing:.18em;background:none;height:auto}

/* ----------------------------------------------------------------------
   JINGLES — fixed 8x8 matrix per bank
   ---------------------------------------------------------------------- */
.jingle-page{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 132px;gap:16px}
.jingle-workspace{min-height:0;padding:18px;display:grid;grid-template-rows:58px minmax(0,1fr);gap:12px}
.jingle-toolbar{min-height:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bank-tabs{display:flex;gap:9px;align-items:center;overflow-x:auto;min-width:0}
.bank-tab,.bank-plus{height:48px;min-height:48px;padding:0 18px;font-size:14px;border-radius:13px}
.pad-grid-8x8{
  min-height:0!important;height:100%!important;overflow:hidden!important;
  display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;grid-template-rows:repeat(8,minmax(0,1fr))!important;
  gap:7px!important;align-content:stretch!important;
}
.pad-cell{min-width:0;min-height:0;position:relative;border-radius:12px;overflow:hidden}
.pad-cell.empty{border:1px dashed rgba(255,255,255,.075);background:rgba(255,255,255,.018)}
.pad-cell.empty.admin:hover{border-color:rgba(122,101,224,.48);background:rgba(90,72,190,.07)}
.empty-pad-add{position:absolute;inset:0;border:0;background:transparent;color:#6e7588;font-size:23px;cursor:pointer;opacity:.22;transition:.15s}
.pad-cell.empty.admin:hover .empty-pad-add{opacity:.95;color:#c7ccef}
.pad-cell.drag-over{outline:2px solid #7c78ff;outline-offset:-2px;background:rgba(93,87,220,.14)}
.pad-cell .jingle-pad{
  width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:9px 11px!important;border-radius:12px!important;
  display:flex!important;flex-direction:column;justify-content:flex-end;align-items:flex-start;cursor:pointer;
  background:linear-gradient(145deg,#165d46,#0c372a)!important;border:1px solid rgba(75,221,158,.28)!important;
}
.pad-cell .jingle-pad .pad-number{position:absolute;left:10px;top:8px;font-size:9px;color:rgba(255,255,255,.48)}
.pad-cell .jingle-pad strong{font-size:13px!important;line-height:1.12;max-width:100%;overflow:hidden;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.pad-cell .jingle-pad .pad-countdown{margin-top:7px;color:rgba(255,255,255,.92);font-size:12px!important;font-weight:850;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.035em}
.pad-cell .jingle-pad.playing{background:linear-gradient(145deg,#cf233c,#7b1122)!important;border-color:rgba(255,116,132,.78)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 22px rgba(255,50,76,.18)!important}
.pad-cell .jingle-pad.dragging{opacity:.42}
.pad-cell .pad-admin{position:absolute;right:6px;top:6px;display:flex;gap:4px}
.pad-cell .pad-admin button{width:24px;height:24px;border-radius:8px;border:1px solid rgba(255,255,255,.13);background:rgba(7,9,14,.7);color:#fff;cursor:pointer;font-size:11px}

/* Same volume geometry on Musik / Spotify / Jingles pages. */
.page-volume .volume-label,.page-volume-card .volume-label{display:flex;align-items:center;justify-content:space-between}
.page-volume .volume-label span,.page-volume-card .volume-label span{display:flex;align-items:center;gap:9px}
.page-volume .volume-label b,.page-volume-card .volume-label b{font-size:14px}
.page-volume .volume-label strong,.page-volume-card .volume-label strong{font-size:20px}
.page-volume .volume-control,.page-volume-card .volume-control{display:grid;grid-template-columns:40px 1fr 40px;gap:10px;align-items:center;margin-top:10px}
.page-volume .volume-step,.page-volume-card .volume-step{height:38px;background:#121824;border-color:#263043}
.page-volume input[type=range],.page-volume-card input[type=range]{-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:#202838;outline:none}
.page-volume input[type=range]::-webkit-slider-runnable-track,.page-volume-card input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:#202838}
.page-volume input[type=range]::-webkit-slider-thumb,.page-volume-card input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#e9edf5;border:3px solid #5d667a;margin-top:-5px}

/* Keep fixed desktop geometry at the target workstation. */
@media(min-width:1600px) and (min-height:900px){
  .control-view{grid-template-columns:112px minmax(0,1fr)}
  .workspace{grid-template-rows:82px minmax(0,1fr)}
}
@media(max-width:1599px){
  .local-page{grid-template-columns:270px minmax(0,1fr)}
  .spotify-page-content .spotify-queue{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pad-grid-8x8{gap:5px!important}
  .pad-cell .jingle-pad strong{font-size:12px!important}
}


/* ======================================================================
   RideControl 3.1 — alarm follow-up, 8x4 Jingle grid, playlist cleanup
   ====================================================================== */
.alert-stack{display:none!important}
.operation-list{flex:1;min-height:0}
.operation-list>div{width:100%;padding:0 12px;border-radius:11px;transition:background .12s linear,border-color .12s linear,color .12s linear}
.operation-list>div.attention{background:rgba(205,32,53,.14);box-shadow:inset 3px 0 0 rgba(255,70,90,.82);border-bottom-color:rgba(255,70,90,.16)}
.operation-list>div.attention span{color:#ffd7dc}.operation-list>div.attention strong{color:#ff8795}
.operation-list .counter-row{margin-top:auto!important;margin-bottom:0!important;width:100%!important;min-height:68px!important;padding:0 12px!important;border-radius:11px!important;background:rgba(255,174,54,.08)!important;border:1px solid rgba(255,174,54,.34)!important}
.operation-list .counter-row span{color:#ffc65c!important;font-weight:800!important}.operation-list .counter-row strong{color:#ffbd45!important;font-size:25px!important}
.playlist-list .cat-wrap{position:relative!important;display:block!important;width:100%!important}.playlist-list .cat-wrap .cat-chip{width:100%!important;padding-right:58px!important}.playlist-list .cat-wrap .cat-edit{position:absolute!important;right:9px!important;top:9px!important;width:38px!important;height:38px!important;z-index:2}.playlist-list>.cat-chip.plus{width:100%!important}
.pad-grid-8x4{min-height:0!important;height:100%!important;overflow:hidden!important;display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;grid-template-rows:repeat(4,minmax(0,1fr))!important;gap:8px!important;align-content:stretch!important}
.pad-grid-8x4 .pad-cell .jingle-pad strong{font-size:15px!important;line-height:1.12!important}.pad-grid-8x4 .pad-cell .jingle-pad .pad-number{font-size:10px!important}.pad-grid-8x4 .pad-cell .jingle-pad .pad-countdown{font-size:13px!important}
@media(max-width:1599px){.pad-grid-8x4{gap:6px!important}.pad-grid-8x4 .pad-cell .jingle-pad strong{font-size:13px!important}.pad-grid-8x4 .pad-cell .jingle-pad .pad-countdown{font-size:11px!important}}

/* ===== RideControl 3.2 refinements ===== */
/* Betrieb: eine einzige, gleichmäßige Warnfläche – kein linker Doppel-Akzent. */
.operation-list>div.attention{
  background:rgba(205,32,53,.17)!important;
  border:1px solid rgba(255,70,90,.23)!important;
  box-shadow:none!important;
}
.operation-list>div.attention span{color:#ffe2e6!important}
.operation-list>div.attention strong{color:#ff8795!important}
.operation-list .counter-row{
  margin-top:auto!important;
  width:100%!important;
  min-height:68px!important;
  border-radius:11px!important;
}

/* Playlists bleiben immer identisch breit. */
.playlist-list{align-items:stretch}
.playlist-list>.cat-wrap,.playlist-list>.cat-chip{width:100%!important}
.playlist-list .cat-chip{min-height:58px!important;width:100%!important}

/* Lokale Bibliothek: größere, coverbasierte Listenansicht. */
.library-panel{min-height:0}
.library-track-list{gap:10px!important}
.library-track-list .track-row{
  min-height:78px!important;
  padding:10px 14px!important;
  grid-template-columns:46px 58px minmax(0,1fr) 44px 38px!important;
  gap:13px!important;
  align-items:center;
  border-radius:16px!important;
}
.library-track-list .track-play{width:52px!important;height:44px!important;border-radius:13px!important;font-size:18px}
.track-cover{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#22283a;display:block}
.track-cover-fallback{display:grid;place-items:center;color:#aab3ca;font-size:22px;background:linear-gradient(145deg,#242b42,#151a29)}
.track-copy{min-width:0}
.library-track-list .track-row strong{font-size:19px!important;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.library-track-list .track-row .track-copy span{font-size:13px!important;color:#9ca6bb;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-index{font-size:13px!important;color:#7f899f!important;text-align:right}
.track-delete{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,89,105,.24);background:rgba(255,70,90,.08);color:#ff8795;font-size:18px;cursor:pointer}
.track-delete:hover{background:rgba(255,70,90,.18)}

/* Lokaler Player bekommt ebenfalls das Cover vorne. */
.local-cover{width:68px;height:68px;border-radius:15px;overflow:hidden;background:#20263a;display:grid;place-items:center;flex:0 0 68px}
.local-cover img{width:100%;height:100%;object-fit:cover}
.local-cover div{font-size:26px;color:#aeb8d1}

/* Spotify: echte große Liste statt kleiner Kachel-/Grid-Ansicht. */
.spotify-page-content .spotify-queue{
  display:flex!important;
  flex-direction:column!important;
  gap:9px!important;
  overflow:auto!important;
  padding-right:5px!important;
}
.spotify-page-content .queue-row{
  min-height:82px!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:38px 64px minmax(0,1fr)!important;
  gap:14px!important;
  padding:9px 14px!important;
  border-radius:16px!important;
  background:#101522!important;
  border:1px solid rgba(255,255,255,.075)!important;
}
.spotify-page-content .queue-row img,.spotify-page-content .queue-cover-fallback{
  width:62px!important;height:62px!important;border-radius:12px!important;object-fit:cover
}
.spotify-page-content .queue-row strong{font-size:18px!important;line-height:1.08!important}
.spotify-page-content .queue-row small{font-size:13px!important;margin-top:5px!important;color:#98a3b9!important}
.spotify-page-content .queue-number{font-size:14px!important;color:#7d879c!important;text-align:center}

/* Importdialog bewusst simpel. */
.import-note{margin-top:12px;padding:12px 14px;border-radius:12px;background:#101522;border:1px solid rgba(255,255,255,.07);color:#9ea8bd;font-size:12px;line-height:1.45}

@media(max-width:1500px){
 .library-track-list .track-row{min-height:68px!important;grid-template-columns:40px 50px minmax(0,1fr) 38px 34px!important;padding:8px 11px!important}
 .track-cover{width:48px;height:48px;border-radius:10px}
 .library-track-list .track-row strong{font-size:17px!important}
 .spotify-page-content .queue-row{min-height:70px!important;grid-template-columns:32px 52px minmax(0,1fr)!important;padding:7px 11px!important}
 .spotify-page-content .queue-row img,.spotify-page-content .queue-cover-fallback{width:50px!important;height:50px!important}
 .spotify-page-content .queue-row strong{font-size:16px!important}.spotify-page-content .queue-row small{font-size:11px!important}
}


/* ===== RideControl 3.3 ===== */
.operation-list>div.attention{background:rgba(197,32,52,.22)!important;border-bottom-color:rgba(255,96,112,.18)!important;box-shadow:none!important;animation:operationAttentionBlink 1.6s steps(2,end) infinite}
.operation-list>div.attention span{color:#ffe5e8!important}.operation-list>div.attention strong{color:#ff96a3!important}
@keyframes operationAttentionBlink{0%,100%{background:rgba(197,32,52,.16)}50%{background:rgba(197,32,52,.31)}}
.operation-list>div.done{background:rgba(35,170,102,.14)!important;border-bottom-color:rgba(62,218,137,.13)!important;box-shadow:none!important;animation:none!important}
.operation-list>div.done span{color:#c9f5dd!important}.operation-list>div.done strong{color:#6ee4a6!important}
.operation-list .counter-row{margin-top:auto!important;width:100%!important;flex:0 0 auto}
.admin-pin-modal{width:min(440px,92vw)!important;padding:42px 42px 34px!important;border-radius:26px!important;text-align:center;background:linear-gradient(160deg,rgba(18,18,28,.96),rgba(7,8,16,.95))!important}
.admin-pin-logo{display:block;width:210px;height:auto;margin:0 auto 20px}.admin-pin-product{font-size:32px;font-weight:800;letter-spacing:-.045em}.admin-pin-title{margin:6px 0 28px;color:#9ca3b8;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.admin-access-field{text-align:left}.admin-access-field input{width:100%;border:1px solid rgba(255,255,255,.14);background:#080910;color:#fff;border-radius:14px;padding:17px 15px;outline:none;font-size:24px;text-align:center;letter-spacing:.38em;transition:.2s}.admin-access-field input:focus{border-color:rgba(114,77,237,.75);box-shadow:0 0 0 4px rgba(114,77,237,.10)}
.library-track-list .track-row{transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}.library-track-list .track-row.playing{background:linear-gradient(90deg,rgba(28,126,78,.36),rgba(13,28,24,.97))!important;border-color:rgba(72,224,144,.72)!important;box-shadow:inset 0 0 0 1px rgba(72,224,144,.12),0 8px 24px rgba(24,131,78,.10)}.library-track-list .track-row.playing .track-play{background:linear-gradient(145deg,#32c97b,#168b50)!important;color:#fff!important;box-shadow:0 0 18px rgba(50,201,123,.22)}.library-track-list .track-row.playing strong{color:#fff!important}.library-track-list .track-row.active:not(.playing){background:rgba(92,73,186,.16)!important;border-color:rgba(122,101,230,.34)!important}
.transport-main .now-copy{padding-right:12px}
@media(max-width:1500px){.admin-pin-modal{padding:34px 34px 30px!important}.admin-pin-logo{width:185px}.admin-pin-product{font-size:28px}}

/* ===== RideControl 3.4 =====
   Admin-Betriebszeilen sauber ausrichten + Playlist Drag & Drop
   ========================================================================== */
.settings-drawer .optional-setting{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 118px!important;
  align-items:center!important;
  gap:18px!important;
  padding:15px 16px!important;
}
.settings-drawer .optional-setting .toggle-row{
  width:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px!important;
  margin:0!important;
  min-width:0;
}
.settings-drawer .optional-setting .toggle-row > span{
  display:flex!important;
  align-items:center!important;
  min-width:0;
  flex:0 1 auto;
  margin:0!important;
}
.settings-drawer .optional-setting .toggle-row strong{
  display:block;
  line-height:22px;
}
.settings-drawer .optional-setting .toggle-row input[type="checkbox"]{
  flex:0 0 22px!important;
  width:22px!important;
  height:22px!important;
  margin:0!important;
  order:2;
}
.settings-drawer .optional-setting .toggle-row > i{display:none!important}
.settings-drawer .optional-setting .optional-time{
  width:118px!important;
  margin:0!important;
  justify-self:end;
}
.settings-drawer .optional-setting .optional-time > span{
  margin-bottom:7px!important;
  line-height:1;
}
.settings-drawer .optional-setting .optional-time .field{
  width:118px!important;
}

/* Playlist-Reihenfolge im Admin: die komplette Playlist-Taste ist der Drag-Bereich. */
.playlist-list .cat-wrap.admin-sortable .cat-chip{
  cursor:grab!important;
  user-select:none;
}
.playlist-list .cat-wrap.admin-sortable .cat-chip:active{cursor:grabbing!important}
.playlist-list .cat-wrap.dragging{
  opacity:.45;
  transform:scale(.985);
}
.playlist-list .cat-wrap.drag-over::before{
  content:"";
  position:absolute;
  left:2px;right:2px;top:-5px;
  height:3px;
  border-radius:999px;
  background:#7c63ff;
  box-shadow:0 0 12px rgba(124,99,255,.6);
}
.playlist-list .cat-wrap{transition:transform .12s ease,opacity .12s ease}

/* RideControl 3.5 – dezenter Ablauf-Countdown */
.operation-next-guide{
  min-height:34px;
  display:grid;
  grid-template-columns:1fr auto 18px;
  align-items:center;
  gap:10px;
  padding:0 12px;
  color:#7e8ba5;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  animation:none!important;
}
.operation-next-guide i{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(88,126,255,.28));
}
.operation-next-guide span{
  font-size:9px!important;
  font-weight:800;
  letter-spacing:.14em;
  color:#7f8fb0!important;
  white-space:nowrap;
}
.operation-next-guide b{
  font-size:18px;
  font-weight:400;
  color:#608cff;
  animation:nextEventDrift 1.8s ease-in-out infinite;
}
@keyframes nextEventDrift{
  0%,100%{transform:translateY(-2px);opacity:.35}
  50%{transform:translateY(3px);opacity:1}
}


/* RideControl 3.7 */
.nav-btn.source-live{background:rgba(33,176,106,.18);color:#dffbea;border:1px solid rgba(45,214,129,.28);box-shadow:inset 0 0 0 1px rgba(45,214,129,.12),0 10px 24px rgba(5,40,24,.28)}
.nav-btn.source-live span,.nav-btn.source-live b{color:#e8fff1}
.nav-btn.source-live::after{content:"";position:absolute;top:10px;right:12px;width:10px;height:10px;border-radius:50%;background:#32df84;box-shadow:0 0 0 6px rgba(50,223,132,.15),0 0 18px rgba(50,223,132,.55)}
.bank-wrap.admin-sortable .bank-tab{cursor:grab;user-select:none}
.bank-wrap.admin-sortable .bank-tab:active{cursor:grabbing}
.bank-wrap.dragging{opacity:.45;transform:scale(.985)}
.bank-wrap{position:relative;transition:transform .12s ease,opacity .12s ease}
.bank-wrap.drag-over::before{content:"";position:absolute;left:-5px;top:6px;bottom:6px;width:3px;border-radius:999px;background:#7c63ff;box-shadow:0 0 12px rgba(124,99,255,.6)}
.operation-next-guide{min-height:42px;grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;padding:8px 0 10px;color:#9aacd3}
.operation-next-guide i{width:100%;max-width:220px;height:1px;background:linear-gradient(90deg,transparent,rgba(88,126,255,.35),transparent)}
.operation-next-guide span{font-size:13px!important;font-weight:900;letter-spacing:.18em;color:#aebef0!important;text-align:center}
.operation-next-guide b{font-size:20px;color:#7da4ff;line-height:1;animation:nextEventDrift 1.8s ease-in-out infinite}
.operation-list .closing-row strong{font-variant-numeric:tabular-nums}


/* RideControl 3.11 – AVT Cover-Fallback */
.avt-cover-fallback{display:grid!important;place-items:center;background:linear-gradient(145deg,#171c2b,#0c101b)!important;overflow:hidden}
.avt-cover-fallback img{width:72%;height:72%;object-fit:contain;display:block}
.track-cover-fallback.avt-track-fallback{display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#1c2233,#101522)}
.track-cover-fallback.avt-track-fallback img{width:72%;height:72%;object-fit:contain;display:block}

/* v3.19 multi-instance installation guard */
.instance-error-card{max-width:620px;text-align:center;padding:38px 42px 42px}
.instance-error-kicker{margin-top:24px;color:#8f96aa;font-size:12px;font-weight:900;letter-spacing:.22em}
.instance-error-title{margin:8px 0 14px;font-size:30px;line-height:1.1;color:#f4f6ff}
.instance-error-text{margin:0;color:#d7dbea;font-size:15px;line-height:1.55}
.instance-error-hint{margin:16px 0 0;color:#949bad;font-size:13px;line-height:1.55}
.instance-error-hint code{color:#c9b9ff;background:#151827;border:1px solid #2e3348;border-radius:7px;padding:2px 6px}

/* ======================================================================
   RideControl 3.20 — Setup page, Admin/Master roles, inline bank editing
   ====================================================================== */
.nav-btn.admin-active:not(.active){background:rgba(70,103,220,.16);border:1px solid rgba(94,128,244,.22);color:#e9eeff}
.nav-btn.master-active:not(.active){background:rgba(120,82,229,.20);border:1px solid rgba(146,103,255,.30);color:#f2eaff;box-shadow:inset 0 0 0 1px rgba(145,106,255,.08)}

.app-view[data-view-panel="setup"].active{grid-template-rows:68px minmax(0,1fr);gap:14px}
.setup-page{height:100%;min-height:0;overflow:auto;padding:0 4px 20px 0;scrollbar-gutter:stable}
.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;padding-bottom:8px}
.setup-card{padding:24px;min-width:0}
.setup-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.setup-card-head h2{margin:4px 0 0;font-size:25px;letter-spacing:-.035em}
.setup-card-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;border:1px solid rgba(255,255,255,.09);background:#151c2a;display:grid;place-items:center;color:#91a8e8;font-size:19px;font-weight:900}
.setup-fields{display:grid;gap:12px}
.setup-row{min-height:68px;background:#0f1521;border:1px solid rgba(255,255,255,.075);border-radius:16px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.setup-row>span{margin:0;color:#e8ebf5;font-size:14px;letter-spacing:0;text-transform:none}
.setup-row>span strong{font-size:15px}
.setup-row .compact-time{width:138px}
.setup-toggle-row{display:grid;grid-template-columns:minmax(0,1fr) 138px;gap:16px}
.setup-toggle-row .toggle-row{justify-content:flex-start;gap:13px;margin:0;min-width:0}
.setup-toggle-row .toggle-row>span{margin:0;color:#e9edf7;font-size:14px;letter-spacing:0;text-transform:none}
.setup-toggle-row .toggle-row input[type="checkbox"]{width:21px;height:21px;flex:0 0 21px;accent-color:#607df4}
.setup-toggle-row .toggle-row>i{display:none}
.setup-toggle-row .optional-time{margin:0}
.setup-toggle-row .optional-time>span{font-size:9px;margin:0 0 5px;color:#788399}
.setup-toggle-row .optional-time.disabled{opacity:.4}
.setup-toggle-row .optional-time .field{padding:11px 12px}

.duck-explain{margin:-4px 0 15px;color:#8f99ae;font-size:13px;line-height:1.5}
.duck-sentence{min-height:66px;background:#0f1521;border:1px solid rgba(255,255,255,.075);border-radius:16px;padding:12px 15px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#cfd5e3;font-size:14px}
.duck-sentence strong{color:#fff}
.percent-field{position:relative;display:flex;align-items:center;width:92px;margin:0}
.percent-field .field{padding:11px 32px 11px 12px;text-align:right;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.percent-field b{position:absolute;right:12px;color:#8994aa;font-size:13px;pointer-events:none}

.setup-admin-state p,.master-locked-card p{margin:0 0 18px;color:#939db1;font-size:13px;line-height:1.55}
.setup-action-row{display:flex;gap:10px;flex-wrap:wrap}
.setup-action-row .btn{min-width:190px}
.setup-role-badge{height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(84,125,232,.30);background:rgba(54,88,180,.13);display:flex!important;align-items:center;color:#cbd8ff!important;font-size:10px!important;font-weight:900!important;letter-spacing:.12em!important}
.setup-role-badge.master{border-color:rgba(141,102,255,.38);background:rgba(119,77,232,.16);color:#e7dcff!important}
.master-locked-card{border-color:rgba(125,104,217,.18)}
.master-card{border-color:rgba(119,93,223,.25);background:linear-gradient(150deg,#15192a 0%,#101320 100%)}
.master-card .setup-card-icon{color:#cfbdff;border-color:rgba(137,101,241,.22);background:rgba(107,76,208,.10)}
.master-card label>span{display:flex;align-items:center;justify-content:space-between;gap:12px}
.master-card label>span small{font-size:9px;color:#77829a;letter-spacing:.08em}
.master-pin-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pin-field{font-size:19px!important;letter-spacing:.18em!important;text-align:center}
.master-instance-info{margin:16px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:13px;background:#0d121d;border:1px solid rgba(255,255,255,.065)}
.master-instance-info span{font-size:9px;font-weight:900;letter-spacing:.14em;color:#748097}
.master-instance-info strong{font-size:12px;color:#b7c1d6;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right;overflow-wrap:anywhere}

/* Bank edit lives inside the visual bank tab; + follows the last bank. */
.bank-tabs{justify-content:flex-start}
.bank-wrap{position:relative;flex:0 0 auto}
.bank-wrap.admin-sortable .bank-tab{padding-right:48px!important;transition:filter .15s,background .15s,border-color .15s,transform .15s}
.bank-wrap .bank-name{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.bank-edit-overlay{position:absolute!important;right:7px;top:50%;transform:translateY(-50%);z-index:5;width:31px!important;height:31px!important;border-radius:9px!important;border:1px solid rgba(255,255,255,.10)!important;background:rgba(6,10,18,.20)!important;color:#dce4f8!important;opacity:.38;transition:opacity .15s,background .15s,box-shadow .15s;cursor:pointer}
.bank-wrap.admin-sortable:hover .bank-tab{filter:brightness(.78)}
.bank-wrap.admin-sortable:hover .bank-edit-overlay,.bank-edit-overlay:hover{opacity:1;background:rgba(6,9,16,.88)!important;box-shadow:0 5px 16px rgba(0,0,0,.28)}
.bank-plus-inline{flex:0 0 48px;width:48px!important;margin-left:1px}

@media(max-width:1450px){
  .setup-card{padding:19px}.setup-card-head{margin-bottom:15px}.setup-card-head h2{font-size:22px}
  .duck-sentence{font-size:13px}.master-pin-grid{grid-template-columns:1fr}
}
@media(max-width:1180px){
  .setup-grid{grid-template-columns:1fr}.setup-page{overflow:visible}.app-view[data-view-panel="setup"].active{height:auto}
}

/* ======================================================================
   RideControl 3.21 — smoother navigation/login, compact Setup, Spotify FX
   ====================================================================== */

/* The selected view is one physical indicator that glides through the sidebar. */
.sidebar{position:relative}
.sidebar-brand,.sidebar-nav,.sidebar-bottom{position:relative;z-index:2}
.nav-active-indicator{
  position:absolute;z-index:1;left:12px;right:12px;top:0;height:68px;
  border-radius:18px;background:#fff;box-shadow:0 14px 32px rgba(0,0,0,.18);
  opacity:0;pointer-events:none;
  transition:transform .34s cubic-bezier(.22,.78,.24,1),height .28s ease,opacity .18s ease;
  will-change:transform,height;
}
.nav-active-indicator.visible{opacity:1}
.nav-active-indicator.no-transition{transition:none!important}
.nav-btn{z-index:2}
.nav-btn.active{background:transparent!important;color:#2b2267!important;box-shadow:none!important}
.nav-btn.active:before{display:none!important}
.nav-btn.active span,.nav-btn.active b{color:#2b2267!important}
.nav-btn.active.source-live::after{background:#22b86d;box-shadow:0 0 0 5px rgba(34,184,109,.14)}

/* View content no longer fades on navigation. The sidebar indicator provides the transition.
   This avoids the old double-animation/flicker when a view is unhidden and then re-rendered. */
.app-view.view-enter{animation:none!important}

/* Login -> RideControl startup handoff. */
.login-card{transition:transform .26s cubic-bezier(.22,.78,.24,1),opacity .22s ease,filter .22s ease}
.login-view.login-processing .login-card{transform:scale(.992);filter:saturate(.92)}
.login-view.login-success .login-card{transform:scale(.965) translateY(-7px);opacity:0;filter:blur(3px)}
.loading-overlay{
  opacity:0;transition:opacity .2s ease;
  background:
    radial-gradient(circle at 50% 45%,rgba(61,88,194,.16),transparent 29%),
    radial-gradient(circle at 44% 54%,rgba(139,54,226,.10),transparent 36%),
    rgba(5,8,16,.86);
  backdrop-filter:blur(9px);
}
.loading-overlay.show{opacity:1}
.loading-overlay.leaving{opacity:0}
.loading-mark-wrap{position:relative;width:104px;height:104px;display:grid;place-items:center;margin-bottom:5px}
.loading-mark-wrap img{position:relative;z-index:2;width:70px!important;animation:loadingMarkFloat 1.55s ease-in-out infinite!important;filter:drop-shadow(0 9px 26px rgba(77,83,255,.25))}
.loading-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(112,139,255,.12);border-top-color:rgba(122,147,255,.72);border-right-color:rgba(164,86,245,.40);animation:loadingRing 1.25s linear infinite}
.loading-overlay strong{font-size:19px;letter-spacing:-.02em}
.loading-overlay>span:last-child{font-size:11px;color:#909bb4;letter-spacing:.08em;font-weight:700}
.loading-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.loading-ambient i{position:absolute;width:4px;height:4px;border-radius:50%;background:#768fff;box-shadow:0 0 14px rgba(118,143,255,.85);opacity:.36;animation:loadingParticle 4s ease-in-out infinite}
.loading-ambient i:nth-child(1){left:39%;top:44%;animation-delay:-.2s}.loading-ambient i:nth-child(2){left:44%;top:38%;animation-delay:-1.4s}.loading-ambient i:nth-child(3){left:57%;top:41%;animation-delay:-2.2s}.loading-ambient i:nth-child(4){left:61%;top:55%;animation-delay:-.8s}.loading-ambient i:nth-child(5){left:42%;top:59%;animation-delay:-3s}.loading-ambient i:nth-child(6){left:54%;top:63%;animation-delay:-1.8s}
@keyframes loadingRing{to{transform:rotate(360deg)}}
@keyframes loadingMarkFloat{0%,100%{transform:translateY(1px) scale(1)}50%{transform:translateY(-4px) scale(1.035)}}
@keyframes loadingParticle{0%,100%{transform:translate(0,8px) scale(.6);opacity:.08}50%{transform:translate(8px,-14px) scale(1.25);opacity:.52}}

/* Spotify disconnected state — deliberately more alive, but still clean. */
.spotify-connect-card{position:relative;overflow:hidden;isolation:isolate;border-radius:18px}
.spotify-connect-card>*:not(.spotify-connect-ambient){position:relative;z-index:2}
.spotify-connect-card:before{
  content:"";position:absolute;z-index:0;width:460px;height:460px;left:50%;top:49%;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(30,215,96,.16) 0,rgba(30,215,96,.055) 31%,transparent 68%);
  filter:blur(7px);animation:spotifyAura 4.8s ease-in-out infinite;
}
.spotify-connect-ambient{position:absolute;z-index:1;inset:0;pointer-events:none;overflow:hidden}
.spotify-connect-ambient i{position:absolute;width:5px;height:5px;border-radius:50%;background:#37f47c;box-shadow:0 0 16px rgba(30,215,96,.95);opacity:.34;animation:spotifyFloat 6.2s ease-in-out infinite}
.spotify-connect-ambient i:nth-child(1){left:30%;top:68%;animation-delay:-1s}.spotify-connect-ambient i:nth-child(2){left:34%;top:31%;animation-delay:-4.1s;width:3px;height:3px}.spotify-connect-ambient i:nth-child(3){left:40%;top:73%;animation-delay:-2.6s}.spotify-connect-ambient i:nth-child(4){left:45%;top:25%;animation-delay:-.4s;width:4px;height:4px}.spotify-connect-ambient i:nth-child(5){left:51%;top:70%;animation-delay:-5.1s;width:3px;height:3px}.spotify-connect-ambient i:nth-child(6){left:57%;top:28%;animation-delay:-3.3s}.spotify-connect-ambient i:nth-child(7){left:63%;top:66%;animation-delay:-1.8s;width:4px;height:4px}.spotify-connect-ambient i:nth-child(8){left:68%;top:36%;animation-delay:-5.7s;width:3px;height:3px}.spotify-connect-ambient i:nth-child(9){left:37%;top:49%;animation-delay:-3.8s;width:3px;height:3px}.spotify-connect-ambient i:nth-child(10){left:61%;top:49%;animation-delay:-.9s}.spotify-connect-ambient i:nth-child(11){left:47%;top:78%;animation-delay:-4.6s;width:3px;height:3px}.spotify-connect-ambient i:nth-child(12){left:55%;top:20%;animation-delay:-2.1s;width:3px;height:3px}
.spotify-orb-wrap{position:relative;width:112px;height:112px;display:grid;place-items:center;margin-bottom:16px}
.spotify-orb-wrap>span{position:absolute;inset:5px;border-radius:32px;border:1px solid rgba(57,244,124,.20);animation:spotifyRing 3s ease-out infinite}
.spotify-orb-wrap>span+span{animation-delay:-1.5s}
.spotify-orb{position:relative;z-index:2;width:88px;height:88px;margin:0!important;border-radius:29px;background:linear-gradient(145deg,#29ec71,#16bd53);box-shadow:0 18px 55px rgba(30,215,96,.20),inset 0 1px rgba(255,255,255,.25);font-size:37px}
.spotify-connect-card strong{font-size:30px;letter-spacing:-.035em}
.spotify-connect-card p{max-width:760px;margin:14px auto 12px;color:#929caf;font-size:14px;line-height:1.5}
.spotify-btn{border:1px solid rgba(118,255,166,.38);border-radius:14px;box-shadow:0 12px 34px rgba(30,215,96,.14);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.spotify-btn:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(30,215,96,.24);filter:brightness(1.05)}
@keyframes spotifyAura{0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.72}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}
@keyframes spotifyFloat{0%,100%{transform:translateY(15px) scale(.65);opacity:.08}45%{opacity:.48}50%{transform:translate(10px,-18px) scale(1.15);opacity:.48}}
@keyframes spotifyRing{0%{transform:scale(.73);opacity:0}24%{opacity:.55}100%{transform:scale(1.34);opacity:0}}

/* Setup schedule: every event starts in the same checkbox column. */
.schedule-settings{gap:12px}
.setup-schedule-row{display:grid!important;grid-template-columns:24px minmax(0,1fr) 138px;align-items:center;gap:14px}
.schedule-check{width:21px;height:21px;margin:0;accent-color:#607df4;cursor:pointer}
.setup-schedule-row.always-on .schedule-check{cursor:not-allowed;opacity:.48;filter:grayscale(.55)}
.setup-schedule-row>span,.schedule-name{margin:0!important;color:#e9edf7!important;font-size:14px!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer}
.setup-schedule-row>span strong,.schedule-name strong{font-size:15px}
.setup-schedule-row.always-on>span{cursor:default}
.schedule-time{margin:0!important;min-width:0}
.schedule-time>span{font-size:9px!important;margin:0 0 5px!important;color:#788399!important}
.schedule-time .field{padding:11px 12px;width:100%!important}
.schedule-time.disabled{opacity:.4}

/* Admin controls become a discreet footer instead of consuming a setup card. */
.setup-footer-actions{display:flex;align-items:center;gap:8px;margin:4px 0 0 4px;padding-bottom:12px}
.setup-footer-btn{height:32px;border:1px solid rgba(255,255,255,.075);border-radius:9px;background:#111724;color:#7f899d;padding:0 12px;font-size:10px;font-weight:800;cursor:pointer;transition:.16s}
.setup-footer-btn:hover{color:#e5e9f2;background:#171e2d;border-color:rgba(255,255,255,.13)}
.setup-footer-btn.primary{color:#aebeed;border-color:rgba(91,125,224,.18);background:rgba(56,84,164,.09)}
.setup-footer-btn.primary:hover{color:#eef3ff;background:rgba(64,97,194,.17)}

/* No empty 'AUSGANG' label/card column on Spotify or Jingles. */
.spotify-page,.jingle-page{grid-template-rows:minmax(0,1fr) 110px!important}
.page-volume-card{padding:14px 22px!important;grid-template-columns:minmax(320px,720px)!important;grid-template-rows:auto auto!important;justify-content:center!important;column-gap:0!important}
.page-volume-card .volume-label,.page-volume-card .volume-control{grid-column:1!important}
.page-volume-card:before{content:none!important;display:none!important}

@media(max-width:1450px){
  .setup-schedule-row{grid-template-columns:22px minmax(0,1fr) 126px;gap:11px}
  .spotify-connect-card strong{font-size:27px}
}
@media(max-width:900px){
  .setup-schedule-row{grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto}
  .schedule-time{grid-column:2}
}

/* ======================================================================
   RideControl 3.25 — header removal only; preserve every workspace layout
   ====================================================================== */
/* The page-title row was removed from the markup. Override ALL of the older
   per-view two-row definitions with one full-height content row. The explicit
   selectors and !important are intentional: older rules for music/spotify/
   jingles/setup have higher specificity and otherwise compress the content
   into the former 68px title row. */
.app-view[data-view-panel="dashboard"].active,
.app-view[data-view-panel="music"].active,
.app-view[data-view-panel="spotify"].active,
.app-view[data-view-panel="jingles"].active,
.app-view[data-view-panel="setup"].active{
  grid-template-rows:minmax(0,1fr)!important;
  gap:0!important;
}

/* Jingle stop sits in the bank toolbar without changing the workspace grid. */
.jingle-toolbar{display:flex;align-items:center;gap:12px;min-width:0}
.jingle-toolbar .bank-tabs{flex:1;min-width:0}
.jingle-toolbar .jingle-stop-btn{flex:0 0 auto;height:48px;padding:0 22px;border-radius:14px}
.jingle-stop-btn.is-live{animation:jingleStopLive 1.25s ease-in-out infinite;will-change:filter,box-shadow,opacity}
@keyframes jingleStopLive{
  0%,100%{filter:brightness(.92);box-shadow:0 7px 18px rgba(255,72,94,.10);opacity:.86}
  50%{filter:brightness(1.10);box-shadow:0 0 0 1px rgba(255,91,108,.18),0 10px 30px rgba(255,72,94,.32);opacity:1}
}
.setup-role-badge-footer{height:30px!important;padding:0 10px!important;font-size:9px!important;margin-right:2px}



/* RideControl 3.28 timer behaviour retained; global operator transform removed in 3.29. */
/* Fahrtzeit: no Apply button. The two fields are the next ride preset and
   are committed when FAHRT STARTEN is pressed. */
.timer-card{display:flex;flex-direction:column;min-width:0}
.timer-display{flex:0 0 auto}
.timer-config-wrap{
  width:min(100%,390px);
  padding:15px 16px 16px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:17px;
  background:linear-gradient(180deg,rgba(12,17,28,.88),rgba(8,12,20,.78));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.timer-config-kicker{
  display:block;margin-bottom:10px;color:#77839b;font-size:9px;font-weight:900;
  letter-spacing:.16em;
}
.timer-config{
  width:100%;display:grid!important;
  grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)!important;
  gap:9px;align-items:end;
}
.timer-config input{min-width:0}
.timer-actions{width:100%;margin-top:18px}
.ride-action{min-width:0}

/* Per-jingle HOLD mode. Idle HOLD pads are deliberately close to the normal
   green palette, but clearly more blue/teal. Running remains red like every
   other Jingle, so STOP state is unambiguous. */
.jingle-pad.hold-mode:not(.playing){
  background:linear-gradient(145deg,#15576a,#0b3342)!important;
  border-color:rgba(90,205,235,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 28px rgba(0,0,0,.18)!important;
}
.jingle-pad.hold-mode:not(.playing):hover{filter:brightness(1.13)}
.sound-mode-field{margin-top:16px}
.sound-mode-field select{height:50px;color:#fff;background:#0c0f18;border-color:rgba(255,255,255,.14);cursor:pointer}

/* On lower-resolution desktop panels keep controls readable and fit the
   three operational cards by tightening empty space instead of shrinking the
   whole application. */
@media (min-width:1181px) and (max-width:1500px){
  .timer-card,.signal-card,.operation-card{padding:18px}
  .timer-display{font-size:92px;margin:19px 0 20px}
  .timer-config-wrap{width:min(100%,330px);padding:12px 13px 13px}
  .timer-config input{height:52px;font-size:22px;padding:0 12px}
  .colon{font-size:25px;padding-bottom:11px}
  .ride-action{height:70px;font-size:18px}
  .timer-actions{margin-top:15px}
}

/* ======================================================================
   RideControl 3.29 — stable desktop geometry, polished ride timer + pads
   ====================================================================== */
/* Remove the artificial whole-app 125% transform. Chrome 100% now uses the
   same component dimensions on every normal desktop; responsive rules only
   rearrange available space instead of turning the product into a second size. */
@media (min-width:1181px){
  #app.app{width:100%!important;height:100dvh!important;transform:none!important;transform-origin:initial!important}
  #app.app .control-view{width:100%!important;height:100dvh!important;min-height:0!important;grid-template-columns:132px minmax(0,1fr)!important;padding:14px!important;gap:14px!important}
  #app.app .sidebar{padding:18px 12px!important;border-radius:32px!important}
  #app.app .sidebar-brand{width:78px!important;height:78px!important;margin-bottom:18px!important}
  #app.app .sidebar-brand img{width:52px!important}
  #app.app .nav-btn{height:84px!important;border-radius:20px!important;gap:7px!important}
  #app.app .nav-btn span{font-size:27px!important}
  #app.app .nav-btn b{font-size:12px!important}
  #app.app .nav-btn.utility{height:66px!important}
  #app.app .nav-btn.utility span{font-size:23px!important}
  #app.app .nav-btn.utility b{font-size:9px!important}
  #app.app .workspace{grid-template-rows:92px minmax(0,1fr)!important;gap:14px!important}
  #app.app .topbar{border-radius:28px!important;padding:0 28px!important;gap:24px!important}
  #app.app .top-logo{width:174px!important}
  #app.app .product-name{font-size:26px!important}
  #app.app .timer-card,#app.app .signal-card,#app.app .operation-card{padding:24px!important}
  #app.app .timer-display{font-size:126px!important}
  #app.app .signal-light{width:118px!important;height:118px!important}
  #app.app .signal-main strong{font-size:54px!important}
  #app.app .operation-list>div{font-size:15px!important}
  #app.app .operation-list strong{font-size:18px!important}
}

/* Fahrtzeit: clear hierarchy. The live time is centered; the lower deck is a
   deliberate two-part control, not a floating preset card. */
.timer-card .timer-display{width:100%;text-align:center;margin:30px 0 30px;line-height:.88}
.timer-control-deck{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(215px,1.1fr);gap:14px;align-items:stretch;width:100%;margin-top:2px}
.timer-control-deck .timer-actions{margin:0;display:flex;min-width:0}
.timer-control-deck .ride-action{height:auto;min-height:94px;border-radius:19px}
.timer-control-deck .timer-config-wrap{width:100%;min-width:0;padding:14px 15px 15px;border-radius:19px;background:linear-gradient(145deg,rgba(17,22,35,.96),rgba(9,13,22,.92));border:1px solid rgba(255,255,255,.09)}
.timer-control-deck .timer-config-kicker{text-align:left;margin-bottom:10px;color:#8b94aa}
.timer-control-deck .timer-config{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)!important;gap:7px!important}
.timer-control-deck .timer-config input{height:54px!important;font-size:23px!important;padding:0 12px!important}
.timer-control-deck .colon{font-size:25px!important;padding-bottom:11px!important}
@media (max-width:1450px){
  .timer-card .timer-display{font-size:120px!important;margin:24px 0 24px!important}
  .timer-control-deck{grid-template-columns:1fr;gap:11px}
  .timer-control-deck .timer-config-wrap{order:1}
  .timer-control-deck .timer-actions{order:2}
  .timer-control-deck .ride-action{min-height:70px}
}

/* Modern trigger cards. Duration is always visible at the bottom center and
   becomes a remaining-time counter while that jingle is running. */
.pad-cell .jingle-pad{
  position:relative!important;justify-content:initial!important;align-items:initial!important;
  padding:12px 14px 12px!important;border-radius:15px!important;
  background:linear-gradient(150deg,#155d46 0%,#0d4435 58%,#0a3028 100%)!important;
  border:1px solid rgba(82,229,166,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px rgba(0,0,0,.17)!important;
  transition:transform .15s ease,filter .15s ease,border-color .15s ease,box-shadow .15s ease!important;
}
.pad-cell .jingle-pad:after{content:none!important;display:none!important}
.pad-cell .jingle-pad .pad-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 12%,rgba(81,255,185,.13),transparent 34%),linear-gradient(135deg,rgba(255,255,255,.035),transparent 38%);opacity:.85}
.pad-cell .jingle-pad .pad-number{left:10px!important;top:9px!important;min-width:25px;height:19px;padding:0 6px;border-radius:999px;background:rgba(3,13,11,.24);display:flex;align-items:center;justify-content:center;font-size:9px!important;color:rgba(225,255,243,.60)!important;font-variant-numeric:tabular-nums}
.pad-cell .jingle-pad strong{position:absolute!important;left:14px!important;right:14px!important;bottom:39px!important;margin:0!important;font-size:14px!important;line-height:1.12!important;letter-spacing:-.015em!important;z-index:1;display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;line-clamp:2!important;overflow:hidden!important;overflow-wrap:anywhere}
.pad-cell .jingle-pad .pad-duration{position:absolute;left:10px;right:10px;bottom:11px;text-align:center;color:rgba(229,239,244,.72);font-size:10px;font-weight:850;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.055em;z-index:1}
.pad-cell .jingle-pad:hover{transform:translateY(-1px)!important;filter:brightness(1.08)!important;border-color:rgba(105,242,184,.45)!important}
.pad-cell .jingle-pad.playing{background:linear-gradient(150deg,#d92e47 0%,#a91d34 58%,#691321 100%)!important;border-color:rgba(255,127,143,.82)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,79,104,.10),0 10px 28px rgba(208,28,54,.25)!important}
.pad-cell .jingle-pad.playing .pad-sheen{background:radial-gradient(circle at 82% 12%,rgba(255,179,189,.18),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.05),transparent 40%)}
.pad-cell .jingle-pad.playing .pad-duration{color:#fff}
.pad-cell .jingle-pad.hold-mode:not(.playing){background:linear-gradient(150deg,#176179 0%,#10485d 58%,#0b3345 100%)!important;border-color:rgba(100,214,244,.38)!important}
.pad-cell .jingle-pad.hold-mode:not(.playing) .pad-sheen{background:radial-gradient(circle at 82% 12%,rgba(92,224,255,.16),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.04),transparent 40%)}
.pad-cell .pad-admin{z-index:4}
@media(max-width:1599px){
  .pad-grid-8x4 .pad-cell .jingle-pad strong{font-size:13px!important}
  .pad-grid-8x4 .pad-cell .jingle-pad .pad-duration{font-size:9px!important}
}

/* Setup: one obvious save action for Admin and Master. */
.setup-footer-actions{padding:18px 4px 8px!important;gap:12px!important;align-items:center!important}
.setup-footer-btn{min-height:48px!important;padding:0 20px!important;font-size:12px!important;border-radius:14px!important}
.setup-footer-btn.primary{min-width:210px!important}

/* Keep login and loading presentation generously sized without transform scaling. */
@media (min-width:1181px){
  .login-card{width:min(620px,92vw);padding:60px 62px 54px;border-radius:34px}
  .login-logo{width:285px;margin-bottom:26px}
  .login-product{font-size:46px}
  .login-copy{font-size:13px;margin-bottom:38px}
  .access-field input{font-size:28px;padding:20px}
  .loading-mark-wrap{transform:scale(1.12)}
  .loading-overlay>strong{font-size:22px!important;margin-top:12px}
  .loading-overlay>#loadingText{font-size:12px!important}
}


/* ======================================================================
   RideControl 3.30 — brighter jingle glass cards + clearer ride timer/setup
   ====================================================================== */

/* Dashboard / Fahrtzeit
   The ride time is the visual hero again. The preset is deliberately compact
   and the primary action spans the complete card width. */
.timer-card{
  background:
    radial-gradient(circle at 78% 8%,rgba(72,130,255,.09),transparent 31%),
    linear-gradient(150deg,#141a29 0%,#0c111d 100%)!important;
}
.timer-card .timer-display{
  width:100%;text-align:center;
  margin:clamp(44px,5.3vh,66px) 0 38px!important;
  font-size:clamp(148px,9vw,188px)!important;
  line-height:.82!important;
  letter-spacing:-.075em!important;
  text-shadow:0 10px 36px rgba(29,68,154,.16);
}
.timer-control-deck{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:12px!important;
  width:100%!important;
  margin-top:auto!important;
}
.timer-control-deck .timer-config-wrap{
  order:1!important;
  width:100%!important;min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(105px,1fr) auto!important;
  align-items:center!important;
  gap:16px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  background:rgba(8,13,23,.56)!important;
  border:1px solid rgba(124,155,224,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.timer-control-deck .timer-config-kicker{
  margin:0!important;
  color:#8b98b2!important;
  font-size:9px!important;
  line-height:1.35!important;
  letter-spacing:.16em!important;
}
.timer-control-deck .timer-config{
  width:auto!important;
  grid-template-columns:82px 12px 82px!important;
  gap:7px!important;
  align-items:end!important;
}
.timer-control-deck .timer-config label span{
  margin-bottom:5px!important;
  color:#7f8ba2!important;
  font-size:8px!important;
  letter-spacing:.12em!important;
}
.timer-control-deck .timer-config input{
  height:48px!important;
  padding:0 10px!important;
  border-radius:12px!important;
  border-color:rgba(255,255,255,.11)!important;
  background:#0b101a!important;
  font-size:22px!important;
  text-align:center!important;
}
.timer-control-deck .colon{
  padding-bottom:10px!important;
  font-size:22px!important;
  color:#66748e!important;
}
.timer-control-deck .timer-actions{
  order:2!important;
  width:100%!important;
  margin:0!important;
  display:flex!important;
}
.timer-control-deck .ride-action{
  width:100%!important;
  height:72px!important;
  min-height:72px!important;
  border-radius:16px!important;
  font-size:19px!important;
  letter-spacing:.025em!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 26px rgba(0,0,0,.17)!important;
}
.timer-control-deck .ride-action:hover{transform:translateY(-1px);filter:brightness(1.045)}
.timer-control-deck .ride-action:active{transform:translateY(1px);filter:brightness(.98)}
@media (min-width:1181px) and (max-width:1320px){
  .timer-card .timer-display{font-size:136px!important;margin:38px 0 32px!important}
  .timer-control-deck .timer-config-wrap{grid-template-columns:1fr!important;gap:9px!important}
  .timer-control-deck .timer-config-kicker{text-align:left!important}
  .timer-control-deck .timer-config{width:100%!important;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr)!important}
}

/* Jingle cards
   Friendly cyan/turquoise is the default PLAY / REPEAT state. HOLD keeps a
   cooler blue identity. Running audio stays red so operational state remains
   immediately obvious. */
.pad-cell .jingle-pad{
  --pad-rx:0deg;--pad-ry:0deg;--pad-sx:72%;--pad-sy:22%;
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  justify-content:initial!important;align-items:initial!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  background:
    linear-gradient(145deg,rgba(48,194,211,.96) 0%,rgba(25,151,176,.94) 45%,rgba(13,89,119,.98) 100%)!important;
  border:1px solid rgba(168,244,255,.38)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.27),
    inset 0 -1px 0 rgba(0,32,45,.23),
    0 9px 22px rgba(0,0,0,.19)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transform:perspective(760px) translateZ(0) rotateX(var(--pad-rx)) rotateY(var(--pad-ry));
  transform-origin:center;
  transition:transform .22s cubic-bezier(.2,.72,.25,1),border-color .2s ease,box-shadow .22s ease,filter .2s ease!important;
  will-change:transform;
}
.pad-cell .jingle-pad:before{
  content:"";
  position:absolute;inset:1px;
  border-radius:15px;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 31%,transparent 70%,rgba(255,255,255,.035));
  opacity:.7;
}
.pad-cell .jingle-pad:after{content:none!important;display:none!important}
.pad-cell .jingle-pad .pad-sheen{
  position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none!important;overflow:hidden!important;
  background:
    radial-gradient(circle at var(--pad-sx) var(--pad-sy),rgba(224,253,255,.22),transparent 29%),
    radial-gradient(circle at 14% 120%,rgba(3,35,55,.22),transparent 42%)!important;
  opacity:1!important;
  transition:background-position .22s ease,opacity .2s ease!important;
}
.pad-cell .jingle-pad .pad-sheen:before{
  content:"";
  position:absolute;
  width:4px;height:4px;border-radius:50%;
  left:18%;top:22%;
  background:rgba(238,254,255,.82);
  box-shadow:
    42px 13px 0 -1px rgba(230,253,255,.65),
    88px -5px 0 -1.2px rgba(209,248,255,.50),
    128px 28px 0 -1.3px rgba(235,254,255,.46),
    68px 60px 0 -1px rgba(185,240,250,.46),
    154px 73px 0 -1.4px rgba(234,254,255,.38),
    18px 79px 0 -1.2px rgba(202,248,255,.34);
  filter:drop-shadow(0 0 5px rgba(210,250,255,.34));
  opacity:.44;
  transform:translate3d(0,0,14px) scale(.82);
  transition:transform .5s cubic-bezier(.2,.72,.25,1),opacity .3s ease;
}
.pad-cell .jingle-pad .pad-sheen:after{
  content:"";
  position:absolute;
  width:78px;height:78px;
  right:-27px;top:-31px;
  border-radius:50%;
  border:1px solid rgba(225,252,255,.18);
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.16),rgba(255,255,255,.02) 48%,transparent 70%);
  box-shadow:inset 0 0 18px rgba(226,252,255,.08);
  opacity:.7;
  transform:translate3d(0,0,6px) scale(.94);
  transition:transform .5s cubic-bezier(.2,.72,.25,1),opacity .3s ease;
}
.pad-cell .jingle-pad:hover{
  transform:perspective(760px) translateY(-3px) translateZ(6px) rotateX(var(--pad-rx)) rotateY(var(--pad-ry))!important;
  filter:brightness(1.06) saturate(1.035)!important;
  border-color:rgba(206,250,255,.60)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,32,45,.20),
    0 14px 30px rgba(0,0,0,.25),
    0 0 0 1px rgba(103,220,236,.06)!important;
}
.pad-cell .jingle-pad:hover .pad-sheen:before{transform:translate3d(6px,-5px,24px) scale(1.04);opacity:.66}
.pad-cell .jingle-pad:hover .pad-sheen:after{transform:translate3d(-7px,8px,18px) scale(1.08);opacity:.9}
.pad-cell .jingle-pad:active{transform:perspective(760px) translateY(0) scale(.99)!important}
.pad-cell .jingle-pad .pad-number{
  z-index:2!important;
  left:10px!important;top:9px!important;
  min-width:26px!important;height:20px!important;padding:0 6px!important;
  border-radius:999px!important;
  background:rgba(4,35,48,.24)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  color:rgba(239,254,255,.70)!important;
  font-size:9px!important;
}
.pad-cell .jingle-pad .pad-mode{
  position:absolute;left:44px;top:9px;z-index:2;
  height:20px;padding:0 7px;border-radius:999px;
  display:flex;align-items:center;
  background:rgba(4,35,48,.20);
  border:1px solid rgba(255,255,255,.065);
  color:rgba(239,254,255,.67);
  font-size:7px;font-weight:900;letter-spacing:.09em;
  white-space:nowrap;
}
.pad-cell .jingle-pad strong{
  z-index:2!important;
  left:14px!important;right:14px!important;bottom:39px!important;
  font-size:14px!important;line-height:1.12!important;
  letter-spacing:-.015em!important;
  text-shadow:0 2px 10px rgba(0,32,45,.18);
}
.pad-cell .jingle-pad .pad-duration{
  z-index:2!important;
  left:10px!important;right:10px!important;bottom:11px!important;
  color:rgba(239,253,255,.78)!important;
  font-size:10px!important;font-weight:850!important;
  text-shadow:0 1px 8px rgba(0,24,38,.18);
}
.pad-cell .jingle-pad.hold-mode:not(.playing){
  background:
    linear-gradient(145deg,rgba(88,139,215,.96) 0%,rgba(54,99,165,.95) 50%,rgba(32,66,114,.98) 100%)!important;
  border-color:rgba(166,204,255,.40)!important;
}
.pad-cell .jingle-pad.hold-mode:not(.playing) .pad-sheen{
  background:
    radial-gradient(circle at var(--pad-sx) var(--pad-sy),rgba(223,239,255,.22),transparent 30%),
    radial-gradient(circle at 14% 120%,rgba(12,27,70,.25),transparent 42%)!important;
}
.pad-cell .jingle-pad.hold-mode:not(.playing) .pad-number,
.pad-cell .jingle-pad.hold-mode:not(.playing) .pad-mode{background:rgba(18,39,83,.25)!important}
.pad-cell .jingle-pad.playing{
  background:linear-gradient(145deg,#ef5268 0%,#c72c48 48%,#861b31 100%)!important;
  border-color:rgba(255,185,195,.62)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 12px 30px rgba(187,29,57,.28)!important;
}
.pad-cell .jingle-pad.playing .pad-sheen{
  background:
    radial-gradient(circle at var(--pad-sx) var(--pad-sy),rgba(255,233,236,.23),transparent 30%),
    radial-gradient(circle at 14% 120%,rgba(76,7,22,.25),transparent 42%)!important;
}
.pad-cell .jingle-pad.playing .pad-number,
.pad-cell .jingle-pad.playing .pad-mode{background:rgba(75,8,22,.24)!important;color:rgba(255,242,245,.84)!important}
.pad-cell .jingle-pad.playing .pad-duration{color:#fff!important}
.pad-cell .pad-admin{z-index:5!important}
.pad-cell .jingle-pad.admin .pad-mode{right:82px;left:auto}
@media(max-width:1599px){
  .pad-grid-8x4 .pad-cell .jingle-pad strong{font-size:13px!important}
  .pad-grid-8x4 .pad-cell .jingle-pad .pad-duration{font-size:9px!important}
  .pad-grid-8x4 .pad-cell .jingle-pad .pad-mode{font-size:6.5px;padding:0 6px}
}
@media (prefers-reduced-motion:reduce){
  .pad-cell .jingle-pad,.pad-cell .jingle-pad .pad-sheen:before,.pad-cell .jingle-pad .pad-sheen:after{transition:none!important;transform:none!important}
}

/* Setup footer actions should read as a real action area, not a tiny footnote. */
.setup-footer-actions{
  width:fit-content!important;
  min-width:610px!important;
  margin:18px 0 4px 0!important;
  padding:11px!important;
  gap:11px!important;
  border:1px solid rgba(103,134,218,.17)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(16,23,39,.94),rgba(9,14,24,.90))!important;
  box-shadow:0 12px 30px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.setup-role-badge-footer{
  height:42px!important;
  padding:0 13px!important;
  margin:0 2px 0 0!important;
  font-size:9px!important;
}
.setup-footer-btn{
  min-height:58px!important;
  height:58px!important;
  padding:0 24px!important;
  border-radius:14px!important;
  font-size:14px!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  color:#d6dcec!important;
  background:#151c2a!important;
  border-color:rgba(255,255,255,.105)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.setup-footer-btn:hover{transform:translateY(-1px);color:#fff!important;border-color:rgba(255,255,255,.18)!important;background:#1b2435!important}
.setup-footer-btn.primary{
  min-width:265px!important;
  color:#fff!important;
  background:linear-gradient(135deg,#3d67c7 0%,#527ee5 100%)!important;
  border-color:rgba(124,161,255,.46)!important;
  box-shadow:0 10px 24px rgba(50,88,181,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.setup-footer-btn.primary:hover{background:linear-gradient(135deg,#4774d8 0%,#5b88ef 100%)!important;box-shadow:0 13px 30px rgba(50,88,181,.28),inset 0 1px 0 rgba(255,255,255,.20)!important}
#exitAdminBtn{min-width:220px!important}
@media(max-width:900px){
  .setup-footer-actions{min-width:0!important;width:100%!important;flex-wrap:wrap!important}
  .setup-role-badge-footer{width:100%;justify-content:center}
  .setup-footer-btn,#exitAdminBtn,.setup-footer-btn.primary{flex:1 1 220px;min-width:0!important}
}