:root {
                --primary: #725a43;
                --surface: #fbf9f4;
                --panel: #ffffff;
                --muted: #4d4639;
                --outline: #d0c5b4;
                --danger-bg: #fdeaea;
                --danger-fg: #742e2e;
            }

            * { box-sizing: border-box; }

            body {
                margin: 0;
                min-height: 100vh;
                display: grid;
                place-items: center;
                background: radial-gradient(circle at top right, #efe7db, var(--surface));
                font-family: "Manrope", sans-serif;
                color: #1b1c19;
                padding: 1rem;
            }

            .card {
                width: min(420px, 100%);
                background: var(--panel);
                border: 1px solid color-mix(in srgb, var(--outline) 55%, transparent);
                border-radius: .7rem;
                padding: 1.4rem;
                box-shadow: 0 20px 48px rgba(27, 28, 25, .08);
            }

            h1 {
                margin: 0 0 .35rem;
                font-family: "Noto Serif", serif;
                color: var(--primary);
                font-weight: 700;
            }

            .subtitle {
                margin: 0 0 1.25rem;
                color: var(--muted);
                font-size: .92rem;
            }

            label {
                display: block;
                margin-bottom: .3rem;
                font-size: .72rem;
                letter-spacing: .08rem;
                text-transform: uppercase;
                font-weight: 700;
                color: var(--muted);
            }

            input {
                width: 100%;
                border: 1px solid color-mix(in srgb, var(--outline) 60%, transparent);
                border-radius: .35rem;
                padding: .75rem .8rem;
                margin-bottom: .9rem;
                font: inherit;
            }

            input:focus {
                outline: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
                border-color: var(--primary);
            }

            .error {
                margin-bottom: .9rem;
                background: var(--danger-bg);
                color: var(--danger-fg);
                border: 1px solid #f2c7c7;
                border-radius: .35rem;
                padding: .7rem .8rem;
                font-size: .86rem;
            }

            button {
                width: 100%;
                border: 0;
                border-radius: .35rem;
                background: var(--primary);
                color: #fff;
                padding: .8rem 1rem;
                text-transform: uppercase;
                letter-spacing: .08rem;
                font-size: .72rem;
                font-weight: 700;
                cursor: pointer;
            }

            button:hover { opacity: .93; }