:root {
            --navy:        #1a2e4a;
            --navy-mid:    #243a5e;
            --navy-light:  #2f4d7e;
            --gold:        #c9a84c;
            --gold-light:  #e2c06e;
            --gold-pale:   #f5edd8;
            --cream:       #faf8f4;
            --muted:       #6b7c93;
            --border:      #d8e0eb;
            --white:       #ffffff;
            --text:        #1e2a3b;
            --text-light:  #4a5568;
            --error:       #c0392b;
            --success:     #1a6b3c;

            --font-head:   'Crimson Pro', Georgia, serif;
            --font-body:   'DM Sans', 'Segoe UI', sans-serif;

            --radius-sm:   6px;
            --radius-md:   10px;
            --radius-lg:   16px;
            --shadow-card: 0 4px 24px rgba(26,46,74,0.10), 0 1px 4px rgba(26,46,74,0.06);
            --shadow-btn:  0 2px 8px rgba(201,168,76,0.30);
        }

        *, *::before, *::after { box-sizing: border-box; }

        body {
            background-color: #edf1f7;
            background-image:
                radial-gradient(ellipse at 15% 20%, rgba(47,77,126,0.08) 0%, transparent 55%),
                radial-gradient(ellipse at 85% 80%, rgba(201,168,76,0.07) 0%, transparent 55%);
            font-family: var(--font-body);
            font-size: 0.875rem;
            color: var(--text);
            min-height: 100vh;
        }

        /* ── PAGE WRAPPER ── */
        .page-wrapper {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 28px 16px;
        }

        /* ── CARD ── */
        .reg-card {
            width: 100%;
            max-width: 860px;
            background: var(--white);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-card);
            border: 1px solid var(--border);
            overflow: hidden;
        }

        /* ── HEADER ── */
        .reg-header {
            background: linear-gradient(135deg, #f5c800 0%, #ffd700 50%, #f0b800 100%);
            padding: 28px 32px 24px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .reg-header::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                45deg,
                rgba(255,255,255,0.08) 0px,
                rgba(255,255,255,0.08) 1px,
                transparent 1px,
                transparent 14px
            );
        }

        .reg-header::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, rgba(120,80,0,0.35), rgba(120,80,0,0.55), rgba(120,80,0,0.35), transparent);
        }

        .header-inner { position: relative; z-index: 1; }

        .logo-wrap {
            width: 68px;
            height: 68px;
            background: rgba(255,255,255,0.45);
            border: 2px solid rgba(120,80,0,0.30);
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
            padding: 6px;
        }

        .logo-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            border-radius: 50%;
        }

        .reg-header h1 {
            font-family: var(--font-head);
            font-size: 1.25rem;
            font-weight: 600;
            color: #3a2500;
            margin: 0 0 6px;
            line-height: 1.35;
            letter-spacing: 0.01em;
            text-shadow: 0 1px 2px rgba(255,255,255,0.30);
        }

        .event-badge {
            display: inline-block;
            background: rgba(255,255,255,0.35);
            border: 1px solid rgba(120,80,0,0.25);
            color: #5a3800;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 4px 14px;
            border-radius: 20px;
        }

        /* ── BODY ── */
        .reg-body {
            padding: 28px 32px 24px;
        }

        .section-title {
            font-family: var(--font-head);
            font-size: 1rem;
            font-weight: 600;
            color: var(--navy);
            margin: 0 0 18px;
            padding-bottom: 8px;
            border-bottom: 1.5px solid var(--gold-pale);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-title::before {
            content: '';
            width: 3px;
            height: 16px;
            background: linear-gradient(to bottom, var(--gold), var(--gold-light));
            border-radius: 2px;
            flex-shrink: 0;
        }

        /* ── FORM FIELDS ── */
        .form-label {
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--navy-mid);
            letter-spacing: 0.02em;
            margin-bottom: 5px;
        }

        .form-control,
        .form-select {
            font-family: var(--font-body);
            font-size: 0.85rem;
            color: var(--text);
            background: var(--cream);
            border: 1.5px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 8px 12px;
            height: auto;
            transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--navy-light);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(47,77,126,0.10);
            outline: none;
        }

        .form-control::placeholder { color: #a0aec0; font-size: 0.82rem; }

        .form-control.is-invalid,
        .form-select.is-invalid {
            border-color: var(--error);
            background-color: #fdf5f5;
        }

        .error-msg {
            font-size: 0.74rem;
            color: var(--error);
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .error-msg::before {
            content: '!';
            width: 14px;
            height: 14px;
            background: var(--error);
            color: #fff;
            border-radius: 50%;
            font-size: 0.65rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* ── SUBMIT BUTTON ── */
        .btn-submit {
            background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
            color: var(--white);
            border: none;
            border-radius: var(--radius-md);
            padding: 11px 24px;
            font-family: var(--font-body);
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            width: 100%;
            cursor: pointer;
            box-shadow: var(--shadow-btn);
            transition: opacity 0.18s, transform 0.12s, box-shadow 0.18s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-submit:hover {
            opacity: 0.92;
            transform: translateY(-1px);
            box-shadow: 0 5px 16px rgba(26,46,74,0.22);
        }

        .btn-submit:active { transform: translateY(0); }

        .btn-submit svg {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* ── FOOTER ── */
        .reg-footer {
            border-top: 1px solid var(--border);
            padding: 14px 32px;
            background: var(--cream);
            text-align: center;
        }

        .footer-link a {
            font-size: 0.8rem;
            font-weight: 500;
            color: var(--navy-light);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: color 0.15s;
        }

        .footer-link a:hover { color: var(--gold); }

        .footer-link a svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex-shrink: 0;
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 767px) {
            .reg-header { padding: 22px 20px 20px; }
            .reg-header h1 { font-size: 1.05rem; }
            .reg-body { padding: 20px 18px 18px; }
            .reg-footer { padding: 12px 18px; }
            .logo-wrap { width: 56px; height: 56px; }
        }

        @media (max-width: 480px) {
            .reg-header h1 { font-size: 0.97rem; }
            .page-wrapper { padding: 16px 10px; }
        }