:root{
  --bg:#1e1e1e; --card:#111214; --muted:#9aa4b2; --text:#ffffff; --accent:#4ade80;
  --accent-2:#2fb86a; --danger:#fb7185;
  /* layout tokens */
  --radius:10px; --shadow:none; --glass:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  --gap:12px; --max-w:1100px;
}
h1,h2,h3{margin:0 0 12px 0}
.muted{color:var(--muted)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,Segoe UI,Roboto,system-ui,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max-w);margin:28px auto;padding:16px}

/* Topbar / brand */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:var(--gap)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand .logo{width:36px;height:36px;border-radius:8px;background:var(--accent);display:inline-block}

/* Utility classes for templates */
.site-title{font-size:18px;font-weight:700;color:var(--text);line-height:1}
.site-sub{font-size:13px;color:var(--muted)}
.card-title{font-size:16px;font-weight:700;color:var(--text);text-decoration:none}
.price-badge{display:inline-block;background:rgba(74,222,128,0.08);color:var(--accent);padding:6px 8px;border-radius:999px;font-weight:700;font-size:13px}
.free-badge{background:rgba(255,255,255,0.04);color:var(--text)}
.view-cta{margin-top:8px;display:inline-block}
.meta-line{color:var(--muted);font-size:13px;margin-top:6px}
/* helpers */
.flex-1{flex:1}
.w-160{width:160px}
.w-140{width:140px}
.mt-12{margin-top:12px}
.error{color:var(--danger);font-weight:600}

/* Cards */
.card{background:var(--card);background-image:var(--glass);border:1px solid rgba(255,255,255,0.04);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow);transition:background-color .12s ease,transform .12s ease}
.card:hover{transform:none;box-shadow:none;border-color:rgba(74,222,128,0.06);background-color:rgba(255,255,255,0.01)}
h1,h2,h3{margin:0 0 12px 0}
.muted{color:var(--muted)}
.ticket-row{padding:6px 0;color:var(--text);font-size:15px}
.ticket-row strong{color:var(--muted);font-weight:600;margin-right:8px}
.notice{color:var(--accent);font-weight:700}
.mb-12{margin-bottom:12px}
.card-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.text-right{text-align:right}

/* Form/grid helpers for admin pages */
.form-grid{display:grid;grid-template-columns:1fr 320px;gap:12px;align-items:start}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column}
.field-label{color:var(--muted);font-size:14px;margin-bottom:6px}
.field-input input, .field-input select{width:100%;}
.card.form{max-width:900px;margin:0 auto;padding:20px}

/* Ticket card: modernized appearance */
.card.ticket{
  max-width:820px;
  margin:0 auto;
  padding:22px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
  border:1px solid rgba(255,255,255,0.04);
}
.ticket-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.ticket-meta{display:grid;grid-template-columns:1fr;gap:6px}
.ticket-row{padding:10px 0;color:var(--text);font-size:15px;border-bottom:1px dashed rgba(255,255,255,0.02)}
.ticket-row:last-child{border-bottom:none}
.ticket-actions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.ticket-actions .btn{padding:10px 14px}
@media(min-width:720px){.ticket-meta{grid-template-columns:1fr 1fr}}

/* Scanner input: minimal, large, and focus-friendly for barcode scanners */
.scanner-input{background:transparent;border:none;border-bottom:1px dashed rgba(255,255,255,0.06);padding:10px 6px;font-size:18px;color:var(--text);width:100%;box-sizing:border-box}
.scanner-input::placeholder{color:rgba(255,255,255,0.28)}
.scanner-input:focus{outline:none;border-bottom:2px solid rgba(74,222,128,0.9);background-color:rgba(255,255,255,0.01)}

button, .btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--bg); border:0;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;letter-spacing:0.2px;transition:opacity .12s ease,transform .12s ease}
button:hover, .btn:hover{transform:none;opacity:0.95}
button.secondary, .btn.secondary{background:transparent;color:var(--accent);border:1px solid rgba(255,255,255,0.06)}
button.ghost, .btn.ghost{background:transparent;color:var(--text);border:1px dashed rgba(255,255,255,0.04)}

input[type=text], input[type=password], input[type=number], textarea, select{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:10px 12px;border-radius:8px;width:100%;margin:8px 0;transition:box-shadow .12s ease,border-color .12s ease}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus, select:focus{outline:none;border-color:rgba(74,222,128,0.9);box-shadow:0 6px 18px rgba(46,204,113,0.06)}
.label{display:block;color:var(--muted);font-size:14px;margin-top:8px}
ul{padding-left:18px}
.list-item{padding:12px;border-bottom:1px solid rgba(255,255,255,0.02);display:flex;justify-content:space-between;align-items:center}
.small{font-size:13px;color:var(--muted)}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.actions a{margin-left:0}
.form-row{display:flex;gap:12px}
.badge{display:inline-block;background:rgba(74,222,128,0.08);color:var(--accent);padding:6px 8px;border-radius:999px;font-weight:700;font-size:13px}
@media (max-width:720px){.form-row{flex-direction:column}.container{padding:12px}.actions{flex-direction:column;gap:6px;width:100%}.actions a{width:100%;text-align:center;margin:0}}

/* print-friendly fallback */
@media print{body{background:#fff;color:#000} .card{box-shadow:none;border:1px solid #ddd}}

/* Scan page tabs and camera */
.scan-tabs{display:flex;gap:8px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.04);padding-bottom:12px}
.scan-tab-btn{background:transparent;border:none;color:var(--text);padding:8px 12px;cursor:pointer;font-weight:600;border-bottom:2px solid transparent;transition:border-color 0.2s}
.scan-tab-btn.active{border-bottom-color:var(--accent);color:var(--accent)}
.scan-tab{display:none}
.scan-tab.active{display:block}

/* Enhanced camera scanner styling */
.field:has(#scanner-video) {
  position: relative;
}

#scanner-video {
  width: 100%;
  display: block;
  max-height: 500px;
  object-fit: contain;
  background: #000;
  border-radius: 8px;
  margin-bottom: 12px;
}

#scanner-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  border-radius: 8px;
  border: 2px dashed rgba(74, 222, 128, 0.2);
}

#scanner-status {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  transition: background 0.3s ease;
}

/* Focus guide for QR scanning */
#scanner-video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  border: 3px dashed rgba(74, 222, 128, 0.3);
  border-radius: 8px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

/* Tighter ticket card */
.card.ticket{max-width:760px;margin:0 auto;padding:20px}