:root { --ink:#171713; --paper:#f3eee3; --yellow:#f4c83e; --red:#df543f; --muted:#746f65; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr); }
.login-intro { position:relative; overflow:hidden; padding:clamp(42px,7vw,100px); display:flex; flex-direction:column; justify-content:center; background:#191915; color:#fff; }
.login-intro::before { content:""; position:absolute; width:430px; height:430px; right:-190px; top:-160px; border:55px solid rgba(244,200,62,.16); border-radius:50%; }
.login-intro::after { content:"剧"; position:absolute; right:4vw; bottom:-9vw; color:rgba(255,255,255,.035); font-family:SimSun,serif; font-size:33vw; line-height:1; }
.eyebrow { margin:0 0 28px; color:var(--yellow); font-size:11px; font-weight:900; letter-spacing:.24em; }
.brand-mark { width:60px; height:60px; display:grid; place-items:center; border-radius:17px; background:var(--yellow); color:var(--ink); font-size:28px; font-weight:900; transform:rotate(-4deg); }
.login-intro h1 { position:relative; z-index:1; margin:35px 0 20px; max-width:720px; font-family:SimSun,serif; font-size:clamp(38px,5.2vw,74px); line-height:1.13; letter-spacing:-.03em; }
.login-intro > p:not(.eyebrow) { position:relative; z-index:1; max-width:620px; margin:0; color:#b6b5ac; line-height:1.9; }
.feature-list { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:9px; margin-top:38px; }
.feature-list span { padding:8px 11px; border:1px solid #45453e; color:#d3d2c9; font-size:12px; }
.login-panel { padding:34px; display:grid; place-items:center; align-content:center; background:radial-gradient(circle at 88% 12%,rgba(244,200,62,.28),transparent 18rem); }
.login-card { width:min(100%,480px); padding:clamp(28px,5vw,50px); border:1px solid #d2cabc; background:#fffdf8; box-shadow:0 24px 70px rgba(44,34,20,.11); }
.card-number { color:var(--red); font-family:Georgia,serif; font-size:13px; }
.login-card h2 { margin:8px 0 8px; font-family:SimSun,serif; font-size:35px; }
.login-card > div > p { margin:0 0 34px; color:var(--muted); font-size:13px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:0 0 8px; padding:4px; border:1px solid #d2cabc; background:#f5efe4; }
.auth-tabs .auth-tab { margin:0; padding:9px 12px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--muted); }
.auth-tabs .auth-tab:hover { transform:none; box-shadow:none; color:var(--ink); }
.auth-tabs .auth-tab.active { background:var(--ink); color:#fff; }
.login-card label { display:grid; gap:8px; margin-top:19px; font-size:13px; font-weight:800; }
.login-card input { width:100%; padding:13px 14px; border:1px solid #c9c0b1; outline:none; background:#faf6ed; }
.login-card input:focus { border-color:#d6a900; box-shadow:0 0 0 3px rgba(244,200,62,.2); }
.login-card button { width:100%; margin-top:28px; padding:13px 18px; border:1px solid var(--ink); border-radius:7px; background:var(--yellow); color:var(--ink); font-weight:900; box-shadow:4px 4px 0 var(--ink); cursor:pointer; transition:.15s; }
.login-card button:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
.login-card button:disabled { opacity:.6; cursor:wait; }
.field-hint { color:var(--muted); font-size:11px; font-weight:400; line-height:1.5; }
.auth-switch { margin:18px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.auth-switch button { display:inline; width:auto; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#b43b2d; box-shadow:none; font:inherit; font-weight:900; }
.auth-switch button:hover { transform:none; box-shadow:none; text-decoration:underline; }
.message { min-height:20px; margin:16px 0 0; color:var(--red); font-size:12px; text-align:center; }
.security-note { width:min(100%,480px); margin:18px 0 0; color:var(--muted); font-size:11px; line-height:1.7; text-align:center; }
@media(max-width:820px){ .login-shell{grid-template-columns:1fr}.login-intro{min-height:42vh;padding:45px 28px}.login-intro h1{font-size:40px}.login-panel{padding:28px 18px 45px} }