*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#07030f;color:#fff;overflow:hidden}.app-shell{height:100vh;height:100dvh;display:flex;flex-direction:column;background:radial-gradient(circle at 15% 5%,rgba(255,0,170,.28),transparent 32%),radial-gradient(circle at 82% 12%,rgba(0,220,255,.21),transparent 34%),radial-gradient(circle at 50% 100%,rgba(255,183,0,.13),transparent 38%),linear-gradient(145deg,#07030f,#12061e 48%,#06020a)}.topbar{height:104px;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(10,6,22,.94),rgba(10,6,22,.72));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 48px rgba(0,0,0,.36);z-index:10}.brand-block{display:flex;align-items:center;gap:16px}.brand-logo{width:92px;height:92px;border-radius:26px;display:grid;place-items:center;font-weight:1000;letter-spacing:-.07em;font-size:42px;color:#fff;background:linear-gradient(135deg,#ff2bd6,#8b5cff 42%,#00dcff);box-shadow:0 0 24px rgba(255,43,214,.4),inset 0 0 18px rgba(255,255,255,.18);text-shadow:0 3px 12px rgba(0,0,0,.45)}.brand-logo.small{width:66px;height:66px;border-radius:20px;font-size:30px}.brand-block h1{margin:0;font-size:34px;line-height:1;font-weight:950;letter-spacing:-.04em}.brand-block p{margin:7px 0 0;color:rgba(255,255,255,.72);font-size:15px;font-weight:700}.top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.primary-btn,.ghost-btn,.huge-btn{border:0;border-radius:18px;padding:13px 17px;color:#fff;font-weight:900;font-size:15px;cursor:pointer;touch-action:manipulation}.primary-btn{background:linear-gradient(135deg,#ff2bd6,#7b42ff);box-shadow:0 10px 30px rgba(255,43,214,.25)}.ghost-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}.ghost-btn.danger{color:#ffd9e9}.huge-btn{width:100%;padding:22px 24px;font-size:25px;border-radius:26px;background:linear-gradient(135deg,#fff,#ffd4f7);color:#16051d;box-shadow:0 16px 40px rgba(255,255,255,.2)}.board{flex:1;min-height:0;display:grid;grid-template-columns:1.15fr 1.15fr 1fr .86fr;gap:14px;padding:14px}.lane{min-width:0;display:flex;flex-direction:column;border-radius:28px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 50px rgba(0,0,0,.22);overflow:hidden}.lane-head{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.11);background:rgba(0,0,0,.2)}.lane h2{margin:0;text-transform:uppercase;letter-spacing:.04em;font-size:22px;font-weight:1000}.count-pill{min-width:38px;height:32px;padding:0 11px;border-radius:99px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-weight:1000}.ticket-list{flex:1;min-height:0;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:12px}.ticket{position:relative;border-radius:26px;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.17);box-shadow:0 16px 32px rgba(0,0,0,.22);animation:ticketIn .28s ease both}.ticket.new{border-color:rgba(255,43,214,.72);box-shadow:0 0 0 1px rgba(255,43,214,.28),0 0 28px rgba(255,43,214,.22),0 18px 38px rgba(0,0,0,.26)}.ticket.urgent{animation:urgentPulse 1s infinite}.ticket.ready{border-color:rgba(0,255,206,.7);box-shadow:0 0 24px rgba(0,255,206,.18)}.ticket.done{opacity:.7}.ticket-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.ticket-title{font-size:24px;font-weight:1000;letter-spacing:-.035em}.ticket-meta{margin-top:4px;color:rgba(255,255,255,.7);font-size:14px;font-weight:800}.timer{padding:8px 11px;border-radius:14px;background:rgba(255,255,255,.12);font-weight:1000;white-space:nowrap}.timer.hot{background:rgba(255,184,0,.22);color:#ffe6a1}.timer.urgent{background:rgba(255,47,99,.25);color:#ffd4df}.items{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}.item{padding:11px 12px;border-radius:16px;background:rgba(0,0,0,.22)}.item-main{font-size:19px;font-weight:950;line-height:1.15}.mods{margin:6px 0 0;color:rgba(255,255,255,.74);font-size:14px;font-weight:750;line-height:1.25}.note{margin-top:10px;padding:10px 12px;border-radius:16px;background:rgba(255,219,88,.13);border:1px solid rgba(255,219,88,.25);font-weight:900;color:#fff4bf}.ticket-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.ticket-actions button{border:0;border-radius:16px;padding:13px 10px;font-weight:1000;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);cursor:pointer}.ticket-actions button.primary-action{background:linear-gradient(135deg,#ff2bd6,#7b42ff)}.ticket-actions button.ready-action{background:linear-gradient(135deg,#00d4ff,#00ffa8);color:#071017}.ticket-actions button.done-action{grid-column:1/-1;background:rgba(255,255,255,.18)}.empty{height:100%;display:grid;place-items:center;text-align:center;color:rgba(255,255,255,.48);font-weight:900;font-size:18px;padding:18px}.footer-bar{height:36px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.54);font-size:13px;font-weight:800;background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.08)}.alert-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(0,0,0,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:overlayFlash .75s infinite}.alert-overlay.hidden{display:none}.alert-card{width:min(720px,92vw);border-radius:40px;padding:34px;background:linear-gradient(145deg,rgba(255,43,214,.96),rgba(111,50,255,.94) 50%,rgba(0,204,255,.9));box-shadow:0 0 80px rgba(255,43,214,.5),0 30px 90px rgba(0,0,0,.5);text-align:center;position:relative;overflow:hidden}.alert-card h2{margin:0;font-size:54px;line-height:.95;font-weight:1000;letter-spacing:-.06em;text-shadow:0 4px 20px rgba(0,0,0,.35)}.alert-card p{margin:14px 0 26px;font-size:20px;font-weight:900}.alert-pulse{position:absolute;inset:-30%;background:radial-gradient(circle,rgba(255,255,255,.26),transparent 42%);animation:spin 4s linear infinite}.alert-card>*:not(.alert-pulse){position:relative}.loading-screen{position:fixed;inset:0;z-index:500;display:grid;place-items:center;align-content:center;gap:14px;background:radial-gradient(circle at 15% 18%,rgba(255,43,214,.28),transparent 30%),radial-gradient(circle at 75% 25%,rgba(0,220,255,.24),transparent 35%),linear-gradient(145deg,#080311,#180526 55%,#050208);transition:opacity .45s ease,visibility .45s ease}.loading-screen.hidden{opacity:0;visibility:hidden}.logo-fly-zone{height:130px;width:100vw;position:relative;display:grid;place-items:center;overflow:visible}.logo-fly{animation:logoFly 5s cubic-bezier(.2,.8,.2,1) both}.loading-screen h1{margin:0;font-size:34px;font-weight:1000;letter-spacing:-.045em}.loading-screen p{margin:0;color:rgba(255,255,255,.72);font-size:17px;font-weight:850}.progress-rail{width:min(520px,82vw);height:12px;border-radius:999px;background:rgba(255,255,255,.13);overflow:hidden;border:1px solid rgba(255,255,255,.13)}.progress-bar{height:100%;width:38%;border-radius:999px;background:linear-gradient(90deg,#ff2bd6,#00dcff,#fff);animation:barMove 1.05s ease-in-out infinite}.loading-orb{position:absolute;border-radius:50%;filter:blur(20px);opacity:.55}.orb-a{width:160px;height:160px;left:8%;top:16%;background:#ff2bd6;animation:floaty 5s ease-in-out infinite}.orb-b{width:190px;height:190px;right:8%;bottom:12%;background:#00dcff;animation:floaty 6s ease-in-out infinite reverse}@keyframes ticketIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}@keyframes urgentPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,45,98,.4),0 0 28px rgba(255,45,98,.2)}50%{box-shadow:0 0 0 4px rgba(255,45,98,.55),0 0 48px rgba(255,45,98,.44)}}@keyframes overlayFlash{0%,100%{background:rgba(0,0,0,.72)}50%{background:rgba(120,0,55,.68)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes logoFly{0%{transform:translateX(-120vw) rotate(-10deg) scale(.82);opacity:0}18%{transform:translateX(0) rotate(0) scale(1.06);opacity:1}34%{transform:translateX(0) rotate(0) scale(1);opacity:1}78%{transform:translateX(0) rotate(0) scale(1);opacity:1}100%{transform:translateX(120vw) rotate(10deg) scale(.88);opacity:0}}@keyframes barMove{0%{transform:translateX(-125%)}100%{transform:translateX(270%)}}@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(26px)}}@media(max-width:1100px){.topbar{height:auto;align-items:flex-start;gap:12px;flex-direction:column}.top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr}.board{grid-template-columns:1fr 1fr;padding:10px;gap:10px}.brand-block h1{font-size:29px}.lane-head{height:54px}.lane h2{font-size:18px}}@media(max-width:700px){body{overflow:auto}.app-shell{min-height:100dvh;height:auto}.board{grid-template-columns:1fr;overflow:visible}.lane{min-height:320px}.top-actions{grid-template-columns:1fr 1fr}.topbar{position:sticky;top:0}.footer-bar{position:sticky;bottom:0}.alert-card h2{font-size:38px}.loading-screen h1{font-size:28px;text-align:center}.brand-logo{width:78px;height:78px;font-size:36px}}
.settings-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(0,0,0,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:18px}.settings-modal.hidden{display:none}.settings-card{width:min(560px,94vw);border-radius:34px;padding:24px;background:linear-gradient(180deg,rgba(24,14,44,.98),rgba(12,7,24,.98));border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 90px rgba(0,0,0,.5)}.settings-card h2{margin:0 0 18px;font-size:30px;letter-spacing:-.04em}.settings-card label{display:block;font-size:14px;font-weight:1000;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}.settings-card input{width:100%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:18px;padding:15px 16px;font-size:16px;outline:none}.settings-card input:focus{border-color:rgba(255,43,214,.75);box-shadow:0 0 0 4px rgba(255,43,214,.16)}.settings-card p{margin:10px 0 0;color:rgba(255,255,255,.62);font-weight:750;line-height:1.35}.settings-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.toast{position:fixed;left:50%;bottom:54px;transform:translateX(-50%);z-index:300;padding:13px 18px;border-radius:999px;background:rgba(255,255,255,.92);color:#13051e;font-weight:1000;box-shadow:0 18px 60px rgba(0,0,0,.35)}.toast.hidden{display:none}.sync-good{color:#7dffcb}.sync-bad{color:#ffd17d}
/* v5 simplified KDS layout */
.board{grid-template-columns:1.4fr .9fr}
.lane-making,.lane-ready{display:none!important}
.ticket-title{font-size:30px}
.ticket-meta{font-size:16px;color:rgba(255,255,255,.78)}
.ticket-actions{grid-template-columns:1fr}
.ticket-actions button.done-action,.ticket-actions button.ready-action,.ticket-actions button.primary-action{grid-column:1/-1}
@media(max-width:1100px){.board{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.board{grid-template-columns:1fr}.lane-done{min-height:260px}}
/* v8 live clean */
.advanced-tools{margin-top:18px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:12px}
.advanced-tools summary{cursor:pointer;font-weight:1000;color:rgba(255,255,255,.78)}
.settings-actions.stacked{display:grid;grid-template-columns:1fr 1fr;margin-top:12px}
#apiInput{display:none!important}
#clearDoneBtn{min-width:88px}
/* v15 inline acknowledge fixed */
.alert-overlay{display:none!important}
.ticket.new{
animation:newTicketPulse 1.05s ease-in-out infinite!important;
border-color:rgba(255,43,214,.9)!important;
box-shadow:0 0 0 2px rgba(255,43,214,.35),0 0 34px rgba(255,43,214,.28),0 18px 38px rgba(0,0,0,.28)!important;
}
.ticket-actions .ack-action{
grid-column:1/-1;
background:linear-gradient(135deg,#ffcc33,#ff7bdc)!important;
color:#14051d!important;
box-shadow:0 10px 28px rgba(255,204,51,.24);
}
.ticket-actions .done-green-action{
grid-column:1/-1;
background:linear-gradient(135deg,#00ff9d,#00d46a)!important;
color:#04150d!important;
box-shadow:0 12px 30px rgba(0,255,157,.25);
}
.ticket-actions .done-green-action:hover,.ticket-actions .ack-action:hover{transform:translateY(-1px)}
.advanced-tools{margin-top:18px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:12px}
.advanced-tools summary{cursor:pointer;font-weight:1000;color:rgba(255,255,255,.78)}
.settings-actions.stacked{display:grid;grid-template-columns:1fr 1fr;margin-top:12px}
#apiInput{display:none!important}
#clearDoneBtn{min-width:88px}
@keyframes newTicketPulse{
0%,100%{transform:translateY(0) scale(1);filter:brightness(1)}
50%{transform:translateY(-2px) scale(1.012);filter:brightness(1.16)}
}
/* v16: pulse only while unacknowledged */
.ticket.new{
animation:none!important;
}
.ticket.needs-ack{
animation:newTicketPulse 1.05s ease-in-out infinite!important;
border-color:rgba(255,43,214,.9)!important;
box-shadow:0 0 0 2px rgba(255,43,214,.35),0 0 34px rgba(255,43,214,.28),0 18px 38px rgba(0,0,0,.28)!important;
}
.ticket.new:not(.needs-ack){
border-color:rgba(255,255,255,.17)!important;
box-shadow:0 16px 32px rgba(0,0,0,.22)!important;
}
/* v17 voided + audio unlock */
.audio-unlock-overlay{
position:fixed;
inset:0;
z-index:450;
display:grid;
place-items:center;
background:radial-gradient(circle at 20% 15%,rgba(255,43,214,.28),transparent 32%),
radial-gradient(circle at 82% 20%,rgba(0,220,255,.22),transparent 34%),
rgba(5,2,10,.92);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
padding:20px;
}
.audio-unlock-overlay.hidden{display:none}
.audio-unlock-card{
width:min(620px,92vw);
border-radius:38px;
padding:30px;
text-align:center;
background:linear-gradient(180deg,rgba(24,14,44,.98),rgba(12,7,24,.98));
border:1px solid rgba(255,255,255,.16);
box-shadow:0 30px 90px rgba(0,0,0,.52),0 0 60px rgba(255,43,214,.22);
}
.audio-unlock-card .brand-logo{margin:0 auto 16px}
.audio-unlock-card h2{
margin:0;
font-size:36px;
font-weight:1000;
letter-spacing:-.05em;
}
.audio-unlock-card p{
margin:12px 0 22px;
color:rgba(255,255,255,.72);
font-weight:850;
}
.ticket.voided{
opacity:.78;
border-color:rgba(255,90,90,.65)!important;
box-shadow:0 0 0 1px rgba(255,90,90,.22),0 16px 32px rgba(0,0,0,.22)!important;
}
.ticket.voided .ticket-title{
color:#ffd1d1;
}
.ticket.voided .note{
background:rgba(255,74,74,.16);
border-color:rgba(255,74,74,.32);
color:#ffdada;
}
.ticket-actions .recall-action{
grid-column:1/-1;
}
/* v23 La Última Ronda brand refresh — miLa Última Ronda / La Última RondaDash neon-glass look */
:root{
--dizi-bg:#030306;
--dizi-card:rgba(14,15,27,.86);
--dizi-card-deep:rgba(6,7,13,.96);
--dizi-line:rgba(255,255,255,.14);
--dizi-cyan:#00d9ff;
--dizi-pink:#ff006e;
--dizi-violet:#8b2dff;
--dizi-green:#00ff9d;
--dizi-neon:linear-gradient(115deg,var(--dizi-pink),var(--dizi-cyan),var(--dizi-violet),var(--dizi-pink));
}
*{
-webkit-tap-highlight-color:transparent;
}
body{
font-family:Montserrat,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
background:
radial-gradient(circle at 14% 8%,rgba(255,0,110,.25),transparent 34%),
radial-gradient(circle at 88% 12%,rgba(0,217,255,.22),transparent 30%),
radial-gradient(circle at 50% 110%,rgba(139,45,255,.22),transparent 45%),
#030306!important;
}
body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
opacity:.035;
background-image:
linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
background-size:38px 38px;
z-index:0;
}
.app-shell{
position:relative;
z-index:1;
background:
radial-gradient(circle at 14% 8%,rgba(255,0,110,.25),transparent 34%),
radial-gradient(circle at 88% 12%,rgba(0,217,255,.22),transparent 30%),
radial-gradient(circle at 50% 110%,rgba(139,45,255,.22),transparent 45%),
#030306!important;
}
/* Header */
.topbar{
min-height:120px;
height:120px;
padding:0 24px!important;
background:linear-gradient(180deg,rgba(14,15,27,.90),rgba(6,7,13,.86))!important;
border-bottom:1px solid rgba(255,255,255,.14)!important;
box-shadow:0 18px 55px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.08)!important;
backdrop-filter:blur(18px)!important;
-webkit-backdrop-filter:blur(18px)!important;
}
.brand-block{
gap:18px!important;
}
.brand-img.small{
width:142px!important;
max-height:76px!important;
object-fit:contain!important;
filter:drop-shadow(0 0 24px rgba(0,217,255,.28)) drop-shadow(0 0 20px rgba(255,0,110,.22));
}
.brand-logo.small{
display:none!important;
}
.brand-block h1{
font-size:36px!important;
font-weight:950!important;
letter-spacing:-.055em!important;
text-shadow:0 0 18px rgba(0,217,255,.12);
}
.brand-block p{
color:#c8d0e5!important;
font-weight:800!important;
letter-spacing:.03em;
}
.ghost-btn,.primary-btn,.huge-btn{
border-radius:999px!important;
border:1px solid rgba(255,255,255,.16)!important;
font-weight:950!important;
letter-spacing:.045em;
text-transform:uppercase;
box-shadow:0 12px 28px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.10),0 0 18px rgba(0,217,255,.06)!important;
}
.ghost-btn{
background:linear-gradient(180deg,rgba(22,24,37,.82),rgba(8,9,16,.88))!important;
color:#eef4ff!important;
}
.primary-btn,.huge-btn{
background:linear-gradient(135deg,rgba(0,217,255,.18),rgba(255,0,110,.17) 52%,rgba(139,45,255,.20))!important;
color:#fff!important;
}
/* Board lanes */
.board{
padding:18px!important;
gap:18px!important;
background:transparent!important;
}
.lane{
border-radius:28px!important;
background:linear-gradient(180deg,rgba(14,15,27,.86),rgba(6,7,13,.96))!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:0 26px 80px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08)!important;
position:relative;
}
.lane::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
padding:1px;
background:var(--dizi-neon);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:.48;
pointer-events:none;
}
.lane-head{
height:68px!important;
background:rgba(255,255,255,.045)!important;
border-bottom:1px solid rgba(255,255,255,.12)!important;
}
.lane h2{
font-size:22px!important;
font-weight:950!important;
letter-spacing:.08em!important;
color:#eaf0ff;
}
.count-pill{
background:linear-gradient(135deg,rgba(0,217,255,.20),rgba(255,0,110,.18))!important;
border:1px solid rgba(255,255,255,.14);
color:#fff;
box-shadow:0 0 18px rgba(0,217,255,.12);
}
/* Tickets */
.ticket{
border-radius:24px!important;
background:linear-gradient(180deg,rgba(255,255,255,.080),rgba(255,255,255,.035))!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:0 16px 40px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.ticket-title{
font-weight:950!important;
letter-spacing:-.045em!important;
color:#fff!important;
text-shadow:0 0 18px rgba(0,217,255,.10);
}
.ticket-meta{
color:#c8d0e5!important;
font-weight:850!important;
}
.timer{
background:rgba(255,255,255,.07)!important;
border:1px solid rgba(255,255,255,.12);
color:#eaf0ff;
}
.item{
background:rgba(3,5,12,.55)!important;
border:1px solid rgba(255,255,255,.08);
}
.item-main{
color:#fff;
}
.mods{
color:#c8d0e5!important;
}
.note{
background:rgba(0,217,255,.08)!important;
border:1px solid rgba(0,217,255,.18)!important;
color:#eaf7ff!important;
}
.ticket.needs-ack{
border-color:rgba(255,0,110,.85)!important;
box-shadow:0 0 0 2px rgba(255,0,110,.35),0 0 34px rgba(255,0,110,.25),0 18px 38px rgba(0,0,0,.30)!important;
}
.ticket-actions button{
border-radius:16px!important;
font-weight:950!important;
letter-spacing:.045em;
text-transform:uppercase;
border:1px solid rgba(255,255,255,.13)!important;
box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10);
}
.ticket-actions .ack-action{
background:linear-gradient(135deg,#ffd54f,#ff006e)!important;
color:#16040c!important;
}
.ticket-actions .done-green-action{
background:linear-gradient(135deg,#00ff9d,#00d46a)!important;
color:#03150c!important;
}
.ticket-actions .recall-action{
background:linear-gradient(180deg,rgba(24,26,39,.82),rgba(9,10,18,.9))!important;
color:#eaf0ff!important;
}
/* Footer */
.footer-bar{
height:40px!important;
background:rgba(0,0,0,.32)!important;
border-top:1px solid rgba(255,255,255,.10)!important;
color:#8f98b0!important;
}
/* Loading screen: kitchen-style card, no loading bar */
.loading-screen{
background:#030306!important;
display:grid!important;
place-items:center!important;
gap:0!important;
}
.loading-screen.hidden{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
}
.loading-shell{
width:min(430px,calc(100vw - 40px));
padding:42px 38px;
text-align:center;
border-radius:26px;
background:linear-gradient(180deg,rgba(14,15,27,.92),rgba(6,7,13,.98));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 26px 80px rgba(0,0,0,.66),0 0 42px rgba(0,217,255,.10),inset 0 1px 0 rgba(255,255,255,.08);
position:relative;
overflow:hidden;
opacity:0;
animation:kdsCardReady .16s ease .04s forwards;
}
.loading-shell::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
padding:1px;
background:var(--dizi-neon);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:.70;
pointer-events:none;
}
.loading-dizi-logo{
width:min(230px,72vw);
display:block;
margin:0 auto 24px;
filter:drop-shadow(0 0 26px rgba(0,217,255,.30)) drop-shadow(0 0 20px rgba(255,0,110,.22));
}
.startup-sync{
display:flex!important;
align-items:center;
justify-content:center;
margin-top:0!important;
color:#00d9ff!important;
font-size:clamp(.82rem,2.8vw,1rem);
font-weight:900;
letter-spacing:.25px;
white-space:nowrap;
opacity:1!important;
transform:none!important;
}
.startup-sync::before{
content:"";
display:inline-block;
flex:0 0 auto;
width:11px;
height:11px;
border-radius:50%;
background:#00d9ff;
margin-right:9px;
box-shadow:0 0 0 rgba(0,217,255,.6);
animation:syncPulse 1.15s infinite;
}
.progress-rail,.progress-bar,.logo-fly-zone,.loading-orb,.brand-logo.logo-fly{
display:none!important;
}
@keyframes syncPulse{
0%{box-shadow:0 0 0 0 rgba(0,217,255,.65);opacity:.75}
70%{box-shadow:0 0 0 10px rgba(0,217,255,0);opacity:1}
100%{box-shadow:0 0 0 0 rgba(0,217,255,0);opacity:.75}
}
@keyframes kdsCardReady{
to{opacity:1}
}
/* Audio unlock: same brand family */
.audio-unlock-overlay{
background:
radial-gradient(circle at 14% 8%,rgba(255,0,110,.25),transparent 34%),
radial-gradient(circle at 88% 12%,rgba(0,217,255,.22),transparent 30%),
radial-gradient(circle at 50% 110%,rgba(139,45,255,.22),transparent 45%),
rgba(3,3,6,.94)!important;
}
.audio-unlock-card{
border-radius:28px!important;
padding:42px 38px!important;
background:linear-gradient(180deg,rgba(14,15,27,.92),rgba(6,7,13,.98))!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:0 26px 80px rgba(0,0,0,.66),0 0 42px rgba(0,217,255,.10),inset 0 1px 0 rgba(255,255,255,.08)!important;
position:relative;
overflow:hidden;
}
.audio-unlock-card::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
padding:1px;
background:var(--dizi-neon);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:.72;
pointer-events:none;
}
.unlock-logo{
width:min(230px,72vw);
max-height:150px;
object-fit:contain;
display:block;
margin:0 auto 24px;
filter:drop-shadow(0 0 26px rgba(0,217,255,.30)) drop-shadow(0 0 20px rgba(255,0,110,.22));
}
.audio-unlock-card h2{
font-size:clamp(1.45rem,4vw,2.1rem)!important;
font-weight:950!important;
letter-spacing:-.055em!important;
}
.audio-unlock-card p{
color:#c8d0e5!important;
font-weight:750!important;
}
.settings-card{
background:linear-gradient(180deg,rgba(14,15,27,.96),rgba(6,7,13,.98))!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:0 26px 80px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.toast{
background:#eaf0ff!important;
color:#030306!important;
font-weight:950!important;
}
@media(max-width:700px){
.topbar{
padding:14px 16px!important;
}
.brand-img.small{
width:118px!important;
max-height:64px!important;
}
.brand-block h1{
font-size:28px!important;
}
.board{
padding:12px!important;
gap:12px!important;
}
}
/* v24 staff map manager */
.settings-card{max-height:min(900px,92vh);overflow:auto}
.staff-map-panel{margin-top:20px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);padding:16px}
.staff-map-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.staff-map-head h3{margin:0;font-size:18px;font-weight:1000;letter-spacing:-.03em;color:#fff}
.staff-map-head p{margin:4px 0 0;color:rgba(255,255,255,.62);font-weight:750;font-size:13px}
.mini-btn{padding:9px 12px!important;font-size:11px!important;min-height:unset!important}
.staff-map-list,.staff-candidate-list{display:grid;gap:10px}
.staff-map-row,.staff-candidate-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.09);padding:11px}
.staff-map-main{display:grid;gap:4px;min-width:0}
.staff-map-main strong{color:#fff;font-weight:950}.staff-map-main span,.staff-candidate-row span{font-size:11px;color:rgba(255,255,255,.58);font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.staff-map-main code,.staff-candidate-row code{display:block;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9eefff;background:rgba(0,217,255,.08);border:1px solid rgba(0,217,255,.12);border-radius:10px;padding:5px 7px;font-size:11px}
.staff-map-main em{color:#ffd54f;font-style:normal;font-size:11px;font-weight:950;text-transform:uppercase}.staff-map-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.danger{color:#ffd2d2!important;border-color:rgba(255,70,70,.25)!important}
.staff-map-form{display:grid;grid-template-columns:1.2fr .8fr .7fr auto;gap:8px;margin-top:12px}
.staff-map-form input,.staff-map-form select{border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.32);color:#fff;padding:12px;font-weight:850;min-width:0}.staff-map-form input::placeholder{color:rgba(255,255,255,.42)}
.staff-candidates{margin-top:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:10px}.staff-candidates summary{cursor:pointer;font-weight:950;color:rgba(255,255,255,.78)}.staff-candidate-list{margin-top:10px}.staff-empty{color:rgba(255,255,255,.56);font-weight:800;padding:8px}
.ticket-meta:empty{display:none!important}
@media(max-width:850px){.staff-map-form{grid-template-columns:1fr}.staff-map-row,.staff-candidate-row{align-items:flex-start;flex-direction:column}.staff-map-actions{justify-content:flex-start}.staff-map-main code,.staff-candidate-row code{max-width:78vw}}
/* v25 PIN-protected staff map */
.staff-map-locked,
.staff-map-unlocked{
margin-top:16px;
border-radius:22px;
padding:16px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.staff-map-locked h3,
.staff-map-manager h3{
margin:0 0 8px;
font-size:15px;
font-weight:1000;
letter-spacing:.04em;
text-transform:uppercase;
}
.staff-map-locked p{
margin:0 0 12px;
color:rgba(255,255,255,.70);
font-weight:800;
}
.pin-row{
display:grid;
grid-template-columns:1fr auto;
gap:10px;
align-items:center;
}
.pin-row input{
min-height:46px;
border-radius:999px;
padding:0 16px;
border:1px solid rgba(255,255,255,.16);
background:rgba(0,0,0,.28);
color:#fff;
font-size:20px;
font-weight:950;
letter-spacing:.18em;
outline:none;
text-align:center;
}
.pin-row input:focus{
border-color:rgba(0,217,255,.72);
box-shadow:0 0 0 3px rgba(0,217,255,.14);
}
.staff-map-unlocked.hidden,
.staff-map-locked.hidden{
display:none!important;
}
@media(max-width:700px){
.pin-row{
grid-template-columns:1fr;
}
}
/* v37 connection status + loading safety */
.legacy-status-line{display:none!important}
.connection-status{
display:inline-flex;align-items:center;gap:9px;margin-top:6px;padding:8px 13px;
border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.82);font-size:13px;font-weight:950;letter-spacing:.045em;text-transform:uppercase;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.24)
}
.connection-dot{
width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto;background:#ffd43b;
animation:connectionPulse 1.35s ease-in-out infinite
}
.status-connected .connection-dot{background:#00ff9d;box-shadow:0 0 14px rgba(0,255,157,.42)}
.status-connecting .connection-dot,.status-issue .connection-dot{background:#ffd43b;box-shadow:0 0 14px rgba(255,212,59,.35)}
.status-disconnected .connection-dot{background:#ff335f;box-shadow:0 0 14px rgba(255,51,95,.42)}
.status-connected{color:#dfffee;border-color:rgba(0,255,157,.22);background:rgba(0,255,157,.075)}
.status-connecting,.status-issue{color:#fff6d8;border-color:rgba(255,212,59,.24);background:rgba(255,212,59,.075)}
.status-disconnected{color:#ffdfe6;border-color:rgba(255,51,95,.24);background:rgba(255,51,95,.075)}
@keyframes connectionPulse{
0%{transform:scale(.96);box-shadow:0 0 0 0 rgba(255,255,255,.35)}
70%{transform:scale(1.04);box-shadow:0 0 0 8px rgba(255,255,255,0)}
100%{transform:scale(.96);box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media(max-width:700px){.connection-status{font-size:11px;padding:7px 11px}}
/* v38 status text polish */
.connection-status{
min-width:0;
}
.connection-status #connectionText{
white-space:nowrap;
}
/* v39 remove bottom status + header clock */
.footer-bar.hidden-footer,
.hidden-footer{
display:none!important;
}
.top-clock{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:74px;
height:40px;
padding:0 14px;
border-radius:999px;
background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
border:1px solid rgba(255,255,255,.14);
color:#f4f7ff;
font-size:14px;
font-weight:950;
letter-spacing:.055em;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 24px rgba(0,0,0,.28),0 0 18px rgba(0,217,255,.08);
}
@media(max-width:700px){
.top-clock{
height:36px;
min-width:64px;
padding:0 11px;
font-size:12px;
}
}
/* v40 clock pill height match */
.top-actions{
align-items:center!important;
}
.top-actions .ghost-btn,
.top-actions button,
.top-clock{
height:44px!important;
min-height:44px!important;
box-sizing:border-box!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
.top-clock{
line-height:1!important;
padding:0 16px!important;
margin:0!important;
align-self:center!important;
transform:none!important;
}
@media(max-width:700px){
.top-actions .ghost-btn,
.top-actions button,
.top-clock{
height:40px!important;
min-height:40px!important;
}
.top-clock{
padding:0 13px!important;
}
}
/* v41 active ticket clarity */
.lane-new .ticket,
.ticket.new{
background:
linear-gradient(180deg,rgba(16,20,35,.96),rgba(7,9,18,.98))!important;
border-color:rgba(0,217,255,.28)!important;
box-shadow:
0 18px 42px rgba(0,0,0,.42),
0 0 0 1px rgba(0,217,255,.10),
inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.ticket-title{
font-size:clamp(1.22rem,1.65vw,1.55rem)!important;
line-height:1.05!important;
margin-bottom:6px!important;
}
.ticket-meta{
color:rgba(205,223,255,.76)!important;
font-size:.88rem!important;
font-weight:900!important;
}
.ticket-items{
display:flex!important;
flex-direction:column!important;
gap:10px!important;
margin-top:14px!important;
}
.ticket .item{
display:grid!important;
grid-template-columns:auto 1fr!important;
align-items:start!important;
gap:12px!important;
padding:13px 14px!important;
border-radius:18px!important;
background:
linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.048))!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 10px 24px rgba(0,0,0,.18)!important;
}
.ticket.new .item,
.lane-new .ticket .item{
background:
linear-gradient(180deg,rgba(0,217,255,.135),rgba(255,255,255,.055))!important;
border-color:rgba(0,217,255,.23)!important;
}
.item-qty,
.qty{
min-width:46px!important;
height:46px!important;
padding:0 10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:15px!important;
background:linear-gradient(135deg,rgba(0,255,157,.24),rgba(0,217,255,.20))!important;
border:1px solid rgba(0,255,157,.30)!important;
color:#ffffff!important;
font-size:1.25rem!important;
font-weight:1000!important;
letter-spacing:-.04em!important;
box-shadow:0 0 22px rgba(0,255,157,.10),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.item-main{
color:#ffffff!important;
font-size:1.15rem!important;
font-weight:1000!important;
line-height:1.18!important;
letter-spacing:-.025em!important;
}
.item-name,
.name{
color:#ffffff!important;
font-weight:1000!important;
}
.mods{
margin-top:7px!important;
padding-top:7px!important;
border-top:1px solid rgba(255,255,255,.10)!important;
color:rgba(255,244,202,.94)!important;
font-size:.98rem!important;
font-weight:900!important;
line-height:1.25!important;
}
.mods::before{
content:"MODS";
display:inline-flex;
align-items:center;
margin-right:7px;
padding:2px 6px;
border-radius:999px;
background:rgba(255,212,59,.16);
border:1px solid rgba(255,212,59,.22);
color:#ffe99b;
font-size:.62rem;
font-weight:1000;
letter-spacing:.08em;
}
.note{
margin-top:12px!important;
font-size:.98rem!important;
font-weight:900!important;
}
/* Stronger call-to-action separation */
.ticket-actions{
margin-top:14px!important;
gap:10px!important;
}
.ticket-actions button{
min-height:48px!important;
}
/* Make acknowledged active tickets calmer but still readable */
.ticket.new:not(.needs-ack){
border-color:rgba(255,255,255,.16)!important;
}
/* Done tickets can stay softer so active prep tickets stand out */
.lane-done .ticket{
opacity:.82;
}
/* v44 restore obvious new-order pulse before acknowledge */
.ticket.needs-ack,
.lane-new .ticket.needs-ack{
position:relative!important;
border-color:rgba(255,0,110,.95)!important;
box-shadow:
0 0 0 3px rgba(255,0,110,.35),
0 0 34px rgba(255,0,110,.42),
0 0 58px rgba(0,217,255,.20),
0 20px 48px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.10)!important;
animation:diziNewOrderPulse 1.05s ease-in-out infinite!important;
}
.ticket.needs-ack::before,
.lane-new .ticket.needs-ack::before{
content:"";
position:absolute;
inset:-4px;
border-radius:28px;
pointer-events:none;
background:linear-gradient(120deg,rgba(255,0,110,.98),rgba(0,217,255,.92),rgba(255,212,59,.70),rgba(255,0,110,.98));
opacity:.88;
z-index:-1;
filter:blur(8px);
animation:diziNewOrderHalo 1.05s ease-in-out infinite!important;
}
.ticket.needs-ack::after,
.lane-new .ticket.needs-ack::after{
content:"NEW";
position:absolute;
top:12px;
right:12px;
padding:5px 9px;
border-radius:999px;
background:linear-gradient(135deg,#ff006e,#ffd43b);
color:#150008;
font-size:.68rem;
font-weight:1000;
letter-spacing:.08em;
box-shadow:0 0 18px rgba(255,0,110,.42);
animation:diziNewBadgePop 1.05s ease-in-out infinite!important;
}
.ticket.new:not(.needs-ack),
.lane-new .ticket.new:not(.needs-ack){
animation:none!important;
}
.ticket.new:not(.needs-ack)::before,
.ticket.new:not(.needs-ack)::after,
.lane-new .ticket.new:not(.needs-ack)::before,
.lane-new .ticket.new:not(.needs-ack)::after{
animation:none!important;
}
@keyframes diziNewOrderPulse{
0%,100%{
transform:translateY(0) scale(1);
border-color:rgba(255,0,110,.88);
}
50%{
transform:translateY(-2px) scale(1.012);
border-color:rgba(0,217,255,.96);
}
}
@keyframes diziNewOrderHalo{
0%,100%{
opacity:.42;
filter:blur(9px);
}
50%{
opacity:.96;
filter:blur(13px);
}
}
@keyframes diziNewBadgePop{
0%,100%{
transform:scale(1);
}
50%{
transform:scale(1.08);
}
}
@media (prefers-reduced-motion: reduce){
.ticket.needs-ack,
.ticket.needs-ack::before,
.ticket.needs-ack::after{
animation:none!important;
}
}
/* v45 startup/unlock text cleanup */
.unlock-sub.hidden,
#unlockSub.hidden{
display:none!important;
}
/* v46 unlock cleanup + acknowledge/new badge fixes */
#unlockSub,
.unlock-sub,
.unlock-sub.hidden,
#unlockSub.hidden{
display:none!important;
visibility:hidden!important;
height:0!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
/* Acknowledge button: remove side border slivers and make gradient fill edge-to-edge. */
.ticket-actions .ack-action,
button.ack-action,
.ack-action{
width:100%!important;
border:0!important;
outline:0!important;
background:linear-gradient(90deg,#ffd95a 0%,#ff934f 38%,#ff2c79 72%,#ff006e 100%)!important;
background-clip:border-box!important;
color:#12030a!important;
box-shadow:0 12px 28px rgba(255,0,110,.22), inset 0 1px 0 rgba(255,255,255,.20)!important;
overflow:hidden!important;
}
/* New badge + timer: when unacknowledged, put timer left of NEW badge. */
.ticket.needs-ack .timer,
.lane-new .ticket.needs-ack .timer{
position:absolute!important;
top:12px!important;
right:66px!important;
height:32px!important;
min-height:32px!important;
padding:0 10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
z-index:4!important;
}
.ticket.needs-ack::after,
.lane-new .ticket.needs-ack::after{
content:"NEW";
position:absolute;
top:12px!important;
right:12px!important;
height:32px!important;
min-height:32px!important;
padding:0 10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
box-sizing:border-box!important;
border-radius:999px;
background:linear-gradient(135deg,#ff006e,#ffd43b);
color:#150008;
font-size:.68rem;
font-weight:1000;
letter-spacing:.08em;
box-shadow:0 0 18px rgba(255,0,110,.42);
animation:diziNewBadgePop 1.05s ease-in-out infinite!important;
z-index:5!important;
}
/* Give the title a little right-side room while both pills are visible. */
.ticket.needs-ack .ticket-title,
.lane-new .ticket.needs-ack .ticket-title{
padding-right:122px!important;
}
/* Once acknowledged, timer naturally returns to its original spot because .needs-ack is removed. */
.ticket.new:not(.needs-ack) .timer,
.lane-new .ticket.new:not(.needs-ack) .timer{
position:static!important;
right:auto!important;
top:auto!important;
}
/* v49 safe cleanup based on working v46 */
#unlockTitle,
#unlockSub,
.unlock-title.hidden,
.unlock-sub.hidden,
#unlockTitle.hidden,
#unlockSub.hidden{
display:none!important;
visibility:hidden!important;
height:0!important;
min-height:0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
.connection-settings-hidden{
display:none!important;
}
/* Keep staff map visibly locked until PIN, without disturbing connection/audio code */
.staff-map-locked-ui{
position:relative;
}
.staff-map-locked-ui input:not(#staffMapPinInput),
.staff-map-locked-ui select,
.staff-map-locked-ui textarea,
.staff-map-locked-ui button:not(#staffMapUnlockBtn):not(#closeSettingsBtn){
opacity:.42!important;
pointer-events:none!important;
filter:saturate(.55)!important;
}
/* Hide built-in labels if they are still rendered */
.staff-map-manager [class*="built"],
.staff-map-manager .builtin,
.staff-map-manager .built-in,
.staff-map-manager .staff-built-in,
.staff-map-manager .tag-built-in{
display:none!important;
}
/* Prevent recent Square IDs from bleeding outside settings */
.staff-map-manager,
.staff-map-unlocked,
.staff-map-locked,
#recentSquareIds,
.recent-square-ids,
.staff-map-recent,
.recent-ids{
max-width:100%!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.staff-map-manager *,
#recentSquareIds *,
.recent-square-ids *,
.staff-map-recent *,
.recent-ids *{
box-sizing:border-box!important;
max-width:100%!important;
}
.staff-map-manager code,
.staff-map-manager .id-chip,
.staff-map-manager .staff-key,
.staff-map-manager .recent-key,
.staff-map-manager [class*="key"],
.staff-map-manager [class*="chip"]{
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
display:inline-block!important;
vertical-align:bottom!important;
}
.staff-map-manager [class*="source"]{
text-transform:none!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
/* v56 safe settings quick tools. No core JS changes. */
.hidden-dev-tools{
display:none!important;
}
.hidden-dev-button{
display:none!important;
}
.quick-tools-grid{
display:grid!important;
gap:14px!important;
margin:16px 0!important;
}
.settings-tile{
width:100%;
min-height:78px;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(180deg,rgba(255,255,255,.082),rgba(255,255,255,.035));
color:#fff;
border-radius:22px;
padding:16px;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:14px;
align-items:center;
text-align:left;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.20);
transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.settings-tile:hover{
transform:translateY(-1px);
border-color:rgba(0,217,255,.30);
background:linear-gradient(180deg,rgba(0,217,255,.10),rgba(255,255,255,.045));
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 38px rgba(0,0,0,.28),0 0 24px rgba(0,217,255,.08);
}
.settings-tile:active{
transform:translateY(0) scale(.995);
}
.settings-tile-icon{
width:44px;
height:44px;
border-radius:16px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(0,217,255,.10);
border:1px solid rgba(0,217,255,.18);
font-size:1.35rem;
}
.settings-tile-main{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
}
.settings-tile-main strong{
font-size:1.05rem;
font-weight:1000;
}
.settings-tile-main small{
color:rgba(255,255,255,.62);
font-weight:800;
}
.settings-tile-arrow{
font-size:1.8rem;
opacity:.55;
}
/* v57 ticket urgency + bartender readability */
.lane-new .ticket,
.ticket.new{
background:
radial-gradient(circle at top left,rgba(0,217,255,.12),transparent 38%),
linear-gradient(180deg,rgba(14,18,32,.98),rgba(6,8,16,.98))!important;
border-color:rgba(0,217,255,.24)!important;
box-shadow:
0 18px 42px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.ticket.acknowledged:not(.needs-ack){
border-color:rgba(0,255,157,.24)!important;
}
.ticket-title{
font-size:clamp(1.18rem,1.55vw,1.5rem)!important;
line-height:1.05!important;
font-weight:1000!important;
}
.ticket-meta{
color:rgba(210,226,255,.74)!important;
font-size:.88rem!important;
font-weight:900!important;
}
.items{
display:flex!important;
flex-direction:column!important;
gap:10px!important;
margin-top:14px!important;
}
.ticket .item{
display:grid!important;
grid-template-columns:auto minmax(0,1fr)!important;
align-items:start!important;
gap:12px!important;
padding:13px 14px!important;
border-radius:18px!important;
background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important;
border:1px solid rgba(255,255,255,.13)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 10px 24px rgba(0,0,0,.18)!important;
}
.ticket.new .item{
background:linear-gradient(180deg,rgba(0,217,255,.13),rgba(255,255,255,.055))!important;
border-color:rgba(0,217,255,.22)!important;
}
.item-qty{
min-width:48px!important;
height:48px!important;
padding:0 10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:16px!important;
background:linear-gradient(135deg,rgba(0,255,157,.26),rgba(0,217,255,.20))!important;
border:1px solid rgba(0,255,157,.34)!important;
color:#fff!important;
font-size:1.32rem!important;
font-weight:1000!important;
line-height:1!important;
letter-spacing:-.055em!important;
box-shadow:0 0 22px rgba(0,255,157,.12),inset 0 1px 0 rgba(255,255,255,.14)!important;
}
.item-body{
min-width:0!important;
}
.item-name{
color:#fff!important;
font-size:1.13rem!important;
font-weight:1000!important;
line-height:1.15!important;
letter-spacing:-.025em!important;
}
.item-main{
color:#fff!important;
font-size:1.13rem!important;
font-weight:1000!important;
line-height:1.15!important;
}
.mods{
margin-top:8px!important;
padding-top:8px!important;
border-top:1px solid rgba(255,255,255,.10)!important;
color:rgba(255,238,174,.96)!important;
font-size:.98rem!important;
font-weight:900!important;
line-height:1.28!important;
}
.mods::before{
content:"MODS";
display:inline-flex;
align-items:center;
margin-right:7px;
padding:2px 7px;
border-radius:999px;
background:rgba(255,212,59,.16);
border:1px solid rgba(255,212,59,.24);
color:#ffe99b;
font-size:.62rem;
font-weight:1000;
letter-spacing:.09em;
}
.ticket-actions{
margin-top:15px!important;
}
.ticket-actions button{
min-height:50px!important;
}
/* Age urgency stages */
.ticket.age-warm{
border-color:rgba(255,212,59,.34)!important;
box-shadow:
0 18px 42px rgba(0,0,0,.42),
0 0 24px rgba(255,212,59,.10),
inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.ticket.age-warm .timer{
background:rgba(255,212,59,.13)!important;
border-color:rgba(255,212,59,.26)!important;
color:#fff1bd!important;
}
.ticket.age-hot{
border-color:rgba(255,143,64,.54)!important;
box-shadow:
0 18px 42px rgba(0,0,0,.42),
0 0 30px rgba(255,143,64,.18),
inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.ticket.age-hot .timer{
background:rgba(255,143,64,.16)!important;
border-color:rgba(255,143,64,.34)!important;
color:#ffe0c2!important;
}
.ticket.age-critical{
border-color:rgba(255,51,95,.72)!important;
box-shadow:
0 18px 42px rgba(0,0,0,.46),
0 0 36px rgba(255,51,95,.24),
inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.ticket.age-critical .timer{
background:rgba(255,51,95,.18)!important;
border-color:rgba(255,51,95,.42)!important;
color:#ffdbe4!important;
animation:diziUrgentTimerPulse 1.15s ease-in-out infinite;
}
.ticket.age-critical:not(.needs-ack){
animation:diziLateTicketBreath 1.6s ease-in-out infinite;
}
@keyframes diziUrgentTimerPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.06)}
}
@keyframes diziLateTicketBreath{
0%,100%{box-shadow:0 18px 42px rgba(0,0,0,.46),0 0 28px rgba(255,51,95,.18),inset 0 1px 0 rgba(255,255,255,.08)}
50%{box-shadow:0 18px 42px rgba(0,0,0,.46),0 0 46px rgba(255,51,95,.34),inset 0 1px 0 rgba(255,255,255,.08)}
}
/* Done tickets softer so active prep tickets dominate visually */
.lane-done .ticket{
opacity:.82;
filter:saturate(.86);
}
.lane-done .ticket:hover{
opacity:1;
filter:saturate(1);
}
/* Mobile/card scale */
@media(max-width:720px){
.ticket .item{
gap:10px!important;
padding:12px!important;
}
.item-qty{
min-width:42px!important;
height:42px!important;
font-size:1.18rem!important;
}
.item-name,
.item-main{
font-size:1.04rem!important;
}
}
/* v58 premium idle/no-active-orders state */
.premium-idle-state{
min-height:320px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:18px!important;
padding:34px 22px!important;
border-radius:28px!important;
background:
radial-gradient(circle at 50% 20%,rgba(0,217,255,.14),transparent 36%),
radial-gradient(circle at 30% 80%,rgba(255,0,110,.10),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025))!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 18px 42px rgba(0,0,0,.28)!important;
position:relative!important;
overflow:hidden!important;
}
.premium-idle-state::before{
content:"";
position:absolute;
inset:-60%;
background:
conic-gradient(from 180deg,transparent,rgba(0,217,255,.10),transparent,rgba(255,0,110,.08),transparent);
animation:diziIdleSweep 8s linear infinite;
opacity:.65;
}
.premium-idle-state > *{
position:relative;
z-index:2;
}
.idle-orb-wrap{
position:relative;
width:104px;
height:104px;
display:grid;
place-items:center;
}
.idle-orb{
width:54px;
height:54px;
border-radius:50%;
background:
radial-gradient(circle at 35% 30%,#ffffff,rgba(115,245,255,.9) 22%,rgba(0,217,255,.55) 52%,rgba(255,0,110,.16));
box-shadow:
0 0 22px rgba(0,217,255,.55),
0 0 54px rgba(0,217,255,.25),
inset 0 1px 0 rgba(255,255,255,.65);
animation:diziIdleOrb 2.2s ease-in-out infinite;
}
.idle-ring{
position:absolute;
border-radius:50%;
border:1px solid rgba(0,217,255,.28);
box-shadow:0 0 22px rgba(0,217,255,.12);
}
.idle-ring-one{
width:82px;
height:82px;
animation:diziIdleRing 2.2s ease-in-out infinite;
}
.idle-ring-two{
width:104px;
height:104px;
border-color:rgba(255,0,110,.18);
animation:diziIdleRing 2.2s ease-in-out infinite .45s;
}
.idle-copy{
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
text-align:center;
}
.idle-copy strong{
color:#fff;
font-size:clamp(1.3rem,2vw,1.8rem);
font-weight:1000;
letter-spacing:-.045em;
}
.idle-copy span{
color:rgba(220,232,255,.70);
font-size:.98rem;
font-weight:850;
}
.idle-status-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:9px;
}
.idle-chip{
height:32px;
padding:0 12px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.78);
font-size:.72rem;
font-weight:1000;
letter-spacing:.07em;
text-transform:uppercase;
}
.idle-chip.good{
color:#caffdf;
background:rgba(0,255,157,.10);
border-color:rgba(0,255,157,.20);
}
.soft-empty-state{
min-height:160px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
text-align:center!important;
opacity:.82;
}
.soft-empty-state strong{
color:rgba(255,255,255,.82);
font-weight:1000;
}
.soft-empty-state span{
color:rgba(255,255,255,.50);
font-weight:800;
}
@keyframes diziIdleSweep{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@keyframes diziIdleOrb{
0%,100%{transform:scale(1);filter:brightness(1)}
50%{transform:scale(1.08);filter:brightness(1.18)}
}
@keyframes diziIdleRing{
0%,100%{transform:scale(.92);opacity:.28}
50%{transform:scale(1.06);opacity:.72}
}
@media(max-width:720px){
.premium-idle-state{
min-height:250px!important;
padding:28px 16px!important;
}
.idle-orb-wrap{
width:86px;
height:86px;
}
.idle-orb{
width:46px;
height:46px;
}
.idle-ring-one{
width:70px;
height:70px;
}
.idle-ring-two{
width:88px;
height:88px;
}
}
@media (prefers-reduced-motion: reduce){
.premium-idle-state::before,
.idle-orb,
.idle-ring{
animation:none!important;
}
}
/* v59 premium idle state fixed + kiosk tile */
.premium-idle-state{
min-height:320px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:18px!important;
padding:34px 22px!important;
border-radius:28px!important;
background:
radial-gradient(circle at 50% 20%,rgba(0,217,255,.14),transparent 36%),
radial-gradient(circle at 30% 80%,rgba(255,0,110,.10),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025))!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 18px 42px rgba(0,0,0,.28)!important;
position:relative!important;
overflow:hidden!important;
}
.premium-idle-state::before{
content:"";
position:absolute;
inset:-60%;
background:
conic-gradient(from 180deg,transparent,rgba(0,217,255,.10),transparent,rgba(255,0,110,.08),transparent);
animation:diziIdleSweep 8s linear infinite;
opacity:.65;
}
.premium-idle-state > *{
position:relative;
z-index:2;
}
.idle-orb-wrap{
position:relative;
width:104px;
height:104px;
display:grid;
place-items:center;
}
.idle-orb{
width:54px;
height:54px;
border-radius:50%;
background:
radial-gradient(circle at 35% 30%,#ffffff,rgba(115,245,255,.9) 22%,rgba(0,217,255,.55) 52%,rgba(255,0,110,.16));
box-shadow:
0 0 22px rgba(0,217,255,.55),
0 0 54px rgba(0,217,255,.25),
inset 0 1px 0 rgba(255,255,255,.65);
animation:diziIdleOrb 2.2s ease-in-out infinite;
}
.idle-ring{
position:absolute;
border-radius:50%;
border:1px solid rgba(0,217,255,.28);
box-shadow:0 0 22px rgba(0,217,255,.12);
}
.idle-ring-one{
width:82px;
height:82px;
animation:diziIdleRing 2.2s ease-in-out infinite;
}
.idle-ring-two{
width:104px;
height:104px;
border-color:rgba(255,0,110,.18);
animation:diziIdleRing 2.2s ease-in-out infinite .45s;
}
.idle-copy{
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
text-align:center;
}
.idle-copy strong{
color:#fff;
font-size:clamp(1.3rem,2vw,1.8rem);
font-weight:1000;
letter-spacing:-.045em;
}
.idle-copy span{
color:rgba(220,232,255,.70);
font-size:.98rem;
font-weight:850;
}
.idle-status-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:9px;
}
.idle-chip{
height:32px;
padding:0 12px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:rgba(255,255,255,.78);
font-size:.72rem;
font-weight:1000;
letter-spacing:.07em;
text-transform:uppercase;
}
.idle-chip.good{
color:#caffdf;
background:rgba(0,255,157,.10);
border-color:rgba(0,255,157,.20);
}
.soft-empty-state{
min-height:160px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
text-align:center!important;
opacity:.82;
}
.soft-empty-state strong{
color:rgba(255,255,255,.82);
font-weight:1000;
}
.soft-empty-state span{
color:rgba(255,255,255,.50);
font-weight:800;
}
@keyframes diziIdleSweep{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@keyframes diziIdleOrb{
0%,100%{transform:scale(1);filter:brightness(1)}
50%{transform:scale(1.08);filter:brightness(1.18)}
}
@keyframes diziIdleRing{
0%,100%{transform:scale(.92);opacity:.28}
50%{transform:scale(1.06);opacity:.72}
}
@media(max-width:720px){
.premium-idle-state{
min-height:250px!important;
padding:28px 16px!important;
}
.idle-orb-wrap{
width:86px;
height:86px;
}
.idle-orb{
width:46px;
height:46px;
}
.idle-ring-one{
width:70px;
height:70px;
}
.idle-ring-two{
width:88px;
height:88px;
}
}
@media (prefers-reduced-motion: reduce){
.premium-idle-state::before,
.idle-orb,
.idle-ring{
animation:none!important;
}
}
/* v60 premium motion/polish - CSS only */
.ticket{
transform-origin:center top;
animation:diziTicketEnter .34s cubic-bezier(.18,.89,.32,1.12) both;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
filter .18s ease,
opacity .18s ease!important;
}
.ticket:hover{
transform:translateY(-2px);
}
.ticket.new{
position:relative;
}
.ticket.new::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(135deg,rgba(0,217,255,.10),transparent 36%,rgba(255,0,110,.08));
opacity:.72;
mix-blend-mode:screen;
}
.ticket.new > *{
position:relative;
z-index:1;
}
/* active prep lane feels brighter and more premium */
.lane-new{
position:relative;
}
.lane-new::before{
content:"";
position:absolute;
inset:0;
border-radius:28px;
pointer-events:none;
background:
radial-gradient(circle at 50% 0%,rgba(0,217,255,.07),transparent 38%);
opacity:.75;
}
/* button polish */
button,
.ghost-btn,
.primary-btn{
transition:
transform .14s ease,
filter .14s ease,
box-shadow .14s ease,
border-color .14s ease!important;
}
button:hover,
.ghost-btn:hover,
.primary-btn:hover{
transform:translateY(-1px);
filter:brightness(1.06);
}
button:active,
.ghost-btn:active,
.primary-btn:active{
transform:translateY(0) scale(.985);
filter:brightness(.98);
}
/* make Done action feel final and Recall feel secondary */
.done-action,
button[data-action="done"]{
background:linear-gradient(135deg,rgba(0,255,157,.95),rgba(0,217,255,.92))!important;
color:#001911!important;
border:0!important;
box-shadow:0 14px 28px rgba(0,255,157,.18),inset 0 1px 0 rgba(255,255,255,.28)!important;
font-weight:1000!important;
}
.recall-action,
button[data-action="recall"]{
background:rgba(255,255,255,.065)!important;
color:rgba(255,255,255,.86)!important;
border:1px solid rgba(255,255,255,.13)!important;
}
/* Done queue is clearly archive/history, not active prep */
.lane-done{
position:relative;
}
.lane-done::before{
content:"";
position:absolute;
inset:0;
border-radius:28px;
pointer-events:none;
background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.035),transparent 42%);
}
.lane-done .ticket{
animation:diziDoneTicketEnter .28s ease both;
}
.lane-done .ticket-title{
color:rgba(255,255,255,.88)!important;
}
.lane-done .item{
background:rgba(255,255,255,.045)!important;
border-color:rgba(255,255,255,.08)!important;
}
/* stronger separation between title/meta and prep content */
.ticket-meta{
margin-bottom:8px!important;
}
.items{
border-top:1px solid rgba(255,255,255,.08);
padding-top:12px;
}
/* neon focus ring for keyboard/touch accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible{
outline:none!important;
box-shadow:
0 0 0 3px rgba(0,217,255,.20),
0 0 0 1px rgba(0,217,255,.55)!important;
}
/* subtle "acknowledged" calming color */
.ticket.acknowledged:not(.needs-ack){
background:
radial-gradient(circle at top left,rgba(0,255,157,.10),transparent 38%),
linear-gradient(180deg,rgba(14,18,32,.96),rgba(6,8,16,.98))!important;
}
/* timer pill polish */
.timer{
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 20px rgba(0,0,0,.18)!important;
}
/* settings tile polish from the working safe proxy approach */
.settings-tile{
isolation:isolate;
overflow:hidden;
}
.settings-tile::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.07),transparent);
transform:translateX(-120%);
transition:transform .5s ease;
pointer-events:none;
}
.settings-tile:hover::before{
transform:translateX(120%);
}
@keyframes diziTicketEnter{
from{
opacity:0;
transform:translateY(12px) scale(.985);
filter:blur(3px);
}
to{
opacity:1;
transform:translateY(0) scale(1);
filter:blur(0);
}
}
@keyframes diziDoneTicketEnter{
from{
opacity:0;
transform:translateX(12px) scale(.99);
}
to{
opacity:.82;
transform:translateX(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce){
.ticket,
.lane-done .ticket,
button,
.ghost-btn,
.primary-btn,
.settings-tile::before{
animation:none!important;
transition:none!important;
}
}
/* v62 Screen Health modal fix */
#screenHealthModal.hidden,
.screen-health-modal.hidden{
display:none!important;
}
#screenHealthModal.screen-health-modal{
position:fixed!important;
inset:0!important;
z-index:9999!important;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(0,0,0,.62);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
}
.screen-health-card{
width:min(720px,calc(100vw - 32px))!important;
max-height:min(84vh,760px)!important;
overflow:auto!important;
}
.screen-health-panel{
display:grid;
gap:16px;
}
.health-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.health-card{
min-height:108px;
border-radius:22px;
padding:14px;
display:flex;
flex-direction:column;
justify-content:space-between;
background:
radial-gradient(circle at top right,rgba(0,217,255,.08),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
border:1px solid rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.20);
}
.health-card span{
color:rgba(255,255,255,.62);
font-size:.72rem;
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
}
.health-card strong{
color:#fff;
font-size:clamp(1.65rem,3vw,2.35rem);
font-weight:1000;
letter-spacing:-.06em;
line-height:1;
}
.health-card.good{
border-color:rgba(0,255,157,.18);
background:
radial-gradient(circle at top right,rgba(0,255,157,.12),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}
.health-card.warn{
border-color:rgba(255,212,59,.32);
background:
radial-gradient(circle at top right,rgba(255,212,59,.16),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}
.health-card.danger{
border-color:rgba(255,51,95,.42);
background:
radial-gradient(circle at top right,rgba(255,51,95,.18),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
}
.health-status-list{
display:grid;
gap:10px;
border-radius:22px;
padding:14px;
background:rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.10);
}
.health-status-list div{
display:flex;
justify-content:space-between;
gap:16px;
padding:10px 0;
border-bottom:1px solid rgba(255,255,255,.07);
}
.health-status-list div:last-child{
border-bottom:0;
}
.health-status-list span{
color:rgba(255,255,255,.58);
font-weight:900;
}
.health-status-list strong{
color:#fff;
font-weight:1000;
}
.health-actions{
display:flex;
justify-content:flex-end;
margin-top:16px;
}
@media(max-width:720px){
.health-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.health-card{
min-height:96px;
}
}
/* v63 auto kiosk on start */
@media(max-width:720px){
#audioUnlockOverlay::after{
content:"One tap starts La Última Ronda KDS + fullscreen";
position:absolute;
left:50%;
bottom:28px;
transform:translateX(-50%);
color:rgba(255,255,255,.46);
font-size:.78rem;
font-weight:850;
letter-spacing:.03em;
text-align:center;
pointer-events:none;
}
}
/* v64 alert sound profiles */
.alert-profile-card{
margin:16px 0 0;
padding:15px;
border-radius:22px;
background:
radial-gradient(circle at top right,rgba(255,0,110,.08),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.072),rgba(255,255,255,.034));
border:1px solid rgba(255,255,255,.12);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 28px rgba(0,0,0,.18);
display:grid;
gap:12px;
}
.alert-profile-card strong{
display:block;
color:#fff;
font-size:1rem;
font-weight:1000;
letter-spacing:.02em;
}
.alert-profile-card span{
display:block;
margin-top:3px;
color:rgba(255,255,255,.58);
font-size:.82rem;
font-weight:850;
}
.alert-profile-buttons{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.profile-btn{
min-height:40px!important;
padding:0 10px!important;
font-size:.78rem!important;
}
.profile-btn.active{
background:linear-gradient(135deg,rgba(0,255,157,.92),rgba(0,217,255,.86))!important;
color:#001b15!important;
border-color:rgba(0,255,157,.36)!important;
box-shadow:0 12px 24px rgba(0,255,157,.16),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
@media(max-width:620px){
.alert-profile-buttons{
grid-template-columns:1fr;
}
}
/* v65 alert profile preview feedback */
.profile-btn.active::after{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:#002017;
margin-left:7px;
box-shadow:0 0 10px rgba(0,255,157,.55);
}
.profile-btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
/* v66 Club Loud boost visual feedback */
.profile-btn[data-alert-profile="club"].active{
background:linear-gradient(135deg,#00ff9d,#00d9ff 48%,#ffd43b)!important;
color:#00130f!important;
box-shadow:
0 0 0 1px rgba(0,255,157,.24),
0 16px 30px rgba(0,255,157,.20),
0 0 28px rgba(0,217,255,.16),
inset 0 1px 0 rgba(255,255,255,.32)!important;
}
.profile-btn[data-alert-profile="club"].active::before{
content:"";
width:7px;
height:7px;
border-radius:50%;
margin-right:7px;
background:#001b13;
box-shadow:0 0 10px rgba(0,0,0,.25);
}
/* v67 max Club Loud + one-tap start */
.profile-btn[data-alert-profile="club"].active{
background:linear-gradient(135deg,#00ff9d,#00d9ff 42%,#ffd43b 78%,#ffffff)!important;
color:#00130f!important;
box-shadow:
0 0 0 1px rgba(0,255,157,.30),
0 18px 34px rgba(0,255,157,.25),
0 0 36px rgba(0,217,255,.22),
0 0 18px rgba(255,212,59,.18),
inset 0 1px 0 rgba(255,255,255,.42)!important;
font-weight:1000!important;
}
/* v68 Done queue auto-clean polish */
.lane-done .lane-header::after{
content:"Auto-clears after service";
display:inline-flex;
align-items:center;
margin-left:10px;
padding:4px 8px;
border-radius:999px;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.08);
color:rgba(255,255,255,.42);
font-size:.62rem;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}
@media(max-width:720px){
.lane-done .lane-header::after{
display:none;
}
}
/* v69 Screen Health staff summary */
.health-hero{
border-radius:26px;
padding:18px;
display:grid;
gap:6px;
background:
radial-gradient(circle at top right,rgba(0,255,157,.14),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
border:1px solid rgba(0,255,157,.18);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 14px 34px rgba(0,0,0,.22);
}
.health-hero.warn{
border-color:rgba(255,212,59,.34);
background:
radial-gradient(circle at top right,rgba(255,212,59,.18),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
}
.health-hero.danger{
border-color:rgba(255,51,95,.42);
background:
radial-gradient(circle at top right,rgba(255,51,95,.20),transparent 42%),
linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
}
.health-hero span{
color:rgba(255,255,255,.62);
font-size:.72rem;
font-weight:1000;
letter-spacing:.09em;
text-transform:uppercase;
}
.health-hero strong{
color:#fff;
font-size:clamp(1.35rem,2.4vw,2rem);
font-weight:1000;
letter-spacing:-.05em;
}
.staff-health-section{
border-radius:24px;
padding:15px;
background:rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.10);
}
.staff-health-title{
display:flex;
justify-content:space-between;
gap:12px;
align-items:baseline;
margin-bottom:10px;
}
.staff-health-title strong{
color:#fff;
font-weight:1000;
}
.staff-health-title span{
color:rgba(255,255,255,.48);
font-size:.72rem;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}
.staff-health-list{
display:grid;
gap:8px;
}
.staff-health-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto auto;
gap:10px;
align-items:center;
padding:10px 11px;
border-radius:16px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.07);
}
.staff-health-row strong{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#fff;
font-weight:1000;
}
.staff-health-row span{
color:rgba(255,255,255,.68);
font-size:.75rem;
font-weight:900;
white-space:nowrap;
}
.staff-health-empty{
padding:12px;
border-radius:16px;
background:rgba(255,255,255,.04);
color:rgba(255,255,255,.55);
font-weight:850;
text-align:center;
}
@media(max-width:720px){
.health-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.staff-health-row{
grid-template-columns:1fr;
}
}
/* v70 tap-to-check prepared items */
.ticket .item{
cursor:pointer;
user-select:none;
position:relative;
}
.ticket .item.item-locked{
cursor:default;
}
.item-check{
width:28px;
height:28px;
margin-top:10px;
border-radius:10px;
display:inline-flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
background:rgba(255,255,255,.055);
border:1px solid rgba(255,255,255,.12);
color:#001b13;
font-size:1rem;
font-weight:1000;
line-height:1;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.ticket .item{
grid-template-columns:auto auto minmax(0,1fr)!important;
}
.ticket .item:hover:not(.item-locked){
border-color:rgba(0,255,157,.25)!important;
background:
linear-gradient(180deg,rgba(0,255,157,.10),rgba(255,255,255,.052))!important;
}
.item-prepared{
opacity:.72;
border-color:rgba(0,255,157,.30)!important;
background:
linear-gradient(180deg,rgba(0,255,157,.12),rgba(255,255,255,.040))!important;
}
.item-prepared .item-check{
background:linear-gradient(135deg,#00ff9d,#00d9ff);
border-color:rgba(0,255,157,.46);
box-shadow:
0 0 18px rgba(0,255,157,.18),
inset 0 1px 0 rgba(255,255,255,.28);
}
.item-prepared .item-name{
color:rgba(255,255,255,.70)!important;
text-decoration:line-through;
text-decoration-thickness:2px;
text-decoration-color:rgba(0,255,157,.55);
}
.item-prepared .mods{
opacity:.72;
}
.item-prepared .item-qty{
filter:saturate(.75);
opacity:.78;
}
.lane-done .items::after{
display:none;
}
@media(max-width:720px){
.item-check{
width:25px;
height:25px;
margin-top:8px;
border-radius:9px;
font-size:.9rem;
}
.ticket .item{
grid-template-columns:auto auto minmax(0,1fr)!important;
}
}
/* v71 prep progress + ready-to-complete state */
.prep-progress{
height:30px;
padding:0 10px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.065);
border:1px solid rgba(255,255,255,.11);
color:rgba(255,255,255,.70);
font-size:.68rem;
font-weight:1000;
letter-spacing:.06em;
text-transform:uppercase;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.prep-progress.ready{
color:#001b13;
background:linear-gradient(135deg,#00ff9d,#00d9ff);
border-color:rgba(0,255,157,.42);
box-shadow:
0 0 18px rgba(0,255,157,.22),
inset 0 1px 0 rgba(255,255,255,.28);
}
.ticket.all-prepared{
border-color:rgba(0,255,157,.55)!important;
background:
radial-gradient(circle at top left,rgba(0,255,157,.16),transparent 38%),
linear-gradient(180deg,rgba(14,22,30,.98),rgba(6,10,16,.98))!important;
box-shadow:
0 18px 44px rgba(0,0,0,.46),
0 0 34px rgba(0,255,157,.20),
inset 0 1px 0 rgba(255,255,255,.10)!important;
}
.ticket.all-prepared::before{
content:"";
position:absolute;
inset:-2px;
border-radius:inherit;
pointer-events:none;
background:linear-gradient(135deg,rgba(0,255,157,.28),transparent 42%,rgba(0,217,255,.20));
opacity:.75;
z-index:0;
}
.ticket.all-prepared .done-action,
.ticket.all-prepared button[data-action="done"]{
background:linear-gradient(135deg,#00ff9d,#00d9ff 58%,#ffffff)!important;
color:#00170f!important;
box-shadow:
0 18px 34px rgba(0,255,157,.24),
0 0 34px rgba(0,217,255,.18),
inset 0 1px 0 rgba(255,255,255,.38)!important;
animation:diziReadyDoneButton 1.25s ease-in-out infinite;
}
.ticket.all-prepared .ticket-actions::before{
content:"READY TO COMPLETE";
display:flex;
align-items:center;
justify-content:center;
height:30px;
margin-bottom:8px;
border-radius:999px;
background:rgba(0,255,157,.10);
border:1px solid rgba(0,255,157,.18);
color:#baffdf;
font-size:.68rem;
font-weight:1000;
letter-spacing:.10em;
}
@keyframes diziReadyDoneButton{
0%,100%{
transform:translateY(0);
filter:brightness(1);
}
50%{
transform:translateY(-1px);
filter:brightness(1.12);
}
}
@media (prefers-reduced-motion: reduce){
.ticket.all-prepared .done-action,
.ticket.all-prepared button[data-action="done"]{
animation:none!important;
}
}
/* v72 complete order polish */
.ticket.all-prepared .done-action,
.ticket.all-prepared button[data-action="done"]{
font-size:.95rem!important;
letter-spacing:.055em!important;
text-transform:uppercase!important;
}
.done-status-pill{
height:30px;
padding:0 10px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(0,255,157,.10);
border:1px solid rgba(0,255,157,.20);
color:#caffdf;
font-size:.68rem;
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.done-status-pill.voided{
background:rgba(255,51,95,.10);
border-color:rgba(255,51,95,.24);
color:#ffd9e1;
}
.ticket.recently-completed{
animation:diziCompletedFlash 1.6s ease both!important;
}
.ticket.recently-completed .ticket-title::after{
content:" ✓";
color:#00ff9d;
text-shadow:0 0 16px rgba(0,255,157,.45);
}
@keyframes diziCompletedFlash{
0%{
transform:scale(.985);
box-shadow:
0 0 0 0 rgba(0,255,157,.0),
0 18px 42px rgba(0,0,0,.42);
}
22%{
transform:scale(1.015);
border-color:rgba(0,255,157,.70);
box-shadow:
0 0 0 4px rgba(0,255,157,.20),
0 0 48px rgba(0,255,157,.36),
0 18px 42px rgba(0,0,0,.46);
}
100%{
transform:scale(1);
}
}
.lane-done .done-status-pill{
margin-right:auto;
}
/* make Recall read as secondary history action */
.lane-done .recall-action,
.lane-done button[data-action="recall"]{
min-height:44px!important;
background:rgba(255,255,255,.055)!important;
border-color:rgba(255,255,255,.11)!important;
color:rgba(255,255,255,.76)!important;
}
@media (prefers-reduced-motion: reduce){
.ticket.recently-completed{
animation:none!important;
}
}
/* v73 service escalation banner */
.service-escalation-banner.hidden{
display:none!important;
}
.service-escalation-banner{
width:100%;
margin:0 0 16px;
padding:14px 16px;
border-radius:24px;
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:14px;
position:relative;
overflow:hidden;
border:1px solid rgba(255,212,59,.28);
background:
radial-gradient(circle at top left,rgba(255,212,59,.18),transparent 38%),
linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 16px 36px rgba(0,0,0,.25),
0 0 28px rgba(255,212,59,.10);
animation:diziEscalationEnter .26s ease both;
}
.service-escalation-banner::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.075),transparent);
transform:translateX(-120%);
animation:diziEscalationSheen 2.8s ease-in-out infinite;
}
.service-escalation-banner.critical{
border-color:rgba(255,51,95,.46);
background:
radial-gradient(circle at top left,rgba(255,51,95,.22),transparent 38%),
linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 16px 36px rgba(0,0,0,.28),
0 0 34px rgba(255,51,95,.18);
animation:diziEscalationEnter .26s ease both,diziCriticalBannerPulse 1.35s ease-in-out infinite;
}
.service-escalation-icon{
width:44px;
height:44px;
border-radius:16px;
display:inline-flex;
align-items:center;
justify-content:center;
background:rgba(255,212,59,.16);
border:1px solid rgba(255,212,59,.25);
color:#fff0b5;
font-size:1.35rem;
font-weight:1000;
box-shadow:0 0 20px rgba(255,212,59,.12);
}
.service-escalation-banner.critical .service-escalation-icon{
background:rgba(255,51,95,.17);
border-color:rgba(255,51,95,.32);
color:#ffdbe4;
box-shadow:0 0 22px rgba(255,51,95,.20);
}
.service-escalation-copy{
min-width:0;
display:flex;
flex-direction:column;
gap:3px;
position:relative;
z-index:2;
}
.service-escalation-copy strong{
color:#fff;
font-size:clamp(1.05rem,1.8vw,1.35rem);
font-weight:1000;
letter-spacing:-.035em;
}
.service-escalation-copy span{
color:rgba(255,255,255,.68);
font-size:.84rem;
font-weight:900;
}
@keyframes diziEscalationEnter{
from{opacity:0;transform:translateY(-8px) scale(.99)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes diziEscalationSheen{
0%,55%{transform:translateX(-120%)}
100%{transform:translateX(120%)}
}
@keyframes diziCriticalBannerPulse{
0%,100%{filter:brightness(1)}
50%{filter:brightness(1.13)}
}
@media(max-width:720px){
.service-escalation-banner{
margin-bottom:12px;
padding:12px;
border-radius:20px;
}
.service-escalation-icon{
width:38px;
height:38px;
border-radius:14px;
font-size:1.1rem;
}
}
@media (prefers-reduced-motion: reduce){
.service-escalation-banner,
.service-escalation-banner::before{
animation:none!important;
}
}
/* v74 Final Wow Pack */
.queue-summary-bar{
width:100%;
margin:0 0 16px;
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:10px;
position:relative;
}
.queue-summary-chip{
min-height:68px;
padding:10px 12px;
border-radius:20px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:5px;
background:
radial-gradient(circle at top right,rgba(0,217,255,.08),transparent 40%),
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032));
border:1px solid rgba(255,255,255,.10);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.16);
overflow:hidden;
}
.queue-summary-chip span{
color:rgba(255,255,255,.54);
font-size:.64rem;
font-weight:1000;
letter-spacing:.08em;
text-transform:uppercase;
}
.queue-summary-chip strong{
color:#fff;
font-size:clamp(1.15rem,2vw,1.55rem);
font-weight:1000;
letter-spacing:-.06em;
line-height:1;
}
.queue-summary-chip.ready{
border-color:rgba(0,255,157,.16);
background:
radial-gradient(circle at top right,rgba(0,255,157,.10),transparent 40%),
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032));
}
.queue-summary-chip.urgent{
border-color:rgba(255,212,59,.18);
background:
radial-gradient(circle at top right,rgba(255,212,59,.12),transparent 40%),
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032));
}
.queue-summary-chip.critical{
border-color:rgba(255,51,95,.22);
background:
radial-gradient(circle at top right,rgba(255,51,95,.14),transparent 40%),
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032));
}
.queue-summary-bar.critical .queue-summary-chip.critical{
animation:diziSummaryCriticalPulse 1.4s ease-in-out infinite;
}
.queue-summary-bar.urgent .queue-summary-chip.urgent{
animation:diziSummaryUrgentPulse 1.8s ease-in-out infinite;
}
/* Lane header polish */
.lane-header{
position:relative;
z-index:2;
}
.lane-header h2,
.lane-title{
letter-spacing:-.04em!important;
}
.lane-new .lane-header{
border-bottom:1px solid rgba(0,217,255,.08);
padding-bottom:10px;
margin-bottom:12px;
}
.lane-done .lane-header{
border-bottom:1px solid rgba(255,255,255,.06);
padding-bottom:10px;
margin-bottom:12px;
}
/* Kiosk/tablet touch tuning */
.ticket,
.settings-tile,
.primary-btn,
.ghost-btn{
-webkit-tap-highlight-color:transparent;
}
.ticket-actions{
position:relative;
}
.ticket-actions button{
touch-action:manipulation;
}
/* More polished active ticket top edge */
.ticket.new{
overflow:hidden;
}
.ticket.new::marker{
display:none;
}
.ticket.new .ticket-title{
text-shadow:0 0 18px rgba(0,217,255,.10);
}
/* More refined critical ticket */
.ticket.age-critical{
background:
radial-gradient(circle at top left,rgba(255,51,95,.16),transparent 38%),
radial-gradient(circle at bottom right,rgba(0,217,255,.06),transparent 42%),
linear-gradient(180deg,rgba(18,14,26,.98),rgba(7,8,16,.98))!important;
}
/* Final idle chip refinement */
.idle-chip{
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
/* Screen Health final polish */
.health-card,
.staff-health-section,
.health-hero{
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
@keyframes diziSummaryCriticalPulse{
0%,100%{
filter:brightness(1);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.16);
}
50%{
filter:brightness(1.15);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 30px rgba(255,51,95,.24),0 10px 24px rgba(0,0,0,.16);
}
}
@keyframes diziSummaryUrgentPulse{
0%,100%{
filter:brightness(1);
}
50%{
filter:brightness(1.10);
}
}
@media(max-width:900px){
.queue-summary-bar{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media(max-width:560px){
.queue-summary-bar{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.queue-summary-chip{
min-height:58px;
border-radius:17px;
}
}
@media (prefers-reduced-motion: reduce){
.queue-summary-chip{
animation:none!important;
}
}
/* v75 remove top queue summary bar */
#queueSummaryBar,
.queue-summary-bar{
display:none!important;
}
/* v76 start screen cleanup */
#audioUnlockOverlay::after{
content:none!important;
display:none!important;
}
#audioUnlockOverlay{
cursor:default!important;
}
#unlockAudioBtn{
cursor:pointer!important;
}
/* v77 settings/staff map layout fix */
.v77-settings-card{
position:relative!important;
padding-top:26px!important;
}
.settings-top-close{
position:absolute!important;
top:18px!important;
right:18px!important;
z-index:6!important;
margin:0!important;
}
.v77-settings-header,
.v77-staff-header{
padding-right:86px!important;
}
#settingsTitle{
white-space:normal!important;
}
.staff-map-section.hidden,
#settingsHome.hidden,
#staffMapUnlockedPanel.hidden,
#staffMapLockedPanel.hidden{
display:none!important;
}
/* make sure Staff Map internals never sit on the Settings home screen */
#settingsHome #staffMapLockedPanel,
#settingsHome #staffMapUnlockedPanel,
#settingsHome #staffMapList,
#settingsHome #staffCandidateList,
#settingsHome .recent-square-panel,
#settingsHome .staff-map-workspace,
#settingsHome .staff-lock-card{
display:none!important;
}
/* contain Recent Square IDs inside Staff Map only */
#staffMapSection .recent-square-panel{
margin-top:14px!important;
max-width:100%!important;
overflow:hidden!important;
}
#staffMapSection .staff-candidate-list,
#staffMapSection .staff-candidate-row,
#staffMapSection .staff-candidate-main{
max-width:100%!important;
min-width:0!important;
overflow:hidden!important;
}
/* remove bottom-right close remnants if older CSS exists */
.settings-actions #closeSettingsBtn{
display:none!important;
}
@media(max-width:720px){
.settings-top-close{
top:14px!important;
right:14px!important;
}
.v77-settings-header,
.v77-staff-header{
padding-right:74px!important;
}
}
/* v78 requested cleanup */
.settings-subtitle-empty,
#settingsHome > .settings-header .settings-subtitle{
display:none!important;
}
/* Remove the random ACK pill after Acknowledge */
/* Remove tap-to-check helper text */
.items::after{
content:none!important;
display:none!important;
}
/* Keep idle screen cleaner */
.idle-status-row .idle-chip:empty{
display:none!important;
}
/* Fix ticket top-right status/timer pills so they do not overlap */
.ticket{
position:relative!important;
}
.ticket .timer{
position:absolute!important;
top:14px!important;
right:14px!important;
z-index:8!important;
min-width:58px!important;
height:34px!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
.ticket .new-badge,
.ticket .badge-new,
.ticket [class*="new-badge"],
.ticket [class*="newBadge"]{
position:absolute!important;
top:14px!important;
right:82px!important;
z-index:8!important;
min-width:42px!important;
height:34px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
/* If the markup uses a generic NEW label, keep it beside the timer */
.ticket.needs-ack .timer{
right:14px!important;
}
/* Add enough space in title/meta so absolute pills don't cover the text */
.ticket-title,
.ticket .ticket-title{
padding-right:150px!important;
}
.ticket-meta{
padding-right:150px!important;
}
/* After acknowledged, timer should occupy the normal far-right position alone */
.ticket.acknowledged .timer{
right:14px!important;
}
@media(max-width:720px){
.ticket .timer{
top:12px!important;
right:12px!important;
min-width:52px!important;
height:31px!important;
}
.ticket .new-badge,
.ticket .badge-new,
.ticket [class*="new-badge"],
.ticket [class*="newBadge"]{
top:12px!important;
right:72px!important;
height:31px!important;
}
.ticket-title,
.ticket .ticket-title,
.ticket-meta{
padding-right:128px!important;
}
}
.ticket.acknowledged::after,
.ticket.acknowledged:not(.needs-ack)::after{
content:none!important;
display:none!important;
}
/* v78 Settings title/close polish */
#settingsTitle{
font-size:1.55rem!important;
font-weight:1000!important;
letter-spacing:-.04em!important;
}
.settings-top-close,
.v77-settings-card > #closeSettingsBtn{
position:absolute!important;
top:18px!important;
right:18px!important;
z-index:20!important;
}
.v77-settings-header{
padding-right:94px!important;
margin-bottom:16px!important;
}
/* v79 pill layout + prepared progress cleanup */
/* Hide any lingering ACK pseudo pill */
.ticket.acknowledged::after,
.ticket.acknowledged:not(.needs-ack)::after{
content:none!important;
display:none!important;
}
/* Dedicated prepared progress row for ALL active orders */
.prep-progress-row{
display:flex!important;
align-items:center!important;
gap:10px!important;
margin:8px 0 10px!important;
min-height:30px!important;
padding-right:150px!important;
flex-wrap:wrap!important;
}
.prep-progress{
flex:0 0 auto!important;
margin:0!important;
}
.prep-ticket-name{
min-width:0!important;
color:rgba(255,255,255,.66)!important;
font-size:.82rem!important;
font-weight:900!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
/* If an older prep pill remains inside ticket-meta, give it breathing room */
.ticket-meta .prep-progress{
margin-right:10px!important;
}
/* Correct top-right NEW + time layout:
NEW on far right, timer directly to its left for new unacknowledged tickets. */
.ticket.needs-ack .timer{
position:absolute!important;
top:14px!important;
right:76px!important;
z-index:8!important;
min-width:62px!important;
height:34px!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
/* Broad NEW badge selectors */
.ticket.needs-ack .new-badge,
.ticket.needs-ack .badge-new,
.ticket.needs-ack [class*="new-badge"],
.ticket.needs-ack [class*="newBadge"],
.ticket.needs-ack [class*="new"]{
position:absolute!important;
top:14px!important;
right:14px!important;
z-index:9!important;
min-width:48px!important;
height:34px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
/* Avoid catching the whole ticket because it has class new */
.ticket.needs-ack.ticket.new{
position:relative!important;
}
/* After acknowledge, timer returns to far-right by itself */
.ticket.acknowledged .timer,
.ticket:not(.needs-ack) .timer{
position:absolute!important;
top:14px!important;
right:14px!important;
z-index:8!important;
min-width:62px!important;
height:34px!important;
padding:0 12px!important;
}
/* Ensure title/content never sits under top-right pills */
.ticket-title,
.ticket .ticket-title{
padding-right:155px!important;
}
.ticket-meta{
padding-right:155px!important;
}
/* If NEW badge is a plain span with text, v79 still leaves room */
.ticket.needs-ack .ticket-title{
padding-right:155px!important;
}
/* Done queue should not show prepared progress rows */
.lane-done .prep-progress-row{
display:none!important;
}
@media(max-width:720px){
.ticket.needs-ack .timer{
top:12px!important;
right:70px!important;
height:31px!important;
min-width:54px!important;
padding:0 10px!important;
}
.ticket.needs-ack .new-badge,
.ticket.needs-ack .badge-new,
.ticket.needs-ack [class*="new-badge"],
.ticket.needs-ack [class*="newBadge"],
.ticket.needs-ack [class*="new"]{
top:12px!important;
right:12px!important;
height:31px!important;
min-width:44px!important;
}
.ticket.acknowledged .timer,
.ticket:not(.needs-ack) .timer{
top:12px!important;
right:12px!important;
height:31px!important;
min-width:54px!important;
}
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:130px!important;
}
}
.ticket.needs-ack .item [class*="new"],
.ticket.needs-ack .item-name,
.ticket.needs-ack .item-body,
.ticket.needs-ack .item-qty{
position:static!important;
min-width:initial!important;
height:auto!important;
}
/* v80 exact top-right NEW + timer pill alignment */
/* Base: keep the ticket as the positioning container */
.ticket{
position:relative!important;
}
/* All active/new tickets: reserve clear space for both pills */
.ticket.needs-ack .ticket-title,
.ticket.needs-ack .ticket-meta,
.ticket.needs-ack .prep-progress-row{
padding-right:170px!important;
}
/* The NEW badge should be the right-most pill */
.ticket.needs-ack .new-badge,
.ticket.needs-ack .badge-new,
.ticket.needs-ack [class*="new-badge"],
.ticket.needs-ack [class*="newBadge"]{
position:absolute!important;
top:18px!important;
right:16px!important;
z-index:12!important;
height:34px!important;
min-width:52px!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
margin:0!important;
}
/* Timer sits immediately to the LEFT of NEW, same vertical line */
.ticket.needs-ack .timer{
position:absolute!important;
top:18px!important;
right:82px!important;
z-index:11!important;
height:34px!important;
min-width:68px!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
margin:0!important;
}
/* After acknowledgement, NEW disappears and timer returns to right-most position */
.ticket.acknowledged .timer,
.ticket:not(.needs-ack) .timer{
position:absolute!important;
top:18px!important;
right:16px!important;
z-index:11!important;
height:34px!important;
min-width:68px!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
margin:0!important;
}
/* Do NOT let broad "new" selectors affect the ticket card or item content */
.ticket.needs-ack.ticket.new{
position:relative!important;
}
.ticket.needs-ack .item,
.ticket.needs-ack .item *,
.ticket.needs-ack .prep-progress-row,
.ticket.needs-ack .prep-progress-row *{
top:auto!important;
right:auto!important;
}
/* Keep prepared pill and ticket name neatly separated */
.prep-progress-row{
display:flex!important;
align-items:center!important;
gap:12px!important;
column-gap:12px!important;
row-gap:6px!important;
margin:9px 0 12px!important;
}
.prep-progress-row .prep-progress{
margin-right:0!important;
}
.prep-ticket-name{
display:inline-flex!important;
align-items:center!important;
min-height:28px!important;
}
/* Keep ACK hidden */
.ticket.acknowledged::after,
.ticket.acknowledged:not(.needs-ack)::after{
content:none!important;
display:none!important;
}
@media(max-width:720px){
.ticket.needs-ack .new-badge,
.ticket.needs-ack .badge-new,
.ticket.needs-ack [class*="new-badge"],
.ticket.needs-ack [class*="newBadge"]{
top:14px!important;
right:12px!important;
height:31px!important;
min-width:46px!important;
padding:0 10px!important;
}
.ticket.needs-ack .timer{
top:14px!important;
right:70px!important;
height:31px!important;
min-width:58px!important;
padding:0 10px!important;
}
.ticket.acknowledged .timer,
.ticket:not(.needs-ack) .timer{
top:14px!important;
right:12px!important;
height:31px!important;
min-width:58px!important;
padding:0 10px!important;
}
.ticket.needs-ack .ticket-title,
.ticket.needs-ack .ticket-meta,
.ticket.needs-ack .prep-progress-row{
padding-right:145px!important;
}
}
/* v81 exact same-row alignment for NEW + time pills */
/*
The timer was horizontally correct but vertically lower than NEW.
This hard-resets both pill boxes so they share the same top edge,
height, display model, alignment, margins, transforms and line-height.
*/
.ticket.needs-ack{
position:relative!important;
}
/* Reserve enough room so the title/prep row never collides with the pills */
.ticket.needs-ack .ticket-title,
.ticket.needs-ack .ticket-meta,
.ticket.needs-ack .prep-progress-row{
padding-right:178px!important;
}
/* NEW pill - fixed top row, far right */
.ticket.needs-ack .new-badge,
.ticket.needs-ack .badge-new,
.ticket.needs-ack [class*="new-badge"],
.ticket.needs-ack [class*="newBadge"]{
position:absolute!important;
top:16px!important;
right:14px!important;
bottom:auto!important;
left:auto!important;
z-index:20!important;
width:auto!important;
min-width:52px!important;
max-width:none!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
margin:0!important;
padding:0 12px!important;
transform:none!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
vertical-align:top!important;
box-sizing:border-box!important;
}
/* Timer pill - exact same row, immediately left of NEW */
.ticket.needs-ack .timer{
position:absolute!important;
top:16px!important;
right:82px!important;
bottom:auto!important;
left:auto!important;
z-index:19!important;
width:auto!important;
min-width:66px!important;
max-width:none!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
margin:0!important;
padding:0 12px!important;
transform:none!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
vertical-align:top!important;
box-sizing:border-box!important;
}
/* When acknowledged/no NEW, timer goes back right and remains same top row */
.ticket.acknowledged .timer,
.ticket:not(.needs-ack) .timer{
position:absolute!important;
top:16px!important;
right:14px!important;
bottom:auto!important;
left:auto!important;
z-index:19!important;
width:auto!important;
min-width:66px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
margin:0!important;
padding:0 12px!important;
transform:none!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
vertical-align:top!important;
box-sizing:border-box!important;
}
/* Do not allow inner text to create baseline offsets */
.ticket.needs-ack .timer *,
.ticket.needs-ack .new-badge *,
.ticket.needs-ack .badge-new *,
.ticket.needs-ack [class*="new-badge"] *,
.ticket.needs-ack [class*="newBadge"] *{
line-height:1!important;
margin:0!important;
padding-top:0!important;
padding-bottom:0!important;
transform:none!important;
}
/* Prevent broad selectors from accidentally positioning item content */
.ticket.needs-ack .item,
.ticket.needs-ack .item *,
.ticket.needs-ack .prep-progress-row,
.ticket.needs-ack .prep-progress-row *{
position:static!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
}
/* Re-apply correct absolute placement after the broad safety reset */
.ticket.needs-ack .timer{
position:absolute!important;
top:16px!important;
right:82px!important;
}
.ticket.needs-ack .new-badge,
.ticket.needs-ack .badge-new,
.ticket.needs-ack [class*="new-badge"],
.ticket.needs-ack [class*="newBadge"]{
position:absolute!important;
top:16px!important;
right:14px!important;
}
/* ACK stays gone */
.ticket.acknowledged::after,
.ticket.acknowledged:not(.needs-ack)::after{
content:none!important;
display:none!important;
}
/* Mobile equivalent */
@media(max-width:720px){
.ticket.needs-ack .ticket-title,
.ticket.needs-ack .ticket-meta,
.ticket.needs-ack .prep-progress-row{
padding-right:150px!important;
}
.ticket.needs-ack .new-badge,
.ticket.needs-ack .badge-new,
.ticket.needs-ack [class*="new-badge"],
.ticket.needs-ack [class*="newBadge"]{
top:12px!important;
right:12px!important;
min-width:46px!important;
height:31px!important;
min-height:31px!important;
max-height:31px!important;
padding:0 10px!important;
}
.ticket.needs-ack .timer{
top:12px!important;
right:70px!important;
min-width:58px!important;
height:31px!important;
min-height:31px!important;
max-height:31px!important;
padding:0 10px!important;
}
.ticket.acknowledged .timer,
.ticket:not(.needs-ack) .timer{
top:12px!important;
right:12px!important;
min-width:58px!important;
height:31px!important;
min-height:31px!important;
max-height:31px!important;
padding:0 10px!important;
}
}
/* v82 REAL pill row structure - timer + NEW are siblings in one flex row */
.ticket{
position:relative!important;
}
.ticket-pill-row{
position:absolute!important;
top:16px!important;
right:16px!important;
z-index:30!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:10px!important;
height:34px!important;
pointer-events:none!important;
}
.ticket-pill-row .timer,
.ticket-pill-row .new-badge{
position:static!important;
inset:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
transform:none!important;
margin:0!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
box-sizing:border-box!important;
vertical-align:top!important;
white-space:nowrap!important;
}
.ticket-pill-row .timer{
min-width:66px!important;
}
.ticket-pill-row .new-badge{
min-width:52px!important;
}
/* kill all older separate absolute pill rules outside the new row */
.ticket > .timer,
.ticket > .new-badge,
.ticket > .badge-new,
.ticket > [class*="new-badge"],
.ticket > [class*="newBadge"]{
position:static!important;
}
/* but restore the real row children */
.ticket-pill-row > .timer,
.ticket-pill-row > .new-badge{
position:static!important;
}
/* Reserve right-side space for the pill row */
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:155px!important;
}
/* no random ACK badge */
.ticket.acknowledged::after,
.ticket.acknowledged:not(.needs-ack)::after{
content:none!important;
display:none!important;
}
/* Prevent previous broad v79/v80/v81 selectors from moving children */
.ticket.needs-ack .item,
.ticket.needs-ack .item *,
.ticket.needs-ack .prep-progress-row,
.ticket.needs-ack .prep-progress-row *{
position:static!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
}
/* Make the visual alignment obvious and consistent */
.ticket-pill-row .timer *,
.ticket-pill-row .new-badge *{
line-height:1!important;
margin:0!important;
padding:0!important;
transform:none!important;
}
@media(max-width:720px){
.ticket-pill-row{
top:12px!important;
right:12px!important;
height:31px!important;
gap:8px!important;
}
.ticket-pill-row .timer,
.ticket-pill-row .new-badge{
height:31px!important;
min-height:31px!important;
max-height:31px!important;
padding:0 10px!important;
}
.ticket-pill-row .timer{
min-width:58px!important;
}
.ticket-pill-row .new-badge{
min-width:46px!important;
}
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:132px!important;
}
}
/* v83 remove duplicate old pill rendering */
/* The NEW badge must only come from .ticket-pill-row .new-badge.
Disable all older CSS-generated NEW labels. */
.ticket.needs-ack::after,
.lane-new .ticket.needs-ack::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
}
/* The real pill row is the only top-right pill system. */
.ticket-pill-row{
position:absolute!important;
top:16px!important;
right:16px!important;
z-index:50!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-end!important;
gap:10px!important;
height:34px!important;
pointer-events:none!important;
}
.ticket-pill-row .timer,
.ticket-pill-row .new-badge{
position:static!important;
inset:auto!important;
transform:none!important;
margin:0!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
padding:0 12px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
box-sizing:border-box!important;
white-space:nowrap!important;
}
.ticket-pill-row .timer{
min-width:66px!important;
order:1!important;
}
.ticket-pill-row .new-badge{
min-width:52px!important;
order:2!important;
}
/* Any old direct timer/new children should not show if somehow left by cached markup. */
.ticket > .timer:not(.ticket-pill-row .timer),
.ticket > .new-badge:not(.ticket-pill-row .new-badge),
.ticket > .badge-new{
display:none!important;
}
/* Reserve room for the real pill row */
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:155px!important;
}
/* Done queue timer also uses the real row, with only the timer present */
.ticket.done .ticket-pill-row{
right:16px!important;
}
/* Mobile */
@media(max-width:720px){
.ticket-pill-row{
top:12px!important;
right:12px!important;
height:31px!important;
gap:8px!important;
}
.ticket-pill-row .timer,
.ticket-pill-row .new-badge{
height:31px!important;
min-height:31px!important;
max-height:31px!important;
padding:0 10px!important;
}
.ticket-pill-row .timer{
min-width:58px!important;
}
.ticket-pill-row .new-badge{
min-width:46px!important;
}
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:132px!important;
}
}
/* v84 FINAL pill row design fix */
/* Disable every old pseudo/new duplicate source */
.ticket.needs-ack::after,
.ticket.acknowledged::after,
.ticket.acknowledged:not(.needs-ack)::after,
.lane-new .ticket.needs-ack::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
}
/* The only valid top-right status area */
.ticket-pill-row{
position:absolute!important;
top:16px!important;
right:16px!important;
z-index:80!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-end!important;
gap:10px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
margin:0!important;
padding:0!important;
transform:none!important;
pointer-events:none!important;
}
/* Timer and NEW share the exact same row metrics */
.ticket-pill-row .timer,
.ticket-pill-row .ticket-fresh-pill{
position:static!important;
inset:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
margin:0!important;
transform:none!important;
vertical-align:top!important;
box-sizing:border-box!important;
line-height:1!important;
white-space:nowrap!important;
}
/* Timer is left */
.ticket-pill-row .timer{
order:1!important;
min-width:66px!important;
padding:0 12px!important;
}
/* NEW is right and keeps the nice premium design */
.ticket-pill-row .ticket-fresh-pill{
order:2!important;
min-width:52px!important;
padding:0 12px!important;
border-radius:999px!important;
background:linear-gradient(135deg,#ffd85b 0%,#ff7a50 42%,#ff006e 100%)!important;
color:#15000b!important;
border:1px solid rgba(255,255,255,.22)!important;
font-size:.68rem!important;
font-weight:1000!important;
letter-spacing:.075em!important;
text-transform:uppercase!important;
box-shadow:
0 10px 22px rgba(255,0,110,.26),
0 0 22px rgba(255,216,91,.16),
inset 0 1px 0 rgba(255,255,255,.32)!important;
}
/* Old direct children should not display */
.ticket > .timer:not(.ticket-pill-row .timer),
.ticket > .new-badge,
.ticket > .badge-new,
.ticket > [class*="new-badge"],
.ticket > [class*="newBadge"]{
display:none!important;
}
/* Preserve row space */
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:155px!important;
}
/* Stop old broad class selectors from affecting the fresh pill */
.ticket-pill-row .ticket-fresh-pill,
.ticket-pill-row .timer{
top:auto!important;
right:auto!important;
left:auto!important;
bottom:auto!important;
}
/* Prevent item content from inheriting absolute cleanup */
.ticket.needs-ack .item,
.ticket.needs-ack .item *,
.ticket.needs-ack .prep-progress-row,
.ticket.needs-ack .prep-progress-row *{
position:static!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
}
/* But keep the real row absolute */
.ticket.needs-ack .ticket-pill-row,
.ticket .ticket-pill-row{
position:absolute!important;
top:16px!important;
right:16px!important;
}
/* Mobile */
@media(max-width:720px){
.ticket-pill-row{
top:12px!important;
right:12px!important;
height:31px!important;
min-height:31px!important;
max-height:31px!important;
gap:8px!important;
}
.ticket-pill-row .timer,
.ticket-pill-row .ticket-fresh-pill{
height:31px!important;
min-height:31px!important;
max-height:31px!important;
padding:0 10px!important;
}
.ticket-pill-row .timer{
min-width:58px!important;
}
.ticket-pill-row .ticket-fresh-pill{
min-width:46px!important;
}
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:132px!important;
}
.ticket.needs-ack .ticket-pill-row,
.ticket .ticket-pill-row{
top:12px!important;
right:12px!important;
}
}
/* v85 verified: restore the original nice NEW pill while keeping real shared row */
/* Disable old pseudo-generated NEW and ACK labels completely */
.ticket.needs-ack::after,
.lane-new .ticket.needs-ack::after,
.ticket.acknowledged::after,
.ticket.acknowledged:not(.needs-ack)::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
}
/* One real top-right row only */
.ticket{
position:relative!important;
}
.ticket-pill-row{
position:absolute!important;
top:12px!important;
right:12px!important;
z-index:100!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-end!important;
gap:8px!important;
height:32px!important;
min-height:32px!important;
max-height:32px!important;
margin:0!important;
padding:0!important;
transform:none!important;
pointer-events:none!important;
}
/* Timer left of NEW, same centered row */
.ticket-pill-row .timer{
position:static!important;
inset:auto!important;
order:1!important;
min-width:58px!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
padding:0 11px!important;
margin:0!important;
transform:none!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
box-sizing:border-box!important;
white-space:nowrap!important;
vertical-align:middle!important;
}
/* Restored ORIGINAL NEW pill design, but as a real element */
.ticket-pill-row .fresh-order-pill{
position:static!important;
inset:auto!important;
order:2!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:5px 9px!important;
margin:0!important;
transform:none!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:999px!important;
background:linear-gradient(135deg,#ff006e,#ffd43b)!important;
color:#150008!important;
border:0!important;
font-size:.68rem!important;
font-weight:1000!important;
letter-spacing:.08em!important;
text-transform:uppercase!important;
line-height:1!important;
box-sizing:border-box!important;
white-space:nowrap!important;
vertical-align:middle!important;
box-shadow:0 0 18px rgba(255,0,110,.42)!important;
animation:diziNewBadgePop 1.05s ease-in-out infinite!important;
}
/* Hide any accidental old direct duplicates */
.ticket > .timer:not(.ticket-pill-row .timer),
.ticket > .new-badge,
.ticket > .badge-new,
.ticket > [class*="new-badge"],
.ticket > [class*="newBadge"],
.ticket > .ticket-fresh-pill{
display:none!important;
}
/* Give the row enough right-side space */
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:142px!important;
}
/* Keep item/prep content normal */
.ticket.needs-ack .item,
.ticket.needs-ack .item *,
.ticket.needs-ack .prep-progress-row,
.ticket.needs-ack .prep-progress-row *{
position:static!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
}
/* But keep the actual pill row absolute after those old safety rules */
.ticket .ticket-pill-row,
.ticket.needs-ack .ticket-pill-row{
position:absolute!important;
top:12px!important;
right:12px!important;
}
/* Mobile */
@media(max-width:720px){
.ticket-pill-row{
top:12px!important;
right:12px!important;
height:31px!important;
min-height:31px!important;
max-height:31px!important;
gap:7px!important;
}
.ticket-pill-row .timer{
min-width:54px!important;
height:29px!important;
min-height:29px!important;
max-height:29px!important;
padding:0 10px!important;
}
.ticket-pill-row .fresh-order-pill{
padding:5px 9px!important;
font-size:.66rem!important;
}
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:126px!important;
}
}
/* v86 FINAL: old NEW pill restored + verified side-by-side row */
/* Kill duplicate pseudo labels */
.ticket.needs-ack::after,
.lane-new .ticket.needs-ack::after,
.ticket.acknowledged::after,
.ticket.acknowledged:not(.needs-ack)::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
}
/* Single real top-right pill row */
.ticket{
position:relative!important;
}
.ticket-pill-row{
position:absolute!important;
top:12px!important;
right:12px!important;
z-index:100!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-end!important;
gap:6px!important;
height:32px!important;
margin:0!important;
padding:0!important;
transform:none!important;
pointer-events:none!important;
}
/* Timer pill: left of NEW, same center line */
.ticket-pill-row .timer{
position:static!important;
inset:auto!important;
order:1!important;
min-width:58px!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
padding:0 11px!important;
margin:0!important;
transform:none!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
box-sizing:border-box!important;
white-space:nowrap!important;
vertical-align:middle!important;
}
/* OLD original NEW pill look, restored exactly */
.ticket-pill-row .fresh-order-pill{
position:static!important;
inset:auto!important;
order:2!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:5px 9px!important;
margin:0!important;
transform:none!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:999px!important;
background:linear-gradient(135deg,#ff006e,#ffd43b)!important;
color:#150008!important;
border:0!important;
font-size:.68rem!important;
font-weight:1000!important;
letter-spacing:.08em!important;
text-transform:uppercase!important;
line-height:1!important;
box-sizing:border-box!important;
white-space:nowrap!important;
vertical-align:middle!important;
box-shadow:0 0 18px rgba(255,0,110,.42)!important;
animation:diziNewBadgePop 1.05s ease-in-out infinite!important;
}
/* Hide old direct duplicates if cached/left over */
.ticket > .timer:not(.ticket-pill-row .timer),
.ticket > .new-badge,
.ticket > .badge-new,
.ticket > [class*="new-badge"],
.ticket > [class*="newBadge"],
.ticket > .ticket-fresh-pill{
display:none!important;
}
/* right-side content reserve */
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:136px!important;
}
/* Keep normal content from old broad reset rules */
.ticket.needs-ack .item,
.ticket.needs-ack .item *,
.ticket.needs-ack .prep-progress-row,
.ticket.needs-ack .prep-progress-row *{
position:static!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
}
/* Re-assert the actual row position after broad reset rules */
.ticket .ticket-pill-row,
.ticket.needs-ack .ticket-pill-row{
position:absolute!important;
top:12px!important;
right:12px!important;
}
@media(max-width:720px){
.ticket-pill-row{
top:12px!important;
right:12px!important;
height:31px!important;
gap:6px!important;
}
.ticket-pill-row .timer{
min-width:54px!important;
height:29px!important;
min-height:29px!important;
max-height:29px!important;
padding:0 10px!important;
}
.ticket-pill-row .fresh-order-pill{
padding:5px 9px!important;
font-size:.66rem!important;
}
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:122px!important;
}
}
/* v87 SPECIFICITY FIX: old .ticket.needs-ack .timer cannot beat this */
/* Keep original nice pseudo NEW disabled */
.ticket.needs-ack::after,
.lane-new .ticket.needs-ack::after,
.ticket.acknowledged::after,
.ticket.acknowledged:not(.needs-ack)::after{
content:none!important;
display:none!important;
}
/* Real row, high specificity */
.ticket.needs-ack .ticket-pill-row,
.ticket .ticket-pill-row{
position:absolute!important;
top:12px!important;
right:12px!important;
z-index:200!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-end!important;
gap:6px!important;
height:32px!important;
min-height:32px!important;
max-height:32px!important;
width:auto!important;
margin:0!important;
padding:0!important;
transform:none!important;
pointer-events:none!important;
box-sizing:border-box!important;
}
/* This selector intentionally beats old `.ticket.needs-ack .timer` */
.ticket.needs-ack .ticket-pill-row .timer,
.ticket .ticket-pill-row .timer{
position:static!important;
inset:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
z-index:auto!important;
order:1!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-width:58px!important;
width:auto!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
padding:0 11px!important;
margin:0!important;
transform:none!important;
line-height:1!important;
box-sizing:border-box!important;
white-space:nowrap!important;
vertical-align:middle!important;
}
/* Restored old NEW pill design, high specificity */
.ticket.needs-ack .ticket-pill-row .fresh-order-pill,
.ticket .ticket-pill-row .fresh-order-pill{
position:static!important;
inset:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
z-index:auto!important;
order:2!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
width:auto!important;
min-width:0!important;
padding:5px 9px!important;
margin:0!important;
transform:none!important;
border-radius:999px!important;
background:linear-gradient(135deg,#ff006e,#ffd43b)!important;
color:#150008!important;
border:0!important;
font-size:.68rem!important;
font-weight:1000!important;
letter-spacing:.08em!important;
text-transform:uppercase!important;
line-height:1!important;
box-sizing:border-box!important;
white-space:nowrap!important;
vertical-align:middle!important;
box-shadow:0 0 18px rgba(255,0,110,.42)!important;
animation:diziNewBadgePop 1.05s ease-in-out infinite!important;
}
/* Hide only old direct duplicates, never children of the real row */
.ticket > .timer,
.ticket > .new-badge,
.ticket > .badge-new,
.ticket > [class*="new-badge"],
.ticket > [class*="newBadge"],
.ticket > .ticket-fresh-pill{
display:none!important;
}
/* Content room */
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:136px!important;
}
@media(max-width:720px){
.ticket.needs-ack .ticket-pill-row,
.ticket .ticket-pill-row{
top:12px!important;
right:12px!important;
height:31px!important;
min-height:31px!important;
max-height:31px!important;
gap:6px!important;
}
.ticket.needs-ack .ticket-pill-row .timer,
.ticket .ticket-pill-row .timer{
min-width:54px!important;
height:29px!important;
min-height:29px!important;
max-height:29px!important;
padding:0 10px!important;
}
.ticket.needs-ack .ticket-pill-row .fresh-order-pill,
.ticket .ticket-pill-row .fresh-order-pill{
padding:5px 9px!important;
font-size:.66rem!important;
}
.ticket-title,
.ticket .ticket-title,
.ticket-meta,
.prep-progress-row{
padding-right:122px!important;
}
}
/* v88 final polish: same-height NEW pill, centered checkboxes, clean prepared labels */
/* Same height as the timer while keeping the restored OLD NEW design */
.ticket.needs-ack .ticket-pill-row .fresh-order-pill,
.ticket .ticket-pill-row .fresh-order-pill{
height:30px!important;
min-height:30px!important;
max-height:30px!important;
padding:0 10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
box-sizing:border-box!important;
background:linear-gradient(135deg,#ff006e,#ffd43b)!important;
color:#150008!important;
border-radius:999px!important;
box-shadow:0 0 18px rgba(255,0,110,.42)!important;
animation:diziNewBadgePop 1.05s ease-in-out infinite!important;
}
/* Make the time and NEW exactly the same vertical box */
.ticket.needs-ack .ticket-pill-row .timer,
.ticket .ticket-pill-row .timer{
height:30px!important;
min-height:30px!important;
max-height:30px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
box-sizing:border-box!important;
}
/* Checkbox square must sit dead-centre in the item row */
.ticket .item{
align-items:center!important;
}
.ticket .item-check,
.ticket.needs-ack .item .item-check,
.ticket.acknowledged .item .item-check{
margin:0!important;
padding:0!important;
align-self:center!important;
justify-self:center!important;
display:grid!important;
place-items:center!important;
line-height:1!important;
text-align:center!important;
transform:none!important;
box-sizing:border-box!important;
}
.ticket .item-check::before,
.ticket .item-check::after{
line-height:1!important;
}
/* If checked, keep the tick itself visually centered */
.item-prepared .item-check{
display:grid!important;
place-items:center!important;
line-height:1!important;
}
/* Prepared row label spacing */
.prep-progress-row{
gap:12px!important;
column-gap:12px!important;
}
.prep-ticket-name{
margin-left:0!important;
padding-left:0!important;
}
/* Mobile: same height relationship */
@media(max-width:720px){
.ticket.needs-ack .ticket-pill-row .fresh-order-pill,
.ticket .ticket-pill-row .fresh-order-pill,
.ticket.needs-ack .ticket-pill-row .timer,
.ticket .ticket-pill-row .timer{
height:29px!important;
min-height:29px!important;
max-height:29px!important;
}
}
/* v89 Done-side meta spacing + generic server cleanup */
/* Add breathing room after COMPLETED / VOIDED before the name */
.ticket-meta .done-status-pill,
.done-status-pill{
margin-right:10px!important;
}
/* Keep done meta nicely aligned when pill + name are on the same line */
.ticket-meta{
display:flex!important;
align-items:center!important;
flex-wrap:wrap!important;
gap:0!important;
line-height:1.2!important;
}
/* The text after the pill should never appear glued to the pill */
.ticket-meta .done-status-pill + *{
margin-left:0!important;
}
/* If the browser wraps text nodes after the pill, this still creates visual separation */
.lane-done .done-status-pill{
margin-right:10px!important;
}
/* v90 Settings buttons + Staff Map cleanup */
.v77-settings-card{
width:min(720px,94vw)!important;
max-height:min(86vh,820px)!important;
overflow:auto!important;
border-radius:32px!important;
}
#staffMapSection{
display:block;
}
#staffMapSection.hidden{
display:none!important;
}
#staffMapSection .v77-staff-header{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:16px!important;
align-items:start!important;
padding-right:0!important;
margin-bottom:18px!important;
}
#staffMapSection .v77-staff-header h2{
margin:0 0 6px!important;
font-size:1.75rem!important;
letter-spacing:-.05em!important;
}
#staffMapSection .v77-staff-header .settings-subtitle{
display:block!important;
margin:0!important;
color:rgba(255,255,255,.62)!important;
font-weight:850!important;
line-height:1.35!important;
}
#closeStaffSectionBtn{
min-width:92px!important;
height:44px!important;
align-self:start!important;
}
.staff-lock-card{
display:grid!important;
gap:16px!important;
padding:18px!important;
border-radius:24px!important;
background:
radial-gradient(circle at top right,rgba(0,217,255,.08),transparent 44%),
linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 42px rgba(0,0,0,.22)!important;
}
.staff-lock-card.hidden{
display:none!important;
}
.staff-lock-card .lock-copy h3{
margin:0 0 6px!important;
font-size:1.1rem!important;
font-weight:1000!important;
}
.staff-lock-card .lock-copy p{
margin:0!important;
color:rgba(255,255,255,.62)!important;
font-weight:850!important;
}
.staff-pin-row{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:12px!important;
align-items:center!important;
}
.staff-pin-row input{
height:52px!important;
border-radius:18px!important;
text-align:center!important;
letter-spacing:.28em!important;
font-weight:1000!important;
}
.staff-pin-row .primary-btn{
height:52px!important;
padding:0 18px!important;
white-space:nowrap!important;
}
.staff-map-workspace{
display:grid!important;
gap:16px!important;
}
.staff-map-workspace.hidden{
display:none!important;
}
.staff-map-toolbar{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:14px!important;
padding:14px!important;
border-radius:22px!important;
background:rgba(0,0,0,.16)!important;
border:1px solid rgba(255,255,255,.10)!important;
}
.staff-map-toolbar h3{
margin:0 0 4px!important;
font-size:1.05rem!important;
}
.staff-map-toolbar p{
margin:0!important;
color:rgba(255,255,255,.56)!important;
font-size:.82rem!important;
font-weight:850!important;
}
.clean-staff-form,
.staff-map-form{
display:grid!important;
grid-template-columns:1.2fr 1fr auto auto!important;
gap:10px!important;
align-items:center!important;
padding:14px!important;
border-radius:22px!important;
background:rgba(255,255,255,.045)!important;
border:1px solid rgba(255,255,255,.10)!important;
}
.clean-staff-form input,
.clean-staff-form select,
.staff-map-form input,
.staff-map-form select{
height:46px!important;
min-width:0!important;
border-radius:16px!important;
}
.clean-staff-form button,
.staff-map-form button{
height:46px!important;
white-space:nowrap!important;
}
.recent-square-panel{
border-radius:22px!important;
background:rgba(0,0,0,.16)!important;
border:1px solid rgba(255,255,255,.10)!important;
overflow:hidden!important;
}
.recent-square-panel summary{
cursor:pointer!important;
padding:14px 16px!important;
font-weight:1000!important;
letter-spacing:.02em!important;
}
.staff-candidate-list{
padding:0 14px 14px!important;
}
#screenHealthModal.screen-health-modal{
z-index:10000!important;
}
@media(max-width:760px){
.staff-pin-row,
.clean-staff-form,
.staff-map-form{
grid-template-columns:1fr!important;
}
#staffMapSection .v77-staff-header{
grid-template-columns:1fr!important;
}
#closeStaffSectionBtn{
width:100%!important;
}
}
/* v91 long orders + Screen Health + Staff Map fixes */
/* Long order fix:
Keep Acknowledge/Done reachable by scrolling only the items area,
not letting a long ticket push the action button below the visible card. */
.lane-new .ticket{
display:flex!important;
flex-direction:column!important;
max-height:calc(100vh - 310px)!important;
overflow:hidden!important;
}
.lane-new .ticket .items{
overflow-y:auto!important;
overscroll-behavior:contain!important;
max-height:clamp(150px, 34vh, 390px)!important;
padding-right:6px!important;
margin-right:-2px!important;
scrollbar-width:thin!important;
}
.lane-new .ticket .items::-webkit-scrollbar{
width:8px!important;
}
.lane-new .ticket .items::-webkit-scrollbar-track{
background:rgba(255,255,255,.035)!important;
border-radius:999px!important;
}
.lane-new .ticket .items::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.18)!important;
border-radius:999px!important;
}
.lane-new .ticket .ticket-actions,
.lane-new .ticket .actions{
flex:0 0 auto!important;
position:relative!important;
z-index:30!important;
margin-top:12px!important;
}
/* For very long cards, keep note compact and visible above actions */
.lane-new .ticket .note{
flex:0 0 auto!important;
margin-top:10px!important;
}
/* Staff Map: when inside the Staff Map section, hide the global top-right Close.
This leaves only the Back button and removes the overlapping double-button look. */
#settingsModal.staff-map-mode .settings-top-close,
#settingsModal.staff-map-mode > .modal-card > #closeSettingsBtn{
display:none!important;
}
#settingsModal.staff-map-mode #closeStaffSectionBtn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
position:static!important;
z-index:5!important;
}
/* Make Staff Map card breathe better */
#staffMapSection .v77-staff-header{
align-items:center!important;
}
#staffMapSection .v77-staff-header h2{
line-height:1.05!important;
}
/* Screen Health must sit above Settings and always accept clicks */
#screenHealthModal.screen-health-modal,
#screenHealthModal{
z-index:20000!important;
}
#screenHealthModal:not(.hidden){
display:flex!important;
opacity:1!important;
pointer-events:auto!important;
}
/* Keep hidden modals actually hidden */
#screenHealthModal.hidden{
display:none!important;
pointer-events:none!important;
}
/* Tablet safety */
@media(max-width:900px){
.lane-new .ticket{
max-height:calc(100vh - 260px)!important;
}
.lane-new .ticket .items{
max-height:clamp(140px, 32vh, 330px)!important;
}
}
/* v92 item checks are disabled until acknowledged */
.ticket.needs-ack .item-check,
.item-not-checkable .item-check{
display:none!important;
}
.ticket .item-not-checkable{
cursor:default!important;
grid-template-columns:auto minmax(0,1fr)!important;
}
.ticket .item-not-checkable:hover{
border-color:rgba(255,255,255,.10)!important;
}
/* When checkable after acknowledge, use the 3-column layout with centered checkbox */
.ticket .item-checkable{
cursor:pointer!important;
grid-template-columns:auto auto minmax(0,1fr)!important;
}
.ticket .item-checkable .item-check{
display:grid!important;
place-items:center!important;
align-self:center!important;
justify-self:center!important;
margin:0!important;
padding:0!important;
}
/* v94 close icon buttons */
#closeSettingsBtn,
#closeScreenHealthBtn,
.close-x{
width:44px!important;
min-width:44px!important;
height:44px!important;
min-height:44px!important;
padding:0!important;
border-radius:999px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
font-size:1.55rem!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:0!important;
text-transform:none!important;
}
#closeSettingsBtn,
.settings-top-close{
position:absolute!important;
top:18px!important;
right:18px!important;
z-index:40!important;
}
/* Screen Health close button now matches other modals */
.v94-screen-health-card,
.screen-health-card{
position:relative!important;
padding-top:26px!important;
}
#closeScreenHealthBtn{
position:absolute!important;
top:18px!important;
right:18px!important;
z-index:60!important;
margin:0!important;
}
.screen-health-card .settings-header{
padding-right:62px!important;
}
.screen-health-card .health-actions{
position:static!important;
}
.screen-health-card .health-actions #closeScreenHealthBtn{
position:absolute!important;
top:18px!important;
right:18px!important;
}
/* Screen Health close / overlay behavior */
#screenHealthModal:not(.hidden){
display:flex!important;
pointer-events:auto!important;
z-index:20000!important;
}
#screenHealthModal.hidden{
display:none!important;
pointer-events:none!important;
}
/* v94 Performance cleanup.
The patch stack accumulated repeated animations, backdrop blurs and large animated shadows.
Keep the look, remove the constant repaint cost. */
.ticket *,
.lane *,
.modal *,
.settings-card *,
.screen-health-card *,
.ticket,
.lane,
.modal-card,
.settings-card,
.screen-health-card,
.service-escalation-banner,
.queue-summary-chip,
.fresh-order-pill,
.ticket-pill-row .fresh-order-pill,
.status-dot,
.loading-orb{
animation:none!important;
}
.modal-card,
.settings-card,
.screen-health-card,
.health-card,
.staff-health-section,
.health-hero,
.idle-chip,
.ticket,
.lane,
button,
input,
select{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
/* Reduce heavy repainting shadows */
.ticket,
.lane,
.modal-card,
.settings-card,
.screen-health-card{
box-shadow:
0 12px 26px rgba(0,0,0,.28),
inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.ticket.needs-ack,
.ticket.all-prepared{
box-shadow:
0 14px 30px rgba(0,0,0,.32),
0 0 16px rgba(255,0,110,.16),
inset 0 1px 0 rgba(255,255,255,.07)!important;
}
/* Keep NEW pill static and styled */
.ticket-pill-row .fresh-order-pill{
animation:none!important;
box-shadow:0 0 14px rgba(255,0,110,.34)!important;
}
/* Improve scrolling performance on long orders */
.lane-new .ticket .items{
will-change:scroll-position!important;
contain:content!important;
}
.ticket,
.item,
.lane{
contain:layout paint!important;
}
@media(max-width:720px){
#closeSettingsBtn,
.settings-top-close,
#closeScreenHealthBtn{
top:14px!important;
right:14px!important;
}
}
/* v95 final close icon enforcement */
#closeSettingsBtn,
#closeScreenHealthBtn{
font-size:0!important;
color:transparent!important;
overflow:hidden!important;
text-indent:0!important;
white-space:nowrap!important;
}
#closeSettingsBtn .close-icon-symbol,
#closeScreenHealthBtn .close-icon-symbol{
display:none!important;
}
#closeSettingsBtn::before,
#closeScreenHealthBtn::before{
content:"×"!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:100%!important;
color:rgba(255,255,255,.92)!important;
font-size:1.65rem!important;
font-weight:1000!important;
line-height:1!important;
text-indent:0!important;
}
#closeSettingsBtn:hover::before,
#closeScreenHealthBtn:hover::before{
color:#fff!important;
}
/* v96 Gemini performance audit fix: timers must never use backdrop-filter */
.timer,
.ticket-pill-row .timer{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
/* v99 GPU Overheat & Hover Lag Nuke */
/* 1. Kill full-screen modal backdrop blurs completely.
Blurring the entire DOM behind the modal while things animate inside it
causes massive composite rendering lag on tablets. */
.settings-modal,
.screen-health-modal,
#screenHealthModal,
.audio-unlock-overlay,
.alert-overlay,
#settingsModal,
#audioUnlockOverlay {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
/* Make the background darker to compensate for removing the blur */
background: rgba(8, 3, 14, 0.95) !important;
}
/* 2. Fix the Settings Buttons Hover Lag.
Animating linear-gradients and massive box-shadows causes CPU repaints. */
.settings-tile {
transition: transform 0.1s ease, border-color 0.1s ease !important;
}
.settings-tile:hover {
/* Stop the background and shadow swap. Only use hardware-accelerated transforms */
transform: translateY(-2px) !important;
border-color: rgba(0, 217, 255, 0.50) !important;
/* Lock the background and shadow to their default un-hovered states */
background: linear-gradient(180deg, rgba(255,255,255,.082), rgba(255,255,255,.035)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.20) !important;
}
/* 3. Disable the sliding "sheen" animation on the tiles entirely */
.settings-tile::before,
.settings-tile:hover::before {
display: none !important;
animation: none !important;
transition: none !important;
}
/* 4. Ensure standard app buttons don't trigger CSS filter repaints on hover */
button,
.ghost-btn,
.primary-btn {
transition: transform 0.1s ease, opacity 0.1s ease !important;
}
button:hover,
.ghost-btn:hover,
.primary-btn:hover {
filter: none !important;
opacity: 0.85 !important;
}
/* Extra v99 safety for this patched KDS stack:
Stop older patch blocks from reintroducing hover glows/animated pseudo elements
inside Settings and Screen Health. */
.settings-card button::before,
.settings-card button::after,
.screen-health-card button::before,
.screen-health-card button::after,
.settings-menu-grid button::before,
.settings-menu-grid button::after {
animation: none !important;
transition: none !important;
}
.settings-card button:hover,
.screen-health-card button:hover,
.settings-menu-grid button:hover {
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Keep modal backgrounds opaque/static to avoid recompositing the page behind them. */
#settingsModal:not(.hidden),
#screenHealthModal:not(.hidden) {
background: rgba(8, 3, 14, 0.95) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* v100 Event Delegation + Paint Containment Fix */
/* Remove paint containment from high-interaction areas.
`contain: paint` was forcing layer isolation and causing mouse/hover jitter
on some tablets/older GPUs. */
.ticket,
.item,
.lane {
contain: layout !important;
will-change: transform !important;
}
/* Do not isolate every nested item while the mouse moves across the Settings UI. */
.settings-card,
.settings-card *,
.screen-health-card,
.screen-health-card * {
contain: none !important;
}
/* Keep v99 hover simplification intact and ensure no filter/blur hover repaint. */
.settings-tile:hover,
.settings-card button:hover,
.screen-health-card button:hover,
button:hover,
.ghost-btn:hover,
.primary-btn:hover {
filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Keep modal overlays static/opaque. */
#settingsModal:not(.hidden),
#screenHealthModal:not(.hidden) {
background: rgba(8, 3, 14, 0.95) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* v101 Long orders: fit everything on screen, no inner ticket scroll */
/* Remove v91 internal item-list scrolling. The ticket itself should show everything. */
.lane-new .ticket,
.lane-new .ticket.long-order,
.lane-new .ticket.mega-order,
.lane-new .ticket.ultra-order{
max-height:none!important;
overflow:visible!important;
display:flex!important;
flex-direction:column!important;
}
.lane-new .ticket .items,
.lane-new .ticket.long-order .items,
.lane-new .ticket.mega-order .items,
.lane-new .ticket.ultra-order .items{
max-height:none!important;
overflow:visible!important;
padding-right:0!important;
margin-right:0!important;
scrollbar-width:none!important;
}
.lane-new .ticket .items::-webkit-scrollbar{
display:none!important;
}
/* Compact mode kicks in automatically by item count. */
.ticket.long-order{
padding:14px!important;
gap:8px!important;
}
.ticket.long-order .ticket-title{
font-size:1.05rem!important;
line-height:1.08!important;
margin-bottom:2px!important;
}
.ticket.long-order .prep-progress-row{
margin:5px 0 6px!important;
min-height:25px!important;
}
.ticket.long-order .prep-progress{
height:25px!important;
min-height:25px!important;
padding:0 8px!important;
font-size:.60rem!important;
}
.ticket.long-order .item{
min-height:0!important;
padding:6px 8px!important;
border-radius:14px!important;
gap:7px!important;
}
.ticket.long-order .item-qty{
min-width:28px!important;
height:28px!important;
font-size:.82rem!important;
border-radius:10px!important;
}
.ticket.long-order .item-name{
font-size:.88rem!important;
line-height:1.08!important;
}
.ticket.long-order .mods{
font-size:.70rem!important;
line-height:1.12!important;
margin-top:2px!important;
}
.ticket.long-order .item-check{
width:24px!important;
height:24px!important;
border-radius:8px!important;
}
.ticket.long-order .ticket-actions,
.ticket.long-order .actions{
margin-top:7px!important;
}
.ticket.long-order .ticket-actions button,
.ticket.long-order .actions button{
min-height:42px!important;
height:42px!important;
}
/* Mega order: tighter again. */
.ticket.mega-order{
padding:12px!important;
}
.ticket.mega-order .ticket-title{
font-size:.98rem!important;
}
.ticket.mega-order .item{
padding:4px 7px!important;
border-radius:12px!important;
gap:6px!important;
}
.ticket.mega-order .item-qty{
min-width:25px!important;
height:25px!important;
font-size:.76rem!important;
}
.ticket.mega-order .item-name{
font-size:.80rem!important;
line-height:1.04!important;
}
.ticket.mega-order .mods{
font-size:.64rem!important;
line-height:1.06!important;
}
.ticket.mega-order .item-check{
width:22px!important;
height:22px!important;
border-radius:7px!important;
}
.ticket.mega-order .prep-progress-row{
margin:4px 0 5px!important;
}
.ticket.mega-order .ticket-actions button,
.ticket.mega-order .actions button{
min-height:38px!important;
height:38px!important;
font-size:.78rem!important;
}
/* Ultra order: absolute emergency compact mode for very long orders. */
.ticket.ultra-order{
padding:10px!important;
}
.ticket.ultra-order .ticket-pill-row{
transform:scale(.88)!important;
transform-origin:top right!important;
}
.ticket.ultra-order .ticket-title{
font-size:.90rem!important;
padding-right:118px!important;
}
.ticket.ultra-order .prep-progress-row{
margin:3px 0 4px!important;
padding-right:118px!important;
}
.ticket.ultra-order .prep-progress{
height:22px!important;
min-height:22px!important;
font-size:.54rem!important;
padding:0 7px!important;
}
.ticket.ultra-order .prep-ticket-name{
font-size:.68rem!important;
}
.ticket.ultra-order .item{
padding:3px 6px!important;
border-radius:10px!important;
gap:5px!important;
}
.ticket.ultra-order .item-qty{
min-width:22px!important;
height:22px!important;
font-size:.68rem!important;
border-radius:7px!important;
}
.ticket.ultra-order .item-name{
font-size:.72rem!important;
line-height:1.0!important;
}
.ticket.ultra-order .mods{
font-size:.58rem!important;
line-height:1.0!important;
margin-top:1px!important;
}
.ticket.ultra-order .item-check{
width:19px!important;
height:19px!important;
border-radius:6px!important;
font-size:.72rem!important;
}
.ticket.ultra-order .ticket-actions,
.ticket.ultra-order .actions{
margin-top:5px!important;
}
.ticket.ultra-order .ticket-actions button,
.ticket.ultra-order .actions button{
min-height:34px!important;
height:34px!important;
font-size:.70rem!important;
border-radius:14px!important;
}
/* Keep active lane usable and avoid a nested scroll-box look. */
.lane-new{
overflow:visible!important;
}
/* If there is more than one active ticket, still avoid inner scrolling;
the page/lane can naturally grow instead of hiding the button inside a tiny box. */
.board,
.lanes,
.kds-board{
overflow:visible!important;
}
/* v102 Readable Long Orders
Keep order text large enough for staff.
Instead of shrinking everything too much, use smarter spacing and 2-column item layout
for very long tickets. */
/* Base active ticket readability */
.lane-new .ticket .item-name{
font-size:1.02rem!important;
line-height:1.15!important;
font-weight:950!important;
}
.lane-new .ticket .item-qty{
font-size:.92rem!important;
font-weight:1000!important;
}
.lane-new .ticket .mods{
font-size:.78rem!important;
line-height:1.16!important;
}
/* Long order: still readable, just tighter */
.ticket.long-order{
padding:15px!important;
gap:9px!important;
}
.ticket.long-order .ticket-title{
font-size:1.10rem!important;
line-height:1.12!important;
}
.ticket.long-order .item{
padding:7px 9px!important;
gap:8px!important;
border-radius:14px!important;
}
.ticket.long-order .item-name{
font-size:1.00rem!important;
line-height:1.12!important;
}
.ticket.long-order .mods{
font-size:.76rem!important;
line-height:1.12!important;
}
.ticket.long-order .item-qty{
min-width:30px!important;
height:30px!important;
font-size:.88rem!important;
}
.ticket.long-order .item-check{
width:25px!important;
height:25px!important;
}
/* Mega/Ultra orders: use 2 columns instead of tiny text */
.ticket.mega-order .items,
.ticket.ultra-order .items{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
align-items:start!important;
}
.ticket.mega-order .item,
.ticket.ultra-order .item{
min-width:0!important;
padding:7px 8px!important;
gap:7px!important;
border-radius:13px!important;
}
.ticket.mega-order .item-name,
.ticket.ultra-order .item-name{
font-size:.94rem!important;
line-height:1.10!important;
font-weight:950!important;
}
.ticket.mega-order .mods,
.ticket.ultra-order .mods{
font-size:.70rem!important;
line-height:1.08!important;
}
.ticket.mega-order .item-qty,
.ticket.ultra-order .item-qty{
min-width:28px!important;
height:28px!important;
font-size:.82rem!important;
border-radius:9px!important;
}
.ticket.mega-order .item-check,
.ticket.ultra-order .item-check{
width:23px!important;
height:23px!important;
}
/* Keep the title/prep readable on very long tickets */
.ticket.mega-order .ticket-title,
.ticket.ultra-order .ticket-title{
font-size:1.02rem!important;
line-height:1.10!important;
padding-right:132px!important;
}
.ticket.mega-order .prep-progress-row,
.ticket.ultra-order .prep-progress-row{
margin:5px 0 7px!important;
padding-right:132px!important;
}
.ticket.mega-order .prep-progress,
.ticket.ultra-order .prep-progress{
height:27px!important;
min-height:27px!important;
font-size:.62rem!important;
padding:0 9px!important;
}
.ticket.mega-order .prep-ticket-name,
.ticket.ultra-order .prep-ticket-name{
font-size:.80rem!important;
}
/* Do not crush the action buttons */
.ticket.long-order .ticket-actions button,
.ticket.long-order .actions button,
.ticket.mega-order .ticket-actions button,
.ticket.mega-order .actions button,
.ticket.ultra-order .ticket-actions button,
.ticket.ultra-order .actions button{
min-height:42px!important;
height:42px!important;
font-size:.82rem!important;
border-radius:16px!important;
}
/* Give extremely long orders a little more vertical room, but still no internal scroll */
.ticket.ultra-order{
padding:12px!important;
}
/* On narrower screens, drop back to one readable column instead of tiny text */
@media(max-width:900px){
.ticket.mega-order .items,
.ticket.ultra-order .items{
grid-template-columns:1fr!important;
}
.ticket.mega-order .item-name,
.ticket.ultra-order .item-name{
font-size:.96rem!important;
}
}
/* On the actual KDS display size, prioritize readability over squeezing too hard */
@media(min-width:1100px){
.ticket.mega-order .item-name,
.ticket.ultra-order .item-name{
font-size:.98rem!important;
}
.ticket.mega-order .mods,
.ticket.ultra-order .mods{
font-size:.72rem!important;
}
}
/* v103 Bigger Order Text - staff visibility priority
Make active order text easier to read from farther away.
Keeps v101/v102 long-order fitting behavior, but stops shrinking too aggressively. */
/* Active ticket overall readability */
.lane-new .ticket{
padding:18px!important;
}
.lane-new .ticket-title,
.lane-new .ticket .ticket-title{
font-size:1.28rem!important;
line-height:1.12!important;
font-weight:1000!important;
letter-spacing:-.035em!important;
}
/* Main item text much larger */
.lane-new .ticket .item-name{
font-size:1.20rem!important;
line-height:1.15!important;
font-weight:1000!important;
letter-spacing:-.015em!important;
}
.lane-new .ticket .mods{
font-size:.92rem!important;
line-height:1.18!important;
font-weight:850!important;
color:rgba(255,255,255,.72)!important;
}
/* Quantity bubble larger and clearer */
.lane-new .ticket .item-qty{
min-width:38px!important;
height:38px!important;
padding:0 10px!important;
font-size:1.04rem!important;
font-weight:1000!important;
border-radius:13px!important;
}
/* Item rows: larger but still compact */
.lane-new .ticket .item{
padding:10px 12px!important;
gap:10px!important;
border-radius:16px!important;
min-height:48px!important;
}
/* Checkbox bigger and centered */
.lane-new .ticket .item-check{
width:30px!important;
height:30px!important;
border-radius:10px!important;
font-size:1rem!important;
}
/* Prepared row and pills more readable */
.lane-new .prep-progress-row{
margin:8px 0 10px!important;
gap:12px!important;
}
.lane-new .prep-progress{
height:31px!important;
min-height:31px!important;
padding:0 11px!important;
font-size:.72rem!important;
}
.lane-new .prep-ticket-name{
font-size:.96rem!important;
font-weight:950!important;
}
/* Action buttons easier to see/tap */
.lane-new .ticket-actions button,
.lane-new .actions button{
min-height:50px!important;
height:50px!important;
font-size:.98rem!important;
font-weight:1000!important;
border-radius:18px!important;
}
/* Long orders stay readable - no tiny text */
.ticket.long-order .ticket-title{
font-size:1.20rem!important;
}
.ticket.long-order .item{
padding:8px 10px!important;
gap:9px!important;
}
.ticket.long-order .item-name{
font-size:1.12rem!important;
line-height:1.12!important;
}
.ticket.long-order .mods{
font-size:.84rem!important;
line-height:1.12!important;
}
.ticket.long-order .item-qty{
min-width:34px!important;
height:34px!important;
font-size:.96rem!important;
}
.ticket.long-order .item-check{
width:27px!important;
height:27px!important;
}
/* Mega/Ultra orders: use two columns but keep text readable */
.ticket.mega-order .items,
.ticket.ultra-order .items{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.ticket.mega-order .ticket-title,
.ticket.ultra-order .ticket-title{
font-size:1.12rem!important;
line-height:1.10!important;
}
.ticket.mega-order .item,
.ticket.ultra-order .item{
padding:7px 9px!important;
gap:7px!important;
border-radius:13px!important;
}
.ticket.mega-order .item-name,
.ticket.ultra-order .item-name{
font-size:1.02rem!important;
line-height:1.08!important;
font-weight:1000!important;
}
.ticket.mega-order .mods,
.ticket.ultra-order .mods{
font-size:.76rem!important;
line-height:1.08!important;
}
.ticket.mega-order .item-qty,
.ticket.ultra-order .item-qty{
min-width:31px!important;
height:31px!important;
font-size:.88rem!important;
border-radius:10px!important;
}
.ticket.mega-order .item-check,
.ticket.ultra-order .item-check{
width:25px!important;
height:25px!important;
}
/* Keep action buttons readable on long orders too */
.ticket.long-order .ticket-actions button,
.ticket.long-order .actions button,
.ticket.mega-order .ticket-actions button,
.ticket.mega-order .actions button,
.ticket.ultra-order .ticket-actions button,
.ticket.ultra-order .actions button{
min-height:46px!important;
height:46px!important;
font-size:.92rem!important;
border-radius:17px!important;
}
/* Done side: keep readable but slightly smaller than active */
.lane-done .ticket .item-name{
font-size:1.02rem!important;
line-height:1.14!important;
}
.lane-done .ticket .item-qty{
min-width:32px!important;
height:32px!important;
font-size:.90rem!important;
}
.lane-done .ticket-title{
font-size:1.08rem!important;
}
/* If tablet/narrow screen cannot fit two columns, keep single column but still readable */
@media(max-width:900px){
.ticket.mega-order .items,
.ticket.ultra-order .items{
grid-template-columns:1fr!important;
}
.lane-new .ticket .item-name{
font-size:1.12rem!important;
}
.ticket.mega-order .item-name,
.ticket.ultra-order .item-name{
font-size:1.05rem!important;
}
}
/* Larger displays behind the bar can handle slightly bigger text */
@media(min-width:1280px){
.lane-new .ticket .item-name{
font-size:1.26rem!important;
}
.lane-new .ticket-title{
font-size:1.34rem!important;
}
.ticket.mega-order .item-name,
.ticket.ultra-order .item-name{
font-size:1.08rem!important;
}
}
/* v104 La Última Ronda neon queue borders
Brand-colour borders for Active and Done queues.
Static gradients only - no animations/blur filters, so it stays performance safe. */
.lane-new,
.active-lane,
#activeLane,
[data-lane="new"]{
position:relative!important;
border:1px solid rgba(255,0,110,.55)!important;
background:
linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.025)),
radial-gradient(circle at top left,rgba(255,0,110,.16),transparent 34%),
radial-gradient(circle at bottom right,rgba(0,217,255,.12),transparent 36%)!important;
box-shadow:
0 0 0 1px rgba(0,217,255,.12),
0 0 28px rgba(255,0,110,.13),
0 0 34px rgba(0,217,255,.08),
inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.lane-done,
.done-lane,
#doneLane,
[data-lane="done"]{
position:relative!important;
border:1px solid rgba(0,217,255,.46)!important;
background:
linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.022)),
radial-gradient(circle at top right,rgba(0,217,255,.14),transparent 34%),
radial-gradient(circle at bottom left,rgba(255,212,59,.10),transparent 36%)!important;
box-shadow:
0 0 0 1px rgba(255,212,59,.10),
0 0 24px rgba(0,217,255,.12),
0 0 26px rgba(255,212,59,.06),
inset 0 1px 0 rgba(255,255,255,.07)!important;
}
/* Neon top edge accent, cheap/static */
.lane-new::before,
.active-lane::before,
#activeLane::before,
[data-lane="new"]::before,
.lane-done::before,
.done-lane::before,
#doneLane::before,
[data-lane="done"]::before{
content:""!important;
position:absolute!important;
left:18px!important;
right:18px!important;
top:0!important;
height:2px!important;
border-radius:999px!important;
pointer-events:none!important;
}
.lane-new::before,
.active-lane::before,
#activeLane::before,
[data-lane="new"]::before{
background:linear-gradient(90deg,#ff006e,#ffd43b,#00d9ff)!important;
box-shadow:0 0 14px rgba(255,0,110,.38)!important;
}
.lane-done::before,
.done-lane::before,
#doneLane::before,
[data-lane="done"]::before{
background:linear-gradient(90deg,#00d9ff,#00ff9d,#ffd43b)!important;
box-shadow:0 0 14px rgba(0,217,255,.32)!important;
}
/* Header labels pick up the brand glow without moving layout */
.lane-new .lane-title,
.lane-new .lane-header h2,
.active-lane .lane-title,
.active-lane .lane-header h2{
color:#fff!important;
text-shadow:
0 0 14px rgba(255,0,110,.32),
0 0 18px rgba(0,217,255,.18)!important;
}
.lane-done .lane-title,
.lane-done .lane-header h2,
.done-lane .lane-title,
.done-lane .lane-header h2{
color:#fff!important;
text-shadow:
0 0 14px rgba(0,217,255,.28),
0 0 18px rgba(255,212,59,.12)!important;
}
/* Keep v99/v100 performance safety: no animated borders, no backdrop filters. */
.lane-new,
.lane-done,
.active-lane,
.done-lane{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
animation:none!important;
}
/* v105 Clean Matching Neon Queue Borders
Fixes v104 artifacts:
- removes the strange top-left/top-right boxed line artifacts
- removes separate top neon pseudo-stripes
- gives Active and Done the same clean La Última Ronda neon border language
- static/performance-safe, no blur or animated gradients
*/
/* Kill the v104 pseudo top bars completely */
.lane-new::before,
.active-lane::before,
#activeLane::before,
[data-lane="new"]::before,
.lane-done::before,
.done-lane::before,
#doneLane::before,
[data-lane="done"]::before{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
box-shadow:none!important;
background:none!important;
}
/* Same La Última Ronda neon border treatment for BOTH queue panels */
.lane-new,
.active-lane,
#activeLane,
[data-lane="new"],
.lane-done,
.done-lane,
#doneLane,
[data-lane="done"]{
position:relative!important;
border:1px solid rgba(0,217,255,.50)!important;
outline:1px solid rgba(255,0,110,.30)!important;
outline-offset:-2px!important;
background:
linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.020)),
radial-gradient(circle at top left,rgba(255,0,110,.105),transparent 35%),
radial-gradient(circle at top right,rgba(0,217,255,.105),transparent 35%),
radial-gradient(circle at bottom center,rgba(255,212,59,.055),transparent 42%)!important;
box-shadow:
0 0 0 1px rgba(255,255,255,.025),
0 0 22px rgba(0,217,255,.13),
0 0 24px rgba(255,0,110,.10),
inset 0 1px 0 rgba(255,255,255,.07)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
animation:none!important;
overflow:hidden!important;
}
/* Prevent header separator lines from looking like extra boxed borders */
.lane-new .lane-header,
.active-lane .lane-header,
#activeLane .lane-header,
[data-lane="new"] .lane-header,
.lane-done .lane-header,
.done-lane .lane-header,
#doneLane .lane-header,
[data-lane="done"] .lane-header{
border-bottom:1px solid rgba(255,255,255,.075)!important;
box-shadow:none!important;
background:rgba(0,0,0,.10)!important;
}
/* Same title glow on both panels */
.lane-new .lane-title,
.lane-new .lane-header h2,
.active-lane .lane-title,
.active-lane .lane-header h2,
.lane-done .lane-title,
.lane-done .lane-header h2,
.done-lane .lane-title,
.done-lane .lane-header h2{
color:#fff!important;
text-shadow:
0 0 12px rgba(0,217,255,.24),
0 0 14px rgba(255,0,110,.18)!important;
}
/* Keep count pills matching the same brand border */
.lane-new .lane-count,
.active-lane .lane-count,
#activeLane .lane-count,
.lane-done .lane-count,
.done-lane .lane-count,
#doneLane .lane-count{
border:1px solid rgba(0,217,255,.22)!important;
box-shadow:
0 0 10px rgba(0,217,255,.10),
inset 0 1px 0 rgba(255,255,255,.08)!important;
}
/* Remove any v104/v105 border-image or pseudo leftovers if future CSS tries to apply them */
.lane-new *,
.lane-done *{
border-image:none!important;
}
/* v106 Loading-card matching neon queue frames
Uses the same La Última Ronda frame language as the loading card:
dark glass panel + magenta/cyan border + soft magenta/cyan glow.
No top pseudo-stripes, no weird corner boxes, no animated gradient borders.
*/
/* Permanently kill v104/v105 pseudo line artifacts */
.lane-new::before,
.lane-new::after,
.active-lane::before,
.active-lane::after,
#activeLane::before,
#activeLane::after,
[data-lane="new"]::before,
[data-lane="new"]::after,
.lane-done::before,
.lane-done::after,
.done-lane::before,
.done-lane::after,
#doneLane::before,
#doneLane::after,
[data-lane="done"]::before,
[data-lane="done"]::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
background:none!important;
box-shadow:none!important;
border:0!important;
}
/* Both queue panels get the SAME neon frame as the loading box */
.lane-new,
.active-lane,
#activeLane,
[data-lane="new"],
.lane-done,
.done-lane,
#doneLane,
[data-lane="done"]{
position:relative!important;
overflow:hidden!important;
/* same clean thin neon edge */
border:1px solid rgba(255,0,110,.48)!important;
outline:1px solid rgba(0,217,255,.34)!important;
outline-offset:-1px!important;
/* same dark glass base; no huge blue/green wash */
background:
linear-gradient(180deg,rgba(18,20,34,.96),rgba(8,9,18,.97))!important;
/* same loading-card-style glow: pink left/bottom + cyan right/top */
box-shadow:
0 0 0 1px rgba(255,255,255,.035),
0 0 26px rgba(255,0,110,.18),
0 0 28px rgba(0,217,255,.13),
inset 0 1px 0 rgba(255,255,255,.075),
inset 0 0 34px rgba(255,0,110,.035),
inset 0 0 34px rgba(0,217,255,.030)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
animation:none!important;
border-image:none!important;
}
/* Add a subtle static internal La Última Ronda colour wash without changing the border shape */
.lane-new,
.active-lane,
#activeLane,
[data-lane="new"]{
background:
radial-gradient(circle at 0% 0%,rgba(255,0,110,.105),transparent 38%),
radial-gradient(circle at 100% 0%,rgba(0,217,255,.075),transparent 38%),
linear-gradient(180deg,rgba(18,20,34,.96),rgba(8,9,18,.97))!important;
}
.lane-done,
.done-lane,
#doneLane,
[data-lane="done"]{
background:
radial-gradient(circle at 0% 0%,rgba(255,0,110,.085),transparent 38%),
radial-gradient(circle at 100% 0%,rgba(0,217,255,.095),transparent 38%),
linear-gradient(180deg,rgba(18,20,34,.96),rgba(8,9,18,.97))!important;
}
/* Keep the header clean - no fake second border line */
.lane-new .lane-header,
.active-lane .lane-header,
#activeLane .lane-header,
[data-lane="new"] .lane-header,
.lane-done .lane-header,
.done-lane .lane-header,
#doneLane .lane-header,
[data-lane="done"] .lane-header{
border-bottom:1px solid rgba(255,255,255,.08)!important;
background:rgba(0,0,0,.10)!important;
box-shadow:none!important;
}
/* Same text glow as the loading text family: white with cyan/pink glow */
.lane-new .lane-title,
.lane-new .lane-header h2,
.active-lane .lane-title,
.active-lane .lane-header h2,
.lane-done .lane-title,
.lane-done .lane-header h2,
.done-lane .lane-title,
.done-lane .lane-header h2{
color:#fff!important;
text-shadow:
0 0 10px rgba(0,217,255,.24),
0 0 13px rgba(255,0,110,.18)!important;
}
/* Count pills match the frame, but don't create extra boxes or lines */
.lane-new .lane-count,
.active-lane .lane-count,
#activeLane .lane-count,
.lane-done .lane-count,
.done-lane .lane-count,
#doneLane .lane-count{
border:1px solid rgba(0,217,255,.20)!important;
outline:1px solid rgba(255,0,110,.12)!important;
outline-offset:-1px!important;
box-shadow:
0 0 10px rgba(0,217,255,.08),
inset 0 1px 0 rgba(255,255,255,.08)!important;
background:rgba(255,255,255,.055)!important;
}
/* Remove inherited border-image from nested content without flattening needed item borders */
.lane-new,
.lane-done,
.active-lane,
.done-lane,
#activeLane,
#doneLane{
border-image:none!important;
}
/* v107 Strong Loading-card Neon Frames
The previous frame was too subtle and grey-looking.
This version uses the same high-saturation La Última Ronda loading-card colour family directly:
#ff006e hot pink, #00d9ff cyan, #ffd43b yellow.
It colours the actual queue border, not a faint outline.
*/
/* Kill all earlier pseudo-artifact frame lines */
.lane-new::before,
.lane-new::after,
.active-lane::before,
.active-lane::after,
#activeLane::before,
#activeLane::after,
[data-lane="new"]::before,
[data-lane="new"]::after,
.lane-done::before,
.lane-done::after,
.done-lane::before,
.done-lane::after,
#doneLane::before,
#doneLane::after,
[data-lane="done"]::before,
[data-lane="done"]::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
background:none!important;
box-shadow:none!important;
border:0!important;
}
/* Apply the SAME obvious La Última Ronda neon frame to BOTH queue panels */
.lane-new,
.active-lane,
#activeLane,
[data-lane="new"],
.lane-done,
.done-lane,
#doneLane,
[data-lane="done"]{
position:relative!important;
overflow:hidden!important;
/* Make the actual border visibly neon */
border:2px solid transparent!important;
border-image:linear-gradient(135deg,#ff006e 0%,#ffd43b 48%,#00d9ff 100%) 1!important;
outline:none!important;
/* Dark loading-card style base so the coloured frame pops */
background:
radial-gradient(circle at 12% 0%,rgba(255,0,110,.14),transparent 36%),
radial-gradient(circle at 88% 0%,rgba(0,217,255,.13),transparent 38%),
radial-gradient(circle at 50% 100%,rgba(255,212,59,.07),transparent 44%),
linear-gradient(180deg,rgba(18,20,34,.98),rgba(6,7,15,.985))!important;
/* Static glow matching the loading card neon colour family */
box-shadow:
0 0 0 1px rgba(255,255,255,.035),
0 0 18px rgba(255,0,110,.24),
0 0 22px rgba(0,217,255,.20),
0 0 28px rgba(255,212,59,.055),
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 0 28px rgba(255,0,110,.055),
inset 0 0 30px rgba(0,217,255,.045)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
animation:none!important;
}
/* Preserve rounded corners while using a visible border-image */
.lane-new,
.active-lane,
#activeLane,
[data-lane="new"],
.lane-done,
.done-lane,
#doneLane,
[data-lane="done"]{
border-radius:28px!important;
}
/* Header separator should stay subtle and not look like a second frame */
.lane-new .lane-header,
.active-lane .lane-header,
#activeLane .lane-header,
[data-lane="new"] .lane-header,
.lane-done .lane-header,
.done-lane .lane-header,
#doneLane .lane-header,
[data-lane="done"] .lane-header{
border-bottom:1px solid rgba(255,255,255,.08)!important;
background:rgba(0,0,0,.09)!important;
box-shadow:none!important;
}
/* Count pills now pick up the SAME neon family */
.lane-new .lane-count,
.active-lane .lane-count,
#activeLane .lane-count,
.lane-done .lane-count,
.done-lane .lane-count,
#doneLane .lane-count{
border:1px solid rgba(0,217,255,.42)!important;
outline:1px solid rgba(255,0,110,.24)!important;
outline-offset:-1px!important;
background:rgba(255,255,255,.060)!important;
box-shadow:
0 0 10px rgba(0,217,255,.16),
0 0 12px rgba(255,0,110,.10),
inset 0 1px 0 rgba(255,255,255,.10)!important;
}
/* Make the title glow use the same loading-card colours too */
.lane-new .lane-title,
.lane-new .lane-header h2,
.active-lane .lane-title,
.active-lane .lane-header h2,
.lane-done .lane-title,
.lane-done .lane-header h2,
.done-lane .lane-title,
.done-lane .lane-header h2{
color:#fff!important;
text-shadow:
0 0 10px rgba(0,217,255,.34),
0 0 13px rgba(255,0,110,.22),
0 0 16px rgba(255,212,59,.08)!important;
}
/* On browsers where border-image + border-radius render badly,
this fallback still gives obvious neon frame colour through inset shadows. */
@supports not (border-image:linear-gradient(135deg,#ff006e,#ffd43b,#00d9ff) 1){
.lane-new,
.active-lane,
#activeLane,
[data-lane="new"],
.lane-done,
.done-lane,
#doneLane,
[data-lane="done"]{
border:2px solid rgba(0,217,255,.72)!important;
box-shadow:
0 0 0 1px rgba(255,0,110,.58),
0 0 20px rgba(255,0,110,.24),
0 0 24px rgba(0,217,255,.20),
inset 0 0 0 1px rgba(255,212,59,.16)!important;
}
}
/* v108 Rounded Loading-card Neon Queue Frames
Fixes v107 square corners by removing border-image.
Uses background-clip gradient border instead, so the neon frame follows the rounded corners.
Also restores the dark loading-card style panel background. */
/* No pseudo top/corner artifacts */
.lane-new::before,
.lane-new::after,
.active-lane::before,
.active-lane::after,
#activeLane::before,
#activeLane::after,
[data-lane="new"]::before,
[data-lane="new"]::after,
.lane-done::before,
.lane-done::after,
.done-lane::before,
.done-lane::after,
#doneLane::before,
#doneLane::after,
[data-lane="done"]::before,
[data-lane="done"]::after{
content:none!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
background:none!important;
box-shadow:none!important;
border:0!important;
}
/* Rounded neon frame using the same loading-card colours */
.lane-new,
.active-lane,
#activeLane,
[data-lane="new"],
.lane-done,
.done-lane,
#doneLane,
[data-lane="done"]{
position:relative!important;
overflow:hidden!important;
border-radius:28px!important;
/* This is the important part:
transparent border + two background layers = real rounded neon frame. */
border:2px solid transparent!important;
border-image:none!important;
outline:none!important;
background:
radial-gradient(circle at 14% 0%,rgba(255,0,110,.15),transparent 36%) padding-box,
radial-gradient(circle at 86% 0%,rgba(0,217,255,.13),transparent 38%) padding-box,
radial-gradient(circle at 50% 100%,rgba(255,212,59,.075),transparent 44%) padding-box,
linear-gradient(180deg,rgba(18,20,34,.985),rgba(6,7,15,.99)) padding-box,
linear-gradient(135deg,#ff006e 0%,#ffd43b 48%,#00d9ff 100%) border-box!important;
box-shadow:
0 0 0 1px rgba(255,255,255,.035),
0 0 18px rgba(255,0,110,.24),
0 0 22px rgba(0,217,255,.20),
0 0 28px rgba(255,212,59,.055),
inset 0 1px 0 rgba(255,255,255,.08),
inset 0 0 28px rgba(255,0,110,.055),
inset 0 0 30px rgba(0,217,255,.045)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
animation:none!important;
}
/* Keep the large inner empty/order area rounded and visibly separate */
.lane-new .empty-state,
.active-lane .empty-state,
#activeLane .empty-state,
[data-lane="new"] .empty-state,
.lane-done .empty-state,
.done-lane .empty-state,
#doneLane .empty-state,
[data-lane="done"] .empty-state{
border-radius:24px!important;
background:
radial-gradient(circle at 20% 20%,rgba(0,217,255,.10),transparent 34%),
radial-gradient(circle at 80% 20%,rgba(255,0,110,.08),transparent 34%),
linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.020))!important;
}
/* Header separator stays subtle and rounded within the frame */
.lane-new .lane-header,
.active-lane .lane-header,
#activeLane .lane-header,
[data-lane="new"] .lane-header,
.lane-done .lane-header,
.done-lane .lane-header,
#doneLane .lane-header,
[data-lane="done"] .lane-header{
border-bottom:1px solid rgba(255,255,255,.08)!important;
background:rgba(0,0,0,.10)!important;
box-shadow:none!important;
}
/* Same loading-card neon glow on labels/counts */
.lane-new .lane-title,
.lane-new .lane-header h2,
.active-lane .lane-title,
.active-lane .lane-header h2,
.lane-done .lane-title,
.lane-done .lane-header h2,
.done-lane .lane-title,
.done-lane .lane-header h2{
color:#fff!important;
text-shadow:
0 0 10px rgba(0,217,255,.34),
0 0 13px rgba(255,0,110,.22),
0 0 16px rgba(255,212,59,.08)!important;
}
.lane-new .lane-count,
.active-lane .lane-count,
#activeLane .lane-count,
.lane-done .lane-count,
.done-lane .lane-count,
#doneLane .lane-count{
border:1px solid rgba(0,217,255,.42)!important;
outline:1px solid rgba(255,0,110,.24)!important;
outline-offset:-1px!important;
background:rgba(255,255,255,.060)!important;
box-shadow:
0 0 10px rgba(0,217,255,.16),
0 0 12px rgba(255,0,110,.10),
inset 0 1px 0 rgba(255,255,255,.10)!important;
}
/* v109 Restore Loading + Unlock Screen Background
The performance fixes made the loading/unlock overlays too flat/black.
This restores the La Última Ronda neon background using static gradients only:
no blur, no animation, no moving gradient, no backdrop-filter. */
#loadingScreen,
.loading-screen,
#audioUnlockOverlay,
.audio-unlock-overlay,
.start-screen,
.unlock-screen{
background:
radial-gradient(circle at 18% 14%, rgba(255,0,110,.22), transparent 30%),
radial-gradient(circle at 82% 18%, rgba(0,217,255,.18), transparent 32%),
radial-gradient(circle at 50% 82%, rgba(255,212,59,.10), transparent 38%),
radial-gradient(circle at 45% 48%, rgba(119,0,255,.16), transparent 42%),
linear-gradient(180deg, rgba(4,5,12,1), rgba(10,4,18,1) 48%, rgba(3,5,12,1))!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
/* Add the subtle La Última Ronda texture back to the loading/unlock screens */
#loadingScreen::before,
.loading-screen::before,
#audioUnlockOverlay::before,
.audio-unlock-overlay::before{
content:""!important;
position:absolute!important;
inset:0!important;
pointer-events:none!important;
display:block!important;
opacity:.28!important;
background:
linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 12px),
radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.22) 72%)!important;
background-size:18px 18px, 100% 100%!important;
animation:none!important;
transform:none!important;
}
/* Keep the loading/unlock card itself using the same rounded neon frame */
.loading-card,
.start-card,
.unlock-card,
#audioUnlockOverlay .unlock-card,
#audioUnlockOverlay .start-card,
#audioUnlockOverlay .modal-card{
border:1px solid rgba(255,0,110,.48)!important;
outline:1px solid rgba(0,217,255,.30)!important;
outline-offset:-1px!important;
background:
radial-gradient(circle at 20% 0%, rgba(255,0,110,.12), transparent 34%),
radial-gradient(circle at 80% 0%, rgba(0,217,255,.10), transparent 34%),
linear-gradient(180deg, rgba(18,20,34,.96), rgba(7,8,16,.985))!important;
box-shadow:
0 0 0 1px rgba(255,255,255,.035),
0 0 22px rgba(255,0,110,.18),
0 0 24px rgba(0,217,255,.14),
inset 0 1px 0 rgba(255,255,255,.08)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
/* Ensure overlay pseudo/background sits behind the card */
#loadingScreen > *,
.loading-screen > *,
#audioUnlockOverlay > *,
.audio-unlock-overlay > *{
position:relative!important;
z-index:1!important;
}
/* v110 Translation polish */
html[lang="es"] .lane-title,
html[lang="es"] .lane-header h2{
letter-spacing:.16em!important;
}
html[lang="es"] .top-btn,
html[lang="es"] button{
letter-spacing:.08em!important;
}
/* v111 Full Spanish Settings polish */
html[lang="es"] .settings-tile-main strong,
html[lang="es"] .alert-profile-card strong,
html[lang="es"] .staff-map-toolbar h3{
letter-spacing:.02em!important;
}
html[lang="es"] .settings-tile-main small,
html[lang="es"] .alert-profile-card span,
html[lang="es"] .settings-subtitle{
letter-spacing:.015em!important;
line-height:1.25!important;
}
html[lang="es"] .profile-btn{
letter-spacing:.06em!important;
}
/* v122 queue header duplicate belt-and-braces */
.lane-header .title-suffix,
.lane-header .queue-suffix,
.lane-header .orders-suffix,
.lane-header .header-suffix{
display:none!important;
}
/* v123 CSS Header Suffix Fix
Root cause of "Active Orders Orders" and "Done Queue Queue":
old CSS was visually appending ORDERS / QUEUE with ::after.
Disable those pseudo labels completely. */
.lane-new .lane-head h2::after,
.lane-done .lane-head h2::after,
.lane-new .lane-header h2::after,
.lane-done .lane-header h2::after,
.active-lane .lane-head h2::after,
.done-lane .lane-head h2::after,
.active-lane .lane-header h2::after,
.done-lane .lane-header h2::after,
#activeLane .lane-head h2::after,
#doneLane .lane-head h2::after,
#activeLane .lane-header h2::after,
#doneLane .lane-header h2::after,
[data-lane="new"] .lane-head h2::after,
[data-lane="done"] .lane-head h2::after,
[data-lane="new"] .lane-header h2::after,
[data-lane="done"] .lane-header h2::after{
content:""!important;
display:none!important;
opacity:0!important;
visibility:hidden!important;
}
/* v125 Screen Health refresh fix */
#screenHealthPanel .health-grid{
display:grid!important;
}
#screenHealthPanel .health-card,
#screenHealthPanel .health-hero,
#screenHealthPanel .staff-health-section{
visibility:visible!important;
}
/* v127 audit performance fix: timer pills update every second; avoid GPU blur repaint */
.timer{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
/* v127: keep header suffixes dead */
.lane-new .lane-head h2::after,
.lane-done .lane-head h2::after,
.lane-new .lane-header h2::after,
.lane-done .lane-header h2::after{
content:""!important;
display:none!important;
}
/* v18 cheap Android tablet performance mode ---------------------------------
Static idle panel, no moving ready-for-orders background, no constant repaint. */
* , *::before, *::after{
animation:none!important;
transition:none!important;
scroll-behavior:auto!important;
}
body,
.app-shell{
background:#07030f!important;
}
.topbar,
.alert-overlay,
.modal,
.modal-card,
.settings-card,
.screen-health-card,
.lane,
.ticket,
.premium-idle-state,
.soft-empty-state{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
filter:none!important;
}
.premium-idle-state,
.premium-idle-state.dizi-static-idle{
min-height:260px!important;
background:#12071b!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:0 8px 18px rgba(0,0,0,.25)!important;
overflow:hidden!important;
}
.premium-idle-state::before,
.premium-idle-state::after,
.idle-orb-wrap,
.idle-orb,
.idle-ring,
.loading-orb,
.alert-pulse{
display:none!important;
content:none!important;
}
.ticket{
animation:none!important;
transform:none!important;
will-change:auto!important;
box-shadow:0 8px 18px rgba(0,0,0,.28)!important;
}
.ticket.needs-ack{
box-shadow:0 8px 18px rgba(0,0,0,.28),0 0 0 2px rgba(255,43,214,.38)!important;
}
button:disabled,
button.is-busy,
.ticket-actions button:disabled,
.ticket-actions button.is-busy{
opacity:.45!important;
filter:grayscale(.65)!important;
pointer-events:none!important;
cursor:not-allowed!important;
box-shadow:none!important;
}
.ticket-actions button,
.ack-action,
.done-green-action,
.recall-action,
#ackAlertBtn{
touch-action:manipulation!important;
-webkit-tap-highlight-color:transparent!important;
}
/* Remove expensive animated alert overlay effects; keep it obvious but static. */
.alert-overlay{
background:rgba(0,0,0,.82)!important;
}
.alert-card{
box-shadow:0 12px 34px rgba(0,0,0,.5)!important;
}
/* v19 cheap Android tablet performance patch
Keep loading animation and the blue ready dot, but remove the moving/sweeping background behind Ready for orders. */
.premium-idle-state,
.premium-idle-state::before,
.premium-idle-state::after,
.dizi-static-idle,
.dizi-static-idle::before,
.dizi-static-idle::after,
.empty.premium-idle-state,
.empty.premium-idle-state::before,
.empty.premium-idle-state::after {
animation: none !important;
transition: none !important;
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
}
/* Keep the small/blue live dot/pulse visible, but make it cheaper. */
.idle-chip.good::before,
.live-dot,
.status-dot,
.sync-dot {
animation-duration: 2.4s !important;
}
/* Buttons must feel instant on slower tablets. */
button.is-busy,
button:disabled {
opacity: 0.48 !important;
filter: grayscale(1) !important;
pointer-events: none !important;
transform: none !important;
}
/* Reduce expensive card transitions/shadows on weak devices. */
.ticket,
.ticket *,
.ticket-list,
.lane,
.empty {
transition-duration: 0.01ms !important;
}
.ticket {
will-change: auto !important;
}
/* v20 snappy tablet correction
Restore the startup loading animation and the small blue ready dot.
Only the moving/sweeping background behind Ready for orders stays removed. */
/* Remove only the expensive sweeping idle-card background layer */
.empty.premium-idle-state::before,
.premium-idle-state.dizi-static-idle::before {
content: none !important;
display: none !important;
animation: none !important;
background: none !important;
}
/* Keep the Ready for orders panel static, but still styled */
.empty.premium-idle-state,
.premium-idle-state.dizi-static-idle {
background:
radial-gradient(circle at 50% 20%, rgba(0,217,255,.10), transparent 36%),
linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)) !important;
border: 1px solid rgba(255,255,255,.12) !important;
box-shadow: 0 8px 18px rgba(0,0,0,.25) !important;
}
/* Bring back the blue dot/orb only. Keep it light. */
.idle-orb-wrap {
display: grid !important;
position: relative !important;
width: 84px !important;
height: 84px !important;
place-items: center !important;
}
.idle-orb {
display: block !important;
content: normal !important;
width: 46px !important;
height: 46px !important;
border-radius: 50% !important;
background:
radial-gradient(circle at 35% 30%, #ffffff, rgba(115,245,255,.9) 22%, rgba(0,217,255,.58) 54%, rgba(255,0,110,.14)) !important;
box-shadow:
0 0 18px rgba(0,217,255,.45),
0 0 34px rgba(0,217,255,.18),
inset 0 1px 0 rgba(255,255,255,.55) !important;
animation: diziIdleOrbLite 2.6s ease-in-out infinite !important;
}
.idle-ring {
display: block !important;
position: absolute !important;
border-radius: 50% !important;
border: 1px solid rgba(0,217,255,.20) !important;
animation: none !important;
}
.idle-ring-one {
width: 70px !important;
height: 70px !important;
}
.idle-ring-two {
width: 84px !important;
height: 84px !important;
border-color: rgba(255,0,110,.12) !important;
}
/* Bring back startup loading visuals */
#loadingScreen,
.loading-screen {
display: grid !important;
place-items: center !important;
opacity: 1;
background:
radial-gradient(circle at 20% 18%, rgba(255,0,110,.18), transparent 30%),
radial-gradient(circle at 82% 18%, rgba(0,217,255,.18), transparent 32%),
radial-gradient(circle at 50% 82%, rgba(255,212,59,.10), transparent 38%),
linear-gradient(180deg, rgba(4,5,12,1), rgba(10,4,18,1) 48%, rgba(3,5,12,1)) !important;
}
#loadingScreen.hidden,
.loading-screen.hidden {
display: none !important;
}
.loading-shell {
animation: diziStartupFloatLite 1.6s ease-in-out infinite !important;
}
.loading-dizi-logo {
display: block !important;
animation: diziStartupPulseLite 1.35s ease-in-out infinite !important;
filter: drop-shadow(0 0 18px rgba(0,217,255,.30)) !important;
}
.startup-sync,
#loadingSub {
animation: diziStartupTextLite 1.25s ease-in-out infinite !important;
}
@keyframes diziIdleOrbLite {
0%, 100% { transform: scale(1); opacity: .88; }
50% { transform: scale(1.055); opacity: 1; }
}
@keyframes diziStartupFloatLite {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes diziStartupPulseLite {
0%, 100% { transform: scale(1); opacity: .86; }
50% { transform: scale(1.025); opacity: 1; }
}
@keyframes diziStartupTextLite {
0%, 100% { opacity: .68; }
50% { opacity: 1; }
}
/* Hide removed alert volume UI even if an older cached HTML fragment exists */
.alert-profile-card,
.alert-profile-buttons,
.profile-btn,
[data-alert-profile] {
display: none !important;
}
/* Make item taps feel instant and avoid browser touch delay */
.item.item-checkable,
.ticket-actions button,
#clearDoneBtn,
#ackAlertBtn {
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
cursor: pointer !important;
}
.item.item-prepared {
opacity: .68 !important;
}
.item.item-prepared .item-name {
text-decoration: line-through !important;
text-decoration-thickness: 2px !important;
}
.item-check {
transform: translateZ(0) !important;
}
/* v21 RESTORED STARTUP LOADING PAGE + WIDER ACTIVE ORDERS ------------------
This overrides the broad v18 low-power animation kill only for the startup
loading screen and the tiny ready-status dot. The expensive idle background
sweep behind Ready for orders remains disabled. */
#loadingScreen.v21-loading-screen,
.loading-screen.v21-loading-screen{
position:fixed!important;
inset:0!important;
z-index:9999!important;
display:grid!important;
place-items:center!important;
overflow:hidden!important;
opacity:1!important;
visibility:visible!important;
pointer-events:auto!important;
background:
radial-gradient(circle at 16% 18%, rgba(255,43,214,.26), transparent 32%),
radial-gradient(circle at 82% 22%, rgba(0,220,255,.24), transparent 35%),
radial-gradient(circle at 50% 92%, rgba(255,183,3,.10), transparent 38%),
linear-gradient(145deg,#07020d,#170522 54%,#040207)!important;
animation:v21LoadingBg 5s ease-in-out infinite!important;
transition:opacity .35s ease, visibility .35s ease!important;
}
#loadingScreen.v21-loading-screen.hidden,
.loading-screen.v21-loading-screen.hidden{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
display:grid!important;
}
.loading-v21-bg{
position:absolute!important;
inset:-18%!important;
display:block!important;
pointer-events:none!important;
background:
conic-gradient(from 90deg, transparent, rgba(0,217,255,.12), transparent, rgba(255,0,110,.10), transparent),
linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px)!important;
background-size:100% 100%, 22px 22px!important;
opacity:.55!important;
animation:v21SlowSpin 12s linear infinite!important;
filter:none!important;
}
.v21-loading-shell,
.loading-shell.v21-loading-shell{
width:min(480px, calc(100vw - 44px))!important;
min-height:360px!important;
padding:42px 38px 36px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:16px!important;
text-align:center!important;
border-radius:30px!important;
background:
radial-gradient(circle at 20% 0%, rgba(255,0,110,.15), transparent 36%),
radial-gradient(circle at 80% 0%, rgba(0,217,255,.13), transparent 36%),
linear-gradient(180deg, rgba(18,20,34,.96), rgba(7,8,16,.99))!important;
border:1px solid rgba(255,255,255,.16)!important;
box-shadow:
0 28px 90px rgba(0,0,0,.68),
0 0 42px rgba(0,217,255,.14),
0 0 34px rgba(255,0,110,.10),
inset 0 1px 0 rgba(255,255,255,.09)!important;
position:relative!important;
overflow:hidden!important;
opacity:1!important;
transform:none!important;
animation:v21CardIn .38s ease both, v21CardFloat 2.4s ease-in-out .38s infinite!important;
}
.v21-loading-shell::before{
content:""!important;
position:absolute!important;
inset:0!important;
border-radius:inherit!important;
padding:1px!important;
background:linear-gradient(135deg,#ff2bd6,#00dcff,#ffd43b,#ff2bd6)!important;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
-webkit-mask-composite:xor!important;
mask-composite:exclude!important;
opacity:.82!important;
pointer-events:none!important;
display:block!important;
}
.v21-loader-mark{
width:118px!important;
height:118px!important;
position:relative!important;
display:grid!important;
place-items:center!important;
margin-bottom:2px!important;
}
.v21-loader-core{
width:54px!important;
height:54px!important;
border-radius:50%!important;
display:block!important;
background:
radial-gradient(circle at 35% 30%, #fff, rgba(115,245,255,.95) 20%, rgba(0,217,255,.64) 54%, rgba(255,0,110,.18))!important;
box-shadow:
0 0 24px rgba(0,217,255,.66),
0 0 58px rgba(0,217,255,.26),
inset 0 1px 0 rgba(255,255,255,.70)!important;
animation:v21LoaderPulse .95s ease-in-out infinite!important;
}
.v21-loader-ring{
position:absolute!important;
border-radius:50%!important;
display:block!important;
border:2px solid rgba(0,217,255,.30)!important;
box-shadow:0 0 26px rgba(0,217,255,.12)!important;
animation:v21LoaderRing 1.55s ease-out infinite!important;
}
.v21-loader-ring.ring-a{width:86px!important;height:86px!important;}
.v21-loader-ring.ring-b{width:112px!important;height:112px!important;border-color:rgba(255,0,110,.22)!important;animation-delay:.38s!important;}
.loading-dizi-logo{
max-width:min(210px, 68vw)!important;
max-height:110px!important;
display:block!important;
object-fit:contain!important;
margin:0 auto 4px!important;
filter:drop-shadow(0 0 24px rgba(0,217,255,.28)) drop-shadow(0 0 18px rgba(255,0,110,.20))!important;
animation:v21LogoBreathe 1.5s ease-in-out infinite!important;
}
.v21-loading-title{
display:block!important;
margin:0!important;
color:#fff!important;
font-size:clamp(1.4rem,4.5vw,2.15rem)!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:-.04em!important;
text-shadow:0 0 22px rgba(0,217,255,.18)!important;
}
.startup-sync,
#loadingSub{
display:flex!important;
align-items:center!important;
justify-content:center!important;
color:#00d9ff!important;
font-size:clamp(.86rem,2.8vw,1.04rem)!important;
font-weight:1000!important;
letter-spacing:.02em!important;
opacity:1!important;
animation:v21TextBlink 1.15s ease-in-out infinite!important;
}
.startup-sync::before,
#loadingSub::before{
content:""!important;
width:11px!important;
height:11px!important;
margin-right:9px!important;
border-radius:999px!important;
background:#00d9ff!important;
box-shadow:0 0 0 rgba(0,217,255,.7)!important;
display:inline-block!important;
animation:v21SyncDot 1.05s ease-out infinite!important;
}
.v21-progress-rail{
width:min(320px, 72vw)!important;
height:10px!important;
border-radius:999px!important;
overflow:hidden!important;
display:block!important;
background:rgba(255,255,255,.11)!important;
border:1px solid rgba(255,255,255,.13)!important;
margin-top:4px!important;
}
.v21-progress-bar{
height:100%!important;
width:42%!important;
display:block!important;
border-radius:inherit!important;
background:linear-gradient(90deg,#ff2bd6,#00dcff,#fff,#ffd43b)!important;
box-shadow:0 0 18px rgba(0,217,255,.35)!important;
animation:v21ProgressMove 1.05s ease-in-out infinite!important;
}
@keyframes v21LoadingBg{0%,100%{filter:saturate(1)}50%{filter:saturate(1.18)}}
@keyframes v21SlowSpin{to{transform:rotate(360deg)}}
@keyframes v21CardIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes v21CardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes v21LoaderPulse{0%,100%{transform:scale(.95);opacity:.84}50%{transform:scale(1.08);opacity:1}}
@keyframes v21LoaderRing{0%{transform:scale(.72);opacity:.9}100%{transform:scale(1.08);opacity:.08}}
@keyframes v21LogoBreathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.025);opacity:1}}
@keyframes v21TextBlink{0%,100%{opacity:.70}50%{opacity:1}}
@keyframes v21SyncDot{0%{box-shadow:0 0 0 0 rgba(0,217,255,.68);opacity:.75}70%{box-shadow:0 0 0 11px rgba(0,217,255,0);opacity:1}100%{box-shadow:0 0 0 0 rgba(0,217,255,0);opacity:.75}}
@keyframes v21ProgressMove{0%{transform:translateX(-120%)}55%{transform:translateX(90%)}100%{transform:translateX(240%)}}
/* Wider active orders, narrower done queue. Making/ready remain hidden in this simplified KDS. */
.board{
grid-template-columns:minmax(0, 1fr) clamp(250px, 25vw, 340px)!important;
gap:12px!important;
padding:12px!important;
}
.lane-making,.lane-ready{display:none!important;}
.lane-new{min-width:0!important;}
.lane-done{width:auto!important;min-width:250px!important;max-width:340px!important;}
/* Bigger active-order text for distance viewing */
.lane-new .ticket-title,
.ticket.new .ticket-title{
font-size:clamp(1.55rem, 2.55vw, 2.25rem)!important;
line-height:1.02!important;
letter-spacing:-.035em!important;
}
.lane-new .item,
.ticket.new .item{
padding:15px 16px!important;
gap:14px!important;
}
.lane-new .item-name,
.ticket.new .item-name{
font-size:clamp(1.18rem, 1.75vw, 1.55rem)!important;
line-height:1.12!important;
font-weight:1000!important;
}
.lane-new .item-qty,
.ticket.new .item-qty{
min-width:48px!important;
height:48px!important;
font-size:1.28rem!important;
}
.lane-new .mods,
.ticket.new .mods{
font-size:clamp(.98rem,1.28vw,1.15rem)!important;
line-height:1.18!important;
}
/* Done queue compact mode */
.lane-done .lane-head{height:56px!important;padding:0 12px!important;}
.lane-done .lane-head h2{font-size:22px!important;letter-spacing:.04em!important;font-weight:1000!important;}
.lane-done .count-pill{min-width:32px!important;height:32px!important;font-size:14px!important;}
.lane-done .ticket{padding:10px!important;border-radius:18px!important;}
.lane-done .ticket-title{font-size:1rem!important;line-height:1.05!important;}
.lane-done .item{padding:8px!important;gap:8px!important;}
.lane-done .item-name{font-size:.88rem!important;line-height:1.05!important;}
.lane-done .item-qty{min-width:30px!important;height:30px!important;font-size:.9rem!important;}
.lane-done .ticket-actions button{min-height:38px!important;font-size:.82rem!important;padding:8px!important;}
.lane-done .timer{font-size:.78rem!important;padding:5px 8px!important;}
@media(max-width:900px){
.board{grid-template-columns:1fr!important;}
.lane-done{max-width:none!important;min-width:0!important;}
}
/* ===================== v22 ORIGINAL LOADING + FINAL LAYOUT FIX ===================== */
/* Restore the earlier/original loading screen style exactly: logo card + pulsing blue sync dot.
This overrides the experimental v21 loading page. */
#loadingScreen.loading-screen,
.loading-screen{
position:fixed!important;
inset:0!important;
z-index:500!important;
display:grid!important;
place-items:center!important;
align-content:center!important;
gap:0!important;
background:
radial-gradient(circle at 15% 18%,rgba(255,43,214,.28),transparent 30%),
radial-gradient(circle at 75% 25%,rgba(0,220,255,.24),transparent 35%),
linear-gradient(145deg,#080311,#180526 55%,#050208)!important;
transition:opacity .45s ease,visibility .45s ease!important;
}
#loadingScreen.loading-screen.hidden,
.loading-screen.hidden{
opacity:0!important;
visibility:hidden!important;
pointer-events:none!important;
display:grid!important;
}
.loading-v21-bg,
.v21-loader-mark,
.v21-loader-ring,
.v21-loader-core,
.v21-loading-title,
.v21-progress-rail,
.v21-progress-bar{
display:none!important;
}
.loading-shell,
.loading-shell.v21-loading-shell{
width:min(430px,calc(100vw - 40px))!important;
min-height:auto!important;
padding:42px 38px!important;
text-align:center!important;
border-radius:26px!important;
background:linear-gradient(180deg,rgba(14,15,27,.92),rgba(6,7,13,.98))!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:
0 26px 80px rgba(0,0,0,.66),
0 0 42px rgba(0,217,255,.10),
inset 0 1px 0 rgba(255,255,255,.08)!important;
position:relative!important;
overflow:hidden!important;
opacity:0;
animation:kdsCardReady .16s ease .04s forwards!important;
}
.loading-shell::before{
content:""!important;
position:absolute!important;
inset:0!important;
border-radius:inherit!important;
padding:1px!important;
background:linear-gradient(135deg,#ff2bd6,#00dcff,#ffd43b,#ff2bd6)!important;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
-webkit-mask-composite:xor!important;
mask-composite:exclude!important;
opacity:.78!important;
pointer-events:none!important;
display:block!important;
}
.loading-dizi-logo{
width:min(230px,72vw)!important;
max-width:min(230px,72vw)!important;
max-height:none!important;
display:block!important;
object-fit:contain!important;
margin:0 auto 24px!important;
filter:
drop-shadow(0 0 26px rgba(0,217,255,.30))
drop-shadow(0 0 20px rgba(255,0,110,.22))!important;
animation:none!important;
}
.startup-sync,
#loadingSub{
display:flex!important;
align-items:center!important;
justify-content:center!important;
margin-top:0!important;
color:#00d9ff!important;
font-size:clamp(.82rem,2.8vw,1rem)!important;
font-weight:900!important;
letter-spacing:.25px!important;
white-space:nowrap!important;
opacity:1!important;
transform:none!important;
animation:none!important;
}
.startup-sync::before,
#loadingSub::before{
content:""!important;
display:inline-block!important;
flex:0 0 auto!important;
width:11px!important;
height:11px!important;
border-radius:50%!important;
background:#00d9ff!important;
margin-right:9px!important;
box-shadow:0 0 0 rgba(0,217,255,.6)!important;
animation:syncPulse 1.15s infinite!important;
}
@keyframes kdsCardReady{
from{opacity:0;transform:translateY(8px) scale(.985)}
to{opacity:1;transform:none}
}
@keyframes syncPulse{
0%{box-shadow:0 0 0 0 rgba(0,217,255,.62);opacity:.78}
70%{box-shadow:0 0 0 10px rgba(0,217,255,0);opacity:1}
100%{box-shadow:0 0 0 0 rgba(0,217,255,0);opacity:.78}
}
/* Board layout:
- alert banner becomes a compact top strip, not a giant panel
- Active Orders and Done Queue lane headers match height
- Done Queue is a little wider and aligns closer to the right-side clock/time pill
- Active Orders gets the remaining real estate */
.board{
display:grid!important;
grid-template-columns:minmax(0,1fr) clamp(330px,24vw,420px)!important;
grid-template-areas:
"alert alert"
"active done"!important;
gap:14px 16px!important;
align-items:stretch!important;
padding-top:10px!important;
}
.service-escalation-banner{
grid-area:alert!important;
min-height:48px!important;
height:auto!important;
max-height:58px!important;
padding:9px 16px!important;
border-radius:18px!important;
display:grid!important;
grid-template-columns:auto minmax(0,1fr)!important;
align-items:center!important;
gap:12px!important;
overflow:hidden!important;
margin:0!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 8px 20px rgba(0,0,0,.20)!important;
animation:none!important;
}
.service-escalation-banner.hidden{
display:none!important;
}
.service-escalation-banner::before{
display:none!important;
content:none!important;
animation:none!important;
}
.service-escalation-icon{
width:30px!important;
height:30px!important;
border-radius:10px!important;
font-size:.95rem!important;
}
.service-escalation-copy{
display:flex!important;
align-items:baseline!important;
gap:12px!important;
min-width:0!important;
}
.service-escalation-copy strong{
font-size:.98rem!important;
line-height:1.05!important;
white-space:nowrap!important;
}
.service-escalation-copy span{
font-size:.78rem!important;
line-height:1.1!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.lane-new{
grid-area:active!important;
min-width:0!important;
}
.lane-making,
.lane-ready{
display:none!important;
}
.lane-done{
grid-area:done!important;
min-width:330px!important;
width:auto!important;
}
.lane,
.lane-new,
.lane-done{
align-self:stretch!important;
min-height:0!important;
}
.lane-head,
.lane .lane-head,
.lane-new .lane-head,
.lane-done .lane-head{
height:68px!important;
min-height:68px!important;
max-height:68px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
padding:0 18px!important;
box-sizing:border-box!important;
}
.lane-head h2,
.lane .lane-head h2{
margin:0!important;
line-height:1!important;
}
/* Active orders should be readable from farther away. */
.lane-new .ticket{
padding:20px!important;
}
.lane-new .ticket-title{
font-size:clamp(1.75rem,2.55vw,2.65rem)!important;
line-height:1.02!important;
letter-spacing:-.055em!important;
}
.lane-new .item{
padding:16px 18px!important;
gap:16px!important;
}
.lane-new .item-name,
.lane-new .item-main{
font-size:clamp(1.22rem,1.65vw,1.55rem)!important;
line-height:1.12!important;
}
.lane-new .mods{
font-size:clamp(.98rem,1.05vw,1.12rem)!important;
}
.lane-new .item-qty{
min-width:54px!important;
height:54px!important;
font-size:1.42rem!important;
}
.lane-new .ticket-actions button{
min-height:54px!important;
font-size:1rem!important;
}
/* Done queue can stay compact but not tiny/weird. */
.lane-done .ticket{
padding:16px!important;
}
.lane-done .ticket-title{
font-size:1.03rem!important;
line-height:1.05!important;
}
.lane-done .item{
padding:11px 12px!important;
gap:10px!important;
}
.lane-done .item-name,
.lane-done .item-main{
font-size:.94rem!important;
line-height:1.14!important;
}
.lane-done .item-qty{
min-width:34px!important;
height:34px!important;
font-size:.92rem!important;
}
@media(max-width:900px){
.board{
grid-template-columns:1fr!important;
grid-template-areas:"alert" "active" "done"!important;
}
.lane-done{min-width:0!important;}
}
/* ===================== v23 DONE QUEUE ALIGNMENT FIX =====================
Goal: Done Queue should visually line up with the top right control group:
left edge near the beginning of the time pill, right edge near the end of Clear.
Keeps v22 loading + alert banner fixes unchanged. */
:root{
--lur-done-col-width: clamp(390px, 26vw, 470px);
--lur-board-gap: 16px;
}
/* Top right controls stay as the visual alignment guide */
.topbar{
padding-right: 22px !important;
}
.top-actions{
gap: 12px !important;
justify-content: flex-end !important;
}
/* Make board use a wider right rail so Done Queue starts around the time pill */
.board{
grid-template-columns: minmax(0, 1fr) var(--lur-done-col-width) !important;
gap: 14px var(--lur-board-gap) !important;
padding-left: 12px !important;
padding-right: 22px !important;
box-sizing: border-box !important;
}
/* Force Done Queue to occupy the full right rail */
.lane-done{
width: 100% !important;
min-width: var(--lur-done-col-width) !important;
max-width: var(--lur-done-col-width) !important;
justify-self: end !important;
}
/* Keep the right edge visually flush with the Clear button area */
.lane-done,
.lane-done .lane-head,
.lane-done .ticket-list{
box-sizing: border-box !important;
}
/* Active area should take everything left of the Done Queue */
.lane-new{
min-width: 0 !important;
width: 100% !important;
}
/* Header bars must remain equal height */
.lane-new .lane-head,
.lane-done .lane-head{
height: 68px !important;
min-height: 68px !important;
max-height: 68px !important;
}
/* Done Queue slightly more comfortable now that it is wider */
.lane-done .ticket{
padding: 15px 16px !important;
}
.lane-done .item{
grid-template-columns: 36px minmax(0,1fr) !important;
padding: 11px 13px !important;
}
.lane-done .ticket-title{
font-size: 1.02rem !important;
}
.lane-done .item-name,
.lane-done .item-main{
font-size: .98rem !important;
}
/* Large / mirrored displays */
@media (min-width: 1450px){
:root{
--lur-done-col-width: 420px;
}
}
/* Laptop browser testing view */
@media (max-width: 1300px) and (min-width: 901px){
:root{
--lur-done-col-width: 390px;
}
}
/* Tablet portrait / narrow view remains stacked */
@media(max-width:900px){
:root{
--lur-done-col-width: 100%;
}
.board{
grid-template-columns: 1fr !important;
grid-template-areas:
"alert"
"active"
"done" !important;
padding-right: 12px !important;
}
.lane-done{
min-width: 0 !important;
max-width: none !important;
width: 100% !important;
}
}
/* ===================== v25 BALANCED EDGE GAPS + DONE QUEUE FINAL NUDGE =====================
Base is v23, because v24 pulled Done Queue too far left.
This keeps the right edge aligned, widens Done Queue only a little,
restores the middle gap, and gives Active Orders the same outer breathing room
as the right side of the screen. */
:root{
--lur-screen-edge-gap: 22px;
--lur-board-gap: 22px;
--lur-done-col-width: clamp(405px, 26.8vw, 480px) !important;
}
/* Equal outer screen padding: left side of Active Orders and right side of Done Queue */
.board{
grid-template-columns: minmax(0, 1fr) var(--lur-done-col-width) !important;
gap: 14px var(--lur-board-gap) !important;
padding-left: var(--lur-screen-edge-gap) !important;
padding-right: var(--lur-screen-edge-gap) !important;
box-sizing: border-box !important;
}
/* Done Queue right edge remains fixed to the board's right padding.
Width is only slightly wider than v23, much less than v24. */
.lane-done{
width: 100% !important;
min-width: var(--lur-done-col-width) !important;
max-width: var(--lur-done-col-width) !important;
justify-self: end !important;
}
/* Restore a pleasing gap between the two panels */
.lane-new{
min-width: 0 !important;
width: 100% !important;
}
/* Keep top headers level and same height */
.lane-new .lane-head,
.lane-done .lane-head,
.lane .lane-head{
height: 68px !important;
min-height: 68px !important;
max-height: 68px !important;
}
/* Comfortable Done Queue content after the mild width increase */
.lane-done .ticket{
padding-left: 16px !important;
padding-right: 16px !important;
}
.lane-done .item{
grid-template-columns: 36px minmax(0,1fr) !important;
}
/* Large mirrored display target */
@media (min-width: 1450px){
:root{
--lur-screen-edge-gap: 22px;
--lur-board-gap: 22px;
--lur-done-col-width: 435px !important;
}
}
/* Laptop/browser testing */
@media (max-width: 1300px) and (min-width: 901px){
:root{
--lur-screen-edge-gap: 18px;
--lur-board-gap: 18px;
--lur-done-col-width: 405px !important;
}
}
@media(max-width:900px){
:root{
--lur-screen-edge-gap: 12px;
--lur-board-gap: 14px;
--lur-done-col-width: 100% !important;
}
.board{
grid-template-columns: 1fr !important;
grid-template-areas:
"alert"
"active"
"done" !important;
padding-left: var(--lur-screen-edge-gap) !important;
padding-right: var(--lur-screen-edge-gap) !important;
}
.lane-done{
min-width: 0 !important;
max-width: none !important;
width: 100% !important;
}
}
/* ===================== v25 TOP GAP FIX ONLY =====================
Base: v25.
Problem fixed:
- The board area was leaving a huge blank gap above Active Orders / Done Queue.
- Force the board itself to start directly under the header and make the visible lanes
occupy the full available screen height.
Nothing else changed:
- no theme changes
- no color changes
- no Done Queue width changes
- no app.js / worker.js / loop.mp3 changes
*/
/* Full-screen app shell, with header auto height and board filling the rest. */
html,
body{
height:100% !important;
min-height:100% !important;
margin:0 !important;
overflow:hidden !important;
}
.app-shell{
height:100vh !important;
height:100dvh !important;
min-height:100vh !important;
min-height:100dvh !important;
display:grid !important;
grid-template-rows:auto minmax(0,1fr) !important;
overflow:hidden !important;
}
.topbar{
grid-row:1 !important;
flex:0 0 auto !important;
}
/* Critical fix:
v25's board had a two-row grid for an alert row + lane row.
On some screen sizes that empty alert row/track was creating the giant blank gap.
For normal operation, remove that empty grid row and make Active/Done the only row. */
.board{
grid-row:2 !important;
flex:none !important;
height:100% !important;
min-height:0 !important;
max-height:none !important;
overflow:hidden !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) var(--lur-done-col-width) !important;
grid-template-areas:"active done" !important;
grid-template-rows:minmax(0,1fr) !important;
align-content:start !important;
align-items:stretch !important;
justify-content:stretch !important;
margin:0 !important;
padding-top:var(--lur-screen-edge-gap) !important;
padding-bottom:var(--lur-screen-edge-gap) !important;
box-sizing:border-box !important;
}
/* Hidden alert must take absolutely no layout space. */
#serviceEscalationBanner.hidden,
.service-escalation-banner.hidden{
display:none !important;
height:0 !important;
min-height:0 !important;
max-height:0 !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
overflow:hidden !important;
}
/* If the urgent banner appears, float it above the lanes instead of creating a new row. */
#serviceEscalationBanner:not(.hidden),
.service-escalation-banner:not(.hidden){
position:absolute !important;
left:var(--lur-screen-edge-gap) !important;
right:var(--lur-screen-edge-gap) !important;
top:calc(104px + 10px) !important;
z-index:80 !important;
max-height:58px !important;
}
/* Lanes fill the available board area. */
.lane-new,
.lane-done{
height:100% !important;
min-height:0 !important;
align-self:stretch !important;
}
.lane-new{
grid-area:active !important;
}
.lane-done{
grid-area:done !important;
}
/* Internal lane lists scroll; the page itself does not drift. */
.ticket-list,
.lane-new .ticket-list,
.lane-done .ticket-list{
min-height:0 !important;
overflow:auto !important;
}
@media(max-width:900px){
html,
body{
overflow:auto !important;
}
.app-shell{
min-height:100dvh !important;
height:auto !important;
overflow:visible !important;
display:flex !important;
flex-direction:column !important;
}
.board{
height:auto !important;
overflow:visible !important;
grid-template-columns:1fr !important;
grid-template-areas:"active" "done" !important;
grid-template-rows:auto auto !important;
}
#serviceEscalationBanner:not(.hidden),
.service-escalation-banner:not(.hidden){
position:static !important;
}
}
/* ===================== v25 LOGO GRADIENT FRAMES ONLY =====================
Base: v25 TOP GAP FIXED ONLY.
Only change:
- Replace neon/rainbow queue panel frames with a smoother La Última Ronda logo-inspired gradient.
- No layout, sizing, height, JS, Worker, or alert audio changes.
*/
:root{
--lur-logo-red:#c4121a;
--lur-logo-red-bright:#e1262f;
--lur-logo-gold:#f2a51a;
--lur-logo-gold-soft:#ffd56a;
--lur-logo-cream:#fff4dc;
--lur-logo-black:#050505;
}
/* Remove old neon/rainbow border-image behaviour on the queue panels only. */
.lane-new,
.active-lane,
#activeLane,
[data-lane="new"],
.lane-done,
.done-lane,
#doneLane,
[data-lane="done"]{
border:2px solid transparent !important;
border-image:none !important;
outline:none !important;
background:
linear-gradient(180deg, rgba(18,20,28,.97), rgba(7,8,14,.985)) padding-box,
linear-gradient(
135deg,
var(--lur-logo-red) 0%,
var(--lur-logo-red-bright) 22%,
var(--lur-logo-gold) 48%,
var(--lur-logo-cream) 62%,
var(--lur-logo-gold-soft) 72%,
var(--lur-logo-red) 100%
) border-box !important;
box-shadow:
0 20px 48px rgba(0,0,0,.34),
0 0 26px rgba(196,18,26,.12),
inset 0 1px 0 rgba(255,255,255,.075) !important;
}
/* Active Orders gets the warmer red-to-gold direction. */
.lane-new,
.active-lane,
#activeLane,
[data-lane="new"]{
background:
radial-gradient(circle at 10% 0%, rgba(196,18,26,.10), transparent 34%) padding-box,
radial-gradient(circle at 92% 0%, rgba(242,165,26,.08), transparent 36%) padding-box,
linear-gradient(180deg, rgba(18,20,28,.98), rgba(7,8,14,.99)) padding-box,
linear-gradient(
135deg,
var(--lur-logo-red) 0%,
var(--lur-logo-red-bright) 28%,
var(--lur-logo-gold) 55%,
var(--lur-logo-cream) 70%,
var(--lur-logo-red) 100%
) border-box !important;
}
/* Done Queue is slightly calmer but still same brand family. */
.lane-done,
.done-lane,
#doneLane,
[data-lane="done"]{
background:
radial-gradient(circle at 90% 0%, rgba(242,165,26,.075), transparent 36%) padding-box,
linear-gradient(180deg, rgba(15,17,23,.965), rgba(5,6,10,.985)) padding-box,
linear-gradient(
135deg,
var(--lur-logo-gold) 0%,
var(--lur-logo-cream) 20%,
var(--lur-logo-gold) 38%,
var(--lur-logo-red-bright) 68%,
var(--lur-logo-red) 100%
) border-box !important;
box-shadow:
0 20px 48px rgba(0,0,0,.32),
0 0 20px rgba(242,165,26,.10),
inset 0 1px 0 rgba(255,255,255,.06) !important;
}
/* Keep the subtle top accent line, but make it logo-coloured instead of neon. */
.lane-new::before,
.active-lane::before,
#activeLane::before,
[data-lane="new"]::before,
.lane-done::before,
.done-lane::before,
#doneLane::before,
[data-lane="done"]::before{
content:"" !important;
position:absolute !important;
left:18px !important;
right:18px !important;
top:0 !important;
height:2px !important;
border-radius:999px !important;
pointer-events:none !important;
opacity:.95 !important;
background:linear-gradient(
90deg,
transparent,
var(--lur-logo-red),
var(--lur-logo-gold),
var(--lur-logo-cream),
var(--lur-logo-red),
transparent
) !important;
box-shadow:none !important;
}
/* Remove old cyan/pink extra glow on the panel pseudo-elements if later rules try to reapply it. */
.lane-new::after,
.active-lane::after,
#activeLane::after,
[data-lane="new"]::after,
.lane-done::after,
.done-lane::after,
#doneLane::after,
[data-lane="done"]::after{
box-shadow:none !important;
}
/* Header count pills should stay subtle and not clash with the new frame. */
.lane-new .count-pill,
.active-lane .count-pill,
#activeLane .count-pill,
[data-lane="new"] .count-pill,
.lane-done .count-pill,
.done-lane .count-pill,
#doneLane .count-pill,
[data-lane="done"] .count-pill{
border:1px solid rgba(242,165,26,.22) !important;
background:linear-gradient(180deg, rgba(196,18,26,.22), rgba(242,165,26,.11)) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
}
/* ===================== v25 LOGO GRADIENT LOADING + START FRAMES ONLY =====================
Base: v25 TOP FIXED + LOGO GRADIENT FRAMES.
Only change:
- Loading screen frame now matches the La Última Ronda red/gold/cream gradient.
- Audio unlock/start screen frame now matches too.
- Removes cyan/pink neon glow from those screens only.
- No layout, board, queue, JS, Worker, or audio changes.
*/
:root{
--lur-logo-red:#c4121a;
--lur-logo-red-bright:#e1262f;
--lur-logo-gold:#f2a51a;
--lur-logo-gold-soft:#ffd56a;
--lur-logo-cream:#fff4dc;
--lur-logo-black:#050505;
}
/* Loading screen card frame */
.loading-shell,
.loading-shell.v21-loading-shell{
background:
linear-gradient(180deg, rgba(18,20,28,.96), rgba(6,7,12,.985)) padding-box,
linear-gradient(
135deg,
var(--lur-logo-red) 0%,
var(--lur-logo-red-bright) 24%,
var(--lur-logo-gold) 48%,
var(--lur-logo-cream) 62%,
var(--lur-logo-gold-soft) 74%,
var(--lur-logo-red) 100%
) border-box !important;
border:2px solid transparent !important;
border-image:none !important;
outline:none !important;
box-shadow:
0 26px 80px rgba(0,0,0,.66),
0 0 34px rgba(196,18,26,.18),
0 0 22px rgba(242,165,26,.10),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* Remove old neon pseudo-frame on loading card and replace with soft logo line */
.loading-shell::before,
.loading-shell.v21-loading-shell::before{
content:"" !important;
position:absolute !important;
top:0 !important;
left:34px !important;
right:34px !important;
height:3px !important;
border-radius:999px !important;
padding:0 !important;
background:linear-gradient(
90deg,
transparent,
var(--lur-logo-red),
var(--lur-logo-gold),
var(--lur-logo-cream),
var(--lur-logo-red),
transparent
) !important;
-webkit-mask:none !important;
mask:none !important;
opacity:.95 !important;
pointer-events:none !important;
display:block !important;
}
/* Loading logo glow should be warm, not cyan/pink. */
.loading-dizi-logo{
filter:
drop-shadow(0 0 24px rgba(242,165,26,.24))
drop-shadow(0 0 18px rgba(196,18,26,.20))
drop-shadow(0 10px 22px rgba(0,0,0,.34)) !important;
}
/* Loading status text/dot */
.startup-sync,
#loadingSub{
color:var(--lur-logo-cream) !important;
text-shadow:none !important;
}
.startup-sync::before,
#loadingSub::before{
background:var(--lur-logo-gold) !important;
box-shadow:0 0 0 rgba(242,165,26,.55) !important;
animation:lurLogoSyncPulse 1.15s infinite !important;
}
@keyframes lurLogoSyncPulse{
0%{box-shadow:0 0 0 0 rgba(242,165,26,.55);opacity:.78}
70%{box-shadow:0 0 0 10px rgba(242,165,26,0);opacity:1}
100%{box-shadow:0 0 0 0 rgba(242,165,26,0);opacity:.78}
}
/* Audio unlock / start screen background: remove old neon wash */
#audioUnlockOverlay,
.audio-unlock-overlay{
background:
radial-gradient(circle at 18% 18%, rgba(196,18,26,.16), transparent 30%),
radial-gradient(circle at 82% 20%, rgba(242,165,26,.11), transparent 30%),
linear-gradient(145deg, #11131b, #07080d 54%, #030306) !important;
}
/* Remove old audio unlock neon overlay/pseudo glow */
#audioUnlockOverlay::before,
.audio-unlock-overlay::before{
display:none !important;
content:none !important;
}
/* Audio unlock/start card frame */
.audio-unlock-card,
.unlock-card,
.start-card,
#audioUnlockOverlay .audio-unlock-card,
#audioUnlockOverlay .unlock-card,
#audioUnlockOverlay .start-card,
#audioUnlockOverlay .modal-card{
background:
linear-gradient(180deg, rgba(18,20,28,.96), rgba(6,7,12,.985)) padding-box,
linear-gradient(
135deg,
var(--lur-logo-red) 0%,
var(--lur-logo-red-bright) 24%,
var(--lur-logo-gold) 48%,
var(--lur-logo-cream) 62%,
var(--lur-logo-gold-soft) 74%,
var(--lur-logo-red) 100%
) border-box !important;
border:2px solid transparent !important;
border-image:none !important;
outline:none !important;
box-shadow:
0 26px 80px rgba(0,0,0,.66),
0 0 34px rgba(196,18,26,.18),
0 0 22px rgba(242,165,26,.10),
inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* Audio unlock/start card top line */
.audio-unlock-card::before,
.unlock-card::before,
.start-card::before,
#audioUnlockOverlay .audio-unlock-card::before,
#audioUnlockOverlay .unlock-card::before,
#audioUnlockOverlay .start-card::before,
#audioUnlockOverlay .modal-card::before{
content:"" !important;
position:absolute !important;
top:0 !important;
left:34px !important;
right:34px !important;
height:3px !important;
border-radius:999px !important;
padding:0 !important;
background:linear-gradient(
90deg,
transparent,
var(--lur-logo-red),
var(--lur-logo-gold),
var(--lur-logo-cream),
var(--lur-logo-red),
transparent
) !important;
-webkit-mask:none !important;
mask:none !important;
opacity:.95 !important;
pointer-events:none !important;
display:block !important;
}
/* Start button should match the logo palette, not neon. */
#unlockAudioBtn,
.audio-unlock-card button,
.unlock-card button,
.start-card button,
#audioUnlockOverlay button{
background:linear-gradient(
135deg,
var(--lur-logo-cream) 0%,
var(--lur-logo-gold-soft) 34%,
var(--lur-logo-gold) 62%,
var(--lur-logo-red-bright) 100%
) !important;
color:#160808 !important;
border:1px solid rgba(255,244,220,.38) !important;
box-shadow:
0 16px 36px rgba(0,0,0,.38),
0 0 22px rgba(242,165,26,.14),
inset 0 1px 0 rgba(255,255,255,.42) !important;
text-shadow:none !important;
}
/* Clean up old cyan/magenta text shadows on the start screen */
.unlock-title,
#audioUnlockOverlay h1,
#audioUnlockOverlay h2,
#audioUnlockOverlay p,
.audio-unlock-card h1,
.audio-unlock-card h2,
.audio-unlock-card p,
.unlock-card h1,
.unlock-card h2,
.unlock-card p,
.start-card h1,
.start-card h2,
.start-card p{
text-shadow:none !important;
}
/* ===================== v25 REMOVE EXTRA START/LOADING TOP LINE ONLY =====================
Base: v25 LOGO GRADIENT FRAMES + LOADING/START.
Only change:
- Removes the extra top highlight line on loading/start cards.
- Keeps the smooth red/gold/cream gradient border.
- No board/layout/JS/audio changes.
*/
.loading-shell::before,
.loading-shell.v21-loading-shell::before,
.audio-unlock-card::before,
.unlock-card::before,
.start-card::before,
#audioUnlockOverlay .audio-unlock-card::before,
#audioUnlockOverlay .unlock-card::before,
#audioUnlockOverlay .start-card::before,
#audioUnlockOverlay .modal-card::before{
display:none !important;
content:none !important;
height:0 !important;
background:none !important;
opacity:0 !important;
}
/* Make the border itself slightly cleaner/thinner-looking without changing actual layout. */
.loading-shell,
.loading-shell.v21-loading-shell,
.audio-unlock-card,
.unlock-card,
.start-card,
#audioUnlockOverlay .audio-unlock-card,
#audioUnlockOverlay .unlock-card,
#audioUnlockOverlay .start-card,
#audioUnlockOverlay .modal-card{
box-shadow:
0 26px 80px rgba(0,0,0,.64),
0 0 24px rgba(196,18,26,.14),
0 0 16px rgba(242,165,26,.08),
inset 0 1px 0 rgba(255,255,255,.06) !important;
}
/* ===================== v25 REFINED WARM ALERT / ACK / NEW ONLY =====================
Base: la_ultima_ronda_kds_v25_LOGO_GRADIENT_START_NO_EXTRA_LINE.zip
Only change:
- Replace the rainbow new-order pulse with a vivid red/gold warm pulse.
- Keep the ticket dark; animate only the border/glow/ring.
- Re-theme the Acknowledge button and NEW pill to warm logo colours.
- Do NOT touch layout, page background, screen border, or any other panels.
*/
/* Keep the card dark and crisp. */
.ticket.needs-ack,
.lane-new .ticket.needs-ack{
position:relative!important;
background:rgba(255,255,255,.06)!important;
border:1px solid rgba(234,95,28,.92)!important;
box-shadow:
0 0 0 1px rgba(196,18,26,.28),
0 0 22px rgba(196,18,26,.20),
0 0 34px rgba(242,165,26,.11),
0 16px 32px rgba(0,0,0,.24)!important;
animation:lurWarmPulseCard 1.02s ease-in-out infinite!important;
}
/* Replace the old filled rainbow glow with a border-only warm gradient ring. */
.ticket.needs-ack::before,
.lane-new .ticket.needs-ack::before{
content:""!important;
position:absolute!important;
inset:-4px!important;
padding:3px!important;
border-radius:28px!important;
background:linear-gradient(115deg,
rgba(196,18,26,.98) 0%,
rgba(233,79,32,.98) 22%,
rgba(242,165,26,.98) 52%,
rgba(255,224,132,.95) 72%,
rgba(242,165,26,.98) 84%,
rgba(196,18,26,.98) 100%)!important;
background-size:220% 220%!important;
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)!important;
-webkit-mask-composite:xor!important;
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)!important;
mask-composite:exclude!important;
pointer-events:none!important;
opacity:.82!important;
filter:blur(.3px) saturate(1.06)!important;
z-index:0!important;
animation:lurWarmPulseRing 1.02s ease-in-out infinite!important;
}
/* Keep card content above the ring */
.ticket.needs-ack > *,
.lane-new .ticket.needs-ack > *{position:relative; z-index:1;}
@keyframes lurWarmPulseCard{
0%,100%{
transform:translateY(0) scale(1);
border-color:rgba(203,34,31,.88);
box-shadow:
0 0 0 1px rgba(196,18,26,.22),
0 0 18px rgba(196,18,26,.16),
0 0 24px rgba(242,165,26,.08),
0 16px 32px rgba(0,0,0,.24);
}
50%{
transform:translateY(-2px) scale(1.01);
border-color:rgba(255,202,89,.98);
box-shadow:
0 0 0 2px rgba(242,165,26,.32),
0 0 30px rgba(196,18,26,.24),
0 0 42px rgba(242,165,26,.18),
0 16px 32px rgba(0,0,0,.24);
}
}
@keyframes lurWarmPulseRing{
0%,100%{
opacity:.62;
background-position:0% 50%;
filter:blur(.3px) saturate(1.02);
}
50%{
opacity:1;
background-position:100% 50%;
filter:blur(.6px) saturate(1.15);
}
}
/* Re-theme the actual NEW badge on the ticket */
.ticket.needs-ack::after,
.lane-new .ticket.needs-ack::after,
.ticket-pill-row .fresh-order-pill,
.fresh-order-pill{
background:linear-gradient(135deg,
#fff1cc 0%,
#ffd86f 26%,
#f2a51a 52%,
#ea4f20 78%,
#c4121a 100%)!important;
color:#1a0906!important;
border:0!important;
box-shadow:
0 0 14px rgba(196,18,26,.20),
0 0 20px rgba(242,165,26,.14)!important;
animation:lurWarmBadgePop 1.02s ease-in-out infinite!important;
}
@keyframes lurWarmBadgePop{
0%,100%{transform:scale(1); filter:saturate(1);}
50%{transform:scale(1.08); filter:saturate(1.08);}
}
/* Acknowledge button warm brand gradient instead of old pink palette. */
.ticket-actions .ack-action,
button.ack-action,
.ack-action{
background:linear-gradient(90deg,
#fff3d7 0%,
#ffd96f 18%,
#f5b13a 46%,
#ef7f2b 72%,
#d33822 100%)!important;
color:#170906!important;
border:0!important;
box-shadow:
0 12px 28px rgba(196,18,26,.16),
0 0 20px rgba(242,165,26,.10),
inset 0 1px 0 rgba(255,255,255,.24)!important;
}
/* ===================== v25 VISIBLE FLASH + REMOVE AUDIO PILL ONLY =====================
Base: last usable v25 warm/logo-gradient build.
ONLY changes:
1) Make the unacknowledged new order visibly flash between La Última Ronda reds and yellows.
2) Remove the "Tap Start/Test Audio to unlock loop.mp3" / audio-unlocked pill.
3) Keep layout, panel frames, loading/start frames, app.js, worker.js, and loop.mp3 untouched.
*/
/* Remove the audio-unlocked / start-test-audio floating pill. */
.audio-unlocked-pill,
.audio-unlock-pill,
.audio-test-pill,
.unlock-audio-pill,
.start-audio-pill,
.test-audio-pill,
#audioUnlockedPill,
#audioUnlockPill,
#audioTestPill,
#unlockAudioPill,
#startAudioPill,
#testAudioPill,
[class*="audio"][class*="pill"],
[class*="unlock"][class*="pill"],
[class*="test"][class*="audio"]{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
}
/* The actual unacknowledged ticket now flashes visibly. */
.ticket.needs-ack,
.lane-new .ticket.needs-ack{
position:relative!important;
isolation:isolate!important;
overflow:visible!important;
border-color:#e02b22!important;
background:
linear-gradient(135deg, rgba(112,18,22,.96), rgba(34,24,22,.98) 48%, rgba(111,64,18,.96))!important;
box-shadow:
0 0 0 3px rgba(196,18,26,.42),
0 0 30px rgba(196,18,26,.34),
0 0 58px rgba(242,165,26,.20),
0 20px 48px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.12)!important;
animation:lurCookAlertFlashCard .78s ease-in-out infinite!important;
}
/* Strong outer halo, same behavior as the old neon alert but warm instead of rainbow. */
.ticket.needs-ack::before,
.lane-new .ticket.needs-ack::before{
content:""!important;
position:absolute!important;
inset:-5px!important;
border-radius:30px!important;
pointer-events:none!important;
z-index:-1!important;
background:linear-gradient(
120deg,
rgba(196,18,26,1) 0%,
rgba(232,62,28,1) 28%,
rgba(242,165,26,1) 58%,
rgba(255,221,106,.95) 78%,
rgba(196,18,26,1) 100%
)!important;
background-size:240% 240%!important;
opacity:.82!important;
filter:blur(9px) saturate(1.18)!important;
animation:lurCookAlertFlashHalo .78s ease-in-out infinite!important;
}
/* Make the inner ticket surface itself visibly change, not just the shadow. */
@keyframes lurCookAlertFlashCard{
0%,100%{
transform:translateY(0) scale(1);
border-color:#c4121a;
background:
linear-gradient(135deg, rgba(118,18,23,.97), rgba(39,24,22,.98) 50%, rgba(101,46,18,.96));
box-shadow:
0 0 0 3px rgba(196,18,26,.36),
0 0 26px rgba(196,18,26,.30),
0 0 44px rgba(242,165,26,.12),
0 20px 48px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.12);
}
50%{
transform:translateY(-2px) scale(1.012);
border-color:#ffd24a;
background:
linear-gradient(135deg, rgba(180,42,22,.96), rgba(204,95,24,.94) 45%, rgba(242,165,26,.92));
box-shadow:
0 0 0 4px rgba(255,210,74,.44),
0 0 38px rgba(232,62,28,.42),
0 0 70px rgba(242,165,26,.30),
0 20px 48px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.16);
}
}
@keyframes lurCookAlertFlashHalo{
0%,100%{
opacity:.45;
filter:blur(8px) saturate(1.05);
background-position:0% 50%;
}
50%{
opacity:1;
filter:blur(13px) saturate(1.28);
background-position:100% 50%;
}
}
/* Keep text readable above the flashing surface. */
.ticket.needs-ack *,
.lane-new .ticket.needs-ack *{
position:relative;
z-index:1;
}
/* NEW pill: use the same red/yellow flashing palette. */
.ticket.needs-ack::after,
.lane-new .ticket.needs-ack::after,
.ticket-pill-row .fresh-order-pill,
.fresh-order-pill{
background:linear-gradient(135deg,#fff0bd 0%,#ffd24a 28%,#f2a51a 54%,#ef5b22 78%,#c4121a 100%)!important;
color:#1b0805!important;
border:0!important;
box-shadow:
0 0 16px rgba(196,18,26,.34),
0 0 22px rgba(242,165,26,.18)!important;
animation:lurCookAlertBadgeFlash .78s ease-in-out infinite!important;
}
@keyframes lurCookAlertBadgeFlash{
0%,100%{
transform:scale(1);
filter:saturate(1);
box-shadow:0 0 13px rgba(196,18,26,.30);
}
50%{
transform:scale(1.10);
filter:saturate(1.18);
box-shadow:0 0 24px rgba(242,165,26,.34);
}
}
/* Acknowledge button: remove the old pink/magenta end colour. */
.ticket-actions .ack-action,
button.ack-action,
.ack-action{
background:linear-gradient(90deg,#fff1c2 0%,#ffd24a 22%,#f2a51a 48%,#ef6b24 75%,#c4121a 100%)!important;
color:#190805!important;
border:0!important;
box-shadow:
0 12px 28px rgba(196,18,26,.20),
0 0 22px rgba(242,165,26,.12),
inset 0 1px 0 rgba(255,255,255,.28)!important;
}
/* =====================================================================
LUR FINAL OVERRIDE — v25-final
Exact fixes applied on top of v25 VISIBLE FLASH base:
BUG 1 — Halo z-index invisible:
The ::before halo uses z-index:-1. For this to appear as a glow
AROUND the ticket, the nearest ancestor that creates a stacking
context must be the LANE, not the ticket itself.
Fix: add isolation:isolate to .lane-new (creates SC without
changing the containing block for position:absolute), plus
overflow:visible so the outer blur can extend past ticket edges.
Remove isolation:isolate from .ticket.needs-ack (was trapping
the halo inside the ticket behind its own background).
BUG 2 — Done Queue squashing:
Tickets inside .ticket-list are flex children with flex-shrink:1
by default, so they compress when the list is full instead of
scrolling. Fix: flex-shrink:0.
BUG 3 — Toast "Tap Start/Test Audio" repeats every second:
Fixed in app.js with a 30 s debounce flag.
NO layout, panel, or app logic changes.
All animation colours, timing, and structure preserved from
the existing lurCookAlertFlash* keyframes.
===================================================================== */
/* ── Stacking context: on the LANE not the ticket ───────────────────── */
.lane-new {
isolation: isolate !important; /* creates SC so ::before{z-index:-1} is correct */
overflow: visible !important; /* outer blur/glow extends past ticket edges */
}
/* ── The pulsing card — exactly the original v44 selectors & mechanics ─ */
/* Override the isolation:isolate that was (wrongly) on the ticket */
.ticket.needs-ack,
.lane-new .ticket.needs-ack {
position: relative !important;
isolation: auto !important; /* ticket must NOT create own stacking context */
overflow: visible !important;
border-color: #c4121a !important;
box-shadow:
0 0 0 3px rgba(196,18,26,.44),
0 0 34px rgba(196,18,26,.40),
0 0 58px rgba(242,165,26,.20),
0 20px 48px rgba(0,0,0,.52),
inset 0 1px 0 rgba(255,255,255,.12) !important;
animation: lurFinalCard .78s ease-in-out infinite !important;
}
/* ── External blurred halo — same inset/blur/z-index as original v44 ─── */
.ticket.needs-ack::before,
.lane-new .ticket.needs-ack::before {
content: "" !important;
position: absolute !important;
inset: -5px !important;
border-radius: 30px !important;
pointer-events: none !important;
background: linear-gradient(
120deg,
rgba(196,18,26,1.00) 0%,
rgba(232,62,28,1.00) 26%,
rgba(242,165,26,1.00) 54%,
rgba(255,220,106,.96) 74%,
rgba(196,18,26,1.00) 100%
) !important;
background-size: 240% 240% !important;
opacity: .85 !important;
z-index: -1 !important; /* below ticket, above lane bg via lane-new isolation:isolate */
filter: blur(9px) !important;
animation: lurFinalHalo .78s ease-in-out infinite !important;
}
/* ── Content always readable above the halo ─────────────────────────── */
.ticket.needs-ack > *,
.lane-new .ticket.needs-ack > * {
position: relative !important;
z-index: 1 !important;
}
/* ── Card pulse: border cycles red ↔ gold, lift, shadow blooms ─────────
Timing: .78s — fast enough to be eye-catching from across the kitchen */
@keyframes lurFinalCard {
0%, 100% {
transform: translateY(0) scale(1);
border-color: #c4121a;
box-shadow:
0 0 0 3px rgba(196,18,26,.40),
0 0 28px rgba(196,18,26,.34),
0 0 48px rgba(242,165,26,.14),
0 20px 48px rgba(0,0,0,.52),
inset 0 1px 0 rgba(255,255,255,.12);
}
50% {
transform: translateY(-3px) scale(1.014);
border-color: #ffd24a;
box-shadow:
0 0 0 5px rgba(255,210,74,.55),
0 0 42px rgba(232,62,28,.50),
0 0 76px rgba(242,165,26,.34),
0 20px 48px rgba(0,0,0,.52),
inset 0 1px 0 rgba(255,255,255,.20);
}
}
/* ── Halo pulse: opacity and blur cycle, background position sweeps ──── */
@keyframes lurFinalHalo {
0%, 100% {
opacity: .42;
filter: blur(9px);
background-position: 0% 50%;
}
50% {
opacity: .98;
filter: blur(14px);
background-position: 100% 50%;
}
}
/* ── NEW badge / fresh-order-pill ────────────────────────────────────── */
.ticket.needs-ack::after,
.lane-new .ticket.needs-ack::after,
.ticket-pill-row .fresh-order-pill,
.fresh-order-pill {
background: linear-gradient(135deg,
#fff1cc 0%,
#ffd24a 26%,
#f2a51a 52%,
#ef5b22 78%,
#c4121a 100%
) !important;
color: #1b0805 !important;
border: 0 !important;
box-shadow:
0 0 16px rgba(196,18,26,.36),
0 0 24px rgba(242,165,26,.20) !important;
animation: lurFinalBadge .78s ease-in-out infinite !important;
}
@keyframes lurFinalBadge {
0%, 100% { transform: scale(1); filter: saturate(1); }
50% { transform: scale(1.10); filter: saturate(1.22); }
}
/* ── Acknowledged — clear the halo ──────────────────────────────────── */
.ticket.acknowledged:not(.needs-ack),
.lane-new .ticket.acknowledged:not(.needs-ack) {
animation: none !important;
}
.ticket.acknowledged:not(.needs-ack)::before,
.ticket.acknowledged:not(.needs-ack)::after,
.lane-new .ticket.acknowledged:not(.needs-ack)::before,
.lane-new .ticket.acknowledged:not(.needs-ack)::after {
display: none !important;
animation: none !important;
}
/* ── Non-needs-ack new tickets — no stray animation ─────────────────── */
.ticket.new:not(.needs-ack),
.lane-new .ticket.new:not(.needs-ack) { animation: none !important; }
.ticket.new:not(.needs-ack)::before,
.ticket.new:not(.needs-ack)::after,
.lane-new .ticket.new:not(.needs-ack)::before,
.lane-new .ticket.new:not(.needs-ack)::after { animation: none !important; }
/* ── Acknowledge button ──────────────────────────────────────────────── */
.ticket-actions .ack-action,
button.ack-action,
.ack-action {
background: linear-gradient(90deg,
#fff1c2 0%,
#ffd24a 22%,
#f2a51a 48%,
#ef6b24 75%,
#c4121a 100%
) !important;
color: #190805 !important;
border: 0 !important;
box-shadow:
0 12px 28px rgba(196,18,26,.22),
0 0 24px rgba(242,165,26,.14),
inset 0 1px 0 rgba(255,255,255,.28) !important;
}
/* ── Done Queue: NEVER squash — always scroll ────────────────────────── */
/* flex-shrink:1 default was compressing tickets; this forces proper scroll */
.ticket-list .ticket { flex-shrink: 0 !important; }
/* ── Reduced motion: static visible state ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.ticket.needs-ack,
.lane-new .ticket.needs-ack,
.ticket.needs-ack::before,
.lane-new .ticket.needs-ack::before,
.ticket.needs-ack::after,
.lane-new .ticket.needs-ack::after,
.ticket-pill-row .fresh-order-pill,
.fresh-order-pill { animation: none !important; }
.ticket.needs-ack,
.lane-new .ticket.needs-ack {
border-color: #ffd24a !important;
box-shadow: 0 0 0 4px rgba(255,210,74,.55), 0 0 40px rgba(232,62,28,.42) !important;
}
}
/* ===================== ARCHIVE 8 KITCHEN / BAR START MODE ===================== */
.kds-mode-start{
width:min(720px, 86vw);
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:18px;
}
.mode-start-btn{
min-height:118px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
padding:22px 18px!important;
border-radius:28px!important;
text-align:center!important;
line-height:1!important;
letter-spacing:.08em!important;
}
.mode-start-btn span{
display:block;
font-size:clamp(1.55rem, 3vw, 2.8rem);
font-weight:1000;
}
.mode-start-btn small{
display:block;
font-size:clamp(.82rem, 1.2vw, 1rem);
font-weight:900;
letter-spacing:.20em;
opacity:.82;
}
.mode-kitchen{
background:linear-gradient(135deg,#fff1c2 0%,#ffd24a 22%,#f2a51a 48%,#ef6b24 75%,#c4121a 100%)!important;
color:#190805!important;
}
.mode-bar{
background:linear-gradient(135deg,#fefefe 0%,#d8ecff 22%,#7bc5ff 52%,#1778d4 78%,#0a2e76 100%)!important;
color:#07101c!important;
}
.mode-kitchen::after,
.mode-bar::after{
content:none!important;
}
@media(max-width:700px){
.kds-mode-start{
grid-template-columns:1fr;
}
}
/* ===================== ARCHIVE 8 KITCHEN / BAR MODE v2 FIX =====================
Fixes:
- Start buttons now fit cleanly inside the card.
- Buttons are equal width and do not spill out of the modal.
- Header logo area is clickable as a "back to selector" control.
- Main screen shows a clear Cocina/Kitchen or Barra/Bar mode pill.
*/
.audio-unlock-card{
width:min(780px, calc(100vw - 56px))!important;
max-width:min(780px, calc(100vw - 56px))!important;
overflow:hidden!important;
box-sizing:border-box!important;
padding:38px 34px 36px!important;
}
.audio-unlock-card .unlock-logo{
width:118px!important;
max-width:32vw!important;
margin:0 auto 26px!important;
display:block!important;
}
.audio-unlock-card .kds-mode-start{
width:100%!important;
max-width:100%!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:20px!important;
margin:0!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.audio-unlock-card .mode-start-btn,
.audio-unlock-card button.mode-start-btn,
.audio-unlock-card .huge-btn.mode-start-btn{
width:100%!important;
min-width:0!important;
max-width:100%!important;
height:auto!important;
min-height:138px!important;
margin:0!important;
padding:26px 16px!important;
border-radius:26px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:12px!important;
box-sizing:border-box!important;
overflow:hidden!important;
white-space:normal!important;
text-align:center!important;
letter-spacing:.06em!important;
transform:none!important;
}
.audio-unlock-card .mode-start-btn span{
display:block!important;
width:100%!important;
font-size:clamp(2.05rem, 4.2vw, 3.2rem)!important;
line-height:.95!important;
font-weight:1000!important;
letter-spacing:.14em!important;
overflow:hidden!important;
text-overflow:clip!important;
}
.audio-unlock-card .mode-start-btn small{
display:block!important;
width:100%!important;
font-size:clamp(.85rem, 1.35vw, 1.08rem)!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:.24em!important;
opacity:.82!important;
}
.audio-unlock-card .mode-kitchen{
background:linear-gradient(135deg,#fff1c2 0%,#ffd24a 24%,#f2a51a 50%,#ef6b24 76%,#c4121a 100%)!important;
color:#190805!important;
}
.audio-unlock-card .mode-bar{
background:linear-gradient(135deg,#fff7dc 0%,#ffd56a 24%,#f2a51a 50%,#e85724 76%,#9e1018 100%)!important;
color:#190805!important;
}
.audio-unlock-card .mode-start-btn::before,
.audio-unlock-card .mode-start-btn::after{
content:none!important;
display:none!important;
}
.brand-home-btn{
cursor:pointer!important;
user-select:none!important;
border-radius:18px!important;
padding:4px 10px 4px 0!important;
transition:background .12s ease, transform .12s ease, opacity .12s ease!important;
}
.brand-home-btn:hover{
background:rgba(255,255,255,.045)!important;
}
.brand-home-btn:active{
transform:scale(.992)!important;
opacity:.88!important;
}
.mode-pill{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
margin-top:7px!important;
padding:5px 12px!important;
border-radius:999px!important;
font-size:.72rem!important;
font-weight:1000!important;
letter-spacing:.15em!important;
line-height:1!important;
text-transform:uppercase!important;
box-shadow:0 8px 20px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.mode-pill-kitchen{
color:#160705!important;
background:linear-gradient(135deg,#fff1c2,#ffd24a 32%,#ef6b24 72%,#c4121a)!important;
border:1px solid rgba(255,244,220,.32)!important;
}
.mode-pill-bar{
color:#160705!important;
background:linear-gradient(135deg,#fff7dc,#ffd56a 32%,#f2a51a 62%,#9e1018)!important;
border:1px solid rgba(255,244,220,.32)!important;
}
.topbar h1{
display:flex!important;
align-items:center!important;
gap:10px!important;
}
/* subtle board mode accent */
body.kds-mode-kitchen .lane-new .lane-head h2::after{
content:" · COCINA"!important;
opacity:.62!important;
font-size:.72em!important;
letter-spacing:.16em!important;
}
body.kds-mode-bar .lane-new .lane-head h2::after{
content:" · BARRA"!important;
opacity:.72!important;
font-size:.72em!important;
letter-spacing:.16em!important;
}
body.kds-mode-bar .lane-new{
border-color:rgba(242,165,26,.50)!important;
}
@media(max-width:720px){
.audio-unlock-card{
width:calc(100vw - 34px)!important;
padding:30px 22px!important;
}
.audio-unlock-card .kds-mode-start{
grid-template-columns:1fr!important;
gap:16px!important;
}
.audio-unlock-card .mode-start-btn,
.audio-unlock-card button.mode-start-btn{
min-height:112px!important;
}
}
/* ===================== ARCHIVE 8 v6 VISUAL POLISH =====================
UI only:
- Loading/start screens use La Última Ronda red/orange/yellow, not old DiZi neon purple/blue.
- Kitchen/Bar selector buttons are clearer and visually distinct.
- Mode pill matches Connected to Server pill height/shape and removes the small clipping/glitch.
*/
/* Make all startup overlays match the warm La Última Ronda theme. */
.loading-screen,
.audio-unlock-overlay{
background:
radial-gradient(circle at 18% 22%, rgba(158,16,24,.34), transparent 34%),
radial-gradient(circle at 78% 18%, rgba(242,165,26,.26), transparent 32%),
radial-gradient(circle at 50% 88%, rgba(239,91,34,.18), transparent 38%),
linear-gradient(135deg, #050305 0%, #120709 34%, #1b0907 62%, #070505 100%)!important;
}
/* Remove any remaining old purple/blue cast on loading panels. */
.loading-shell,
.audio-unlock-card{
background:
linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
radial-gradient(circle at 20% 0%, rgba(196,18,26,.18), transparent 42%),
radial-gradient(circle at 90% 12%, rgba(242,165,26,.16), transparent 38%),
rgba(10,8,10,.70)!important;
border:1px solid rgba(255,244,220,.16)!important;
box-shadow:
0 32px 88px rgba(0,0,0,.52),
0 0 0 1px rgba(255,255,255,.035) inset,
0 0 38px rgba(196,18,26,.10)!important;
}
.loading-shell::before,
.audio-unlock-card::before{
background:linear-gradient(90deg, #c4121a 0%, #ef5b22 35%, #f2a51a 70%, #fff1c2 100%)!important;
opacity:.9!important;
}
/* Start card sizing polish */
.audio-unlock-card{
width:min(820px, calc(100vw - 64px))!important;
max-width:min(820px, calc(100vw - 64px))!important;
padding:40px 38px 38px!important;
border-radius:34px!important;
overflow:hidden!important;
}
.audio-unlock-card .unlock-logo{
width:132px!important;
max-width:34vw!important;
margin:0 auto 28px!important;
filter:drop-shadow(0 16px 26px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(242,165,26,.18))!important;
}
.audio-unlock-card .kds-mode-start{
width:100%!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:22px!important;
margin:0!important;
overflow:visible!important;
}
/* Clearer, distinct buttons */
.audio-unlock-card .mode-start-btn{
position:relative!important;
isolation:isolate!important;
min-height:154px!important;
border-radius:30px!important;
padding:28px 18px!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.22)!important;
box-shadow:
0 24px 46px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.34)!important;
transform:translateZ(0)!important;
}
.audio-unlock-card .mode-start-btn::before{
content:""!important;
position:absolute!important;
inset:0!important;
z-index:-1!important;
background:
linear-gradient(135deg, rgba(255,255,255,.34), transparent 38%),
radial-gradient(circle at 20% 20%, rgba(255,255,255,.28), transparent 35%)!important;
opacity:.72!important;
display:block!important;
}
.audio-unlock-card .mode-start-btn span{
font-size:clamp(2.18rem, 4.6vw, 3.5rem)!important;
line-height:.92!important;
font-weight:1000!important;
letter-spacing:.16em!important;
text-shadow:0 1px 0 rgba(255,255,255,.22)!important;
}
.audio-unlock-card .mode-start-btn small{
margin-top:2px!important;
font-size:clamp(.68rem, 1vw, .86rem)!important;
line-height:1.25!important;
font-weight:1000!important;
letter-spacing:.145em!important;
opacity:.92!important;
white-space:normal!important;
}
/* Kitchen = hot red/orange food side */
.audio-unlock-card .mode-kitchen{
background:
linear-gradient(135deg, #fff0bd 0%, #ffd24a 21%, #f2a51a 43%, #ef6b24 68%, #c4121a 100%)!important;
color:#170604!important;
}
/* Bar = darker amber/red glass so it is clearly different but still branded */
.audio-unlock-card .mode-bar{
background:
linear-gradient(135deg, #3b0809 0%, #7b1118 25%, #c4121a 48%, #ef6b24 72%, #f2a51a 100%)!important;
color:#fff4dc!important;
text-shadow:0 1px 1px rgba(0,0,0,.34)!important;
}
.audio-unlock-card .mode-bar small,
.audio-unlock-card .mode-bar span{
text-shadow:0 2px 2px rgba(0,0,0,.40)!important;
}
/* Remove previous hidden/pseudo rule conflicts on mode buttons */
.audio-unlock-card .mode-start-btn::after{
content:none!important;
display:none!important;
}
/* Header mode pill: match Connected to Server size/shape, fix clipping/glitch. */
.brand-block{
align-items:center!important;
}
#modePill.mode-pill{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:26px!important;
min-height:26px!important;
box-sizing:border-box!important;
padding:0 14px!important;
margin:0!important;
border-radius:999px!important;
font-size:.72rem!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:.18em!important;
white-space:nowrap!important;
overflow:hidden!important;
transform:none!important;
vertical-align:middle!important;
box-shadow:
0 10px 20px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.22)!important;
}
/* Color distinct from the green connected pill, but same pill language. */
#modePill.mode-pill-kitchen{
color:#1a0704!important;
background:linear-gradient(135deg,#fff1c2 0%,#ffd24a 38%,#ef6b24 78%,#c4121a 100%)!important;
border:1px solid rgba(255,210,74,.42)!important;
}
#modePill.mode-pill-bar{
color:#fff4dc!important;
background:linear-gradient(135deg,#3b0809 0%,#7b1118 28%,#c4121a 64%,#ef6b24 100%)!important;
border:1px solid rgba(239,91,34,.42)!important;
}
/* Keep connection pill aligned beside mode pill visually. */
.connection-status{
min-height:28px!important;
height:28px!important;
box-sizing:border-box!important;
align-items:center!important;
}
/* Better loading text color on warm theme */
.startup-sync,
#loadingSub{
color:#fff4dc!important;
text-shadow:0 2px 18px rgba(0,0,0,.45)!important;
}
.startup-sync::before{
background:#f2a51a!important;
box-shadow:0 0 14px rgba(242,165,26,.45)!important;
}
/* Main mode accent, without layout shifts */
body.kds-mode-bar .lane-new .lane-head h2::after,
body.kds-mode-kitchen .lane-new .lane-head h2::after{
opacity:.0!important;
content:""!important;
}
/* Mobile/tablet fallback */
@media(max-width:720px){
.audio-unlock-card{
width:calc(100vw - 34px)!important;
padding:30px 22px!important;
}
.audio-unlock-card .kds-mode-start{
grid-template-columns:1fr!important;
gap:16px!important;
}
.audio-unlock-card .mode-start-btn{
min-height:122px!important;
}
}
/* ===================== ARCHIVE 8 v7 STRONGER VISUAL FIX =====================
CSS-only. This intentionally sits at the very end of the stylesheet.
It overrides older DiZi purple/blue startup backgrounds, makes Cocina/Barra
visually distinct, and forces the mode pill to match the connection pill.
*/
/* 1) FIRST LOADING SCREEN + SELECTOR BACKGROUND: force warm Ronda palette everywhere */
html,
body,
#app.app-shell,
.app-shell,
.loading-screen,
.audio-unlock-overlay{
background-color:#050303!important;
background-image:
radial-gradient(circle at 12% 14%, rgba(196,18,26,.36) 0, transparent 34%),
radial-gradient(circle at 86% 16%, rgba(242,165,26,.30) 0, transparent 34%),
radial-gradient(circle at 50% 92%, rgba(239,91,34,.20) 0, transparent 42%),
linear-gradient(135deg, #040303 0%, #100506 32%, #1a0707 58%, #070403 100%)!important;
background-attachment:fixed!important;
}
/* Override old blue/purple pseudo washes if they exist */
.loading-screen::before,
.loading-screen::after,
.audio-unlock-overlay::before,
.audio-unlock-overlay::after,
.app-shell::before,
.app-shell::after{
background-image:
radial-gradient(circle at 18% 18%, rgba(196,18,26,.18), transparent 36%),
radial-gradient(circle at 82% 20%, rgba(242,165,26,.14), transparent 34%)!important;
background-color:transparent!important;
opacity:.75!important;
}
/* Loading card itself */
.loading-screen .loading-shell,
.audio-unlock-overlay .audio-unlock-card{
background:
linear-gradient(135deg, rgba(255,244,220,.085), rgba(255,244,220,.025)),
radial-gradient(circle at 16% 8%, rgba(196,18,26,.20), transparent 42%),
radial-gradient(circle at 92% 12%, rgba(242,165,26,.16), transparent 38%),
rgba(10,7,7,.76)!important;
border:1px solid rgba(255,213,106,.22)!important;
box-shadow:
0 34px 94px rgba(0,0,0,.58),
0 0 0 1px rgba(255,255,255,.04) inset,
0 0 38px rgba(196,18,26,.13)!important;
}
/* Kill old purple/blue inside loading shell if inherited */
.loading-screen .loading-shell *,
.audio-unlock-overlay .audio-unlock-card *{
--neon-pink:#c4121a!important;
--neon-blue:#f2a51a!important;
--neon-cyan:#ffd56a!important;
}
/* 2) BUTTON SCREEN: make Cocina and Barra very clearly different */
.audio-unlock-overlay .audio-unlock-card{
width:min(900px, calc(100vw - 72px))!important;
max-width:min(900px, calc(100vw - 72px))!important;
padding:42px 42px 40px!important;
border-radius:34px!important;
overflow:hidden!important;
}
.audio-unlock-overlay .audio-unlock-card .unlock-logo{
width:128px!important;
margin:0 auto 30px!important;
}
.audio-unlock-overlay .audio-unlock-card .kds-mode-start{
width:100%!important;
max-width:100%!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:24px!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
}
.audio-unlock-overlay .audio-unlock-card button.mode-start-btn,
.audio-unlock-overlay .audio-unlock-card .huge-btn.mode-start-btn,
#audioUnlockOverlay button#kdsKitchenBtn.mode-start-btn,
#audioUnlockOverlay button#kdsBarBtn.mode-start-btn{
position:relative!important;
isolation:isolate!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
min-height:164px!important;
height:164px!important;
padding:28px 18px!important;
margin:0!important;
border-radius:32px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:14px!important;
box-sizing:border-box!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.20)!important;
transform:none!important;
white-space:normal!important;
text-align:center!important;
box-shadow:
0 26px 52px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.34),
inset 0 -24px 42px rgba(0,0,0,.10)!important;
}
#audioUnlockOverlay button#kdsKitchenBtn.mode-start-btn{
background:
linear-gradient(135deg, rgba(255,255,255,.34), transparent 35%),
linear-gradient(135deg, #fff4dc 0%, #ffd56a 24%, #f2a51a 48%, #ef5b22 73%, #c4121a 100%)!important;
color:#160604!important;
}
#audioUnlockOverlay button#kdsBarBtn.mode-start-btn{
background:
linear-gradient(135deg, rgba(255,255,255,.12), transparent 38%),
linear-gradient(135deg, #170405 0%, #4f090d 24%, #9e1018 50%, #c4121a 72%, #ef5b22 100%)!important;
color:#fff4dc!important;
border-color:rgba(239,91,34,.42)!important;
box-shadow:
0 26px 52px rgba(0,0,0,.50),
0 0 28px rgba(196,18,26,.18),
inset 0 1px 0 rgba(255,255,255,.20),
inset 0 -28px 48px rgba(0,0,0,.22)!important;
}
#audioUnlockOverlay button#kdsKitchenBtn.mode-start-btn::before,
#audioUnlockOverlay button#kdsBarBtn.mode-start-btn::before{
content:""!important;
position:absolute!important;
inset:0!important;
z-index:-1!important;
background:
radial-gradient(circle at 22% 20%, rgba(255,255,255,.35), transparent 34%),
linear-gradient(160deg, rgba(255,255,255,.22), transparent 46%)!important;
opacity:.72!important;
display:block!important;
}
#audioUnlockOverlay button#kdsKitchenBtn.mode-start-btn::after{
content:"FOOD"!important;
position:absolute!important;
top:14px!important;
right:16px!important;
display:inline-flex!important;
height:24px!important;
align-items:center!important;
padding:0 10px!important;
border-radius:999px!important;
background:rgba(22,6,4,.16)!important;
color:#160604!important;
font-size:.62rem!important;
letter-spacing:.15em!important;
font-weight:1000!important;
}
#audioUnlockOverlay button#kdsBarBtn.mode-start-btn::after{
content:"DRINKS"!important;
position:absolute!important;
top:14px!important;
right:16px!important;
display:inline-flex!important;
height:24px!important;
align-items:center!important;
padding:0 10px!important;
border-radius:999px!important;
background:rgba(255,244,220,.16)!important;
color:#fff4dc!important;
font-size:.62rem!important;
letter-spacing:.15em!important;
font-weight:1000!important;
}
#audioUnlockOverlay .mode-start-btn span{
display:block!important;
width:100%!important;
font-size:clamp(2.25rem, 4.8vw, 3.62rem)!important;
line-height:.9!important;
font-weight:1000!important;
letter-spacing:.18em!important;
text-align:center!important;
white-space:nowrap!important;
}
#audioUnlockOverlay .mode-start-btn small{
display:block!important;
width:100%!important;
font-size:clamp(.68rem, 1vw, .84rem)!important;
line-height:1.15!important;
font-weight:1000!important;
letter-spacing:.13em!important;
text-align:center!important;
white-space:normal!important;
opacity:.95!important;
}
/* 3) MODE PILL: exactly same sizing language as Connected to Server */
.brand-block{
align-items:center!important;
}
.brand-block > div{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
}
#modePill.mode-pill,
#modePill.mode-pill.mode-pill-kitchen,
#modePill.mode-pill.mode-pill-bar{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:26px!important;
min-height:26px!important;
max-height:26px!important;
line-height:1!important;
box-sizing:border-box!important;
padding:0 14px!important;
margin:0!important;
border-radius:999px!important;
font-family:inherit!important;
font-size:.72rem!important;
font-weight:1000!important;
letter-spacing:.16em!important;
text-transform:uppercase!important;
white-space:nowrap!important;
overflow:hidden!important;
vertical-align:middle!important;
transform:none!important;
position:relative!important;
top:0!important;
min-width:0!important;
box-shadow:
0 10px 20px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.20)!important;
}
#modePill.mode-pill::before,
#modePill.mode-pill::after{
content:none!important;
display:none!important;
}
#modePill.mode-pill-kitchen{
color:#1a0704!important;
background:linear-gradient(135deg,#fff4dc 0%,#ffd56a 34%,#ef6b24 78%,#c4121a 100%)!important;
border:1px solid rgba(255,213,106,.42)!important;
}
#modePill.mode-pill-bar{
color:#fff4dc!important;
background:linear-gradient(135deg,#3b0809 0%,#7b1118 30%,#c4121a 66%,#ef5b22 100%)!important;
border:1px solid rgba(239,91,34,.46)!important;
}
/* Match the connected pill dimensions next to it. */
#connectionStatus.connection-status,
.connection-status{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
line-height:30px!important;
box-sizing:border-box!important;
padding-top:0!important;
padding-bottom:0!important;
margin-top:5px!important;
}
/* On very small screens, stack buttons without losing the clear difference. */
@media(max-width:720px){
.audio-unlock-overlay .audio-unlock-card{
width:calc(100vw - 34px)!important;
padding:30px 22px!important;
}
.audio-unlock-overlay .audio-unlock-card .kds-mode-start{
grid-template-columns:1fr!important;
gap:16px!important;
}
.audio-unlock-overlay .audio-unlock-card button.mode-start-btn{
min-height:126px!important;
height:126px!important;
}
}
/* ===================== ARCHIVE 8 v8 EXACT VISUAL FIX =====================
Final CSS-only visual correction. This block intentionally sits LAST.
*/
/* Shared warm background used by BOTH the first loading screen and the selector screen. */
:root{
--lur-warm-bg:
radial-gradient(circle at 13% 16%, rgba(120, 10, 16, .32) 0, transparent 31%),
radial-gradient(circle at 86% 19%, rgba(148, 86, 6, .28) 0, transparent 33%),
radial-gradient(circle at 52% 88%, rgba(84, 24, 4, .18) 0, transparent 42%),
linear-gradient(135deg, #050405 0%, #0c0909 39%, #161009 66%, #060505 100%);
}
/* Force the first loading screen to match the selector background exactly. */
html,
body,
#app,
#app.app-shell,
.app-shell,
section#loadingScreen.loading-screen,
#loadingScreen,
aside#audioUnlockOverlay.audio-unlock-overlay,
#audioUnlockOverlay{
background:var(--lur-warm-bg)!important;
background-color:#050405!important;
background-attachment:fixed!important;
}
/* Remove old purple/blue gradient overlays from the first loading screen. */
section#loadingScreen.loading-screen::before,
section#loadingScreen.loading-screen::after,
#loadingScreen::before,
#loadingScreen::after,
aside#audioUnlockOverlay.audio-unlock-overlay::before,
aside#audioUnlockOverlay.audio-unlock-overlay::after,
#audioUnlockOverlay::before,
#audioUnlockOverlay::after{
background:transparent!important;
background-image:none!important;
opacity:0!important;
display:none!important;
content:none!important;
}
/* Make first loading card and selector panel the same family. */
#loadingScreen .loading-shell,
.loading-screen .loading-shell,
#audioUnlockOverlay .audio-unlock-card,
.audio-unlock-overlay .audio-unlock-card{
background:
linear-gradient(135deg, rgba(255,244,220,.055), rgba(255,255,255,.018)),
rgba(12,10,10,.78)!important;
border:1px solid rgba(255,213,106,.24)!important;
border-radius:34px!important;
box-shadow:
0 34px 94px rgba(0,0,0,.58),
0 0 0 1px rgba(255,255,255,.035) inset,
0 0 42px rgba(196,18,26,.10)!important;
}
/* A simple warm top hairline on both panels, not purple/blue. */
#loadingScreen .loading-shell::before,
#audioUnlockOverlay .audio-unlock-card::before{
background:linear-gradient(90deg,#c4121a 0%,#ef5b22 40%,#f2a51a 78%,#fff1c2 100%)!important;
opacity:.9!important;
}
/* Loading text must be simple. */
#loadingSub,
.startup-sync{
color:#fff4dc!important;
}
#loadingSub::after,
.startup-sync::after{
content:none!important;
}
/* Rebuild selector panel layout cleanly. */
#audioUnlockOverlay .audio-unlock-card{
width:min(900px, calc(100vw - 72px))!important;
max-width:min(900px, calc(100vw - 72px))!important;
padding:42px 42px 40px!important;
overflow:hidden!important;
}
#audioUnlockOverlay .unlock-logo{
width:126px!important;
margin:0 auto 30px!important;
display:block!important;
}
#audioUnlockOverlay .kds-mode-start{
width:100%!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:24px!important;
margin:0!important;
padding:0!important;
}
/* Modern glass buttons without food/drinks pills or weird pseudo-chip artifacts. */
#audioUnlockOverlay button.mode-start-btn,
#audioUnlockOverlay .huge-btn.mode-start-btn,
#audioUnlockOverlay #kdsKitchenBtn,
#audioUnlockOverlay #kdsBarBtn{
position:relative!important;
isolation:isolate!important;
width:100%!important;
height:166px!important;
min-height:166px!important;
max-height:166px!important;
margin:0!important;
padding:26px 18px!important;
border-radius:34px!important;
box-sizing:border-box!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
overflow:hidden!important;
transform:none!important;
white-space:normal!important;
text-align:center!important;
border:1px solid rgba(255,255,255,.18)!important;
box-shadow:
0 26px 54px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.28),
inset 0 -22px 44px rgba(0,0,0,.10)!important;
}
/* Remove ALL old chip/glitch pseudo elements from prior versions. */
#audioUnlockOverlay button.mode-start-btn::before,
#audioUnlockOverlay button.mode-start-btn::after,
#audioUnlockOverlay #kdsKitchenBtn::before,
#audioUnlockOverlay #kdsKitchenBtn::after,
#audioUnlockOverlay #kdsBarBtn::before,
#audioUnlockOverlay #kdsBarBtn::after{
content:none!important;
display:none!important;
background:none!important;
opacity:0!important;
}
/* Cocina: light premium warm glass */
#audioUnlockOverlay #kdsKitchenBtn{
background:
radial-gradient(circle at 20% 18%, rgba(255,255,255,.44), transparent 34%),
linear-gradient(135deg, #fff7df 0%, #ffd56a 30%, #f2a51a 58%, #e95b22 100%)!important;
color:#160604!important;
}
/* Barra: dark premium red glass, clearly different */
#audioUnlockOverlay #kdsBarBtn{
background:
radial-gradient(circle at 18% 16%, rgba(255,255,255,.16), transparent 34%),
linear-gradient(135deg, #170405 0%, #540b0f 35%, #9e1018 67%, #e85b23 100%)!important;
color:#fff4dc!important;
border-color:rgba(239,91,34,.42)!important;
}
/* Icons added as real text elements, not pseudo graphics, so no glitches. */
#audioUnlockOverlay .mode-icon{
display:block!important;
width:auto!important;
margin:0 0 6px!important;
font-size:2.15rem!important;
line-height:1!important;
letter-spacing:0!important;
filter:drop-shadow(0 7px 12px rgba(0,0,0,.26))!important;
}
#audioUnlockOverlay .mode-main{
display:block!important;
width:100%!important;
font-size:clamp(2.05rem, 4.3vw, 3.25rem)!important;
line-height:.92!important;
font-weight:1000!important;
letter-spacing:.17em!important;
text-align:center!important;
white-space:nowrap!important;
}
#audioUnlockOverlay .mode-start-btn small{
display:block!important;
width:100%!important;
font-size:clamp(.78rem, 1.1vw, .96rem)!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:.24em!important;
text-align:center!important;
opacity:.88!important;
white-space:nowrap!important;
}
/* Top-left header layout: mode pill and connected pill MUST sit side-by-side. */
header.topbar .brand-block,
.topbar .brand-block{
display:flex!important;
align-items:center!important;
gap:14px!important;
flex-wrap:nowrap!important;
}
header.topbar .brand-block > div,
.topbar .brand-block > div{
display:grid!important;
grid-template-columns:auto auto!important;
grid-template-rows:auto auto!important;
column-gap:10px!important;
row-gap:5px!important;
align-items:center!important;
}
header.topbar .brand-block h1,
.topbar .brand-block h1{
grid-column:1 / -1!important;
grid-row:1!important;
margin:0!important;
}
#modePill.mode-pill{
grid-column:1!important;
grid-row:2!important;
}
#connectionStatus.connection-status{
grid-column:2!important;
grid-row:2!important;
}
/* Exact uniform pill geometry. */
#modePill.mode-pill,
#connectionStatus.connection-status{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
line-height:30px!important;
box-sizing:border-box!important;
padding:0 16px!important;
margin:0!important;
border-radius:999px!important;
font-size:.72rem!important;
font-weight:1000!important;
letter-spacing:.16em!important;
white-space:nowrap!important;
overflow:hidden!important;
transform:none!important;
position:relative!important;
top:0!important;
vertical-align:middle!important;
}
#modePill.mode-pill::before,
#modePill.mode-pill::after{
content:none!important;
display:none!important;
}
#modePill.mode-pill-kitchen{
color:#160604!important;
background:linear-gradient(135deg,#fff4dc 0%,#ffd56a 36%,#ef6b24 80%,#c4121a 100%)!important;
border:1px solid rgba(255,213,106,.42)!important;
}
#modePill.mode-pill-bar{
color:#fff4dc!important;
background:linear-gradient(135deg,#3b0809 0%,#7b1118 32%,#c4121a 68%,#ef5b22 100%)!important;
border:1px solid rgba(239,91,34,.46)!important;
}
/* Make sure normal status pill remains visually intact. */
#connectionStatus.connection-status{
padding-left:16px!important;
padding-right:16px!important;
}
/* Smaller screens */
@media(max-width:760px){
#audioUnlockOverlay .audio-unlock-card{
width:calc(100vw - 34px)!important;
padding:30px 22px!important;
}
#audioUnlockOverlay .kds-mode-start{
grid-template-columns:1fr!important;
gap:16px!important;
}
#audioUnlockOverlay button.mode-start-btn{
height:132px!important;
min-height:132px!important;
}
header.topbar .brand-block > div,
.topbar .brand-block > div{
grid-template-columns:auto!important;
}
#modePill.mode-pill,
#connectionStatus.connection-status{
grid-column:1!important;
}
}
/* ===================== ARCHIVE 8 v9 BUTTON + PILL ALIGNMENT FIX =====================
Final UI-only override. Removes emoji icons, fixes cropped large buttons,
and forces the mode pill + connected pill to be perfectly aligned.
*/
/* Keep loading and selector backgrounds consistent and warm. */
:root{
--lur-v9-bg:
radial-gradient(circle at 14% 14%, rgba(120,10,16,.30) 0, transparent 31%),
radial-gradient(circle at 86% 18%, rgba(148,86,6,.28) 0, transparent 33%),
radial-gradient(circle at 52% 88%, rgba(84,24,4,.16) 0, transparent 42%),
linear-gradient(135deg, #050405 0%, #0c0909 39%, #161009 66%, #060505 100%);
}
html,
body,
#app,
#app.app-shell,
.app-shell,
#loadingScreen,
.loading-screen,
#audioUnlockOverlay,
.audio-unlock-overlay{
background:var(--lur-v9-bg)!important;
background-color:#050405!important;
background-attachment:fixed!important;
}
#loadingScreen::before,
#loadingScreen::after,
.loading-screen::before,
.loading-screen::after,
#audioUnlockOverlay::before,
#audioUnlockOverlay::after,
.audio-unlock-overlay::before,
.audio-unlock-overlay::after{
content:none!important;
display:none!important;
opacity:0!important;
background:none!important;
}
#loadingScreen .loading-shell,
.loading-screen .loading-shell,
#audioUnlockOverlay .audio-unlock-card,
.audio-unlock-overlay .audio-unlock-card{
background:
linear-gradient(135deg, rgba(255,244,220,.055), rgba(255,255,255,.018)),
rgba(12,10,10,.78)!important;
border:1px solid rgba(255,213,106,.24)!important;
border-radius:34px!important;
box-shadow:
0 34px 94px rgba(0,0,0,.58),
0 0 0 1px rgba(255,255,255,.035) inset,
0 0 42px rgba(196,18,26,.10)!important;
}
#loadingSub,
.startup-sync{
color:#fff4dc!important;
}
#loadingSub{ font-size:1.02rem!important; }
/* Selector panel sizing. */
#audioUnlockOverlay .audio-unlock-card{
width:min(920px, calc(100vw - 72px))!important;
max-width:min(920px, calc(100vw - 72px))!important;
padding:42px 42px 40px!important;
overflow:visible!important;
}
#audioUnlockOverlay .unlock-logo{
width:126px!important;
margin:0 auto 30px!important;
display:block!important;
}
#audioUnlockOverlay .kds-mode-start{
width:100%!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:24px!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
}
/* Rebuild buttons with no clipping. */
#audioUnlockOverlay button.mode-start-btn,
#audioUnlockOverlay .huge-btn.mode-start-btn,
#audioUnlockOverlay #kdsKitchenBtn,
#audioUnlockOverlay #kdsBarBtn{
position:relative!important;
isolation:isolate!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
height:188px!important;
min-height:188px!important;
max-height:none!important;
padding:24px 22px 22px!important;
margin:0!important;
border-radius:34px!important;
box-sizing:border-box!important;
display:grid!important;
grid-template-rows:48px auto 22px!important;
align-items:center!important;
justify-items:center!important;
row-gap:10px!important;
overflow:hidden!important;
transform:none!important;
text-align:center!important;
border:1px solid rgba(255,255,255,.18)!important;
box-shadow:
0 26px 54px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.28),
inset 0 -22px 44px rgba(0,0,0,.10)!important;
}
/* Kill every prior pseudo/emoji/chip artifact. */
#audioUnlockOverlay button.mode-start-btn::before,
#audioUnlockOverlay button.mode-start-btn::after,
#audioUnlockOverlay #kdsKitchenBtn::before,
#audioUnlockOverlay #kdsKitchenBtn::after,
#audioUnlockOverlay #kdsBarBtn::before,
#audioUnlockOverlay #kdsBarBtn::after,
#audioUnlockOverlay .mode-icon{
content:none!important;
display:none!important;
background:none!important;
opacity:0!important;
}
/* Premium distinct backgrounds */
#audioUnlockOverlay #kdsKitchenBtn{
background:
radial-gradient(circle at 18% 14%, rgba(255,255,255,.48), transparent 33%),
linear-gradient(135deg, #fff7df 0%, #ffd56a 30%, #f2a51a 58%, #e95b22 100%)!important;
color:#160604!important;
}
#audioUnlockOverlay #kdsBarBtn{
background:
radial-gradient(circle at 18% 14%, rgba(255,255,255,.16), transparent 33%),
linear-gradient(135deg, #170405 0%, #540b0f 35%, #9e1018 67%, #e85b23 100%)!important;
color:#fff4dc!important;
border-color:rgba(239,91,34,.42)!important;
}
/* Inline SVG icons — not emoji */
#audioUnlockOverlay .mode-svg{
width:42px!important;
height:42px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
opacity:.92!important;
filter:drop-shadow(0 8px 12px rgba(0,0,0,.24))!important;
}
#audioUnlockOverlay .mode-svg svg{
width:42px!important;
height:42px!important;
display:block!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:4.3!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
#audioUnlockOverlay #kdsKitchenBtn .mode-svg{
color:#160604!important;
}
#audioUnlockOverlay #kdsBarBtn .mode-svg{
color:#fff4dc!important;
}
#audioUnlockOverlay .mode-main{
display:block!important;
width:100%!important;
max-width:100%!important;
font-size:clamp(2.05rem, 4.15vw, 3.15rem)!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:.17em!important;
text-align:center!important;
white-space:nowrap!important;
overflow:visible!important;
transform:none!important;
}
#audioUnlockOverlay .mode-start-btn small{
display:block!important;
width:100%!important;
font-size:clamp(.78rem, 1.05vw, .96rem)!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:.24em!important;
text-align:center!important;
opacity:.88!important;
white-space:nowrap!important;
}
/* Header: exact two-pills-on-one-line alignment. */
header.topbar .brand-block,
.topbar .brand-block,
#brandHomeBtn.brand-block{
display:flex!important;
align-items:center!important;
gap:14px!important;
flex-wrap:nowrap!important;
}
header.topbar .brand-block > div,
.topbar .brand-block > div,
#brandHomeBtn.brand-block > div{
display:grid!important;
grid-template-columns:auto auto!important;
grid-template-rows:auto 30px!important;
column-gap:10px!important;
row-gap:5px!important;
align-items:center!important;
}
header.topbar .brand-block h1,
.topbar .brand-block h1,
#brandHomeBtn h1{
grid-column:1 / -1!important;
grid-row:1!important;
margin:0!important;
line-height:1!important;
}
#modePill.mode-pill{
grid-column:1!important;
grid-row:2!important;
}
#connectionStatus.connection-status,
.connection-status{
grid-column:2!important;
grid-row:2!important;
}
/* Geometry must be identical for both pills. */
#modePill.mode-pill,
#connectionStatus.connection-status,
.connection-status{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
line-height:30px!important;
box-sizing:border-box!important;
padding:0 16px!important;
margin:0!important;
border-radius:999px!important;
font-size:.72rem!important;
font-weight:1000!important;
letter-spacing:.16em!important;
white-space:nowrap!important;
overflow:hidden!important;
transform:none!important;
position:relative!important;
top:0!important;
vertical-align:middle!important;
}
#modePill.mode-pill::before,
#modePill.mode-pill::after{
content:none!important;
display:none!important;
background:none!important;
}
#modePill.mode-pill-kitchen{
color:#160604!important;
background:linear-gradient(135deg,#fff4dc 0%,#ffd56a 36%,#ef6b24 80%,#c4121a 100%)!important;
border:1px solid rgba(255,213,106,.42)!important;
}
#modePill.mode-pill-bar{
color:#fff4dc!important;
background:linear-gradient(135deg,#3b0809 0%,#7b1118 32%,#c4121a 68%,#ef5b22 100%)!important;
border:1px solid rgba(239,91,34,.46)!important;
}
/* Keep the green status visual but not the wrong vertical offset. */
#connectionStatus.connection-status{
margin-top:0!important;
margin-bottom:0!important;
}
/* Tablet / narrow fallback */
@media(max-width:760px){
#audioUnlockOverlay .audio-unlock-card{
width:calc(100vw - 34px)!important;
padding:30px 22px!important;
}
#audioUnlockOverlay .kds-mode-start{
grid-template-columns:1fr!important;
gap:16px!important;
}
#audioUnlockOverlay button.mode-start-btn{
height:154px!important;
min-height:154px!important;
grid-template-rows:38px auto 20px!important;
}
#audioUnlockOverlay .mode-svg,
#audioUnlockOverlay .mode-svg svg{
width:36px!important;
height:36px!important;
}
}
/* ===================== ARCHIVE 8 v10 CLEAN SELECTOR + HEADER =====================
Final targeted visual rebuild:
- Large buttons are rebuilt using clean DIV/SVG markup, no emoji, no pseudo icon/chips.
- Pill row is rebuilt using CSS grid with exact same row and geometry.
- Logic/audio/routing unchanged.
*/
/* Warm loading/selector background retained */
:root{
--lur-v10-bg:
radial-gradient(circle at 14% 14%, rgba(120,10,16,.30) 0, transparent 31%),
radial-gradient(circle at 86% 18%, rgba(148,86,6,.28) 0, transparent 33%),
radial-gradient(circle at 52% 88%, rgba(84,24,4,.16) 0, transparent 42%),
linear-gradient(135deg, #050405 0%, #0c0909 39%, #161009 66%, #060505 100%);
--lur-pill-h:30px;
}
html,
body,
#app,
#app.app-shell,
.app-shell,
#loadingScreen,
.loading-screen,
#audioUnlockOverlay,
.audio-unlock-overlay{
background:var(--lur-v10-bg)!important;
background-color:#050405!important;
background-attachment:fixed!important;
}
#loadingScreen::before,
#loadingScreen::after,
.loading-screen::before,
.loading-screen::after,
#audioUnlockOverlay::before,
#audioUnlockOverlay::after,
.audio-unlock-overlay::before,
.audio-unlock-overlay::after{
content:none!important;
display:none!important;
opacity:0!important;
background:none!important;
}
#loadingScreen .loading-shell,
.loading-screen .loading-shell,
#audioUnlockOverlay .audio-unlock-card,
.audio-unlock-overlay .audio-unlock-card{
background:
linear-gradient(135deg, rgba(255,244,220,.055), rgba(255,255,255,.018)),
rgba(12,10,10,.78)!important;
border:1px solid rgba(255,213,106,.24)!important;
border-radius:34px!important;
box-shadow:
0 34px 94px rgba(0,0,0,.58),
0 0 0 1px rgba(255,255,255,.035) inset,
0 0 42px rgba(196,18,26,.10)!important;
}
#loadingSub,
.startup-sync{
color:#fff4dc!important;
}
#loadingSub{ font-size:1.02rem!important; }
#loadingSub::after,
.startup-sync::after{ content:none!important; }
/* ===================== SELECTOR BUTTONS ===================== */
#audioUnlockOverlay .audio-unlock-card{
width:min(920px, calc(100vw - 72px))!important;
max-width:min(920px, calc(100vw - 72px))!important;
padding:42px 42px 40px!important;
overflow:visible!important;
}
#audioUnlockOverlay .unlock-logo{
width:126px!important;
margin:0 auto 30px!important;
display:block!important;
}
#audioUnlockOverlay .kds-mode-start{
width:100%!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
gap:24px!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
}
/* Reset old broad selectors and kill old pseudo/chip/icon artifacts. */
#audioUnlockOverlay #kdsKitchenBtn,
#audioUnlockOverlay #kdsBarBtn{
all:unset!important;
position:relative!important;
isolation:isolate!important;
cursor:pointer!important;
width:100%!important;
height:184px!important;
min-height:184px!important;
box-sizing:border-box!important;
border-radius:34px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:9px!important;
overflow:hidden!important;
text-align:center!important;
user-select:none!important;
transform:translateZ(0)!important;
border:1px solid rgba(255,255,255,.18)!important;
box-shadow:
0 26px 54px rgba(0,0,0,.42),
inset 0 1px 0 rgba(255,255,255,.28),
inset 0 -22px 44px rgba(0,0,0,.10)!important;
}
#audioUnlockOverlay #kdsKitchenBtn::before,
#audioUnlockOverlay #kdsKitchenBtn::after,
#audioUnlockOverlay #kdsBarBtn::before,
#audioUnlockOverlay #kdsBarBtn::after,
#audioUnlockOverlay .mode-icon,
#audioUnlockOverlay .mode-svg{
content:none!important;
display:none!important;
background:none!important;
opacity:0!important;
}
#audioUnlockOverlay #kdsKitchenBtn{
background:
radial-gradient(circle at 20% 18%, rgba(255,255,255,.42), transparent 33%),
linear-gradient(135deg, #fff7df 0%, #ffd56a 30%, #f2a51a 58%, #e95b22 100%)!important;
color:#160604!important;
}
#audioUnlockOverlay #kdsBarBtn{
background:
radial-gradient(circle at 18% 16%, rgba(255,255,255,.14), transparent 33%),
linear-gradient(135deg, #160304 0%, #4f090e 34%, #9e1018 66%, #e85b23 100%)!important;
color:#fff4dc!important;
border-color:rgba(239,91,34,.42)!important;
}
/* New real SVG line icons. These are DIVs, so old span rules cannot damage them. */
#audioUnlockOverlay .selector-icon{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
max-width:48px!important;
max-height:48px!important;
margin:0 0 4px 0!important;
opacity:.96!important;
line-height:1!important;
filter:drop-shadow(0 8px 12px rgba(0,0,0,.24))!important;
flex:0 0 auto!important;
}
#audioUnlockOverlay .selector-icon svg{
display:block!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
overflow:visible!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:4.4!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
#audioUnlockOverlay #kdsKitchenBtn .selector-icon{
color:#160604!important;
}
#audioUnlockOverlay #kdsBarBtn .selector-icon{
color:#fff4dc!important;
}
#audioUnlockOverlay .selector-title{
display:block!important;
width:100%!important;
max-width:100%!important;
font-size:clamp(2.05rem, 4.1vw, 3.12rem)!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:.17em!important;
text-align:center!important;
white-space:nowrap!important;
overflow:visible!important;
font-family:inherit!important;
flex:0 0 auto!important;
padding:0!important;
margin:0!important;
}
#audioUnlockOverlay .selector-subtitle{
display:block!important;
width:100%!important;
max-width:100%!important;
font-size:clamp(.78rem, 1.05vw, .96rem)!important;
line-height:1!important;
font-weight:1000!important;
letter-spacing:.24em!important;
text-align:center!important;
opacity:.88!important;
white-space:nowrap!important;
font-family:inherit!important;
flex:0 0 auto!important;
padding:0!important;
margin:0!important;
}
/* ===================== HEADER PILL ALIGNMENT ===================== */
/*
Build the header as:
[logo] [h1]
[mode pill][connection pill]
Both pills are in row 2, same grid row, same exact geometry.
*/
header.topbar #brandHomeBtn.brand-block,
header.topbar .brand-block,
.topbar #brandHomeBtn.brand-block,
.topbar .brand-block{
display:grid!important;
grid-template-columns:86px max-content!important;
grid-template-rows:auto auto!important;
column-gap:14px!important;
row-gap:5px!important;
align-items:center!important;
justify-content:start!important;
width:auto!important;
max-width:none!important;
min-width:0!important;
padding:0!important;
margin:0!important;
}
header.topbar #brandHomeBtn .brand-img,
.topbar #brandHomeBtn .brand-img,
header.topbar .brand-img.small,
.topbar .brand-img.small{
grid-column:1!important;
grid-row:1 / span 2!important;
align-self:center!important;
justify-self:center!important;
margin:0!important;
}
header.topbar #brandHomeBtn > div,
.topbar #brandHomeBtn > div,
header.topbar .brand-block > div,
.topbar .brand-block > div{
/* FIXED v3: was display:grid — caused EN/ES title shift */
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:center!important;
gap:5px!important;
grid-column:auto!important;
grid-row:auto!important;
grid-template:none!important;
grid-template-columns:none!important;
grid-template-rows:none!important;
margin:0!important;
padding:0!important;
}
header.topbar #brandHomeBtn h1,
.topbar #brandHomeBtn h1,
header.topbar .brand-block h1,
.topbar .brand-block h1{
grid-column:auto!important;
grid-row:auto!important;
margin:0!important;
padding:0!important;
line-height:1!important;
align-self:auto!important;
white-space:nowrap!important;
}
#modePill.mode-pill{
grid-column:auto!important;
grid-row:auto!important;
align-self:center!important;
justify-self:auto!important;
}
#connectionStatus.connection-status,
.connection-status{
grid-column:auto!important;
grid-row:auto!important;
align-self:center!important;
justify-self:auto!important;
}
/* Identical geometry for both pills */
#modePill.mode-pill,
#connectionStatus.connection-status,
.connection-status{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
height:var(--lur-pill-h)!important;
min-height:var(--lur-pill-h)!important;
max-height:var(--lur-pill-h)!important;
line-height:var(--lur-pill-h)!important;
box-sizing:border-box!important;
padding:0 16px!important;
margin:0!important;
border-radius:999px!important;
font-size:.72rem!important;
font-weight:1000!important;
letter-spacing:.16em!important;
white-space:nowrap!important;
overflow:hidden!important;
transform:none!important;
position:static!important;
top:auto!important;
bottom:auto!important;
vertical-align:top!important;
}
#modePill.mode-pill::before,
#modePill.mode-pill::after{
content:none!important;
display:none!important;
background:none!important;
}
#modePill.mode-pill-kitchen{
color:#160604!important;
background:linear-gradient(135deg,#fff4dc 0%,#ffd56a 36%,#ef6b24 80%,#c4121a 100%)!important;
border:1px solid rgba(255,213,106,.42)!important;
}
#modePill.mode-pill-bar{
color:#fff4dc!important;
background:linear-gradient(135deg,#3b0809 0%,#7b1118 32%,#c4121a 68%,#ef5b22 100%)!important;
border:1px solid rgba(239,91,34,.46)!important;
}
/* If older CSS tries to push the status pill, neutralize it. */
#connectionStatus.connection-status{
margin-top:0!important;
margin-bottom:0!important;
padding-top:0!important;
padding-bottom:0!important;
}
/* Responsive fallback */
@media(max-width:760px){
#audioUnlockOverlay .audio-unlock-card{
width:calc(100vw - 34px)!important;
padding:30px 22px!important;
}
#audioUnlockOverlay .kds-mode-start{
grid-template-columns:1fr!important;
gap:16px!important;
}
#audioUnlockOverlay #kdsKitchenBtn,
#audioUnlockOverlay #kdsBarBtn{
height:154px!important;
min-height:154px!important;
}
#audioUnlockOverlay .selector-icon,
#audioUnlockOverlay .selector-icon svg{
width:38px!important;
height:38px!important;
min-width:38px!important;
min-height:38px!important;
}
}
/* ===================== ARCHIVE 8 v11 FINAL BUTTON + HEADER FIX ===================== */
:root{
--lur-header-pill-h: 32px;
}
/* ----- Header alignment: force same row, same height, same alignment ----- */
header.topbar #brandHomeBtn.brand-block,
.topbar #brandHomeBtn.brand-block{
display:grid !important;
grid-template-columns: 68px auto !important;
align-items:center !important;
gap:14px !important;
margin:0 !important;
padding:0 !important;
}
header.topbar #brandHomeBtn .brand-img.small,
.topbar #brandHomeBtn .brand-img.small{
width:56px !important;
height:56px !important;
margin:0 !important;
align-self:center !important;
justify-self:center !important;
}
header.topbar #brandHomeBtn .brand-meta,
.topbar #brandHomeBtn .brand-meta{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:center !important;
gap:6px !important;
min-width:0 !important;
}
header.topbar #brandHomeBtn .brand-meta h1,
.topbar #brandHomeBtn .brand-meta h1{
margin:0 !important;
line-height:1 !important;
}
header.topbar #brandHomeBtn .brand-pill-row,
.topbar #brandHomeBtn .brand-pill-row{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
}
header.topbar #brandHomeBtn .brand-pill-row > *,
.topbar #brandHomeBtn .brand-pill-row > *{
flex:0 0 auto !important;
}
#modePill.mode-pill,
#connectionStatus.connection-status{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
height:var(--lur-header-pill-h) !important;
min-height:var(--lur-header-pill-h) !important;
max-height:var(--lur-header-pill-h) !important;
line-height:var(--lur-header-pill-h) !important;
box-sizing:border-box !important;
padding:0 14px !important;
margin:0 !important;
border-radius:999px !important;
font-size:.72rem !important;
font-weight:1000 !important;
letter-spacing:.16em !important;
vertical-align:middle !important;
position:static !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
}
#modePill.mode-pill{
min-width:54px !important;
}
#modePill.mode-pill-kitchen{
color:#170603 !important;
background:linear-gradient(135deg,#fff3d1 0%,#ffd56c 40%,#ef6f24 100%) !important;
border:1px solid rgba(237,133,38,.55) !important;
}
#modePill.mode-pill-bar{
color:#fff4de !important;
background:linear-gradient(135deg,#681018 0%,#ab131d 60%,#e95d24 100%) !important;
border:1px solid rgba(233,93,36,.55) !important;
}
#modePill.mode-pill::before,
#modePill.mode-pill::after{
content:none !important;
display:none !important;
}
#connectionStatus.connection-status{
gap:8px !important;
background:rgba(7,61,39,.78) !important;
border:1px solid rgba(0,233,143,.28) !important;
color:#eefef6 !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
#connectionStatus.connection-status .connection-dot{
width:9px !important;
height:9px !important;
min-width:9px !important;
min-height:9px !important;
margin:0 !important;
border-radius:50% !important;
background:#00f19a !important;
box-shadow:0 0 12px rgba(0,241,154,.44) !important;
}
#connectionStatus #connectionText{
line-height:1 !important;
display:block !important;
}
/* ----- Start screen buttons: complete clean redesign, no pseudo graphics ----- */
#audioUnlockOverlay .audio-unlock-card{
width:min(900px, calc(100vw - 72px)) !important;
max-width:min(900px, calc(100vw - 72px)) !important;
padding:44px 36px 38px !important;
}
#audioUnlockOverlay .kds-mode-start{
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:22px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
}
#audioUnlockOverlay #kdsKitchenBtn,
#audioUnlockOverlay #kdsBarBtn{
all:unset !important;
display:block !important;
position:relative !important;
box-sizing:border-box !important;
width:100% !important;
height:176px !important;
min-height:176px !important;
cursor:pointer !important;
border-radius:30px !important;
overflow:hidden !important;
border:1px solid transparent !important;
box-shadow:0 18px 40px rgba(0,0,0,.28) !important;
isolation:isolate !important;
}
#audioUnlockOverlay #kdsKitchenBtn::before,
#audioUnlockOverlay #kdsKitchenBtn::after,
#audioUnlockOverlay #kdsBarBtn::before,
#audioUnlockOverlay #kdsBarBtn::after{
content:none !important;
display:none !important;
}
#audioUnlockOverlay #kdsKitchenBtn{
background:linear-gradient(135deg,#fff2cf 0%, #ffd56d 43%, #ee8f22 100%) !important;
border-color:rgba(228,133,24,.55) !important;
}
#audioUnlockOverlay #kdsBarBtn{
background:linear-gradient(135deg,#5f0d14 0%, #a6131e 58%, #eb5f24 100%) !important;
border-color:rgba(233,95,36,.55) !important;
}
#audioUnlockOverlay #kdsKitchenBtn .selector-btn-inner,
#audioUnlockOverlay #kdsBarBtn .selector-btn-inner{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:12px !important;
width:100% !important;
height:100% !important;
padding:18px 20px !important;
box-sizing:border-box !important;
position:relative !important;
z-index:1 !important;
}
#audioUnlockOverlay .selector-icon-wrap{
width:50px !important;
height:50px !important;
min-width:50px !important;
min-height:50px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:14px !important;
box-sizing:border-box !important;
}
#audioUnlockOverlay #kdsKitchenBtn .selector-icon-wrap{
background:rgba(26,6,3,.10) !important;
border:1px solid rgba(26,6,3,.14) !important;
color:#1a0603 !important;
}
#audioUnlockOverlay #kdsBarBtn .selector-icon-wrap{
background:rgba(255,244,222,.10) !important;
border:1px solid rgba(255,244,222,.16) !important;
color:#fff4de !important;
}
#audioUnlockOverlay .selector-svg{
width:28px !important;
height:28px !important;
display:block !important;
fill:none !important;
stroke:currentColor !important;
stroke-width:3.25 !important;
stroke-linecap:round !important;
stroke-linejoin:round !important;
}
#audioUnlockOverlay #kdsKitchenBtn .selector-title,
#audioUnlockOverlay #kdsBarBtn .selector-title{
display:block !important;
margin:0 !important;
padding:0 !important;
font-size:clamp(2.2rem, 4.2vw, 3.15rem) !important;
line-height:1 !important;
font-weight:1000 !important;
letter-spacing:.16em !important;
text-align:center !important;
white-space:nowrap !important;
text-shadow:none !important;
}
#audioUnlockOverlay #kdsKitchenBtn .selector-title{ color:#170603 !important; }
#audioUnlockOverlay #kdsBarBtn .selector-title{ color:#fff4de !important; }
#audioUnlockOverlay #kdsKitchenBtn .selector-subtitle,
#audioUnlockOverlay #kdsBarBtn .selector-subtitle{
display:block !important;
margin:0 !important;
padding:0 !important;
font-size:.92rem !important;
line-height:1 !important;
font-weight:1000 !important;
letter-spacing:.22em !important;
text-align:center !important;
text-transform:uppercase !important;
text-shadow:none !important;
}
#audioUnlockOverlay #kdsKitchenBtn .selector-subtitle{ color:rgba(23,6,3,.9) !important; }
#audioUnlockOverlay #kdsBarBtn .selector-subtitle{ color:rgba(255,244,222,.92) !important; }
/* Neutralize all old broad selector styles that were interfering. */
#audioUnlockOverlay .mode-start-btn span,
#audioUnlockOverlay .mode-start-btn small,
#audioUnlockOverlay .mode-start-btn .mode-icon,
#audioUnlockOverlay .mode-start-btn .mode-svg{
display:none !important;
}
@media (max-width: 760px){
#audioUnlockOverlay .kds-mode-start{
grid-template-columns:1fr !important;
}
#audioUnlockOverlay #kdsKitchenBtn,
#audioUnlockOverlay #kdsBarBtn{
height:158px !important;
min-height:158px !important;
}
}
/* ===================== ARCHIVE 8 v12 TEXT BUTTONS FINAL =====================
Final targeted visual fix:
- Selector buttons are text-only premium cards.
- No emojis, no SVGs, no pseudo icons, no icon boxes.
- This removes the graphical artifacts completely.
- Connected to Server pill is moved down to align with BAR/KITCHEN pill.
*/
/* Selector layout */
#audioUnlockOverlay .audio-unlock-card{
width:min(900px, calc(100vw - 72px)) !important;
max-width:min(900px, calc(100vw - 72px)) !important;
padding:44px 38px 40px !important;
overflow:visible !important;
}
#audioUnlockOverlay .kds-mode-start{
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:24px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
}
/* Hide/remove every previous button/icon construction */
#audioUnlockOverlay .mode-start-btn,
#audioUnlockOverlay .huge-btn.mode-start-btn,
#audioUnlockOverlay .selector-icon,
#audioUnlockOverlay .selector-icon-wrap,
#audioUnlockOverlay .selector-svg,
#audioUnlockOverlay .mode-svg,
#audioUnlockOverlay .mode-icon{
display:none !important;
}
/* New clean buttons */
#audioUnlockOverlay .mode-choice-card{
all:unset !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:168px !important;
min-height:168px !important;
box-sizing:border-box !important;
border-radius:34px !important;
cursor:pointer !important;
user-select:none !important;
text-align:center !important;
position:relative !important;
overflow:hidden !important;
isolation:isolate !important;
border:1px solid rgba(255,255,255,.16) !important;
box-shadow:
0 24px 52px rgba(0,0,0,.36),
inset 0 1px 0 rgba(255,255,255,.20),
inset 0 -18px 36px rgba(0,0,0,.10) !important;
}
/* Absolutely no pseudo content on the buttons. */
#audioUnlockOverlay .mode-choice-card::before,
#audioUnlockOverlay .mode-choice-card::after,
#audioUnlockOverlay #kdsKitchenBtn::before,
#audioUnlockOverlay #kdsKitchenBtn::after,
#audioUnlockOverlay #kdsBarBtn::before,
#audioUnlockOverlay #kdsBarBtn::after{
content:none !important;
display:none !important;
background:none !important;
opacity:0 !important;
}
/* Kitchen: clean warm button */
#audioUnlockOverlay .mode-choice-kitchen{
background:
linear-gradient(135deg, #fff2c8 0%, #ffd45f 34%, #f49820 66%, #dc3b20 100%) !important;
color:#170603 !important;
}
/* Bar: clean red button */
#audioUnlockOverlay .mode-choice-bar{
background:
linear-gradient(135deg, #3a070b 0%, #7f1018 34%, #bd1722 66%, #ef6127 100%) !important;
color:#fff3df !important;
}
/* Text is the only graphic */
#audioUnlockOverlay .mode-choice-main{
display:block !important;
margin:0 !important;
padding:0 !important;
font-size:clamp(2.25rem, 4.25vw, 3.18rem) !important;
line-height:1 !important;
font-weight:1000 !important;
letter-spacing:.18em !important;
text-align:center !important;
white-space:nowrap !important;
text-shadow:none !important;
font-family:inherit !important;
}
#audioUnlockOverlay .mode-choice-sub{
display:block !important;
margin:12px 0 0 0 !important;
padding:0 !important;
font-size:.92rem !important;
line-height:1 !important;
font-weight:1000 !important;
letter-spacing:.26em !important;
text-align:center !important;
white-space:nowrap !important;
text-transform:uppercase !important;
opacity:.92 !important;
font-family:inherit !important;
}
/* Header pill row: keep same row, but lower connected pill to match visible BAR/KITCHEN baseline */
header.topbar #brandHomeBtn .brand-pill-row,
.topbar #brandHomeBtn .brand-pill-row{
display:flex !important;
flex-direction:row !important;
align-items:flex-start !important;
justify-content:flex-start !important;
gap:10px !important;
height:32px !important;
line-height:32px !important;
margin:0 !important;
padding:0 !important;
}
#modePill.mode-pill,
#connectionStatus.connection-status{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
height:32px !important;
min-height:32px !important;
max-height:32px !important;
line-height:32px !important;
box-sizing:border-box !important;
padding:0 15px !important;
margin:0 !important;
border-radius:999px !important;
font-size:.72rem !important;
font-weight:1000 !important;
letter-spacing:.16em !important;
white-space:nowrap !important;
position:relative !important;
top:0 !important;
transform:none !important;
vertical-align:top !important;
}
/* Move only the connected pill down to visually align with BAR/KITCHEN pill from screenshot */
#connectionStatus.connection-status{
top:5px !important;
margin-top:0 !important;
margin-bottom:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
/* Keep mode pill clean and fixed */
#modePill.mode-pill{
top:0 !important;
}
#modePill.mode-pill::before,
#modePill.mode-pill::after{
content:none !important;
display:none !important;
}
/* Connection internals aligned inside pill */
#connectionStatus.connection-status .connection-dot{
width:9px !important;
height:9px !important;
min-width:9px !important;
min-height:9px !important;
margin:0 8px 0 0 !important;
align-self:center !important;
}
#connectionStatus #connectionText{
display:block !important;
line-height:1 !important;
margin:0 !important;
padding:0 !important;
}
/* Responsive fallback */
@media(max-width:760px){
#audioUnlockOverlay .kds-mode-start{
grid-template-columns:1fr !important;
}
#audioUnlockOverlay .mode-choice-card{
height:142px !important;
min-height:142px !important;
}
}
/* ===================== ARCHIVE 8 v13 PILL + SPANISH ALIGN FIX =====================
- Make BAR/KITCHEN pill and Connected pill sit on the exact same visual line.
- Stabilize the top-left header layout so English/Spanish do not shift awkwardly.
- Do not touch KDS logic.
*/
/* Stabilize top-left header meta layout across languages */
#brandHomeBtn.brand-block,
.brand-block.brand-home-btn{
align-items:center !important;
}
#brandHomeBtn .brand-meta,
.brand-home-btn .brand-meta{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:center !important;
gap:8px !important;
min-width:430px !important;
width:430px !important;
max-width:430px !important;
}
#brandHomeBtn .brand-meta h1,
.brand-home-btn .brand-meta h1{
margin:0 !important;
line-height:1 !important;
}
#brandHomeBtn .brand-pill-row,
.brand-home-btn .brand-pill-row{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
min-height:30px !important;
height:30px !important;
line-height:30px !important;
flex-wrap:nowrap !important;
}
/* Remove prior offset games and force exact pill geometry */
#modePill.mode-pill,
#connectionStatus.connection-status{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
position:relative !important;
box-sizing:border-box !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
line-height:30px !important;
margin:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
vertical-align:middle !important;
}
#modePill.mode-pill{
top:0 !important;
transform:none !important;
}
/* Connected pill was slightly lower: lift by 1px only */
#connectionStatus.connection-status{
top:0 !important;
transform:translateY(-1px) !important;
}
#connectionStatus.connection-status .connection-dot{
align-self:center !important;
margin-top:0 !important;
margin-bottom:0 !important;
}
#connectionStatus.connection-status #connectionText{
line-height:1 !important;
display:block !important;
}
/* Keep right-side controls from visually jumping across languages */
#clockPill{min-width:96px !important; justify-content:center !important;}
#langBtn{min-width:52px !important; justify-content:center !important;}
#settingsBtn{min-width:118px !important; justify-content:center !important;}
#clearDoneBtn{min-width:108px !important; justify-content:center !important;}
/* Mobile/tablet: release fixed width */
@media (max-width: 980px){
#brandHomeBtn .brand-meta,
.brand-home-btn .brand-meta{
min-width:0 !important;
width:auto !important;
max-width:none !important;
}
}
/* ===================== ARCHIVE 8 v14 GEMINI STRUCTURAL VISUAL FIX =====================
Clean structural rebuild for header pills + start buttons.
This deliberately overrides/removes the accumulated v6-v13 button/header hacks.
KDS behavior, Square logic, routing, audio, polling and ticket handling are untouched.
*/
/* ---------- TOPBAR / HEADER ARCHITECTURE ---------- */
.topbar{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:24px !important;
}
.topbar .header-left,
.topbar #brandHomeBtn.header-left{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:18px !important;
flex:1 1 auto !important;
min-width:0 !important;
max-width:none !important;
width:auto !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
}
.topbar .app-logo,
.topbar .brand-img.small,
.topbar #brandHomeBtn .app-logo{
display:block !important;
width:58px !important;
height:58px !important;
min-width:58px !important;
min-height:58px !important;
max-width:58px !important;
max-height:58px !important;
object-fit:contain !important;
flex:0 0 58px !important;
margin:0 !important;
padding:0 !important;
align-self:center !important;
justify-self:auto !important;
grid-column:auto !important;
grid-row:auto !important;
}
.topbar .title-container,
.topbar .brand-meta,
.topbar #brandHomeBtn .title-container{
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:center !important;
gap:7px !important;
flex:0 1 auto !important;
min-width:0 !important;
width:auto !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
grid-column:auto !important;
grid-row:auto !important;
}
.topbar #app-title,
.topbar .title-container h1,
.topbar #brandHomeBtn h1{
display:block !important;
margin:0 !important;
padding:0 !important;
line-height:1 !important;
white-space:nowrap !important;
flex:0 0 auto !important;
align-self:flex-start !important;
grid-column:auto !important;
grid-row:auto !important;
}
.topbar .mode-indicator,
.topbar .brand-pill-row,
.topbar #brandHomeBtn .mode-indicator{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
flex-wrap:nowrap !important;
min-height:30px !important;
height:30px !important;
line-height:30px !important;
margin:0 !important;
padding:0 !important;
width:auto !important;
max-width:none !important;
transform:none !important;
grid-column:auto !important;
grid-row:auto !important;
}
.topbar .header-right,
.topbar .top-actions{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:12px !important;
flex:0 0 auto !important;
min-width:max-content !important;
margin-left:auto !important;
}
/* ---------- PILL GEOMETRY: exact same row/height/centering ---------- */
#modePill.mode-pill,
#connectionStatus.connection-status{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
align-self:center !important;
height:30px !important;
min-height:30px !important;
max-height:30px !important;
line-height:1 !important;
box-sizing:border-box !important;
padding:0 14px !important;
margin:0 !important;
border-radius:999px !important;
font-size:11px !important;
font-weight:1000 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
white-space:nowrap !important;
vertical-align:middle !important;
position:static !important;
top:auto !important;
bottom:auto !important;
left:auto !important;
right:auto !important;
transform:none !important;
translate:none !important;
grid-column:auto !important;
grid-row:auto !important;
}
#modePill.mode-pill::before,
#modePill.mode-pill::after,
#connectionStatus.connection-status::before,
#connectionStatus.connection-status::after{
content:none !important;
display:none !important;
background:none !important;
opacity:0 !important;
}
#modePill.mode-pill-kitchen{
min-width:80px !important;
color:#170603 !important;
background:linear-gradient(135deg,#fff1c9 0%,#ffd15f 44%,#e95b24 100%) !important;
border:1px solid rgba(233,91,36,.55) !important;
}
#modePill.mode-pill-bar{
min-width:64px !important;
color:#fff4de !important;
background:linear-gradient(135deg,#781018 0%,#b91421 58%,#e95b24 100%) !important;
border:1px solid rgba(233,91,36,.60) !important;
}
#connectionStatus.connection-status{
min-width:0 !important;
gap:8px !important;
color:#eefef6 !important;
background:rgba(7,61,39,.78) !important;
border:1px solid rgba(0,233,143,.28) !important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}
#connectionStatus .connection-dot,
#connectionStatus .status-dot{
display:block !important;
width:8px !important;
height:8px !important;
min-width:8px !important;
min-height:8px !important;
margin:0 !important;
padding:0 !important;
border-radius:50% !important;
align-self:center !important;
background:#00f19a !important;
box-shadow:0 0 10px rgba(0,241,154,.52) !important;
}
#connectionStatus #connectionText{
display:block !important;
line-height:1 !important;
margin:0 !important;
padding:0 !important;
white-space:nowrap !important;
}
/* Keep right controls stable across English/Spanish labels */
#topClock{ min-width:96px !important; justify-content:center !important; }
#langBtn{ min-width:52px !important; justify-content:center !important; }
#settingsBtn{ min-width:118px !important; justify-content:center !important; }
#clearDoneBtn{ min-width:108px !important; justify-content:center !important; }
/* ---------- START SCREEN BUTTONS: clean premium SVG cards ---------- */
#audioUnlockOverlay .audio-unlock-card{
width:min(920px, calc(100vw - 72px)) !important;
max-width:min(920px, calc(100vw - 72px)) !important;
padding:44px 38px 40px !important;
overflow:visible !important;
}
#audioUnlockOverlay .mode-buttons,
#audioUnlockOverlay .kds-mode-start{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
gap:32px !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
overflow:visible !important;
}
/* Hide old selector implementations/artifacts only; new .mode-btn stays active */
#audioUnlockOverlay .mode-choice-card,
#audioUnlockOverlay .selector-icon,
#audioUnlockOverlay .selector-icon-wrap,
#audioUnlockOverlay .selector-svg,
#audioUnlockOverlay .mode-svg,
#audioUnlockOverlay .mode-icon,
#audioUnlockOverlay .mode-choice-main,
#audioUnlockOverlay .mode-choice-sub{
display:none !important;
}
#audioUnlockOverlay .mode-btn,
#audioUnlockOverlay #kdsKitchenBtn.mode-btn,
#audioUnlockOverlay #kdsBarBtn.mode-btn{
all:unset !important;
box-sizing:border-box !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:14px !important;
width:330px !important;
height:220px !important;
min-width:0 !important;
max-width:calc((100vw - 160px) / 2) !important;
border-radius:30px !important;
cursor:pointer !important;
position:relative !important;
overflow:hidden !important;
text-align:center !important;
user-select:none !important;
isolation:isolate !important;
backdrop-filter:blur(10px) !important;
-webkit-backdrop-filter:blur(10px) !important;
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
#audioUnlockOverlay .mode-btn::before,
#audioUnlockOverlay .mode-btn::after,
#audioUnlockOverlay #kdsKitchenBtn.mode-btn::before,
#audioUnlockOverlay #kdsKitchenBtn.mode-btn::after,
#audioUnlockOverlay #kdsBarBtn.mode-btn::before,
#audioUnlockOverlay #kdsBarBtn.mode-btn::after{
content:none !important;
display:none !important;
background:none !important;
opacity:0 !important;
}
#audioUnlockOverlay .mode-btn-kitchen{
color:#1a0603 !important;
background:linear-gradient(145deg, rgba(255,239,194,.95), rgba(245,142,31,.92) 58%, rgba(196,18,26,.92)) !important;
border:1px solid rgba(255,221,127,.52) !important;
box-shadow:0 24px 54px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.30) !important;
}
#audioUnlockOverlay .mode-btn-bar{
color:#fff4de !important;
background:linear-gradient(145deg, rgba(64,8,12,.96), rgba(160,18,28,.94) 58%, rgba(239,91,36,.92)) !important;
border:1px solid rgba(239,91,36,.52) !important;
box-shadow:0 24px 54px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
#audioUnlockOverlay .mode-btn:hover{
transform:translateY(-4px) !important;
}
#audioUnlockOverlay .mode-icon-svg{
display:block !important;
width:58px !important;
height:58px !important;
min-width:58px !important;
min-height:58px !important;
fill:none !important;
stroke:currentColor !important;
flex:0 0 auto !important;
margin:0 0 2px 0 !important;
padding:0 !important;
overflow:visible !important;
opacity:.94 !important;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.28)) !important;
}
#audioUnlockOverlay .mode-text-primary{
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
font-family:inherit !important;
font-size:clamp(2.18rem, 4vw, 3.08rem) !important;
font-weight:1000 !important;
line-height:1 !important;
letter-spacing:.17em !important;
text-transform:uppercase !important;
text-align:center !important;
white-space:nowrap !important;
text-shadow:none !important;
}
#audioUnlockOverlay .mode-text-secondary{
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
font-family:inherit !important;
font-size:.9rem !important;
font-weight:1000 !important;
line-height:1 !important;
letter-spacing:.24em !important;
text-transform:uppercase !important;
text-align:center !important;
white-space:nowrap !important;
opacity:.90 !important;
text-shadow:none !important;
}
@media(max-width:760px){
#audioUnlockOverlay .mode-buttons,
#audioUnlockOverlay .kds-mode-start{
flex-direction:column !important;
gap:18px !important;
}
#audioUnlockOverlay .mode-btn,
#audioUnlockOverlay #kdsKitchenBtn.mode-btn,
#audioUnlockOverlay #kdsBarBtn.mode-btn{
width:100% !important;
max-width:100% !important;
height:170px !important;
}
}
/* ============================================================
LUR KDS — FINAL VISUAL FIX v2
Fixes: logo size, title size/position, pill same-row same-height
No functional changes whatsoever.
============================================================ */
/* ------------------------------------------------------------------
1. LOGO — restore to proper visible size
Prior block at line ~11411 forced it to 58px. Override that.
------------------------------------------------------------------ */
.topbar .app-logo,
.topbar .brand-img.small,
.topbar #brandHomeBtn .app-logo,
header.topbar #brandHomeBtn .brand-img,
.topbar #brandHomeBtn .brand-img,
header.topbar .brand-img.small {
display: block !important;
width: 80px !important;
height: 80px !important;
min-width: 80px !important;
min-height: 80px !important;
max-width: 80px !important;
max-height: 80px !important;
object-fit: contain !important;
flex: 0 0 80px !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
/* cancel any grid placement from old rules */
grid-column: auto !important;
grid-row: auto !important;
justify-self: auto !important;
}
/* ------------------------------------------------------------------
2. BRAND BLOCK — simple flex row: [logo] [title+pills]
Cancel every grid approach that has accumulated.
------------------------------------------------------------------ */
#brandHomeBtn,
header.topbar #brandHomeBtn,
.topbar #brandHomeBtn {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 28px !important;
flex-wrap: nowrap !important;
/* cancel old grid */
grid-template: none !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
}
/* ------------------------------------------------------------------
3. TITLE CONTAINER — flex column: [h1] then [pill row]
Cancel every grid approach on this inner div.
------------------------------------------------------------------ */
#brandHomeBtn .title-container,
#brandHomeBtn .brand-meta,
header.topbar #brandHomeBtn > div,
header.topbar .brand-block > div,
.topbar #brandHomeBtn > div,
.topbar .brand-block > div {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 6px !important;
/* cancel grid */
grid-template: none !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
grid-column: auto !important;
grid-row: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* ------------------------------------------------------------------
4. APP TITLE — restore original 34px, left-aligned with pills
------------------------------------------------------------------ */
#brandHomeBtn h1,
#brandHomeBtn #app-title,
header.topbar .brand-block h1,
.topbar .brand-block h1,
#brandHomeBtn h1 {
margin: 0 !important;
padding: 0 !important;
font-size: 30px !important;
font-weight: 950 !important;
line-height: 1 !important;
letter-spacing: -0.035em !important;
white-space: nowrap !important;
/* cancel grid placement */
grid-column: auto !important;
grid-row: auto !important;
}
/* ------------------------------------------------------------------
5. PILL ROW — both pills in one flex row, left-aligned
------------------------------------------------------------------ */
#brandHomeBtn .mode-indicator,
#brandHomeBtn .brand-pill-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
flex-wrap: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
/* Hide the legacy status line */
#brandHomeBtn #statusLine,
#brandHomeBtn .legacy-status-line {
display: none !important;
}
/* ------------------------------------------------------------------
6. BOTH PILLS — identical geometry so they're always the same height
Key: both get the EXACT same height, padding, and display mode.
No top/transform/margin hacks.
------------------------------------------------------------------ */
#modePill.mode-pill,
#connectionStatus.connection-status {
/* Reset everything first */
position: static !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
vertical-align: baseline !important;
/* Identical box geometry */
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
box-sizing: border-box !important;
border-radius: 999px !important;
/* Identical typography */
font-size: 0.68rem !important;
font-weight: 900 !important;
letter-spacing: 0.13em !important;
line-height: 1 !important;
white-space: nowrap !important;
/* Reset margins & grid placement */
margin: 0 !important;
grid-column: auto !important;
grid-row: auto !important;
/* Kill pseudo-elements */
}
#modePill.mode-pill {
padding: 0 14px !important;
}
#connectionStatus.connection-status {
/* slightly less left-pad to account for the dot */
padding: 0 12px 0 9px !important;
gap: 6px !important;
}
/* Kill any pseudo-elements on both pills */
#modePill::before,
#modePill::after,
#connectionStatus::before,
#connectionStatus::after {
content: none !important;
display: none !important;
}
/* Status dot inside connectionStatus */
#connectionStatus .status-dot,
#connectionStatus .connection-dot {
display: inline-block !important;
width: 7px !important;
height: 7px !important;
min-width: 7px !important;
min-height: 7px !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
align-self: center !important;
margin: 0 !important;
padding: 0 !important;
}
#connectionStatus #connectionText {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
/* ------------------------------------------------------------------
7. START SCREEN BUTTONS — clean premium, no artifacts
------------------------------------------------------------------ */
#audioUnlockOverlay .audio-unlock-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
width: min(860px, calc(100vw - 60px)) !important;
padding: 48px 40px 44px !important;
overflow: visible !important;
}
#audioUnlockOverlay .unlock-logo {
width: 160px !important;
height: auto !important;
display: block !important;
margin: 0 auto 44px !important;
}
#audioUnlockOverlay .mode-buttons,
#audioUnlockOverlay .kds-mode-start {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
justify-content: center !important;
gap: 28px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
#audioUnlockOverlay .mode-btn {
all: unset !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
width: 300px !important;
height: 210px !important;
max-width: calc(50% - 14px) !important;
border-radius: 28px !important;
cursor: pointer !important;
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
text-align: center !important;
user-select: none !important;
-webkit-user-select: none !important;
touch-action: manipulation !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#audioUnlockOverlay .mode-btn::before,
#audioUnlockOverlay .mode-btn::after,
#audioUnlockOverlay #kdsKitchenBtn::before,
#audioUnlockOverlay #kdsKitchenBtn::after,
#audioUnlockOverlay #kdsBarBtn::before,
#audioUnlockOverlay #kdsBarBtn::after {
content: none !important;
display: none !important;
background: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
#audioUnlockOverlay #kdsKitchenBtn.mode-btn {
color: #1c0804 !important;
background: linear-gradient(155deg,#fff8e8 0%,#f5d06a 30%,#e8811a 68%,#bf1a20 100%) !important;
border: 1px solid rgba(245,208,106,0.45) !important;
box-shadow: 0 2px 0 rgba(255,255,255,0.18) inset, 0 20px 50px rgba(0,0,0,0.4) !important;
}
#audioUnlockOverlay #kdsBarBtn.mode-btn {
color: #fff8ec !important;
background: linear-gradient(155deg,#3a0508 0%,#8a1018 28%,#c41822 65%,#e05a1a 100%) !important;
border: 1px solid rgba(224,90,26,0.45) !important;
box-shadow: 0 2px 0 rgba(255,255,255,0.10) inset, 0 20px 50px rgba(0,0,0,0.48) !important;
}
#audioUnlockOverlay .mode-btn:hover {
transform: translateY(-5px) !important;
}
#audioUnlockOverlay .mode-btn .mode-icon-svg {
display: block !important;
width: 54px !important;
height: 54px !important;
min-width: 54px !important;
min-height: 54px !important;
max-width: 54px !important;
max-height: 54px !important;
flex: 0 0 54px !important;
fill: none !important;
stroke: currentColor !important;
overflow: visible !important;
margin: 0 !important;
padding: 0 !important;
filter: drop-shadow(0 3px 8px rgba(0,0,0,0.25)) !important;
}
#audioUnlockOverlay .mode-btn .mode-text-primary {
display: block !important;
font-size: clamp(2rem, 3.8vw, 2.8rem) !important;
font-weight: 1000 !important;
letter-spacing: 0.16em !important;
line-height: 1 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
}
#audioUnlockOverlay .mode-btn .mode-text-secondary {
display: block !important;
font-size: 0.78rem !important;
font-weight: 900 !important;
letter-spacing: 0.28em !important;
line-height: 1 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0.75 !important;
}
@media (max-width: 680px) {
#audioUnlockOverlay .mode-buttons,
#audioUnlockOverlay .kds-mode-start {
flex-direction: column !important;
align-items: stretch !important;
gap: 18px !important;
}
#audioUnlockOverlay .mode-btn {
width: 100% !important;
max-width: 100% !important;
height: 160px !important;
}
}
/* ==========================================================================
FINAL TOPBAR LAYOUT FIX (120px height, 28px gap, vertical center)
========================================================================== */
/* 1. Force the Topbar height and ensure it vertically centers its children */
header.topbar,
.topbar {
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
padding: 0 24px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}
/* 2. Container for Logo + Title Stack (forces exact 28px gap & center alignment) */
#brandHomeBtn,
.header-left,
.brand-home-btn {
display: flex !important;
align-items: center !important;
gap: 28px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* 3. Keep Logo sizing and prevent margin push-down */
.app-logo {
height: 80px !important;
width: 80px !important;
object-fit: contain !important;
margin: 0 !important;
display: block !important;
}
/* 4. Title + Pills Column Stack */
.title-container {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
}
/* 5. Title Text */
h1#app-title {
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
/* 6. Pill Row container alignment */
.mode-indicator,
.brand-pill-row {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ============================================================
END FINAL VISUAL FIX v2
============================================================ */
/* ==========================================================================
ULTRA-HIGH SPECIFICITY TOPBAR LAYOUT FIX
Forces flexbox centering and neutralizes all previous grid overrides.
========================================================================== */
/* 1. Topbar: strictly 120px tall, vertically centered content */
html body header.topbar {
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
padding: 0 24px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
margin: 0 !important;
}
/* 2. Container for Logo + Title Stack */
html body header.topbar div#brandHomeBtn.header-left.brand-block {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 28px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
grid-template: none !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
}
/* 3. Logo: explicitly locked at 80px */
html body header.topbar div#brandHomeBtn img.app-logo {
height: 80px !important;
width: 80px !important;
max-height: 80px !important;
max-width: 80px !important;
object-fit: contain !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
flex: 0 0 80px !important;
}
/* 4. Title + Pills Column: flex column stack, 5px gap */
html body header.topbar div#brandHomeBtn div.title-container.brand-meta {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
grid-column: auto !important;
grid-row: auto !important;
}
/* 5. Title Text */
html body header.topbar div#brandHomeBtn h1#app-title {
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
font-size: 34px !important;
font-weight: 950 !important;
letter-spacing: -0.04em !important;
}
/* 6. Pill Row */
html body header.topbar div#brandHomeBtn div.mode-indicator.brand-pill-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
height: auto !important;
}
/* 7. Both Pills */
html body header.topbar div#brandHomeBtn span#modePill.badge.mode-pill,
html body header.topbar div#brandHomeBtn span#connectionStatus.status-indicator.connection-status {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
height: 26px !important;
min-height: 26px !important;
max-height: 26px !important;
line-height: 1 !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 14px !important;
vertical-align: middle !important;
position: static !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
}
html body header.topbar div#brandHomeBtn span#connectionStatus.status-indicator .connection-dot {
margin: 0 6px 0 0 !important;
align-self: center !important;
}
/* 8. Kill legacy status line */
html body header.topbar div#brandHomeBtn p#statusLine {
display: none !important;
margin: 0 !important;
height: 0 !important;
}
/* ============================================================
END ULTRA-HIGH SPECIFICITY FIX
============================================================ */
/* ===================== NO AUDIO UNLOCK PILL / TOAST =====================
Visual-only safety net: hide old audio-unlock/test-audio toast/pill elements if present.
Does not disable the actual alert audio.
*/
.audio-unlocked-pill,
.audio-unlock-pill,
.audio-test-pill,
.unlock-audio-pill,
.start-audio-pill,
.test-audio-pill,
#audioUnlockedPill,
#audioUnlockPill,
#audioTestPill,
#unlockAudioPill,
#startAudioPill,
#testAudioPill,
[class*="audio"][class*="pill"],
[class*="unlock"][class*="pill"],
[class*="test"][class*="audio"],
.toast.audio-unlock,
.toast.audio-unlocked,
.toast.unlock-audio,
.toast.test-audio,
.toast:has([class*="audio"]),
.toast-pill.audio,
.audio-toast{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
}