:root {
    --ink: #17202a;
    --muted: #667085;
    --line: #dde6ee;
    --accent: #417690;
    --accent-dark: #205067;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    min-height: 100vh;
    margin: 0;
    padding: 56px 20px;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 10%, rgba(65, 118, 144, .12), transparent 35%),
        linear-gradient(180deg, #f7fbfc, #eef3f7);
    font: 16px/1.5 "Avenir Next", "Trebuchet MS", "Gill Sans", sans-serif;
}
.auth-shell { width: min(100%, 560px); margin: 0 auto; }
.auth-brand { margin: 0 0 24px; color: var(--accent-dark); font-weight: 700; }
.auth-card {
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(21, 32, 43, .1);
    overflow-wrap: anywhere;
}
h1 { margin: 0 0 16px; font-size: 1.75rem; line-height: 1.2; }
h2, h3 { margin: 28px 0 12px; font-size: 1.15rem; }
p { margin: 0 0 20px; color: var(--muted); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }
hr { margin: 24px 0; border: 0; border-top: 1px solid var(--line); }
table, tbody, tr, th, td { display: block; width: 100%; }
table { margin: 24px 0; border-collapse: collapse; }
tr { margin-bottom: 18px; }
th, td { padding: 0; text-align: left; }
th { margin-bottom: 6px; font-size: .9rem; font-weight: 600; }
input, select, textarea, button { font: inherit; }
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
}
:focus-visible { outline: 3px solid rgba(65, 118, 144, .4); outline-offset: 3px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
button, input[type="submit"], .btn {
    display: inline-block;
    margin: 4px 4px 4px 0;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
button:hover, input[type="submit"]:hover, .btn:hover { background: var(--accent-dark); color: #fff; }
.btn-secondary, .btn-link { border-color: var(--line); background: #f7fafc; color: var(--ink); }
.btn-danger { background: #b91c1c; }
.btn-danger:hover { background: #991b1b; }
button:disabled { opacity: .45; cursor: not-allowed; }
.errorlist, .alert { padding: 12px 16px; border-radius: 10px; background: #fdecec; color: #b91c1c; }
.errorlist { list-style: none; }
.errorlist li + li { margin-top: 6px; }
.helptext { display: block; margin-top: 6px; color: var(--muted); font-size: .85rem; }
img { max-width: 100%; height: auto; background: #fff; }
.auth-footer { margin-top: 24px; font-size: .8rem; text-align: center; }
@media (max-width: 600px) {
    body { padding: 28px 16px; }
    .auth-card { padding: 24px; border-radius: 18px; }
    h1 { font-size: 1.5rem; }
}