:root{
  --bg:#0E1B2A; --panel:#16283C; --panel2:#1D3349; --line:#284563;
  --ink:#EAF2FA; --muted:#7E97B0; --red:#E0584A;
  --queue:#5AA0E8; --prep:#F0B44A; --ready:#2ECC71;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); overflow:hidden;}
.sd{height:100vh; display:flex; flex-direction:column;}

.sd-top{display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:linear-gradient(180deg,#16283C,#0E1B2A); border-bottom:1px solid var(--line); flex:0 0 auto;}
.sd-brand{font-family:'Fraunces',serif; font-weight:700; font-size:34px;}
.sd-brand .r{color:var(--red);}
.sd-title{font-size:18px; font-weight:600; letter-spacing:.35em; text-transform:uppercase; color:var(--muted);}
.sd-clock{display:flex; align-items:center; gap:14px; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;}
.ws-dot{width:11px;height:11px;border-radius:50%;background:#456; transition:.3s;}
.ws-dot.on{background:var(--ready); box-shadow:0 0 10px var(--ready);}

.sd-board{flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:28px 40px; min-height:0;}
.sd-col{display:flex; flex-direction:column; background:var(--panel); border-radius:20px; min-height:0; border:1px solid var(--line); overflow:hidden;}
.sd-colhead{display:flex; align-items:center; gap:14px; padding:20px 26px; font-size:24px; font-weight:800; letter-spacing:.02em; border-bottom:2px solid var(--line);}
.ch-icon{font-size:30px; line-height:1;}
.col-queue .sd-colhead{color:var(--queue);} .col-queue{border-top:5px solid var(--queue);}
.col-prep .sd-colhead{color:var(--prep);} .col-prep{border-top:5px solid var(--prep);}
.col-ready .sd-colhead{color:var(--ready);} .col-ready{border-top:5px solid var(--ready);}
.sd-colbody{flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:18px; align-content:flex-start;}
.sd-colbody::-webkit-scrollbar{width:10px;} .sd-colbody::-webkit-scrollbar-thumb{background:var(--line); border-radius:5px;}

/* queue & prep: order number tokens */
.tok{background:var(--panel2); border-radius:16px; padding:22px 26px; display:flex; align-items:center; justify-content:center; animation:tokIn .4s cubic-bezier(.2,.8,.2,1);}
.tok .n{font-family:'Fraunces',serif; font-weight:700; font-size:54px; line-height:1;}
@keyframes tokIn{from{opacity:0; transform:scale(.85);} to{opacity:1; transform:none;}}
.col-queue .tok .n{color:#cfe4fb;}
.col-prep .tok .n{color:#fbeccb;}
.col-prep .tok{position:relative; overflow:hidden;}
.col-prep .tok::after{content:""; position:absolute; left:-100%; top:0; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(240,180,74,.15),transparent); animation:shimmer 2.5s infinite;}
@keyframes shimmer{to{left:100%;}}

/* ready: big card with locker */
.rcard{background:linear-gradient(135deg,#15412C,#1D5C3D); border:2px solid var(--ready); border-radius:18px; padding:24px 26px; display:flex; align-items:center; justify-content:space-between; gap:18px; animation:tokIn .4s ease;}
.rcard.flash{animation:readyFlash 1.1s ease;}
@keyframes readyFlash{0%{transform:scale(.9); box-shadow:0 0 0 0 rgba(46,204,113,.6);} 50%{transform:scale(1.04); box-shadow:0 0 30px 8px rgba(46,204,113,.5);} 100%{transform:scale(1); box-shadow:0 0 0 0 rgba(46,204,113,0);}}
.rcard .ro{display:flex; flex-direction:column;}
.rcard .ro .lbl{font-size:13px; letter-spacing:.15em; text-transform:uppercase; color:#9fe9c0;}
.rcard .ro .n{font-family:'Fraunces',serif; font-weight:700; font-size:54px; line-height:1; color:#fff;}
.rcard .arrow{font-size:30px; color:#7fe0a8;}
.rcard .locker{display:flex; flex-direction:column; align-items:center; background:rgba(0,0,0,.25); border-radius:14px; padding:12px 22px;}
.rcard .locker .lbl{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#9fe9c0;}
.rcard .locker .ln{font-family:'Fraunces',serif; font-weight:700; font-size:60px; line-height:1; color:var(--ready);}

.col-empty{color:var(--muted); font-size:17px; text-align:center; margin-top:30px; opacity:.6;}

.sd-foot{flex:0 0 auto; text-align:center; padding:18px; background:var(--panel); border-top:1px solid var(--line); font-size:19px; color:var(--muted);}
.sd-foot b{color:var(--ink);}