:root {
            --wbs-gold: #d8a928;
            --wbs-gold-bright: #ffe27a;
            --wbs-gold-soft: #fff1a8;
            --wbs-red-dark: #3b0000;
            --wbs-red-mid: #790707;
            --wbs-red-bright: #9d0c0c;
            --wbs-black: #050505;
            --wbs-panel: rgba(0, 0, 0, .88);
            --wbs-line: rgba(255, 213, 80, .35);
            --wbs-white: #f7f1df;
        }

        * { box-sizing: border-box; }

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

        body {
            color: var(--wbs-white);
            font-family: Arial, Helvetica, sans-serif;
            background:
                radial-gradient(circle at center top, rgba(150, 0, 0, .35), transparent 42%),
                #3b0000;
            background-image: url('/pages/wbs3/background-red.png');
            background-repeat: repeat;
        }

        a {
            color: #ff3333;
            text-decoration: underline;
        }

        a:hover { color: var(--wbs-gold-bright); }

        .warning,
        .error-message {
            width: min(1040px, calc(100% - 32px));
            margin: 18px auto 0;
            padding: 12px 18px;
            border: 2px solid var(--wbs-gold);
            border-radius: 8px;
            background: rgba(25, 0, 0, .95);
            color: var(--wbs-gold-bright);
            font-weight: bold;
            text-align: center;
            box-shadow: 0 0 18px rgba(0, 0, 0, .7);
        }

        .login-shell {
            width: min(1060px, calc(100% - 32px));
            margin: 48px auto;
            padding: 12px;
            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);
        }

        .cornered { position: relative; }

        .cornered::before,
		.cornered::after,
		.login-shell::before,
		.login-shell::after {
			content: '';
			position: absolute;
			width: 16px;
			height: 16px;
			background: url('/pages/wbs3/beveled-tack.png') no-repeat center center;
			background-size: contain;
		}

        .login-shell { position: relative; }
        .login-shell::before { top: 8px; left: 8px; }
        .login-shell::after { top: 8px; right: 8px; }
        .cornered::before { bottom: 8px; left: 8px; }
        .cornered::after { bottom: 8px; right: 8px; }

        .hero {
            text-align: center;
            padding: 22px 18px 24px;
            border-bottom: 1px solid var(--wbs-line);
        }

        .logo-placeholder {
            width: 420px;
            max-width: 88%;
            height: 112px;
            margin: 0 auto 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--wbs-gold-bright);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 42px;
            font-weight: bold;
            letter-spacing: .03em;
            text-shadow: 0 0 9px #ff9f00, 0 2px 1px #000;
            background:
                linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
                url('/pages/wbs3/LOGIN_LOGO_PLACEHOLDER.png') center / contain no-repeat;
        }

        .logo-placeholder span {
            opacity: .85;
        }

        .system-title {
            margin: 0;
            color: var(--wbs-gold-soft);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 31px;
            font-variant: small-caps;
            letter-spacing: .03em;
            text-shadow: 0 2px 2px #000;
        }

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

        .online-now {
            margin-top: 12px;
            color: var(--wbs-gold-bright);
        }

        .content-grid {
            display: grid;
            grid-template-columns: 1fr 1.2fr 1fr;
            gap: 14px;
            padding: 14px 8px 8px;
        }

        .panel {
            min-height: 390px;
            padding: 24px 28px;
            border: 2px solid var(--wbs-gold);
            border-radius: 9px;
            background: rgba(0, 0, 0, .62);
            box-shadow:
                0 0 0 1px rgba(255, 242, 168, .35) inset,
                0 0 18px rgba(0, 0, 0, .55) inset;
        }

        .panel-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
		
		.footer-spacer {
            width: 164px;
        }
		
        h2 {
            margin: 0;
            color: var(--wbs-gold-soft);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 28px;
            font-variant: small-caps;
            letter-spacing: .03em;
            text-align: center;
            text-shadow: 0 2px 2px #000;
        }

        .divider {
            width: 170px;
            max-width: 80%;
            height: 1px;
            margin: 12px auto 22px;
            background: linear-gradient(90deg, transparent, var(--wbs-gold), transparent);
            position: relative;
        }

        .divider::after {
            content: '';
            position: absolute;
            top: -4px;
            left: 50%;
            width: 8px;
            height: 8px;
            transform: translateX(-50%) rotate(45deg);
            background: var(--wbs-gold-bright);
        }

        .intro {
            margin: 0 0 18px;
            line-height: 1.45;
            text-align: center;
        }

        .feature {
            display: grid;
            grid-template-columns: 38px 1fr;
            gap: 12px;
            margin: 18px 0;
        }

        .orb {
            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);
        }
		
		.orb-img {
            width: 45px;
            height: 45px;
			display: block;
			flex: 0 0 38px;
			margin-left: -6px;
        }

        .feature strong {
            display: block;
            color: var(--wbs-gold-bright);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 18px;
        }

        .feature span {
            display: block;
            margin-top: 2px;
            line-height: 1.35;
        }

        label {
            display: block;
            margin: 13px 0 6px;
            color: var(--wbs-gold-soft);
            font-family: Georgia, 'Times New Roman', serif;
            font-weight: bold;
            font-size: 17px;
        }

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

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

        .show-password {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 12px 0 18px;
            color: var(--wbs-white);
            font-size: 14px;
        }

        .show-password input { transform: translateY(1px); }

        .wbs-btn {
            width: 100%;
            min-height: 51px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 0 22px;
            border: 2px solid var(--wbs-gold);
            border-radius: 9px;
            color: var(--wbs-gold-bright);
            background: linear-gradient(#9f1010, #4d0000 55%, #1d0000);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 19px;
            font-weight: bold;
            font-variant: small-caps;
            text-decoration: none;
            cursor: pointer;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.25),
                0 3px 8px rgba(0,0,0,.55);
            text-shadow: 0 2px 1px #000;
        }

        .wbs-btn:hover {
            color: #fff7b8;
            border-color: #fff0a0;
            background: linear-gradient(#b91414, #650000 55%, #260000);
        }

        .help-block {
            margin-top: 20px;
            padding-top: 18px;
            border-top: 1px solid var(--wbs-line);
            text-align: center;
            line-height: 1.45;
        }

        .help-block strong {
            color: var(--wbs-gold-bright);
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 16px;
        }

        .create-btn-wrap { margin-top: 36px; }

        .learn-more {
            margin-top: 15px;
            text-align: center;
            font-size: 14px;
        }

        .bottom-strip {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 22px;
            align-items: center;
            margin: 14px 8px 24px;
            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-icon {
            color: var(--wbs-gold-bright);
            font-size: 28px;
            text-align: center;
        }

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

        .coin-placeholder {
            width: 64px;
            height: 64px;
            border: 2px solid var(--wbs-gold);
            border-radius: 50%;
            background: radial-gradient(circle, #222, #000 55%, #3b0000 100%);
            box-shadow: 0 0 12px rgba(255, 214, 80, .28);
        }
		
		.shell-rivet {
			position: absolute;
			width: 16px;
			height: 16px;
			background: url('/pages/wbs3/beveled-tack.png') no-repeat center center;
			background-size: contain;
			z-index: 20;
			pointer-events: none;
		}

		.shell-rivet-bottom-left {
			bottom: 8px;
			left: 8px;
		}

		.shell-rivet-bottom-right {
			bottom: 8px;
			right: 8px;
		}
		
		.online-pill {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 10px 30px;
			background: rgba(0,0,0,.35);
			border: 1px solid #caa437;
			border-radius: 20px;
			color: #ffd86b;
			text-decoration: none;
			font-size: 14px;
			font-weight: bold;
			transition: all .2s ease;
		}

		.online-pill:hover {
			background: rgba(90,0,0,.4);
			box-shadow: 0 0 8px rgba(255,215,0,.35);
			transform: translateY(-1px);
		}

		.online-dot {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: #33ff66;
			box-shadow:
				0 0 4px #33ff66,
				0 0 8px #33ff66;
		}

        @media (max-width: 900px) {
            .content-grid,
            .bottom-strip {
                grid-template-columns: 1fr;
            }

            .panel { min-height: auto; }
            .coin-placeholder { display: none; }
        }

        @media (max-width: 560px) {
            .login-shell { margin: 18px auto; }
            .system-title { font-size: 24px; }
            .panel { padding: 20px 18px; }
            h2 { font-size: 24px; }
        }
		
		/* ==========================================================
           Browser Compatibility Fixes
           ========================================================== */
		   
		   .panel input[type="email"],
        .panel input[type="password"],
        .panel input[type="text"] {
            background: rgba(45, 0, 0, 0.78) !important;
            color: #ffe9a3 !important;
            caret-color: #ffe9a3;
        }

        .panel input[type="email"]:focus,
        .panel input[type="password"]:focus,
        .panel input[type="text"]:focus,
        .panel input[type="email"]:valid,
        .panel input[type="password"]:valid,
        .panel input[type="text"]:valid,
        .panel input[type="email"]:autofill,
        .panel input[type="password"]:autofill,
        .panel input[type="text"]:autofill,
        .panel input[type="email"]:-moz-autofill,
        .panel input[type="password"]:-moz-autofill,
        .panel input[type="text"]:-moz-autofill {
            background: rgba(45, 0, 0, 0.78) !important;
            color: #ffe9a3 !important;
            box-shadow: 0 0 0 1000px rgba(45, 0, 0, 0.95) inset !important;
        }

        .panel input[type="email"]:-webkit-autofill,
        .panel input[type="password"]:-webkit-autofill,
        .panel input[type="text"]:-webkit-autofill,
        .panel input[type="email"]:-webkit-autofill:hover,
        .panel input[type="password"]:-webkit-autofill:hover,
        .panel input[type="text"]:-webkit-autofill:hover,
        .panel input[type="email"]:-webkit-autofill:focus,
        .panel input[type="password"]:-webkit-autofill:focus,
        .panel input[type="text"]:-webkit-autofill:focus {
            -webkit-text-fill-color: #ffe9a3 !important;
            caret-color: #ffe9a3;
            box-shadow: 0 0 0 1000px rgba(45, 0, 0, 0.95) inset !important;
            -webkit-box-shadow: 0 0 0 1000px rgba(45, 0, 0, 0.95) inset !important;
            transition: background-color 9999s ease-in-out 0s;
        }