*, *::before, *::after { box-sizing: border-box; }

        :root {
            --sky-blue: #0077B6;
            --sky-navy: #0b1f4d;
            --sky-cyan: #00B4D8;
            --panel: rgba(255, 255, 255, 0.97);
            --primary: #0077B6; --primary-light: rgba(0,119,182,.08); --border: #e2e8f0; --text-muted: #64748b; --text-faint: #94a3b8;
        }

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

        body {
            position: relative;
            font-family: 'Segoe UI', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 24px;
            overflow-x: hidden;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -2;
            background: url('../img/container.webp') center 47% / cover no-repeat;
        }

        .login-card {
            position: relative;
            z-index: 1;
            transform: translateY(clamp(8px, 2vh, 28px));
            background: rgba(255, 255, 255, 0.92);
            padding: 40px 40px 40px;
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 30px 70px rgba(4, 12, 34, 0.5);
            width: 372px;
            max-width: 100%;
            text-align: center;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .logo-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 22px;
            border-bottom: 1px solid #eef1f6;
        }

        .logo-wrap img { width: 220px; max-width: 100%; height: auto; mix-blend-mode: multiply; }

        .card-title { margin: 0 0 6px; font-size: 18px; color: #1e293b; text-align: left; }

        .card-note { margin: 0 0 22px; font-size: 12.5px; color: #64748b; text-align: left; line-height: 1.5; }

        .field { text-align: left; margin-bottom: 22px; }

        .field label { display: block; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 8px; }

        .field input {
            width: 100%;
            border: none;
            border-bottom: 1.5px solid #e2e8f0;
            padding: 6px 2px 11px;
            font-size: 15px;
            color: #1e293b;
            outline: none;
            background: transparent;
            transition: border-color 0.2s;
        }

        .field input::placeholder { color: #b7c0cf; }
        .field input:focus { border-bottom-color: var(--sky-blue); }

        .field input.otp-input {
            font-size: 26px;
            letter-spacing: 12px;
            text-align: center;
            padding-left: 12px;
            font-weight: 600;
        }

        .row-between {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12.5px;
            color: #64748b;
            margin: 2px 0 26px;
        }

        .row-between label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

        .link { color: var(--sky-blue); text-decoration: none; font-weight: 600; }
        .link:hover { text-decoration: underline; }

        .back-link { display: block; margin-top: 20px; font-size: 13px; }

        button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(90deg, var(--sky-blue), var(--sky-cyan));
            color: white;
            border: none;
            border-radius: 11px;
            font-weight: 700;
            font-size: 15px;
            letter-spacing: 0.5px;
            cursor: pointer;
            box-shadow: 0 12px 26px rgba(0,119,182, 0.32);
            transition: filter 0.2s, transform 0.05s, box-shadow 0.2s;
        }

        button:hover { filter: brightness(1.06); box-shadow: 0 14px 30px rgba(0,119,182, 0.4); }
        button:active { transform: translateY(1px); }

        button.btn-ghost {
            margin-top: 12px;
            padding: 11px;
            background: transparent;
            color: var(--sky-blue);
            border: 1.5px solid #cfdcf6;
            box-shadow: none;
            font-size: 13.5px;
        }
        button.btn-ghost:hover { filter: none; box-shadow: none; background: #f2f6fe; }
        button.btn-ghost:disabled { opacity: 0.55; cursor: not-allowed; background: transparent; }

        .err {
            color: #ef4444;
            font-size: 13px;
            margin: 0 0 20px;
            background: #fef2f2;
            padding: 10px 12px;
            border-radius: 8px;
            text-align: left;
        }

        .ok {
            color: #047857;
            font-size: 13px;
            margin: 0 0 20px;
            background: #ecfdf5;
            padding: 10px 12px;
            border-radius: 8px;
            text-align: left;
            word-break: break-word;
        }
    

.field .pw-meter{margin:12px 0 0}
.field .pw-match{margin:8px 0 0}

/* Show-password eye: flat icon only (the generic `button` style above must not leak into it) */
.field .pw-eye,
.field .pw-eye:hover,
.field .pw-eye:active {
    width: 28px; height: 28px; padding: 0;
    background: none; border-radius: 0;
    box-shadow: none; filter: none; letter-spacing: 0;
    transform: translateY(-50%);
    right: 0; top: calc(50% - 5px);
    color: #94a3b8;
}
.field .pw-eye:hover { color: var(--sky-blue); }
.field .pw-eye svg { width: 18px; height: 18px; }

/* Fix: the generic `.ok` message box above was leaking into the password checklist
   and the "Passwords match" note, making them grow (padding/margin/background) once valid.
   Keep those elements the same size in both states; only the colour changes. */
.pw-reqs li.ok,
.pw-match.ok {
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    font-size: 12.5px;
    word-break: normal;
}
.pw-match.ok, .pw-match.bad { font-size: 12px; margin: 8px 0 0; min-height: 16px; }
.pw-reqs li, .pw-reqs li.ok { min-height: 20px; line-height: 1.3; }
.pw-level { min-height: 18px; }