/* =============================================================
   智慧market SaaS · 设计令牌 + 多皮肤系统 (theme.css)
   皮肤模型：data-theme(配色) × data-mode(明/暗) 两轴
   - 配色 theme：blue / emerald / violet / amber / teal
   - 模式 mode：light / dark
   新增皮肤 = 只需新增一个 [data-theme="x"]{ --brand; --brand-strong } 规则。
   其余颜色全部由 color-mix 派生，零额外维护。
   ============================================================= */

/* ---------- 基础重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",
    "Helvetica Neue",Arial,"Noto Sans CJK SC",sans-serif;
  font-size:14px; line-height:1.6; color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .35s ease,color .35s ease;
}
h1,h2,h3,h4,h5,p,figure,ul,ol{ margin:0; }
ul,ol{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img,svg{ display:block; max-width:100%; }
/* 图标统一基准尺寸：防止无显式尺寸的 SVG 在 flex/inline 上下文中撑满变形。
   更具体的上下文规则(.btn .ic / .nav-item .ic / .result-icon .ic 等)会自动覆盖此默认值。 */
svg{ width:18px; height:18px; }                  /* 万能兜底：任何内联 svg 都有确定尺寸，彻底杜绝撑满变形（图表用 canvas 不受影响） */
.ic{ width:18px; height:18px; flex:0 0 auto; }
.ti{ width:23px; height:23px; flex:0 0 auto; }   /* 移动端图标类 */
.stat-icon .ic{ width:22px; height:22px; }
.ei{ width:72px; height:72px; flex:0 0 auto; }
input,select,textarea,button{ font-family:inherit; font-size:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* ---------- 尺寸 / 圆角 / 动效 令牌（与皮肤无关） ---------- */
:root{
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --sp:4px;
  --sidebar-w:248px; --sidebar-w-collapsed:74px; --topbar-h:62px;
  --maxw:1480px;
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.16s var(--ease); --t:.26s var(--ease);
  --font-num:"DIN Alternate","SF Pro Display",-apple-system,"PingFang SC",sans-serif;
}

/* =============================================================
   模式（明 / 暗）—— 中性色 + 表面 + 阴影
   ============================================================= */
:root,[data-mode="light"]{
  --bg:#eef1f8;
  --bg-grad:radial-gradient(1200px 600px at 12% -8%,#e7ecfb 0%,transparent 55%),
            radial-gradient(1000px 500px at 110% 0%,#eaf3f1 0%,transparent 50%),#eef1f8;
  --surface:#ffffff;
  --surface-2:#f6f8fc;
  --surface-3:#eef2f9;
  --surface-inset:#f3f6fb;
  --border:#e7ebf3;
  --border-strong:#d8deea;
  --text:#1b2336;
  --text-2:#586273;
  --text-3:#7d8699;
  --text-on-brand:#ffffff;
  --shadow-sm:0 1px 2px rgba(20,30,55,.06),0 1px 3px rgba(20,30,55,.05);
  --shadow:0 6px 18px -6px rgba(23,38,80,.14),0 2px 6px rgba(23,38,80,.06);
  --shadow-lg:0 24px 60px -18px rgba(23,38,80,.28),0 8px 22px -12px rgba(23,38,80,.16);
  --ring:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);
  --scroll-thumb:#cfd6e4;
}
[data-mode="dark"]{
  --bg:#0c111d;
  --bg-grad:radial-gradient(1100px 560px at 10% -10%,#15203a 0%,transparent 55%),
            radial-gradient(900px 480px at 112% 0%,#102b2a 0%,transparent 52%),#0c111d;
  --surface:#141b2c;
  --surface-2:#1a2236;
  --surface-3:#212c44;
  --surface-inset:#10172680;
  --border:#26314b;
  --border-strong:#33415f;
  --text:#e8edf7;
  --text-2:#a3afc7;
  --text-3:#7e8aa6;
  --text-on-brand:#ffffff;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 10px 26px -10px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.7);
  --ring:0 0 0 3px color-mix(in srgb,var(--brand) 34%,transparent);
  --scroll-thumb:#2f3c5a;
}

/* 侧边栏：两种模式下恒为深色「高级感」面板 —— 用品牌色微调染色 */
:root{
  --side-bg:linear-gradient(185deg,
            color-mix(in srgb,var(--brand) 16%,#121a2e) 0%,
            #0e1525 58%,#0b101d 100%);
  --side-text:#c7d0e4;
  --side-text-dim:#7d88a3;
  --side-active-bg:color-mix(in srgb,var(--brand) 92%,#fff 0%);
  --side-active-glow:0 10px 24px -8px color-mix(in srgb,var(--brand) 70%,transparent);
  --side-hover:rgba(255,255,255,.06);
  --side-border:rgba(255,255,255,.07);
}

/* =============================================================
   配色皮肤（只定义两个变量，其余派生）
   ============================================================= */
:root,[data-theme="blue"]{   --brand:#3a78fe; --brand-strong:#2a5fe0; --brand-2:#46c6ff; }
[data-theme="emerald"]{      --brand:#10b884; --brand-strong:#0a9568; --brand-2:#5fe0b0; }
[data-theme="violet"]{       --brand:#7a5cff; --brand-strong:#6242e3; --brand-2:#c08bff; }
[data-theme="amber"]{        --brand:#f5973b; --brand-strong:#df7d1d; --brand-2:#ffd166; }
[data-theme="teal"]{         --brand:#15a8a0; --brand-strong:#0d8d86; --brand-2:#5fd6cf; }

/* 派生品牌色（明暗自适应） */
:root{
  --brand-grad:linear-gradient(135deg,var(--brand) 0%,var(--brand-strong) 100%);
  --brand-grad-soft:linear-gradient(135deg,
        color-mix(in srgb,var(--brand) 16%,transparent),
        color-mix(in srgb,var(--brand-strong) 8%,transparent));
  --brand-soft:color-mix(in srgb,var(--brand) 12%,var(--surface));
  --brand-ghost:color-mix(in srgb,var(--brand) 10%,transparent);
  --brand-line:color-mix(in srgb,var(--brand) 32%,var(--border));
}

/* ---------- 语义状态色 ---------- */
:root{
  --success:#1bbf7a; --warn:#f5a623; --danger:#f0506e; --info:#3a8ffe; --gold:#e8b339;
  --success-soft:color-mix(in srgb,var(--success) 14%,var(--surface));
  --warn-soft:color-mix(in srgb,var(--warn) 16%,var(--surface));
  --danger-soft:color-mix(in srgb,var(--danger) 14%,var(--surface));
  --info-soft:color-mix(in srgb,var(--info) 14%,var(--surface));
  --gold-soft:color-mix(in srgb,var(--gold) 16%,var(--surface));
}

/* 数据可视化调色板（图表/标签用） */
:root{
  --c1:var(--brand); --c2:#46c6ff; --c3:#ffb454; --c4:#6ed3a3;
  --c5:#9b7bff; --c6:#ff8aa1; --c7:#5fd6cf; --c8:#f5cd5b;
}

/* ---------- 滚动条 ---------- */
*{ scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); border-radius:99px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---------- 通用动效（皮肤切换平滑过渡） ---------- */
.card,.stat-card,.topbar,.sidebar,.btn,.tag,.data-table,.input,.select,.kanban-card,
.m-card,.m-appbar,.m-tabbar,.shop,.tree-node,.tab,.seg-item{
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
             color .3s var(--ease),box-shadow .2s var(--ease),transform .15s var(--ease);
}

/* 工具类 */
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.muted{ color:var(--text-3); }
.dim{ color:var(--text-2); }
.up{ color:var(--success); } .down{ color:var(--danger); }
.text-brand{ color:var(--brand); }
.nowrap{ white-space:nowrap; }
.right{ text-align:right; } .center{ text-align:center; }
.hide{ display:none !important; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }