:root{--brand:#f97316;--ink:#111827;--muted:#64748b;--line:#dfe4ea}*{box-sizing:border-box}body{margin:0;background:#f4f6f8;color:var(--ink);font-family:Poppins,system-ui,sans-serif}button,a{font:inherit}.demo-top{position:sticky;top:0;z-index:20;min-height:68px;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}.demo-brand{display:flex;align-items:center;gap:11px}.demo-brand i{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#111827;color:#fff;font-size:19px}.demo-brand span{display:grid}.demo-brand strong{font-size:14px}.demo-brand small{color:var(--muted);font-size:9px}.demo-actions{display:flex;align-items:center;gap:8px}.demo-live,.demo-back{min-height:39px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-size:10px;font-weight:850;text-decoration:none}.demo-live i{color:#22c55e}.demo-back{background:var(--brand);border-color:var(--brand);color:#fff}.demo-page{max-width:1780px;margin:auto;padding:12px}.demo-note{margin-bottom:9px;padding:10px 12px;display:flex;align-items:center;gap:9px;border:1px solid #fed7aa;border-radius:10px;background:#fff7ed;color:#9a3412;font-size:10px;font-weight:700}.demo-summary{display:grid;grid-template-columns:repeat(3,minmax(130px,180px));gap:7px;margin-bottom:8px}.metric{min-height:50px;padding:7px 9px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;background:#fff}.metric i{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#f1f5f9;color:#334155}.metric span{display:grid}.metric small{color:var(--muted);font-size:7px;font-weight:900;text-transform:uppercase}.metric strong{font-size:14px}.demo-sla{margin-bottom:8px;padding:7px;display:grid;grid-template-columns:minmax(190px,.8fr) repeat(3,minmax(85px,.5fr));gap:7px;align-items:center;border:1px solid var(--line);border-radius:10px;background:#fff}.demo-sla>strong{font-size:11px}.sla{min-height:34px;padding:5px 8px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px}.sla i{width:8px;height:8px;border-radius:50%;background:#22c55e}.sla.warn i{background:#f59e0b}.sla.late i{background:#ef4444}.sla span{display:grid}.sla small{color:var(--muted);font-size:7px;font-weight:850;text-transform:uppercase}.sla b{font-size:11px}.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:start}.column{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:11px;background:#f8fafc}.column header{height:54px;padding:8px 9px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fff}.column header strong{display:flex;align-items:center;gap:6px;font-size:12px}.column header small{display:block;margin-top:2px;color:var(--muted);font-size:8px}.column header b{min-width:25px;height:23px;padding:0 7px;display:grid;place-items:center;border-radius:99px;background:#111827;color:#fff;font-size:10px}.cards{min-height:430px;max-height:calc(100dvh - 235px);padding:5px;display:flex;flex-direction:column;gap:5px;overflow:auto}.order{position:relative;padding:7px;border:1px solid #dfe3e8;border-left:3px solid var(--brand);border-radius:8px;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.05);animation:enter .28s ease}.order-top{display:flex;align-items:center;justify-content:space-between;gap:7px}.order-id{font-size:12px;font-weight:900}.order-time,.badge{color:var(--muted);font-size:8px;font-weight:800}.badge{padding:3px 5px;border:1px solid #e2e8f0;border-radius:5px;background:#f8fafc;text-transform:uppercase}.timer{margin:5px 0 4px;padding:3px 5px;display:flex;align-items:center;justify-content:space-between;border:1px solid #bbf7d0;border-radius:5px;background:#f0fdf4;color:#166534;font-size:8px;font-weight:900}.timer.late{border-color:#fecaca;background:#fff1f2;color:#b42318}.order h3{margin:4px 0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.line{margin:2px 0;display:flex;align-items:center;gap:5px;color:#596273;font-size:9px}.line strong{margin-left:auto;color:#111827}.items{margin-top:4px;padding:5px;border-radius:6px;background:#f8f9fa;color:#334155;font-size:8.5px}.order footer{margin-top:5px;padding-top:5px;display:grid;grid-template-columns:repeat(auto-fit,minmax(28px,1fr));gap:3px;border-top:1px solid #edf0f3}.order footer button{height:27px;padding:0;display:grid;place-items:center;border:1px solid #dfe3e8;border-radius:6px;background:#fff;color:#334155;cursor:pointer}.order footer button.primary{background:#111827;color:#fff}.order footer button:hover{border-color:var(--brand);color:var(--brand)}.empty{min-height:90px;display:grid;place-items:center;border:1px dashed #cbd5e1;border-radius:8px;color:#94a3b8;font-size:10px}.tip{position:fixed;z-index:80;padding:6px 8px;border-radius:6px;background:#111827;color:#fff;font-size:9px;font-weight:800;pointer-events:none}.tip[hidden]{display:none}.order-dialog{width:min(520px,calc(100vw - 24px));padding:0;border:0;border-radius:18px;box-shadow:0 30px 90px rgba(15,23,42,.34)}.order-dialog::backdrop{background:rgba(15,23,42,.62)}.order-dialog header{padding:18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.order-dialog h2{margin:0;font-size:17px}.order-dialog header button{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:#fff}.order-dialog section{padding:18px;display:grid;gap:9px}.order-dialog section div{padding:10px;border-radius:9px;background:#f8fafc;font-size:10px}.order-dialog footer{padding:14px 18px;display:flex;justify-content:flex-end;border-top:1px solid var(--line)}.order-dialog footer button{min-height:38px;padding:0 15px;border:0;border-radius:9px;background:#111827;color:#fff;font-weight:800}@keyframes enter{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
        @media(max-width:980px){.board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.column{min-width:310px;scroll-snap-align:start}.cards{max-height:none;min-height:420px}.demo-sla{grid-template-columns:1fr 1fr}.demo-sla>strong{grid-column:1/-1}.demo-page{padding:9px}}
        @media(max-width:620px){.demo-top{padding:9px 11px}.demo-brand small,.demo-live span{display:none}.demo-back{padding:0 10px}.demo-summary{grid-template-columns:repeat(3,1fr)}.metric{min-width:0;padding:6px}.metric i{display:none}.metric small{font-size:6px}.metric strong{font-size:12px}.column{min-width:88vw}.demo-sla{grid-template-columns:1fr 1fr}.sla:last-child{grid-column:1/-1}}
        @media(prefers-reduced-motion:reduce){*{animation:none;scroll-behavior:auto}}