/* 维度信息库 · 登录 / 注册 / 找回密码 共用样式 */
:root{
  --ink:#0B1220; --navy:#0E1A30; --navy2:#080D1A;
  --gold:#A85F0A; --gold2:#8A4E08; --goldL:#E8C468; --goldD:#C9962F;
  --paper:#F5F1E8; --card:#FFFFFF; --line:#E5DFD2;
  --text:#18202E; --muted:#6C7484; --soft:#F8F5ED;
  --red:#C24135; --green:#2E7D5B; --sh:0 24px 70px rgba(15,23,42,.14);
  --ease:cubic-bezier(.22,1,.36,1); --fast:160ms; --mid:240ms;
  --serif:"Songti SC","Noto Serif SC",Georgia,serif;
}
*{box-sizing:border-box}
html,body{min-height:100%}
html{scroll-padding-bottom:140px}
body{
  margin:0; color:var(--text); background:
    radial-gradient(70% 55% at 8% 0%,rgba(232,196,104,.18),transparent 62%),
    radial-gradient(60% 50% at 96% 100%,rgba(46,164,146,.10),transparent 60%),
    var(--paper);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--goldD); outline-offset:3px; border-radius:8px}

.auth-top{max-width:1080px;margin:0 auto;padding:26px 22px 0;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.02em}
.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#F8E7B8;
  background:linear-gradient(145deg,#172844,#0B1220);border:1px solid rgba(232,196,104,.35);
  box-shadow:0 8px 18px rgba(10,18,34,.22);font-family:var(--serif);font-size:17px}
.brand small{display:block;font-size:9px;letter-spacing:2.2px;color:var(--muted);font-weight:600}
.top-back{font-size:12.5px;color:var(--muted);border-bottom:1px solid transparent;transition:color var(--fast),border-color var(--fast)}
.top-back:hover{color:var(--gold2);border-color:rgba(168,95,10,.35)}

.auth-shell{max-width:1080px;margin:20px auto 34px;padding:0 22px}
.auth-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.92fr);background:var(--card);
  border:1px solid rgba(229,223,210,.9);border-radius:26px;overflow:hidden;box-shadow:var(--sh);min-height:610px}
.auth-aside{position:relative;isolation:isolate;overflow:hidden;padding:46px 44px 38px;color:#fff;
  background:
    radial-gradient(120% 100% at 10% -10%,#1B315B 0%,transparent 58%),
    radial-gradient(90% 80% at 100% 110%,#3B2C15 0%,transparent 58%),
    linear-gradient(150deg,#080D1A 0%,#0E1A30 52%,#10192C 100%)}
.auth-aside::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;
  background-image:linear-gradient(rgba(232,196,104,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(232,196,104,.09) 1px,transparent 1px);
  background-size:64px 64px;-webkit-mask-image:radial-gradient(120% 90% at 40% 35%,#000,transparent 78%);mask-image:radial-gradient(120% 90% at 40% 35%,#000,transparent 78%)}
.aside-kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:2.6px;color:rgba(232,196,104,.9);text-transform:uppercase}
.aside-kicker i{width:6px;height:6px;border-radius:50%;background:var(--goldL);box-shadow:0 0 12px rgba(232,196,104,.9)}
.aside-title{font-family:var(--serif);font-size:clamp(32px,4vw,48px);line-height:1.14;letter-spacing:.03em;margin:22px 0 0;color:#FFFCF1;font-weight:700}
.aside-title em{font-style:normal;color:#F7DB95}
.aside-lead{margin:18px 0 0;max-width:360px;font-size:13.5px;line-height:1.9;color:rgba(255,255,255,.76)}
.aside-points{margin:34px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.aside-points li{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:rgba(255,255,255,.78)}
.aside-points b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  color:#F4D58F;background:rgba(232,196,104,.10);border:1px solid rgba(232,196,104,.28);font-size:11px}
.aside-foot{position:absolute;left:44px;right:44px;bottom:30px;display:flex;justify-content:space-between;gap:12px;
  padding-top:16px;border-top:1px solid rgba(232,196,104,.16);font-size:10.5px;letter-spacing:.6px;color:rgba(255,255,255,.46)}
.aside-foot b{color:rgba(232,196,104,.86);font-weight:700}

.auth-main{padding:34px 42px 34px;display:flex;flex-direction:column;justify-content:center}
.auth-main-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.auth-title{font-size:23px;line-height:1.2;font-weight:800;letter-spacing:-.01em;margin:0}
.auth-sub{font-size:12px;color:var(--muted);margin:7px 0 0}
.secure-pill{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.4px;
  color:var(--green);background:rgba(46,125,91,.08);border:1px solid rgba(46,125,91,.18);padding:5px 9px;border-radius:999px;white-space:nowrap}
.secure-pill svg{width:12px;height:12px}

.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin:24px 0 22px;isolation:isolate}
.tabs button{position:relative;z-index:2;height:36px;border:0;background:transparent;border-radius:9px;font-size:12.5px;
  font-weight:700;color:var(--muted);transition:color var(--mid)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tab-ink{position:absolute;z-index:1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;
  background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.08);transition:transform var(--mid) var(--ease)}
.tabs[data-mode="register"] .tab-ink{transform:translateX(100%)}

.panes{position:relative}
.pane{animation:paneIn var(--mid) var(--ease) both}
.pane[hidden]{display:none!important}
@keyframes paneIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.form{display:grid;gap:13px}
.field{display:block}
.field .lb{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;font-weight:700;color:#4A5262;margin:0 0 7px;letter-spacing:.02em}
.field .lb em{font-style:normal;font-weight:600;color:var(--muted);font-size:10.5px}
.control{position:relative;display:flex;align-items:center}
.control input{width:100%;height:47px;border:1px solid #DCD6C9;border-radius:11px;background:#fff;color:var(--text);
  padding:0 42px 0 13px;font-size:13.5px;transition:border-color var(--mid),box-shadow var(--mid),background var(--mid);outline:0}
.control input::placeholder{color:#A3A8B4;font-size:12.5px}
.control input:hover{border-color:#C7BFAE}
.field:focus-within .control input{border-color:var(--goldD);box-shadow:0 0 0 3px rgba(201,150,47,.15)}
.field.valid .control input{border-color:rgba(46,125,91,.55);background:#FBFEFC}
.field.invalid .control input{border-color:rgba(194,65,53,.7);background:#FFF9F8;animation:shake 320ms var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}55%{transform:translateX(3px)}80%{transform:translateX(-1px)}}
.tick{position:absolute;right:13px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
  background:var(--green);color:#fff;font-size:11px;opacity:0;visibility:hidden;transform:scale(.6);transition:opacity var(--mid),transform var(--mid),visibility var(--mid);pointer-events:none}
.field.valid .tick{opacity:1;visibility:visible;transform:scale(1)}
.count{position:absolute;right:13px;font-size:10px;color:#A0A5B0;font-variant-numeric:tabular-nums;pointer-events:none}
.control.has-count .tick{right:50px}
.control.has-eye .tick{right:46px}
.control.has-eye .count{right:46px}
.control.has-eye.has-count .tick{right:80px}
.eye{position:absolute;right:8px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#8D93A0;display:grid;place-items:center;transition:color var(--fast),background var(--fast)}
.eye:hover{color:var(--gold2);background:rgba(201,150,47,.08)}
.eye svg{width:17px;height:17px}
.eye .eye-off{display:none}
.eye[aria-pressed="true"] .eye-open{display:none}
.eye[aria-pressed="true"] .eye-off{display:block}
.msg{display:block;max-height:0;overflow:hidden;opacity:0;font-size:11px;line-height:1.55;color:var(--red);
  padding-left:2px;transition:max-height var(--mid),opacity var(--mid),margin var(--mid)}
.field.invalid .msg{max-height:42px;opacity:1;margin-top:6px}
.field.valid .msg{max-height:0;opacity:0;margin:0}
.hint{font-size:10.5px;color:var(--muted);margin:6px 0 0}

.meter{margin:2px 0 0}
.meter-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.meter-bars i{height:4px;border-radius:99px;background:#E7E2D7;transition:background var(--mid),transform var(--mid)}
.meter-bars i.on:nth-child(1){background:#C24135}
.meter-bars i.on:nth-child(2){background:#D9A13A}
.meter-bars i.on:nth-child(3){background:#8FA85A}
.meter-bars i.on:nth-child(4){background:#2E7D5B}
.meter-label{margin-top:5px;font-size:10.5px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}
.meter-label b{color:var(--text);font-weight:700}

.check{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#525A68;margin:2px 0 0;user-select:none}
.check input{width:16px;height:16px;accent-color:var(--goldD);margin:0}
.check label{cursor:pointer}

.submit{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:48px;border:0;border-radius:12px;background:linear-gradient(135deg,#FFE7AE 0%,#E8C468 48%,#C9962F 100%);
  color:#22150A;font-size:13.5px;font-weight:800;letter-spacing:.04em;margin-top:5px;
  box-shadow:0 12px 26px rgba(201,150,47,.24),inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform var(--fast) var(--ease),box-shadow var(--fast),filter var(--fast)}
.submit:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(201,150,47,.32),inset 0 1px 0 rgba(255,255,255,.55)}
.submit:active{transform:translateY(1px) scale(.99);box-shadow:0 8px 18px rgba(201,150,47,.2)}
.submit:disabled{cursor:not-allowed;filter:saturate(.7) brightness(.98);transform:none;box-shadow:0 8px 18px rgba(201,150,47,.16)}
.submit.is-loading{background:linear-gradient(135deg,#E9D8A9,#D5B45D);color:#3B2B10}
.submit.is-success{background:linear-gradient(135deg,#3FA97A,#2E7D5B);color:#fff;box-shadow:0 12px 26px rgba(46,125,91,.26)}
.sbtn-spin{width:14px;height:14px;border:2px solid rgba(34,21,10,.26);border-top-color:#3B2B10;border-radius:50%;animation:spin 700ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sbtn-check{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.22);font-size:11px}
.submit .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:ripple 620ms var(--ease);pointer-events:none}
@keyframes ripple{to{transform:scale(2.8);opacity:0}}

.form-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:1px;flex-wrap:wrap}
.link{font-size:11.5px;color:var(--gold2);font-weight:700;border-bottom:1px solid rgba(168,95,10,.2);padding-bottom:1px;transition:border-color var(--fast),color var(--fast)}
.link:hover{color:var(--gold);border-color:rgba(168,95,10,.55)}
.alt{font-size:11.5px;color:var(--muted)}
.alt button{border:0;background:none;padding:0;color:var(--gold2);font-weight:800}

.notice-line{display:flex;gap:8px;align-items:flex-start;font-size:10.5px;line-height:1.6;color:#7D7462;
  background:rgba(201,150,47,.07);border:1px solid rgba(201,150,47,.13);border-radius:9px;padding:9px 10px;margin:14px 0 0}
.notice-line svg{width:13px;height:13px;flex-shrink:0;margin-top:1px;color:var(--gold2)}

.success-box{display:flex;gap:12px;align-items:flex-start;background:#F3FAF7;border:1px solid rgba(46,125,91,.2);
  border-radius:12px;padding:14px 15px;margin:18px 0 0;animation:paneIn var(--mid) var(--ease) both}
.success-ic{width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex-shrink:0;font-size:15px}
.success-box b{display:block;font-size:12.5px;color:#1E5C44;margin-bottom:3px}
.success-box span{display:block;font-size:11px;line-height:1.7;color:#4D6B5E}

/* 错误 / 找回密码独立页 */
.simple-wrap{max-width:520px;margin:52px auto 44px;padding:0 20px}
.simple-card{background:#fff;border:1px solid rgba(229,223,210,.9);border-radius:20px;box-shadow:var(--sh);padding:30px 30px 26px}
.simple-head{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.simple-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--gold2);background:rgba(201,150,47,.1);border:1px solid rgba(201,150,47,.16)}
.simple-ic svg{width:19px;height:19px}
.simple-title{font-size:20px;font-weight:800;margin:0}
.simple-sub{font-size:11.5px;color:var(--muted);margin:3px 0 0}
.simple-card .form{margin-top:20px}
.back-row{margin-top:18px;text-align:center;font-size:11.5px;color:var(--muted)}
.back-row .link{display:inline-block;background:transparent;border:0;border-bottom:1px solid rgba(168,95,10,.25);padding:0 0 2px;font:inherit;font-weight:700;color:var(--gold2)}
.back-row .link:hover{color:var(--gold);border-color:rgba(168,95,10,.55)}

/* Toast */
.toast-wrap{position:fixed;z-index:120;right:18px;top:18px;display:flex;flex-direction:column;gap:9px;width:min(360px,calc(100vw - 36px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border-radius:11px;background:#fff;
  border:1px solid #E7E1D5;border-left:3px solid var(--goldD);box-shadow:0 14px 34px rgba(15,23,42,.16);color:#3B4352;
  animation:toastIn 240ms var(--ease) both;font-size:11.5px;line-height:1.6}
.toast.ok{border-left-color:var(--green)} .toast.warn{border-left-color:var(--goldD)} .toast.err{border-left-color:var(--red)}
.toast.out{animation:toastOut 220ms var(--ease) both}
.toast-ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:10px;color:#fff;background:var(--goldD);margin-top:1px}
.toast.ok .toast-ic{background:var(--green)} .toast.err .toast-ic{background:var(--red)}
.toast-txt{flex:1} .toast-x{border:0;background:none;color:#8A8F9B;font-size:14px;line-height:1;padding:0 2px}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-6px) scale(.98)}}

/* 账号页 */
.account-wrap{max-width:760px;margin:44px auto;padding:0 20px}
.account-card{background:#fff;border:1px solid rgba(229,223,210,.9);border-radius:20px;box-shadow:var(--sh);overflow:hidden}
.account-top{padding:25px 28px;background:
  radial-gradient(120% 160% at 100% 0%,rgba(232,196,104,.15),transparent 55%),
  linear-gradient(140deg,#0B1220,#101C33);color:#fff;display:flex;align-items:center;gap:14px}
.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#F4D58F,#C9962F);color:#2B1C0B;font-family:var(--serif);font-size:20px;font-weight:800}
.account-name{font-family:var(--serif);font-size:22px;font-weight:700}
.account-mail{font-size:11.5px;color:rgba(255,255,255,.62);margin-top:2px}
.account-body{padding:24px 28px 28px}
.account-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #EEE9DE;font-size:12px}
.account-row span{color:var(--muted)} .account-row b{font-weight:700}
.account-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.account-actions .submit{width:auto;min-width:150px;margin:0;padding:0 22px;color:#22150A}
.account-actions .out{border:1px solid #D9D2C5;background:#fff;color:#4A5262;box-shadow:none;font-weight:700}
.account-actions .out:hover{box-shadow:0 10px 22px rgba(15,23,42,.08);transform:translateY(-2px)}
.account-tip{margin-top:16px;font-size:10.5px;color:var(--muted);line-height:1.7}

@media(max-width:900px){
  html{scroll-padding-bottom:190px}
  .auth-grid{grid-template-columns:1fr;min-height:0}
  .auth-aside{padding:30px 28px 26px;min-height:220px}
  .aside-title{font-size:34px;margin-top:14px}
  .aside-points,.aside-foot{display:none}
  .aside-lead{margin-top:12px;font-size:12px}
  .auth-main{padding:28px 26px calc(30px + env(safe-area-inset-bottom))}
  .submit{scroll-margin-bottom:190px}
}
@media(max-width:560px){
  .auth-top{padding:18px 15px 0}
  .auth-shell{padding:0 12px;margin-top:14px}
  .auth-grid{border-radius:18px}
  .auth-aside{display:none}
  .auth-main{padding:24px 18px calc(25px + env(safe-area-inset-bottom))}
  .auth-title{font-size:21px}
  .secure-pill{display:none}
  .simple-card{padding:24px 18px}
  .toast-wrap{right:10px;top:10px;width:calc(100vw - 20px)}
  .account-top,.account-body{padding-left:18px;padding-right:18px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .pane,.toast,.success-box{animation:none!important}
}
