/* ============================================================
   智核 · 代理商绩效检核智能体平台
   base.css — 设计令牌 / 重置 / 排版 / 通用工具类
   浅色暖白 + 美团黄体系，规避同质化审美
   ============================================================ */
:root{
  /* 色板 */
  --bg:#F7F4EC;
  --bg-soft:#FBF9F3;
  --surface:#FFFFFF;
  --surface-2:#F5F2E9;
  --surface-3:#EFEADC;
  --ink:#1B1D22;
  --ink-2:#3D3F47;
  --muted:#75787F;
  --faint:#A3A6AE;
  --line:#E7E2D4;
  --line-strong:#D9D3C2;
  --brand:#FFC300;
  --brand-strong:#F5B000;
  --brand-deep:#7A5E00;
  --brand-soft:#FFF2C4;
  --brand-ink:#241C00;
  --green:#1E9D63;   --green-soft:#E2F3EA;  --green-line:#BCE3CE;
  --red:#DC4444;     --red-soft:#FBE9E9;    --red-line:#F1C4C4;
  --blue:#3D6BC0;    --blue-soft:#E9F0FA;   --blue-line:#C5D5EF;
  --teal:#0E8B8D;    --teal-soft:#E0F1F1;   --teal-line:#B7DEDE;
  --orange:#E07E24;  --orange-soft:#FCEFE1; --orange-line:#F2D5B4;
  --violet:#7A5FC8;  --violet-soft:#EFEAFA; --violet-line:#D4C8EE;

  /* 圆角 / 阴影 */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(42,34,10,.05), 0 2px 10px rgba(42,34,10,.05);
  --sh-2:0 4px 10px rgba(42,34,10,.06), 0 12px 28px rgba(42,34,10,.08);
  --sh-3:0 18px 44px rgba(42,34,10,.14);
  --sh-brand:0 10px 26px rgba(245,176,0,.32);

  /* 字体 */
  --f-body:"MiSans","HarmonyOS Sans SC","PingFang SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  --f-num:"Bahnschrift","DIN Alternate","Franklin Gothic Medium",var(--f-body);
  --f-serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;

  /* 动效 */
  --ease:cubic-bezier(.22,.8,.28,1);
  --fast:.16s; --mid:.3s; --slow:.55s;

  --side-w:236px;
  --top-h:60px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--brand);color:var(--brand-ink)}

/* ---- 页面底噪 / 渐变网格（拒绝单一平色背景） ---- */
#bg-decor{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 8% -6%, rgba(255,195,0,.14), transparent 62%),
    radial-gradient(900px 480px at 100% 0%, rgba(14,139,141,.07), transparent 58%),
    radial-gradient(760px 560px at 96% 100%, rgba(224,126,36,.07), transparent 60%),
    radial-gradient(520px 420px at 0% 100%, rgba(61,107,192,.05), transparent 55%);
}
#bg-decor::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(27,29,34,.045) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(1200px 700px at 50% 20%, rgba(0,0,0,.5), transparent 75%);
  -webkit-mask-image:radial-gradient(1200px 700px at 50% 20%, rgba(0,0,0,.5), transparent 75%);
}
#app{position:relative;z-index:1}

/* ---- 排版 ---- */
h1,h2,h3,h4{line-height:1.3;font-weight:700}
.f-serif{font-family:var(--f-serif)}
.f-num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.t-h1{font-family:var(--f-serif);font-size:26px;letter-spacing:.01em}
.t-h2{font-size:19px}
.t-h3{font-size:16px}
.t-sub{color:var(--muted);font-size:13px}
.t-cap{color:var(--faint);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.num-xl{font-family:var(--f-num);font-size:34px;font-weight:600;line-height:1.05}
.num-lg{font-family:var(--f-num);font-size:24px;font-weight:600}
.num-md{font-family:var(--f-num);font-size:17px;font-weight:600}
.num-sm{font-family:var(--f-num);font-size:14px;font-weight:600}

/* ---- 通用工具 ---- */
.row{display:flex;align-items:center}
.row-between{display:flex;align-items:center;justify-content:space-between}
.wrap{flex-wrap:wrap}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}
.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.grow{flex:1;min-width:0}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none !important}
.divider{height:1px;background:var(--line);border:none;margin:14px 0}
.text-muted{color:var(--muted)}
.text-faint{color:var(--faint)}
.text-center{text-align:center}
.right{text-align:right}
.w-full{width:100%}
.mono{font-family:"Cascadia Code",Consolas,"Courier New",monospace;font-size:12.5px}

/* 状态点 */
.dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
.dot-green{background:#37B77E;box-shadow:0 0 0 3px rgba(55,183,126,.18)}
.dot-orange{background:#EFA33C;box-shadow:0 0 0 3px rgba(239,163,60,.18)}
.dot-red{background:#E36C6C;box-shadow:0 0 0 3px rgba(227,108,108,.18)}
.dot-blue{background:#5E8AD8;box-shadow:0 0 0 3px rgba(94,138,216,.18)}

/* 滚动条 */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:9px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#C9C1AC}
::-webkit-scrollbar-track{background:transparent}

/* 无障碍焦点 */
:focus-visible{outline:2px solid var(--brand-strong);outline-offset:2px;border-radius:4px}

/* 动画关键帧 */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.75}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes wavebar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@keyframes sweep{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes slideInRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes drawline{to{stroke-dashoffset:0}}

.anim-fadeup{animation:fadeUp var(--mid) var(--ease) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
}