/* $TAB — thermal receipt in a dark bar */
:root{
  --bar:#14100C; --bar-2:#1D1710;
  --paper:#FBFAF4; --ink:#191713; --faded:#6B675C;
  --free:#0F6B34; --est:#C22B2B; --amber:#E8A33D;
  --mono:"SF Mono","Menlo","Consolas","Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;max-width:100vw}
body{
  background:
    radial-gradient(900px 500px at 50% -10%, #2A2118 0%, transparent 60%),
    repeating-linear-gradient(90deg, var(--bar) 0 90px, var(--bar-2) 90px 92px),
    var(--bar);
  color:var(--paper); font-family:var(--mono); line-height:1.45; padding-bottom:58px;
}
::selection{background:var(--amber);color:var(--ink)}
a{color:#A8C0E8}

#bar{
  position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;gap:10px;
  background:rgba(16,12,8,.94);border-bottom:1px solid #2E251A;padding:10px 16px;
  font-size:11px;letter-spacing:.16em;color:#9A8E7A;
}
.bar-name b{color:var(--amber)}
.tick{color:var(--paper);font-size:13px}
.bar-link{margin-left:12px;color:var(--amber);text-decoration:none;border:1px solid #4A3B26;padding:3px 8px}
.bar-link:hover{background:var(--amber);color:var(--ink)}

#room{display:grid;place-items:center;padding:44px 12px 60px}

/* ── the receipt ── */
.receipt{
  width:min(430px,96vw);background:var(--paper);color:var(--ink);
  padding:26px 20px 20px;position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,.65), 0 6px 18px rgba(0,0,0,.5);
  transform:rotate(.4deg);
  font-size:12.5px;
}
.receipt::before{ /* torn top */
  content:"";position:absolute;top:-8px;left:0;right:0;height:9px;
  background:linear-gradient(-45deg, transparent 5px, var(--paper) 5px) 0 0/12px 9px repeat-x;
}
.receipt::after{ /* torn bottom */
  content:"";position:absolute;bottom:-8px;left:0;right:0;height:9px;
  background:linear-gradient(135deg, transparent 5px, var(--paper) 5px) 0 100%/12px 9px repeat-x;
}
.r-head{text-align:center}
.r-logo{font-size:26px}
.r-title{font-weight:700;font-size:16px;letter-spacing:.24em;margin-top:6px}
.r-sub{color:var(--faded);font-size:10.5px;letter-spacing:.14em;margin-top:3px}
.r-rule{border-top:1.5px dashed #B9B4A5;margin:13px 0}
.r-section{margin:2px 0}
.r-mini{color:var(--faded);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:6px 0 4px}
.r-line{display:flex;justify-content:space-between;gap:10px;padding:2.5px 0;font-size:12.5px}
.r-line span:first-child{letter-spacing:.06em}
.r-strong{font-weight:700}
.free{color:var(--free);font-weight:700;text-align:right}
.r-cite{color:var(--faded);font-size:9.5px;line-height:1.5;margin:0 0 7px;padding-left:2px}
.r-cite a{color:#5C77A8}

.r-total{text-align:center;margin:16px 0 6px}
.est{color:var(--est);font-size:13px;letter-spacing:.1em}
.r-amount{
  font-size:clamp(30px,8.4vw,40px);font-weight:700;letter-spacing:.02em;margin:6px 0 4px;
  font-variant-numeric:tabular-nums;
}
.r-count{text-align:center;margin:14px 0 4px}
.r-cd{font-size:clamp(20px,5.6vw,26px);font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;margin:4px 0}
.r-foot{text-align:center}
.r-foot .r-mini{text-transform:none;letter-spacing:.04em;line-height:1.6;margin-top:8px}
.barcode{
  height:44px;margin:14px auto 6px;width:82%;
  background:repeating-linear-gradient(90deg,#191713 0 2px,transparent 2px 5px,#191713 5px 6px,transparent 6px 11px,#191713 11px 14px,transparent 14px 17px);
}

/* ── token box ── */
#tab-token{margin:44px auto 0;max-width:430px;padding:0 4px}
.tok{border:1px solid #3A2F20;background:rgba(28,22,15,.6)}
.tok-row{display:flex;justify-content:space-between;gap:14px;padding:11px 15px;border-bottom:1px solid #241C12;font-size:12.5px}
.tok-row:last-child{border-bottom:none}
.tok-row span{color:#8E8268;letter-spacing:.12em;text-transform:uppercase;font-size:.82em;padding-top:2px}
.tok-row b{color:#EFE7D2;text-align:right}
#tokCa{color:var(--amber);letter-spacing:.1em}
.room-note{color:#9A8E7A;font-size:11px;margin-top:14px;text-align:center;line-height:1.7}

/* ── tape ── */
#tape{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:12px;
  background:#0D0A06;border-top:1px solid #2E251A;padding:9px 14px;font-size:12px;color:#B0A48C}
.pill{flex:none;font-size:9.5px;letter-spacing:.18em;padding:3px 8px;border:1px solid #4A3B26;color:#8E8268}
.pill.live{border-color:var(--free);color:#63BF8F}
.pill.rehearsal{border-color:#665A3A;color:#B4A264}
#tapeTrack{overflow:hidden;white-space:nowrap;flex:1;min-width:0}

@media (prefers-reduced-motion: reduce){
  .receipt{transform:none}
}
@media (max-width:480px){
  #bar .bar-name{font-size:9.5px}
}