:root {
    --brand: #d63b31;
    --brand-hover: #af251d;
    --brand-soft: #fbeae9;
    --ink: #172d40;
    --muted: #76828c;
    --line: #dce3e7;
    --surface: #fff;
    --bg: #f6f8fa;
    --ease: cubic-bezier(.22, 1, .36, 1);
    color-scheme: light;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
.login-layout { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; padding: 20px; gap: 20px; }
.brand-panel {
    position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr;
    background: radial-gradient(ellipse at 0% 100%, #254052 0, transparent 65%), #102f43;
    border-radius: 24px; padding: 48px; color: #fff; min-height: calc(100svh - 40px);
}
.brand { position: relative; z-index: 1; display: inline-flex; width: fit-content; border-radius: 4px; }
.brand img { display: block; width: 245px; max-width: 100%; height: auto; }
.brand-content { position: relative; z-index: 1; align-self: center; max-width: 520px; padding: 64px 0 108px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.brand-content .eyebrow { color: #c4d3dd; display: flex; align-items: center; gap: 11px; }
.status-dot { width: 7px; height: 7px; background: #eb5f56; border-radius: 50%; box-shadow: 0 0 0 5px #eb5f5615; }
h1 { font-size: clamp(34px, 3.8vw, 58px); font-weight: 600; line-height: 1.15; letter-spacing: -2px; margin: 28px 0 22px; }
.skills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 32px; }
.skills span { font-size: 12px; border: 1px solid #ffffff26; border-radius: 30px; padding: 10px 17px; background: #ffffff05; color: #c8d6df; }
.orbit { position: absolute; width: 530px; height: 530px; border: 1px solid #ffffff10; border-radius: 50%; right: -265px; bottom: -240px; pointer-events: none; }
.orbit-two { width: 720px; height: 720px; right: -360px; bottom: -335px; border-color: #eb5f5625; }
.form-panel { display: flex; flex-direction: column; padding: 28px 40px; }
.login-box { width: 100%; max-width: 410px; margin: auto; padding: 64px 0; }
.form-eyebrow { color: var(--brand); margin: 0 0 14px; }
h2 { margin: 0 0 38px; font-size: 32px; letter-spacing: -1px; line-height: 1.25; }
.form-group { margin-bottom: 24px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.input-wrap { position: relative; }
.input-icon { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: #81929f; font-size: 20px; pointer-events: none; transition: color .2s; }
.input-wrap:focus-within .input-icon { color: var(--brand); }
input { width: 100%; height: 58px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0 16px 0 47px; color: var(--ink); font-size: 16px; box-shadow: 0 2px 3px #172d4002; transition: border-color .2s, box-shadow .2s; }
input::placeholder { color: #909ba5; font-size: 14px; }
input:hover { border-color: #aebfc6; }
input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
input[aria-invalid=true] { border-color: var(--brand); }
#id_password { padding-right: 92px; }
.password-toggle { position: absolute; right: 10px; top: 9px; height: 40px; background: transparent; border: 0; border-radius: 6px; color: #607683; font-size: 11px; font-weight: 600; padding: 0 8px; cursor: pointer; transition: color .2s, background .2s; }
.password-toggle:hover { background: var(--brand-soft); color: var(--brand); }
.submit-button { display: flex; justify-content: center; align-items: center; gap: 15px; width: 100%; height: 56px; margin-top: 32px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; box-shadow: 0 6px 16px #d63b311c; transition: background .2s, transform .25s var(--ease), box-shadow .25s; }
.submit-arrow { font-size: 21px; transition: transform .25s var(--ease); }
.submit-button:hover { background: var(--brand-hover); box-shadow: 0 8px 20px #d63b312b; transform: translateY(-1px); }
.submit-button:hover .submit-arrow { transform: translateX(4px); }
.submit-button:active { transform: translateY(0); }
.submit-button:disabled { cursor: wait; transform: none; }
.submit-spinner { display: none; width: 17px; height: 17px; border: 2px solid #ffffff55; border-top-color: #fff; border-radius: 50%; }
.submit-button[aria-busy=true] .submit-spinner { display: block; animation: spin .8s linear infinite; }
.submit-button[aria-busy=true] .submit-arrow { display: none; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
footer { text-align: center; font-size: 11px; color: #8c989f; }
.errorlist { padding: 0; list-style: none; color: #ac3636; font-size: 12px; line-height: 1.6; margin: 8px 0 0; }
.form-errors, .login-message { padding: 12px 15px; background: #fff0ed; border: 1px solid #f0d4cd; border-radius: 10px; margin-bottom: 22px; font-size: 13px; line-height: 1.6; }
.form-errors .errorlist, .login-message p { margin: 0; }
@keyframes reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes panel-reveal { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
    .brand-panel { animation: panel-reveal .85s var(--ease) both; }
    .brand { animation: reveal .7s .08s var(--ease) both; }
    .brand-content { animation: reveal .8s .16s var(--ease) both; }
    .form-eyebrow, h2 { animation: reveal .75s .12s var(--ease) both; }
    .form-group { animation: reveal .75s .2s var(--ease) both; }
    .form-group + .form-group { animation-delay: .27s; }
    .submit-button { animation: reveal .75s .34s var(--ease) backwards; }
    footer { animation: reveal .8s .38s var(--ease) both; }
}
@media (min-width: 1500px) { .brand-panel { padding: 64px; } .form-panel { padding: 40px 64px; } }
@media (max-width: 1000px) { .brand-panel { padding: 32px; } .form-panel { padding: 24px; } h1 { font-size: 38px; } }
@media (max-width: 760px) {
    .login-layout { grid-template-columns: 1fr; padding: 12px; gap: 0; }
    .brand-panel { min-height: auto; padding: 28px; border-radius: 18px; }
    .brand img { width: 205px; }
    .brand-content { padding: 32px 0 8px; }
    h1 { font-size: 32px; letter-spacing: -1px; margin: 18px 0 8px; }
    .skills { display: none; }
    .brand-content .eyebrow { font-size: 9px; }
    .form-panel { padding: 38px 20px 24px; }
    .login-box { padding: 0 0 42px; }
    h2 { font-size: 28px; margin-bottom: 30px; }
    footer { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }