:root { --ink:#172022; --muted:#657377; --line:#d9e1e2; --soft:#f3f6f6; --brand:#087f8c; --brand-dark:#055f68; --danger:#ba3d42; --font:"Segoe UI","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); letter-spacing: 0; }
button,input { font: inherit; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
svg { width: 18px; height: 18px; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.auth-page { min-height: 100svh; position: relative; isolation: isolate; display: grid; place-items: center; padding: 34px; color: #fff; background: #182123; }
.auth-background { position: fixed; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-overlay { position: fixed; z-index: -2; inset: 0; background: rgba(13,21,23,.67); }
.auth-home { position: fixed; z-index: 2; left: 24px; top: 22px; display: inline-flex; align-items: center; gap: 7px; color: #e4ebec; font-size: 12px; }
.auth-home:hover { color: #fff; }
.auth-layout { width: min(1120px,100%); display: grid; grid-template-columns: minmax(0,1fr) 420px; align-items: center; gap: 80px; }
.auth-layout-register { grid-template-columns: minmax(0,1fr) 600px; }
.auth-brand-copy { max-width: 600px; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.auth-brand-copy > span { color: #8edfe3; font-size: 11px; font-weight: 800; }
.auth-brand-copy h1 { margin: 16px 0; font-size: 42px; line-height: 1.22; font-weight: 700; }
.auth-brand-copy p { max-width: 520px; margin: 0; color: #d6dfe1; font-size: 15px; line-height: 1.8; }
.auth-panel { width: 100%; padding: 30px; color: var(--ink); background: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 7px; box-shadow: 0 28px 70px rgba(0,0,0,.28); }
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--brand-dark); border: 1px solid var(--brand); font-family: Georgia,serif; font-weight: 700; }
.auth-brand strong { display: grid; font-size: 14px; }
.auth-brand small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.auth-heading { margin: 27px 0 20px; }
.auth-heading h2 { margin: 0; font-size: 23px; }
.auth-heading p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.auth-error, .auth-success { display: flex; align-items: center; gap: 8px; min-height: 42px; margin-bottom: 15px; padding: 8px 11px; font-size: 12px; }
.auth-error { color: var(--danger); background: #fbecee; border-left: 3px solid var(--danger); }
.auth-success { color: #22644f; background: #eaf6f1; border-left: 3px solid #29735a; }
.role-switch { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 0 0 18px; padding: 4px; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; }
.role-switch label { cursor: pointer; }
.role-switch input { position: absolute; opacity: 0; pointer-events: none; }
.role-switch span { height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); border-radius: 3px; font-size: 11px; font-weight: 650; }
.role-switch svg { width: 15px; height: 15px; }
.role-switch input:checked + span { color: var(--brand-dark); background: #fff; box-shadow: 0 1px 4px rgba(23,32,34,.1); }
.auth-field { display: grid; gap: 6px; margin-bottom: 14px; }
.auth-field label { color: #3e4a4e; font-size: 11px; font-weight: 650; }
.auth-field > div { position: relative; }
.auth-field > div > svg { position: absolute; left: 11px; top: 12px; width: 16px; height: 16px; color: #7d8b8f; }
.auth-field input { width: 100%; height: 41px; padding: 0 40px 0 35px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 4px; outline: none; }
.auth-field input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(8,127,140,.1); }
.auth-field button { position: absolute; right: 4px; top: 4px; width: 33px; height: 33px; display: grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.auth-field button:hover { background: var(--soft); }
.auth-submit { width: 100%; height: 43px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; color: #fff; background: var(--brand); border: 0; border-radius: 4px; font-weight: 700; cursor: pointer; }
.auth-submit:hover { background: var(--brand-dark); }
.auth-panel-footer { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; color: var(--muted); border-top: 1px solid var(--line); font-size: 10px; }
.auth-panel-footer a { color: var(--brand-dark); font-weight: 700; }
.auth-panel-footer a:last-child { margin-left: auto; }
.auth-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 14px; }
.auth-field.full { grid-column: 1/-1; }
@media(max-width:900px){ .auth-page{padding:60px 18px 24px}.auth-layout,.auth-layout-register{grid-template-columns:1fr;gap:28px}.auth-brand-copy{display:none}.auth-panel{margin:0 auto}.auth-layout-register .auth-panel{max-width:600px}.auth-layout:not(.auth-layout-register) .auth-panel{max-width:430px} }
@media(max-width:560px){ .auth-page{padding-left:12px;padding-right:12px}.auth-home{left:14px;top:14px}.auth-panel{padding:22px 18px}.auth-form-grid{grid-template-columns:1fr}.auth-field.full{grid-column:auto}.auth-panel-footer{flex-wrap:wrap}.auth-panel-footer a:last-child{margin-left:0}.role-switch span{font-size:10px}.role-switch svg{display:none} }