:root {
    --dark: #07301F;
    --green: #0E5B35;
    --mid: #128A4B;
    --bright: #2EAF6C;
    --pale: #F0F9F4;
    --mist: #DEECE3;
    --ink: #0A2A1B;
    --grey: #6b776f;
    --white: #ffffff;
    --danger: #b3261e;
    --shadow: 0 12px 34px rgba(7, 48, 31, .14);
    --radius: 16px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: linear-gradient(160deg, #ffffff 0%, var(--pale) 45%, #e6f3ec 100%);
    min-height: 100vh;
}

a { color: var(--green); }

.wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: 28px 20px 60px;
}

/* Header */
.site-head {
    background: linear-gradient(120deg, var(--green) 0%, var(--dark) 100%);
    color: var(--white);
    padding: 18px 0;
    box-shadow: var(--shadow);
}
.site-head .wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.site-head img {
    height: 62px;
    width: 62px;
    border-radius: 12px;
    background: var(--white);
    object-fit: cover;
    padding: 4px;
}
.site-head h1 { margin: 0; font-size: 24px; letter-spacing: .3px; }
.site-head p { margin: 2px 0 0; color: #cfe9db; font-size: 14px; letter-spacing: 2px; }

/* Cards */
.card {
    background: var(--white);
    border: 1px solid var(--mist);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px 34px;
    margin-bottom: 22px;
}

/* Event hero */
.hero {
    background: linear-gradient(135deg, var(--green), var(--dark));
    color: var(--white);
    border-radius: var(--radius);
    padding: 26px 30px;
    margin-bottom: 22px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.12);
}
.hero .kicker { color: var(--bright); letter-spacing: 4px; font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.hero h2 { margin: 0 0 6px; font-size: 30px; }
.hero p { margin: 0; color: #cfe9db; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; font-size: 14px; color: #e7f5ee; }
.hero .meta b { color: var(--white); }

/* Form */
label.field { display: block; margin-bottom: 18px; font-weight: 600; }
label.field span { display: block; margin-bottom: 6px; font-size: 13px; letter-spacing: .6px; color: var(--grey); text-transform: uppercase; }
input, select {
    width: 100%;
    padding: 13px 14px;
    border: 1.5px solid var(--mist);
    border-radius: 10px;
    font-size: 16px;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
    outline: none;
    border-color: var(--mid);
    box-shadow: 0 0 0 3px rgba(18,138,75,.15);
}
select { cursor: pointer; }

.btn {
    display: inline-block;
    border: 0;
    border-radius: 12px;
    padding: 14px 26px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform .06s, box-shadow .15s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(120deg, var(--green), var(--dark)); color: var(--white); box-shadow: 0 8px 20px rgba(7,48,31,.25); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(7,48,31,.35); }
.btn-light { background: var(--pale); color: var(--green); border: 1.5px solid var(--mist); }
.btn-light:hover { background: #e2f2e9; }
.btn-block { width: 100%; text-align: center; }
.btn-sm { padding: 9px 16px; font-size: 14px; border-radius: 9px; }

/* Form grids (collapse to one column on mobile) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.three-col-grid { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 14px; }
.inline-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.inline-row > .field { flex: 1; min-width: 180px; margin-bottom: 0; }
.inline-row .btn { white-space: nowrap; }

/* Alerts */
.alert { border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; font-size: 15px; }
.alert-error { background: #fdeceb; color: var(--danger); border: 1px solid #f3c4c1; }
.alert-info { background: var(--pale); color: var(--green); border: 1px solid var(--mist); }
.alert ul { margin: 6px 0 0; padding-left: 20px; }

/* Pass preview */
.pass-stage { text-align: center; }
.pass-stage img {
    width: 100%;
    max-width: 520px;
    border-radius: 18px;
    box-shadow: var(--shadow);
    border: 1px solid var(--mist);
}
.dl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 320px));
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
}
.dl-grid .dl { border: 1.5px solid var(--mist); border-radius: 14px; padding: 16px; text-align: center; background: #fff; }
.dl-grid .dl .ic { font-size: 26px; }
.dl-grid .dl h4 { margin: 8px 0 4px; }
.dl-grid .dl p { margin: 0 0 12px; color: var(--grey); font-size: 13px; }

/* Steps */
.steps { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; padding: 0; list-style: none; }
.steps li { flex: 1; min-width: 180px; background: var(--white); border: 1px solid var(--mist); border-radius: 12px; padding: 12px 14px; font-size: 13px; color: var(--grey); }
.steps b { display: block; color: var(--green); font-size: 12px; letter-spacing: 1px; margin-bottom: 2px; }

/* Verify */
.verify-badge { border-radius: 14px; padding: 20px; text-align: center; font-size: 18px; font-weight: 700; }
.verify-badge.valid { background: #e5f6ec; color: var(--green); border: 1px solid #bfe6cf; }
.verify-badge.invalid { background: #fdeceb; color: var(--danger); border: 1px solid #f3c4c1; }
.verify-badge .big { font-size: 30px; display: block; margin-bottom: 6px; }
.verify-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.verify-table td { padding: 10px 12px; border-bottom: 1px solid var(--mist); font-size: 15px; }
.verify-table td:first-child { color: var(--grey); font-weight: 600; width: 40%; }

.footer-note { text-align: center; color: var(--grey); font-size: 13px; margin-top: 30px; }
.secure-line { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--green); font-weight: 600; letter-spacing: 1px; font-size: 13px; margin-top: 10px; }

/* Admin tables */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--mist); font-size: 14px; }
table.grid th { color: var(--grey); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: var(--pale); color: var(--green); border: 1px solid var(--mist); }

/* ---- Mobile responsive ---- */
@media (max-width: 768px) {
    .wrap { padding: 20px 14px 50px; }
    .card { padding: 22px 18px; }
    .form-grid, .three-col-grid { grid-template-columns: 1fr; }

    /* header */
    .site-head .wrap { gap: 12px; }
    .site-head img { height: 48px; width: 48px; border-radius: 10px; }
    .site-head h1 { font-size: 18px; }
    .site-head p { letter-spacing: 1px; font-size: 11px; }

    /* hero */
    .hero { padding: 20px; }
    .hero h2 { font-size: 24px; }
    .hero .meta { gap: 10px; }

    /* steps */
    .steps li { min-width: 100%; }

    /* downloads */
    .dl-grid { grid-template-columns: 1fr; }

    /* verify table stacks label over value */
    .verify-table td { display: block; width: 100%; }
    .verify-table td:first-child { width: 100%; padding-bottom: 2px; }

    /* inline forms stack vertically */
    .inline-row { flex-direction: column; align-items: stretch; }
    .inline-row > .field { min-width: 0; margin-bottom: 14px; }
    .inline-row .btn { width: 100%; }

    /* buttons become full width for easier tapping */
    .btn { width: 100%; text-align: center; }
    /* ...except inside tables, which stay inline */
    table .btn { width: auto; display: inline-block; }
}

@media (max-width: 400px) {
    .site-head h1 { font-size: 16px; }
    .hero h2 { font-size: 20px; }
    .hero .kicker { letter-spacing: 2px; }
}