/* Premier Pen Show theme: tokens + shared classes. Copied from the landing page's <style> block (Views/Landing/Index.cshtml) so the registration pages look identical; the landing page keeps its own copy. */
        /* THEME TOKENS
           Dark is the original look; :root.light swaps every token. Colors are bare RGB triplets so Tailwind's
           opacity modifiers (bg-onyx/80, border-gold/20 ...) keep working. */
        :root {
            color-scheme: dark;
            --c-onyx: 7 7 10;            /* page background */
            --c-obsidian: 15 15 21;      /* raised surfaces */
            --c-ink: 255 255 255;        /* "white": primary text and hairlines */
            --c-body: 243 244 246;
            --c-gray-300: 209 213 219;
            --c-gray-400: 156 163 175;
            --c-gray-500: 107 114 128;
            --c-gold-light: 255 232 156;
            --c-gold: 223 177 91;
            --c-gold-bright: 255 215 0;
            --c-gold-dark: 154 117 43;
            --c-neon-cyan: 0 240 255;
            --c-cyan-400: 34 211 238;
            --c-cyan-500: 6 182 212;
            --c-cyan-950: 8 51 68;
            --c-emerald-400: 52 211 153;
            --c-violet: 168 85 247;

            --glow-gold: rgba(223, 177, 91, 0.15);
            --glow-violet: rgba(168, 85, 247, 0.18);
            --glass-bg: rgba(15, 15, 21, 0.7);
            --glass-border: rgba(223, 177, 91, 0.15);
            --glass-border-hover: rgba(223, 177, 91, 0.4);
            --glass-hover-shadow: 0 0 30px rgba(223, 177, 91, 0.2);
            --scroll-thumb: #262636;
            --gold-text-1: #fff2c5;  --gold-text-2: #dfb15b;  --gold-text-3: #9a752b;
            --bright-text-1: #00f0ff; --bright-text-2: #a855f7; --bright-text-3: #ec4899;
            --stroke-1: #ffe89c;     --stroke-2: #ffd700;     --stroke-3: #dfb15b;
            --glow-written-gold: drop-shadow(0 0 25px rgba(255, 215, 0, 0.6));
            --glow-written-cyan: drop-shadow(0 0 25px rgba(0, 240, 255, 0.6));
            --pen-shadow: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(223, 177, 91, 0.16));
            --spotlight: rgba(223, 177, 91, 0.30);
            --toggle-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
        }
        :root.light {
            color-scheme: light;
            --c-onyx: 247 242 232;       /* warm ivory page */
            --c-obsidian: 255 255 255;
            --c-ink: 26 26 36;
            --c-body: 26 26 36;
            --c-gray-300: 63 63 80;
            --c-gray-400: 90 90 108;
            --c-gray-500: 107 107 124;
            --c-gold-light: 240 214 140;
            --c-gold: 201 154 59;
            --c-gold-bright: 224 177 50;
            --c-gold-dark: 138 101 22;
            --c-neon-cyan: 14 116 144;
            --c-cyan-400: 14 116 144;
            --c-cyan-500: 8 145 178;
            --c-cyan-950: 207 250 254;
            --c-emerald-400: 4 120 87;
            --c-violet: 126 34 206;

            --glow-gold: rgba(201, 154, 59, 0.22);
            --glow-violet: rgba(139, 92, 246, 0.12);
            --glass-bg: rgba(255, 255, 255, 0.82);
            --glass-border: rgba(168, 128, 40, 0.28);
            --glass-border-hover: rgba(168, 128, 40, 0.6);
            --glass-hover-shadow: 0 12px 34px rgba(138, 101, 22, 0.2);
            --scroll-thumb: #d9cdb2;
            --gold-text-1: #c28f2c;  --gold-text-2: #94690f;  --gold-text-3: #6b4808;
            --bright-text-1: #0e7490; --bright-text-2: #7c3aed; --bright-text-3: #be185d;
            --stroke-1: #c99a3b;     --stroke-2: #a87a1f;     --stroke-3: #7a5416;
            --glow-written-gold: drop-shadow(0 2px 8px rgba(138, 101, 22, 0.28));
            --glow-written-cyan: drop-shadow(0 2px 8px rgba(14, 116, 144, 0.25));
            --pen-shadow: drop-shadow(0 16px 16px rgba(70, 48, 10, 0.38));
            --spotlight: rgba(255, 255, 255, 0.95);
            --toggle-shadow: 0 6px 20px rgba(120, 90, 30, 0.25);
        }

        body {
            background-color: rgb(var(--c-onyx));
            color: rgb(var(--c-body));
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            transition: background-color 0.4s ease, color 0.4s ease;
        }

        /* Ambient Lighting Effects */
        .ambient-glow-gold {
            background: radial-gradient(circle, var(--glow-gold) 0%, transparent 70%);
        }
        .ambient-glow-violet {
            background: radial-gradient(circle, var(--glow-violet) 0%, transparent 70%);
        }

        /* Custom Glassmorphism */
        .glass-card {
            background: var(--glass-bg);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--glass-border);
        }
        .glass-card:hover {
            border-color: var(--glass-border-hover);
            box-shadow: var(--glass-hover-shadow);
        }

        /* Gold Gradient Text */
        .gold-gradient-text {
            background: linear-gradient(135deg, var(--gold-text-1) 0%, var(--gold-text-2) 50%, var(--gold-text-3) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .bright-gradient-text {
            background: linear-gradient(135deg, var(--bright-text-1) 0%, var(--bright-text-2) 50%, var(--bright-text-3) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .written-glow-gold { filter: var(--glow-written-gold); }
        .written-glow-cyan { filter: var(--glow-written-cyan); }

        /* Glowing Border Animation */
        .glowing-border {
            position: relative;
        }
        .glowing-border::before {
            content: '';
            position: absolute;
            inset: -1px;
            background: linear-gradient(90deg, #dfb15b, #a855f7, #00f0ff, #dfb15b);
            background-size: 300% 300%;
            border-radius: inherit;
            z-index: -1;
            animation: borderGlow 6s ease infinite;
            opacity: 0.6;
        }
        @keyframes borderGlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 3D Tilt Perspective */
        .tilt-card {
            transform-style: preserve-3d;
            transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: rgb(var(--c-onyx));
        }
        ::-webkit-scrollbar-thumb {
            background: var(--scroll-thumb);
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgb(var(--c-gold));
        }

        /* Writing Animation Overlay Styles */
        .writing-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 50;
            transition: opacity 0.8s ease;
        }

        .script-stroke {
            stroke-dasharray: 1200;
            stroke-dashoffset: 1200;
            transition: stroke-dashoffset 0.5s ease-out;
        }

        .pen-wrapper {
            position: absolute;
            width: 180px;
            height: 180px;
            transform-origin: 20px 160px;
            transition: transform 0.25s cubic-bezier(0.1, 0.8, 0.2, 1), left 0.25s ease-out, top 0.25s ease-out, opacity 0.6s ease;
        }

        .pen-nib-spark {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #ffd700;
            border-radius: 50%;
            filter: blur(2px);
            box-shadow: 0 0 15px #ffd700, 0 0 30px #ff8c00;
            pointer-events: none;
        }

        /* Hero showcase: the luxury pen (shared <symbol id="lux-pen">) on a spotlit display stage */
        .pen-shadow { filter: var(--pen-shadow); }
        .pen-spotlight {
            background: radial-gradient(ellipse at 50% 42%, var(--spotlight) 0%, transparent 65%);
        }
        .card-pen {
            position: absolute;
            width: 180px;
            height: 180px;
            left: calc(50% - 1.6px);   /* pen mid-point sits 1.35px off its box centre at 1.2x; the intro pen lands exactly here */
            top: calc(50% + 1.6px);
            transform: translate(-50%, -50%) scale(1.2);
            transition: transform 0.5s ease;
        }
        .group:hover .card-pen {
            transform: translate(-50%, -50%) scale(1.27);
        }

        /* THEME TOGGLE */
        .theme-toggle {
            box-shadow: var(--toggle-shadow);
        }
        .theme-toggle .icon-moon { display: none; }
        html.light .theme-toggle .icon-sun { display: none; }
        html.light .theme-toggle .icon-moon { display: block; }

        /* LIGHT THEME REFINEMENTS
           The tokens above flip colors; these rules cover the places where "gold" is used as text on a light
           surface (the bright gold is kept for fills/borders, text gets a deeper antique gold for contrast). */
        html.light .text-gold,
        html.light .text-gold-bright,
        html.light .hover\:text-gold:hover,
        html.light .group:hover .group-hover\:text-gold { color: #7f5d12; }
        html.light .text-gold\/80 { color: rgb(127 93 18 / 0.88); }
        html.light .hover\:text-black:hover { color: #000; }
        html.light .text-gray-200 { color: rgb(var(--c-gray-300)); }
        html.light .glowing-border::before { opacity: 0.32; }
        html.light .shadow-glow-gold { box-shadow: 0 8px 26px -6px rgba(168, 128, 40, 0.5); }
        html.light .shadow-glow-cyan { box-shadow: 0 8px 24px -6px rgba(14, 116, 144, 0.4); }
        html.light .hover\:shadow-glow-gold:hover { box-shadow: 0 8px 26px -6px rgba(168, 128, 40, 0.55); }
        html.light .hover\:shadow-glow-cyan:hover { box-shadow: 0 8px 24px -6px rgba(14, 116, 144, 0.45); }

/* ---------- Registration form components (built on the tokens above) ---------- */
.pf-label { display:block; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgb(var(--c-gray-300)); margin-bottom:.4rem; }
.pf-input, .pf-select {
    width:100%; background:rgb(var(--c-onyx)); color:rgb(var(--c-ink)); border:1px solid rgb(var(--c-gold) / .3);
    border-radius:.75rem; padding:.75rem .9rem; font-size:.9rem; transition:border-color .2s, box-shadow .2s;
}
.pf-input::placeholder { color:rgb(var(--c-gray-500)); }
.pf-input:focus, .pf-select:focus { outline:none; border-color:rgb(var(--c-gold)); box-shadow:0 0 0 3px rgb(var(--c-gold) / .18); }
.pf-input[readonly] { opacity:.75; cursor:not-allowed; }
.pf-error { color:#f87171; font-size:.75rem; margin-top:.35rem; }
html.light .pf-error { color:#b91c1c; }
.pf-hint { color:rgb(var(--c-gray-400)); font-size:.72rem; margin-top:.35rem; }
.btn-gold {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.75rem; border-radius:9999px;
    font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#000; cursor:pointer; border:0;
    background:linear-gradient(90deg, rgb(var(--c-gold-light)), rgb(var(--c-gold)), rgb(var(--c-gold-bright)));
    transition:transform .25s, box-shadow .25s;
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 0 25px -5px rgba(223,177,91,.5); }
.btn-gold:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-ghost {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1.4rem; border-radius:9999px;
    font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
    color:rgb(var(--c-ink)); background:rgb(var(--c-obsidian)); border:1px solid rgb(var(--c-gold) / .4); transition:border-color .2s, transform .2s;
}
.btn-ghost:hover { border-color:rgb(var(--c-neon-cyan)); transform:translateY(-1px); }
.btn-link { background:none; border:0; padding:0; cursor:pointer; color:rgb(var(--c-cyan-400)); font-size:.8rem; text-decoration:underline; text-underline-offset:3px; }
.btn-link:hover { color:rgb(var(--c-gold)); }
.btn-danger { color:#f87171; border-color:rgba(248,113,113,.4); }
html.light .btn-danger { color:#b91c1c; border-color:rgba(185,28,28,.4); }
.pf-alert { border-radius:.9rem; padding:.8rem 1rem; font-size:.82rem; border:1px solid; }
.pf-alert-error { color:#fca5a5; background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.35); }
.pf-alert-info  { color:rgb(var(--c-cyan-400)); background:rgb(var(--c-neon-cyan) / .07); border-color:rgb(var(--c-neon-cyan) / .3); }
html.light .pf-alert-error { color:#991b1b; }
.pf-step { display:flex; align-items:center; gap:.55rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgb(var(--c-gray-400)); }
.pf-step .dot { width:1.7rem; height:1.7rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; font-weight:700; border:1px solid rgb(var(--c-gold) / .35); color:rgb(var(--c-gray-300)); }
.pf-step.is-active { color:rgb(var(--c-gold)); }
.pf-step.is-active .dot, .pf-step.is-done .dot { background:linear-gradient(135deg, rgb(var(--c-gold-light)), rgb(var(--c-gold))); color:#000; border-color:transparent; }
.pf-step.is-done { color:rgb(var(--c-emerald-400)); }
/* Brand-name chips */
.chip-box { display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; background:rgb(var(--c-onyx)); border:1px solid rgb(var(--c-gold) / .3); border-radius:.75rem; padding:.5rem .6rem; cursor:text; }
.chip-box:focus-within { border-color:rgb(var(--c-gold)); box-shadow:0 0 0 3px rgb(var(--c-gold) / .18); }
.chip-box input { flex:1 1 9rem; min-width:8rem; background:transparent; border:0; outline:0; color:rgb(var(--c-ink)); font-size:.9rem; padding:.25rem; }
.chip { display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .35rem .28rem .75rem; border-radius:9999px; font-size:.8rem;
        background:rgb(var(--c-gold) / .14); border:1px solid rgb(var(--c-gold) / .4); color:rgb(var(--c-gold-light)); }
html.light .chip { color:#7f5d12; }
.chip button { width:1.35rem; height:1.35rem; border-radius:9999px; border:0; cursor:pointer; line-height:1; font-size:.9rem; color:inherit; background:rgb(var(--c-ink) / .1); }
.chip button:hover { background:rgba(248,113,113,.3); }
/* Yes / No switch */
.pf-switch { display:inline-flex; border:1px solid rgb(var(--c-gold) / .35); border-radius:9999px; overflow:hidden; }
.pf-switch input { position:absolute; opacity:0; pointer-events:none; }
.pf-switch label { padding:.5rem 1.4rem; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; color:rgb(var(--c-gray-300)); }
.pf-switch input:checked + label { background:linear-gradient(90deg, rgb(var(--c-gold-light)), rgb(var(--c-gold))); color:#000; }
.pf-switch input:focus-visible + label { outline:2px solid rgb(var(--c-neon-cyan)); outline-offset:-2px; }
/* Dual-handle price range slider: two stacked native range inputs over a drawn track. */
.range-dual { position:relative; height:2rem; margin:.25rem .6rem .5rem; }
.range-dual .range-track { position:absolute; left:0; right:0; top:50%; height:.35rem; transform:translateY(-50%); border-radius:9999px; background:rgb(var(--c-ink) / .14); }
.range-dual .range-fill { position:absolute; top:0; bottom:0; border-radius:9999px; background:linear-gradient(90deg, rgb(var(--c-gold-light)), rgb(var(--c-gold))); }
.range-dual input[type=range] { position:absolute; left:-.6rem; width:calc(100% + 1.2rem); top:0; height:100%; margin:0; background:transparent; pointer-events:none; -webkit-appearance:none; appearance:none; }
.range-dual input[type=range]::-webkit-slider-runnable-track { background:transparent; height:100%; }
.range-dual input[type=range]::-moz-range-track { background:transparent; height:100%; }
.range-dual input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; pointer-events:auto; cursor:grab; width:1.3rem; height:1.3rem; margin-top:.35rem; border-radius:9999px; border:2px solid rgb(var(--c-onyx)); background:rgb(var(--c-gold)); box-shadow:0 0 0 2px rgb(var(--c-gold) / .45), 0 2px 6px rgba(0,0,0,.4); }
.range-dual input[type=range]::-moz-range-thumb { pointer-events:auto; cursor:grab; width:1.1rem; height:1.1rem; border-radius:9999px; border:2px solid rgb(var(--c-onyx)); background:rgb(var(--c-gold)); box-shadow:0 0 0 2px rgb(var(--c-gold) / .45), 0 2px 6px rgba(0,0,0,.4); }
.range-dual input[type=range]:focus-visible::-webkit-slider-thumb { outline:2px solid rgb(var(--c-neon-cyan)); outline-offset:2px; }
.range-dual input[type=range]:focus-visible::-moz-range-thumb { outline:2px solid rgb(var(--c-neon-cyan)); outline-offset:2px; }
/* OTP boxes */
.otp-input { text-align:center; letter-spacing:.7em; font-size:1.6rem; font-family:'Playfair Display', serif; padding-left:1.2em; }