/* ===============================
   DARK THEME (default)
================================ */

:root {
    --surface-base: #1C1C1E;

    --glass-bg: rgba(255,255,255,0.035);
    --glass-border: rgba(255,255,255,0.05);

    --text-primary: rgba(255,255,255,0.92);
    --text-secondary: rgba(255,255,255,0.55);

    --input-line: rgba(255,255,255,0.16);
    --input-focus: rgba(255,255,255,0.55);

    --button-bg: rgba(255,255,255,0.08);
    --button-hover: rgba(255,255,255,0.14);
    --button-active: rgba(255,255,255,0.18);
}

/* ===============================
   LIGHT THEME
================================ */

body.light {
    --surface-base: #F5F5F7;

    --glass-bg: rgba(255,255,255,0.65);
    --glass-border: rgba(0,0,0,0.06);

    --text-primary: rgba(0,0,0,0.88);
    --text-secondary: rgba(0,0,0,0.5);

    --input-line: rgba(0,0,0,0.15);
    --input-focus: rgba(0,0,0,0.45);

    --button-bg: rgba(0,0,0,0.06);
    --button-hover: rgba(0,0,0,0.1);
    --button-active: rgba(0,0,0,0.14);
}

/* ===============================
   RESET
================================ */

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html, body {
    width:100%;
    height:100%;
}

body {
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",sans-serif;
    background-color: var(--surface-base);
    color: var(--text-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    transition:background-color 0.4s ease, color 0.4s ease;
}

/* ===============================
   TOGGLE
================================ */

.theme-toggle {
    position:absolute;
    top:28px;
    right:40px;
}

.switch {
    position:relative;
    width:40px;
    height:22px;
}

.switch input {
    opacity:0;
    width:0;
    height:0;
}

.slider {
    position:absolute;
    inset:0;
    background:rgba(255,255,255,0.15);
    border-radius:22px;
    transition:0.3s;
}

body.light .slider {
    background:rgba(0,0,0,0.12);
}

.slider::before {
    content:"";
    position:absolute;
    height:16px;
    width:16px;
    left:3px;
    top:3px;
    background:white;
    border-radius:50%;
    transition:0.3s;
}

body.light .slider::before {
    background:#1C1C1E;
}

input:checked + .slider::before {
    transform:translateX(18px);
}

/* ===============================
   WRAPPER
================================ */

.wrapper {
    text-align:center;
    transform: translateY(-50px);
}

/* ===============================
   TITLE
================================ */

.title {
    font-size:34px;
    font-weight:600;
    letter-spacing:-0.2px;
    margin-bottom:72px;
}

/* ===============================
   CARD
================================ */

.card {
    width:460px;
    padding:48px;
    border-radius:24px;
    background:var(--glass-bg);
    backdrop-filter:blur(34px);
    border:1px solid var(--glass-border);
    box-shadow:
        0 30px 70px rgba(0,0,0,0.25);
    text-align:left;
    transition:background 0.4s ease, border 0.4s ease;
}

/* Section label */

.section-label {
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.8px;
    color:var(--text-secondary);
    margin-bottom:32px;
}

/* ===============================
   INPUTS
================================ */
.errornote {
    font-size:16px;
    margin-bottom: 5px;
    color:var(--text-secondary);
}

.field {
    margin-bottom:36px;
}

.field label {
    display:block;
    font-size:13px;
    color:var(--text-secondary);
    margin-bottom:8px;
}

.field input {
    width:100%;
    height:52px;
    background:transparent;
    border:none;
    border-bottom:1px solid var(--input-line);
    font-size:16px;
    color:var(--text-primary);
    outline:none;
    transition:border-color 0.25s ease;
}

.field input:focus {
    border-bottom:1px solid var(--input-focus);
}

/* ===============================
   BUTTON
================================ */

.button {
    width:100%;
    height:52px;
    border-radius:16px;
    background:var(--button-bg);
    border:none;
    color:var(--text-primary);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:background 0.25s ease;
}

.button:hover {
    background:var(--button-hover);
}

.button:active {
    background:var(--button-active);
}