:root { --night:#15231e; --lime:#dfff70; --paper:#f4f2ec; --line:#d9ded9; --muted:#68736f; }
* { box-sizing: border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; padding:24px; color:var(--night); background:radial-gradient(circle at 16% 8%,rgba(50,122,89,.13),transparent 34rem),radial-gradient(circle at 90% 88%,rgba(223,255,112,.22),transparent 29rem),var(--paper); font-family:"MiSans","PingFang SC","Microsoft YaHei",sans-serif; }
.auth-shell { width:min(980px,100%); min-height:600px; display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; border:1px solid rgba(21,35,30,.12); border-radius:30px; background:#fffefa; box-shadow:0 28px 80px rgba(20,43,34,.14); }
.auth-story { position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:42px; overflow:hidden; color:white; background:var(--night); }
.auth-story::before { content:""; position:absolute; width:360px; height:360px; right:-145px; bottom:-95px; border:1px solid rgba(223,255,112,.24); border-radius:50%; box-shadow:0 0 0 54px rgba(223,255,112,.05),0 0 0 108px rgba(223,255,112,.035); }
.auth-brand { position:relative; display:flex; align-items:center; gap:12px; font-weight:800; }
.auth-brand i { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--lime); color:var(--night); font:800 21px Georgia,serif; font-style:normal; }
.auth-copy { position:relative; max-width:410px; }
.auth-copy small { color:var(--lime); font-size:11px; font-weight:800; letter-spacing:.17em; }
.auth-copy h1 { margin:14px 0 16px; font-size:clamp(34px,5vw,58px); line-height:1.04; letter-spacing:-.055em; }
.auth-copy h1 span { position:relative; display:inline-block; color:var(--lime); }
.auth-copy h1 span::after { content:""; position:absolute; left:2px; right:0; bottom:-8px; height:1px; background:linear-gradient(90deg,var(--lime),transparent 88%); transform-origin:left; animation:promise-line .9s .35s both cubic-bezier(.2,.75,.25,1); }
.auth-copy p { margin:0; color:rgba(255,255,255,.62); line-height:1.8; }
.brand-promise { display:flex; align-items:center; gap:13px; margin:27px 0 20px!important; color:white!important; font-family:Georgia,"Times New Roman",serif; font-size:18px; letter-spacing:.015em; }
.brand-promise b { font-weight:500; }
.brand-promise i { width:30px; height:1px; background:rgba(223,255,112,.62); transform:rotate(-18deg); }
.story-note { max-width:350px; font-size:13px; }
@keyframes promise-line { from { opacity:0; transform:scaleX(0); } to { opacity:1; transform:scaleX(1); } }
.auth-foot { position:relative; color:rgba(255,255,255,.38); font-size:11px; letter-spacing:.08em; }
.auth-panel { display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,7vw,74px); }
.auth-panel .kicker { margin:0 0 8px; color:#1b664d; font-size:11px; font-weight:800; letter-spacing:.14em; }
.auth-panel h2 { margin:0; font-size:30px; letter-spacing:-.04em; }
.auth-panel .lead { margin:12px 0 30px; color:var(--muted); line-height:1.7; }
.feishu-login { min-height:54px; display:flex; align-items:center; justify-content:center; gap:12px; border-radius:14px; background:#3370ff; color:white; font-weight:800; text-decoration:none; box-shadow:0 12px 30px rgba(51,112,255,.22); transition:transform 160ms ease,box-shadow 160ms ease; }
.feishu-login:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(51,112,255,.28); }
.feishu-login i { width:25px; height:25px; display:grid; place-items:center; border-radius:7px; background:white; color:#3370ff; font-style:normal; font-size:13px; }
.auth-hint { margin:18px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.7; }
.auth-error { margin:0 0 18px; padding:11px 13px; border-radius:10px; background:#f7e1de; color:#9d4037; font-size:13px; }
.pending-mark { width:64px; height:64px; display:grid; place-items:center; margin-bottom:24px; border-radius:20px; background:#e6f0ea; color:#1d664e; font-size:28px; }
.pending-meta { display:grid; gap:10px; margin:6px 0 26px; padding:18px; border:1px solid var(--line); border-radius:14px; background:#f8f8f4; }
.pending-meta span { display:flex; justify-content:space-between; gap:18px; color:var(--muted); font-size:13px; }
.pending-meta strong { color:var(--night); }
.pending-countdown { display:flex; align-items:center; gap:13px; margin:-8px 0 18px; padding:13px 15px; border-radius:13px; background:#eef3ed; color:#305346; }
.pending-countdown > strong { width:38px; height:38px; display:grid; place-items:center; flex:0 0 38px; border-radius:50%; background:var(--night); color:var(--lime); font-size:20px; font-variant-numeric:tabular-nums; }
.pending-countdown span { font-size:13px; font-weight:750; line-height:1.35; }
.pending-countdown small { color:var(--muted); font-size:10px; font-weight:500; }
.quiet-button { min-height:46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; color:var(--night); text-decoration:none; font-weight:750; }
@media(max-width:720px){.auth-shell{min-height:auto;grid-template-columns:1fr}.auth-story{min-height:260px;padding:30px}.auth-copy h1{font-size:38px}.auth-panel{padding:34px}.auth-foot{display:none}}