:root {
            --cream: #FEFAE0; --sage-light: #E9EDC9; --sage: #CCD5AE;
            --ink: #1E2A3A; --ink-soft: #3D4F60; --gold: #D4A855; --gold-light: #E8C86A;
            --white: #FFFFFF;
            --font-display: 'Playfair Display', Georgia, serif;
            --font-body: 'DM Sans', -apple-system, sans-serif;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; }
        body { font-family: var(--font-body); color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; }
        .register-wrapper { display: flex; min-height: 100vh; }

        /* Brand Panel */
        .brand-panel {
            flex: 0 0 38%; background: linear-gradient(165deg, var(--ink) 0%, #2a3f52 100%);
            display: flex; flex-direction: column; justify-content: center;
            padding: 3.5rem; position: relative; overflow: hidden;
        }
        .brand-panel::before {
            content: ''; position: absolute; top: -30%; right: -20%;
            width: 60vmax; height: 60vmax; border-radius: 50%;
            background: radial-gradient(circle, rgba(212,168,85,.08) 0%, transparent 60%);
            pointer-events: none;
        }
        .brand-panel::after {
            content: ''; position: absolute; bottom: -20%; left: -10%;
            width: 40vmax; height: 40vmax; border-radius: 50%;
            background: radial-gradient(circle, rgba(204,213,174,.05) 0%, transparent 50%);
            pointer-events: none;
        }
        .brand-shape { position: absolute; border: 1px solid rgba(212,168,85,.1); border-radius: 50%; pointer-events: none; }
        .brand-shape-1 { width: 300px; height: 300px; top: 15%; right: 10%; animation: float 8s ease-in-out infinite; }
        .brand-shape-2 { width: 180px; height: 180px; bottom: 20%; left: 5%; animation: float 10s ease-in-out infinite reverse; }
        @keyframes float { 0%,100% { transform:translate(0,0) rotate(0deg); } 50% { transform:translate(15px,-15px) rotate(3deg); } }

        .brand-panel .brand-icon {
            width: 60px; height: 60px; background: linear-gradient(135deg, var(--gold), var(--gold-light));
            border-radius: 16px; display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem; color: var(--ink); margin-bottom: 1.5rem;
            box-shadow: 0 8px 25px rgba(212,168,85,.2);
        }
        .brand-panel h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem,2.8vw,2.4rem); color: var(--white); letter-spacing: -.02em; line-height: 1.15; }
        .brand-panel h1 .highlight { background: linear-gradient(135deg, var(--gold),var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .brand-panel p { color: rgba(255,255,255,.55); font-size: .9rem; line-height: 1.7; margin-top: .75rem; max-width: 360px; }

        /* Form Panel */
        .form-panel { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem; }
        .form-card { width: 100%; max-width: 520px; }

        /* Step Indicator */
        .step-indicator { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; }
        .step-dot {
            width: 32px; height: 32px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: .75rem; font-weight: 700; transition: all .3s;
        }
        .step-dot.completed { background: var(--sage); color: var(--ink); }
        .step-dot.active { background: var(--gold); color: var(--ink); box-shadow: 0 0 0 4px rgba(212,168,85,.15); }
        .step-dot.inactive { background: rgba(30,42,58,.06); color: var(--ink-soft); }
        .step-line { flex: 1; height: 2px; background: rgba(30,42,58,.08); max-width: 60px; }
        .step-line.completed { background: var(--sage); }
        .step-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-weight: 600; margin-left: .25rem; }

        .form-card .form-header { margin-bottom: 1.5rem; }
        .form-card .form-header h2 { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; color: var(--ink); letter-spacing: -.02em; }
        .form-card .form-header p { color: var(--ink-soft); font-size: .85rem; margin-top: .25rem; }

        .form-card .form-control, .form-card textarea.form-control {
            border: 1.5px solid rgba(204,213,174,.4); border-radius: 12px;
            padding: .65rem 1rem; font-size: .88rem; background: var(--white);
            transition: border-color .25s, box-shadow .25s; font-family: var(--font-body);
        }
        .form-card .form-control:focus, .form-card textarea.form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,85,.12); }
        .form-card .form-label { font-weight: 600; font-size: .8rem; color: var(--ink); margin-bottom: .35rem; }
        .form-card .form-text { font-size: .75rem; color: var(--ink-soft); }
        .form-card .text-danger.small { font-size: .75rem; }

        .form-check-input:checked { background-color: var(--gold); border-color: var(--gold); }
        .form-check-input:focus { box-shadow: 0 0 0 3px rgba(212,168,85,.15); border-color: var(--gold); }

        .btn-gold {
            background: linear-gradient(135deg, var(--gold), var(--gold-light));
            border: none; color: var(--ink); font-weight: 700;
            padding: .75rem 1.5rem; border-radius: 60px;
            transition: transform .3s, box-shadow .3s;
            box-shadow: 0 4px 20px rgba(212,168,85,.3);
            font-size: .9rem; width: 100%;
        }
        .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(212,168,85,.4); color: var(--ink); }
        .btn-ghost {
            background: transparent; border: 1.5px solid rgba(30,42,58,.15); color: var(--ink);
            font-weight: 600; padding: .75rem 1.5rem; border-radius: 60px;
            transition: all .3s; font-size: .9rem;
        }
        .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

        .alert-danger { background: rgba(220,53,69,.06); border: 1px solid rgba(220,53,69,.15); border-radius: 12px; color: #b02a37; font-size: .82rem; padding: .65rem 1rem; }

        /* Summary card (step 3) */
        .summary-card {
            background: rgba(204,213,174,.1);
            border: 1px solid rgba(204,213,174,.3);
            border-radius: 14px;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
        .summary-card .row + .row { border-top: 1px solid rgba(204,213,174,.2); padding-top: .75rem; margin-top: .75rem; }
        .summary-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); font-weight: 600; }
        .summary-value { font-size: .95rem; color: var(--ink); font-weight: 500; }

        .form-card .form-footer-text { text-align: center; margin-top: 1.25rem; font-size: .82rem; color: var(--ink-soft); }
        .form-card .form-footer-text a { color: var(--gold); text-decoration: none; font-weight: 600; }
        .form-card .form-footer-text a:hover { text-decoration: underline; }

        @media (max-width: 991.98px) {
            .register-wrapper { flex-direction: column; }
            .brand-panel { flex: none; padding: 2.5rem 2rem; min-height: auto; }
            .brand-panel h1 { font-size: 1.5rem; }
            .brand-panel .brand-icon { width: 48px; height: 48px; font-size: 1.2rem; margin-bottom: 1rem; }
            .form-panel { padding: 2rem 1.5rem; }
        }