/* Back office + buyer pages. Same carbon/orange identity as the public site, tuned for phones in a busy hall. */
:root{--carbon:#121316;--panel:#1d1f24;--line:#2e3138;--ink:#f3f3f1;--dim:#b9bcc3;--stripe:#f5820f;--ok:#1f9d55;--warn:#d98a00;--bad:#c62828;
  --font:"Barlow","Helvetica Neue",Arial,sans-serif;--display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--num:"Lilita One","Arial Black",sans-serif;
  color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{height:100%}
body{margin:0;min-height:100%;background:linear-gradient(rgba(10,11,13,.8),rgba(10,11,13,.8)),url(/images/twill.webp) 0 0/36px 36px,var(--carbon);color:var(--ink);font:400 1rem/1.5 var(--font)}
a{color:var(--stripe)}
:focus-visible{outline:3px solid var(--stripe);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;display:flex;align-items:center;gap:12px;padding:10px 16px;background:rgba(14,15,18,.92);border-bottom:3px solid var(--stripe)}
.top img{width:44px}.top b{font:700 italic 1.1rem/1 var(--display)}
.top nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.top nav a,.top nav button{color:var(--dim);text-decoration:none;padding:8px 10px;border-radius:6px;font:600 .95rem var(--font);background:none;border:0;cursor:pointer}
.top nav a[aria-current="page"],.top nav a:hover{color:var(--ink);background:rgba(255,255,255,.07)}
main{max-width:1100px;margin:0 auto;padding:20px 16px 48px}
h1{font:800 italic clamp(1.8rem,5vw,2.6rem)/1 var(--display);text-transform:uppercase;margin:8px 0 18px}
h2{font:800 italic 1.4rem/1.1 var(--display);text-transform:uppercase;margin:24px 0 10px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat b{display:block;font:400 2.2rem/1 var(--num)}.stat span{color:var(--dim)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--dim);font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:3px 8px;border-radius:5px;font-weight:700;font-size:.82rem;background:#33363d}
.badge.paid,.badge.valid{background:var(--ok)}.badge.pending{background:#555}.badge.needs_review{background:var(--warn);color:#111}
.badge.refunded,.badge.void,.badge.expired,.badge.canceled{background:#5a2525}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border-radius:8px;border:2px solid transparent;font:700 1rem var(--font);cursor:pointer;text-decoration:none;background:var(--stripe);color:#1a0d00}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.35)}
.btn:disabled{opacity:.5;cursor:not-allowed}
form.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
label{display:block;font-weight:600;margin-bottom:6px}
input,select{font:500 1rem var(--font);min-height:48px;padding:10px 12px;border-radius:8px;border:2px solid #4a4e57;background:#0f1013;color:var(--ink);width:100%}
.field{margin-bottom:14px}
.error{color:#ff8a80;font-weight:600}
.flash{background:#14361f;border:1px solid var(--ok);padding:12px 14px;border-radius:8px;margin-bottom:16px}
.pagination{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
/* Scanner */
.scanner{max-width:560px;margin:0 auto}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--panel);padding:6px;border-radius:10px;margin-bottom:12px}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg label{margin:0;text-align:center;padding:12px;border-radius:7px;cursor:pointer;color:var(--dim)}
.seg input:checked+label{background:var(--stripe);color:#1a0d00}
.seg input:focus-visible+label{outline:3px solid #fff}
.viewfinder{position:relative;aspect-ratio:1/1;max-height:52vh;width:100%;background:#000;border-radius:12px;overflow:hidden}
.viewfinder video{width:100%;height:100%;object-fit:cover}
.viewfinder p{position:absolute;inset:auto 0 0;margin:0;padding:10px;text-align:center;background:rgba(0,0,0,.6);color:var(--dim);font-size:.9rem}
.result{margin-top:12px;border-radius:12px;padding:18px;border:3px solid var(--line);background:var(--panel)}
.result[hidden]{display:none}
.result.ok{border-color:var(--ok);background:#0f2a18}.result.warn{border-color:var(--warn);background:#2e2208}.result.bad{border-color:var(--bad);background:#2d1010}
.result .verdict{font:800 italic 2rem/1 var(--display);text-transform:uppercase;margin:0 0 6px}
.result dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:12px 0 0}
.result dt{color:var(--dim)}.result dd{margin:0;font-weight:600}
.souvenir{margin-top:14px;padding:12px;border-radius:8px;background:rgba(245,130,15,.15);border:2px solid var(--stripe)}
.manual{display:flex;gap:8px;margin-top:14px}.manual input{text-transform:uppercase;letter-spacing:.12em}
/* Buyer ticket wallet */
.wallet{max-width:520px;margin:0 auto}
.tix{background:#fff;color:#111;border-radius:14px;padding:18px;margin-bottom:18px;border-top:10px solid var(--t,#3aabf5);text-align:center}
.tix h2{color:#111;margin:0 0 4px}
.tix img{width:min(280px,100%);margin:10px auto;display:block;image-rendering:pixelated}
.tix .code{font:400 1.8rem/1 var(--num);letter-spacing:.08em}
.tix .meta{color:#444;font-size:.95rem}
.tix.void{opacity:.55}
/* Products */
.product-form .panel{margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 18px}
.form-grid .span{grid-column:1/-1}
.form-grid h2{margin:0 0 10px}
textarea{font:500 1rem var(--font);padding:10px 12px;border-radius:8px;border:2px solid #4a4e57;background:#0f1013;color:var(--ink);width:100%;resize:vertical}
input[type=color]{padding:4px;height:48px}
input[readonly]{opacity:.6}
.hint{color:var(--dim);font-size:.88rem;margin:6px 0 0}
label.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;margin:6px 0 12px}
label.check input{width:22px;height:22px;min-height:0;margin-top:2px;flex:none;accent-color:var(--stripe)}
.swatch{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px}
/* Dashboard charts */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:14px;margin-top:14px}
.chart-panel h2{margin:0 0 4px}
.chart-panel .sub{color:var(--dim);margin:0 0 10px;font-size:.92rem}
.chart-box{position:relative;height:260px}
.chart-panel details{margin-top:8px;color:var(--dim);font-size:.9rem}
.cap-row{margin:12px 0}
.cap-row .lbl{display:flex;justify-content:space-between;gap:10px;font-weight:600;margin-bottom:6px}
.cap-row .lbl span{color:var(--dim);font-weight:500}
.bar{height:14px;border-radius:7px;background:#2a2c31;overflow:hidden}
.bar i{display:block;height:100%;border-radius:7px}
/* Two-factor */
.otp{font:400 1.8rem/1 var(--num);letter-spacing:.3em;text-align:center}
.steps{padding-left:1.2em;margin:0 0 16px}
.steps li{margin:0 0 14px}
.setup-qr{display:block;width:220px;height:220px;margin:12px 0;background:#fff;border-radius:10px;padding:8px}
.secret-key{font:600 1.05rem/1.4 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;background:#0f1013;border:1px solid var(--line);border-radius:8px;padding:10px 12px;word-break:break-all}
.recovery{border-color:var(--stripe)}
.codes{list-style:none;padding:0;margin:12px 0 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.codes li{font:600 1.05rem ui-monospace,Menlo,Consolas,monospace;background:#0f1013;border:1px solid var(--line);border-radius:6px;padding:8px 10px;text-align:center}
details summary{cursor:pointer;color:var(--stripe);font-weight:600}
.refund-box{margin:6px 0 18px}
/* Buyer ticket wallet: same ticket shape as the public site's ticket cards, with the QR code
   sitting where the printed tickets have their "tickets left" box. */
.wallet{max-width:420px}
.wtix{--bg:#3aabf5;--price:#9b1fd0;--outline:#fff;--ink:#0d0d0d;--texture:none;
  position:relative;isolation:isolate;color:var(--ink);margin:0 0 26px;padding:22px 22px 20px;text-align:center}
.wtix-shape{position:absolute;inset:0;z-index:-1;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
.wtix-shape::before{content:"";position:absolute;inset:0;border-radius:6px;
  background:linear-gradient(160deg,rgba(255,255,255,.18),transparent 40%),var(--texture) 0 0/32px 32px,var(--bg);background-blend-mode:normal,soft-light,normal;
  --r:18px;
  -webkit-mask:radial-gradient(circle var(--r) at 0 0,#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(circle var(--r) at 100% 0,#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(circle var(--r) at 0 100%,#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(circle var(--r) at 100% 100%,#0000 98%,#000) bottom right/51% 51% no-repeat;
          mask:radial-gradient(circle var(--r) at 0 0,#0000 98%,#000) top left/51% 51% no-repeat,radial-gradient(circle var(--r) at 100% 0,#0000 98%,#000) top right/51% 51% no-repeat,radial-gradient(circle var(--r) at 0 100%,#0000 98%,#000) bottom left/51% 51% no-repeat,radial-gradient(circle var(--r) at 100% 100%,#0000 98%,#000) bottom right/51% 51% no-repeat}
.wtix-price{margin:0;font:400 3.6rem/.9 var(--num);color:var(--price);
  text-shadow:3px 3px 0 var(--outline),-2px -2px 0 var(--outline),2px -2px 0 var(--outline),-2px 2px 0 var(--outline),0 3px 0 var(--outline)}
.wtix-price sup{font-size:.45em;vertical-align:.95em;margin-right:2px}
.wtix-perf{border:0;border-top:3px dashed color-mix(in srgb,var(--ink) 30%,transparent);margin:14px -22px 12px}
.wtix-name{margin:0;font:800 italic 1.7rem/1.05 var(--display);text-transform:uppercase;color:var(--ink)}
.wtix-line{margin:4px 0 0;font-weight:700}
.wtix-event{margin:4px 0 0;font-size:.88rem;opacity:.85}
.wtix-car{position:relative;margin:10px -36px 0;height:150px;display:flex;align-items:flex-end}
.wtix-car img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:50% 100%;padding-bottom:10px;filter:drop-shadow(0 8px 6px rgba(0,0,0,.45))}
.wtix-car::after,.wtix-track::after{content:"";position:absolute;left:-6px;right:-6px;bottom:4px;height:12px;background:#f5820f}
.wtix-track{position:relative;height:30px;margin:6px -36px 0}
.wtix-souvenir{margin:10px 0 0;font:700 italic 1.05rem/1.15 var(--display);text-transform:uppercase}
.wtix-qr{margin:14px auto 0;width:min(100%,260px);background:#fff;border-radius:14px;padding:10px;border:6px solid var(--price);box-shadow:0 6px 0 rgba(0,0,0,.25)}
.wtix-qr img{display:block;width:100%;height:auto;image-rendering:pixelated}
.wtix-voidmsg{margin:40px 0;color:#7a1010;font-weight:800}
.wtix-code{margin:12px 0 0;font:400 1.9rem/1 var(--num);letter-spacing:.08em}
.wtix-code span{display:block;font:700 .78rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;opacity:.8}
.wtix-holder{margin:6px 0 0;font-weight:600;opacity:.9}
.wtix.is-void .wtix-car,.wtix.is-void .wtix-price{opacity:.4}
.wtix-stamp{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);margin:0;padding:6px 18px;border:5px solid #c62828;border-radius:10px;color:#c62828;background:rgba(255,255,255,.85);font:800 italic 2.6rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
@media print{.top,.refund-box{display:none}body{background:#fff}.wtix{break-inside:avoid}}
/* Users + order fixes */
.role-option{padding:12px;border:2px solid var(--line);border-radius:10px;margin:0 0 8px}
.role-option:has(input:checked){border-color:var(--stripe)}
.action-row{display:flex;flex-wrap:wrap;gap:8px}
.btn.danger{border-color:#c62828;color:#ff8a80}
.tick-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tick-actions details{position:relative}
.tick-actions summary{list-style:none;cursor:pointer;color:var(--stripe);font-weight:600;padding:6px 8px;border-radius:6px;border:1px solid var(--line)}
.tick-actions summary::-webkit-details-marker{display:none}
.tick-actions form{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;min-width:260px}
.tick-actions form input{min-height:40px}
.tick-actions .btn{min-height:40px;padding:8px 12px;font-size:.9rem}
.activity{list-style:none;margin:0;padding:0}
.activity li{padding:10px 0;border-bottom:1px solid var(--line)}
.activity time{color:var(--dim);font-size:.88rem;display:block}
td.wrap{white-space:normal}