/* =========================================================
   梵叶 · 全链路库存智能调配系统
   base.css —— 设计令牌 / 基础重置 / 通用原子
   ========================================================= */
:root {
    --ink-900: #07131a;
    --ink-800: #0c1e27;
    --ink-700: #163540;
    --text: #152932;
    --text-2: #586d78;
    --text-3: #8798a1;
    --line: #e4ecef;
    --line-2: #d3e0e5;
    --bg: #f3f7f9;
    --bg-deep: #eef4f6;
    --surface: #ffffff;
    --surface-2: #f8fbfc;

    --brand: #0f9f89;
    --brand-2: #17c3a5;
    --brand-3: #4be6c8;
    --brand-soft: #e6faf5;
    --blue: #2f7cf6;
    --blue-soft: #eaf2ff;
    --violet: #7a6cf0;
    --violet-soft: #f0eeff;
    --amber: #e89a2f;
    --amber-soft: #fff5e4;
    --rose: #ea5468;
    --rose-soft: #ffedf0;
    --cyan: #0fb0d1;
    --cyan-soft: #e6f9fd;
    --indigo: #5468d9;
    --indigo-soft: #edf0ff;
    --slate: #6b7f8a;
    --slate-soft: #eef3f5;

    --shadow-xs: 0 1px 2px rgba(11, 38, 48, .05);
    --shadow-sm: 0 2px 6px rgba(11, 38, 48, .05), 0 1px 2px rgba(11, 38, 48, .04);
    --shadow-md: 0 12px 28px -18px rgba(7, 35, 45, .35), 0 2px 8px rgba(7, 35, 45, .04);
    --shadow-lg: 0 30px 70px -30px rgba(5, 28, 38, .45), 0 4px 18px rgba(5, 28, 38, .06);
    --shadow-xl: 0 48px 100px -32px rgba(3, 20, 28, .55), 0 8px 30px rgba(3, 20, 28, .1);

    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --sidebar-w: 272px;
    --sidebar-collapsed: 84px;
    --topbar-h: 70px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --mono: "SFMono-Regular", ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 650; letter-spacing: -.02em; color: var(--text); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }

::selection { background: rgba(23, 195, 165, .25); }

* { scrollbar-width: thin; scrollbar-color: #cbd9de transparent; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #cbd9de; border-radius: 20px; }
*::-webkit-scrollbar-thumb:hover { background: #aec2c9; }

.icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
}
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--mono); letter-spacing: -.01em; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.flex { display: flex; }
.between { justify-content: space-between; }
.center { align-items: center; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.grow { flex: 1; }
.hidden { display: none !important; }
.text-right { text-align: right; }
.text-center { text-align: center; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.85); }
}
@keyframes drawLine {
    from { stroke-dashoffset: 600; }
    to { stroke-dashoffset: 0; }
}

.skeleton {
    background: linear-gradient(90deg, #eef3f5 25%, #f7fafb 37%, #eef3f5 63%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: var(--radius);
}
.sk-card { height: 112px; }
.sk-panel { height: 420px; margin-top: 18px; }
.loading-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 46px 20px;
    color: var(--text-2);
    text-align: center;
}
.empty-state h3 { font-size: 15px; }
.empty-state p { font-size: 13px; color: var(--text-3); max-width: 420px; }
.empty-icon {
    width: 54px; height: 54px; border-radius: 16px;
    display: grid; place-items: center;
    background: var(--slate-soft); color: var(--slate);
    margin-bottom: 4px;
}
.empty-icon .icon { width: 24px; height: 24px; }
.empty-large { padding: 110px 20px; }
.empty-large .empty-icon { width: 74px; height: 74px; border-radius: 20px; }
.empty-large .empty-icon .icon { width: 32px; height: 32px; }
.empty-large h3 { font-size: 20px; }
.empty-large p { font-size: 14px; }

.loading-block { padding: 60px 0; text-align: center; color: var(--text-3); font-size: 13px; }
.spinner {
    width: 22px; height: 22px;
    border: 2px solid rgba(15, 159, 137, .18);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.section-gap { margin-top: 18px; }

@media (max-width: 1200px) {
    .loading-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .loading-grid { grid-template-columns: 1fr; }
}