* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            padding: 40px;
            max-width: 500px;
            width: 100%;
        }
        
        h1 {
            color: #667eea;
            font-size: 2.5em;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .subtitle {
            color: #666;
            text-align: center;
            margin-bottom: 30px;
            font-size: 1.1em;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 600;
            font-size: 0.95em;
        }
        
        .form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            font-size: 1em;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        
        .form-group input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .form-group input::placeholder {
            color: #a0aec0;
        }
        
        .btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-top: 10px;
        }
        
        .btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
        }
        
        .btn:active:not(:disabled) {
            transform: translateY(0);
        }
        
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .alert {
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: none;
        }
        
        .alert.show {
            display: block;
        }
        
        .alert-success {
            background: #c6f6d5;
            color: #22543d;
            border: 2px solid #68d391;
        }
        
        .alert-error {
            background: #fed7d7;
            color: #742a2a;
            border: 2px solid #fc8181;
        }
        
        .alert-error ul {
            margin: 10px 0 0 20px;
        }
        
        .alert-error li {
            margin: 5px 0;
        }
        
        .links {
            text-align: center;
            margin-top: 20px;
            color: #666;
        }
        
        .links a {
            color: #667eea;
            text-decoration: none;
            font-weight: 600;
        }
        
        .links a:hover {
            text-decoration: underline;
        }
        
        .password-hint {
            font-size: 0.85em;
            color: #718096;
            margin-top: 5px;
        }

        .field-hint {
            font-size: 0.88em;
            color: #4a5568;
            margin-top: 6px;
            line-height: 1.4;
        }

        .password-input-row {
            display: flex;
            gap: 8px;
            align-items: stretch;
        }

        .password-input-row input {
            flex: 1;
        }

        .show-password-button {
            flex: 0 0 auto;
            padding: 0 14px;
            border: 1px solid #cbd5e0;
            border-radius: 6px;
            background: #edf2f7;
            color: #2d3748;
            font-weight: 600;
            cursor: pointer;
        }

        .show-password-button:hover {
            background: #e2e8f0;
        }
        
        @media (max-width: 600px) {
            .container {
                padding: 30px 20px;
            }
            
            h1 {
                font-size: 2em;
            }
        }

        /* Shared BlahBlah.com visual system */
        :root {
            --ink:#151515;
            --paper:#fffaf0;
            --yellow:#ffd83d;
            --red:#ef493f;
            --blue:#1779ba;
            --muted:#5d5a54;
            --dark:#171717;
            --dark-card:#252525;
        }

        body {
            display:block;
            min-height:100vh;
            padding:0;
            color:var(--ink);
            background:var(--paper);
            font-family:Arial, Helvetica, sans-serif;
            transition:background .25s, color .25s;
        }

        body.dark-mode { color:#fffaf0; background:var(--dark); color-scheme:dark; }

        .navbar {
            padding:.55rem 1.25rem;
            color:var(--ink);
            background:var(--paper);
            border-top:.35rem solid var(--ink);
            border-bottom:3px solid var(--ink);
        }

        body.dark-mode .navbar { color:#fffaf0; background:#202020; border-color:var(--yellow); }

        .navbar-content {
            max-width:1120px;
            margin:auto;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:1rem;
        }

        .brand { color:inherit; font-size:clamp(1.55rem,4vw,2.05rem); font-weight:900; letter-spacing:-.055em; text-decoration:none; white-space:nowrap; }
        .brand span { color:var(--red); }
        .navbar-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.7rem; font-size:.9rem; font-weight:800; }
        .navbar-actions a { color:inherit; text-underline-offset:3px; }

        .theme-toggle {
            padding:.48rem .78rem;
            color:#fff;
            background:var(--ink);
            border:2px solid var(--ink);
            border-radius:0;
            box-shadow:3px 3px 0 var(--yellow);
            font-weight:900;
            cursor:pointer;
        }

        .page-shell { max-width:720px; margin:1.25rem auto 2rem; padding:0 1.25rem; }

        .container {
            max-width:none;
            padding:clamp(1.35rem,5vw,2.5rem);
            color:var(--ink);
            background:white;
            border:3px solid var(--ink);
            border-radius:0;
            box-shadow:8px 8px 0 var(--yellow);
            text-align:left;
        }

        body.dark-mode .container { color:#fffaf0; background:var(--dark-card); border-color:#fffaf0; box-shadow:8px 8px 0 var(--red); }

        .eyebrow { display:inline-block; padding:.38rem .72rem; color:#fff; background:var(--ink); font-size:.78rem; font-weight:900; letter-spacing:.13em; text-transform:uppercase; transform:rotate(-1deg); }

        h1 { margin:.8rem 0 .3rem; color:inherit; font-size:clamp(2.5rem,7vw,4.5rem); line-height:.9; letter-spacing:-.065em; text-align:left; }
        h1 span { color:var(--red); }
        .subtitle { margin-bottom:1.4rem; color:var(--muted); text-align:left; font-size:1.08rem; }
        body.dark-mode .subtitle, body.dark-mode .field-hint, body.dark-mode .password-hint, body.dark-mode .links { color:#d2cbc0; }

        .form-group { margin-bottom:1rem; }
        .form-group label { margin-bottom:.4rem; color:inherit; font-weight:850; }
        .form-group input { padding:.8rem .85rem; color:var(--ink); background:#fffefb; border:2px solid #817b71; border-radius:0; }
        body.dark-mode .form-group input { color:#fffaf0; background:#181818; border-color:#aaa49a; }
        .form-group input:focus { outline:3px solid var(--yellow); border-color:var(--ink); box-shadow:none; }

        .show-password-button {
            padding:0 .9rem;
            color:#fff;
            background:var(--ink);
            border:2px solid var(--ink);
            border-radius:0;
            font-weight:900;
        }
        .show-password-button:hover { background:var(--blue); }

        .btn { padding:.85rem 1rem; color:#fff; background:var(--blue); border:3px solid var(--ink); border-radius:0; box-shadow:4px 4px 0 var(--ink); font-weight:900; }
        .btn:hover:not(:disabled) { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
        .alert { border:2px solid var(--ink); border-radius:0; }
        .links { margin-top:1.25rem; color:var(--muted); }
        .links a { color:var(--blue); font-weight:900; }

        .playtest-flyout { margin:0 0 1.3rem; padding:1.15rem; background:var(--yellow); color:var(--ink); border:3px solid var(--ink); box-shadow:5px 5px 0 var(--red); }
        .playtest-flyout[hidden] { display:none; }
        .playtest-flyout .eyebrow { padding:.25rem .5rem; font-size:.67rem; }
        .playtest-flyout h2 { margin:.7rem 0 .5rem; font-size:clamp(1.45rem,4vw,2rem); line-height:1.05; letter-spacing:-.04em; }
        .playtest-flyout p { margin:.45rem 0; }
        .playtest-flyout a { color:#084e7e; font-weight:900; }
        body.dark-mode .playtest-flyout { color:var(--ink); }

        .site-footer { padding:1rem 1.25rem; color:#fff; background:var(--ink); text-align:center; font-size:.85rem; }
        .site-footer div + div { margin-top:.45rem; }
        .site-footer a { margin:0 .45rem; color:inherit; }

        @media (max-width:600px) {
            .navbar-content { align-items:flex-start; }
            .navbar-actions { justify-content:flex-end; }
            .page-shell { margin-top:.9rem; }
            .container { padding:1.25rem; box-shadow:5px 5px 0 var(--yellow); }
            .password-input-row { align-items:stretch; flex-direction:column; }
            .show-password-button { min-height:2.75rem; }
        }