/* ==========================================================================
   评估智作 Appraisal Studio · 设计系统
   视觉语言:薰衣草渐变底 + 毛玻璃卡片 + 大圆角 + 胶囊按钮 + 黑色主 CTA
   说明:类名与业务模板解耦,改这一份即可换肤。
   ========================================================================== */

:root{
  /* 品牌与强调 */
  --accent:#6b6bf0;--accent-2:#6ea8fe;--accent-deep:#4b5bd6;
  --grad:linear-gradient(135deg,#8b7ff0 0%,#6ea8fe 100%);
  --grad-soft:linear-gradient(135deg,rgba(139,127,240,.16),rgba(110,168,254,.16));

  /* 文字 */
  --ink:#1b1d2b;--ink2:#3d4060;--muted:#5c608a;--faint:#8589ad;

  /* 玻璃面 */
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.82);
  --glass-thin:rgba(255,255,255,.45);
  --glass-line:rgba(255,255,255,.78);
  --hairline:rgba(110,120,185,.14);

  /* 语义色:与薰衣草底调协调,避免出现脏黄/脏绿 */
  --ok:#0f7a56;--okbg:rgba(23,168,120,.14);
  --warn:#8a5300;--warnbg:rgba(245,166,35,.20);
  --danger:#c0342a;--dangerbg:rgba(225,70,55,.13);
  --info:#3f52c9;--infobg:rgba(110,168,254,.13);

  /* 形态 */
  --r:24px;--r-md:18px;--r-sm:13px;
  --sh:0 8px 32px rgba(76,84,160,.13);
  --sh-lg:0 18px 48px rgba(76,84,160,.20);
  --sh-sm:0 3px 12px rgba(76,84,160,.10);
}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
html,body{min-height:100%}
body{
  margin:0;color:var(--ink);font-size:13.5px;line-height:1.62;
  font-family:"Inter","Microsoft YaHei","PingFang SC",-apple-system,"Segoe UI",sans-serif;
  background:
    radial-gradient(1100px 640px at 8% -12%,#f7f8ff 0%,rgba(247,248,255,0) 62%),
    radial-gradient(980px 620px at 102% -6%,#faf1ff 0%,rgba(250,241,255,0) 58%),
    radial-gradient(900px 700px at 88% 108%,#eef1ff 0%,rgba(238,241,255,0) 60%),
    linear-gradient(162deg,#eceefd 0%,#e6e9fc 46%,#dfe2f8 100%);
  background-attachment:fixed;
}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:var(--accent)}

/* 细滚动条,避免破坏玻璃质感 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(110,120,185,.26);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(110,120,185,.42);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- 顶栏 ---------------- */
.topbar{height:72px;display:flex;align-items:center;gap:12px;padding:0 26px;position:sticky;top:0;z-index:40}
.logo{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.logo:before{content:"";width:30px;height:30px;border-radius:10px;display:inline-block;
  background:var(--grad);box-shadow:0 6px 18px rgba(107,107,240,.36)}
.logo span{font-size:10.5px;font-weight:600;color:var(--faint);letter-spacing:.14em;text-transform:uppercase}
.spacer{flex:1}
.pill{background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;
  padding:7px 15px;font-size:11.5px;font-weight:600;color:var(--muted);backdrop-filter:blur(14px)}
.user{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
  background:var(--glass);border:1px solid var(--glass-line);
  padding:5px 16px 5px 5px;border-radius:999px;backdrop-filter:blur(14px);
  font-family:inherit;color:var(--ink);cursor:pointer;transition:background .16s,box-shadow .16s}
.user:hover{background:var(--glass-strong);box-shadow:var(--sh-sm)}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;
  font-weight:700;color:#fff;background:var(--grad);flex:0 0 28px}

/* ---------------- 布局 ---------------- */
.layout{display:flex;align-items:flex-start;gap:22px;padding:0 26px 56px}
.side{
  width:236px;flex:0 0 236px;padding:14px 12px;
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);
  box-shadow:var(--sh);backdrop-filter:blur(26px) saturate(160%);
  position:sticky;top:86px;max-height:calc(100vh - 108px);overflow:auto;
}
.side .grp{font-size:10px;font-weight:700;color:var(--faint);letter-spacing:.16em;
  text-transform:uppercase;padding:16px 12px 7px}
.side .grp:first-child{padding-top:6px}
.side a{display:flex;align-items:center;gap:11px;padding:9px 11px;margin:2px 0;border-radius:var(--r-sm);
  color:var(--ink2);font-size:13px;font-weight:500;transition:background .16s,color .16s}
.side a:hover{background:rgba(255,255,255,.62);color:var(--ink)}
.side a.on{background:var(--glass-strong);color:var(--ink);font-weight:700;box-shadow:var(--sh-sm)}
.side .ico{width:27px;height:27px;flex:0 0 27px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.7);color:var(--ink2);transition:background .16s,color .16s}
.side a.on .ico{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(107,107,240,.34)}
.side .ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.main{flex:1;min-width:0;max-width:1340px;padding-top:6px}
h1{font-size:23px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.sub{color:var(--muted);font-size:12.5px;margin:0 0 22px}

/* ---------------- 卡片 ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:16px;margin-bottom:18px}
.card,.panel{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--r);
  box-shadow:var(--sh);backdrop-filter:blur(24px) saturate(160%);
  padding:22px 24px;
}
.card{padding:19px 21px;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}
/* 主指标卡:用径向渐变做柔光,不要用 blur 滤镜——那会糊成一块脏斑 */
.cards .card:first-child{
  background:
    radial-gradient(130% 110% at 100% 0%,rgba(139,127,240,.17) 0%,rgba(110,168,254,.10) 40%,rgba(255,255,255,0) 72%),
    rgba(255,255,255,.80);
}
.card .k{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.01em}
.card .v{font-size:30px;font-weight:700;letter-spacing:-.03em;margin:9px 0 4px;
  font-variant-numeric:tabular-nums;line-height:1.15}
.card .d{font-size:11.5px;color:var(--faint)}
.panel{margin-bottom:18px}
.panel h2{font-size:15px;font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:9px;
  letter-spacing:-.01em}
.panel h2 .tag{font-size:11.5px;font-weight:500;color:var(--faint)}

/* ---------------- 表格 ---------------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
th{background:rgba(255,255,255,.58);color:var(--muted);font-weight:600;text-align:left;
  padding:11px 14px;font-size:11.5px;white-space:nowrap;border-bottom:1px solid var(--hairline)}
th:first-child{border-top-left-radius:var(--r-sm)}
th:last-child{border-top-right-radius:var(--r-sm)}
td{padding:12px 14px;border-bottom:1px solid var(--hairline);vertical-align:top;color:var(--ink2)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .14s}
tbody tr:hover td{background:rgba(255,255,255,.5)}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------- 徽标 ---------------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.b-ok{background:var(--okbg);color:var(--ok)}
.b-warn{background:var(--warnbg);color:var(--warn)}
.b-err{background:var(--dangerbg);color:var(--danger)}
.b-info{background:var(--infobg);color:var(--info)}
.b-gray{background:rgba(255,255,255,.62);color:var(--muted);border-color:var(--glass-line)}

/* ---------------- 按钮 ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 20px;border-radius:999px;border:1px solid transparent;
  font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;
  background:#14151d;color:#fff;box-shadow:0 6px 18px rgba(20,21,29,.22);
  transition:transform .16s,box-shadow .16s,background .16s}
.btn:hover{background:#26283a;box-shadow:0 9px 24px rgba(20,21,29,.28);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(255,255,255,.78);color:var(--ink);border-color:rgba(110,120,185,.22);
  box-shadow:var(--sh-sm);backdrop-filter:blur(14px)}
.btn.ghost:hover{background:#fff;box-shadow:var(--sh);transform:translateY(-1px)}
.btn.small{padding:6px 14px;font-size:11.5px}
.btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}

/* ---------------- 提示条 ----------------
   只靠底色区分,不加描边——加了描边会被误认成按钮(尤其紧挨主按钮时)。 */
.note{padding:13px 17px;border-radius:var(--r-sm);font-size:12.5px;margin:11px 0;
  background:var(--warnbg);color:var(--warn)}
.note.err{background:var(--dangerbg);color:var(--danger)}
.note.ok{background:var(--okbg);color:var(--ok)}
.note.info{background:var(--infobg);color:var(--info)}

/* ---------------- 表单 ---------------- */
label{display:block;font-size:12px;color:var(--ink2);font-weight:600;margin:14px 0 6px}
/* 字段边界必须清晰:白底玻璃上的白色描边等于没有描边,用户看不出哪里能填 */
input,select,textarea{width:100%;padding:10px 14px;border-radius:var(--r-sm);
  border:1px solid rgba(110,120,185,.22);background:rgba(255,255,255,.82);
  font-size:13px;font-family:inherit;color:var(--ink);
  transition:border-color .16s,box-shadow .16s,background .16s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{background:#fff;border-color:rgba(110,120,185,.36)}
input:focus,select:focus,textarea:focus{outline:none;background:#fff;border-color:#8f9cf5;
  box-shadow:0 0 0 4px rgba(124,132,240,.16)}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
textarea{min-height:74px;resize:vertical}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1080px){.fgrid{grid-template-columns:1fr}}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:1080px){.grid2{grid-template-columns:1fr}}

/* 分段控件(参考稿的 EUR/USD 胶囊切换) */
.tabs{display:flex;gap:4px;margin-bottom:18px;padding:5px;width:fit-content;flex-wrap:wrap;
  background:rgba(255,255,255,.5);border:1px solid var(--glass-line);border-radius:999px;
  backdrop-filter:blur(18px);box-shadow:var(--sh-sm)}
.tabs button{padding:8px 17px;border-radius:999px;font-size:12.5px;cursor:pointer;color:var(--muted);
  background:none;border:none;font-family:inherit;font-weight:600;transition:background .16s,color .16s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{background:#fff;color:var(--ink);font-weight:700;box-shadow:0 3px 10px rgba(76,84,160,.16)}
.tabpane{display:none}.tabpane.on{display:block}
.kv{display:grid;grid-template-columns:126px 1fr;gap:10px 18px;font-size:12.5px}
.kv .k{color:var(--muted)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------------- 登录 ---------------- */
.loginwrap{display:grid;place-items:center;min-height:calc(100vh - 150px);position:relative}
.loginwrap:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:var(--grad);opacity:.18;filter:blur(80px);pointer-events:none;z-index:0}
.loginbox{width:428px;position:relative;z-index:1;padding:38px 40px;border-radius:30px;
  background:var(--glass-strong);border:1px solid var(--glass-line);
  box-shadow:var(--sh-lg);backdrop-filter:blur(30px) saturate(170%)}
.loginbox h2{text-align:center;margin:0 0 7px;font-size:23px;font-weight:700;letter-spacing:-.02em}
.loginbox .tip{text-align:center;color:var(--muted);font-size:12.5px;margin-bottom:22px}
.mini{font-size:11.5px;color:var(--faint)}
.log{font-family:Consolas,"SF Mono",monospace;font-size:11.5px;background:#191b28;color:#b9c6f5;
  border-radius:var(--r-md);padding:17px 19px;line-height:1.95;max-height:270px;overflow:auto}

/* 空状态:让稀疏页面不至于空得难看 */
.panel .mini:only-child{padding:14px 0}

/* ---------------- 弹框 ---------------- */
/* [hidden] 必须能压住 display,否则 .modal-overlay 的 display:grid 会让弹框一直显示 */
.modal-overlay[hidden]{display:none}
.modal-overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:rgba(27,29,43,.42);backdrop-filter:blur(6px);animation:fadeIn .18s ease-out}
.modal{width:100%;max-width:600px;max-height:calc(100vh - 48px);overflow:auto;
  background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:28px;
  box-shadow:var(--sh-lg);backdrop-filter:blur(30px) saturate(170%);
  padding:28px 30px 24px;animation:modalIn .2s cubic-bezier(.2,.8,.3,1)}
.modal h2{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.02em}
.modal .modal-sub{color:var(--muted);font-size:12.5px;margin-bottom:6px}
.modal .modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--hairline)}
.modal .fgrid{grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.modal .fgrid{grid-template-columns:1fr}}
.panel h2 .h2btn{margin-left:auto}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* ---------------- 轻提示 ---------------- */
#toast{position:fixed;right:26px;bottom:26px;z-index:99;padding:13px 21px;border-radius:999px;
  font-size:13px;font-weight:600;color:#fff;background:#14151d;
  box-shadow:0 14px 38px rgba(20,21,29,.32);animation:toastIn .22s ease-out}
#toast.bad{background:#c33327;box-shadow:0 14px 38px rgba(195,51,39,.32)}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------------- 响应式 ---------------- */
@media(max-width:960px){
  .layout{flex-direction:column;gap:16px;padding:0 16px 40px}
  .side{width:100%;flex:none;position:static;max-height:none;
    display:flex;flex-wrap:wrap;gap:6px;align-items:center}
  .side .grp{display:none}
  .side a{margin:0}
  .topbar{padding:0 16px;height:64px}
  .main{max-width:none}
}