@font-face {
    font-family: 'Sora';
    src: url('../fonts/sora-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: url('../fonts/sora-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sora';
    src: url('../fonts/sora-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #111c26;
    --ink-2: #172632;
    --ink-3: #22343f;
    --paper: #f4f1e9;
    --paper-2: #ebe6da;
    --surface: #ffffff;
    --line: #e3dccd;
    --line-strong: #d2c8b5;
    --text: #1a2731;
    --text-2: #5b6a74;
    --text-3: #8b969e;
    --brass: #b9884a;
    --brass-2: #d2a86b;
    --brass-soft: #f4e9d7;
    --steel: #3e6577;
    --steel-soft: #e4eef2;
    --sage: #3f7260;
    --clay: #b0523f;
    --shadow-lg: 0 32px 70px -32px rgba(17, 28, 38, .38);
    --font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body.auth-body {
    margin: 0;
    font-family: var(--font-cn);
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(460px, .88fr);
}

/* ---------- Left art panel ---------- */
.auth-art {
    position: relative;
    overflow: hidden;
    padding: 44px 56px 36px;
    background:
        radial-gradient(900px 520px at 72% 22%, rgba(185, 136, 74, .16), transparent 62%),
        radial-gradient(700px 600px at 12% 92%, rgba(62, 101, 119, .28), transparent 65%),
        linear-gradient(152deg, #0d1720 0%, #111c26 46%, #172835 100%);
    color: var(--paper);
    display: flex;
    flex-direction: column;
}

.auth-art-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(217, 194, 158, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(217, 194, 158, .055) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 55% 45%, #000 30%, transparent 88%);
    pointer-events: none;
}

.auth-art::after {
    content: "";
    position: absolute;
    right: -140px;
    top: -140px;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(217, 194, 158, .14);
    border-radius: 50%;
    box-shadow: 0 0 0 60px rgba(217, 194, 158, .03), 0 0 0 130px rgba(217, 194, 158, .02);
    pointer-events: none;
}

.auth-brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2;
}

.auth-brand .brand-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(217, 194, 158, .38);
    background: rgba(255, 255, 255, .03);
    border-radius: 10px;
    backdrop-filter: blur(4px);
}

.auth-brand .brand-mark svg { width: 30px; height: 30px; }

.auth-brand strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .18em;
}

.auth-brand em {
    display: block;
    margin-top: 4px;
    font-family: 'Sora', sans-serif;
    font-style: normal;
    font-size: 9px;
    letter-spacing: .32em;
    color: rgba(217, 194, 158, .62);
}

.auth-headline {
    position: relative;
    z-index: 2;
    margin-top: clamp(48px, 9vh, 96px);
    max-width: 640px;
}

.auth-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Sora', sans-serif;
    font-size: 10px;
    letter-spacing: .24em;
    color: rgba(210, 168, 107, .85);
}

.auth-eyebrow span {
    width: 38px;
    height: 1px;
    background: var(--brass-2);
}

.auth-headline h1 {
    margin: 22px 0 20px;
    font-size: clamp(32px, 3.4vw, 50px);
    line-height: 1.24;
    font-weight: 600;
    letter-spacing: .03em;
    color: #f6f2e8;
}

.auth-headline p {
    margin: 0;
    font-size: 14px;
    line-height: 1.95;
    color: rgba(226, 232, 235, .58);
    letter-spacing: .04em;
}

.auth-drawing {
    position: relative;
    z-index: 1;
    margin: auto -10px 0;
    padding-top: 18px;
    animation: drawingIn 1.2s cubic-bezier(.2, .7, .2, 1) both;
}

.auth-drawing svg {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
}

.drawing-window {
    filter: drop-shadow(0 0 22px rgba(185, 136, 74, .18));
}

@keyframes drawingIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-metrics {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 52px;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid rgba(217, 194, 158, .14);
}

.auth-metrics strong {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--brass-2);
    letter-spacing: .04em;
}

.auth-metrics span {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    letter-spacing: .16em;
    color: rgba(226, 232, 235, .46);
}

.auth-art-foot {
    position: relative;
    z-index: 2;
    margin-top: 28px;
    font-family: 'Sora', sans-serif;
    font-size: 9px;
    letter-spacing: .16em;
    color: rgba(226, 232, 235, .3);
}

/* ---------- Right form panel ---------- */
.auth-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 74px 48px 54px;
    background:
        radial-gradient(600px 420px at 88% 8%, rgba(185, 136, 74, .09), transparent 70%),
        linear-gradient(180deg, #f7f4ed 0%, #f1ede4 100%);
}

.auth-panel::before {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(17, 28, 38, .06);
    pointer-events: none;
}

.auth-panel-top {
    position: absolute;
    top: 34px;
    left: 48px;
    right: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--text-3);
}

.auth-panel-top span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.auth-panel-top i { color: var(--sage); font-size: 15px; }

.auth-version {
    font-family: 'Sora', sans-serif;
    padding: 3px 9px;
    border: 1px solid var(--line-strong);
    border-radius: 30px;
    font-size: 9px;
    letter-spacing: .14em;
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: 396px;
    padding: 40px 38px 32px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(210, 200, 181, .65);
    box-shadow: 0 30px 60px -42px rgba(17, 28, 38, .35), 0 2px 0 rgba(255, 255, 255, .8) inset;
    backdrop-filter: blur(14px);
}

.auth-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 38px;
    width: 56px;
    height: 2px;
    background: var(--brass);
}

.auth-card-eyebrow {
    font-family: 'Sora', sans-serif;
    font-size: 9px;
    letter-spacing: .22em;
    color: var(--brass);
}

.auth-card h2 {
    margin: 16px 0 6px;
    font-size: 27px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink);
}

.auth-sub {
    margin: 0 0 28px;
    font-size: 12.5px;
    color: var(--text-3);
    letter-spacing: .03em;
}

.auth-form { display: flex; flex-direction: column; gap: 17px; }

.auth-field { display: block; }

.auth-field > span {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--text-2);
}

.auth-input {
    position: relative;
    display: flex;
    align-items: center;
    height: 46px;
    background: #fbfaf6;
    border: 1px solid var(--line);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-input:focus-within {
    background: #fff;
    border-color: var(--brass);
    box-shadow: 0 0 0 3px rgba(185, 136, 74, .12);
}

.auth-input > i {
    width: 44px;
    text-align: center;
    font-size: 17px;
    color: var(--text-3);
}

.auth-input:focus-within > i { color: var(--brass); }

.auth-input input {
    flex: 1;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--font-cn);
    font-size: 13.5px;
    color: var(--text);
    padding-right: 10px;
}

.auth-input input::placeholder { color: #b3b8bb; font-size: 12.5px; }

.pwd-toggle {
    width: 42px;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    font-size: 16px;
}

.pwd-toggle:hover { color: var(--ink); }

.auth-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 48px;
    margin-top: 5px;
    padding: 0 20px;
    border: 0;
    background: var(--ink);
    color: #f6f2e8;
    font-family: var(--font-cn);
    font-size: 13.5px;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 14px 26px -18px rgba(17, 28, 38, .7);
}

.auth-submit:hover { background: #1d3140; transform: translateY(-1px); box-shadow: 0 18px 30px -18px rgba(17, 28, 38, .75); }
.auth-submit:active { transform: translateY(0); }
.auth-submit i { font-size: 17px; color: var(--brass-2); transition: transform .2s ease; }
.auth-submit:hover i { transform: translateX(3px); }
.auth-submit[disabled] { opacity: .72; cursor: wait; transform: none; }
.auth-submit.is-loading i { animation: spin 1s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #fbeeea;
    border-left: 2px solid var(--clay);
    color: #8f3a2a;
    font-size: 12px;
    line-height: 1.6;
}

.auth-error i { font-size: 15px; margin-top: 1px; }
.auth-error.shake { animation: shake .32s ease; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.auth-alt {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: var(--text-3);
    letter-spacing: .03em;
}

.auth-alt a {
    color: var(--brass);
    text-decoration: none;
    border-bottom: 1px solid rgba(185, 136, 74, .35);
    padding-bottom: 1px;
    margin-left: 4px;
    transition: color .18s ease, border-color .18s ease;
}

.auth-alt a:hover { color: var(--ink); border-color: var(--ink); }

.auth-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: #9aa3a8;
}

.auth-secure i { font-size: 14px; color: var(--sage); }

.auth-copyright {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    letter-spacing: .08em;
    color: #9aa3a8;
}

/* ---------- Register variant ---------- */
.auth-shell--register { grid-template-columns: minmax(0, .92fr) minmax(560px, 1.08fr); }

.auth-panel--register { padding-top: 64px; padding-bottom: 40px; align-items: flex-start; }

.auth-panel--register .auth-card { max-width: 590px; }

.auth-form--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 16px;
}

.auth-error--full, .auth-submit--full { grid-column: 1 / -1; }

.auth-submit--full { margin-top: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-art { min-height: 420px; padding: 32px 32px 24px; }
    .auth-headline { margin-top: 40px; }
    .auth-headline h1 { font-size: 32px; }
    .auth-headline p { font-size: 13px; }
    .auth-drawing { display: none; }
    .auth-metrics { margin-top: 34px; }
    .auth-panel { padding: 70px 28px 60px; }
    .auth-panel--register { padding-top: 70px; }
    .auth-panel-top { left: 34px; right: 34px; top: 30px; }
    .auth-shell--register { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .auth-art { min-height: 300px; padding: 24px; }
    .auth-headline { margin-top: 30px; }
    .auth-headline h1 { font-size: 26px; }
    .auth-headline p { display: none; }
    .auth-metrics { gap: 28px; margin-top: 24px; }
    .auth-metrics strong { font-size: 20px; }
    .auth-art-foot { display: none; }
    .auth-panel { padding: 62px 18px 54px; align-items: flex-start; }
    .auth-panel::before { inset: 12px; }
    .auth-panel-top { left: 24px; right: 24px; top: 22px; }
    .auth-card { padding: 32px 22px 26px; }
    .auth-card h2 { font-size: 23px; }
    .auth-form--grid { grid-template-columns: 1fr; }
    .auth-error--full, .auth-submit--full { grid-column: auto; }
    .auth-copyright { bottom: 14px; }
}