:root{
  --bg:#1a1a1a; --bezel:#2a2a2a; --bezel-edge:#0e0e0e; --led-off:#3a3a3a; --led-on:#86ff5a;
  --paper:#f7f3e8; --ink:#222; --accent:#f4d35e; --accent-2:#ee964b; --accent-3:#0fa3b1;
  --shadow:0 10px 30px rgba(0,0,0,.5); --radius:22px;
  --chip-bg:#0f0f0f; --chip-border:#333; --chip-active-bg:#173219; --chip-active-border:#86ff5a; --chip-active-text:#eaffea;
}

/* Base */
html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:radial-gradient(60% 100% at 50% 0%,#222 0%, #111 60%, #0b0b0b 100%);
  color:#e9e9e9;
}
.wrap{max-width:980px; margin:40px auto; padding:0 16px}

/* Device shell */
.device{position:relative; background:linear-gradient(180deg,var(--bezel) 0%, #1f1f1f 100%); border-radius:var(--radius); box-shadow:var(--shadow); border:2px solid var(--bezel-edge); overflow:hidden}
.device:before{content:""; position:absolute; inset:0; background:linear-gradient(to bottom right, rgba(255,255,255,.06), rgba(255,255,255,0) 40%); pointer-events:none}

header{display:flex; align-items:center; gap:14px; padding:16px 18px; border-bottom:1px solid #000; background:linear-gradient(180deg,#2c2c2c 0%, #202020 100%)}
.title{font-weight:700; letter-spacing:.5px}
.badge{font-size:12px; background:#000; border:1px solid #444; padding:2px 8px; border-radius:999px; opacity:.85}
.led{width:10px; height:10px; border-radius:50%; background:var(--led-off); box-shadow:0 0 0 1px #000 inset, 0 0 8px #000; transition:box-shadow .25s, background .25s}
.led.on{ background:var(--led-on); box-shadow:0 0 0 1px #000 inset, 0 0 10px var(--led-on)}

/* Layout */
.panel{display:grid; grid-template-columns:320px 1fr; gap:16px; padding:18px}
@media (max-width:1024px){ .panel{grid-template-columns:1fr} }

/* Controls */
.controls{background:linear-gradient(180deg,#242424 0%, #1b1b1b 100%); border:1px solid #000; border-radius:16px; padding:16px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.group{margin-bottom:14px}
.group h3{margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:#bdbdbd}

.dial{display:flex; align-items:center; gap:10px}
.dial input[type=date]{appearance:none; background:#0f0f0f; color:#f3f3f3; border:1px solid #333; border-radius:10px; padding:10px; width:100%}
.dial input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  opacity:.85;
  cursor:pointer;
}

.region{display:flex; gap:8px; align-items:center}
select{background:#0f0f0f; border:1px solid #333; border-radius:10px; color:#fff; padding:8px}
.btn{appearance:none; border:1px solid #333; background:#0f0f0f; color:#eee; padding:8px 12px; border-radius:8px; cursor:pointer}
.btn:active{transform:translateY(1px)}

/* Mode chips */
.modes{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  font:inherit; line-height:1; padding:10px 12px; border-radius:999px; cursor:pointer;
  background:var(--chip-bg); border:1px solid var(--chip-border); color:#e9e9e9;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.chip:hover{ border-color:#666 }
.chip:focus{ box-shadow:0 0 0 2px #000, 0 0 0 4px #666 }
.chip[aria-pressed="true"]{
  background:var(--chip-active-bg); border-color:var(--chip-active-border); color:var(--chip-active-text);
  box-shadow:inset 0 0 0 1px rgba(134,255,90,.2), 0 0 0 2px rgba(134,255,90,.08);
}

/* Screen & ticket */
.screen{background:radial-gradient(120% 140% at 50% 10%, #121212 0%, #0a0a0a 40%, #050505 100%); border:1px solid #000; border-radius:16px; padding:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.ticket{background:var(--paper); color:var(--ink); border-radius:10px; box-shadow:0 20px 40px rgba(0,0,0,.5); border:1px solid #e0dacb; overflow:hidden; page-break-inside:avoid}
.ticket-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; background:repeating-linear-gradient(45deg, #fdf9ee, #fdf9ee 8px, #f6f0de 8px, #f6f0de 16px); border-bottom:1px dashed #b9b19e; font-weight:700}
.ticket-body{padding:14px 12px}
.section{padding:10px 0; border-bottom:1px dashed #d6d0c2}
.section:last-child{border-bottom:none}
.section-title{font-weight:700; margin:0 0 8px}
.list{display:flex; flex-wrap:wrap; gap:8px}
.pill{background:#0000000f; border:1px solid #00000022; padding:4px 8px; border-radius:999px; font-size:13px; box-shadow:0 1px 0 rgba(0,0,0,.08)}
.pill:hover{ border-color:#00000044 }
.muted{color:#666}

@media (max-width:767px){
  header{flex-wrap:wrap; gap:10px; padding:12px 14px}

  .panel{gap:12px; padding:14px}

  .section{padding:12px 0}
  .section-title{line-height:1.2}
  .section .list{gap:10px}

  .dial{flex-direction:column; align-items:stretch; gap:10px}
  .dial input[type=date]{min-height:44px}
  .btn{width:100%; min-height:44px}

  .controls select{width:100%; min-height:44px}
}

/* Footer */
.footer{display:flex; justify-content:space-between; align-items:center; padding:10px; font-size:12px; color:#c9c9c9; opacity:.85}

/* Utilities */
.visually-hidden{position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Print support: container shown only in print */
.print-area{display:none}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){ .led{transition:none} }

/* Print */
@media print{
  body{background:#fff; color:#000; font-size:12pt}
  .wrap{max-width:100%; margin:0; padding:0}

  /* Hide the on-screen device and chrome */
  .device, header,.controls,.footer,.modes,.btn,.region,.dial{display:none!important}

  /* Show the clean print copy */
  .print-area{display:block!important; padding:0; margin:0}

  /* Ink-friendly ticket styling */
  .print-area .ticket{background:#fff; color:#000; border:1px solid #000; border-radius:0; box-shadow:none; page-break-after:always}
  .print-area .ticket-head{background:none; border-bottom:1px solid #000; color:#000; padding:8px 10px}
  .print-area .ticket-body{padding:10px}
  .print-area .section{padding:6px 0; border-bottom:1px solid #000}
  .print-area .section:last-child{border-bottom:none}
  .print-area .section-title{margin:0 0 6px; font-weight:700}
  .print-area .list{gap:6px}
  .print-area .pill{background:none!important; border:1px solid #000; color:#000; padding:3px 6px; box-shadow:none}
}

@page{ size:auto; margin:12mm }