:root {
    --brand: #02444b;
    --brand-dark: #012a2f;
    --brand-light: #0a7280;
    --ink: #1f2d2f;
    --muted: #7b8a8c;
    --line: #e3eaea;
    --field: #f5f9f9;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    font-family: 'Poppins', system-ui, sans-serif;
    color: var(--ink);
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 45%, var(--brand-light) 100%);
    background-attachment: fixed;
}

.card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 22px;
    padding: 36px 40px 28px;
    text-align: center;
    box-shadow: 0 25px 60px rgba(1, 25, 30, .45);
}

.logo { width: 200px; max-width: 70%; height: auto; margin: -30px auto -34px; display: block; }
.subtitle { margin: 0 0 24px; color: var(--muted); font-size: 14px; letter-spacing: .5px; }

.field {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 16px;
    margin-bottom: 16px;
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(2, 68, 75, .12); }
.field svg { width: 18px; height: 18px; fill: #9db0b2; flex: none; }
.field input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 15px; color: var(--ink);
}

.label { display: block; text-align: left; font-size: 13px; color: var(--muted); margin: 4px 0 8px 4px; }

.captcha-row { display: flex; gap: 10px; margin-bottom: 14px; }
.captcha-row img {
    width: 130px; height: 54px; border-radius: 14px; border: 1px solid var(--line); background: #fff;
    object-fit: cover; flex: none;
}
.refresh {
    width: 50px; height: 54px; flex: none; border: 0; border-radius: 14px; cursor: pointer;
    background: var(--field); display: grid; place-items: center;
}
.refresh svg { width: 20px; height: 20px; fill: var(--brand); }
.refresh:hover { background: #e6f0f0; }
.field.code { flex: 1; margin: 0; padding: 0 12px; min-width: 0; }

.btn {
    width: 100%; height: 54px; border: 0; border-radius: 14px; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 16px; color: #fff;
    background: linear-gradient(135deg, var(--brand-light), var(--brand));
    box-shadow: 0 10px 22px rgba(2, 68, 75, .35);
    transition: transform .1s, opacity .15s;
}
.btn:hover { opacity: .93; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: wait; }

.link {
    display: block; margin: 18px auto 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 14px; color: var(--muted);
}
.link:hover { color: var(--brand); }

.copy { margin: 22px 0 0; font-size: 12px; color: #a3b0b2; }
.copy strong { color: var(--muted); }

.toast {
    position: fixed; top: 24px; left: 50%; transform: translate(-50%, -300%);
    min-width: 260px; max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 12px;
    color: #fff; font-size: 14px; font-weight: 500; text-align: center;
    background: #c0392b; box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    transition: transform .3s ease; z-index: 10;
}
.toast.show { transform: translate(-50%, 0); }
.toast.ok { background: #1e8e5a; }
.toast.info { background: var(--brand); }

@media (max-width: 480px) {
    .card { padding: 28px 20px 22px; }
    .captcha-row img { width: 110px; }
}