:root {
        --gold: #F9C94C;
        --orange: #F28E1C;
        --black: #0b0b0e;
        --white: #fff;
        --ink: #0b0b0e;
        --muted: #2b2b33;
        --surface: #fff;
        --border: #e6e6ec;
        --radius: 1.25rem;
        --deep: #1a0f2e;
    }

    html {
        font-size: clamp(15px, 1.05vw + .45rem, 17px);
    }

    body {
        font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        color: var(--ink);
        background: var(--surface);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
    }

    .font-display {
        font-family: "Space Grotesk", Inter, system-ui, sans-serif;
        letter-spacing: -.01em;
    }

    .muted {
        color: color-mix(in oklab, currentColor 75%, transparent);
    }

    .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
    }

    .badge {
        border: 1px solid rgba(249, 201, 76, .9);
        background: rgba(249, 201, 76, .14);
        color: #231a02;
        border-radius: 999px;
        padding: .35rem .7rem;
        font-size: .8rem;
        letter-spacing: .02em;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        border-radius: 9999px;
        padding: .9rem 1.15rem;
        font-weight: 600;
        border: 1px solid transparent;
        transition: transform .2s ease, box-shadow .2s ease, opacity .15s ease;
        cursor: pointer;
    }

    .btn-primary {
        background: var(--orange);
        color: var(--black);
        box-shadow: 0 6px 20px rgba(242, 142, 28, .25);
    }

    .btn-primary:hover:not([disabled]) {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(242, 142, 28, .35);
    }

    .btn-primary[disabled] {
        opacity: .6;
        cursor: not-allowed;
        box-shadow: none;
    }

    .btn-ghost {
        background: transparent;
        border-color: currentColor;
    }

    .btn-ghost:hover:not([disabled]) {
        background: color-mix(in oklab, currentColor 8%, transparent);
    }

    .halo {
        position: absolute;
        inset: 0;
        background: radial-gradient(60% 60% at 50% 40%, rgba(249, 201, 76, .16) 0%, rgba(249, 201, 76, .08) 40%, rgba(46, 29, 72, 0) 65%);
        z-index: 0;
    }

    .divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .12), transparent);
    }

    .grid-accent {
        background-image: linear-gradient(to right, rgba(0, 0, 0, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, .05) 1px, transparent 1px);
        background-size: 16px 16px;
        mask-image: radial-gradient(90% 80% at 0% 50%, black 0%, transparent 70%);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --surface: #0b0b0e;
            --ink: #f6f6f7;
            --muted: #b5b5bb;
            --border: #26262c;
        }

        .divider {
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
        }

        .card {
            background: color-mix(in srgb, #111 80%, transparent);
            border-color: color-mix(in srgb, #fff 10%, transparent);
        }

        .grid-accent {
            background-image: linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
        }
    }

    @media (max-width: 640px) {
        .sticky-submit {
            position: sticky;
            bottom: 0;
            background: color-mix(in oklab, var(--surface) 92%, transparent);
            backdrop-filter: blur(8px);
            padding-top: .5rem;
            border-top: 1px solid var(--border);
        }
    }

    .field {
        border: 1px solid var(--border);
        border-radius: .75rem;
        padding: .75rem 1rem;
        font-size: 1rem;
        transition: border-color .2s, box-shadow .2s;
    }

    .field:focus {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 35%, transparent);
        border-color: color-mix(in oklab, var(--gold) 55%, var(--border));
    }

    .banner {
        border: 1px solid #f5c2c7;
        background: #fff5f6;
        color: #661920;
        border-radius: .9rem;
        padding: .9rem 1rem;
    }

    @media (prefers-color-scheme: dark) {
        .banner {
            border-color: #74343b;
            background: #2a1215;
            color: #ffccd1;
        }
    }

    .banner.success {
        border-color: #d1e7dd;
        background: #d1e7dd;
        color: #0f5132;
    }

    @media (prefers-color-scheme: dark) {
        .banner.success {
            border-color: #198754;
            background: #155724;
            color: #d4edda;
        }
    }

    .field-group.has-error .field {
        border-color: #dc2626;
    }

    .field-group.has-error .field:focus {
        box-shadow: 0 0 0 3px color-mix(in oklab, #dc2626 35%, transparent);
    }

    .spinner {
        width: 1.1rem;
        height: 1.1rem;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spin 800ms linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .error-text {
        color: #dc2626;
        font-size: .875rem;
        margin-top: .5rem;
    }

    @media (prefers-color-scheme: dark) {
        .error-text {
            color: #ff7675;
        }
    }