:root {
    --bg: #07111f;
    --bg2: #0d1b31;
    --card: rgba(255,255,255,.08);
    --card2: rgba(255,255,255,.12);
    --text: #eef6ff;
    --muted: #a9bbd6;
    --line: rgba(255,255,255,.16);
    --green: #31e6a1;
    --gold: #ffd166;
    --red: #ff6b6b;
    --blue: #78a6ff;
    --shadow: 0 24px 90px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at top left, #163b61, var(--bg) 38%, #040912); color: var(--text); }
a { color: inherit; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
pre { white-space: pre-wrap; background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 18px; padding: 18px; overflow-x: auto; }
input, textarea, select { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--text); border-radius: 14px; padding: 13px 14px; outline: none; }
textarea { min-height: 92px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #8294b2; }
.glass { background: linear-gradient(145deg, var(--card), rgba(255,255,255,.04)); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; font-weight: 750; transition: .18s ease; color: var(--text); }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--green), #4facfe); color: #04101c; }
.btn-soft { background: rgba(255,255,255,.1); border: 1px solid var(--line); }
.btn-ghost { background: transparent; border: 1px solid var(--line); }
.btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; letter-spacing: -.02em; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--green), var(--blue)); color: #02101c; box-shadow: 0 12px 30px rgba(49,230,161,.25); }
.site-header, .app-header { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; position: sticky; top: 0; z-index: 5; background: rgba(7,17,31,.72); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.site-header nav, .header-actions, .toolbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-header nav a { text-decoration: none; color: var(--muted); font-weight: 700; }
.hero { min-height: calc(100vh - 76px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 50px; padding: 60px 5vw; }
.eyebrow { color: var(--green); text-transform: uppercase; font-size: 12px; letter-spacing: .16em; font-weight: 900; }
h1 { font-size: clamp(38px, 6vw, 76px); line-height: .95; margin: 16px 0; letter-spacing: -.06em; }
h2 { font-size: clamp(26px, 4vw, 44px); line-height: 1.02; margin: 10px 0 16px; letter-spacing: -.04em; }
h3 { margin: 0 0 8px; }
p { color: var(--muted); line-height: 1.65; }
.hero-copy p { font-size: 19px; max-width: 720px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-card { border-radius: 36px; padding: 28px; min-height: 520px; display: flex; flex-direction: column; justify-content: space-between; }
.stadium-ring { height: 340px; border-radius: 50%; border: 22px solid rgba(49,230,161,.18); display: grid; place-items: center; background: radial-gradient(circle, rgba(49,230,161,.24), transparent 56%); box-shadow: inset 0 0 60px rgba(120,166,255,.2); }
.pitch { width: 150px; height: 220px; border-radius: 26px; border: 2px solid rgba(255,255,255,.5); display: grid; place-items: center; color: var(--green); font-weight: 950; text-align: center; letter-spacing: .1em; }
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.metrics-grid div { padding: 16px; background: rgba(255,255,255,.08); border-radius: 18px; border: 1px solid var(--line); }
.metrics-grid b { display: block; font-size: 25px; color: var(--text); }
.metrics-grid span { display: block; color: var(--muted); font-size: 13px; }
.section { padding: 72px 5vw; }
.section-title { max-width: 760px; margin-bottom: 28px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-grid article, .setup-card { background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 28px; padding: 26px; }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.check-list { border-radius: 28px; padding: 26px; }
.footer { padding: 28px 5vw; color: var(--muted); border-top: 1px solid var(--line); }
.center-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { width: min(520px, 100%); border-radius: 30px; padding: 28px; display: grid; gap: 14px; }
.app-shell { padding: 28px 5vw 70px; }
.auth-panel { width: min(1040px, 100%); margin: 28px auto; border-radius: 32px; padding: 28px; display: grid; grid-template-columns: 1.2fr .9fr .9fr; gap: 24px; align-items: start; }
.stack { display: grid; gap: 12px; }
.mini-form { padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.05); }
.dashboard { display: grid; gap: 22px; }
.toolbar, .panel { border-radius: 28px; padding: 22px; }
.toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.toolbar h1 { font-size: 42px; margin: 4px 0 0; }
.user-badge, .pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--muted); border: 1px solid var(--line); font-size: 13px; }
.grid-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cards-list { display: grid; gap: 12px; }
.item-card { border: 1px solid var(--line); background: rgba(255,255,255,.06); border-radius: 18px; padding: 14px; }
.item-card strong { color: #fff; }
.item-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.notice { border-radius: 18px; padding: 14px 16px; background: rgba(49,230,161,.1); border: 1px solid rgba(49,230,161,.25); color: #c8ffe8; }
.seat-toolbar { margin: 14px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.seats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; max-height: 430px; overflow: auto; padding-right: 4px; }
.seat { border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px; background: rgba(255,255,255,.08); color: var(--text); cursor: pointer; text-align: center; font-size: 12px; }
.seat small { display: block; color: var(--muted); margin-top: 3px; }
.seat.available { border-color: rgba(49,230,161,.4); }
.seat.reserved { border-color: rgba(255,209,102,.5); background: rgba(255,209,102,.12); }
.seat.sold { opacity: .5; cursor: not-allowed; background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.35); }
pre#verifyResult { min-height: 110px; }
@media (max-width: 980px) {
    .hero, .split-section, .grid-two, .auth-panel { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .site-header, .app-header { height: auto; min-height: 70px; gap: 14px; flex-wrap: wrap; padding: 14px 5vw; }
    .toolbar { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 620px) {
    .feature-grid, .metrics-grid { grid-template-columns: 1fr; }
    .hero { padding-top: 36px; }
    .hero-card { min-height: auto; }
    .stadium-ring { height: 250px; }
    .site-header nav { display: none; }
    .toolbar h1 { font-size: 32px; }
}
.account-actions { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.account-forms { display:grid; gap:14px; margin-top:14px; }
.check-row { display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:700; }
.check-row input { width:auto; }
.compact-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 980px) { .compact-grid { grid-template-columns: 1fr; } }

/* Landing travel + match upgrade */
.travel-hero { min-height: auto; padding-top: 86px; }
.travel-hero-card { gap: 20px; min-height: 440px; }
.trip-card { border: 1px solid var(--line); border-radius: 28px; padding: 24px; background: rgba(255,255,255,.07); }
.trip-card h2 { font-size: clamp(26px, 4vw, 44px); }
.travel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.travel-panel { border-radius: 28px; padding: 24px; }
.grid-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.travel-result { border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: rgba(255,255,255,.05); min-height: 84px; }
.travel-result p { margin: 6px 0 12px; }
.match-browser { border-radius: 30px; padding: 22px; }
.match-toolbar { display: grid; grid-template-columns: 220px 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; }
.small-note { font-size: 13px; margin: 8px 0 14px; }
.group-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 16px; }
.group-chip { min-width: 220px; text-align: left; border: 1px solid var(--line); border-radius: 18px; padding: 12px; color: var(--text); background: rgba(255,255,255,.06); cursor: pointer; }
.group-chip:hover { border-color: rgba(49,230,161,.5); transform: translateY(-1px); }
.group-chip strong { display: block; color: var(--green); margin-bottom: 4px; }
.group-chip span { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.match-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-height: 720px; overflow: auto; padding-right: 4px; }
.match-card { display: flex; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 22px; padding: 16px; background: rgba(255,255,255,.06); }
.match-card h3 { margin-top: 10px; }
.match-card h3 span { color: var(--muted); font-size: 16px; }
.match-card p { margin-bottom: 0; }
.match-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 150px; }
@media (max-width: 980px) {
    .travel-grid, .match-list { grid-template-columns: 1fr; }
    .match-toolbar { grid-template-columns: 1fr; }
    .match-card { flex-direction: column; }
    .match-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 620px) {
    .grid-three { grid-template-columns: 1fr; }
}


/* Manual payment QR cards */
.payment-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.payment-card { border-radius: 26px; padding: 18px; display: grid; gap: 14px; }
.payment-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.payment-card h3 { font-size: 22px; margin: 6px 0 0; }
.payment-qr { width: 100%; max-width: 280px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 20px; background: #fff; padding: 10px; margin-inline: auto; }
.payment-details { display:grid; gap:8px; }
.payment-details code, .payment-card code { word-break: break-all; color: var(--gold); }
.compact-payments { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.payment-card.compact { box-shadow:none; background:rgba(255,255,255,.05); }
.installer-body { min-height:100vh; padding:32px 5vw; }
.installer-shell { max-width:1180px; margin:0 auto; display:grid; gap:22px; }
.installer-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.check-table { width:100%; border-collapse:collapse; overflow:hidden; border-radius:18px; }
.check-table td, .check-table th { padding:12px; border-bottom:1px solid var(--line); text-align:left; }
.check-pass { color:var(--green); font-weight:900; }
.check-fail { color:var(--red); font-weight:900; }
@media (max-width: 1180px) { .payment-grid, .compact-payments { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .payment-grid, .compact-payments, .installer-grid { grid-template-columns:1fr; } }

.super-admin-shell{padding:24px;max-width:1480px;margin:0 auto}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}.compact .section-title,.section-title.compact{margin-bottom:8px}.mini-form input,.mini-form textarea,.mini-form select{width:100%}.toolbar-actions{display:flex;gap:10px;flex-wrap:wrap}.auth-card{max-width:520px;margin:40px auto}.check-row{display:flex;align-items:center;gap:8px}