:root {
            --black: #000000;
            --white: #ffffff;
            --gray-100: #f5f5f5;
            --gray-200: #e5e5e5;
            --gray-400: #a3a3a3;
            --gray-500: #737373;
            --gray-600: #525252;
            --gray-900: #171717;
        }

        * {
            box-sizing: border-box;
            scrollbar-width: auto;
            scrollbar-color: #05385f #f1f3f3;
        }

        *::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        *::-webkit-scrollbar-track {
            background: #f1f3f3;
        }

        *::-webkit-scrollbar-thumb {
            background: #05385f;
            border-radius: 4px;
        }

        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background: var(--black);
            color: var(--black);
            font-family: Arial, Helvetica, sans-serif;
        }

        .navbar {
            display: flex;
            align-items: center;
            padding: 10px 24px;
            background: var(--black);
        }

        .navbar img {
            display: block;
            height: 56px;
            width: auto;
        }

        .navbar-brand-text {
            color: #05385f;
            font-size: 22px;
            font-weight: 700;
        }

        .auth-wrap {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 16px;
        }

        .auth-card {
            width: 100%;
            max-width: 420px;
            padding: 40px 32px;
            border: 1px solid var(--black);
            border-radius: 10px;
            background: var(--white);
        }

        h1 {
            margin: 0 0 8px;
            font-size: 32px;
            font-weight: 700;
            text-align: center;
        }
        p{
            text-align: center;
        }

        .subtitle {
            margin: 0 0 28px;
            font-size: 14px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            font-weight: 700;
        }

        .field {
            margin-bottom: 18px;
        }

        input[type="email"],
        input[type="password"],
        input[type="text"] {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--black);
            border-radius: 10px;
            background: var(--white);
            color: var(--black);
            font-size: 16px;
        }

        input:not([type="checkbox"]):focus,
        input:not([type="checkbox"]):focus-visible,
        input:not([type="checkbox"]):active {
            outline: 0;
            border-color: #05385f;
        }

        .password-wrap {
            position: relative;
        }

        .password-wrap input {
            padding-right: 44px;
        }

        .toggle-password {
            position: absolute;
            top: 0;
            right: 0;
            width: 44px;
            height: 100%;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--black);
            cursor: pointer;
        }

        .toggle-password:hover,
        .toggle-password:focus {
            background: transparent;
            color: var(--black);
        }

        .toggle-password .icon-eye-off {
            display: none;
        }

        .toggle-password.is-visible .icon-eye {
            display: none;
        }

        .toggle-password.is-visible .icon-eye-off {
            display: inline;
        }

        button[type="submit"] {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--black);
            border-radius: 8px;
            background: var(--black);
            color: var(--white);
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            cursor: pointer;
        }

        button[type="submit"]:hover,
        button[type="submit"]:focus {
            background: var(--white);
            color: var(--black);
        }

        .forgot-link {
            display: block;
            margin: 0 0 22px;
            color: var(--black);
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            text-align: right;
        }

        .forgot-link:hover {
            text-decoration: underline;
        }

        .link {
            display: block;
            margin-top: 18px;
            color: var(--black);
            text-align: center;
            text-decoration: underline;
        }

        .auth-footer {
            margin-top: 22px;
            font-size: 14px;
            text-align: left;
        }

        .auth-footer a {
            color: #05385f;
            font-weight: 700;
            text-decoration: none;
        }

        .auth-footer a:hover {
            text-decoration: underline;
        }

        .hint {
            margin: -6px 0 18px;
            font-size: 13px;
        }

        .status,
        .error {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
            padding: 10px 14px;
            border: 1px solid transparent;
            border-radius: 8px;
            font-size: 14px;
        }

        .status {
            background: #effcf3;
            border-color: #b7ebc6;
            color: #166534;
        }

        .status > i {
            font-size: 18px;
        }

        .status span {
            flex: 1;
        }

        .status button {
            border: 0;
            background: transparent;
            cursor: pointer;
            color: #166534;
            font-size: 18px;
            padding: 0;
        }

        .error {
            background: #fee2e2;
            border-color: #fca5a5;
            color: #991b1b;
        }

        .error > i {
            font-size: 18px;
        }

        .error span {
            flex: 1;
        }

        .error button {
            border: 0;
            background: transparent;
            cursor: pointer;
            color: #991b1b;
            font-size: 18px;
            padding: 0;
        }

        .code-row {
            display: flex;
            gap: 8px;
            margin-bottom: 18px;
        }

        .code-row input {
            width: 100%;
            text-align: center;
            font-size: 20px;
            padding: 10px 0;
        }

        .section-title {
            margin: 28px 0 16px;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
        }

        .divider {
            height: 1px;
            margin: 28px 0;
            background: var(--black);
        }

        .login-split {
            display: flex;
            min-height: 100vh;
            width: 100%;
        }

        .login-hero {
            position: relative;
            flex: 0 0 58%;
            width: 58%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            background: var(--black) center / cover no-repeat;
            color: var(--white);
            overflow: hidden;
            padding: 48px 24px;
        }

        .login-hero-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .login-hero::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 180px;
            background: linear-gradient(to top, #000000, transparent);
        }

        .login-hero-copy {
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .login-hero-copy p {
            margin: 0 0 14px;
            color: var(--white);
            font-size: 16px;
            font-style: italic;
        }

        .login-quote {
            display: none;
        }

        .login-quote.is-active {
            display: block;
        }

        .login-dots {
            display: flex;
            justify-content: center;
            gap: 6px;
        }

        .login-dots span {
            display: block;
            width: 18px;
            height: 3px;
            border-radius: 2px;
            background: var(--white);
            opacity: 0.35;
            cursor: pointer;
        }

        .login-dots span.is-active {
            opacity: 1;
        }

        .login-panel {
            flex: 0 0 42%;
            width: 42%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--white);
            padding: 48px 40px;
            overflow-y: auto;
        }

        .login-form {
            width: 100%;
            max-width: 450px;
            margin: 0 auto;
            text-align: left;
            font-size: 16px;
            font-family: "Open Sans", Arial, Helvetica, sans-serif;
        }

        .login-form h1,
        .login-form p,
        .login-form .subtitle {
            text-align: center;
        }

        .login-form .subtitle {
            margin: 0 0 1.5rem;
            color: #878a99;
            font-size: 1rem;
            font-weight: 400;
        }

        .login-form .field {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 1rem;
        }

        .login-form label {
            width: 100%;
            max-width: 450px;
            margin-bottom: 0.4rem;
            color: #495057;
            font-size: 0.9rem;
            font-weight: 400;
            text-align: left;
        }

        .login-form input[type="email"],
        .login-form input[type="password"],
        .login-form input[type="text"] {
            width: 100%;
            max-width: 450px;
            height: 45px;
            padding: 0.6rem 0.8rem;
            border: 1px solid #ced4da;
            border-radius: 10px;
            background: #ffffff;
            color: #212529;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .login-form .password-wrap {
            width: 100%;
            max-width: 450px;
        }

        .login-form .password-wrap input {
            padding-right: 3rem;
        }

        .login-form input::placeholder {
            color: #878a99;
        }

        .login-form input[type="email"]:focus,
        .login-form input[type="email"]:focus-visible,
        .login-form input[type="email"]:active,
        .login-form input[type="password"]:focus,
        .login-form input[type="password"]:focus-visible,
        .login-form input[type="password"]:active,
        .login-form input[type="text"]:focus,
        .login-form input[type="text"]:focus-visible,
        .login-form input[type="text"]:active {
            outline: 0;
            border-color: #05385f;
            box-shadow: none;
        }

        .login-form .toggle-password {
            color: #878a99;
            height: 45px;
        }

        .login-form .remember,
        .login-form .remember label {
            color: #878a99;
            font-size: 0.85rem;
            font-weight: 400;
        }

        .login-form .form-row .forgot-link {
            color: #878a99;
            font-size: 0.85rem;
            font-weight: 400;
            white-space: nowrap;
        }

        .login-form .form-row {
            max-width: 450px;
            margin: 0 auto 1.5rem;
        }

        .login-form button[type="submit"] {
            display: block;
            width: auto;
            min-width: 120px;
            min-height: 35px;
            height: auto;
            margin: 0 auto;
            padding: 0.4rem 1.5rem;
            border: 0;
            border-radius: 0.25rem;
            background: #05385f;
            color: #ffffff;
            font-size: 0.85rem;
            font-weight: 400;
            letter-spacing: 0;
            text-transform: none;
        }

        .login-form button[type="submit"]:hover,
        .login-form button[type="submit"]:focus {
            background: #042c4a;
            color: #ffffff;
        }

        .login-logo {
            display: block;
            height: auto;
            margin: 0 auto 12px;
            background: none;
            color: #05385f;
            font-size: 32px;
            font-weight: 700;
            text-align: center;
        }

        .login-form .forgot-title {
            width: 100%;
            max-width: 450px;
            margin: 0 auto 1rem;
            color: #495057;
            font-size: 1.015625rem;
            font-weight: 600;
            text-align: left;
        }

        .forgot-icon {
            display: flex;
            justify-content: center;
            margin: 0.5rem 0 1rem;
        }

        .forgot-icon lord-icon {
            width: 120px;
            height: 120px;
        }

        .login-form .forgot-alert {
            width: 100%;
            max-width: 450px;
            margin: 0 auto 1rem;
            padding: 0.75rem 1rem;
            border: 0;
            border-radius: 0.25rem;
            background: rgba(255, 188, 10, 0.15);
            color: #664d03;
            font-size: 0.9rem;
            text-align: center;
        }

        .login-form .forgot-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 450px;
            margin: 1rem auto 0;
        }

        .login-form .forgot-actions a {
            color: #878a99;
            font-size: 0.85rem;
            text-decoration: none;
            white-space: nowrap;
        }

        .login-form .forgot-actions a:hover {
            text-decoration: underline;
        }

        .login-form .forgot-actions button[type="submit"] {
            margin: 0;
        }

        .forgot-form .field,
        .login-form .field {
            align-items: stretch;
        }

        .forgot-form label {
            color: #0f172a;
            font-weight: 600;
        }

        .input-wrap,
        .email-wrap {
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 450px;
            height: 48px;
            padding: 0 8px 0 16px;
            border: 1px solid #d7dee7;
            border-radius: 10px;
            background: #fff;
        }

        .input-wrap:focus-within,
        .email-wrap:focus-within,
        .input-wrap:active,
        .email-wrap:active {
            border-color: #05385f;
        }

        .email-send-row {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            max-width: 450px;
        }

        .email-send-row .input-wrap {
            flex: 1;
            max-width: none;
        }

        .email-send-btn {
            flex-shrink: 0;
            height: 48px;
            padding: 0 16px;
            border: 0;
            border-radius: 10px;
            background: #05385f;
            color: #ffffff;
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
        }

        .email-send-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .input-icon,
        .email-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            color: #94a3b8;
            font-size: 15px;
            font-weight: 600;
            flex-shrink: 0;
        }

        .login-form .input-wrap input[type="email"],
        .login-form .input-wrap input[type="password"],
        .login-form .input-wrap input[type="text"],
        .forgot-form .email-wrap input[type="email"] {
            height: 46px;
            max-width: none;
            padding: 0;
            border: 0;
            border-radius: 0;
            flex: 1;
            min-width: 0;
        }

        .login-form .input-wrap .toggle-password {
            position: static;
            width: 36px;
            height: 36px;
            color: #94a3b8;
            flex-shrink: 0;
        }

        .otp-label-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 450px;
            margin-bottom: 0.4rem;
        }

        .otp-label-row label {
            width: auto;
            margin-bottom: 0;
        }

        .otp-hint {
            color: #94a3b8;
            font-size: 0.8rem;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .otp-inputs {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            width: 100%;
            max-width: 450px;
        }

        .login-form .otp-inputs input[type="text"] {
            width: 56px;
            max-width: 56px;
            height: 56px;
            padding: 0;
            border: 1px solid #d7dee7;
            border-radius: 10px;
            text-align: center;
            font-size: 1.25rem;
            font-weight: 600;
            color: #0f172a;
        }

        .login-form .otp-inputs input[type="text"]:focus,
        .login-form .otp-inputs input[type="text"]:focus-visible,
        .login-form .otp-inputs input[type="text"]:active {
            border-color: #05385f;
        }

        .otp-timer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 450px;
            margin: 0 auto 1rem;
            color: #64748b;
            font-size: 0.85rem;
        }

        .otp-timer [data-otp-countdown-wrap] {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .otp-timer strong {
            color: #05385f;
            font-weight: 700;
        }

        .otp-timer button {
            padding: 0;
            border: 0;
            background: none;
            color: #05385f;
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
        }

        .otp-timer button:disabled {
            color: #cbd5e1;
            cursor: default;
        }

        .forgot-form .forgot-actions {
            margin-top: 1.25rem;
        }

        .forgot-form .forgot-actions a {
            color: #05385f;
            font-weight: 600;
        }

        .forgot-form .forgot-actions button[type="submit"] {
            min-height: 44px;
            padding: 0 22px;
            border-radius: 10px;
            font-weight: 600;
        }

        .login-form .auth-footer {
            width: 100%;
            max-width: 450px;
            margin: 18px auto 0;
            color: #878a99;
            font-size: 0.85rem;
            text-align: left;
        }

        .login-form .auth-footer a {
            color: #05385f;
            font-weight: 600;
            text-decoration: none;
        }

        .login-form .auth-footer a:hover {
            text-decoration: underline;
        }

        .form-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 22px;
        }

        .remember {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }

        .remember label {
            margin: 0;
            font-weight: 400;
        }

        .form-row .forgot-link {
            margin: 0;
        }

        .login-form .terms-agree {
            align-items: flex-start;
        }

        .login-form .terms-agree .remember {
            width: 100%;
        }

        .login-form .terms-agree label {
            width: auto;
            max-width: none;
            margin-bottom: 0;
        }

        .login-form .legal-link {
            color: #05385f;
            text-decoration: underline;
        }

        .login-panel.legal-panel {
            align-items: flex-start;
        }

        .login-form.legal-page {
            max-width: 560px;
        }

        .login-form.legal-page h1 {
            margin: 0 0 16px;
            color: #05385f;
            font-size: 22px;
            font-weight: 700;
            text-align: left;
        }

        .login-form.legal-page .legal-back {
            display: inline-block;
            margin: 0 0 16px;
            color: #05385f;
            font-size: 0.85rem;
            font-weight: 600;
            text-decoration: none;
        }

        .login-form.legal-page .legal-body,
        .login-form.legal-page .legal-body p,
        .login-form.legal-page .legal-body h2,
        .login-form.legal-page .legal-body ul {
            text-align: left;
            color: #495057;
        }

        .login-form.legal-page .legal-body h2 {
            margin: 20px 0 8px;
            color: #05385f;
            font-size: 15px;
            font-weight: 700;
        }

        .login-form.legal-page .legal-body p {
            margin: 0 0 12px;
            font-size: 13px;
            line-height: 1.6;
        }

        .login-form.legal-page .legal-body ul {
            margin: 0 0 12px;
            padding-left: 20px;
            font-size: 13px;
            line-height: 1.6;
        }

        .login-form.legal-page .legal-back-btn {
            display: inline-block;
            margin-top: 8px;
            padding: 0.4rem 1.5rem;
            border-radius: 0.25rem;
            background: #05385f;
            color: #ffffff;
            font-size: 0.85rem;
            font-weight: 400;
            text-decoration: none;
        }

        input[type="checkbox"] {
            width: 14px;
            height: 14px;
            accent-color: #25a0e2;
        }

        @media (max-width: 900px) {
            .login-split {
                flex-direction: column;
            }

            .login-hero,
            .login-panel {
                flex: none;
                width: 100%;
            }
        }