/* ============================================================
 * 玉竹工业ERP系统 - 现代化 UI 设计系统
 * 设计风格：深色侧边栏 + 浅色内容区 + 蓝青渐变主色
 * 兼容所有现有类名：.cards .card .panel .table-wrap .tag .actions
 *                  .danger .muted .metric .login .screen-board 等
 * ============================================================ */

/* ---------- 设计变量 ---------- */
:root{
  /* 主色系 */
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --cyan:#06b6d4;
  --cyan-light:#67e8f9;
  --grad:linear-gradient(135deg,#2563eb 0%,#06b6d4 100%);

  /* 中性色 */
  --bg:#f1f5f9;
  --bg-soft:#f8fafc;
  --panel:#ffffff;
  --line:#e2e8f0;
  --line-soft:#f1f5f9;
  --text:#0f172a;
  --text-2:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;

  /* 侧边栏深色主题 */
  --side-bg:#1e293b;
  --side-bg-2:#0f172a;
  --side-text:#cbd5e1;
  --side-text-active:#ffffff;
  --side-group:#e2e8f0;
  --side-hover:rgba(255,255,255,.06);
  --side-active:rgba(59,130,246,.16);
  --side-active-color:#3b82f6;
  --side-border:rgba(148,163,184,.12);

  /* 语义色 */
  --green:#10b981;
  --green-bg:#ecfdf5;
  --orange:#f59e0b;
  --orange-bg:#fffbeb;
  --red:#ef4444;
  --red-bg:#fef2f2;
  --yellow:#eab308;

  /* 阴影 */
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 4px 12px rgba(15,23,42,.08);
  --shadow-lg:0 12px 32px rgba(15,23,42,.12);

  /* 圆角 */
  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:20px;

  /* 布局 */
  --sidebar-w:248px;
  --sidebar-w-collapsed:64px;
  --topbar-h:64px;
}

/* ---------- 基础重置 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei','PingFang SC',sans-serif;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
code{background:#f1f5f9;padding:2px 6px;border-radius:4px;font-family:'Consolas','Monaco',monospace;font-size:13px}

/* ---------- 侧边栏 ---------- */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:var(--side-bg);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  z-index:100;
  -webkit-transition:width .25s ease;transition:width .25s ease;
  overflow:hidden;
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed)}
.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .group-label,
.sidebar.collapsed .nav-group-items,
.sidebar.collapsed .group-arrow,
.sidebar.collapsed .sidebar-collapse-btn{display:none}
.sidebar.collapsed .sidebar-expand-btn{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:.7}
.sidebar.collapsed .nav-item{
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  padding:9px 0;
}
.sidebar.collapsed .nav-icon{width:20px;height:20px}
.sidebar.collapsed .brand{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.sidebar.collapsed .sidebar-header{padding:20px 12px 16px}
.sidebar.collapsed .nav-group{border-left:none;padding-left:0}
.sidebar.collapsed .nav-group-title{
  padding:14px 0 8px;cursor:default;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
}

.sidebar-header{
  padding:18px 18px 14px;
  border-bottom:1px solid var(--side-border);
  position:relative;
  -webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;
}
.brand{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px}
.brand-logo{
  width:40px;height:40px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;
  background:-webkit-linear-gradient(135deg,#2563eb 0%,#06b6d4 100%);
  background:linear-gradient(135deg,#2563eb 0%,#06b6d4 100%);
  border-radius:10px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  color:#fff;font-size:20px;font-weight:700;
  box-shadow:0 4px 12px rgba(37,99,235,.4);
  line-height:1;
}
.brand-text h1{color:#fff;font-size:16px;font-weight:700;line-height:1.2;margin:0}
.brand-text span{color:var(--muted-2);font-size:12px;display:block}

.sidebar-collapse-btn,
.sidebar-expand-btn{
  position:absolute;right:6px;top:50%;
  -webkit-transform:translateY(-50%);transform:translateY(-50%);
  background:transparent;border:none;
  color:var(--side-group);border-radius:4px;
  width:20px;height:20px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  cursor:pointer;-webkit-transition:all .15s ease;transition:all .15s ease;
  padding:0;margin:0;opacity:.5;
}
.sidebar-collapse-btn:hover,
.sidebar-expand-btn:hover{background:var(--side-hover);color:#fff;opacity:1}
.sidebar-expand-btn{display:none}
.main-expanded{margin-left:var(--sidebar-w-collapsed)!important}

.sidebar-nav{
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  overflow-y:auto;overflow-x:hidden;
  padding:8px 0 24px;
  scrollbar-width:thin;scrollbar-color:#334155 transparent;
}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}

.nav-group{
  margin-bottom:4px;
  border-left:3px solid transparent;
  padding-left:0;
  -webkit-transition:border-color .18s ease;transition:border-color .18s ease;
}
.nav-group.active-group{
  border-left-color:var(--side-active,#3b82f6);
}
.nav-group-title{
  padding:18px 18px 10px 16px;
  color:#ffffff;
  font-size:16px;font-weight:700;
  letter-spacing:0;
  text-transform:none;
  cursor:pointer;
  user-select:none;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  -webkit-transition:color .15s ease;transition:color .15s ease;
}
.nav-group-title:hover{color:#67e8f9}
.nav-group-title .group-label{
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  font-size:16px;font-weight:700;color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.nav-group-title .group-arrow{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  width:20px;height:20px;color:#94a3b8;
  -webkit-transition:transform .2s ease,color .15s ease;transition:transform .2s ease,color .15s ease;
}
.nav-group-title:hover .group-arrow{color:#fff}
.nav-group.collapsed .group-arrow{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}
.nav-group.collapsed .nav-group-items{display:none}
.nav-item{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;
  padding:8px 16px 8px 20px;
  border-radius:0;
  color:var(--side-text,#cbd5e1);
  font-size:13px;font-weight:400;
  margin-bottom:0;
  -webkit-transition:background .15s ease,color .15s ease;transition:background .15s ease,color .15s ease;
  line-height:1.4;
  position:relative;
}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.active{background:var(--side-active,rgba(59,130,246,.18));color:#fff;font-weight:600}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--side-active-color,#3b82f6);
}
.nav-icon{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;
  color:#94a3b8;
  width:18px;height:18px;
}
.nav-icon svg{display:block}
.nav-item:hover .nav-icon{color:#fff}
.nav-item.active .nav-icon{color:var(--side-active-color,#3b82f6)}
.nav-label{
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:13px;
}

.nav-item[href="/logout"]:hover{background:rgba(239,68,68,.18);color:#fca5a5}

/* 页面头新增按钮 */
.page-header-actions{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}
.btn-primary{
  display:inline-block;padding:8px 20px;
  border:none;border-radius:8px;
  background:linear-gradient(135deg,#1598d8,#52c7f7);
  color:#fff;font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:none;
  -webkit-transition:all .2s ease;transition:all .2s ease;
}
.btn-primary:hover{
  -webkit-transform:translateY(-1px);transform:translateY(-1px);
  -webkit-box-shadow:0 4px 12px rgba(21,152,216,.3);box-shadow:0 4px 12px rgba(21,152,216,.3);
}
.btn-default{
  display:inline-block;padding:8px 20px;
  border:1px solid var(--side-border);border-radius:8px;
  background:var(--bg-soft);color:var(--text);
  font-size:13px;font-weight:500;
  cursor:pointer;text-decoration:none;
  -webkit-transition:all .2s ease;transition:all .2s ease;
}
.btn-default:hover{
  background:var(--bg-hover,#eef2f7);
  -webkit-transform:translateY(-1px);transform:translateY(-1px);
}

/* 关联联动锁定字段样式 */
.erp-form-field[data-locked="1"] label::after{
  content:" 🔒";font-size:11px;color:var(--muted);
}
.erp-form-field select[data-linked="1"],
.erp-form-field input[data-linked="1"]{
  background:var(--bg-soft)!important;
  opacity:.75;cursor:not-allowed;
}
.erp-form-field select:disabled{
  background:var(--bg-soft)!important;
  opacity:.75;cursor:not-allowed;
}

.sidebar-footer{
  -webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;
  padding:14px 20px;
  border-top:1px solid var(--side-border);
  color:var(--muted-2);font-size:11px;text-align:center;
}

/* ---------- 主内容区 ---------- */
.main{
  margin-left:var(--sidebar-w);
  min-height:100vh;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  -webkit-transition:margin-left .25s ease;transition:margin-left .25s ease;
}
.topbar{
  height:var(--topbar-h);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  padding:0 24px;
  position:-webkit-sticky;position:sticky;top:0;z-index:50;
  -webkit-transition:margin-left .25s ease;transition:margin-left .25s ease;
}
.topbar-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px}
.topbar-left h2{font-size:17px;font-weight:700;color:var(--text);margin:0}
.topbar-right{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px}
.menu-toggle{
  display:none;
  background:transparent;border:none;cursor:pointer;
  color:var(--text-2);padding:6px;border-radius:8px;
}
.menu-toggle:hover{background:var(--line-soft)}

.user-chip{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;
  padding:6px 12px 6px 6px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:999px;
}
.user-avatar{
  width:28px;height:28px;border-radius:50%;
  background:-webkit-linear-gradient(135deg,#2563eb 0%,#06b6d4 100%);
  background:linear-gradient(135deg,#2563eb 0%,#06b6d4 100%);
  color:#fff;font-size:13px;font-weight:600;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;
}
.user-name{font-size:13px;font-weight:600;color:var(--text-2)}
.user-role-tag{
  font-size:11px;padding:2px 8px;
  background:var(--blue);color:#fff;
  border-radius:999px;font-weight:500;
}

.content{padding:24px;-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:1600px;width:100%;margin:0 auto}

/* ---------- 卡片网格（兼容原 .cards .card） ---------- */
.cards{
  display:-webkit-box;display:-ms-flexbox;display:grid;
  -ms-grid-columns:1fr 16px 1fr;grid-template-columns:repeat(2,1fr);
  gap:16px;margin-bottom:20px;
}
@supports (grid-template-columns:repeat(4,1fr)){
  .cards{grid-template-columns:repeat(4,1fr)}
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px;
  box-shadow:var(--shadow-sm);
  -webkit-transition:box-shadow .2s ease,-webkit-transform .2s ease;transition:box-shadow .2s ease,transform .2s ease;
}
.card:hover{box-shadow:var(--shadow);-webkit-transform:translateY(-2px);transform:translateY(-2px)}
.card label{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.card strong{font-size:28px;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.card .metric{font-size:32px;font-weight:800;color:var(--blue);letter-spacing:-.02em}

/* ---------- 面板（兼容原 .panel） ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:22px;
  margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
.panel h2{font-size:17px;font-weight:700;margin-bottom:6px;color:var(--text)}
.panel h3{font-size:15px;font-weight:600;margin-bottom:14px;color:var(--text);padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.panel p{color:var(--text-2);margin-bottom:8px}
.panel p.muted{color:var(--muted);font-size:13px}

/* ---------- 网格布局（兼容原 .grid-2 .grid-3） ---------- */
.grid-2{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px}
.grid-2 > *{-webkit-box-flex:1;-ms-flex:1 1 45%;flex:1 1 45%;min-width:45%}
@supports (display:grid){.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-2 > *{min-width:0}}
.grid-3{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px}
.grid-3 > *{-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;min-width:30%}
@supports (display:grid){.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid-3 > *{min-width:0}}

/* ---------- 标签（兼容原 .tag） ---------- */
.tag{
  display:inline-block;padding:3px 10px;
  border-radius:999px;font-size:12px;font-weight:600;
  background:#eff6ff;color:#2563eb;
}
.tag.green{background:var(--green-bg);color:#047857}
.tag.orange{background:var(--orange-bg);color:#b45309}
.tag.red{background:var(--red-bg);color:#be123c}
.tag.yellow{background:#fefce8;color:#a16207}

/* ---------- 表格（兼容原 .table-wrap table） ---------- */
.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--panel);
  margin-top:4px;
}
table{width:100%;border-collapse:collapse;min-width:720px;font-size:13.5px}
thead th{
  background:var(--bg-soft);
  color:var(--text-2);
  font-weight:600;
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  position:sticky;top:0;
}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--text-2)}
tbody tr:hover{background:#f8fafc}
tbody tr:last-child td{border-bottom:none}
.muted{color:var(--muted)}

/* ---------- 表单（兼容原 input/button/select/textarea） ---------- */
input,select,textarea{
  width:100%;padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:14px;font-family:inherit;
  background:var(--panel);color:var(--text);
  margin:6px 0;transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input[type="hidden"]{display:none}
input[type="checkbox"],input[type="radio"]{width:auto}
select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;appearance:none;-webkit-appearance:none}

button{
  width:100%;padding:10px 18px;
  background:var(--grad);color:#fff;
  border:none;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:opacity .15s ease,transform .1s ease;
  margin:6px 0;
}
button:hover{opacity:.92}
button:active{transform:scale(.98)}
button[type="button"]{width:auto}

/* ---------- 操作按钮组（兼容原 .actions） ---------- */
.actions{display:-webkit-box;display:-ms-flexbox;display:flex;gap:6px;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.actions form{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}
.actions button,.actions a button{
  width:auto;margin:0;padding:7px 14px;
  font-size:13px;
}
.danger{
  background:#fef2f2;color:#be123c;border:1px solid #fecdd3;
}
.danger:hover{background:#fee2e2}
.red{color:#be123c}

/* ---------- 登录页（兼容原 .login .login-card） ---------- */
.login{
  min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  background:-webkit-linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#2563eb 100%);
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#2563eb 100%);
  padding:20px;
}
.login-card{
  width:100%;max-width:400px;
  background:var(--panel);
  border-radius:var(--r-xl);
  padding:36px 32px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.login-card h1{font-size:22px;font-weight:700;margin-bottom:6px;text-align:center;color:var(--text)}
.login-card .subtitle{text-align:center;color:var(--muted);margin-bottom:24px;font-size:14px}
.login-card .brand-logo{margin:0 auto 16px;width:56px;height:56px;font-size:28px}
.login-card form{display:block}

/* ---------- 大数据屏（兼容原 .screen-board） ---------- */
.screen-board{
  background:-webkit-linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);
  color:#e0f2fe;
  border-radius:var(--r-xl);
  padding:24px;
  box-shadow:0 16px 48px rgba(15,23,42,.4);
  min-height:calc(100vh - var(--topbar-h) - 48px);
}
.screen-board .card{
  background:rgba(30,41,59,.6);
  border-color:rgba(103,232,249,.2);
  color:#e0f2fe;
  backdrop-filter:blur(8px);
}
.screen-board .card label{color:#67e8f9}
.screen-board .card strong,.screen-board .metric{color:#67e8fe}

/* ---------- 监控页面（多设备实时预览） ---------- */
.monitor-tabs{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  gap:0;margin-bottom:16px;border-bottom:2px solid var(--line);
}
.monitor-tab{
  padding:10px 20px;border:none;background:none;
  font-size:14px;font-weight:600;cursor:pointer;
  color:var(--text-3);border-bottom:3px solid transparent;
  -webkit-transition:all .2s;transition:all .2s;
  margin-bottom:-2px;
}
.monitor-tab:hover{color:var(--text)}
.monitor-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.monitor-tab-count{
  display:inline-block;background:var(--bg-soft);
  color:var(--text-3);font-size:11px;font-weight:700;
  padding:1px 7px;border-radius:10px;margin-left:4px;
}
.monitor-tab.active .monitor-tab-count{background:#dbeafe;color:var(--blue)}

/* 摄像头网格 */
.camera-grid{
  display:-webkit-box;display:-ms-flexbox;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:16px;
}
.camera-tile-card{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;
  -webkit-transition:box-shadow .2s;transition:box-shadow .2s;
}
.camera-tile-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.cam-video-wrap{
  position:relative;width:100%;height:200px;
  background:#1a1a1a;overflow:hidden;
}
.cam-video,.cam-snapshot{
  width:100%;height:100%;object-fit:cover;display:block;
}
.cam-no-signal{
  width:100%;height:100%;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  color:#888;font-size:13px;
}
.cam-no-signal-icon{font-size:36px;margin-bottom:6px;opacity:.5}
.cam-live-badge{
  position:absolute;top:8px;left:8px;
  background:rgba(220,38,38,.9);color:#fff;
  font-size:10px;font-weight:700;padding:2px 8px;
  border-radius:3px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;
}
.cam-live-dot{
  width:6px;height:6px;background:#fff;border-radius:50%;
  -webkit-animation:camPulse 1.5s infinite;animation:camPulse 1.5s infinite;
}
@-webkit-keyframes camPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes camPulse{0%,100%{opacity:1}50%{opacity:.3}}
.cam-fullscreen-btn{
  position:absolute;top:8px;right:8px;
  background:rgba(0,0,0,.6);color:#fff;border:none;
  width:30px;height:30px;border-radius:5px;cursor:pointer;
  font-size:16px;line-height:1;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
}
.cam-fullscreen-btn:hover{background:rgba(0,0,0,.8)}
.cam-info{padding:10px 14px}
.cam-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.cam-meta{font-size:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;-ms-flex-wrap:wrap;flex-wrap:wrap}
.cam-meta2{font-size:11px;color:var(--text-3);margin-top:3px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap}

/* 地磅网格 */
.weighbridge-grid{
  display:-webkit-box;display:-ms-flexbox;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;
}
.wb-tile-card{
  background:var(--bg-card);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;
  -webkit-transition:box-shadow .2s;transition:box-shadow .2s;
}
.wb-tile-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.wb-display{
  background:-webkit-linear-gradient(135deg,#0f172a,#1e293b);
  background:linear-gradient(135deg,#0f172a,#1e293b);
  padding:24px;text-align:center;color:#fff;
}
.wb-display-label{font-size:12px;color:#94a3b8;margin-bottom:8px}
.wb-weight-value{
  font-size:42px;font-weight:800;color:#22d3ee;
  font-family:'Courier New',monospace;letter-spacing:2px;
  text-shadow:0 0 20px rgba(34,211,238,.3);
}
.wb-weight-unit{font-size:14px;color:#94a3b8;margin-top:4px}
.wb-info{padding:10px 14px}
.wb-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.wb-meta{font-size:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;-ms-flex-wrap:wrap;flex-wrap:wrap}
.wb-meta2{font-size:11px;color:var(--text-3);margin-top:3px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-ms-flex-wrap:wrap;flex-wrap:wrap}
.wb-status{font-size:12px;font-weight:600}
.wb-status.online{color:#10b981}
.wb-status.offline{color:#ef4444}

/* 兼容旧 .camera-tile */
.camera-tile{
  min-height:140px;
  background:-webkit-linear-gradient(135deg,#f0f9ff,#ffffff);
  background:linear-gradient(135deg,#f0f9ff,#ffffff);
  border:1px solid #bae6fd;
  border-radius:var(--r);
  padding:16px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -webkit-transition:box-shadow .2s;transition:box-shadow .2s;
}
.camera-tile:hover{box-shadow:var(--shadow)}

/* ---------- 响应式 ---------- */
.sidebar-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(15,23,42,.5);
  z-index:99;
  backdrop-filter:blur(2px);
}
.sidebar-overlay.show{display:block}

@media(max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:translateX(0)}
  .main{margin-left:0}
  .menu-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
  .content{padding:16px}
  .cards{grid-template-columns:1fr 1fr;gap:12px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .card strong{font-size:24px}
  .topbar{padding:0 16px}
  .user-name{display:none}
  .login-card{padding:28px 22px}
}

@media(max-width:480px){
  .cards{grid-template-columns:1fr}
  .panel{padding:16px}
  table{font-size:12.5px}
  thead th,tbody td{padding:9px 10px}
}

/* ---------- 工具类 ---------- */
.text-center{text-align:center}
.text-right{text-align:right}
.mt-0{margin-top:0}
.mt-16{margin-top:16px}
.mb-0{margin-bottom:0}
.mb-16{margin-bottom:16px}

/* ---------- 表单网格（业务页面通用） ---------- */
.form-grid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px}
.form-grid > .form-field{-webkit-box-flex:1;-ms-flex:1 1 220px;flex:1 1 220px;min-width:220px}
@supports (display:grid){.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.form-grid > .form-field{min-width:0}}
.form-field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.form-field label.field-label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600}
.form-field input,.form-field select,.form-field textarea{margin:0}
.form-actions{margin-top:14px}

/* ---------- 设置页专用 ---------- */
.settings-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.settings-card h3{font-size:15px;font-weight:700;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.settings-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.settings-row:last-child{border-bottom:none}
.settings-row .label{font-size:14px;font-weight:600;color:var(--text)}
.settings-row .desc{font-size:12px;color:var(--muted);margin-top:2px}
.settings-row .control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px}
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#cbd5e1;border-radius:999px;-webkit-transition:.2s;transition:.2s}
.slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;-webkit-transition:.2s;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .slider{background:var(--blue)}
.switch input:checked + .slider:before{-webkit-transform:translateX(20px);transform:translateX(20px)}

/* ---------- 状态徽章 ---------- */
.badge{display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600}
.badge-success{background:var(--green-bg);color:#047857}
.badge-warning{background:var(--orange-bg);color:#b45309}
.badge-danger{background:var(--red-bg);color:#be123c}
.badge-info{background:#eff6ff;color:#2563eb}
.badge-primary{background:#ede9fe;color:#7c3aed}
.badge-default{background:var(--bg-soft);color:var(--muted)}

/* ---------- 页面头标题 ---------- */
.page-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:20px;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px}
.page-header .page-title{font-size:20px;font-weight:700;color:var(--text)}
.page-header .page-desc{font-size:13px;color:var(--muted);margin-top:2px}
.page-header .page-actions{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}

/* ---------- 搜索栏 ---------- */
.search-bar{display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;margin-bottom:16px;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.search-bar input{width:auto;min-width:200px;margin:0}
.search-bar select{width:auto;min-width:140px;margin:0}
.search-bar .search-btn{width:auto;margin:0;padding:9px 20px}

/* ---------- 空状态 ---------- */
.empty-state{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-state .empty-icon{font-size:48px;margin-bottom:12px;opacity:.6}
.empty-state .empty-text{font-size:14px}

/* ---------- 统计卡片增强 ---------- */
.stat-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px;
  box-shadow:var(--shadow-sm);
  -webkit-transition:all .2s ease;transition:all .2s ease;
  position:relative;
  overflow:hidden;
}
.stat-card:hover{box-shadow:var(--shadow);-webkit-transform:translateY(-2px);transform:translateY(-2px)}
.stat-card .stat-icon-wrap{
  width:44px;height:44px;border-radius:12px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  font-size:22px;margin-bottom:12px;color:#fff;
}
.stat-card .stat-icon-wrap svg{width:22px;height:22px;display:block}
.stat-card .stat-label{color:var(--muted);font-size:13px;margin-bottom:6px}
.stat-card .stat-value{font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.stat-card .stat-trend{font-size:12px;margin-top:6px}
.stat-card .stat-trend.up{color:var(--green)}
.stat-card .stat-trend.down{color:var(--red)}
.stat-card .stat-unit{font-size:11px;color:var(--muted);margin-top:2px}
.stat-card.accent-blue{border-top:3px solid var(--blue)}
.stat-card.accent-blue .stat-icon-wrap{background:#eff6ff;color:var(--blue)}
.stat-card.accent-blue .stat-value{color:var(--blue)}
.stat-card.accent-green{border-top:3px solid var(--green)}
.stat-card.accent-green .stat-icon-wrap{background:var(--green-bg);color:var(--green)}
.stat-card.accent-green .stat-value{color:var(--green)}
.stat-card.accent-cyan{border-top:3px solid var(--cyan)}
.stat-card.accent-cyan .stat-icon-wrap{background:#ecfeff;color:var(--cyan)}
.stat-card.accent-cyan .stat-value{color:var(--cyan)}
.stat-card.accent-orange{border-top:3px solid var(--orange)}
.stat-card.accent-orange .stat-icon-wrap{background:var(--orange-bg);color:var(--orange)}
.stat-card.accent-orange .stat-value{color:var(--orange)}

/* ---------- 快捷入口网格 ---------- */
.quick-grid{
  display:-webkit-box;display:-ms-flexbox;display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
@supports (grid-template-columns:repeat(auto-fill,minmax(140px,1fr))){
  .quick-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
.quick-link{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  padding:18px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-soft);
  -webkit-transition:all .15s ease;transition:all .15s ease;text-align:center;
}
.quick-link:hover{border-color:var(--blue);background:#eff6ff;text-decoration:none}
.quick-link .quick-icon{font-size:28px;margin-bottom:8px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:var(--blue)}
.quick-link .quick-icon svg{width:28px;height:28px;display:block}
.quick-link .quick-text{font-size:13px;font-weight:600;color:var(--text-2)}

/* ---------- 面包屑导航 ---------- */
.breadcrumb{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-bottom:12px}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb .sep{color:var(--muted-2)}

/* ---------- 通知提示条 ---------- */
.alert{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:12px;font-size:13px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:8px}
.alert-success{background:var(--green-bg);color:#047857;border:1px solid #a7f3d0}
.alert-error{background:var(--red-bg);color:#be123c;border:1px solid #fecdd3}
.alert-warning{background:var(--orange-bg);color:#b45309;border:1px solid #fde68a}
.alert-info{background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}

/* ---------- 数据表格行状态色 ---------- */
tbody tr.row-success{background:#f0fdf4}
tbody tr.row-warning{background:#fffbeb}
tbody tr.row-danger{background:#fef2f2}

/* ---------- 分页器 ---------- */
.pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:16px;-ms-flex-wrap:wrap;flex-wrap:wrap}
.pagination a,.pagination span{
  padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13px;color:var(--text-2);background:var(--panel);cursor:pointer;
  -webkit-transition:all .15s ease;transition:all .15s ease;text-decoration:none;
}
.pagination a:hover{border-color:var(--blue);color:var(--blue)}
.pagination .current{background:var(--grad);color:#fff;border-color:transparent}
.pagination .disabled{color:var(--muted-2);cursor:not-allowed;opacity:.6}

/* ---------- 模态框 ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:200;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal-box{background:var(--panel);border-radius:var(--r-lg);padding:24px;max-width:520px;width:90%;box-shadow:var(--shadow-lg)}
.modal-box h3{font-size:17px;font-weight:700;margin-bottom:14px}

/* ---------- 标签页 ---------- */
.tabs{display:-webkit-box;display:-ms-flexbox;display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:16px}
.tab{padding:10px 20px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s ease}
.tab:hover{color:var(--text)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}

/* ---------- 进度条 ---------- */
.progress{height:8px;background:var(--line);border-radius:999px;overflow:hidden}
.progress-bar{height:100%;background:var(--grad);border-radius:999px;transition:width .3s ease}

/* ---------- 按钮变体 ---------- */
button.secondary{background:var(--bg-soft);color:var(--text-2);border:1px solid var(--line)}
button.secondary:hover{background:var(--line-soft)}
button.success{background:-webkit-linear-gradient(135deg,#10b981,#059669);background:linear-gradient(135deg,#10b981,#059669)}
button.warning{background:-webkit-linear-gradient(135deg,#f59e0b,#d97706);background:linear-gradient(135deg,#f59e0b,#d97706)}

/* ---------- 站点选择器 ---------- */
.station-selector{
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;
  padding:6px 14px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13px;cursor:pointer;
}
.station-selector:hover{border-color:var(--blue)}
.station-selector .station-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}

/* ---------- 首页数据网格 ---------- */
.dashboard-grid{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;
  gap:14px;
}
.dashboard-grid > .stat-card{
  -webkit-box-flex:1;-ms-flex:1 1 200px;flex:1 1 200px;
  min-width:0;max-width:100%;
  -webkit-box-sizing:border-box;box-sizing:border-box;
  overflow:hidden;word-break:break-all;
}
@supports (display:grid){
  .dashboard-grid{
    display:grid;
    -ms-grid-columns:0 14px 1fr 14px 1fr 14px 1fr 14px 1fr;
    grid-template-columns:repeat(4,1fr);
  }
}
@media (min-width:1200px){
  @supports (display:grid){
    .dashboard-grid{grid-template-columns:repeat(6,1fr);-ms-grid-columns:0 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr}
  }
}
@media (min-width:900px) and (max-width:1199px){
  @supports (display:grid){
    .dashboard-grid{grid-template-columns:repeat(4,1fr)}
  }
}
@media (max-width:600px){
  @supports (display:grid){
    .dashboard-grid{grid-template-columns:repeat(2,1fr)}
  }
}
/* Auto-fill fallback (modern browsers) */
@supports (grid-template-columns:repeat(auto-fill,minmax(160px,1fr))){
  .dashboard-grid{
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  }
}
@media (min-width:1280px){
  .dashboard-grid{
    -ms-grid-columns:1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr 14px 1fr;grid-template-columns:repeat(6,1fr);
  }
}
@media (min-width:900px) and (max-width:1279px){
  .dashboard-grid{
    -ms-grid-columns:1fr 14px 1fr 14px 1fr 14px 1fr;grid-template-columns:repeat(4,1fr);
  }
}
@media (max-width:600px){
  .dashboard-grid{
    -ms-grid-columns:1fr 14px 1fr;grid-template-columns:repeat(2,1fr);
  }
}
.dashboard-grid .stat-card{padding:16px}
.dashboard-grid .stat-card .stat-icon-wrap{width:38px;height:38px;margin-bottom:8px}
.dashboard-grid .stat-card .stat-icon-wrap svg{width:20px;height:20px}
.dashboard-grid .stat-card .stat-label{font-size:12px;margin-bottom:4px}
.dashboard-grid .stat-card .stat-value{font-size:22px}
.dashboard-grid .stat-card .stat-unit{font-size:11px}
.stat-clickable{
  cursor:pointer;text-decoration:none;display:block;
  -webkit-transition:all .2s ease;transition:all .2s ease;
  color:inherit;
}
.stat-clickable:hover{
  -webkit-transform:translateY(-3px);transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(37,99,235,.15);
  border-color:var(--blue);
  text-decoration:none;
}
.stat-clickable .stat-unit{
  font-size:12px;color:var(--muted);margin-top:4px;
}
.stat-today .stat-unit{
  font-size:12px;color:var(--muted);margin-top:4px;
}
.stat-today{
  opacity:.9;
}

/* ---------- 大数据屏专用 ---------- */
.screen-fullscreen-btn{
  background:rgba(37,99,235,.3)!important;
  border:1px solid rgba(103,232,249,.4)!important;
  color:#67e8f9!important;
  padding:8px 16px;border-radius:8px;
  cursor:pointer;font-size:13px;font-weight:600;
  transition:all .2s ease;
}
.screen-fullscreen-btn:hover{background:rgba(37,99,235,.5)!important}

.chart-container{
  background:rgba(30,41,59,.6);
  border:1px solid rgba(103,232,249,.15);
  border-radius:12px;
  padding:20px;
  backdrop-filter:blur(8px);
}
.chart-container h4{
  color:#67e8f9;font-size:14px;font-weight:600;
  margin-bottom:14px;
}
.chart-canvas-wrap{
  position:relative;width:100%;height:220px;
}

.video-carousel{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;
  gap:12px;margin-top:12px;
}
.video-carousel > .video-tile{
  -webkit-box-flex:1;-ms-flex:1 1 22%;flex:1 1 22%;min-width:22%;
}
@supports (display:grid){
  .video-carousel{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .video-carousel > .video-tile{min-width:0}
}
.video-tile{
  position:relative;
  padding-top:56.25%;
  background:#000;border-radius:10px;overflow:hidden;
  border:1px solid rgba(103,232,249,.2);
}
@supports (aspect-ratio:16/9){
  .video-tile{padding-top:0;aspect-ratio:16/9}
}
.video-tile .video-label{
  position:absolute;top:8px;left:8px;
  background:rgba(0,0,0,.6);
  color:#67e8f9;font-size:12px;
  padding:3px 10px;border-radius:4px;
  z-index:2;
}
.video-tile .video-status{
  position:absolute;bottom:8px;right:8px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;
  background:rgba(0,0,0,.6);
  color:#fff;font-size:11px;
  padding:3px 8px;border-radius:4px;
  z-index:2;
}
.video-tile .video-status::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:#ef4444;animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- ERP表单增强 ---------- */
.erp-form{margin-bottom:0}
.erp-form-section{
  margin-bottom:20px;padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);
}
.erp-form-section:last-child{border-bottom:none}
.erp-form-section-title{
  font-size:14px;font-weight:700;color:var(--text);
  margin-bottom:12px;padding-left:10px;
  border-left:3px solid var(--blue);
}
.erp-form-grid{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;gap:14px;
}
.erp-form-grid > .erp-form-field{
  -webkit-box-flex:1;-ms-flex:1 1 240px;flex:1 1 240px;min-width:240px;
}
@supports (display:grid){
  .erp-form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
  .erp-form-grid > .erp-form-field{min-width:0}
}
/* 富文本/可视化编辑器单独占满整行 */
.erp-form-richtext-full,
.erp-form-itemslist-full{
  width:100%;margin-bottom:14px;min-width:0;
  -webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%;
}
.erp-form-richtext-full .erp-form-field,
.erp-form-itemslist-full .erp-form-field{
  width:100%;
}
.erp-form-richtext-full .shj-designer{
  width:100% !important;min-width:0;
}
.erp-form-itemslist-full .items-list-wrap{
  width:100%;
}

/* 数据屏设置业务模块列表 */
.bs-mod-list{
  display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;gap:10px;
}
.bs-mod-row{
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;
  padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);
  -webkit-box-flex:1;-ms-flex:1 1 280px;flex:1 1 280px;min-width:280px;
}
.bs-mod-check{
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;
  cursor:pointer;font-size:14px;color:var(--text);font-weight:600;
  -webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;
}
.bs-mod-check input[type=checkbox]{
  width:16px !important;height:16px;margin:0;cursor:pointer;accent-color:var(--blue);
}
.bs-mod-label{color:var(--text);font-size:14px;font-weight:600}
.bs-mod-pos{
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;
  padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);
  font-size:13px;color:var(--text);height:32px;
}
.erp-form-field{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.erp-form-field label{
  font-size:13px;font-weight:600;color:var(--text-2);
  margin-bottom:5px;
}
.erp-form-field label .required{color:var(--red);margin-left:2px}
.erp-form-field input,.erp-form-field select,.erp-form-field textarea{
  margin:0;padding:9px 12px;
  border:1px solid var(--line);border-radius:8px;
  font-size:14px;
}
.erp-form-field input:focus,.erp-form-field select:focus,.erp-form-field textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
  outline:none;
}
.erp-form-field .field-hint{
  font-size:11px;color:var(--muted-2);margin-top:4px;
}
.erp-form-actions{
  display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  margin-top:18px;padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.erp-form-actions button{width:auto;padding:10px 28px;margin:0}
.erp-form-actions a button{margin:0}

/* ---------- 组装/拆卸单 物料清单表格 ---------- */
.items-list-wrap{width:100%}
.items-list-table{
  width:100%;border-collapse:collapse;margin-bottom:8px;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
}
.items-list-table th{
  background:var(--bg-soft);padding:8px 10px;font-size:12px;
  text-align:left;color:var(--text-2);border-bottom:1px solid var(--line);
}
.items-list-table td{padding:6px 8px;border-bottom:1px solid var(--line)}
.items-list-table select,.items-list-table input{
  width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:4px;font-size:13px;
}
.items-list-del{
  background:#ef4444;color:#fff;border:none;padding:5px 10px;
  border-radius:4px;cursor:pointer;font-size:11px;white-space:nowrap;
}
.items-list-del:hover{background:#dc2626}
.items-list-add{
  background:var(--blue);color:#fff;border:none;padding:7px 16px;
  border-radius:4px;cursor:pointer;font-size:12px;margin-top:4px;
}
.items-list-add:hover{opacity:.85}

/* ---------- 合同附件上传 ---------- */
/* ---------- 合同附件 ---------- */
.attachment-grid{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;gap:14px;
  margin-top:14px;
}
.att-card{
  width:200px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:var(--bg-card);
  -webkit-transition:box-shadow .2s ease;transition:box-shadow .2s ease;
}
.att-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.att-thumb{
  width:100%;height:140px;background:var(--bg-soft);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  overflow:hidden;cursor:pointer;
}
.att-thumb img{
  max-width:100%;max-height:100%;object-fit:cover;
  -webkit-transition:-webkit-transform .2s;transition:transform .2s;
}
.att-thumb img:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}
.att-pdf-icon{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.att-pdf-icon:hover{opacity:.8}
.att-file-icon{font-size:40px}
.att-info{padding:8px 10px}
.att-name{
  font-size:13px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.att-meta{font-size:11px;color:var(--text-3);margin-top:2px}
.att-actions{
  padding:6px 10px 10px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;gap:4px;
}
.att-btn{
  display:inline-block;padding:4px 10px;border-radius:5px;
  font-size:11px;font-weight:600;cursor:pointer;
  text-decoration:none;border:none;-webkit-transition:all .15s;transition:all .15s;
}
.att-preview-btn{background:#eff6ff;color:#2563eb}
.att-preview-btn:hover{background:#dbeafe}
.att-download-btn{background:var(--green-bg);color:#047857}
.att-download-btn:hover{background:#d1fae5}
.att-del-btn{background:var(--red-bg);color:#be123c}
.att-del-btn:hover{background:#fee2e2}

/* 附件预览模态框 */
.att-modal{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.85);z-index:99999;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
}
.att-modal-header{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  padding:12px 20px;background:rgba(0,0,0,.5);color:#fff;
}
.att-modal-header span{font-size:15px;font-weight:600}
.att-modal-close{
  background:none;border:none;color:#fff;font-size:22px;
  cursor:pointer;padding:0 8px;line-height:1;
}
.att-modal-close:hover{color:#f87171}
.att-modal-body{
  -webkit-box-flex:1;-ms-flex:1;flex:1;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  padding:20px;overflow:auto;
}
.att-preview-img{max-width:90%;max-height:80vh;border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.att-preview-pdf{width:85%;height:80vh;border:none;border-radius:4px;background:#fff}
.att-modal-footer{
  padding:10px 20px;text-align:center;
  background:rgba(0,0,0,.5);
}

/* ---------- 审批按钮 ---------- */
.approval-btn{
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;
  padding:5px 12px;border-radius:6px;
  font-size:12px;font-weight:600;cursor:pointer;
  border:none;transition:all .15s ease;
}
.approval-btn.approve{background:var(--green-bg);color:#047857}
.approval-btn.approve:hover{background:#d1fae5}
.approval-btn.reject{background:var(--red-bg);color:#be123c}
.approval-btn.reject:hover{background:#fee2e2}
.approval-btn.submit{background:#eff6ff;color:#2563eb}
.approval-btn.submit:hover{background:#dbeafe}

/* ---------- 响应式补充 ---------- */
@media(max-width:768px){
  .search-bar input,.search-bar select{min-width:0;width:100%}
  .quick-grid{grid-template-columns:repeat(2,1fr)}
  .page-header{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
  .stat-card .stat-value{font-size:24px}
}

/* ============================================================
 * 数据大屏 - 深蓝科技风（参考图重构版）
 * 用于 /big-screen 路由
 * ============================================================ */
.bs-screen{
  background:-webkit-radial-gradient(ellipse at top,#0a2a5e 0%,#04143a 50%,#020a24 100%);
  background:radial-gradient(ellipse at top,#0a2a5e 0%,#04143a 50%,#020a24 100%);
  color:#e0f2fe;
  height:calc(100vh - var(--topbar-h) - 20px);
  padding:12px 14px 12px;
  border-radius:6px;
  position:relative;
  overflow:hidden;
  min-width:1400px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
}

/* ========== 顶部 ========== */
.bs-header{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  height:56px;padding:0 8px;margin-bottom:10px;
  position:relative;
}
.bs-header::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;
  background:-webkit-linear-gradient(90deg,transparent,rgba(103,232,249,.2),transparent);
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.2),transparent);
}
.bs-time{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;min-width:160px}
.bs-clock{font-family:'Consolas',monospace;font-size:26px;font-weight:700;color:#67e8f9;letter-spacing:.06em;text-shadow:0 0 10px rgba(103,232,249,.5)}
.bs-date{font-size:12px;color:rgba(224,242,254,.45)}
.bs-title-wrap{
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  gap:16px;
}
.bs-title-deco{
  width:80px;height:1px;
  background:-webkit-linear-gradient(90deg,transparent,#67e8f9);
  background:linear-gradient(90deg,transparent,#67e8f9);
}
.bs-title-deco-right{
  background:-webkit-linear-gradient(90deg,#67e8f9,transparent);
  background:linear-gradient(90deg,#67e8f9,transparent);
}
.bs-title{
  font-size:26px;font-weight:700;letter-spacing:.06em;
  background:-webkit-linear-gradient(180deg,#67e8f9 0%,#38bdf8 100%);
  background:linear-gradient(180deg,#67e8f9 0%,#38bdf8 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  text-shadow:0 0 20px rgba(103,232,249,.3);
  margin:0;white-space:nowrap;
}
.bs-actions{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
.bs-fullscreen-btn{
  background:-webkit-linear-gradient(135deg,rgba(37,99,235,.4),rgba(6,182,212,.4));
  background:linear-gradient(135deg,rgba(37,99,235,.4),rgba(6,182,212,.4));
  border:1px solid rgba(103,232,249,.4);
  color:#67e8f9;padding:6px 14px;border-radius:5px;
  cursor:pointer;font-size:12px;font-weight:600;width:auto;margin:0;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-transition:all .2s ease;transition:all .2s ease;
}
.bs-fullscreen-btn svg{width:14px;height:14px;margin-right:4px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}
.bs-fullscreen-btn:hover{
  background:-webkit-linear-gradient(135deg,rgba(37,99,235,.6),rgba(6,182,212,.6));
  background:linear-gradient(135deg,rgba(37,99,235,.6),rgba(6,182,212,.6));
  box-shadow:0 0 16px rgba(103,232,249,.4);
}
.bs-open-new{
  background:-webkit-linear-gradient(135deg,rgba(245,158,11,.4),rgba(239,68,68,.4));
  background:linear-gradient(135deg,rgba(245,158,11,.4),rgba(239,68,68,.4));
  border:1px solid rgba(245,158,11,.4);
  color:#fbbf24;padding:6px 14px;border-radius:5px;
  cursor:pointer;font-size:12px;font-weight:600;width:auto;margin:0;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-transition:all .2s ease;transition:all .2s ease;
}
.bs-open-new svg{width:14px;height:14px;margin-right:4px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}
.bs-open-new:hover{background:-webkit-linear-gradient(135deg,rgba(245,158,11,.6),rgba(239,68,68,.6));background:linear-gradient(135deg,rgba(245,158,11,.6),rgba(239,68,68,.6));box-shadow:0 0 16px rgba(245,158,11,.3)}

/* ========== 三栏主体布局 ========== */
.bs-layout{
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  gap:12px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;
  min-height:0;
}
.bs-layout > .bs-left{
  -webkit-box-flex:0;-ms-flex:0 0 26%;flex:0 0 26%;
  min-width:300px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  gap:12px;
}
.bs-layout > .bs-center{
  -webkit-box-flex:0;-ms-flex:0 0 48%;flex:0 0 48%;
  min-width:520px;min-height:0;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  gap:12px;
}
.bs-layout > .bs-right{
  -webkit-box-flex:0;-ms-flex:0 0 26%;flex:0 0 26%;
  min-width:300px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  gap:12px;
}
@supports (display:grid){
  .bs-layout{
    display:grid;
    grid-template-columns:26% 48% 26%;
    gap:12px;
    -webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;
  }
  .bs-layout > .bs-left,
  .bs-layout > .bs-center,
  .bs-layout > .bs-right{min-width:0;height:auto}
}

/* 响应式：窄屏改为单列 */
@media (max-width:1100px){
  .bs-layout{
    -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  }
  .bs-layout > .bs-left,
  .bs-layout > .bs-center,
  .bs-layout > .bs-right{
    -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
    min-width:0;width:100%;
  }
}
@supports (display:grid){
  @media (max-width:1100px){
    .bs-layout{grid-template-columns:1fr}
  }
}

/* ========== 顶部/底部模块区（数据屏设置） ========== */
.bs-top-modules{
  -webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  gap:12px;margin-bottom:12px;min-height:0;
}
.bs-bottom-modules{
  -webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  gap:12px;margin-top:12px;min-height:0;
}
.bs-top-modules > .bs-cell,
.bs-bottom-modules > .bs-cell{
  -webkit-box-flex:1;-ms-flex:1 1 0;flex:1 1 0;
  min-width:0;min-height:140px;
}
.bs-top-modules > .bs-cell .bs-cell-body,
.bs-bottom-modules > .bs-cell .bs-cell-body{
  min-height:100px;
}
/* KPI 在左右栏时垂直排列 */
.bs-left .bs-kpi-row,
.bs-right .bs-kpi-row{
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  gap:6px;
}
.bs-left .bs-kpi-row > .bs-kpi,
.bs-right .bs-kpi-row > .bs-kpi{
  -webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;
  width:100%;
}
/* 三栏隐藏时中间区域全宽 */
.bs-layout > .bs-center:only-child{
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  min-width:0;
}
@supports (display:grid){
  .bs-layout > .bs-center:only-child{grid-column:1/-1}
}

/* ========== 通用 .bs-cell ========== */
.bs-cell{
  position:relative;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  background:-webkit-linear-gradient(135deg,rgba(6,182,212,.06) 0%,rgba(37,99,235,.1) 100%);
  background:linear-gradient(135deg,rgba(6,182,212,.06) 0%,rgba(37,99,235,.1) 100%);
  border:1px solid rgba(103,232,249,.18);
  border-radius:6px;
  padding:12px 14px 10px;
  overflow:hidden;
}
/* 角标装饰 */
.bs-cell::before,.bs-cell::after{
  content:'';position:absolute;width:12px;height:12px;border-color:#67e8f9;border-style:solid;border-width:0;
}
.bs-cell::before{top:0;left:0;border-top-width:2px;border-left-width:2px}
.bs-cell::after{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
/* 左栏大格（销售趋势图） */
.bs-cell-lg{min-height:0;-webkit-box-flex:2;-ms-flex:2 2 0;flex:2 2 0}
.bs-cell-lg .bs-cell-body{height:calc(100% - 28px);min-height:0}
/* 右栏中格（订单状态/站点排行/司机榜）- 各占相同高度 */
.bs-cell-md{min-height:0;-webkit-box-flex:1;-ms-flex:1 1 0;flex:1 1 0}
.bs-cell-md .bs-cell-body{height:calc(100% - 28px);min-height:0}
/* 事件流小格（固定较小高度，让大图占大头） */
.bs-cell-sm{min-height:0;-webkit-box-flex:1;-ms-flex:1 1 0;flex:1 1 0;overflow:hidden}

.bs-cell-title{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  font-size:13px;font-weight:600;color:#67e8f9;margin-bottom:6px;
  letter-spacing:.03em;padding-left:8px;
  border-left:3px solid #06b6d4;
  height:22px;
}
.bs-cell-title .bs-cell-tag{font-size:10px;color:rgba(224,242,254,.35);font-weight:400}
.bs-cell-body{position:relative;overflow:hidden;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}
.bs-cell-canvas-wrap{position:relative;height:100%;width:100%;overflow:hidden}
.bs-cell-canvas-wrap canvas{max-width:100%;max-height:100%;display:block;width:100%!important;height:100%!important}

/* ========== 中间：监控展示 ========== */
.bs-monitor-wrap{
  position:relative;
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  background:-webkit-linear-gradient(135deg,rgba(6,182,212,.04) 0%,rgba(37,99,235,.08) 100%);
  background:linear-gradient(135deg,rgba(6,182,212,.04) 0%,rgba(37,99,235,.08) 100%);
  border:1px solid rgba(103,232,249,.22);
  border-radius:6px;
  padding:12px 14px 10px;
  overflow:hidden;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
}
.bs-monitor-wrap::before,.bs-monitor-wrap::after{
  content:'';position:absolute;width:12px;height:12px;border-color:#67e8f9;border-style:solid;border-width:0;
}
.bs-monitor-wrap::before{top:0;left:0;border-top-width:2px;border-left-width:2px}
.bs-monitor-wrap::after{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.bs-monitor-header{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  margin-bottom:10px;padding-left:8px;
  border-left:3px solid #06b6d4;height:22px;
}
.bs-monitor-title{font-size:13px;font-weight:600;color:#67e8f9;letter-spacing:.03em}
.bs-monitor-tag{font-size:10px;color:rgba(224,242,254,.35)}
.bs-monitor-grid{
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;
  gap:6px;
  min-height:0;
}
.bs-monitor-grid > .bs-video-tile{
  -webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;
  min-width:30%;min-height:100px;
}
@supports (display:grid){
  .bs-monitor-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:1fr 1fr;
    gap:6px;
  }
  .bs-monitor-grid > .bs-video-tile{min-width:0;min-height:0}
}

/* ========== 视频块（通用） ========== */
.bs-video-tile{
  position:relative;
  padding-top:50%;/* 2:1 fallback */
  background:#000;border-radius:4px;overflow:hidden;
  border:1px solid rgba(103,232,249,.2);
}
@supports (aspect-ratio:16/9){
  .bs-video-tile{padding-top:0;aspect-ratio:16/9}
}
.bs-video-tile video,.bs-video-tile img,.bs-video-tile iframe{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.bs-video-tile .bs-v-label{
  position:absolute;top:6px;left:6px;
  background:rgba(0,0,0,.75);color:#67e8f9;font-size:11px;
  padding:2px 8px;border-radius:3px;z-index:2;
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;
}
.bs-video-tile .bs-v-status{
  position:absolute;bottom:6px;right:6px;
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;
  background:rgba(0,0,0,.75);color:#fff;font-size:10px;
  padding:2px 6px;border-radius:3px;z-index:2;
}
.bs-video-tile .bs-v-status::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#ef4444;
  -webkit-animation:bsPulse 1.5s infinite;animation:bsPulse 1.5s infinite;
}
.bs-video-tile .bs-v-empty{
  position:absolute;inset:8px;
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  height:auto;color:rgba(103,232,249,.4);font-size:11px;gap:4px;
}
.bs-video-tile .bs-v-empty svg{width:28px;height:28px;min-width:28px;max-width:28px;opacity:.4;display:block;margin:0 auto}
@keyframes bsPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ========== KPI 行（中间底部6个） ========== */
.bs-kpi-row{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -ms-flex-wrap:wrap;flex-wrap:wrap;
  gap:6px;
  -webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;
}
.bs-kpi-row > .bs-kpi{
  -webkit-box-flex:1;-ms-flex:1 1 120px;flex:1 1 120px;
  min-width:120px;
}
@supports (display:grid){
  .bs-kpi-row{
    display:grid;
    grid-template-columns:repeat(8,minmax(0,1fr));
    gap:6px;
  }
  .bs-kpi-row > .bs-kpi{min-width:0}
}
.bs-kpi{
  position:relative;
  background:-webkit-linear-gradient(135deg,rgba(6,182,212,.08) 0%,rgba(37,99,235,.12) 100%);
  background:linear-gradient(135deg,rgba(6,182,212,.08) 0%,rgba(37,99,235,.12) 100%);
  border:1px solid rgba(103,232,249,.2);
  border-radius:5px;
  padding:10px 10px;
  min-height:64px;
  overflow:hidden;
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;
  white-space:nowrap;
}
.bs-kpi::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:-webkit-linear-gradient(180deg,#67e8f9,#2563eb);
  background:linear-gradient(180deg,#67e8f9,#2563eb);
  box-shadow:0 0 6px rgba(103,232,249,.4);
}
.bs-kpi-icon{
  width:32px;height:32px;min-width:32px;max-width:32px;border-radius:6px;
  background:-webkit-linear-gradient(135deg,#2563eb,#06b6d4);
  background:linear-gradient(135deg,#2563eb,#06b6d4);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  color:#fff;box-shadow:0 3px 10px rgba(37,99,235,.4);
  -webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;
}
.bs-kpi-icon svg{width:16px;height:16px}
.bs-kpi-info{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0;overflow:hidden}
.bs-kpi-label{font-size:11px;color:rgba(224,242,254,.6);margin-bottom:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-kpi-value{font-size:16px;font-weight:700;color:#fff;letter-spacing:0;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bs-kpi-value .bs-unit{font-size:10px;color:rgba(224,242,254,.5);margin-left:2px;font-weight:400}

/* ========== 实时事件流 ========== */
.bs-event-stream{height:calc(100% - 28px);overflow:hidden;position:relative}
.bs-event-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-animation:bsScrollList 30s linear infinite;animation:bsScrollList 30s linear infinite}
.bs-event-item{
  display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px;
  padding:6px 10px;background:rgba(6,182,212,.05);
  border-left:2px solid #06b6d4;border-radius:2px;font-size:11px;color:rgba(224,242,254,.7);
}
.bs-event-time{color:#67e8f9;font-family:'Consolas',monospace;font-size:10px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;min-width:50px}
.bs-event-tag{font-size:9px;padding:1px 5px;border-radius:2px;background:rgba(103,232,249,.12);color:#67e8f9;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}
.bs-event-tag.ok{background:rgba(16,185,129,.12);color:#10b981}
.bs-event-tag.warn{background:rgba(245,158,11,.12);color:#f59e0b}
.bs-event-tag.err{background:rgba(239,68,68,.12);color:#ef4444}
@keyframes bsScrollList{
  0%{-webkit-transform:translateY(0);transform:translateY(0)}
  100%{-webkit-transform:translateY(-50%);transform:translateY(-50%)}
}

/* ========== 投放模式 - 真全屏 ========== */
body.bs-fullscreen{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;
  background:#020a24;
}
body.bs-fullscreen .sidebar,
body.bs-fullscreen .topbar,
body.bs-fullscreen .breadcrumb,
body.bs-fullscreen .page-header{display:none!important}
body.bs-fullscreen .main{margin-left:0!important}
body.bs-fullscreen .content{padding:0!important;max-width:none!important}
body.bs-fullscreen .bs-screen{min-height:100vh;border-radius:0}

/* ========== 首页待办事项提醒 ========== */
.todo-panel{margin-top:16px}
.todo-grid{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:12px;
}
.todo-item{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10px;
  padding:12px 16px;border-radius:10px;
  background:var(--bg-soft);border:1px solid var(--line);
  text-decoration:none;-webkit-transition:all .2s ease;transition:all .2s ease;
  -webkit-box-flex:1;-ms-flex:1 1 280px;flex:1 1 280px;
  max-width:100%;
}
.todo-item:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.todo-icon{
  font-size:22px;width:40px;height:40px;border-radius:10px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  -webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;
  background:#fff;
}
.todo-body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:2px;min-width:0}
.todo-title{font-size:13.5px;font-weight:600;color:var(--text)}
.todo-count{
  display:inline-block;min-width:20px;text-align:center;
  padding:1px 6px;border-radius:10px;font-size:12px;font-weight:700;
  margin-left:6px;
}
.todo-desc{font-size:12px;color:var(--muted)}
/* 颜色变体 */
.todo-orange .todo-icon{background:#fff7ed;color:#ea580c}
.todo-orange .todo-count{background:#fed7aa;color:#c2410c}
.todo-red .todo-icon{background:#fef2f2;color:#dc2626}
.todo-red .todo-count{background:#fecaca;color:#b91c1c}
.todo-yellow .todo-icon{background:#fefce8;color:#ca8a04}
.todo-yellow .todo-count{background:#fef08a;color:#a16207}
.todo-blue .todo-icon{background:#eff6ff;color:#2563eb}
.todo-blue .todo-count{background:#bfdbfe;color:#1d4ed8}
.todo-cyan .todo-icon{background:#ecfeff;color:#0891b2}
.todo-cyan .todo-count{background:#a5f3fc;color:#0e7490}