:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
  --bg: #111318;
  --panel: #191c23;
  --line: #2b303a;
  --text: #f4f5f7;
  --muted: #9299a6;
  --strong: #fff;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); }
header { display:flex; gap:2rem; align-items:center; justify-content:space-between; padding:1.5rem 2rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(17,19,24,.96); z-index:5; }
h1,h2 { margin:0; }
h1 { font-size:1.6rem; }
h2 { font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.muted,.status { color:var(--muted); font-size:.84rem; }
.error { color:#ffb4b4; }
#quick-add { width:min(44rem,60vw); }
#quick-text { width:100%; padding:.9rem 1rem; border-radius:.7rem; border:1px solid var(--line); background:#0e1014; color:var(--text); font-size:1rem; outline:none; }
#quick-text:focus { border-color:#687181; }
main { display:grid; grid-template-columns:minmax(0,2fr) minmax(18rem,1fr); gap:1rem; padding:1rem; }
.side { display:flex; flex-direction:column; gap:1rem; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:.8rem; overflow:hidden; }
.section-title { display:flex; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid var(--line); }
.count { color:var(--muted); }
.queue { list-style:none; padding:0; margin:0; }
.queue-item { display:grid; grid-template-columns:2.5rem 2rem minmax(0,1fr) auto; align-items:center; min-height:4rem; padding:.45rem .8rem; border-bottom:1px solid var(--line); }
.queue-item:first-child { min-height:5rem; background:#20242d; }
.position { font-size:1.15rem; font-variant-numeric:tabular-nums; color:var(--muted); }
.queue-item:first-child .position { color:var(--strong); font-size:1.5rem; font-weight:700; }
.drag { cursor:grab; color:#687181; user-select:none; }
.dragging { opacity:.45; }
.item-main { min-width:0; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.ticket-number { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; color:#aab2c0; }
.customer { font-weight:650; }
.subject { color:var(--text); }
.scratch-dot { font-size:1.4rem; color:#aab2c0; }
.done,.add-ticket { border:1px solid var(--line); background:#242933; color:var(--text); border-radius:.5rem; padding:.45rem .65rem; cursor:pointer; }
.ticket-card { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.ticket-card:last-child,.queue-item:last-child { border-bottom:0; }
.status { margin-top:.2rem; }
.empty { padding:2rem 1rem; text-align:center; color:var(--muted); }
.empty.small { padding:1rem; }
body.display-mode header { position:static; padding:1.3rem 1.6rem; }
body.display-mode main { grid-template-columns:minmax(0,2.4fr) minmax(16rem,1fr); }
body.display-mode .queue-item { min-height:5rem; font-size:1.15rem; grid-template-columns:3rem minmax(0,1fr); }
body.display-mode .queue-item .drag { display:none; }
body.display-mode .queue-item .item-main { grid-column:2; }
body.display-mode .queue-item:first-child { min-height:6.2rem; font-size:1.45rem; }
@media (max-width: 800px) {
  header { align-items:stretch; flex-direction:column; gap:.8rem; padding:1rem; }
  #quick-add { width:100%; }
  main { grid-template-columns:1fr; }
  .queue-item { grid-template-columns:2rem 1.5rem minmax(0,1fr) auto; padding:.45rem .55rem; }
}