/* =========================================================
   苗境实时监控系统 · 设计系统基础层
   风格：青境 Verdant Command —— 翡翠绿 × 琥珀 × 墨玉深色导航
   研发单位：孔涵琳
   ========================================================= */

:root {
    /* 主色系 */
    --brand:          #0F9B6C;
    --brand-600:      #0C845B;
    --brand-700:      #076B49;
    --brand-300:      #6FD3AF;
    --brand-100:      #DCF3EA;
    --brand-50:       #F0FAF6;

    --accent:         #E09B2D;
    --accent-100:     #FCF1DC;

    --cyan:           #1C8CA8;
    --cyan-100:       #E1F1F6;

    --danger:         #D9534F;
    --danger-100:     #FCE9E8;
    --warn:           #E08A2D;
    --warn-100:       #FDF0DF;
    --info:           #3E7BD6;
    --info-100:       #E6EEFB;
    --purple:         #7A5CD6;
    --purple-100:     #EFEAFB;

    /* 中性色 */
    --ink:            #12231D;
    --text:           #1D332B;
    --text-2:         #4C6A5E;
    --text-3:         #83998F;
    --text-4:         #A9BAB3;
    --line:           #DCE7E1;
    --line-2:         #EAF1ED;
    --bg:             #EDF3F0;
    --bg-2:           #F6FAF8;
    --white:          #FFFFFF;

    /* 深色导航 */
    --nav-1:          #06231C;
    --nav-2:          #0A3226;
    --nav-3:          #0E3D2E;
    --nav-text:       #A9C6BA;
    --nav-text-on:    #FFFFFF;

    /* 尺寸 */
    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius:    13px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    --sidebar-w: 252px;
    --sidebar-w-mini: 74px;
    --topbar-h: 62px;

    /* 阴影层级 */
    --sh-1: 0 1px 2px rgba(15, 55, 42, .05), 0 1px 1px rgba(15, 55, 42, .04);
    --sh-2: 0 4px 14px rgba(15, 55, 42, .07), 0 1px 3px rgba(15, 55, 42, .05);
    --sh-3: 0 12px 32px rgba(15, 55, 42, .12), 0 3px 8px rgba(15, 55, 42, .06);
    --sh-4: 0 26px 60px rgba(8, 34, 26, .22), 0 8px 20px rgba(8, 34, 26, .12);
    --sh-brand: 0 8px 22px rgba(15, 155, 108, .26);

    --ease: cubic-bezier(.22, .68, .36, 1);
}

/* ===================== 重置 ===================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
    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, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--brand-600); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--brand); }
img { max-width: 100%; display: block; border: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; outline: none; }
button { cursor: pointer; border: 0; background: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C3D5CD; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #A6BFB5; }

/* 选中色 */
::selection { background: var(--brand-300); color: #04231A; }

/* ===================== 排版 ===================== */
.t-h1 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.t-h2 { font-size: 18px; font-weight: 700; letter-spacing: -.2px; }
.t-h3 { font-size: 15px; font-weight: 700; }
.t-sm { font-size: 13px; }
.t-xs { font-size: 12px; }
.t-muted  { color: var(--text-3); }
.t-muted2 { color: var(--text-2); }
.t-brand  { color: var(--brand-600); }
.t-danger { color: var(--danger); }
.t-warn   { color: var(--warn); }
.t-mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.t-num  { font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.t-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-center { text-align: center; }
.t-right  { text-align: right; }

/* ===================== 布局工具 ===================== */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; min-width: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.flex-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; }
.mt-0{margin-top: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}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}
.p-0{padding:0}.p-12{padding:12px}.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}
.w-full { width: 100%; }
.h-full { height: 100%; }
.pointer { cursor: pointer; }
.nowrap { white-space: nowrap; }
.relative { position: relative; }
.hidden { display: none !important; }

/* 栅格 */
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-auto-lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

@media (max-width: 1400px) {
    .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .grid-6, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================== 动画 ===================== */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn {
    from { opacity: 0; transform: translateY(18px) scale(.975); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(15, 155, 108, .45); }
    70%  { box-shadow: 0 0 0 10px rgba(15, 155, 108, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 155, 108, 0); }
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.72); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
    0%   { background-position: -460px 0; }
    100% { background-position: 460px 0; }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(38px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.anim-up { animation: fadeUp .42s var(--ease) both; }
.anim-in { animation: fadeIn .3s var(--ease) both; }

/* 骨架屏 */
.skeleton {
    background: linear-gradient(90deg, #E8F0EC 25%, #F4F9F6 50%, #E8F0EC 75%);
    background-size: 460px 100%;
    animation: shimmer 1.3s infinite linear;
    border-radius: var(--radius-xs);
}

/* 空状态 */
.empty {
    padding: 52px 20px;
    text-align: center;
    color: var(--text-3);
}
.empty i { font-size: 40px; color: var(--text-4); display: block; margin-bottom: 12px; }
.empty p { font-size: 13px; }

/* 分隔线 */
.divider { height: 1px; background: var(--line-2); margin: 16px 0; }
.divider-v { width: 1px; align-self: stretch; background: var(--line-2); margin: 0 12px; }