:root{
  --night:#0c1a14;
  --night-2:#12271d;
  --panel:#17301f;
  --line:#26432f;
  --paper:#f4f8f4;
  --ink:#132018;
  --ink-soft:#5c6b60;
  --grass:#18a558;
  --grass-2:#22c46b;
  --lime:#b6f04a;
  --chalk:#ffffff;
  --amber:#f0a828;
  --red:#e0524e;
  --good:#18a558;
  --shadow:0 24px 56px -38px rgba(12,26,20,.5);
  --shadow-sm:0 14px 32px -26px rgba(12,26,20,.4);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
a{color:inherit;text-decoration:none}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:.95rem;padding:13px 24px;border-radius:11px;border:none;background:var(--grass);color:#fff;transition:.15s}
.btn:hover{background:var(--grass-2);transform:translateY(-1px)}
.btn:disabled{background:var(--line);color:var(--ink-soft);cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;color:var(--grass);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--grass)}
.btn.block{width:100%}
.btn.sm{padding:8px 15px;font-size:.82rem;border-radius:8px}

header.top{background:var(--night);color:#fff}
.top-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem}
.logo .mark{width:32px;height:32px}
.top nav{display:flex;gap:6px}
.top nav button{background:none;border:none;color:rgba(255,255,255,.66);font-weight:700;font-size:.85rem;padding:9px 14px;border-radius:8px;transition:.15s}
.top nav button:hover{color:#fff;background:rgba(255,255,255,.08)}
.top nav button.on{background:var(--grass);color:#fff}

.view{display:none}
.view.on{display:block}

/* matchday hero + list */
.hero{background:linear-gradient(160deg,var(--night),var(--night-2));color:#fff;padding:36px 0 30px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%,rgba(182,240,74,.14),transparent 45%)}
.hero-in{position:relative}
.hero .kick{color:var(--lime);font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.hero h1{font-size:2.8rem;margin:8px 0 6px}
.hero p{color:rgba(255,255,255,.7)}

.matches{padding:26px 0 50px}
.match{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:20px 22px;margin-bottom:14px;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.match .info .comp{font-size:.74rem;font-weight:700;color:var(--grass);text-transform:uppercase;letter-spacing:.05em}
.match .info h3{font-size:1.25rem;margin:3px 0}
.match .info .meta{font-size:.9rem;color:var(--ink-soft)}
.match .buy{text-align:right}
.match .buy .from{font-size:.78rem;color:var(--ink-soft)}
.match .buy .price{font-size:1.4rem;font-weight:800;color:var(--ink)}
.match .buy .price small{font-size:.8rem;color:var(--ink-soft);font-weight:500}

/* purchase modal */
.modal{position:fixed;inset:0;background:rgba(12,26,20,.6);backdrop-filter:blur(4px);z-index:100;display:none;align-items:center;justify-content:center;padding:18px}
.modal.on{display:flex}
.sheet{background:#fff;border-radius:16px;box-shadow:var(--shadow);width:100%;max-width:440px;overflow:hidden}
.sheet-hd{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.sheet-hd h3{font-size:1.2rem}
.sheet-hd button{background:none;border:none;color:var(--ink-soft)}
.sheet-bd{padding:24px}
.qty{display:flex;align-items:center;gap:14px;margin:16px 0}
.qty button{width:44px;height:44px;border-radius:10px;border:2px solid var(--line);background:#fff;font-size:1.3rem;font-weight:800}
.qty button:hover{border-color:var(--grass)}
.qty .n{font-size:1.6rem;font-weight:800;min-width:40px;text-align:center}
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em}
.field input{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:10px;font-size:1rem}
.field input:focus{outline:none;border-color:var(--grass)}
.pay-summary{background:var(--paper);border-radius:11px;padding:14px 16px;margin:16px 0;display:flex;justify-content:space-between;font-weight:800;font-size:1.15rem}
.pay-summary .amt{color:var(--grass)}
.paynote{font-size:.76rem;color:var(--ink-soft);text-align:center;margin-top:12px}

/* ticket */
.ticket{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);max-width:400px;margin:0 auto;border:1px solid var(--line)}
.ticket-top{background:var(--night);color:#fff;padding:22px 24px}
.ticket-top .comp{color:var(--lime);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ticket-top h3{font-size:1.3rem;margin:3px 0}
.ticket-top .meta{color:rgba(255,255,255,.7);font-size:.9rem}
.ticket-mid{padding:24px;text-align:center;border-bottom:2px dashed var(--line);position:relative}
.ticket-mid::before,.ticket-mid::after{content:"";position:absolute;bottom:-11px;width:22px;height:22px;border-radius:50%;background:var(--paper)}
.ticket-mid::before{left:-11px}.ticket-mid::after{right:-11px}
.qr{width:180px;height:180px;margin:0 auto 14px;background:#fff;padding:8px;border-radius:8px}
.qr svg{width:100%;height:100%;display:block}
.ticket-code{font-family:var(--mono);font-size:1rem;letter-spacing:.08em;color:var(--ink);background:var(--paper);padding:8px 14px;border-radius:8px;display:inline-block}
.ticket-bot{padding:18px 24px;display:flex;justify-content:space-between;font-size:.86rem}
.ticket-bot b{display:block;font-size:1rem}
.ticket-bot span{color:var(--ink-soft);font-size:.76rem}
.ticket-status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;padding:5px 12px;border-radius:20px;margin-top:8px}
.ticket-status.valid{background:rgba(24,165,88,.14);color:var(--good)}
.ticket-status.used{background:rgba(224,82,78,.14);color:var(--red)}

.my-tickets{padding:26px 0 50px}
.tix-empty{text-align:center;padding:50px 20px;color:var(--ink-soft)}
.tix-list{display:grid;gap:14px}

/* scanner */
.scanner{padding:30px 0 60px}
.scan-panel{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:26px;max-width:520px;margin:0 auto}
.scan-panel h2{font-size:1.3rem;margin-bottom:6px}
.scan-panel .hint{font-size:.9rem;color:var(--ink-soft);margin-bottom:18px}
.scan-input{display:flex;gap:10px;margin-bottom:16px}
.scan-input input{flex:1;padding:14px 16px;border:2px solid var(--line);border-radius:11px;font-family:var(--mono);font-size:1rem;letter-spacing:.06em}
.scan-input input:focus{outline:none;border-color:var(--grass)}
.scan-quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.scan-quick button{font-size:.8rem;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:7px 12px;color:var(--ink-soft)}
.scan-quick button:hover{border-color:var(--grass);color:var(--grass)}
.scan-result{border-radius:14px;padding:22px;text-align:center;display:none}
.scan-result.show{display:block}
.scan-result.valid{background:rgba(24,165,88,.1);border:2px solid var(--good)}
.scan-result.used{background:rgba(224,82,78,.1);border:2px solid var(--red)}
.scan-result.invalid{background:rgba(240,168,40,.1);border:2px solid var(--amber)}
.scan-result .big-ic{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:2rem;color:#fff}
.scan-result.valid .big-ic{background:var(--good)}
.scan-result.used .big-ic{background:var(--red)}
.scan-result.invalid .big-ic{background:var(--amber)}
.scan-result h3{font-size:1.4rem;margin-bottom:4px}
.scan-result p{color:var(--ink-soft);font-size:.95rem}
.scan-result .who{font-weight:700;color:var(--ink);margin-top:8px}

/* organizer */
.org{padding:30px 0 60px}
.org-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.ostat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.ostat .l{font-size:.74rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
.ostat .v{font-size:1.9rem;font-weight:800;margin-top:3px}
.ostat .v.grass{color:var(--grass)}
.opanel{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.opanel+.opanel{margin-top:18px}
.opanel h3{padding:16px 20px;border-bottom:1px solid var(--line);font-size:1rem}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;padding:10px 20px;color:var(--ink-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
td{padding:11px 20px;border-bottom:1px solid var(--line)}
tr:last-child td{border:none}
.stpill{font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:20px}
.stpill.valid{background:rgba(24,165,88,.14);color:var(--good)}
.stpill.used{background:rgba(224,82,78,.14);color:var(--red)}
.muted{color:var(--ink-soft);font-size:.75rem}
.o-empty{padding:36px;text-align:center;color:var(--ink-soft)}

.foot{background:var(--night);color:rgba(255,255,255,.55);text-align:center;padding:22px;font-size:.82rem}
.foot a{color:var(--lime)}

@media(max-width:640px){
  .hero h1{font-size:2rem}
  .top-in{height:auto;align-items:flex-start;padding:12px 0;gap:10px;flex-direction:column}
  .top nav{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .top nav button{padding:8px 10px;font-size:.78rem}
  .match{grid-template-columns:1fr;gap:10px}
  .match .buy{text-align:left}
  .org-stats{grid-template-columns:1fr 1fr}
  .opanel{overflow-x:auto}
}