:root {
            --wbs-gold: #d4a719;
            --wbs-gold-bright: #ffe680;
            --wbs-gold-soft: #f6d35b;
            --wbs-red-dark: #3c0000;
            --wbs-red: #7a0000;
            --wbs-black: #050505;
            --wbs-panel: rgba(0, 0, 0, .74);
        }

        * { box-sizing: border-box; }

        html, body { min-height: 100%; }

        body {
            margin: 0;
            color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            background:
                radial-gradient(circle at top, rgba(150,0,0,.28), transparent 42%),
                url('/pages/wbs3/background-red.png'),
                #660000;
            background-attachment: fixed;
        }

        a { color: #ff3333; }
        a:hover { color: #ff7777; }

        .warning {
            max-width: 980px;
            margin: 14px auto;
            padding: 12px 16px;
            border: 2px solid var(--wbs-gold);
            background: #220000;
            color: var(--wbs-gold-bright);
            text-align: center;
            font-weight: bold;
        }

        .register-shell {
            position: relative;
            width: min(1120px, calc(100vw - 42px));
            margin: 28px auto 38px;
            padding: 18px;
            border: 3px solid var(--wbs-gold);
            border-radius: 10px;
            background:
                radial-gradient(circle at center top, rgba(150, 0, 0, .35), transparent 42%),
                #3b0000;
            background-image: url('/pages/wbs3/background-black2.png');
            background-repeat: repeat;
            box-shadow:
                0 0 0 2px #fff3a4 inset,
                0 0 0 5px #2c1600 inset,
                0 18px 45px rgba(0, 0, 0, .72);
        }
        .register-shell::before,
        .register-shell::after,
        .rivet-bl,
        .rivet-br {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background: url('/pages/wbs3/beveled-tack.png') no-repeat center center;
            background-size: contain;
            border-radius: 50%;
            pointer-events: none;
            z-index: 20;
        }

        .register-shell::before { top: 8px; left: 8px; }
        .register-shell::after { top: 8px; right: 8px; }
        .rivet-bl { bottom: 8px; left: 8px; }
        .rivet-br { bottom: 8px; right: 8px; }

        .register-header {
            text-align: center;
            padding: 18px 20px 20px;
            border-bottom: 1px solid rgba(212,167,25,.55);
        }

        .register-logo {
            display: block;
            width: 456px;
            max-width: 88%;
            height: auto;
            margin: 0 auto 8px;
        }

        .logo-placeholder {
            width: 456px;
            max-width: 88%;
            height: 130px;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dashed rgba(255,230,128,.45);
            border-radius: 8px;
            color: var(--wbs-gold-bright);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 44px;
            font-style: italic;
            text-shadow: 0 0 10px rgba(255,210,45,.7);
        }

        .register-title {
            margin: 6px 0 4px;
            color: var(--wbs-gold-bright);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 34px;
            font-variant: small-caps;
            letter-spacing: 1px;
            text-shadow: 2px 2px 0 #000, 0 0 9px rgba(255,220,90,.45);
        }

        .register-subtitle {
            margin: 0;
            color: var(--wbs-gold-soft);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 17px;
            font-style: italic;
        }

        .main-grid {
            display: grid;
            grid-template-columns: 330px minmax(0, 1fr);
            gap: 18px;
            padding-top: 18px;
        }

        .panel {
            position: relative;
            border: 2px solid var(--wbs-gold);
            border-radius: 9px;
            background:
                linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.38)),
				rgba(0,0,0,.35);
            box-shadow: 0 0 0 1px rgba(255,238,150,.26) inset;
        }

        .side-panel { padding: 22px 22px 20px; }
        .form-panel { padding: 24px 28px 26px; }
        .rules-panel { padding: 24px 30px 28px; margin-top: 18px; }

        .panel-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .panel h2,
        .panel h3 {
            margin: 0;
            color: var(--wbs-gold-bright);
            font-family: Georgia, 'Times New Roman', serif;
            font-variant: small-caps;
            letter-spacing: .8px;
            text-align: center;
            text-shadow: 2px 2px 0 #000, 0 0 8px rgba(255,220,90,.4);
        }

        .panel h2 { font-size: 31px; }
        .panel h3 { font-size: 28px; }

        .divider {
            width: 190px;
            max-width: 78%;
            height: 14px;
            margin: 8px auto 20px;
            position: relative;
            border-top: 1px solid rgba(212,167,25,.55);
        }

        .divider::after {
            content: '';
            position: absolute;
            left: 50%;
            top: -5px;
            width: 10px;
            height: 10px;
            transform: translateX(-50%) rotate(45deg);
            background: var(--wbs-gold-bright);
            box-shadow: 0 0 8px rgba(255,230,128,.7);
        }

        .side-copy {
            font-size: 15px;
            line-height: 1.45;
            text-align: center;
            margin: 0 0 18px;
        }

        .benefit-list {
            display: grid;
            gap: 16px;
            margin-top: 18px;
        }

        .benefit-item {
            display: grid;
            grid-template-columns: 38px 1fr;
            gap: 11px;
            align-items: start;
        }

        .orb-img {
            width: 38px;
            height: 38px;
            display: block;
            flex: 0 0 38px;
            margin-left: -6px;
        }

        .orb-fallback {
            width: 34px;
            height: 34px;
            border: 2px solid var(--wbs-gold);
            border-radius: 50%;
            background: radial-gradient(circle at 35% 28%, #fff8a8 0 6%, #ff0000 12%, #7b0000 52%, #1c0000 82%);
            box-shadow: 0 0 8px rgba(255,0,0,.65);
        }

        .benefit-title {
            color: var(--wbs-gold-bright);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 20px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #000;
        }

        .benefit-item p {
            margin: 2px 0 0;
            font-size: 15px;
            line-height: 1.35;
        }

        .member-note {
            margin-top: 22px;
            padding-top: 16px;
            border-top: 1px solid rgba(212,167,25,.45);
            text-align: center;
            font-size: 15px;
            line-height: 1.45;
        }

        .member-note a {
            color: #ff4444;
            font-weight: bold;
        }

        .alert {
            padding: 12px 14px;
            margin: 0 0 18px;
            border-radius: 7px;
            font-weight: bold;
            text-align: center;
        }

        .alert-danger {
            color: #ffdede;
            background: rgba(120,0,0,.74);
            border: 1px solid #ff6666;
        }

        .alert-success {
            color: #e9ffe9;
            background: rgba(0,90,0,.62);
            border: 1px solid #6cff6c;
        }

        .form-intro {
            max-width: 620px;
            margin: 0 auto 20px;
            text-align: center;
            font-size: 16px;
            line-height: 1.45;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px 20px;
        }

        .form-group { margin: 0; }

        .form-group.full { grid-column: 1 / -1; }

        label,
        .highlight {
            display: block;
            margin: 0 0 6px;
            color: var(--wbs-gold-bright);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 17px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #000;
        }

        input[type="text"],
        input[type="email"],
        input[type="password"] {
            width: 100%;
            height: 45px;
            padding: 0 13px;
            border: 2px solid var(--wbs-gold);
            border-radius: 7px;
            color: #fff;
            background: linear-gradient(#5c0909, #290000);
            font-size: 16px;
            outline: none;
            box-shadow: inset 0 0 8px rgba(0,0,0,.8);
        }

        input::placeholder { color: rgba(255,255,255,.55); }

        input:focus {
            border-color: var(--wbs-gold-bright);
            box-shadow: 0 0 9px rgba(255,221,91,.45), inset 0 0 8px rgba(0,0,0,.8);
        }

        .form-text-white {
            display: block;
            margin-top: 6px;
            color: #ddd;
            font-size: 13px;
            line-height: 1.35;
        }

        .form-check {
            margin-top: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            font-size: 14px;
        }

        .form-check input { width: 15px; height: 15px; }
        .form-check label { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #fff; }

        .captcha-wrap {
            display: flex;
            justify-content: center;
            margin: 22px 0 18px;
            min-height: 78px;
        }

        .wbs-button {
            display: block;
            width: 100%;
            min-height: 54px;
            border: 2px solid var(--wbs-gold);
            border-radius: 8px;
            color: var(--wbs-gold-bright);
            background:
                linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,0) 40%),
                linear-gradient(#9b1111, #530000 52%, #300000);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 18px;
            font-weight: bold;
            font-variant: small-caps;
            letter-spacing: .4px;
            cursor: pointer;
            text-shadow: 1px 1px 0 #000;
            box-shadow: 0 0 8px rgba(212,167,25,.28), inset 0 1px 0 rgba(255,255,255,.22);
        }

        .wbs-button:hover {
            filter: brightness(1.12);
            box-shadow: 0 0 12px rgba(255,221,91,.45), inset 0 1px 0 rgba(255,255,255,.25);
        }

        .rules-panel h3 { text-align: left; }
        .rules-intro { margin: 10px 0 18px; line-height: 1.5; }

        .rules-box {
            max-height: 420px;
            overflow: auto;
            padding: 18px 20px;
            border: 1px solid rgba(212,167,25,.55);
            border-radius: 7px;
            background: rgba(0,0,0,.45);
        }

        .rules-box ol {
            margin: 0;
            padding-left: 22px;
        }

        .rules-box li {
            margin-bottom: 12px;
            line-height: 1.45;
        }

        .rules-box p { line-height: 1.45; }

        .bottom-strip {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 36px;
            align-items: center;
            margin: 18px 0px 18px;
            padding: 18px 28px;
            border: 2px solid var(--wbs-gold);
            border-radius: 9px;
            background: rgba(0,0,0,.62);
        }

        .trust-item {
            display: grid;
            grid-template-columns: 44px 1fr;
            gap: 12px;
            align-items: center;
        }

        .trust-item:last-child { justify-self: end; }

        .trust-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }

        .trust-title {
            color: var(--wbs-gold-bright);
            font-weight: bold;
        }

        @media (max-width: 980px) {
            .main-grid { grid-template-columns: 1fr; }
            .side-panel { order: 2; }
            .form-panel { order: 1; }
            .form-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 700px) {
            .register-shell { width: calc(100vw - 18px); margin-top: 10px; padding: 12px; }
            .register-title { font-size: 28px; }
            .form-panel, .rules-panel, .side-panel { padding: 18px; }
            .bottom-strip { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
            .trust-item:last-child { justify-self: start; }
        }
		
		/* ==========================================================
		   Browser Compatibility Fixes
		   ========================================================== */
		
		select,
        select option {
            background-color: #2b0000 !important;
            color: #ffe9a3 !important;
        }

        select option:checked,
        select option:focus {
            background-color: #7a0000 !important;
            color: #fff4c2 !important;
        }

        select:focus {
            outline: none;
        }
        /* ==========================================================
           Chromium Fixes
           ========================================================== */

        input[type="text"]:not([type="checkbox"]),
        input[type="email"],
        input[type="password"],
        input[type="text"]:valid,
        input[type="email"]:valid,
        input[type="password"]:valid,
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="password"]:focus,
        input[type="text"]:autofill,
        input[type="email"]:autofill,
        input[type="password"]:autofill,
        input[type="text"]:-moz-autofill,
        input[type="email"]:-moz-autofill,
        input[type="password"]:-moz-autofill {
            color: #fff !important;
            background: linear-gradient(#5c0909, #290000) !important;
            caret-color: #fff;
            box-shadow: inset 0 0 8px rgba(0,0,0,.8) !important;
        }

        input[type="text"]:-webkit-autofill,
        input[type="email"]:-webkit-autofill,
        input[type="password"]:-webkit-autofill,
        input[type="text"]:-webkit-autofill:hover,
        input[type="email"]:-webkit-autofill:hover,
        input[type="password"]:-webkit-autofill:hover,
        input[type="text"]:-webkit-autofill:focus,
        input[type="email"]:-webkit-autofill:focus,
        input[type="password"]:-webkit-autofill:focus {
            -webkit-text-fill-color: #fff !important;
            caret-color: #fff;
            border: 2px solid var(--wbs-gold);
            -webkit-box-shadow: 0 0 0 1000px #3b0000 inset, inset 0 0 8px rgba(0,0,0,.8) !important;
            box-shadow: 0 0 0 1000px #3b0000 inset, inset 0 0 8px rgba(0,0,0,.8) !important;
            transition: background-color 9999s ease-in-out 0s;
        }

        input[type="text"]:-webkit-autofill:focus,
        input[type="email"]:-webkit-autofill:focus,
        input[type="password"]:-webkit-autofill:focus {
            border-color: var(--wbs-gold-bright);
            -webkit-box-shadow: 0 0 0 1000px #3b0000 inset, 0 0 9px rgba(255,221,91,.45), inset 0 0 8px rgba(0,0,0,.8) !important;
            box-shadow: 0 0 0 1000px #3b0000 inset, 0 0 9px rgba(255,221,91,.45), inset 0 0 8px rgba(0,0,0,.8) !important;
        }