: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}
}

/* ======================================================================
   RideControl 3.31 — calmer system-colored jingle pads + stable hover
   ====================================================================== */

.pad-cell .jingle-pad{
  --pad-rx:0deg;--pad-ry:0deg;--pad-sx:82%;--pad-sy:16%;
  transform:none!important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease!important;
  background:
    radial-gradient(circle at 82% 16%,rgba(109,136,255,.20),transparent 32%),
    linear-gradient(145deg,#243c8c 0%,#1a2d6b 52%,#13204a 100%)!important;
  border:1px solid rgba(122,148,255,.34)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(8,12,28,.32),
    0 10px 24px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.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,.12),transparent 34%,transparent 74%,rgba(255,255,255,.03));
  opacity:.75;
}
.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 82% 16%,rgba(180,199,255,.16),transparent 30%),
    radial-gradient(circle at 18% 118%,rgba(10,15,36,.28),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 44%)!important;
  opacity:1!important;
}
.pad-cell .jingle-pad .pad-sheen:before,
.pad-cell .jingle-pad .pad-sheen:after{content:none!important;display:none!important}
.pad-cell .jingle-pad:hover{
  transform:none!important;
  filter:brightness(1.035)!important;
  border-color:rgba(151,173,255,.46)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(8,12,28,.30),
    0 12px 28px rgba(0,0,0,.21),
    0 0 0 1px rgba(111,141,255,.08)!important;
}
.pad-cell .jingle-pad:active{
  transform:none!important;
  filter:brightness(.99)!important;
}
.pad-cell .jingle-pad .pad-number{
  background:rgba(9,17,40,.30)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:rgba(240,244,255,.74)!important;
}
.pad-cell .jingle-pad .pad-mode{
  background:rgba(9,17,40,.28)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  color:rgba(240,244,255,.72)!important;
}
.pad-cell .jingle-pad strong{
  z-index:2!important;
  text-shadow:0 2px 10px rgba(3,8,22,.24)!important;
}
.pad-cell .jingle-pad .pad-duration{
  z-index:2!important;
  color:rgba(240,244,255,.82)!important;
  text-shadow:0 1px 8px rgba(3,8,22,.18)!important;
}

/* HOLD should stay visually distinct, but within the RideControl palette. */
.pad-cell .jingle-pad.hold-mode:not(.playing){
  background:
    radial-gradient(circle at 82% 16%,rgba(148,128,255,.16),transparent 32%),
    linear-gradient(145deg,#222e57 0%,#1a2346 52%,#131a34 100%)!important;
  border-color:rgba(134,148,206,.28)!important;
}
.pad-cell .jingle-pad.hold-mode:not(.playing) .pad-sheen{
  background:
    radial-gradient(circle at 82% 16%,rgba(172,162,255,.14),transparent 30%),
    radial-gradient(circle at 18% 118%,rgba(8,12,26,.30),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 44%)!important;
}
.pad-cell .jingle-pad.hold-mode:not(.playing) .pad-number,
.pad-cell .jingle-pad.hold-mode:not(.playing) .pad-mode{
  background:rgba(12,17,34,.32)!important;
}

/* Running jingles remain clearly red. */
.pad-cell .jingle-pad.playing{
  background:
    radial-gradient(circle at 82% 16%,rgba(255,206,214,.16),transparent 30%),
    linear-gradient(145deg,#d33d58 0%,#b62542 54%,#761629 100%)!important;
  border-color:rgba(255,156,172,.58)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 30px rgba(180,30,57,.24)!important;
}
.pad-cell .jingle-pad.playing .pad-sheen{
  background:
    radial-gradient(circle at 82% 16%,rgba(255,227,232,.18),transparent 30%),
    radial-gradient(circle at 18% 118%,rgba(54,6,17,.28),transparent 40%),
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 44%)!important;
}
.pad-cell .jingle-pad.playing .pad-number,
.pad-cell .jingle-pad.playing .pad-mode{
  background:rgba(61,8,19,.28)!important;
  color:rgba(255,245,247,.88)!important;
}
.pad-cell .jingle-pad.playing .pad-duration{color:#fff!important}

@media (prefers-reduced-motion:reduce){
  .pad-cell .jingle-pad,.pad-cell .jingle-pad:hover,.pad-cell .jingle-pad:active{transition:none!important}
}

/* ======================================================================
   RideControl 3.32 — restore simpler classic jingle card look
   ====================================================================== */

/* Back to simpler, classic filled cards. */
.pad-cell .jingle-pad{
  transform:none!important;
  background:linear-gradient(180deg,#1e8f63 0%,#177751 100%)!important;
  border:1px solid rgba(96,235,180,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 20px rgba(0,0,0,.16)!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.pad-cell .jingle-pad:before{display:none!important;content:none!important}
.pad-cell .jingle-pad .pad-sheen,
.pad-cell .jingle-pad .pad-sheen:before,
.pad-cell .jingle-pad .pad-sheen:after{display:none!important;content:none!important}
.pad-cell .jingle-pad:hover,
.pad-cell .jingle-pad:active{
  transform:none!important;
  filter:none!important;
  border-color:rgba(112,240,189,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 20px rgba(0,0,0,.16)!important;
}

/* HOLD remains distinguishable, but without a label badge. */
.pad-cell .jingle-pad.hold-mode:not(.playing){
  background:linear-gradient(180deg,#1c8a79 0%,#166e61 100%)!important;
  border-color:rgba(88,224,208,.28)!important;
}

/* Running jingles must stay red. */
.pad-cell .jingle-pad.playing{
  background:linear-gradient(180deg,#d63a55 0%,#b62640 100%)!important;
  border-color:rgba(255,136,156,.56)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 24px rgba(175,29,57,.22)!important;
}

/* Hide mode badge as requested. */
.pad-cell .jingle-pad .pad-mode{display:none!important}
.pad-cell .jingle-pad.admin .pad-mode{display:none!important}

/* Title centered in the middle. */
.pad-cell .jingle-pad strong{
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-56%)!important;
  margin:0!important;
  text-align:center!important;
  font-size:15px!important;
  line-height:1.14!important;
  color:#fff!important;
  text-shadow:none!important;
  z-index:2!important;
}

/* Duration larger and easy to read from farther away. */
.pad-cell .jingle-pad .pad-duration{
  position:absolute!important;
  left:10px!important;
  right:10px!important;
  bottom:10px!important;
  text-align:center!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
  color:rgba(255,255,255,.92)!important;
  text-shadow:none!important;
  z-index:2!important;
}
.pad-cell .jingle-pad.playing .pad-duration{color:#fff!important}

/* Keep slot number, but simpler. */
.pad-cell .jingle-pad .pad-number{
  left:10px!important;
  top:8px!important;
  min-width:24px!important;
  height:18px!important;
  padding:0 6px!important;
  border:none!important;
  border-radius:999px!important;
  background:rgba(7,22,15,.18)!important;
  color:rgba(255,255,255,.66)!important;
}
.pad-cell .jingle-pad.hold-mode:not(.playing) .pad-number{background:rgba(7,22,21,.18)!important}
.pad-cell .jingle-pad.playing .pad-number{background:rgba(62,10,21,.22)!important;color:rgba(255,255,255,.76)!important}

/* Small responsive refinement for denser grids. */
@media(max-width:1799px){
  .pad-grid-8x4 .pad-cell .jingle-pad strong{font-size:14px!important}
  .pad-grid-8x4 .pad-cell .jingle-pad .pad-duration{font-size:13px!important}
}
@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:12px!important}
}

/* ======================================================================
   RideControl 3.33 — stronger HOLD contrast, hero timer, Spotify queue jump
   ====================================================================== */

/* Jingles: PLAY / REPEAT stays green, HOLD moves clearly into petrol-blue. */
.pad-cell .jingle-pad.hold-mode:not(.playing){
  background:linear-gradient(180deg,#2478a8 0%,#18597f 100%)!important;
  border-color:rgba(112,196,239,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 20px rgba(0,0,0,.17)!important;
}
.pad-cell .jingle-pad.hold-mode:not(.playing):hover{
  border-color:rgba(135,211,249,.50)!important;
}
.pad-cell .jingle-pad.hold-mode:not(.playing) .pad-number{
  background:rgba(6,29,46,.24)!important;
}

/* Dashboard timer: use almost the full usable width of its card. */
@media(min-width:1501px){
  .timer-card .timer-display{
    font-size:clamp(190px,10.6vw,218px)!important;
    line-height:.76!important;
    letter-spacing:-.092em!important;
    margin:clamp(34px,4.0vh,48px) -7px 30px!important;
    width:calc(100% + 14px)!important;
    max-width:none!important;
  }
}
@media(min-width:1321px) and (max-width:1500px){
  .timer-card .timer-display{
    font-size:clamp(158px,11vw,176px)!important;
    line-height:.78!important;
    letter-spacing:-.09em!important;
    margin:30px -5px 28px!important;
    width:calc(100% + 10px)!important;
  }
}
@media(min-width:1181px) and (max-width:1320px){
  .timer-card .timer-display{
    font-size:clamp(142px,11.2vw,156px)!important;
    line-height:.79!important;
    letter-spacing:-.088em!important;
    margin:28px -4px 26px!important;
    width:calc(100% + 8px)!important;
  }
}

/* Spotify queue: cover becomes an explicit play target without changing row geometry. */
.spotify-page-content .queue-cover-btn{
  width:64px!important;
  height:64px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#fff!important;
  cursor:pointer!important;
  overflow:hidden!important;
  display:block!important;
  position:relative!important;
  outline:none!important;
}
.spotify-page-content .queue-cover-media{
  width:100%!important;
  height:100%!important;
  position:relative!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:12px!important;
}
.spotify-page-content .queue-cover-media>img,
.spotify-page-content .queue-cover-media>.queue-cover-fallback{
  width:100%!important;
  height:100%!important;
  display:block!important;
  border-radius:12px!important;
  transition:filter .16s ease,transform .16s ease!important;
}
.spotify-page-content .queue-cover-media>.queue-cover-fallback{display:grid!important}
.spotify-page-content .queue-cover-play{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(6,9,16,.62)!important;
  color:#fff!important;
  font-size:25px!important;
  line-height:1!important;
  opacity:0!important;
  transform:scale(.92)!important;
  transition:opacity .16s ease,transform .16s ease!important;
  pointer-events:none!important;
}
.spotify-page-content .queue-cover-btn:hover .queue-cover-play,
.spotify-page-content .queue-cover-btn:focus-visible .queue-cover-play{
  opacity:1!important;
  transform:scale(1)!important;
}
.spotify-page-content .queue-cover-btn:hover .queue-cover-media>img,
.spotify-page-content .queue-cover-btn:hover .queue-cover-media>.queue-cover-fallback{
  filter:brightness(.70)!important;
}
.spotify-page-content .queue-cover-btn:focus-visible{
  box-shadow:0 0 0 2px rgba(111,141,255,.72)!important;
}
.spotify-page-content .queue-cover-btn:disabled{
  cursor:wait!important;
  opacity:.72!important;
}
.spotify-page-content .queue-jump-busy .queue-cover-play{
  opacity:.72!important;
  transform:scale(1)!important;
}
.spotify-page-content .queue-copy{min-width:0!important}

@media(max-width:1500px){
  .spotify-page-content .queue-cover-btn{width:50px!important;height:50px!important;border-radius:10px!important}
  .spotify-page-content .queue-cover-media{border-radius:10px!important}
  .spotify-page-content .queue-cover-play{font-size:21px!important}
}

/* ======================================================================
   RideControl 3.34 — Spotify queue motion polish
   ====================================================================== */
.spotify-page-content .queue-row{
  position:relative!important;
  will-change:transform,opacity;
  backface-visibility:hidden;
}
@media (prefers-reduced-motion:reduce){
  .spotify-page-content .queue-row{will-change:auto}
}

/* ======================================================================
   RideControl 3.35 — true hero timer sizing
   ====================================================================== */
.timer-card{
  container-type:inline-size;
}
.timer-card .timer-display{
  flex:1 1 0!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:calc(100% + 24px)!important;
  max-width:none!important;
  margin:0 -12px!important;
  padding:8px 0 14px!important;
  font-size:clamp(205px,46cqw,370px)!important;
  line-height:.72!important;
  letter-spacing:-.105em!important;
  font-weight:850!important;
  white-space:nowrap!important;
  text-align:center!important;
  text-shadow:0 10px 34px rgba(29,68,154,.13)!important;
}
/* Two-digit minutes need a little more horizontal breathing room. */
.timer-card .timer-display[data-time-length="5"]{
  font-size:clamp(178px,37cqw,315px)!important;
  letter-spacing:-.09em!important;
}
/* Keep the lower controls compact so the timer owns the card. */
.timer-card .timer-control-deck{
  flex:0 0 auto!important;
  margin-top:0!important;
}
@media(max-width:1180px){
  .timer-card .timer-display{
    font-size:clamp(180px,45cqw,300px)!important;
  }
  .timer-card .timer-display[data-time-length="5"]{
    font-size:clamp(158px,36cqw,258px)!important;
  }
}


/* ======================================================================
   RideControl 3.38 — passive Spotify queue, centered transport, huge timer
   ====================================================================== */

/* Queue covers are display-only again. The FLIP queue animation remains in JS. */
.spotify-page-content .queue-cover-media{
  width:64px!important;
  height:64px!important;
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  border-radius:12px!important;
  flex:0 0 64px!important;
}
.spotify-page-content .queue-cover-media>img,
.spotify-page-content .queue-cover-media>.queue-cover-fallback{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  border-radius:12px!important;
  filter:none!important;
  transform:none!important;
  transition:none!important;
}
.spotify-page-content .queue-cover-media>.queue-cover-fallback{display:grid!important}
.spotify-page-content .queue-cover-play,
.spotify-page-content .queue-cover-btn{display:none!important}
.spotify-page-content .queue-copy{min-width:0!important}

/* Give the Spotify page a dedicated central transport row below the queue. */
.spotify-page-content{
  grid-template-rows:96px 26px minmax(0,1fr) 74px auto!important;
  gap:10px!important;
}
.spotify-page-content .spotify-transport{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:4px 0 0;
}
.spotify-page-content .spotify-transport-btn{
  width:62px;
  height:62px;
  flex:0 0 62px;
  border:0;
  border-radius:50%;
  background:#1ed760;
  color:#07160d;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 10px 24px rgba(30,215,96,.18);
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
.spotify-page-content .spotify-transport-btn span{
  display:block;
  font-size:40px;
  font-weight:800;
  line-height:.76;
  transform:translateY(-2px);
}
.spotify-page-content .spotify-transport-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 13px 30px rgba(30,215,96,.24);
}
.spotify-page-content .spotify-transport-btn:active{transform:translateY(1px);filter:brightness(.96)}
.spotify-page-content .spotify-transport-btn:focus-visible{outline:3px solid rgba(255,255,255,.72);outline-offset:3px}

@media(max-width:1500px){
  .spotify-page-content .queue-cover-media{width:50px!important;height:50px!important;border-radius:10px!important;flex-basis:50px!important}
  .spotify-page-content .spotify-transport{min-height:64px;gap:18px}
  .spotify-page-content .spotify-transport-btn{width:54px;height:54px;flex-basis:54px}
  .spotify-page-content .spotify-transport-btn span{font-size:35px}
  .spotify-page-content{grid-template-rows:96px 26px minmax(0,1fr) 64px auto!important}
}

/* The v3.29 desktop selector used an ID and was still winning the cascade.
   Override it explicitly so the ride time finally becomes the hero element. */
@media(min-width:1501px){
  #app.app .timer-card .timer-display{
    font-size:clamp(330px,56cqw,470px)!important;
    line-height:.70!important;
    letter-spacing:-.105em!important;
    width:calc(100% + 32px)!important;
    margin:0 -16px!important;
    padding:0 0 8px!important;
  }
  #app.app .timer-card .timer-display[data-time-length="5"]{
    font-size:clamp(285px,46cqw,400px)!important;
    letter-spacing:-.09em!important;
  }
}
@media(min-width:1321px) and (max-width:1500px){
  #app.app .timer-card .timer-display{
    font-size:clamp(275px,54cqw,380px)!important;
    line-height:.71!important;
    letter-spacing:-.10em!important;
    width:calc(100% + 28px)!important;
    margin:0 -14px!important;
    padding:0 0 8px!important;
  }
  #app.app .timer-card .timer-display[data-time-length="5"]{
    font-size:clamp(235px,45cqw,330px)!important;
  }
}
@media(min-width:1181px) and (max-width:1320px){
  #app.app .timer-card .timer-display{
    font-size:clamp(235px,53cqw,320px)!important;
    line-height:.72!important;
    letter-spacing:-.095em!important;
    width:calc(100% + 24px)!important;
    margin:0 -12px!important;
    padding:0 0 8px!important;
  }
  #app.app .timer-card .timer-display[data-time-length="5"]{
    font-size:clamp(205px,44cqw,285px)!important;
  }
}

/* ======================================================================
   RideControl 3.39 — timer balance + floating Spotify transport
   ====================================================================== */

/* v3.38 made the ride timer a touch too dominant. Keep it unmistakably large,
   but give the numerals a little more breathing room inside the card. */
@media(min-width:1501px){
  #app.app .timer-card .timer-display{
    font-size:clamp(285px,49cqw,410px)!important;
    line-height:.74!important;
    letter-spacing:-.095em!important;
    width:calc(100% + 18px)!important;
    margin:0 -9px!important;
    padding:4px 0 10px!important;
  }
  #app.app .timer-card .timer-display[data-time-length="5"]{
    font-size:clamp(248px,41cqw,350px)!important;
    letter-spacing:-.082em!important;
  }
}
@media(min-width:1321px) and (max-width:1500px){
  #app.app .timer-card .timer-display{
    font-size:clamp(245px,48cqw,340px)!important;
    line-height:.74!important;
    letter-spacing:-.092em!important;
    width:calc(100% + 16px)!important;
    margin:0 -8px!important;
    padding:4px 0 10px!important;
  }
  #app.app .timer-card .timer-display[data-time-length="5"]{
    font-size:clamp(215px,40cqw,296px)!important;
    letter-spacing:-.08em!important;
  }
}
@media(min-width:1181px) and (max-width:1320px){
  #app.app .timer-card .timer-display{
    font-size:clamp(215px,47cqw,288px)!important;
    line-height:.75!important;
    letter-spacing:-.09em!important;
    width:calc(100% + 14px)!important;
    margin:0 -7px!important;
    padding:4px 0 10px!important;
  }
  #app.app .timer-card .timer-display[data-time-length="5"]{
    font-size:clamp(190px,39cqw,255px)!important;
  }
}

/* Restore the queue to its old full-height layout. The transport controls no
   longer occupy their own row: they float across the seam between the main
   Spotify card and the volume card. */
.spotify-main-card{
  position:relative!important;
  overflow:visible!important;
}
.spotify-page-content{
  grid-template-rows:96px 26px minmax(0,1fr) auto!important;
  gap:10px!important;
}
.spotify-page-content .spotify-transport{
  position:absolute!important;
  left:50%!important;
  bottom:-35px!important;
  z-index:12!important;
  min-height:0!important;
  height:auto!important;
  width:auto!important;
  padding:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  transform:translateX(-50%)!important;
  pointer-events:auto!important;
}
.spotify-page-content .spotify-transport-btn{
  width:52px!important;
  height:52px!important;
  flex:0 0 52px!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 8px 20px rgba(0,0,0,.28),
    0 8px 24px rgba(30,215,96,.18)!important;
}
.spotify-page-content .spotify-transport-btn span{
  font-size:34px!important;
  line-height:.78!important;
  transform:translateY(-2px)!important;
}
.spotify-page-content .spotify-transport-btn:hover{
  transform:translateY(-1px)!important;
}
.spotify-page-content .spotify-transport-btn:active{
  transform:translateY(1px)!important;
}

@media(max-width:1500px){
  .spotify-page-content{
    grid-template-rows:96px 26px minmax(0,1fr) auto!important;
  }
  .spotify-page-content .spotify-transport{
    bottom:-32px!important;
    gap:14px!important;
  }
  .spotify-page-content .spotify-transport-btn{
    width:48px!important;
    height:48px!important;
    flex-basis:48px!important;
  }
  .spotify-page-content .spotify-transport-btn span{font-size:31px!important}
}

/* ======================================================================
   RideControl 3.40 — Spotify transport: larger, higher, liquid glass
   ====================================================================== */
.spotify-page-content .spotify-transport{
  bottom:-23px!important;
  gap:18px!important;
}
.spotify-page-content .spotify-transport-btn{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  width:60px!important;
  height:60px!important;
  flex:0 0 60px!important;
  border:1px solid rgba(204,255,224,.34)!important;
  background:
    radial-gradient(circle at 32% 20%,rgba(255,255,255,.28),transparent 31%),
    linear-gradient(145deg,rgba(74,241,135,.86) 0%,rgba(30,215,96,.76) 45%,rgba(13,157,70,.72) 100%)!important;
  color:#06160c!important;
  backdrop-filter:blur(18px) saturate(1.45)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.45)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(0,65,25,.18),
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 10px 26px rgba(0,0,0,.26),
    0 8px 28px rgba(30,215,96,.20)!important;
  transition:transform .18s cubic-bezier(.2,.75,.25,1),filter .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.spotify-page-content .spotify-transport-btn::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:3px 5px auto 5px;
  height:46%;
  border-radius:999px 999px 55% 55%;
  background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.045));
  opacity:.70;
  pointer-events:none;
}
.spotify-page-content .spotify-transport-btn::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:28px;
  height:28px;
  right:-8px;
  bottom:-9px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  filter:blur(2px);
  pointer-events:none;
}
.spotify-page-content .spotify-transport-btn span{
  position:relative!important;
  z-index:2!important;
  font-size:38px!important;
  font-weight:850!important;
  line-height:.76!important;
  transform:translateY(-2px)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.18)!important;
}
.spotify-page-content .spotify-transport-btn:hover{
  transform:translateY(-2px)!important;
  filter:brightness(1.055) saturate(1.04)!important;
  border-color:rgba(225,255,236,.50)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.66),
    inset 0 -1px 0 rgba(0,65,25,.14),
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 14px 32px rgba(0,0,0,.29),
    0 11px 34px rgba(30,215,96,.25)!important;
}
.spotify-page-content .spotify-transport-btn:active{
  transform:translateY(0) scale(.985)!important;
  filter:brightness(.98)!important;
}
@media(max-width:1500px){
  .spotify-page-content .spotify-transport{
    bottom:-21px!important;
    gap:16px!important;
  }
  .spotify-page-content .spotify-transport-btn{
    width:56px!important;
    height:56px!important;
    flex-basis:56px!important;
  }
  .spotify-page-content .spotify-transport-btn span{font-size:36px!important}
}

/* ======================================================================
   RideControl 3.41 — larger Spotify transport with official Spotify green
   ====================================================================== */
.spotify-page-content .spotify-transport{
  bottom:-19px!important;
  gap:20px!important;
}
.spotify-page-content .spotify-transport-btn{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  width:72px!important;
  height:72px!important;
  flex:0 0 72px!important;
  border-radius:999px!important;
  border:1.5px solid rgba(30,215,96,.72)!important;
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.34),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05)),
    linear-gradient(145deg,rgba(30,215,96,.28) 0%,rgba(30,215,96,.18) 46%,rgba(30,215,96,.12) 100%)!important;
  color:#1ED760!important;
  backdrop-filter:blur(18px) saturate(1.35)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(10,38,20,.22),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 14px 30px rgba(0,0,0,.30),
    0 0 0 1px rgba(30,215,96,.10),
    0 10px 30px rgba(30,215,96,.20)!important;
  transition:transform .18s cubic-bezier(.2,.75,.25,1),filter .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.spotify-page-content .spotify-transport-btn::before{
  content:"";
  position:absolute;
  inset:5px 8px auto 8px;
  height:43%;
  border-radius:999px 999px 62% 62%;
  background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,.06));
  opacity:.78;
  pointer-events:none;
}
.spotify-page-content .spotify-transport-btn::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:8px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(30,215,96,.18),rgba(30,215,96,0));
  filter:blur(6px);
  opacity:.95;
  pointer-events:none;
}
.spotify-page-content .spotify-transport-btn span{
  position:relative!important;
  z-index:2!important;
  font-size:42px!important;
  font-weight:900!important;
  line-height:.76!important;
  color:#1ED760!important;
  text-shadow:0 0 10px rgba(30,215,96,.14)!important;
}
.spotify-page-content .spotify-transport-btn:hover{
  transform:translateY(-2px) scale(1.02)!important;
  filter:brightness(1.04)!important;
  border-color:rgba(30,215,96,.92)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.60),
    inset 0 -1px 0 rgba(10,38,20,.18),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 18px 34px rgba(0,0,0,.32),
    0 0 0 1px rgba(30,215,96,.16),
    0 14px 36px rgba(30,215,96,.28)!important;
}
.spotify-page-content .spotify-transport-btn:active{
  transform:translateY(0) scale(.985)!important;
  filter:brightness(.98)!important;
}
@media(max-width:1500px){
  .spotify-page-content .spotify-transport{bottom:-17px!important;gap:18px!important}
  .spotify-page-content .spotify-transport-btn{width:66px!important;height:66px!important;flex-basis:66px!important}
  .spotify-page-content .spotify-transport-btn span{font-size:39px!important}
}

/* ======================================================================
   RideControl 3.43 — ride timer slightly reduced
   ====================================================================== */
/* The v3.42 timer is a touch too dominant. Keep it very visible, but give
   it a bit more breathing room so it sits cleaner inside the card. */
@media(min-width:1501px){
  #app.app .timer-card .timer-display{
    font-size:clamp(258px,45cqw,372px)!important;
    line-height:.76!important;
    letter-spacing:-.09em!important;
    width:calc(100% + 10px)!important;
    margin:0 -5px!important;
    padding:4px 0 8px!important;
  }
  #app.app .timer-card .timer-display[data-time-length="5"]{
    font-size:clamp(228px,38cqw,320px)!important;
    letter-spacing:-.078em!important;
  }
}
@media(min-width:1321px) and (max-width:1500px){
  #app.app .timer-card .timer-display{
    font-size:clamp(228px,44cqw,316px)!important;
    line-height:.76!important;
    letter-spacing:-.088em!important;
    width:calc(100% + 10px)!important;
    margin:0 -5px!important;
    padding:4px 0 8px!important;
  }
  #app.app .timer-card .timer-display[data-time-length="5"]{
    font-size:clamp(202px,37cqw,278px)!important;
    letter-spacing:-.076em!important;
  }
}
@media(min-width:1181px) and (max-width:1320px){
  #app.app .timer-card .timer-display{
    font-size:clamp(198px,43cqw,266px)!important;
    line-height:.77!important;
    letter-spacing:-.085em!important;
    width:calc(100% + 8px)!important;
    margin:0 -4px!important;
    padding:4px 0 8px!important;
  }
  #app.app .timer-card .timer-display[data-time-length="5"]{
    font-size:clamp(178px,35cqw,236px)!important;
  }
}

/* ======================================================================
   RideControl 3.44 — Musikwunschbox
   ====================================================================== */
.nav-btn.wish-nav-btn{position:relative}
.nav-count-badge{position:absolute;right:7px;top:7px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#ff405d;color:#fff;border:2px solid #1b2d69;font-style:normal;font-size:8px;font-weight:950;line-height:1;box-shadow:0 4px 10px rgba(255,64,93,.28);z-index:3}
.nav-btn.active .nav-count-badge{border-color:#fff}

.app-view[data-view-panel="wishes"].active{height:100%;min-height:0;overflow:hidden}
.wish-operator-page{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px}
.wish-page-head{min-height:70px;display:flex;align-items:end;justify-content:space-between;gap:24px;padding:2px 3px 0}
.wish-page-head h1{margin:4px 0 0;font-size:30px;letter-spacing:-.04em}
.wish-page-head p{margin:5px 0 0;color:#7f8aa0;font-size:11px}
.wish-head-status{height:38px;padding:0 13px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:#0e1421;display:flex;align-items:center;gap:8px;color:#aab4c6;font-size:10px}
.wish-head-status strong{font-weight:850}
.wish-operator-grid{min-height:0;display:grid;grid-template-columns:minmax(0,1.72fr) minmax(310px,.72fr);gap:14px}
.wish-inbox-card{min-height:0;padding:18px;display:grid;grid-template-rows:48px minmax(0,1fr);gap:8px;overflow:hidden}
.wish-inbox-head{height:48px}
.wish-count-pill{min-width:38px;height:30px;padding:0 10px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(97,123,255,.12);border:1px solid rgba(97,123,255,.24);color:#b7c4ff;font-size:11px;font-weight:900}
.wish-inbox{min-height:0;overflow:auto;padding-right:4px;display:flex;flex-direction:column;gap:9px;scrollbar-width:thin;scrollbar-color:#273247 transparent}
.wish-empty-state{height:100%;min-height:220px;border:1px dashed rgba(255,255,255,.08);border-radius:18px;display:grid;place-content:center;text-align:center;gap:6px;color:#728098}
.wish-empty-state strong{font-size:15px;color:#aab5c7}.wish-empty-state span{font-size:11px}
.wish-inbox-item{flex:0 0 auto;border:1px solid rgba(255,255,255,.075);background:linear-gradient(145deg,#111826,#0c121e);border-radius:17px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.wish-inbox-main{min-height:100px;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:13px;padding:12px}
.wish-inbox-cover,.wish-inbox-cover img,.wish-inbox-cover-fallback{width:72px;height:72px;border-radius:14px;overflow:hidden}.wish-inbox-cover img{object-fit:cover}.wish-inbox-cover-fallback{display:grid;place-items:center;background:#1a2131;color:#7f8ca4;font-size:24px}
.wish-inbox-copy{min-width:0}.wish-inbox-meta{display:flex;align-items:center;gap:9px;margin-bottom:5px}.wish-inbox-meta span{color:#707d94;font-size:8px;font-weight:800;letter-spacing:.08em}.wish-inbox-meta b{height:20px;padding:0 7px;border-radius:999px;display:flex;align-items:center;background:rgba(103,128,255,.12);border:1px solid rgba(103,128,255,.18);color:#aebcff;font-size:7px;letter-spacing:.05em}
.wish-inbox-copy h3{margin:0;font-size:18px;line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wish-inbox-copy>p{margin:5px 0 0;color:#99a4b8;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wish-inbox-actions{display:flex;gap:7px}.wish-action{height:54px;min-width:76px;padding:0 11px;border-radius:13px;border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:.16s}.wish-action span{font-size:19px;line-height:1}.wish-action b{font-size:7px;letter-spacing:.07em}.wish-action.queue{background:linear-gradient(145deg,rgba(39,185,112,.22),rgba(19,98,62,.16));border-color:rgba(60,220,139,.24);color:#55e79b}.wish-action.reject{background:linear-gradient(145deg,rgba(207,53,76,.16),rgba(94,22,39,.13));border-color:rgba(255,90,111,.18);color:#ff7b8b}.wish-action:hover{transform:translateY(-1px);filter:brightness(1.08)}.wish-action:disabled{opacity:.45;cursor:wait}
.wish-request-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:6px;padding:0 12px 12px}.wish-request-note{min-width:0;padding:9px 10px;border:1px solid rgba(255,255,255,.055);background:#0a101a;border-radius:11px}.wish-request-note>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.wish-request-note strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wish-request-note span{flex:0 0 auto;color:#647087;font-size:7px}.wish-request-note p{margin:5px 0 0;color:#aab4c5;font-size:9px;line-height:1.3;white-space:normal}.wish-request-note p.empty-message{color:#59657a;font-style:italic}
.wish-side-column{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px}.wish-share-card,.wish-top-card{padding:18px;min-height:0}.wish-share-card p{color:#7e8aa0;font-size:10px;line-height:1.45;margin:10px 0 12px}.wish-public-url{height:46px;padding:0 7px 0 12px;border-radius:12px;background:#090f19;border:1px solid rgba(255,255,255,.075);display:flex;align-items:center;gap:8px}.wish-public-url span{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a9b4c7;font-size:9px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.wish-public-url button{width:34px;height:34px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#141c29;color:#cbd4e4;cursor:pointer}.wish-share-actions{display:flex;margin-top:9px}.wish-share-actions .soft-btn{width:100%;height:42px;border-radius:11px;font-size:9px}.wish-catalog-status.ready{color:#77ebb0;border-color:rgba(54,215,139,.25);background:rgba(29,143,91,.12)}
.wish-top-card{display:grid;grid-template-rows:46px minmax(0,1fr);overflow:hidden}.wish-top-list{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:5px;padding-right:2px}.wish-top-empty{height:100%;display:grid;place-items:center;text-align:center;color:#647188;font-size:11px}.wish-top-row{min-height:56px;display:grid;grid-template-columns:25px 42px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 7px;border:1px solid rgba(255,255,255,.055);border-radius:11px;background:#0b111c}.wish-top-rank{color:#606d84;font-size:8px;font-weight:900}.wish-top-row img,.wish-top-cover-fallback{width:42px;height:42px;border-radius:9px;object-fit:cover}.wish-top-cover-fallback{display:grid;place-items:center;background:#161d2b;color:#738198}.wish-top-row div{min-width:0}.wish-top-row strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wish-top-row small{display:block;margin-top:3px;color:#748097;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wish-top-row>b{font-size:12px;color:#98aaff}.wish-top-card .text-btn{font-size:8px}

/* Spotify queue marker for accepted wishes. */
.queue-row.wish-queue-row{border-color:rgba(108,127,255,.20);background:linear-gradient(90deg,rgba(87,104,224,.08),#0c111c 38%)}
.queue-wish-badge{justify-self:end;height:22px;padding:0 8px;border-radius:999px;display:flex;align-items:center;background:rgba(106,123,255,.12);border:1px solid rgba(106,123,255,.24);color:#b6c1ff;font-size:7px;font-weight:900;letter-spacing:.07em;white-space:nowrap}
.spotify-queue .queue-row{grid-template-columns:28px 38px minmax(0,1fr) auto!important}

@media(max-width:1500px){
  .wish-operator-grid{grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:10px}.wish-inbox-card,.wish-share-card,.wish-top-card{padding:14px}.wish-inbox-main{grid-template-columns:62px minmax(0,1fr) auto;gap:10px;padding:10px}.wish-inbox-cover,.wish-inbox-cover img,.wish-inbox-cover-fallback{width:62px;height:62px}.wish-inbox-copy h3{font-size:16px}.wish-action{min-width:66px;height:50px;padding:0 8px}.wish-request-list{padding:0 10px 10px}.wish-page-head{min-height:58px}.wish-page-head h1{font-size:26px}
}
@media(max-width:1180px){.wish-operator-grid{grid-template-columns:minmax(620px,1fr) 300px}.wish-page-head{min-width:920px}}
.app-view[data-view-panel="wishes"].active{grid-template-rows:minmax(0,1fr)!important;gap:0!important}
.wish-request-list{max-height:146px;overflow:auto;scrollbar-width:thin;scrollbar-color:#273247 transparent}

/* ======================================================================
   RideControl 3.45 — Musikwünsche polished + Spotify queue fixes
   ====================================================================== */
/* Wünsche-Seite insgesamt lesbarer und präsenter */
.wish-operator-page{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:18px!important}
.wish-page-head{min-height:74px!important;align-items:end!important}
.wish-page-head h1{font-size:44px!important;line-height:1!important}
.wish-page-head p{font-size:15px!important;color:#8f9ab0!important;max-width:760px!important}
.wish-head-status{height:42px!important;padding:0 16px!important;font-size:13px!important}
.wish-head-status strong{font-size:14px!important}
.wish-operator-grid{grid-template-columns:minmax(0,1.72fr) minmax(360px,.92fr)!important;gap:16px!important;min-height:0!important}
.wish-inbox-card{padding:22px!important;grid-template-rows:56px minmax(0,1fr)!important}
.wish-inbox-head h2,.wish-share-card h2,.wish-top-card h2{font-size:18px!important}
.wish-inbox-head .section-label,.wish-share-card .section-label,.wish-top-card .section-label{font-size:11px!important}
.wish-count-pill{min-width:38px!important;height:30px!important;padding:0 12px!important;font-size:14px!important}
.wish-inbox{gap:12px!important}
.wish-empty-state strong{font-size:18px!important}.wish-empty-state span{font-size:13px!important;color:#8290a9!important}
.wish-inbox-main{min-height:124px!important;grid-template-columns:88px minmax(0,1fr) auto!important;gap:16px!important;padding:16px!important}
.wish-inbox-cover,.wish-inbox-cover img,.wish-inbox-cover-fallback{width:88px!important;height:88px!important;border-radius:18px!important}
.wish-inbox-meta{gap:10px!important;margin-bottom:6px!important}
.wish-inbox-meta span{font-size:10px!important;letter-spacing:.11em!important}
.wish-inbox-meta b{height:28px!important;padding:0 12px!important;font-size:11px!important}
.wish-inbox-copy h3{font-size:24px!important}
.wish-inbox-copy>p{font-size:14px!important;margin-top:6px!important}
.wish-inbox-actions{gap:10px!important}
.wish-action{height:60px!important;min-width:94px!important;border-radius:16px!important}
.wish-action span{font-size:22px!important}.wish-action b{font-size:10px!important;letter-spacing:.09em!important}
.wish-request-list{padding:0 14px 14px!important;gap:10px!important}
.wish-request-note{padding:14px 16px!important;border-radius:16px!important}
.wish-request-note div strong{font-size:15px!important}.wish-request-note div span{font-size:12px!important}
.wish-request-note p{font-size:14px!important;line-height:1.42!important}
.wish-side-column{grid-template-rows:auto minmax(0,1fr)!important;gap:16px!important}
.wish-share-card,.wish-top-card{padding:22px!important}
.wish-share-card p{font-size:13px!important;line-height:1.5!important;margin:10px 0 14px!important}
.wish-public-url{height:56px!important;border-radius:16px!important;padding:0 10px 0 14px!important}
.wish-public-url span{font-size:12px!important}
.wish-public-url button{width:40px!important;height:40px!important;border-radius:12px!important;font-size:17px!important}
.wish-share-actions .soft-btn{height:48px!important;border-radius:14px!important;font-size:12px!important}
.wish-top-card{grid-template-rows:54px minmax(0,1fr)!important}
.wish-top-list{gap:8px!important;padding-right:4px!important}
.wish-top-row{min-height:70px!important;grid-template-columns:32px 52px minmax(0,1fr) auto!important;gap:10px!important;padding:8px 10px!important;border-radius:14px!important}
.wish-top-rank{font-size:11px!important}
.wish-top-row img,.wish-top-cover-fallback{width:52px!important;height:52px!important;border-radius:12px!important}
.wish-top-row strong{font-size:14px!important}.wish-top-row small{font-size:11px!important;margin-top:4px!important}.wish-top-row>b{font-size:15px!important}
.wish-top-card .text-btn{font-size:11px!important}

/* Spotify-Queue: Titel frei lesbar + Musikwunsch direkt hinter dem Titel */
.spotify-page-content .queue-row{grid-template-columns:32px 62px minmax(0,1fr)!important;gap:14px!important;align-items:center!important}
.spotify-page-content .queue-copy{min-width:0!important;overflow:hidden!important}
.spotify-page-content .queue-copy strong{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.1!important}
.spotify-page-content .queue-copy small{display:block!important}
.queue-wish-inline{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:28px!important;margin-left:10px!important;padding:0 11px!important;border-radius:999px!important;background:rgba(255,71,97,.16)!important;border:1px solid rgba(255,91,113,.34)!important;color:#ff6c81!important;font-size:11px!important;font-weight:900!important;letter-spacing:.09em!important;vertical-align:middle!important;box-shadow:0 0 0 1px rgba(255,255,255,.02) inset}
.queue-row.wish-queue-row{border-color:rgba(255,85,110,.18)!important;background:linear-gradient(90deg,rgba(133,36,61,.18),#0c111c 28%)!important}
.queue-wish-badge{display:none!important}

@media(max-width:1650px){
  .wish-operator-grid{grid-template-columns:minmax(0,1.55fr) minmax(320px,.9fr)!important}
  .wish-inbox-copy h3{font-size:22px!important}
}
@media(max-width:1380px){
  .wish-operator-grid{grid-template-columns:minmax(0,1fr)!important}
  .wish-side-column{grid-template-columns:1fr 1fr!important;grid-template-rows:none!important}
}
@media(max-width:1100px){
  .wish-side-column{grid-template-columns:1fr!important}
  .wish-page-head h1{font-size:34px!important}
  .wish-inbox-main{grid-template-columns:76px minmax(0,1fr)!important}
  .wish-inbox-actions{grid-column:1/-1;justify-content:flex-start!important}
}

/* RideControl 3.46 — Wunschbox Labels / stärkere Buttons */
.wish-action{
  min-width:126px!important;
  height:64px!important;
  border-radius:18px!important;
  gap:4px!important;
  box-shadow:0 16px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.wish-action.queue{
  background:linear-gradient(135deg,rgba(47,207,124,.92),rgba(23,160,92,.88))!important;
  border-color:rgba(93,244,157,.42)!important;
  color:#f4fff8!important;
}
.wish-action.reject{
  background:linear-gradient(135deg,rgba(255,98,122,.24),rgba(175,33,59,.22))!important;
  border-color:rgba(255,115,136,.28)!important;
  color:#ffb3bf!important;
}
.wish-action span{font-size:21px!important}
.wish-action b{font-size:11px!important;letter-spacing:.08em!important}

@media(max-width:1100px){
  .wish-action{min-width:112px!important;height:58px!important}
}

/* RideControl 3.47 — Wunschbox closed state */
.wish-empty-state.closed{gap:10px;background:linear-gradient(145deg,rgba(19,24,38,.65),rgba(11,15,25,.75));border-style:solid}
.wish-sleep-icon{width:74px;height:58px;margin:0 auto 2px;position:relative}
.wish-sleep-icon span{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64px;height:44px;border-radius:16px;background:linear-gradient(145deg,#111827,#0c1320);border:1px solid rgba(255,255,255,.11);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.wish-sleep-icon span::before,.wish-sleep-icon span::after{content:"";position:absolute;top:16px;width:12px;height:4px;border-radius:999px;background:#8fa0ff}
.wish-sleep-icon span::before{left:14px;transform:rotate(-7deg)}
.wish-sleep-icon span::after{right:14px;transform:rotate(7deg)}
.wish-sleep-icon::before,.wish-sleep-icon::after{content:"z";position:absolute;right:8px;top:2px;color:#cad5ff;font-weight:900;opacity:.7;animation:wishSleepFloat 2.6s ease-in-out infinite}
.wish-sleep-icon::after{right:-2px;top:-8px;font-size:20px;animation-delay:.9s}
@keyframes wishSleepFloat{0%,100%{transform:translateY(0);opacity:.18}50%{transform:translateY(-8px);opacity:.85}}

/* RideControl 3.48 — Wunschbox simplified + QR */
.wish-page-head.compact{min-height:auto!important;padding:0 2px 2px!important;display:block!important}
.wish-page-head.compact h1{font-size:44px!important;line-height:1!important;margin:4px 0 0!important}
.wish-page-head.compact .section-label{font-size:11px!important}
.wish-share-split{display:grid;grid-template-columns:minmax(0,1fr) 146px;gap:14px;align-items:stretch}
.wish-share-left{display:flex;flex-direction:column;justify-content:center}
.wish-share-actions.dual{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.wish-share-actions .soft-btn.alt{text-decoration:none;display:flex;align-items:center;justify-content:center}
.wish-share-actions .soft-btn.disabled{opacity:.45;pointer-events:none}
.wish-share-qr-wrap{display:flex;align-items:center;justify-content:center}
.wish-share-qr{width:146px;height:146px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,#0b111c,#111928);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.wish-share-qr img{width:100%;height:100%;object-fit:cover;display:block}
.wish-qr-placeholder{width:94px;height:94px;border-radius:18px;border:1px dashed rgba(255,255,255,.18);display:grid;place-items:center;color:#8b97af;font-size:22px;font-weight:900;letter-spacing:.08em}
@media(max-width:1500px){.wish-share-split{grid-template-columns:minmax(0,1fr) 132px}.wish-share-qr{width:132px;height:132px}}
@media(max-width:1180px){.wish-share-split{grid-template-columns:1fr}.wish-share-qr-wrap{justify-content:flex-start}.wish-share-qr{width:152px;height:152px}}

/* ======================================================================
   RideControl 3.51 — Wunschbox manual switch + ambient empty states
   ====================================================================== */
.app-view[data-view-panel="wishes"].active{padding-top:0!important}
.wish-operator-page{
  grid-template-rows:minmax(0,1fr)!important;
  gap:0!important;
  padding-top:0!important;
}
.wish-operator-grid{height:100%!important;min-height:0!important}
.wish-inbox-card{height:100%!important}

.wish-inbox-head-actions{display:flex;align-items:center;gap:12px}
.wish-box-toggle{
  position:relative;
  width:104px;
  height:42px;
  padding:0 12px 0 48px;
  border-radius:999px;
  border:1px solid rgba(70,230,144,.34);
  background:linear-gradient(135deg,rgba(38,192,111,.34),rgba(17,110,66,.30));
  color:#dffff0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.16);
  transition:background .24s ease,border-color .24s ease,box-shadow .24s ease,color .24s ease;
}
.wish-box-toggle>span{
  position:absolute;
  left:5px;
  top:5px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#55e99d;
  box-shadow:0 4px 12px rgba(23,190,107,.35),inset 0 1px 0 rgba(255,255,255,.45);
  transform:translateX(0);
  transition:transform .26s cubic-bezier(.2,.8,.2,1),background .24s ease,box-shadow .24s ease;
}
.wish-box-toggle b{font-size:11px;letter-spacing:.10em;font-weight:950}
.wish-box-toggle.is-off{
  padding:0 48px 0 12px;
  border-color:rgba(255,86,111,.32);
  background:linear-gradient(135deg,rgba(193,48,72,.30),rgba(103,20,38,.28));
  color:#ffd7dd;
}
.wish-box-toggle.is-off>span{
  transform:translateX(62px);
  background:#ff637b;
  box-shadow:0 4px 12px rgba(220,54,83,.34),inset 0 1px 0 rgba(255,255,255,.42);
}
.wish-box-toggle:disabled{opacity:.55;cursor:not-allowed}
.wish-catalog-status.closed{color:#ff9aaa!important;border-color:rgba(255,86,111,.28)!important;background:rgba(147,28,49,.14)!important}

/* Empty & ready: atmospheric like the Spotify disconnected state. */
.wish-empty-state.live,
.wish-empty-state.closed{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-style:solid!important;
  background:
    radial-gradient(circle at 50% 43%,rgba(87,104,255,.12),transparent 32%),
    linear-gradient(155deg,rgba(13,20,36,.88),rgba(8,13,24,.94))!important;
}
.wish-empty-state.live::before,
.wish-empty-state.closed::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:-2;
  background:conic-gradient(from 40deg,transparent,rgba(91,112,255,.11),transparent 30%,rgba(174,78,255,.08),transparent 58%,rgba(45,213,151,.06),transparent);
  filter:blur(28px);
  animation:wishAmbientTurn 13s linear infinite;
}
.wish-empty-state.live::after{
  content:"";
  position:absolute;
  left:10%;right:10%;bottom:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(115,137,255,.30),transparent);
  box-shadow:0 -50px 70px rgba(95,115,255,.08);
}
.wish-ai-orb{
  width:108px;height:108px;margin:0 auto 14px;position:relative;display:grid;place-items:center;
}
.wish-ai-orb::before,.wish-ai-orb::after,.wish-ai-orb i{
  content:"";position:absolute;border-radius:50%;border:1px solid rgba(117,137,255,.25);
}
.wish-ai-orb::before{inset:0;animation:wishOrbSpin 8s linear infinite}
.wish-ai-orb::after{inset:15px;border-color:rgba(191,93,255,.22);animation:wishOrbSpin 5.5s linear infinite reverse}
.wish-ai-orb i:nth-child(1){inset:28px;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(102,119,255,.22) 35%,rgba(62,75,158,.04) 70%);border-color:rgba(255,255,255,.12);box-shadow:0 0 38px rgba(88,104,255,.22)}
.wish-ai-orb i:nth-child(2){width:9px;height:9px;left:7px;top:50%;background:#7f8fff;border:0;box-shadow:0 0 14px rgba(127,143,255,.9)}
.wish-ai-orb i:nth-child(3){width:7px;height:7px;right:13px;top:20px;background:#bb72ff;border:0;box-shadow:0 0 13px rgba(187,114,255,.8)}
.wish-ai-orb>span{position:relative;z-index:2;font-size:34px;color:#dfe4ff;text-shadow:0 0 18px rgba(133,146,255,.75);animation:wishSparkPulse 2.4s ease-in-out infinite}
.wish-ai-particles{position:absolute;inset:0;pointer-events:none;z-index:-1}
.wish-ai-particles i{position:absolute;width:4px;height:4px;border-radius:50%;background:#9faeff;box-shadow:0 0 12px rgba(127,143,255,.7);animation:wishParticleFloat 5s ease-in-out infinite}
.wish-ai-particles i:nth-child(1){left:16%;top:22%}.wish-ai-particles i:nth-child(2){left:26%;top:70%;animation-delay:.8s}.wish-ai-particles i:nth-child(3){left:48%;top:18%;animation-delay:1.5s}.wish-ai-particles i:nth-child(4){right:20%;top:32%;animation-delay:.4s}.wish-ai-particles i:nth-child(5){right:14%;bottom:20%;animation-delay:1.1s}.wish-ai-particles i:nth-child(6){left:64%;bottom:12%;animation-delay:1.8s}
.wish-empty-state.live strong{font-size:22px!important;color:#edf0ff!important}
.wish-empty-state.live>span{font-size:14px!important;color:#8593af!important}
.wish-empty-state.closed strong{font-size:22px!important;color:#e7eaff!important}
.wish-empty-state.closed>span{font-size:14px!important;color:#8593af!important}
.wish-empty-animated{animation:wishEmptyModeIn .38s cubic-bezier(.2,.8,.2,1)}

/* Top 10 gets more visual weight. */
.wish-top-card{grid-template-rows:60px minmax(0,1fr)!important}
.wish-top-card .panel-title-row h2{font-size:21px!important}
.wish-top-list{gap:10px!important}
.wish-top-row{
  min-height:82px!important;
  grid-template-columns:36px 60px minmax(0,1fr) auto!important;
  gap:12px!important;
  padding:10px 12px!important;
  border-radius:16px!important;
}
.wish-top-rank{font-size:12px!important}
.wish-top-row img,.wish-top-cover-fallback{width:60px!important;height:60px!important;border-radius:14px!important}
.wish-top-row strong{font-size:16px!important;line-height:1.08!important}
.wish-top-row small{font-size:12px!important;margin-top:5px!important}
.wish-top-row>b{font-size:17px!important}

@keyframes wishAmbientTurn{to{transform:rotate(360deg)}}
@keyframes wishOrbSpin{to{transform:rotate(360deg)}}
@keyframes wishSparkPulse{0%,100%{transform:scale(.92);opacity:.72}50%{transform:scale(1.08);opacity:1}}
@keyframes wishParticleFloat{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(-14px);opacity:1}}
@keyframes wishEmptyModeIn{from{opacity:0;transform:scale(.985) translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:1500px){
  .wish-box-toggle{width:94px;height:38px;padding-left:43px}
  .wish-box-toggle>span{width:26px;height:26px;top:5px;left:5px}
  .wish-box-toggle.is-off{padding:0 43px 0 10px}
  .wish-box-toggle.is-off>span{transform:translateX(57px)}
  .wish-top-row{min-height:74px!important;grid-template-columns:32px 54px minmax(0,1fr) auto!important}
  .wish-top-row img,.wish-top-cover-fallback{width:54px!important;height:54px!important}
  .wish-top-row strong{font-size:15px!important}.wish-top-row small{font-size:11px!important}.wish-top-row>b{font-size:16px!important}
}
/* Correct switch direction: OFF = knob left/red, ON = knob right/green. */
.wish-box-toggle.is-on{padding:0 48px 0 12px!important}
.wish-box-toggle.is-on>span{transform:translateX(62px)!important}
.wish-box-toggle.is-off{padding:0 12px 0 48px!important}
.wish-box-toggle.is-off>span{transform:translateX(0)!important}
@media(max-width:1500px){
  .wish-box-toggle.is-on{padding:0 43px 0 10px!important}
  .wish-box-toggle.is-on>span{transform:translateX(57px)!important}
  .wish-box-toggle.is-off{padding:0 10px 0 43px!important}
  .wish-box-toggle.is-off>span{transform:translateX(0)!important}
}

/* RideControl 3.52 — Wunschbox ambience + smoother toggle */
.wish-box-toggle{
  width:116px!important;
  padding:0 14px!important;
  justify-content:flex-start!important;
  overflow:hidden;
  transition:background .34s cubic-bezier(.2,.8,.2,1),border-color .34s cubic-bezier(.2,.8,.2,1),box-shadow .34s cubic-bezier(.2,.8,.2,1),color .24s ease!important;
}
.wish-box-toggle::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0));
  opacity:.55;
  pointer-events:none;
}
.wish-box-toggle>span{
  left:6px!important;
  top:6px!important;
  width:28px!important;
  height:28px!important;
  transition:transform .34s cubic-bezier(.22,1,.36,1),background .28s ease,box-shadow .28s ease!important;
}
.wish-box-toggle b{
  position:absolute;
  left:16px;
  right:16px;
  text-align:center;
  transition:transform .28s ease,opacity .24s ease,letter-spacing .24s ease;
}
.wish-box-toggle.is-off{color:#ffd7dd!important}
.wish-box-toggle.is-off>span{transform:translateX(76px)!important}
.wish-box-toggle.is-off b{transform:translateX(-4px)}
.wish-box-toggle.is-on b{transform:translateX(4px)}
.wish-box-toggle:active>span{transform:scale(.96) translateX(0)}
.wish-box-toggle.is-off:active>span{transform:scale(.96) translateX(76px)!important}

.wish-empty-state.live,
.wish-empty-state.closed{
  min-height:360px;
  border-color:rgba(255,255,255,.07)!important;
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.wish-empty-state.live{
  --mx:50%;
  --my:46%;
  background:
    radial-gradient(circle at var(--mx) var(--my),rgba(101,123,255,.20),transparent 20%),
    radial-gradient(circle at 72% 28%,rgba(166,92,255,.14),transparent 28%),
    radial-gradient(circle at 58% 84%,rgba(44,220,174,.10),transparent 24%),
    linear-gradient(160deg,rgba(7,12,24,.96),rgba(4,8,17,.98))!important;
}
.wish-empty-state.closed{
  background:
    radial-gradient(circle at 70% 26%,rgba(162,175,255,.08),transparent 18%),
    radial-gradient(circle at 20% 74%,rgba(108,122,184,.06),transparent 20%),
    linear-gradient(160deg,rgba(9,14,25,.96),rgba(5,8,16,.98))!important;
}
.wish-empty-state.live::before,
.wish-empty-state.closed::before{
  inset:0!important;
  filter:none!important;
  animation:none!important;
  background:none!important;
}
.wish-empty-state.live::after,
.wish-empty-state.closed::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.wish-empty-state.live::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 18%),
    radial-gradient(circle at 50% 100%,rgba(47,73,140,.10),transparent 46%);
}
.wish-empty-state.closed::after{
  background:radial-gradient(circle at 50% 100%,rgba(86,105,175,.05),transparent 42%);
}
.wish-space-radar{position:relative;width:158px;height:158px;margin:0 auto 18px;display:grid;place-items:center}
.wish-radar-core,
.wish-radar-ring,
.wish-radar-sweep,
.wish-radar-blip,
.wish-radar-beam{position:absolute;border-radius:50%}
.wish-radar-core{
  width:38px;height:38px;
  background:radial-gradient(circle at 35% 32%,rgba(255,255,255,.85),rgba(137,152,255,.48) 38%,rgba(50,62,126,.16) 72%,transparent 100%);
  box-shadow:0 0 30px rgba(115,134,255,.32),0 0 80px rgba(82,102,255,.18);
  animation:wishRadarCorePulse 3.2s ease-in-out infinite;
}
.wish-radar-ring{border:1px solid rgba(120,138,255,.18);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset}
.wish-radar-ring.r1{width:62px;height:62px}
.wish-radar-ring.r2{width:98px;height:98px;border-color:rgba(177,98,255,.18)}
.wish-radar-ring.r3{width:136px;height:136px;border-color:rgba(92,212,179,.16)}
.wish-radar-sweep{
  width:136px;height:136px;
  background:conic-gradient(from 0deg,rgba(108,128,255,.22),rgba(108,128,255,0) 18%,transparent 58%);
  -webkit-mask:radial-gradient(circle at center,transparent 0 29px,#000 30px 100%);
          mask:radial-gradient(circle at center,transparent 0 29px,#000 30px 100%);
  animation:wishRadarSweep 4.6s linear infinite;
  filter:drop-shadow(0 0 18px rgba(109,128,255,.18));
}
.wish-radar-beam{
  width:150px;height:150px;
  border:1px solid rgba(255,255,255,.03);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.03),transparent 65%);
}
.wish-radar-blip{width:8px;height:8px;background:#a4b1ff;box-shadow:0 0 12px currentColor;animation:wishRadarBlip 2.6s ease-in-out infinite}
.wish-radar-blip.b1{left:18px;top:82px;color:#89a2ff;animation-delay:.2s}
.wish-radar-blip.b2{right:20px;top:36px;width:7px;height:7px;color:#c176ff;animation-delay:1s}
.wish-radar-blip.b3{left:92px;bottom:18px;width:6px;height:6px;color:#51e0b3;animation-delay:1.7s}
.wish-ai-particles.radar{z-index:0}
.wish-ai-particles.radar i{animation:wishParticleDrift 7.6s ease-in-out infinite;opacity:.75}
.wish-ai-particles.radar i:nth-child(1){left:18%;top:21%}
.wish-ai-particles.radar i:nth-child(2){left:29%;top:74%;animation-delay:.8s}
.wish-ai-particles.radar i:nth-child(3){left:50%;top:16%;animation-delay:1.5s}
.wish-ai-particles.radar i:nth-child(4){right:20%;top:35%;animation-delay:.4s}
.wish-ai-particles.radar i:nth-child(5){right:13%;bottom:21%;animation-delay:1.1s}
.wish-ai-particles.radar i:nth-child(6){left:69%;bottom:12%;animation-delay:1.8s}
.wish-sleep-stars{position:absolute;inset:0;pointer-events:none;z-index:-1}
.wish-sleep-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(222,230,255,.85);box-shadow:0 0 10px rgba(193,206,255,.25);animation:wishStarBlink 3.6s ease-in-out infinite}
.wish-sleep-stars i:nth-child(1){left:16%;top:24%}
.wish-sleep-stars i:nth-child(2){left:28%;top:64%;animation-delay:.7s}
.wish-sleep-stars i:nth-child(3){left:50%;top:20%;animation-delay:1.2s}
.wish-sleep-stars i:nth-child(4){right:21%;top:34%;animation-delay:1.8s}
.wish-sleep-stars i:nth-child(5){right:14%;bottom:18%;animation-delay:.4s}
.wish-sleep-stars i:nth-child(6){left:63%;bottom:13%;animation-delay:2.2s}
.wish-empty-state.live strong,
.wish-empty-state.closed strong{font-size:24px!important;line-height:1.05!important}
.wish-empty-state.live>span,
.wish-empty-state.closed>span{font-size:14px!important;max-width:420px;margin:0 auto}

.wish-top-card .panel-title-row h2{font-size:23px!important}
.wish-top-row{min-height:88px!important;grid-template-columns:38px 64px minmax(0,1fr) auto!important}
.wish-top-row img,.wish-top-cover-fallback{width:64px!important;height:64px!important}
.wish-top-row strong{font-size:17px!important}
.wish-top-row small{font-size:13px!important}
.wish-top-row>b{font-size:18px!important}

@keyframes wishRadarSweep{to{transform:rotate(360deg)}}
@keyframes wishRadarCorePulse{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.08);opacity:1}}
@keyframes wishRadarBlip{0%,100%{opacity:.28;transform:scale(.72)}42%{opacity:1;transform:scale(1.15)}}
@keyframes wishParticleDrift{0%,100%{transform:translate3d(0,0,0);opacity:.34}35%{opacity:1}50%{transform:translate3d(4px,-14px,0)}85%{opacity:.62}100%{transform:translate3d(-3px,-6px,0)}}
@keyframes wishStarBlink{0%,100%{opacity:.22;transform:scale(.8)}40%{opacity:.88;transform:scale(1.22)}}

/* RideControl 3.53 — Wunschbox empty state back to one clean panel */
.wish-inbox .wish-empty-state.live,
.wish-inbox .wish-empty-state.closed{
  position:relative;
  min-height:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden;
  isolation:isolate;
}
.wish-inbox .wish-empty-state.live::before{
  content:""!important;
  position:absolute!important;
  inset:8% 12%!important;
  z-index:0!important;
  border:0!important;
  background:url('avt-medien-mark.png') center/310px auto no-repeat!important;
  opacity:.065!important;
  filter:blur(24px) saturate(1.35)!important;
  transform:none!important;
  animation:wishBrandBreathe 7s ease-in-out infinite!important;
  pointer-events:none;
}
.wish-inbox .wish-empty-state.live::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:
    radial-gradient(circle at 34% 44%,rgba(255,68,164,.055),transparent 23%),
    radial-gradient(circle at 59% 42%,rgba(107,80,255,.07),transparent 24%),
    radial-gradient(circle at 47% 59%,rgba(255,196,38,.035),transparent 20%)!important;
  opacity:1!important;
  pointer-events:none;
}
.wish-inbox .wish-empty-state.closed::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:
    radial-gradient(circle at 30% 32%,rgba(132,149,220,.035),transparent 22%),
    radial-gradient(circle at 74% 70%,rgba(101,116,180,.025),transparent 22%)!important;
  filter:none!important;
  opacity:1!important;
  animation:none!important;
  pointer-events:none;
}
.wish-inbox .wish-empty-state.closed::after{display:none!important}
.wish-inbox .wish-empty-state.live>* ,
.wish-inbox .wish-empty-state.closed>*{position:relative;z-index:2}

.wish-ready-signal{
  width:76px;
  height:58px;
  margin:0 auto 14px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.wish-ready-signal::before{
  content:"";
  position:absolute;
  inset:4px 0;
  background:url('avt-medien-mark.png') center/48px 48px no-repeat;
  opacity:.68;
  filter:drop-shadow(0 0 18px rgba(104,91,255,.18));
}
.wish-ready-signal span{
  position:absolute;
  left:7px;
  right:7px;
  bottom:1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(133,150,255,.38),rgba(255,94,170,.26),transparent);
  animation:wishSignalPulse 2.8s ease-in-out infinite;
}
.wish-ready-signal i{
  position:absolute;
  width:4px;height:4px;border-radius:50%;
  background:#9eafff;
  box-shadow:0 0 10px rgba(126,144,255,.55);
  animation:wishSignalDot 3.8s ease-in-out infinite;
}
.wish-ready-signal i:nth-child(2){left:5px;top:25px}
.wish-ready-signal i:nth-child(3){right:7px;top:15px;animation-delay:1.15s;background:#d27fff}
.wish-ready-signal i:nth-child(4){right:16px;bottom:8px;animation-delay:2.05s;background:#ffd45b}
.wish-ai-particles.minimal{position:absolute;inset:0;z-index:1;pointer-events:none}
.wish-ai-particles.minimal i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(181,194,255,.72);
  box-shadow:0 0 8px rgba(120,142,255,.32);
  animation:wishMinimalParticle 6.8s ease-in-out infinite;
}
.wish-ai-particles.minimal i:nth-child(1){left:16%;top:25%}
.wish-ai-particles.minimal i:nth-child(2){left:27%;bottom:22%;animation-delay:1.2s}
.wish-ai-particles.minimal i:nth-child(3){left:50%;top:20%;animation-delay:2.1s}
.wish-ai-particles.minimal i:nth-child(4){right:21%;top:34%;animation-delay:.7s}
.wish-ai-particles.minimal i:nth-child(5){right:14%;bottom:20%;animation-delay:1.7s}
.wish-ai-particles.minimal i:nth-child(6){left:65%;bottom:13%;animation-delay:2.8s}
.wish-empty-state.live strong{font-size:22px!important;color:#edf0ff!important}
.wish-empty-state.live>span{font-size:13px!important;color:#8290a9!important}
.wish-empty-state.closed strong{font-size:22px!important}
.wish-empty-state.closed>span{font-size:13px!important}

@keyframes wishBrandBreathe{0%,100%{opacity:.045;transform:scale(.985)}50%{opacity:.085;transform:scale(1.015)}}
@keyframes wishSignalPulse{0%,100%{opacity:.25;transform:scaleX(.72)}50%{opacity:.85;transform:scaleX(1)}}
@keyframes wishSignalDot{0%,100%{opacity:.18;transform:translateY(0) scale(.8)}45%{opacity:.8;transform:translateY(-3px) scale(1.08)}}
@keyframes wishMinimalParticle{0%,100%{opacity:.15;transform:translateY(0)}50%{opacity:.58;transform:translateY(-7px)}}
.wish-inbox .wish-empty-state.closed .wish-sleep-stars{position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none}

/* ======================================================================
   RideControl 3.54 — clean wish ready state + corrected wish switch
   ====================================================================== */
/* No brand mark in the empty wishes canvas. Keep the existing card itself
   as the stage and only add one very quiet scanning indicator. */
.wish-inbox .wish-empty-state.live::before{
  display:none!important;
  content:none!important;
  background:none!important;
  animation:none!important;
}
.wish-inbox .wish-empty-state.live::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(101,120,255,.055),transparent 24%),
    radial-gradient(circle at 58% 58%,rgba(173,92,255,.025),transparent 25%)!important;
  pointer-events:none!important;
}
.wish-ready-circle{
  width:92px;
  height:92px;
  margin:0 auto 18px;
  position:relative;
  border-radius:50%;
  border:1px solid rgba(127,145,255,.24);
  box-shadow:0 0 28px rgba(93,112,255,.08),inset 0 0 20px rgba(93,112,255,.035);
}
.wish-ready-circle::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  border:1px solid transparent;
  border-top-color:rgba(150,165,255,.78);
  border-right-color:rgba(189,104,255,.26);
  animation:wishReadySlowSpin 12s linear infinite;
  filter:drop-shadow(0 0 5px rgba(132,148,255,.20));
}
.wish-ready-circle::after{
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  top:4px;
  left:50%;
  margin-left:-3px;
  border-radius:50%;
  background:#aab8ff;
  box-shadow:0 0 10px rgba(154,171,255,.55);
  animation:wishReadySlowOrbit 12s linear infinite;
  transform-origin:3px 42px;
}
.wish-ready-circle span{
  position:absolute;
  inset:23px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.05);
  background:radial-gradient(circle,rgba(119,135,255,.07),rgba(119,135,255,0) 70%);
}
.wish-inbox .wish-empty-state.live strong{
  font-size:28px!important;
  line-height:1.05!important;
  color:#f1f3ff!important;
  letter-spacing:-.025em!important;
}
.wish-inbox .wish-empty-state.live>span{
  font-size:15px!important;
  color:#8490a8!important;
  margin-top:2px!important;
}
.wish-inbox .wish-empty-state.closed strong{
  font-size:26px!important;
  line-height:1.05!important;
}

/* Switch: ON = green knob on the right, OFF = red knob on the left.
   Explicit geometry avoids all legacy padding/transform rules fighting. */
.wish-box-toggle,
.wish-box-toggle.is-on,
.wish-box-toggle.is-off{
  position:relative!important;
  width:104px!important;
  height:40px!important;
  min-width:104px!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:999px!important;
  transition:background .26s ease,border-color .26s ease,box-shadow .26s ease!important;
}
.wish-box-toggle.is-on{
  background:linear-gradient(135deg,rgba(34,181,105,.40),rgba(18,107,67,.38))!important;
  border-color:rgba(70,230,144,.38)!important;
  color:#e8fff4!important;
}
.wish-box-toggle.is-off{
  background:linear-gradient(135deg,rgba(190,48,71,.34),rgba(102,20,38,.32))!important;
  border-color:rgba(255,91,115,.34)!important;
  color:#ffe0e5!important;
}
.wish-box-toggle>span,
.wish-box-toggle.is-on>span,
.wish-box-toggle.is-off>span{
  position:absolute!important;
  left:6px!important;
  top:5px!important;
  width:28px!important;
  height:28px!important;
  border-radius:50%!important;
  transition:transform .30s cubic-bezier(.22,1,.36,1),background .24s ease,box-shadow .24s ease!important;
}
.wish-box-toggle.is-on>span{
  transform:translateX(64px)!important;
  background:#55e99d!important;
  box-shadow:0 4px 12px rgba(23,190,107,.35),inset 0 1px 0 rgba(255,255,255,.45)!important;
}
.wish-box-toggle.is-off>span{
  transform:translateX(0)!important;
  background:#ff637b!important;
  box-shadow:0 4px 12px rgba(220,54,83,.34),inset 0 1px 0 rgba(255,255,255,.42)!important;
}
.wish-box-toggle b,
.wish-box-toggle.is-on b,
.wish-box-toggle.is-off b{
  position:absolute!important;
  top:50%!important;
  width:auto!important;
  right:auto!important;
  margin:0!important;
  transform:translateY(-50%)!important;
  font-size:11px!important;
  font-weight:950!important;
  letter-spacing:.09em!important;
  line-height:1!important;
  text-align:center!important;
}
.wish-box-toggle.is-on b{left:16px!important}
.wish-box-toggle.is-off b{left:auto!important;right:14px!important}
.wish-box-toggle:active>span{filter:brightness(.94)}

@keyframes wishReadySlowSpin{to{transform:rotate(360deg)}}
@keyframes wishReadySlowOrbit{to{transform:rotate(360deg)}}

@media(max-width:1500px){
  .wish-box-toggle,.wish-box-toggle.is-on,.wish-box-toggle.is-off{width:104px!important;height:40px!important;min-width:104px!important}
  .wish-box-toggle.is-on>span{transform:translateX(64px)!important}
  .wish-box-toggle.is-off>span{transform:translateX(0)!important}
}

/* ======================================================================
   RideControl 3.57 — Web MIDI Control
   ====================================================================== */
.midi-setup-card{grid-column:1/-1}
.midi-device-row{display:grid;grid-template-columns:minmax(260px,1.2fr) auto minmax(190px,.8fr);gap:12px;align-items:end}
.midi-device-select{display:grid;gap:7px}.midi-device-select>span{font-size:10px;font-weight:900;letter-spacing:.09em;color:#8390a8}
.midi-refresh-btn{height:48px!important;min-width:142px!important;border-radius:13px!important;font-size:10px!important}
.midi-device-status{height:48px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#101725;display:flex;align-items:center;gap:9px;padding:0 13px;color:#8f9ab0;font-size:11px;font-weight:800}
.midi-device-status i{width:9px;height:9px;border-radius:50%;background:#59647a;box-shadow:0 0 0 4px rgba(89,100,122,.08)}
.midi-device-status.ready{color:#bcebd1;border-color:rgba(63,218,139,.18);background:rgba(24,100,66,.10)}
.midi-device-status.ready i{background:#43df91;box-shadow:0 0 0 4px rgba(67,223,145,.09),0 0 16px rgba(67,223,145,.22)}
.midi-device-status.bad{color:#ffabb8;border-color:rgba(255,93,119,.18);background:rgba(112,29,47,.12)}
.midi-device-status.bad i{background:#ff6078;box-shadow:0 0 0 4px rgba(255,96,120,.08)}
.midi-help{margin-top:12px;color:#718097;font-size:11px;line-height:1.5}
.midi-map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.midi-map-group{border:1px solid rgba(255,255,255,.07);border-radius:16px;background:#0d1420;overflow:hidden}
.midi-map-group-head{height:38px;padding:0 14px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.midi-map-group-head span{font-size:9px;font-weight:950;letter-spacing:.13em;color:#7d8aa2}
.midi-map-row{min-height:54px;display:grid;grid-template-columns:minmax(105px,.8fr) minmax(145px,1fr) 76px 34px;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05)}
.midi-map-row:last-child{border-bottom:0}.midi-map-row strong{font-size:12px;color:#dce2ef}.midi-map-value{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#7f8da5;font-size:10px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.midi-map-value.assigned{color:#aebdff}.midi-map-value.learning{color:#e7dcff;animation:midiLearnPulse 1s ease-in-out infinite}
.midi-map-row>[data-midi-learn]{height:34px;border:1px solid rgba(112,131,232,.20);border-radius:10px;background:rgba(87,103,194,.10);color:#b7c4ff;font-size:9px;font-weight:900;letter-spacing:.08em;cursor:pointer}
.midi-map-row>[data-midi-learn].learning{background:rgba(130,86,220,.18);border-color:rgba(164,111,255,.35);color:#eadfff}
.midi-clear{width:34px;height:34px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#141c29;color:#8794aa;font-size:18px;cursor:pointer;display:grid;place-items:center}
.midi-clear:disabled{opacity:.35;cursor:default}.midi-clear:not(:disabled):hover{color:#ff8799;border-color:rgba(255,102,126,.22);background:rgba(116,29,46,.12)}
.midi-jingle-hint{min-height:112px;padding:18px;display:flex;flex-direction:column;justify-content:center;gap:8px}.midi-jingle-hint strong{font-size:15px}.midi-jingle-hint span{font-size:11px;line-height:1.5;color:#76849b;max-width:520px}
.sound-midi-field{display:grid;gap:9px;padding:14px 0 2px}.sound-midi-field>span{font-size:10px;font-weight:900;letter-spacing:.09em;color:#8692a7}.sound-midi-row{display:grid;grid-template-columns:minmax(0,1fr) auto 38px;gap:8px;align-items:center}.sound-midi-row>strong{height:46px;padding:0 13px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#111824;display:flex;align-items:center;color:#8390a8;font-size:11px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.sound-midi-row>strong.assigned{color:#b8c5ff}.sound-midi-row>strong.learning{color:#eadfff;border-color:rgba(151,108,255,.24);animation:midiLearnPulse 1s ease-in-out infinite}.sound-midi-row .btn{height:46px}.sound-midi-clear{width:38px;height:46px}.sound-midi-field small{color:#66738a;font-size:9px;line-height:1.4}
@keyframes midiLearnPulse{0%,100%{opacity:.58}50%{opacity:1}}
@media(max-width:1500px){.midi-device-row{grid-template-columns:minmax(220px,1fr) auto minmax(170px,.7fr)}.midi-map-row{grid-template-columns:minmax(90px,.8fr) minmax(120px,1fr) 68px 32px;gap:6px;padding:7px 8px}.midi-map-row>[data-midi-learn]{font-size:8px}.midi-clear{width:32px;height:32px}}
@media(max-width:1050px){.midi-device-row{grid-template-columns:1fr}.midi-map-grid{grid-template-columns:1fr}.midi-refresh-btn{width:100%}.midi-map-row{grid-template-columns:minmax(110px,.8fr) minmax(140px,1fr) 76px 34px}}

/* ======================================================================
   RideControl 3.58 — scalable Setup navigation
   ====================================================================== */
.app-view[data-view-panel="setup"].active{
  display:block!important;
  height:100%!important;
  min-height:0!important;
}
.setup-layout{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:154px minmax(0,1fr);
  gap:14px;
}
.setup-side-nav{
  min-height:0;
  border-radius:28px;
  border:1px solid rgba(142,118,236,.18);
  background:
    radial-gradient(circle at 50% 6%,rgba(113,89,218,.13),transparent 26%),
    linear-gradient(180deg,#15182a 0%,#191733 56%,#121525 100%);
  box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);
  display:flex;
  flex-direction:column;
  padding:18px 12px 14px;
  overflow:hidden;
}
.setup-side-head{
  min-height:106px;
  padding:10px 8px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  border-bottom:1px solid rgba(255,255,255,.065);
  margin-bottom:14px;
}
.setup-side-head>span{
  color:#a294df;
  font-size:10px;
  font-weight:950;
  letter-spacing:.22em;
}
.setup-side-head>strong{
  margin-top:7px;
  color:#f1efff;
  font-size:18px;
  letter-spacing:-.025em;
}
.setup-side-head .setup-role-badge{
  margin:12px 0 0!important;
  height:25px!important;
  min-height:25px!important;
  padding:0 9px!important;
  font-size:8px!important;
  border-color:rgba(127,137,219,.20);
  background:rgba(73,84,154,.12);
}
.setup-side-list,.setup-side-bottom{display:flex;flex-direction:column;gap:10px}
.setup-side-bottom{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.065)}
.setup-side-btn{
  position:relative;
  width:100%;
  min-height:76px;
  border:1px solid transparent;
  border-radius:18px;
  background:transparent;
  color:#aeb2c9;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.setup-side-btn>span:not(.setup-lock-icon){font-size:24px;line-height:1;color:#b6b4d7}
.setup-side-btn>b{font-size:11px;letter-spacing:.015em}
.setup-side-btn:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.055);color:#fff}
.setup-side-btn.active{
  background:linear-gradient(145deg,rgba(248,247,255,.98),rgba(229,227,247,.98));
  border-color:rgba(255,255,255,.70);
  color:#312765;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
.setup-side-btn.active>span:not(.setup-lock-icon){color:#5e4ba7}
.setup-side-btn.active::after{
  content:"";
  position:absolute;
  right:-12px;
  top:50%;
  width:5px;
  height:38px;
  transform:translateY(-50%);
  border-radius:8px 0 0 8px;
  background:linear-gradient(180deg,#7d66f6,#bd65e8);
}
.setup-master-btn{min-height:70px;color:#bcb4d8}
.setup-master-btn.is-locked{background:rgba(92,73,145,.075);border-color:rgba(138,111,220,.10)}
.setup-master-btn.is-unlocked{background:rgba(112,78,198,.12);border-color:rgba(148,109,244,.18);color:#e2d9ff}
.setup-master-btn.active{color:#312765}
.setup-lock-icon{
  position:relative;
  display:block;
  width:23px;
  height:19px;
  border:2px solid currentColor;
  border-radius:5px;
  color:#a99bd5;
}
.setup-lock-icon::before{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  top:-11px;
  height:12px;
  border:2px solid currentColor;
  border-bottom:0;
  border-radius:9px 9px 0 0;
}
.setup-master-btn.is-unlocked .setup-lock-icon::before{left:10px;right:-2px;transform:rotate(22deg);transform-origin:left bottom}
.setup-master-btn.active .setup-lock-icon{color:#5f4aa6}

.setup-content-shell{
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:76px minmax(0,1fr);
  gap:12px;
}
.setup-content-head{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.075);
  background:linear-gradient(150deg,rgba(23,26,39,.92),rgba(15,18,29,.94));
  box-shadow:0 12px 28px rgba(0,0,0,.16);
  padding:0 20px 0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.setup-content-head h1{margin:3px 0 0;font-size:27px;letter-spacing:-.04em}
.setup-save-btn{
  height:42px;
  padding:0 17px;
  border-radius:12px;
  border:1px solid rgba(105,129,229,.20);
  background:rgba(66,86,166,.13);
  color:#c7d2ff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
  transition:.17s;
}
.setup-save-btn:hover{background:rgba(75,100,196,.22);border-color:rgba(128,150,244,.30);color:#fff}
.setup-content-shell.master-view .setup-content-head{
  border-color:rgba(139,102,230,.18);
  background:linear-gradient(145deg,rgba(29,24,48,.94),rgba(17,18,31,.94));
}
.setup-page{
  height:100%!important;
  min-height:0!important;
  overflow:auto!important;
  padding:0 4px 4px 0!important;
  scrollbar-gutter:stable;
}
.setup-section{width:100%;min-height:100%;animation:setupSectionIn .22s ease-out}
.setup-section[hidden]{display:none!important}
.setup-card-full{width:100%;min-height:0}
.setup-master-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@keyframes setupSectionIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* MIDI gets the same visual weight/readability as the rest of RideControl. */
.setup-section[data-setup-section-panel="midi"] .midi-setup-card{padding:28px!important}
.setup-section[data-setup-section-panel="midi"] .setup-card-head{margin-bottom:24px}
.setup-section[data-setup-section-panel="midi"] .setup-card-head h2{font-size:28px}
.setup-section[data-setup-section-panel="midi"] .midi-device-row{
  grid-template-columns:minmax(320px,1.3fr) 168px minmax(235px,.8fr);
  gap:14px;
}
.setup-section[data-setup-section-panel="midi"] .midi-device-select{gap:9px}
.setup-section[data-setup-section-panel="midi"] .midi-device-select>span{font-size:11px}
.setup-section[data-setup-section-panel="midi"] .midi-device-select .field{height:54px;font-size:14px;padding:0 15px}
.setup-section[data-setup-section-panel="midi"] .midi-refresh-btn{height:54px!important;min-width:168px!important;font-size:11px!important}
.setup-section[data-setup-section-panel="midi"] .midi-device-status{height:54px;padding:0 16px;font-size:13px}
.setup-section[data-setup-section-panel="midi"] .midi-device-status i{width:10px;height:10px}
.setup-section[data-setup-section-panel="midi"] .midi-help{margin-top:14px;font-size:12px}
.setup-section[data-setup-section-panel="midi"] .midi-map-grid{gap:16px;margin-top:20px}
.setup-section[data-setup-section-panel="midi"] .midi-map-group{border-radius:18px}
.setup-section[data-setup-section-panel="midi"] .midi-map-group-head{height:46px;padding:0 16px}
.setup-section[data-setup-section-panel="midi"] .midi-map-group-head span{font-size:10px}
.setup-section[data-setup-section-panel="midi"] .midi-map-row{
  min-height:64px;
  grid-template-columns:minmax(125px,.8fr) minmax(165px,1fr) 86px 38px;
  gap:10px;
  padding:9px 12px;
}
.setup-section[data-setup-section-panel="midi"] .midi-map-row strong{font-size:14px}
.setup-section[data-setup-section-panel="midi"] .midi-map-value{font-size:11px}
.setup-section[data-setup-section-panel="midi"] .midi-map-row>[data-midi-learn]{height:38px;font-size:10px;border-radius:11px}
.setup-section[data-setup-section-panel="midi"] .midi-clear{width:38px;height:38px;font-size:19px;border-radius:11px}
.setup-section[data-setup-section-panel="midi"] .midi-jingle-hint{min-height:142px;padding:22px}
.setup-section[data-setup-section-panel="midi"] .midi-jingle-hint strong{font-size:18px}
.setup-section[data-setup-section-panel="midi"] .midi-jingle-hint span{font-size:12px}

@media(max-width:1500px){
  .setup-layout{grid-template-columns:138px minmax(0,1fr);gap:12px}
  .setup-side-nav{padding:15px 10px 12px;border-radius:24px}
  .setup-side-head{min-height:92px;margin-bottom:11px;padding-top:7px}
  .setup-side-head>strong{font-size:16px}
  .setup-side-btn{min-height:68px;border-radius:16px}
  .setup-side-btn>b{font-size:10px}
  .setup-side-btn>span:not(.setup-lock-icon){font-size:21px}
  .setup-side-btn.active::after{right:-10px}
  .setup-content-shell{grid-template-rows:68px minmax(0,1fr);gap:10px}
  .setup-content-head h1{font-size:24px}
  .setup-master-grid{grid-template-columns:1fr}
  .setup-section[data-setup-section-panel="midi"] .midi-device-row{grid-template-columns:minmax(250px,1fr) 148px minmax(200px,.7fr)}
  .setup-section[data-setup-section-panel="midi"] .midi-map-row{grid-template-columns:minmax(110px,.8fr) minmax(140px,1fr) 80px 36px}
  .setup-section[data-setup-section-panel="midi"] .midi-map-row strong{font-size:13px}
}
@media(max-width:1050px){
  .setup-layout{grid-template-columns:112px minmax(0,1fr)}
  .setup-side-head>strong{font-size:14px}
  .setup-side-head .setup-role-badge{display:none!important}
  .setup-side-btn{min-height:64px}
  .setup-side-btn>b{font-size:9px}
  .setup-section[data-setup-section-panel="midi"] .midi-device-row{grid-template-columns:1fr}
  .setup-section[data-setup-section-panel="midi"] .midi-refresh-btn{width:100%!important}
  .setup-section[data-setup-section-panel="midi"] .midi-map-grid{grid-template-columns:1fr}
}

/* ======================================================================
   RideControl 3.59 — compact Setup workspace + visible save action
   ====================================================================== */
.setup-layout{position:relative}
.setup-content-shell{
  grid-template-rows:minmax(0,1fr)!important;
  gap:0!important;
}
.setup-page{
  padding:0 4px 82px 0!important;
}
.setup-save-floating{
  position:absolute;
  z-index:8;
  left:168px;
  bottom:12px;
  width:268px;
  height:58px;
  padding:0 24px;
  border-radius:16px;
  border:1px solid rgba(75,232,151,.34);
  background:linear-gradient(145deg,rgba(31,184,107,.96),rgba(18,132,77,.96));
  color:#effff7;
  font-size:11px;
  font-weight:950;
  letter-spacing:.075em;
  box-shadow:0 14px 30px rgba(7,92,51,.28),inset 0 1px 0 rgba(255,255,255,.18);
  cursor:pointer;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.setup-save-floating:hover{
  background:linear-gradient(145deg,rgba(37,204,121,.98),rgba(20,149,87,.98));
  border-color:rgba(102,246,172,.48);
  box-shadow:0 16px 34px rgba(7,112,60,.34),inset 0 1px 0 rgba(255,255,255,.22);
  color:#fff;
  transform:translateY(-1px);
}
.setup-save-floating:active{transform:translateY(0) scale(.985)}

/* Play and Stop intentionally share one learned MIDI address. */
.setup-section[data-setup-section-panel="midi"] .midi-map-group:first-child .midi-map-row:first-of-type strong,
.setup-section[data-setup-section-panel="midi"] .midi-map-group:nth-child(2) .midi-map-row:first-of-type strong{
  color:#eef2ff;
}

@media(max-width:1500px){
  .setup-save-floating{left:150px;bottom:10px;width:244px;height:54px;border-radius:15px;font-size:10px}
  .setup-page{padding-bottom:74px!important}
}
@media(max-width:1050px){
  .setup-save-floating{left:124px;width:220px}
}

/* RideControl 3.60 — Jingle mapping hint belongs to Fahrt & Jingles */
.setup-section[data-setup-section-panel="midi"] .midi-map-info-row{
  min-height:62px;
  display:grid;
  grid-template-columns:minmax(105px,.8fr) minmax(0,2fr);
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.05);
}
.setup-section[data-setup-section-panel="midi"] .midi-map-info-row strong{
  font-size:14px;
  color:#dce2ef;
}
.setup-section[data-setup-section-panel="midi"] .midi-map-info-row span{
  font-size:12px;
  line-height:1.45;
  color:#76849b;
}
@media(max-width:1500px){
  .setup-section[data-setup-section-panel="midi"] .midi-map-info-row{
    grid-template-columns:minmax(95px,.8fr) minmax(0,2fr);
    padding:10px 12px;
  }
  .setup-section[data-setup-section-panel="midi"] .midi-map-info-row strong{font-size:13px}
  .setup-section[data-setup-section-panel="midi"] .midi-map-info-row span{font-size:11px}
}

/* RideControl 3.62 — Jingle-Titel bei schnellem Mehrfachklick niemals markieren. */
.pad-cell .jingle-pad,
.pad-cell .jingle-pad *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none;
}

/* ======================================================================
   RideControl 3.64 — Setup actions + authentication polish
   ====================================================================== */
.setup-bottom-actions{
  position:absolute;
  z-index:10;
  left:168px;
  bottom:12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.setup-bottom-actions .setup-save-floating{
  position:static!important;
  left:auto!important;
  bottom:auto!important;
  width:268px;
  height:58px;
  flex:0 0 auto;
}
.setup-admin-logout{
  height:58px;
  min-width:198px;
  padding:0 22px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(145deg,rgba(29,34,49,.98),rgba(20,24,37,.98));
  color:#c9d0df;
  font-size:10px;
  font-weight:950;
  letter-spacing:.075em;
  box-shadow:0 12px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.045);
  cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
.setup-admin-logout:hover{
  border-color:rgba(255,116,137,.26);
  background:linear-gradient(145deg,rgba(66,31,43,.94),rgba(37,24,32,.98));
  color:#ffdce2;
  transform:translateY(-1px);
}
.setup-admin-logout:active{transform:translateY(0) scale(.985)}

@media(max-width:1500px){
  .setup-bottom-actions{left:150px;bottom:10px;gap:8px}
  .setup-bottom-actions .setup-save-floating{width:244px;height:54px}
  .setup-admin-logout{height:54px;min-width:178px;padding:0 18px;font-size:9px;border-radius:15px}
}
@media(max-width:1050px){
  .setup-bottom-actions{left:124px}
  .setup-bottom-actions .setup-save-floating{width:220px}
  .setup-admin-logout{min-width:164px}
}

/* RideControl 3.65 — Local player cover/fallback rendering */
/* Only the real track cover should fill the cover tile. The fallback is a
   separate full-size layer; [hidden] must always win over its display rule. */
.local-cover{
  position:relative;
  isolation:isolate;
  background:#171d2c!important;
}
.local-cover > #localCover{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block;
  z-index:2;
}
.local-cover > #localCover[hidden]{display:none!important}
.local-cover > #localCoverFallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  border-radius:inherit;
  display:grid!important;
  place-items:center;
  overflow:hidden;
  background:#171d2c!important;
  z-index:1;
}
.local-cover > #localCoverFallback[hidden]{display:none!important}
.local-cover > #localCoverFallback > img{
  width:66%!important;
  height:66%!important;
  object-fit:contain!important;
  display:block;
}

/* RideControl 3.66 — secure first-install initialization */
.security-init-card{width:min(520px,calc(100vw - 32px));padding:34px!important}
.security-init-card .security-init-kicker{margin-top:20px;color:#9ca9c7;font-size:11px;font-weight:950;letter-spacing:.18em}
.security-init-card h1{margin:8px 0 10px;font-size:34px;line-height:1;letter-spacing:-.045em}
.security-init-card>p{margin:0 0 22px;color:#9ca8c0;font-size:14px;line-height:1.55}
.security-init-card form{display:grid;gap:12px}
.security-init-card .access-field{margin:0}
.security-init-submit{height:58px;margin-top:4px;border:1px solid rgba(66,230,145,.35);border-radius:16px;background:linear-gradient(135deg,rgba(34,190,112,.95),rgba(28,155,92,.95));color:#f1fff8;font-weight:950;font-size:12px;letter-spacing:.08em;cursor:pointer;box-shadow:0 14px 34px rgba(24,163,95,.20),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .16s ease,filter .16s ease,opacity .16s ease}
.security-init-submit:hover{filter:brightness(1.06)}
.security-init-submit:active{transform:scale(.99)}
.security-init-submit:disabled{opacity:.62;cursor:wait}
.security-init-note{margin-top:18px;padding:12px 14px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.025);color:#75819a;font-size:11px;line-height:1.5}
@media(max-width:560px){.security-init-card{padding:26px 20px!important}.security-init-card h1{font-size:29px}}

/* ======================================================================
   RideControl 3.67 — Master audit log
   ====================================================================== */
.master-audit-card{
  grid-column:1 / -1;
  min-height:420px;
  padding-bottom:14px!important;
}
.master-audit-head{gap:18px;align-items:center}
.master-audit-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.audit-count{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 11px;border-radius:10px;
  border:1px solid rgba(255,255,255,.075);background:rgba(9,13,23,.52);
  color:#7f8aa1;font-size:9px;font-weight:900;letter-spacing:.09em;
}
.audit-tool-btn{
  height:36px;padding:0 13px;border-radius:11px;
  border:1px solid rgba(118,139,224,.18);background:rgba(40,48,78,.34);
  color:#c9d2ee;font-size:9px;font-weight:950;letter-spacing:.07em;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.audit-tool-btn:hover{background:rgba(67,80,127,.42);border-color:rgba(135,154,236,.30);color:#fff;transform:translateY(-1px)}
.audit-tool-btn.danger{border-color:rgba(255,89,112,.18);background:rgba(112,28,45,.16);color:#efadb8}
.audit-tool-btn.danger:hover{border-color:rgba(255,101,124,.34);background:rgba(139,31,51,.27);color:#ffdce2}
.audit-log-note{margin:2px 0 12px;color:#76849c;font-size:11px;line-height:1.5}
.audit-log-list{
  height:min(48vh,520px);min-height:300px;overflow:auto;
  display:flex;flex-direction:column;gap:8px;padding:2px 5px 4px 0;
  scrollbar-width:thin;scrollbar-color:rgba(132,147,196,.24) transparent;
}
.audit-log-list::-webkit-scrollbar{width:8px}.audit-log-list::-webkit-scrollbar-track{background:transparent}.audit-log-list::-webkit-scrollbar-thumb{background:rgba(132,147,196,.20);border-radius:999px}
.audit-log-empty{min-height:220px;display:grid;place-items:center;text-align:center;color:#6f7b92;font-size:13px;border:1px dashed rgba(255,255,255,.07);border-radius:16px;background:rgba(7,11,20,.22)}
.audit-row{
  position:relative;display:grid;grid-template-columns:178px minmax(0,1fr) 7px;gap:16px;align-items:center;
  min-height:76px;padding:12px 13px 12px 15px;border-radius:15px;
  border:1px solid rgba(255,255,255,.065);background:linear-gradient(145deg,rgba(12,18,31,.78),rgba(9,14,24,.86));
}
.audit-row-time{display:flex;flex-direction:column;gap:5px;min-width:0}
.audit-row-time strong{font-size:11px;color:#b2bdd2;font-weight:850;letter-spacing:.015em}
.audit-row-time span{font-size:9px;color:#59667d;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.035em}
.audit-row-main{min-width:0}
.audit-row-meta{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.audit-row-meta span{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:7px;background:rgba(117,137,225,.09);border:1px solid rgba(117,137,225,.10);color:#8794b5;font-size:8px;font-weight:950;letter-spacing:.11em}
.audit-row-meta b{font-size:9px;color:#68758d;font-weight:850}
.audit-row h3{margin:0;color:#e9edf7;font-size:14px;line-height:1.2;letter-spacing:-.01em}
.audit-row p{margin:5px 0 0;color:#7e8aa1;font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.audit-row-mark{width:5px;height:42px;border-radius:999px;background:#65708a;box-shadow:0 0 14px rgba(101,112,138,.18)}
.audit-row.success{border-color:rgba(65,208,137,.10);background:linear-gradient(145deg,rgba(12,27,27,.60),rgba(9,17,24,.86))}
.audit-row.success .audit-row-mark{background:#42d68e;box-shadow:0 0 14px rgba(66,214,142,.26)}
.audit-row.success .audit-row-meta span{color:#78cda4;background:rgba(58,188,123,.08);border-color:rgba(58,188,123,.11)}
.audit-row.warning .audit-row-mark{background:#e4a84f;box-shadow:0 0 14px rgba(228,168,79,.24)}
.audit-row.security,
.audit-row.critical{border-color:rgba(255,83,109,.17);background:linear-gradient(145deg,rgba(48,17,27,.68),rgba(20,12,20,.88))}
.audit-row.security .audit-row-mark,
.audit-row.critical .audit-row-mark{background:#ff5c75;box-shadow:0 0 16px rgba(255,92,117,.34)}
.audit-row.security .audit-row-meta span,
.audit-row.critical .audit-row-meta span{color:#ff9aaa;background:rgba(190,43,69,.13);border-color:rgba(255,91,116,.16)}
.audit-row.security h3,.audit-row.critical h3{color:#ffe9ed}
.audit-row.critical{border-color:rgba(255,70,99,.30);box-shadow:inset 0 0 0 1px rgba(255,73,101,.045)}
@media(max-width:1500px){
  .master-audit-card{min-height:390px}
  .audit-log-list{height:min(46vh,455px);min-height:270px}
  .audit-row{grid-template-columns:154px minmax(0,1fr) 6px;min-height:69px;gap:12px;padding:10px 11px 10px 13px}
  .audit-row h3{font-size:13px}.audit-row p{font-size:10px}.audit-row-time strong{font-size:10px}
}
@media(max-width:900px){
  .master-audit-head{align-items:flex-start;flex-direction:column}
  .master-audit-actions{justify-content:flex-start}
  .audit-row{grid-template-columns:1fr 5px;gap:10px}
  .audit-row-time{grid-column:1}.audit-row-main{grid-column:1}.audit-row-mark{grid-column:2;grid-row:1 / span 2;height:100%;min-height:46px}
}