/* ===== 全局样式 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg-primary: #03120e;
  --bg-secondary: #061b16;
  --bg-tertiary: #0a241d;
  --bg-card: #07211a;
  --bg-card-hover: #0c2e24;
  --border-color: #0f4a3b;
  --text-primary: #e6fff6;
  --text-secondary: #8fd6bd;
  --text-muted: #6fae97;
  --accent-blue: #17e6a1;
  --accent-cyan: #00ffb2;
  --accent-green: #17e6a1;
  --accent-orange: #f5c542;
  --accent-red: #ff5d5d;
  --accent-purple: #7de3c5;
  --accent-yellow: #ffd76a;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  --radius: 8px;
  /* 指挥大屏主题扩展 */
  --accent-rgb: 0, 255, 178;
  --gold-rgb: 245, 197, 66;
  --gold: #f5c542;
  --panel-bg: linear-gradient(160deg, rgba(6, 32, 26, 0.82), rgba(2, 15, 12, 0.9));
  --panel-line: rgba(0, 255, 178, 0.26);
  --glow: rgba(0, 255, 178, 0.35);
}
html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; }
#app { height: 100%; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* ===== 布局 ===== */
.app-layout { display: flex; height: 100vh; }
.sidebar { width: 230px; background: linear-gradient(180deg, #0c1a30 0%, #0a1426 100%); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.3s; }
.sidebar.collapsed { width: 64px; }
.logo-area { height: 64px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-color); padding: 0 16px; gap: 10px; }
.logo-icon { font-size: 28px; color: var(--accent-cyan); flex-shrink: 0; }
.logo-text { font-size: 15px; font-weight: 700; white-space: nowrap; background: linear-gradient(90deg, #00d4ff, #2d8cf0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sidebar.collapsed .logo-text { display: none; }
.nav-menu { flex: 1; overflow-y: auto; padding: 12px 0; }
.nav-group-title { padding: 12px 20px 6px; font-size: 11.5px; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; padding: 10px 20px; cursor: pointer; transition: all 0.2s; color: var(--text-secondary); border-left: 3px solid transparent; gap: 12px; white-space: nowrap; }
.nav-item:hover { background: rgba(45, 140, 240, 0.1); color: var(--text-primary); }
.nav-item.active { background: linear-gradient(90deg, rgba(45, 140, 240, 0.2), transparent); color: var(--accent-cyan); border-left-color: var(--accent-cyan); }
.nav-item .nav-icon { font-size: 18px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar.collapsed .nav-item span:not(.nav-icon) { display: none; }
.sidebar.collapsed .nav-group-title { display: none; }

.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: 64px; background: linear-gradient(180deg, #101f3d, #0d1a32); border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 212, 255, 0.08); display: flex; align-items: center; padding: 0 24px; justify-content: space-between; flex-shrink: 0; }
.topbar-left { display: flex; align-items: center; gap: 16px; }
.toggle-btn { background: none; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; padding: 6px; border-radius: 4px; }
.toggle-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.breadcrumb { font-size: 14px; color: var(--text-secondary); }
.breadcrumb .current { color: var(--text-primary); font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-icon { position: relative; cursor: pointer; font-size: 18px; color: var(--text-secondary); padding: 6px; border-radius: 4px; }
.topbar-icon:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.badge { position: absolute; top: 2px; right: 2px; background: var(--accent-red); color: #2b0505; font-size: 10.5px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* ===== 首页景区快速搜索 ===== */
.quick-search { position: relative; width: 330px; }
.quick-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .7; pointer-events: none; }
.quick-search-input { width: 100%; height: 34px; padding: 0 30px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 17px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; transition: all .2s; }
.quick-search-input::placeholder { color: var(--text-muted); }
.quick-search-input:focus { border-color: var(--accent-cyan); background: #0b1a33; box-shadow: 0 0 0 2px rgba(0, 212, 255, .13); }
.quick-search-clear { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); font-size: 15px; line-height: 1; cursor: pointer; }
.quick-search-clear:hover { background: rgba(255, 255, 255, .08); color: var(--text-primary); }
.quick-search-panel { position: absolute; top: 42px; left: 0; width: 400px; max-height: 392px; overflow-y: auto; background: #0d1c35; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); z-index: 3001; }
.quick-search-group { padding: 10px 14px 6px; font-size: 11px; color: var(--text-muted); letter-spacing: .5px; }
.quick-search-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; border-left: 2px solid transparent; }
.quick-search-item:hover, .quick-search-item.active { background: rgba(0, 212, 255, .09); border-left-color: var(--accent-cyan); }
.quick-search-star { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 6px rgba(0, 212, 255, .7); flex-shrink: 0; margin-left: 2px; }
.quick-search-main { flex: 1; min-width: 0; }
.quick-search-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-search-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-search-tag { flex-shrink: 0; font-size: 10px; padding: 2px 7px; border-radius: 3px; background: rgba(0, 212, 255, .12); color: var(--accent-cyan); border: 1px solid rgba(0, 212, 255, .25); }
.quick-search-empty { padding: 22px 14px; text-align: center; font-size: 12px; color: var(--text-muted); }
.quick-search-hint { padding: 8px 14px 10px; font-size: 10.5px; color: var(--text-muted); border-top: 1px dashed var(--border-color); }

.lang-switch { display: flex; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; border: 1px solid var(--border-color); }
.lang-btn { padding: 5px 10px; font-size: 12px; cursor: pointer; background: transparent; border: none; color: var(--text-secondary); transition: all 0.2s; white-space: nowrap; }
.lang-btn:hover { color: var(--text-primary); }
.lang-btn.active { background: var(--accent-blue); color: #03120e; font-weight: 700; }
.user-info { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #03120e; }

.content-area { flex: 1; overflow-y: auto; padding: 20px; background: var(--bg-primary); }

/* ===== 通用组件 ===== */
.card { background: linear-gradient(160deg, #13274a 0%, #0e1d38 100%); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(90, 160, 255, 0.05); transition: box-shadow 0.25s, border-color 0.25s; }
.card:hover { border-color: rgba(45, 140, 240, 0.45); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(45, 140, 240, 0.08); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; text-shadow: 0 0 12px rgba(0, 212, 255, 0.2); }
.card-title::before { content: ''; width: 3px; height: 14px; background: var(--accent-cyan); border-radius: 2px; box-shadow: 0 0 8px var(--accent-cyan); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1px solid var(--border-color); background: linear-gradient(160deg, #1a3158, #122240); color: var(--text-primary); border-radius: 4px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.btn:hover { border-color: var(--accent-blue); color: var(--accent-cyan); box-shadow: 0 0 12px rgba(45, 140, 240, 0.3); transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, #2d8cf0, #1a6fd4); border-color: var(--accent-blue); color: white; box-shadow: 0 2px 10px rgba(45, 140, 240, 0.35); }
.btn-primary:hover { background: linear-gradient(135deg, #3d9bff, #2d8cf0); color: white; box-shadow: 0 4px 16px rgba(45, 140, 240, 0.5); }
.btn-success { background: var(--accent-green); border-color: var(--accent-green); color: white; }
.btn-success:hover { background: #26bd64; color: white; }
.btn-warning { background: var(--accent-orange); border-color: var(--accent-orange); color: white; }
.btn-danger { background: var(--accent-red); border-color: var(--accent-red); color: white; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

.tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 10px; font-size: 12px; gap: 4px; }
.tag-green { background: rgba(46, 213, 115, 0.15); color: var(--accent-green); border: 1px solid rgba(46, 213, 115, 0.3); }
.tag-red { background: rgba(255, 71, 87, 0.15); color: var(--accent-red); border: 1px solid rgba(255, 71, 87, 0.3); }
.tag-orange { background: rgba(255, 165, 2, 0.15); color: var(--accent-orange); border: 1px solid rgba(255, 165, 2, 0.3); }
.tag-blue { background: rgba(45, 140, 240, 0.15); color: var(--accent-blue); border: 1px solid rgba(45, 140, 240, 0.3); }
.tag-gray { background: rgba(140, 168, 204, 0.15); color: var(--text-secondary); border: 1px solid rgba(140, 168, 204, 0.3); }
.tag-purple { background: rgba(165, 94, 234, 0.15); color: var(--accent-purple); border: 1px solid rgba(165, 94, 234, 0.3); }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-online { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); animation: pulse 2s infinite; }
.dot-offline { background: var(--accent-red); }
.dot-warning { background: var(--accent-orange); box-shadow: 0 0 6px var(--accent-orange); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

table { width: 100%; border-collapse: collapse; }
th { text-align: center; padding: 12px 8px; background: var(--bg-tertiary); color: var(--text-secondary); font-weight: 500; font-size: 13px; border-bottom: 1px solid var(--border-color); }
td { padding: 12px 8px; text-align: center; border-bottom: 1px solid rgba(30, 58, 95, 0.5); color: var(--text-primary); font-size: 13px; }
tr:hover td { background: var(--bg-card-hover); }
td .tag, td .progress-bar { display: inline-flex; vertical-align: middle; }
td .progress-bar { display: inline-block; }

.form-item { margin-bottom: 16px; }
.form-label { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 13px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 8px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: 13px; outline: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent-blue); }
.form-textarea { min-height: 80px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ===== KPI 卡片（居中 · 一行五个） ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1400px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-card { background: linear-gradient(150deg, #14294e 0%, #0d1c38 100%); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 18px 14px; position: relative; overflow: hidden; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(120, 190, 255, 0.06); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; }
.kpi-card:hover { transform: translateY(-3px); border-color: var(--accent-blue); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(45, 140, 240, 0.18); }
.kpi-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; opacity: 0.9; }
.kpi-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% -30%, rgba(0, 212, 255, 0.12), transparent 60%); pointer-events: none; }
.kpi-card.blue::before { background: var(--accent-blue); box-shadow: 0 0 12px var(--accent-blue); }
.kpi-card.cyan::before { background: var(--accent-cyan); box-shadow: 0 0 12px var(--accent-cyan); }
.kpi-card.green::before { background: var(--accent-green); box-shadow: 0 0 12px var(--accent-green); }
.kpi-card.orange::before { background: var(--accent-orange); box-shadow: 0 0 12px var(--accent-orange); }
.kpi-card.red::before { background: var(--accent-red); box-shadow: 0 0 12px var(--accent-red); }
.kpi-card.purple::before { background: var(--accent-purple); box-shadow: 0 0 12px var(--accent-purple); }
.kpi-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; letter-spacing: 1px; }
.kpi-value { font-size: 30px; font-weight: 700; color: var(--text-primary); text-shadow: 0 0 16px rgba(0, 212, 255, 0.25); font-family: "DIN Alternate", "Bahnschrift", -apple-system, sans-serif; }
.kpi-unit { font-size: 13px; color: var(--text-muted); margin-left: 4px; }
.kpi-trend { font-size: 12px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.kpi-trend.up { color: var(--accent-green); }
.kpi-trend.down { color: var(--accent-red); }

/* ===== 图表容器 ===== */
.chart-container { width: 100%; height: 300px; }
.chart-container.lg { height: 400px; }
.chart-container.xl { height: 500px; }

/* ===== 地图大屏 ===== */
.map-screen { background:
    linear-gradient(rgba(5, 13, 28, 0.62), rgba(8, 20, 42, 0.74)),
    url("../assets/vintage-world-map.jpg") center / cover no-repeat,
    radial-gradient(ellipse at center, #0a1f3d 0%, #050d1c 100%); border: 1px solid rgba(45, 140, 240, 0.25); border-radius: var(--radius); padding: 16px; position: relative; min-height: 600px; box-shadow: 0 0 40px rgba(45, 140, 240, 0.08), inset 0 0 80px rgba(8, 24, 50, 0.6); overflow: hidden; }
.map-screen::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 top 0 / 28px 2px,
  linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 top 0 / 2px 28px,
  linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 top 0 / 28px 2px,
  linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 top 0 / 2px 28px,
  linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 bottom 0 / 28px 2px,
  linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 bottom 0 / 2px 28px,
  linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 bottom 0 / 28px 2px,
  linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 bottom 0 / 2px 28px;
  background-repeat: no-repeat; opacity: 0.6; }
.map-25d-wrap { position: relative; }
.map-25d-inner { transition: transform 0.5s; }
.map-25d-shadow { display: none; }
.map-drill-info { position: absolute; top: 16px; left: 16px; z-index: 10; background: rgba(15, 31, 58, 0.9); border: 1px solid var(--border-color); border-radius: 6px; padding: 10px 16px; font-size: 13px; backdrop-filter: blur(4px); }
.map-drill-info .drill-path { color: var(--accent-cyan); font-weight: 600; }
.map-region-bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.map-region-label { font-size: 12px; color: var(--text-secondary); letter-spacing: 1px; }
.map-region-select { height: 30px; min-width: 126px; padding: 0 10px; background: #0f1f3a; color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 6px; font-size: 12px; font-family: inherit; outline: none; transition: border-color .2s, box-shadow .2s; }
.map-region-select:focus { border-color: var(--accent-cyan); box-shadow: 0 0 0 2px rgba(0, 212, 255, .12); }
.map-region-select:disabled { opacity: .45; cursor: not-allowed; }
.map-region-sep { color: var(--text-muted); font-size: 12px; }
.map-region-tip { font-size: 11px; color: var(--text-muted); margin-left: 4px; }
.map-back-btn { position: absolute; top: 16px; right: 16px; z-index: 10; }
.map-title { text-align: center; font-size: 24px; font-weight: 700; letter-spacing: 4px; background: linear-gradient(90deg, #00d4ff, #2d8cf0, #a55eea, #00d4ff); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; animation: titleFlow 6s linear infinite; filter: drop-shadow(0 0 14px rgba(0, 212, 255, 0.35)); }
@keyframes titleFlow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.map-subtitle { text-align: center; color: var(--text-muted); font-size: 12px; margin-bottom: 16px; letter-spacing: 2px; }
.map-toolbar { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; }
.map-toolbar .btn { font-size: 12px; padding: 5px 12px; }
.map-toolbar .btn.active { background: linear-gradient(135deg, #2d8cf0, #1a6fd4); border-color: var(--accent-blue); color: white; box-shadow: 0 0 14px rgba(45, 140, 240, 0.5); }

/* ===== 报警弹窗 ===== */
.alert-popup { position: fixed; right: 24px; bottom: 24px; z-index: 3000; width: 380px; background: linear-gradient(150deg, #2a1420 0%, #160d18 100%); border: 1px solid rgba(255, 71, 87, 0.5); border-left: 4px solid var(--accent-red); border-radius: 8px; padding: 14px 16px; cursor: pointer; box-shadow: 0 8px 40px rgba(255, 71, 87, 0.3), 0 0 24px rgba(255, 71, 87, 0.15); animation: alertSlide 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2), alertBlink 1.2s ease-in-out infinite; }
.alert-popup.medium { border-color: rgba(255, 165, 2, 0.6); border-left-color: var(--accent-orange); box-shadow: 0 8px 40px rgba(255, 165, 2, 0.25); }
@keyframes alertSlide { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes alertBlink { 0%, 100% { box-shadow: 0 8px 40px rgba(255, 71, 87, 0.3); } 50% { box-shadow: 0 8px 40px rgba(255, 71, 87, 0.55), 0 0 32px rgba(255, 71, 87, 0.3); } }
.alert-popup-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.alert-popup-icon { font-size: 24px; animation: alertShake 0.8s ease-in-out infinite; }
@keyframes alertShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.alert-popup-title { font-weight: 700; color: #ff6b7a; font-size: 15px; flex: 1; }
.alert-popup-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.alert-popup-body { font-size: 13px; color: var(--text-primary); line-height: 1.6; cursor: pointer; }
.alert-popup-header { cursor: pointer; }
.alert-popup-tip { font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.alert-popup-actions { display: flex; gap: 10px; margin-top: 12px; }
.alert-sound-btn, .alert-detail-btn { flex: 1; padding: 7px 10px; border-radius: 5px; font-size: 12px; font-family: inherit; cursor: pointer; transition: all .2s; white-space: nowrap; }
.alert-sound-btn { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); color: #ffc2c8; }
.alert-sound-btn:hover { background: rgba(255, 255, 255, .12); }
.alert-sound-btn.muted { border-color: rgba(0, 212, 255, .5); color: var(--accent-cyan); background: rgba(0, 212, 255, .1); }
.alert-detail-btn { background: linear-gradient(90deg, #ff4757, #ff6b81); border: none; color: #fff; font-weight: 600; }
.alert-detail-btn:hover { filter: brightness(1.12); }

/* ===== 到期提醒 ===== */
.expire-banner { background: linear-gradient(90deg, rgba(255, 165, 2, 0.15), rgba(255, 71, 87, 0.1)); border: 1px solid rgba(255, 165, 2, 0.4); border-radius: 6px; padding: 10px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--accent-orange); }
.deploy-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; }
.deploy-cloud { background: rgba(0, 212, 255, 0.12); color: var(--accent-cyan); border: 1px solid rgba(0, 212, 255, 0.3); }
.deploy-local { background: rgba(165, 94, 234, 0.12); color: var(--accent-purple); border: 1px solid rgba(165, 94, 234, 0.3); }
.expire-soon { color: var(--accent-orange); font-weight: 600; }
.expire-danger { color: var(--accent-red); font-weight: 700; animation: pulse 1.5s infinite; }

/* ===== 弹窗 ===== */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); width: 600px; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; }
.modal.lg { width: 800px; }
.modal.xl { width: 1180px; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-size: 16px; font-weight: 600; }
.modal-close { background: none; border: none; color: var(--text-secondary); font-size: 20px; cursor: pointer; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 12px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px; }

/* ===== 通知 ===== */
.toast { position: fixed; top: 80px; right: 20px; background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--accent-green); padding: 12px 20px; border-radius: 4px; box-shadow: var(--shadow); z-index: 2000; animation: slideIn 0.3s; }
.toast.error { border-left-color: var(--accent-red); }
.toast.warning { border-left-color: var(--accent-orange); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== 统计卡片 ===== */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat-box { text-align: center; padding: 16px; background: var(--bg-secondary); border-radius: 6px; }
.stat-num { font-size: 24px; font-weight: 700; color: var(--accent-cyan); }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* ===== 进度条 ===== */
.progress-bar { height: 8px; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 4px; transition: width 0.5s; }

/* ===== 设备图标网格 ===== */
.device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.device-tile { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; padding: 12px; text-align: center; cursor: pointer; transition: all 0.2s; }
.device-tile:hover { border-color: var(--accent-blue); transform: translateY(-2px); }
.device-tile.online { border-color: rgba(46, 213, 115, 0.3); }
.device-tile.offline { border-color: rgba(255, 71, 87, 0.3); opacity: 0.7; }
.device-icon { font-size: 28px; margin-bottom: 6px; }
.device-name { font-size: 12px; color: var(--text-primary); margin-bottom: 4px; }
.device-status { font-size: 11px; }

/* ===== 时间轴 ===== */
.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: var(--border-color); }
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item::before { content: ''; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-blue); border: 2px solid var(--bg-secondary); }
.timeline-item.done::before { background: var(--accent-green); }
.timeline-item.warning::before { background: var(--accent-orange); }
.timeline-time { font-size: 11px; color: var(--text-muted); }
.timeline-content { font-size: 13px; color: var(--text-primary); margin-top: 2px; }

/* ===== 标签页 ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }
.tab { padding: 10px 16px; cursor: pointer; color: var(--text-secondary); border-bottom: 2px solid transparent; transition: all 0.2s; }
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }

/* ===== 搜索栏 ===== */
.search-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search-bar .form-input { width: 200px; }
.search-bar .form-select { width: 160px; }

/* ===== 分页 ===== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 16px; }
.page-btn { padding: 6px 12px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; color: var(--text-secondary); }
.page-btn.active { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== 大屏全屏 / 自适应 ===== */
.map-screen .chart-container.xl { height: clamp(400px, 55vh, 680px); }
.map-screen.map-fullscreen {
  position: fixed; inset: 0; z-index: 950; width: 100vw; height: 100vh;
  border-radius: 0; border: none; overflow-y: auto; padding: 24px 32px;
  background: linear-gradient(rgba(5, 13, 28, 0.62), rgba(8, 20, 42, 0.74)),
              url("../assets/vintage-world-map.jpg") center / cover no-repeat,
              radial-gradient(ellipse at center, #0a1f3d 0%, #050d1c 100%);
}
.map-screen.map-fullscreen .chart-container.xl { height: calc(100vh - 300px); }
.map-screen:fullscreen { padding: 24px 32px; overflow-y: auto; border-radius: 0; }
.map-screen:fullscreen .chart-container.xl { height: calc(100vh - 300px); }

/* ===== 设置弹窗 ===== */
.settings-tabs { display: flex; gap: 8px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); }
.settings-tabs .btn { background: var(--bg-tertiary); }

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

/* ===== 手绘导览图叠加 GIS（观澜湖电影小镇） ===== */
.mt-level-pill { font-size: 11px; padding: 3px 10px; border-radius: 12px; color: var(--accent-cyan); border: 1px solid rgba(0, 212, 255, .3); background: rgba(0, 212, 255, .08); white-space: nowrap; }
.mt-gis { margin-top: 4px; }
.mt-stage-outer { display: flex; justify-content: center; }
.mt-stage { position: relative; width: 100%; max-width: calc((100vh - 300px) * 1.481481); aspect-ratio: 1600 / 1080; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 212, 255, .28); box-shadow: 0 0 34px rgba(0, 212, 255, .12), inset 0 0 60px rgba(5, 13, 28, .35); background: #0b1626; }
.mt-map-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: saturate(.96) contrast(.98) brightness(.92); }
.mt-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, rgba(5, 13, 28, 0) 45%, rgba(5, 13, 28, .5) 100%); }
.mt-map-grid { position: absolute; inset: 0; pointer-events: none; background-image:
    linear-gradient(rgba(0, 212, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, .12) 1px, transparent 1px);
  background-size: 80px 80px; mix-blend-mode: screen; opacity: .55; }
.mt-geo-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 12px; border-radius: 6px; background: rgba(10, 25, 48, .72); border: 1px solid rgba(0, 212, 255, .22); font-size: 11.5px; color: var(--text-secondary); }
.mt-geo-strip b { color: #dff3ff; font-weight: 600; }
.mt-geo-strip .mt-geo-addr { margin-top: 0; }
.mt-geo-sep { color: var(--border-color); }
.mt-geo-tag { margin-left: auto; font-size: 10.5px; color: var(--accent-cyan); border: 1px dashed rgba(0, 212, 255, .35); border-radius: 10px; padding: 2px 8px; }
.mt-geo-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); animation: pulse 2s infinite; }
.mt-geo-addr { font-size: 10.5px; color: var(--text-secondary); line-height: 1.4; }

.mt-poi { position: absolute; z-index: 15; width: 26px; height: 26px; padding: 0; border: none; background: transparent; transform: translate(-50%, -50%); cursor: pointer; }
.mt-poi-halo { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 1px solid currentColor; opacity: .65; animation: mtPulse 2.4s ease-out infinite; }
@keyframes mtPulse { 0% { transform: scale(.9); opacity: .8; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
.mt-poi-core { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; line-height: 1; border-radius: 50%; color: #eaf6ff; background: radial-gradient(circle at 35% 30%, #1b3d68, #0a1830 75%); border: 1.5px solid currentColor; box-shadow: 0 0 10px currentColor, 0 2px 6px rgba(0, 0, 0, .5); }
.mt-poi-label { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); padding: 1px 6px; border-radius: 3px; font-size: 10px; white-space: nowrap; color: #cfe8ff; background: rgba(6, 16, 32, .82); border: 1px solid rgba(0, 212, 255, .22); opacity: .92; pointer-events: none; }
.mt-poi.st-online { color: var(--accent-green); }
.mt-poi.st-warning { color: var(--accent-orange); }
.mt-poi.st-offline { color: var(--accent-red); }
.mt-poi:hover .mt-poi-core, .mt-poi.active .mt-poi-core { transform: scale(1.18); box-shadow: 0 0 16px currentColor, 0 0 0 2px rgba(255, 255, 255, .35); }
.mt-poi.active .mt-poi-label { color: #fff; border-color: var(--accent-cyan); background: rgba(0, 90, 140, .9); }
.mt-poi.label-left .mt-poi-label { left: auto; right: 30px; }
.mt-scale { position: absolute; right: 16px; bottom: 16px; z-index: 12; display: flex; align-items: center; gap: 6px; font-size: 10px; color: #cfe8ff; text-shadow: 0 1px 3px #000; }
.mt-scale i { width: 64px; height: 4px; border-left: 1px solid #cfe8ff; border-right: 1px solid #cfe8ff; border-bottom: 1px solid #cfe8ff; display: block; }
.mt-scale b { font-weight: 500; }

.mt-poi-card { position: absolute; left: 14px; bottom: 14px; z-index: 22; width: 320px; padding: 12px 14px; border-radius: 8px; background: linear-gradient(160deg, rgba(19, 39, 74, .97), rgba(10, 25, 48, .97)); border: 1px solid rgba(0, 212, 255, .45); box-shadow: 0 10px 34px rgba(0, 0, 0, .6), 0 0 22px rgba(0, 212, 255, .18); animation: mtCardIn .22s ease-out; }
@keyframes mtCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.mt-poi-card-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--border-color); }
.mt-poi-card-icon { font-size: 22px; line-height: 1; }
.mt-poi-card-name { font-size: 13px; font-weight: 700; color: #eaf6ff; }
.mt-poi-card-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.mt-poi-card-close { background: none; border: none; color: var(--text-muted); font-size: 14px; cursor: pointer; padding: 0 2px; }
.mt-poi-card-close:hover { color: var(--accent-red); }
.mt-poi-card-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 3px 0; color: var(--text-secondary); }
.mt-poi-card-row b { color: #cfe8ff; font-weight: 500; text-align: right; word-break: break-all; }
.mt-poi-card-std { margin-top: 8px; padding: 8px 10px; border-radius: 5px; background: rgba(0, 212, 255, .07); border: 1px solid rgba(0, 212, 255, .18); font-size: 11px; line-height: 1.55; color: var(--text-secondary); }
.mt-poi-card-std span { display: block; color: var(--accent-cyan); font-weight: 600; margin-bottom: 2px; font-size: 10.5px; letter-spacing: .5px; }
.mt-txt-online { color: var(--accent-green) !important; }
.mt-txt-warning { color: var(--accent-orange) !important; }
.mt-txt-offline { color: var(--accent-red) !important; }

.mt-stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 14px 0; }
.mt-stat { position: relative; padding: 10px 14px; border-radius: 6px; background: linear-gradient(160deg, #13274a, #0d1c38); border: 1px solid var(--border-color); }
.mt-stat span { font-size: 11px; color: var(--text-secondary); }
.mt-stat b { display: block; font-size: 22px; font-weight: 700; color: #eaf6ff; font-family: "DIN Alternate", "Bahnschrift", sans-serif; margin-top: 2px; }
.mt-stat i { font-style: normal; font-size: 11px; color: var(--text-muted); margin-left: 3px; }
.mt-stat.s-online b { color: var(--accent-green); }
.mt-stat.s-warning b { color: var(--accent-orange); }
.mt-stat.s-offline b { color: var(--accent-red); }
.mt-stat.s-rate b { color: var(--accent-cyan); }

.mt-info-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 16px; }
.mt-panel { background: linear-gradient(160deg, #13274a 0%, #0e1d38 100%); border: 1px solid var(--border-color); border-radius: 8px; padding: 14px 16px; }
.mt-panel-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
.mt-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-legend-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 11.5px; font-family: inherit; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px; cursor: pointer; transition: all .2s; }
.mt-legend-chip b { color: var(--accent-cyan); font-weight: 600; }
.mt-legend-chip:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.mt-legend-chip.active { border-color: var(--accent-cyan); background: rgba(0, 212, 255, .12); color: #eaf6ff; box-shadow: 0 0 12px rgba(0, 212, 255, .22); }
.mt-panel-tip { margin-top: 12px; font-size: 11px; line-height: 1.6; color: var(--text-muted); }
.mt-std-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-std-item { padding: 9px 10px; border-radius: 5px; background: var(--bg-secondary); border: 1px solid rgba(30, 58, 95, .8); border-left: 2px solid rgba(0, 212, 255, .5); }
.mt-std-name { font-size: 11.5px; font-weight: 600; color: #dff3ff; margin-bottom: 3px; }
.mt-std-text { font-size: 10.5px; line-height: 1.55; color: var(--text-muted); }

/* ===== 远程平台数据同步（永城日月湖 → 全国一张图） ===== */
.rs-sync-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 10px; padding: 8px 12px; border-radius: 6px; font-size: 11.5px; color: var(--text-secondary); background: rgba(10, 25, 48, .72); border: 1px dashed rgba(0, 212, 255, .3); }
.rs-sync-bar b { color: #dff3ff; font-weight: 600; }
.rs-live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-green); font-weight: 600; }
.rs-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green); animation: pulse 1.8s infinite; }

/* ===== 响应式 ===== */
@media (max-width: 1280px) {
  .quick-search { width: 230px; }
  .quick-search-panel { width: 300px; }
  .mt-info-grid { grid-template-columns: 1fr; }
  .mt-stat-row { grid-template-columns: repeat(3, 1fr); }
  .mt-std-list { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sidebar { width: 64px; }
  .sidebar .logo-text, .sidebar .nav-item span:not(.nav-icon), .sidebar .nav-group-title { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
}

/* ===== 景区侧 / 集团侧控制台（深色卡片风格） ===== */
.scenic-console, .group-console {
  --cd-bg: #0b0f14;
  --cd-card: #11161e;
  --cd-card-2: #0e131a;
  --cd-border: rgba(255, 255, 255, .07);
  --cd-text: #eef2f6;
  --cd-dim: #8b96a5;
  --cd-mute: #5c6675;
  --cd-accent: #ff8a3d;
  --cd-accent-2: #ffb648;
  --cd-ok: #37d67a;
  --cd-cyan: #4cc9f0;
  --cd-danger: #ff5c5c;
  position: relative;
  background: var(--cd-bg);
  border: 1px solid var(--cd-border);
  border-radius: 12px;
  padding: 14px;
  color: var(--cd-text);
}
.group-console { margin: -20px; padding: 20px; border: none; border-radius: 0; }
.scenic-console { margin-bottom: 16px; }

/* 实时告警轮播条 */
.cd-ticker { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--cd-card-2); border: 1px solid var(--cd-border); border-radius: 8px; margin-bottom: 14px; overflow: hidden; }
.cd-ticker-tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1px; color: var(--cd-accent-2); background: rgba(255, 138, 61, .1); border: 1px solid rgba(255, 138, 61, .25); padding: 3px 9px; border-radius: 4px; }
.cd-ticker-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--cd-accent); box-shadow: 0 0 8px var(--cd-accent); animation: cdBlink 1.6s ease-in-out infinite; }
@keyframes cdBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cd-ticker-track { flex: 1; display: flex; gap: 26px; overflow: hidden; white-space: nowrap; }
.cd-ticker-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--cd-dim); flex-shrink: 0; }
.cd-ticker-src { flex-shrink: 0; font-size: 11px; color: var(--cd-mute); }

/* 告警级别点 */
.cd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cd-mute); flex-shrink: 0; }
.cd-dot.lv-high { background: var(--cd-danger); box-shadow: 0 0 7px rgba(255, 92, 92, .7); }
.cd-dot.lv-medium { background: var(--cd-accent-2); }
.cd-dot.lv-low { background: var(--cd-cyan); }
.cd-lv { flex-shrink: 0; font-size: 10px; padding: 2px 8px; border-radius: 9px; border: 1px solid transparent; }
.cd-lv.lv-high { color: #ff8a8a; background: rgba(255, 92, 92, .12); border-color: rgba(255, 92, 92, .25); }
.cd-lv.lv-medium { color: var(--cd-accent-2); background: rgba(255, 182, 72, .1); border-color: rgba(255, 182, 72, .22); }
.cd-lv.lv-low { color: var(--cd-cyan); background: rgba(76, 201, 240, .1); border-color: rgba(76, 201, 240, .22); }

/* KPI 卡片行 */
.cd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.cd-kpi { background: linear-gradient(180deg, #131922 0%, #0e131a 100%); border: 1px solid var(--cd-border); border-radius: 10px; padding: 14px 16px; }
.cd-kpi-label { font-size: 12px; color: var(--cd-dim); margin-bottom: 8px; }
.cd-kpi-value { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.cd-kpi-value b { font-size: 27px; font-weight: 600; letter-spacing: -.5px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.cd-kpi-value i { font-style: normal; font-size: 12px; color: var(--cd-mute); }
.cd-kpi-foot { margin-top: 7px; font-size: 11px; color: var(--cd-mute); }
.cd-kpi-foot.up { color: var(--cd-ok); }
.cd-kpi-foot.warn { color: var(--cd-accent-2); }

/* 布局 */
.cd-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; margin-bottom: 12px; align-items: start; }
.cd-three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.cd-main { min-width: 0; }
.cd-rail { display: flex; flex-direction: column; gap: 12px; }

/* 卡片 */
.cd-card { background: var(--cd-card); border: 1px solid var(--cd-border); border-radius: 10px; padding: 14px; min-width: 0; }
.cd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--cd-text); }
.cd-card-head > span:first-child::before { content: ''; display: inline-block; width: 3px; height: 12px; border-radius: 2px; background: var(--cd-accent); margin-right: 8px; vertical-align: -1px; }
.cd-card-sub { font-size: 11px; font-weight: 400; color: var(--cd-mute); }
.cd-badge { min-width: 20px; height: 20px; padding: 0 7px; border-radius: 10px; background: rgba(255, 92, 92, .14); color: #ff8a8a; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.cd-card .chart-container { height: 250px; }
.cd-chart-lg { height: 268px !important; }

/* 告警列表 */
.cd-alert-list { display: flex; flex-direction: column; max-height: 268px; overflow-y: auto; }
.cd-alert-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 4px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.cd-alert-item:last-child { border-bottom: none; }
.cd-alert-main { flex: 1; min-width: 0; }
.cd-alert-title { font-size: 12.5px; color: #dfe6ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-alert-meta { font-size: 11px; color: var(--cd-mute); margin-top: 3px; }

/* 横向占比条 */
.cd-mix { display: flex; flex-direction: column; gap: 11px; }
.cd-mix-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 42px; align-items: center; gap: 10px; }
.cd-mix-name { font-size: 12px; color: var(--cd-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-mix-bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.cd-mix-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--cd-accent), var(--cd-accent-2)); transition: width .4s; }
.cd-mix-val { font-size: 12px; color: #dfe6ee; text-align: right; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cd-rank { display: inline-block; width: 16px; font-style: normal; color: var(--cd-accent); }

/* 气象 / SOS */
.cd-weather-now { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cd-weather-now b { font-size: 30px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; }
.cd-weather-now span { font-size: 12px; color: var(--cd-dim); }
.cd-weather-grid { display: flex; gap: 18px; font-size: 11.5px; color: var(--cd-mute); margin-bottom: 6px; }
.cd-weather-grid b { color: #dfe6ee; font-weight: 600; }
.cd-weather-tip { font-size: 11.5px; line-height: 1.55; color: #ffc46b; background: rgba(255, 180, 72, .07); border: 1px solid rgba(255, 180, 72, .16); border-radius: 6px; padding: 6px 9px; margin-top: 6px; }
.cd-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cd-mini { display: flex; flex-direction: column; gap: 2px; background: #0d1219; border: 1px solid var(--cd-border); border-radius: 8px; padding: 9px 11px; }
.cd-mini span { font-size: 11px; color: var(--cd-mute); }
.cd-mini b { font-size: 18px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; }
.cd-mini i { font-style: normal; font-size: 10px; color: var(--cd-mute); }

/* 景区地图头部 */
.cd-map-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--cd-border); }
.cd-map-title { font-size: 14px; font-weight: 600; color: var(--cd-text); }
.cd-map-sub { font-size: 11px; font-weight: 400; color: var(--cd-mute); margin-left: 8px; }

/* 控制台内表格 */
.cd-card table { width: 100%; border-collapse: collapse; }
.cd-card table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--cd-dim); padding: 8px 10px; border-bottom: 1px solid var(--cd-border); background: transparent; }
.cd-card table td { font-size: 12.5px; color: #dfe6ee; padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.cd-card table tbody tr:hover td { background: rgba(255, 138, 61, .05); }

@media (max-width: 1400px) {
  .cd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cd-two-col { grid-template-columns: minmax(0, 1fr) 280px; }
  .cd-three-col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .cd-two-col, .cd-three-col { grid-template-columns: 1fr; }
  .cd-kpis { grid-template-columns: 1fr 1fr; }
}

/* ===== 登录浮层（云端账号鉴权） ===== */
.auth-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 0%, #12233d 0%, #06101d 55%, #04090f 100%); }
.auth-card { width: 420px; max-width: calc(100vw - 32px); background: linear-gradient(165deg, #0f1c30 0%, #0a1524 100%); border: 1px solid #1d3554; border-radius: 14px; padding: 28px 28px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(0, 212, 255, .06) inset; }
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.auth-logo { font-size: 34px; }
.auth-name { font-size: 20px; font-weight: 700; letter-spacing: .5px; background: linear-gradient(90deg, #00d4ff, #2d8cf0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.auth-field .form-input { height: 40px; font-size: 14px; }
.auth-error { font-size: 12px; color: var(--accent-red); background: rgba(255, 71, 87, .1); border: 1px solid rgba(255, 71, 87, .25); border-radius: 6px; padding: 8px 10px; margin-bottom: 12px; }
.auth-submit { width: 100%; height: 40px; justify-content: center; font-size: 14px; letter-spacing: 2px; }
.auth-submit:disabled { opacity: .65; cursor: not-allowed; }
.auth-demo-title { font-size: 11.5px; color: var(--text-muted); margin: 20px 0 8px; }
.auth-demo-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-demo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 11px; background: #0c1929; border: 1px solid #1d3554; border-radius: 7px; color: var(--text-secondary); cursor: pointer; text-align: left; font-family: inherit; transition: all .18s; }
.auth-demo:hover { border-color: var(--accent-cyan); color: var(--text-primary); background: #0f2136; }
.auth-demo b { font-size: 12.5px; color: var(--text-primary); font-weight: 600; }
.auth-demo span { font-size: 10.5px; color: var(--text-muted); font-family: ui-monospace, Menlo, monospace; }
.auth-foot { margin-top: 18px; text-align: center; font-size: 11.5px; }
.auth-foot a { color: var(--text-muted); cursor: pointer; text-decoration: none; }
.auth-foot a:hover { color: var(--accent-cyan); }

/* ===== 顶栏用户菜单 ===== */
.user-menu { position: absolute; top: 46px; right: 0; width: 230px; background: #0d1c35; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 16px 44px rgba(0, 0, 0, .6); padding: 10px 12px; z-index: 3000; }
.user-menu-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-muted); padding: 4px 0; }
.user-menu-row b { color: var(--text-primary); font-weight: 600; text-align: right; }
.iam-offline { font-size: 10.5px; padding: 2px 8px; border-radius: 10px; color: #ffc46b; background: rgba(255, 180, 72, .12); border: 1px solid rgba(255, 180, 72, .3); }

/* ===== 账号与权限（IAM） ===== */
.iam-hint { font-size: 12.5px; color: #ffc46b; background: rgba(255, 180, 72, .08); border: 1px solid rgba(255, 180, 72, .22); border-radius: 6px; padding: 9px 12px; margin-bottom: 14px; }
.iam-tree { display: flex; flex-direction: column; gap: 2px; }
.iam-tree-row { display: flex; align-items: center; gap: 10px; padding-top: 8px; padding-bottom: 8px; padding-right: 10px; border-bottom: 1px solid rgba(255, 255, 255, .04); border-radius: 4px; }
.iam-tree-row:hover { background: rgba(45, 140, 240, .07); }
.iam-tree-branch { color: var(--text-muted); font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.iam-tree-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.iam-tree-id, .iam-tree-code { font-size: 10.5px; color: var(--text-muted); font-family: ui-monospace, Menlo, monospace; }
.iam-tree-code { margin-left: 2px; }
.iam-tree-actions { margin-left: auto; display: flex; gap: 6px; }
.iam-empty { padding: 30px; text-align: center; font-size: 12.5px; color: var(--text-muted); }
.iam-matrix th, .iam-matrix td { white-space: nowrap; }
.iam-matrix td:first-child { position: sticky; left: 0; background: #0f1f3a; z-index: 1; }
.iam-matrix input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent-blue); }

/* ===== 报警视频联动开关 ===== */
.video-link-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 8px 14px; margin-bottom: 10px; background: linear-gradient(90deg, rgba(20, 44, 78, .92), rgba(12, 28, 50, .92)); border: 1px solid #1d3554; border-radius: 8px; }
.video-link-bar.scenic { margin: 10px 0 12px; }
.vlb-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.vlb-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-secondary); }
.vlb-name { color: var(--text-muted); }
.vlb-on { color: #2ed573; font-weight: 600; }
.vlb-off { color: #ff9f43; font-weight: 600; }
.vlb-note { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.vlb-switch { width: 38px; height: 20px; padding: 0; border-radius: 10px; border: 1px solid #27405f; background: #12233a; cursor: pointer; position: relative; transition: all .18s; }
.vlb-switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #6b7f9c; transition: all .18s; }
.vlb-switch.on { background: rgba(46, 213, 115, .18); border-color: #2ed573; }
.vlb-switch.on i { left: 20px; background: #2ed573; }

/* ===== 景区设备子系统实时运营 ===== */
.subsys-strip { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid #1d3554; border-radius: 10px; background: rgba(13, 30, 54, .78); }
.subsys-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.subsys-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.subsys-sub { font-size: 11px; color: var(--text-muted); }
.subsys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.subsys-card { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid #1d3554; border-radius: 8px; background: linear-gradient(135deg, rgba(18, 40, 70, .9), rgba(10, 24, 42, .9)); }
.subsys-card.warn { border-color: rgba(255, 159, 67, .45); box-shadow: inset 0 0 18px rgba(255, 159, 67, .08); }
.subsys-icon { font-size: 22px; line-height: 1; }
.subsys-main { flex: 1; min-width: 0; }
.subsys-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.subsys-lock { font-size: 9.5px; color: #ffc46b; border: 1px solid rgba(255, 196, 107, .35); border-radius: 8px; padding: 0 5px; white-space: nowrap; }
.subsys-metric { font-size: 11.5px; color: var(--accent-cyan); margin: 3px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subsys-foot { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-muted); }
.subsys-rate { color: #2ed573; font-family: ui-monospace, Menlo, monospace; }
.subsys-bar { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .06); margin-top: 4px; overflow: hidden; }
.subsys-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2d8cf0, #2ed573); }

/* ===== 共享上报配置矩阵 ===== */
.share-loading { padding: 30px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.share-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.share-head b { font-size: 14px; color: var(--text-primary); }
.share-tip { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.share-role { font-size: 11px; padding: 2px 9px; border-radius: 10px; color: #2ed573; background: rgba(46, 213, 115, .1); border: 1px solid rgba(46, 213, 115, .3); white-space: nowrap; }
.share-role.readonly { color: #ffc46b; background: rgba(255, 196, 107, .1); border-color: rgba(255, 196, 107, .3); }
.share-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.share-table th, .share-table td { border: 1px solid #1d3554; padding: 7px 9px; text-align: center; }
.share-table th { background: #10233d; color: var(--text-secondary); font-weight: 600; }
.share-table td:first-child, .share-table th:first-child { text-align: left; }
.share-icon { margin-right: 4px; }
.share-switch { min-width: 62px; padding: 3px 8px; font-size: 11px; border-radius: 10px; border: 1px solid #27405f; background: #12233a; color: #8fa8cc; cursor: pointer; font-family: inherit; }
.share-switch.on { color: #2ed573; border-color: rgba(46, 213, 115, .6); background: rgba(46, 213, 115, .12); }
.share-switch.locked { color: #ffc46b; border-color: rgba(255, 196, 107, .4); background: rgba(255, 196, 107, .1); cursor: not-allowed; }
.share-switch.disabled { opacity: .5; cursor: not-allowed; }
.share-mandatory { margin-top: 16px; padding: 11px 13px; border: 1px solid rgba(255, 196, 107, .3); border-radius: 8px; background: rgba(255, 196, 107, .05); }
.share-mandatory-title { font-size: 12px; color: #ffc46b; margin-bottom: 8px; }
.share-points { display: flex; flex-wrap: wrap; gap: 8px; }
.share-point { font-size: 11px; color: var(--text-secondary); padding: 4px 9px; border: 1px solid #1d3554; border-radius: 6px; background: #0c1929; }
.share-point b { color: #ffc46b; font-weight: 600; }
.share-point i { color: var(--text-muted); font-style: normal; }

/* ===== 报警视频联动弹窗 ===== */
.alert-video-popup { position: fixed; top: 74px; right: 24px; width: 400px; background: #0a1626; border: 1px solid #2d8cf0; border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .65), 0 0 0 1px rgba(45, 140, 240, .18) inset; z-index: 3200; overflow: hidden; animation: vpIn .25s ease; }
@keyframes vpIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.vp-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: linear-gradient(90deg, rgba(45, 140, 240, .22), rgba(45, 140, 240, .06)); }
.vp-live { font-size: 11.5px; color: #7ecbff; display: flex; align-items: center; gap: 6px; font-family: ui-monospace, Menlo, monospace; }
.vp-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff4757; box-shadow: 0 0 8px #ff4757; animation: vpBlink 1.1s infinite; }
@keyframes vpBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.vp-close { background: none; border: none; color: #8fa8cc; font-size: 18px; line-height: 1; cursor: pointer; }
.vp-screen { position: relative; height: 200px; margin: 10px 12px 0; border-radius: 6px; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #23405f, #0d1a29 70%); }
.vp-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(120, 190, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 190, 255, .08) 1px, transparent 1px); background-size: 24px 24px; }
.vp-scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(126, 203, 255, .65), transparent); animation: vpScan 3.2s linear infinite; }
@keyframes vpScan { 0% { top: 0; } 100% { top: 100%; } }
.vp-badge { position: absolute; left: 10px; top: 10px; font-size: 10px; padding: 2px 7px; border-radius: 4px; color: #7ecbff; border: 1px solid rgba(126, 203, 255, .35); background: rgba(10, 22, 38, .6); }
.vp-osd { position: absolute; left: 10px; bottom: 10px; font-size: 11px; color: #cfe6ff; font-family: ui-monospace, Menlo, monospace; line-height: 1.6; text-shadow: 0 1px 2px #000; }
.vp-time { position: absolute; right: 10px; bottom: 10px; font-size: 10.5px; color: #8fb6dd; font-family: ui-monospace, Menlo, monospace; }
.vp-meta { padding: 10px 12px 4px; }
.vp-alert { font-size: 12.5px; color: #ff6b81; font-weight: 600; }
.vp-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.vp-actions { display: flex; gap: 8px; padding: 8px 12px 12px; justify-content: flex-end; }

@media (max-width: 900px) {
  .alert-video-popup { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; }
  .vlb-note { margin-left: 0; width: 100%; }
}

/* ===== 景区内置 BIM 三维地图入口与弹层 ===== */
.bim-entry { display: flex; gap: 18px; margin: 14px 0 16px; padding: 14px; border: 1px solid rgba(0, 212, 255, .28); border-radius: 10px; background: linear-gradient(120deg, rgba(15, 40, 71, .95), rgba(10, 24, 45, .95)); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 212, 255, .05); }
.bim-entry-shot { position: relative; width: 248px; flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 212, 255, .25); background: #050d1c; }
.bim-entry-shot img { display: block; width: 100%; height: 152px; object-fit: cover; }
.bim-entry-badge { position: absolute; left: 8px; top: 8px; font-size: 10px; padding: 2px 7px; border-radius: 4px; color: #7ecbff; border: 1px solid rgba(126, 203, 255, .4); background: rgba(5, 13, 28, .72); letter-spacing: .5px; }
.bim-entry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bim-entry-title { font-size: 15px; font-weight: 600; color: #cfe6ff; }
.bim-entry-desc { font-size: 12px; line-height: 1.75; color: var(--text-secondary); }
.bim-entry-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bim-entry-tags span { font-size: 11px; padding: 3px 8px; border-radius: 3px; color: #8fb6dd; background: rgba(0, 212, 255, .08); border: 1px solid rgba(0, 212, 255, .18); }
.bim-entry-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.bim-entry-actions .btn { text-decoration: none; }

.bim-overlay { position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; padding: 2vh 2vw; background: rgba(3, 9, 19, .84); backdrop-filter: blur(6px); }
.bim-shell { width: 96vw; height: 94vh; display: flex; flex-direction: column; background: #050d1c; border: 1px solid rgba(0, 212, 255, .35); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, .7), 0 0 30px rgba(0, 212, 255, .12); }
.bim-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: #0b1a33; border-bottom: 1px solid rgba(0, 212, 255, .2); }
.bim-bar-title { font-size: 13px; font-weight: 600; color: #cfe6ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bim-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.bim-bar-actions .btn { text-decoration: none; }
.bim-frame { flex: 1; width: 100%; border: 0; display: block; background: #050d1c; }

@media (max-width: 1100px) {
  .bim-entry { flex-direction: column; }
  .bim-entry-shot { width: 100%; }
  .bim-entry-shot img { height: 180px; }
}


/* ===== 场景子系统运行中心（视频 / 广播 / 停车场 / SOS 巡更） ===== */
.scene-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.scene-stat { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(150deg, #14294e 0%, #0d1c38 100%); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(120, 190, 255, .06); }
.scene-stat .ss-ico { font-size: 22px; }
.scene-stat .ss-main b { font-size: 22px; font-weight: 700; color: var(--accent-cyan); font-family: "DIN Alternate", Menlo, monospace; }
.scene-stat .ss-main b i { font-size: 12px; color: var(--text-muted); font-style: normal; font-weight: 400; margin-left: 2px; }
.scene-stat .ss-main em { display: block; font-style: normal; font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.scene-stat.alert { border-color: rgba(255, 71, 87, .4); }
.scene-stat.alert .ss-main b { color: var(--accent-red); }

.scene-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.scene-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--text-secondary); background: linear-gradient(160deg, #14294e, #0e1d38); transition: all .2s; }
.scene-tab:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.scene-tab.active { color: var(--accent-cyan); border-color: var(--accent-cyan); background: linear-gradient(160deg, rgba(0, 212, 255, .14), rgba(13, 28, 56, .9)); box-shadow: 0 0 16px rgba(0, 212, 255, .16); }
.scene-tab-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-red); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.scene-two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1280px) { .scene-strip { grid-template-columns: repeat(3, 1fr); } .scene-two-col { grid-template-columns: 1fr; } }

/* 视频监控 */
.cam-main { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 212, 255, .35); background: radial-gradient(ellipse at 50% 40%, #173a5f 0%, #0a1a2e 70%, #060f1c 100%); box-shadow: inset 0 0 60px rgba(0, 0, 0, .55); margin-bottom: 12px; }
.cam-main::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 212, 255, .05) 0 1px, transparent 1px 4px); pointer-events: none; }
.cam-main::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .5) 100%); pointer-events: none; }
.cam-main.off { filter: grayscale(.45) brightness(.8); }
.cam-hud-top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px; color: #bfe2ff; background: linear-gradient(180deg, rgba(3, 10, 20, .75), transparent); }
.cam-hud-name { font-weight: 600; letter-spacing: .3px; }
.cam-rec { margin-left: auto; color: #ff6b6b; font-weight: 700; animation: blink 1.2s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.cam-hud-bottom { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 8px 12px; font-size: 11px; color: #7ea6c9; background: linear-gradient(0deg, rgba(3, 10, 20, .78), transparent); }
.cam-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.cam-glyph { font-size: 54px; opacity: .55; filter: drop-shadow(0 0 18px rgba(0, 212, 255, .5)); }
.cam-stage-name { font-size: 17px; font-weight: 700; color: #dff1ff; text-shadow: 0 0 16px rgba(0, 212, 255, .45); }
.cam-stage-meta { font-size: 12px; color: #8fb6dd; }
.cam-stage-tip { margin-top: 10px; font-size: 11px; color: #5c86ab; letter-spacing: .5px; }
.cam-offline { margin-top: 12px; padding: 5px 12px; border-radius: 4px; font-size: 12px; color: #ffb3ba; border: 1px solid rgba(255, 71, 87, .35); background: rgba(255, 71, 87, .1); }
.cam-dot { width: 7px; height: 7px; border-radius: 50%; background: #6b8099; display: inline-block; flex-shrink: 0; }
.cam-dot.live { background: var(--accent-green); box-shadow: 0 0 8px rgba(46, 213, 115, .8); }
.cam-dot.warn { background: var(--accent-orange); box-shadow: 0 0 8px rgba(255, 165, 2, .8); }
.cam-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 1500px) { .cam-grid { grid-template-columns: repeat(3, 1fr); } }
.cam-tile { position: relative; aspect-ratio: 16/10; padding: 8px 9px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; background: linear-gradient(150deg, #0c1e36, #12304f); transition: all .2s; overflow: hidden; }
.cam-tile::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 212, 255, .045) 0 1px, transparent 1px 5px); pointer-events: none; }
.cam-tile:hover { border-color: var(--accent-blue); transform: translateY(-2px); }
.cam-tile.active { border-color: var(--accent-cyan); box-shadow: 0 0 0 1px rgba(0, 212, 255, .45), 0 0 18px rgba(0, 212, 255, .22); }
.cam-tile.off { opacity: .55; filter: grayscale(.5); }
.cam-tile-top { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #6f93b6; font-family: Menlo, monospace; }
.cam-tile-name { margin-top: 8px; font-size: 12px; font-weight: 600; color: #cfe6ff; line-height: 1.35; }
.cam-tile-zone { position: absolute; left: 9px; bottom: 7px; font-size: 10px; color: #6f93b6; }

.ptz-pad { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; justify-content: center; margin: 6px 0 12px; }
.ptz-pad span { display: block; }
.ptz-btn { width: 44px; height: 36px; border: 1px solid var(--border-color); border-radius: 5px; background: linear-gradient(160deg, #1a3158, #122240); color: var(--text-primary); font-size: 15px; cursor: pointer; transition: all .15s; }
.ptz-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); box-shadow: 0 0 10px rgba(0, 212, 255, .25); }
.ptz-center { color: var(--accent-cyan); }
.ptz-zoom { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.scene-actions { display: flex; gap: 8px; justify-content: center; margin-bottom: 12px; }
.cam-info { border-top: 1px dashed var(--border-color); padding-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.cam-info div { display: flex; justify-content: space-between; font-size: 12px; }
.cam-info span { color: var(--text-muted); }
.cam-info b { color: var(--text-primary); font-weight: 500; }

.ai-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.ai-item { padding: 9px 11px; border: 1px solid var(--border-color); border-left: 3px solid var(--accent-orange); border-radius: 5px; background: rgba(10, 24, 45, .6); }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-type { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 3px; }
.ai-type.lv-high { color: var(--accent-red); background: rgba(255, 71, 87, .12); }
.ai-type.lv-medium { color: var(--accent-orange); background: rgba(255, 165, 2, .12); }
.ai-type.lv-low { color: var(--text-secondary); background: rgba(140, 168, 204, .12); }
.ai-time { font-size: 11px; color: var(--text-muted); }
.ai-detail { margin: 6px 0; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.ai-foot { display: flex; align-items: center; justify-content: space-between; }
.ai-id { font-size: 10px; color: var(--text-muted); font-family: Menlo, monospace; }

/* 广播 */
.bc-zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.bc-zone { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all .18s; background: rgba(10, 24, 45, .6); }
.bc-zone:hover { border-color: var(--accent-blue); }
.bc-zone.sel { border-color: var(--accent-cyan); background: rgba(0, 212, 255, .1); box-shadow: 0 0 12px rgba(0, 212, 255, .12); }
.bc-zone.warn { border-color: rgba(255, 165, 2, .4); }
.bc-zone-dot { width: 7px; height: 7px; border-radius: 50%; background: #6b8099; flex-shrink: 0; }
.bc-zone-dot.live { background: var(--accent-green); box-shadow: 0 0 7px rgba(46, 213, 115, .7); }
.bc-zone-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.bc-zone-meta { margin-left: auto; font-size: 10px; color: var(--text-muted); }
.bc-textarea { min-height: 92px; line-height: 1.7; resize: vertical; margin-bottom: 10px; }
.bc-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bc-volume { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.bc-volume input { width: 120px; accent-color: var(--accent-cyan); }
.bc-volume b { color: var(--accent-cyan); font-family: Menlo, monospace; }
.bc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.task-list { display: flex; flex-direction: column; gap: 9px; }
.task-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border-color); border-radius: 5px; background: rgba(10, 24, 45, .55); }
.task-time { font-size: 13px; font-weight: 700; color: var(--accent-cyan); font-family: Menlo, monospace; flex-shrink: 0; }
.task-body { flex: 1; min-width: 0; }
.task-name { font-size: 12.5px; color: var(--text-primary); }
.task-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.bc-log-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.bc-log { padding: 8px 10px; border-left: 2px solid rgba(0, 212, 255, .4); background: rgba(10, 24, 45, .5); border-radius: 0 4px 4px 0; }
.bc-log-top { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.bc-log-zone { margin-left: auto; color: var(--text-secondary); }
.bc-log-text { margin-top: 4px; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }

/* 停车场 */
.park-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 4px; }
@media (max-width: 1400px) { .park-grid { grid-template-columns: 1fr; } }
.park-body { display: flex; align-items: center; gap: 20px; padding: 6px 0 14px; }
.park-ring { width: 116px; height: 116px; border-radius: 50%; padding: 10px; position: relative; flex-shrink: 0; }
.park-ring-inner { width: 100%; height: 100%; border-radius: 50%; background: #0b1b30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: inset 0 0 20px rgba(0, 0, 0, .55); }
.park-ring-inner b { font-size: 26px; color: var(--accent-cyan); font-family: "DIN Alternate", Menlo, monospace; }
.park-ring-inner span { font-size: 11px; color: var(--text-muted); }
.park-meta { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.park-meta div { display: flex; justify-content: space-between; font-size: 12px; border-bottom: 1px dashed rgba(30, 58, 95, .7); padding-bottom: 6px; }
.park-meta span { color: var(--text-muted); }
.park-meta b { color: var(--text-primary); font-weight: 600; }
.park-gates { border-top: 1px solid var(--border-color); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.park-gate { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.park-gate .btn { margin-left: auto; }
.plate { font-family: Menlo, monospace; letter-spacing: .5px; color: #d8ecff; }

/* SOS 与巡更 */
.sos-list { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; }
.sos-item { display: flex; gap: 10px; padding: 10px 11px; border: 1px solid var(--border-color); border-radius: 6px; background: rgba(10, 24, 45, .55); }
.sos-item.pending { border-color: rgba(255, 71, 87, .35); background: rgba(255, 71, 87, .04); }
.sos-ico { font-size: 20px; flex-shrink: 0; }
.sos-body { flex: 1; min-width: 0; }
.sos-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sos-top b { font-size: 13px; color: var(--text-primary); }
.sos-time { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.sos-zone { margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.sos-note { margin-top: 5px; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.sos-foot { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.sos-status { font-size: 11px; padding: 2px 8px; border-radius: 3px; }
.sos-status.p { color: var(--accent-red); background: rgba(255, 71, 87, .13); }
.sos-status.d { color: var(--accent-orange); background: rgba(255, 165, 2, .13); }
.sos-status.c { color: var(--accent-green); background: rgba(46, 213, 115, .13); }
.sos-foot .btn-primary { margin-left: auto; }
.patrol-list { display: flex; flex-direction: column; gap: 8px; }
.patrol-item { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 1px solid var(--border-color); border-radius: 5px; background: rgba(10, 24, 45, .5); }
.patrol-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #04121f; background: linear-gradient(135deg, #4fd7ff, #2d8cf0); }
.patrol-body { flex: 1; min-width: 0; }
.patrol-name { font-size: 12.5px; color: var(--text-primary); }
.patrol-role { font-size: 10px; color: var(--text-muted); margin-left: 4px; }
.patrol-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.progress { height: 5px; margin-top: 6px; border-radius: 3px; background: rgba(45, 140, 240, .15); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan)); }
.link-tags { display: flex; flex-wrap: wrap; gap: 4px; }

/* 一键联动弹层 */
.link-hero { padding: 12px 14px; border: 1px solid rgba(255, 71, 87, .35); border-radius: 7px; background: rgba(255, 71, 87, .06); margin-bottom: 14px; }
.link-hero-main { display: flex; align-items: center; gap: 12px; }
.link-hero-ico { font-size: 26px; }
.link-hero-title { font-size: 15px; font-weight: 600; color: #ffe2e5; }
.link-hero-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.link-hero-note { margin-top: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.link-steps { display: flex; flex-direction: column; gap: 9px; }
.link-step { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border-color); border-radius: 6px; background: rgba(10, 24, 45, .6); transition: all .25s; }
.link-step.done { border-color: rgba(46, 213, 115, .45); background: rgba(46, 213, 115, .07); }
.link-step-icon { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; border-radius: 50%; background: rgba(45, 140, 240, .13); border: 1px solid rgba(45, 140, 240, .28); }
.link-step.done .link-step-icon { background: rgba(46, 213, 115, .15); border-color: rgba(46, 213, 115, .4); }
.link-step-body { flex: 1; min-width: 0; }
.link-step-title { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.link-step-detail { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* ===== 巡更任务闭环 ===== */
.guard-layout { display: grid; grid-template-columns: 0.95fr 1.35fr; gap: 16px; align-items: start; }
@media (max-width: 1280px) { .guard-layout { grid-template-columns: 1fr; } }
.guard-task-list { display: flex; flex-direction: column; gap: 10px; }
.guard-task { cursor: pointer; padding: 12px 14px; transition: all .2s; border-left: 3px solid transparent; }
.guard-task:hover { border-color: var(--accent-blue); transform: translateY(-1px); }
.guard-task.active { border-color: var(--accent-cyan); border-left-color: var(--accent-cyan); box-shadow: 0 0 18px rgba(0, 212, 255, .18); }
.guard-task-head { display: flex; align-items: center; gap: 10px; }
.guard-task-title { flex: 1; min-width: 0; }
.guard-task-title b { display: block; font-size: 13px; color: var(--text-primary); font-weight: 600; }
.guard-task-title span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.guard-progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.guard-progress .progress { flex: 1; margin: 0; }
.guard-progress span { font-size: 11px; color: var(--text-secondary); font-family: Menlo, monospace; }
.guard-task-foot { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.guard-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 14px; padding: 10px 12px; margin-bottom: 12px; border: 1px dashed var(--border-color); border-radius: 6px; background: rgba(10, 24, 45, .45); }
.guard-meta div { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.guard-meta span { color: var(--text-muted); flex-shrink: 0; }
.guard-meta b { color: var(--text-primary); font-weight: 500; text-align: right; }
.guard-checks { display: flex; flex-direction: column; gap: 7px; max-height: 430px; overflow-y: auto; padding-right: 2px; }
.guard-check { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 5px; background: rgba(10, 24, 45, .5); }
.guard-check.done { border-color: rgba(46, 213, 115, .25); }
.guard-check.missed { border-color: rgba(255, 71, 87, .42); background: rgba(255, 71, 87, .05); }
.guard-check-no { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #9fc3e6; background: rgba(45, 140, 240, .14); border: 1px solid rgba(45, 140, 240, .3); }
.guard-check.done .guard-check-no { color: #04121f; background: var(--accent-green); border-color: var(--accent-green); }
.guard-check.missed .guard-check-no { color: #fff; background: var(--accent-red); border-color: var(--accent-red); }
.guard-check-body { flex: 1; min-width: 0; }
.guard-check-name { font-size: 12.5px; color: var(--text-primary); }
.guard-check-type { margin-left: 5px; padding: 0 4px; font-size: 10px; color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 3px; }
.guard-check-window { margin-top: 2px; font-size: 10.5px; color: var(--text-muted); }
.guard-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.guard-route-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 1200px) { .guard-route-grid { grid-template-columns: 1fr; } }
.guard-route-meta { display: flex; gap: 24px; padding: 4px 0 10px; border-bottom: 1px dashed var(--border-color); }
.guard-route-meta div { display: flex; flex-direction: column; gap: 2px; }
.guard-route-meta span { font-size: 10.5px; color: var(--text-muted); }
.guard-route-meta b { font-size: 13px; color: var(--accent-cyan); font-weight: 600; }
.guard-points { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.guard-point { padding: 3px 8px; font-size: 11px; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 3px; background: rgba(10, 24, 45, .6); }
.guard-event-list { display: flex; flex-direction: column; gap: 10px; }
.guard-event { display: flex; gap: 12px; padding: 12px 14px; }
.guard-event.pending { border-color: rgba(255, 165, 2, .35); background: rgba(255, 165, 2, .04); }
.guard-event-ico { font-size: 22px; flex-shrink: 0; }
.guard-event-body { flex: 1; min-width: 0; }
.guard-event-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guard-event-top b { font-size: 13px; color: var(--text-primary); }
.guard-event-zone { font-size: 11px; color: var(--text-secondary); }
.guard-event-time { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.guard-event-desc { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.guard-event-foot { margin-top: 8px; display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted); }
.guard-event-foot .btn { margin-left: auto; }

/* ============================================================
   墨绿荧光 · 综合管控指挥大屏主题（全局换肤）
   参考素材库《综管效果图》：深墨绿底 / 荧光绿 / 金色高亮 / 切角描边面板
   ============================================================ */

/* ----- 经典深蓝皮肤（顶栏「切换皮肤」回退） ----- */
body.skin-blue {
  --bg-primary: #0a1628;
  --bg-secondary: #0f1f3a;
  --bg-tertiary: #16294d;
  --bg-card: #122240;
  --bg-card-hover: #1a3158;
  --border-color: #1e3a5f;
  --text-primary: #e8f0ff;
  --text-secondary: #8fa8cc;
  --text-muted: #5a7ba0;
  --accent-blue: #2d8cf0;
  --accent-cyan: #00d4ff;
  --accent-green: #2ed573;
  --accent-orange: #ffa502;
  --accent-red: #ff4757;
  --accent-purple: #a55eea;
  --accent-yellow: #ffd700;
  --accent-rgb: 0, 212, 255;
  --gold-rgb: 255, 215, 0;
  --gold: #ffd700;
  --panel-bg: linear-gradient(160deg, #13274a 0%, #0e1d38 100%);
  --panel-line: rgba(45, 140, 240, 0.35);
  --glow: rgba(45, 140, 240, 0.35);
}

body { background: var(--bg-primary); }
.content-area {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.07), transparent 55%),
    linear-gradient(rgba(var(--accent-rgb), 0.028) 1px, transparent 1px) 0 0 / 100% 34px,
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.028) 1px, transparent 1px) 0 0 / 34px 100%,
    var(--bg-primary);
}
.sidebar { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), transparent 55%), var(--bg-secondary); }
.logo-area { background: rgba(var(--accent-rgb), 0.05); }
.logo-text { background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-item:hover { background: rgba(var(--accent-rgb), 0.09); }
.nav-item.active { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.18), transparent); color: var(--accent-cyan); border-left-color: var(--accent-cyan); text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5); }
.nav-group-title { color: var(--text-muted); }
.toggle-btn:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-cyan); }
.topbar-icon:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-cyan); }

.quick-search-input { background: rgba(var(--accent-rgb), 0.05); border-color: var(--panel-line); }
.quick-search-input:focus { background: var(--bg-tertiary); border-color: var(--accent-cyan); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15); }
.quick-search-panel { background: #041712; border-color: var(--panel-line); }
.quick-search-item:hover, .quick-search-item.active { background: rgba(var(--accent-rgb), 0.09); border-left-color: var(--accent-cyan); }
.quick-search-star { background: var(--accent-cyan); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.7); }
.quick-search-tag { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-cyan); border-color: rgba(var(--accent-rgb), 0.28); }
.user-menu { background: #041712; border-color: var(--panel-line); }

.card { background: var(--panel-bg); border-color: var(--panel-line); position: relative; }
.card:hover { border-color: rgba(var(--accent-rgb), 0.5); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(var(--accent-rgb), 0.1); }
.card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.7;
  background:
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 top 0 / 16px 1px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 top 0 / 1px 16px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 top 0 / 16px 1px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 top 0 / 1px 16px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 bottom 0 / 16px 1px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 bottom 0 / 1px 16px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 bottom 0 / 16px 1px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 bottom 0 / 1px 16px;
  background-repeat: no-repeat;
}
.card-title { text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25); }
.card-title::before { background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); }

.btn { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.1), rgba(2, 14, 12, 0.9)); border-color: var(--panel-line); }
.btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.28); }
.btn-primary { background: linear-gradient(135deg, var(--accent-green), #0aa877); border-color: var(--accent-green); color: #03120e; font-weight: 600; box-shadow: 0 2px 14px rgba(var(--accent-rgb), 0.35); }
.btn-primary:hover { background: linear-gradient(135deg, #4dffc4, var(--accent-green)); color: #03120e; box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.45); }
.btn-success { background: var(--accent-green); border-color: var(--accent-green); color: #03120e; }
.btn-warning { background: var(--accent-orange); border-color: var(--accent-orange); color: #1a1400; }

.tag-blue { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-cyan); border-color: rgba(var(--accent-rgb), 0.28); }

th { background: rgba(var(--accent-rgb), 0.08); border-bottom-color: var(--panel-line); }
td { border-bottom-color: rgba(var(--accent-rgb), 0.1); }
tr:hover td { background: rgba(var(--accent-rgb), 0.07); }

.form-input, .form-select, .form-textarea, .map-region-select { background: var(--bg-tertiary); border-color: var(--border-color); }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent-cyan); }

.kpi-card { background: var(--panel-bg); border-color: var(--panel-line); }
.kpi-card:hover { border-color: var(--accent-cyan); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 22px rgba(var(--accent-rgb), 0.16); }
.kpi-card::after { background: radial-gradient(ellipse at 50% -30%, rgba(var(--accent-rgb), 0.14), transparent 60%); }
.kpi-value { text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.3); }

.modal-overlay { background: rgba(1, 9, 7, 0.74); backdrop-filter: blur(3px); }
.modal { background: linear-gradient(160deg, #06251d 0%, #03120e 100%); border-color: var(--panel-line); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65), 0 0 40px rgba(var(--accent-rgb), 0.1); }
.modal-header { border-bottom-color: rgba(var(--accent-rgb), 0.16); }
.modal-footer { border-top-color: rgba(var(--accent-rgb), 0.16); }

.map-screen { background: linear-gradient(rgba(3, 18, 14, 0.72), rgba(2, 14, 12, 0.82)), radial-gradient(ellipse at center, #063023 0%, #02110d 100%); border-color: rgba(var(--accent-rgb), 0.22); box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.08), inset 0 0 80px rgba(0, 0, 0, 0.55); }
.map-screen.map-fullscreen { background: linear-gradient(rgba(3, 18, 14, 0.78), rgba(2, 14, 12, 0.86)), radial-gradient(ellipse at center, #063023 0%, #02110d 100%); }
.map-toolbar .btn.active { background: linear-gradient(135deg, var(--accent-green), #0aa877); border-color: var(--accent-green); color: #03120e; box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45); }

.mt-panel { background: var(--panel-bg); border-color: var(--panel-line); }
.mt-stat { background: var(--panel-bg); border-color: var(--panel-line); }
.bim-bar { background: rgba(var(--accent-rgb), 0.07); border-bottom-color: rgba(var(--accent-rgb), 0.2); }
.scene-tab { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.1), rgba(2, 14, 12, 0.9)); border-color: var(--panel-line); }
.ptz-btn { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.1), rgba(2, 14, 12, 0.9)); border-color: var(--panel-line); }
.iam-matrix td:first-child { background: var(--bg-secondary); }
.guard-meta, .guard-check, .guard-point { background: rgba(var(--accent-rgb), 0.045); }
.guard-check-no { color: var(--accent-cyan); background: rgba(var(--accent-rgb), 0.14); border-color: rgba(var(--accent-rgb), 0.3); }

/* 景区 / 集团控制台变量换肤 */
.scenic-console, .group-console {
  --cd-bg: #03120e;
  --cd-card: #061c16;
  --cd-card-2: #04140f;
  --cd-border: rgba(var(--accent-rgb), 0.12);
  --cd-text: #e6fff6;
  --cd-dim: #8fd6bd;
  --cd-mute: #4f8f7a;
  --cd-accent: #00ffb2;
  --cd-accent-2: #f5c542;
  --cd-ok: #17e6a1;
  --cd-cyan: #7de3c5;
  --cd-danger: #ff5d5d;
}
.cd-kpi { background: linear-gradient(180deg, #07241d 0%, #04150f 100%); }
.cd-ticker-tag { color: var(--gold); background: rgba(var(--gold-rgb), 0.1); border-color: rgba(var(--gold-rgb), 0.28); }
.cd-lv.lv-medium { color: var(--gold); background: rgba(var(--gold-rgb), 0.1); border-color: rgba(var(--gold-rgb), 0.24); }
.cd-card table tbody tr:hover td { background: rgba(var(--accent-rgb), 0.05); }

/* ----- 顶栏：左侧时钟 / 居中主标题 / 右侧模块标签 ----- */
.topbar {
  display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 12px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(2, 14, 11, 0.9)), var(--bg-secondary);
  border-bottom-color: rgba(var(--accent-rgb), 0.22);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(var(--accent-rgb), 0.18);
  padding: 0 18px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 12px; min-width: 0; justify-content: flex-end; }
.cmd-clock { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.4px; }
.cmd-clock-week { color: var(--accent-cyan); font-weight: 600; }
.cmd-clock b { color: var(--text-primary); font-weight: 600; }
.skin-switch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12px; color: var(--text-secondary); background: rgba(var(--accent-rgb), 0.06); border: 1px solid var(--panel-line); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.skin-switch:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25); }
.cmd-title { position: relative; min-width: 0; max-width: 100%; justify-self: center; text-align: center; padding: 0 12px; overflow: hidden; }
.cmd-title::before, .cmd-title::after { content: ''; position: absolute; top: 50%; width: 14px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.9)); }
.cmd-title::before { left: 0; }
.cmd-title::after { right: 0; transform: scaleX(-1); }
.cmd-title-main {
  display: block; font-size: 22px; font-weight: 800; letter-spacing: 2px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, #9fffe0, #ffffff 34%, var(--accent-cyan) 66%, #9fffe0);
  background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.45)); animation: titleFlow 8s linear infinite;
}
.cmd-title-sub { display: block; margin-top: 1px; font-size: 11px; letter-spacing: 3px; color: #7fb8a1; white-space: nowrap; }
.cmd-tabs { display: flex; align-items: center; gap: 6px; }
.cmd-tab { padding: 5px 12px; font-size: 12px; letter-spacing: 1px; white-space: nowrap; cursor: pointer; color: #8fd6bd; background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(2, 14, 12, 0.9)); border: 1px solid var(--panel-line); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); transition: all 0.2s; }
.cmd-tab:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.cmd-tab.active { background: linear-gradient(180deg, #f9dc7c, #dfb52f); border-color: #ffe89a; color: #1a1400; font-weight: 700; box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.45); text-shadow: none; }
.topbar-right .lang-switch, .topbar-right .topbar-icon { flex-shrink: 0; }
.user-meta { line-height: 1.25; }

/* ----- 指挥大屏：三栏布局 ----- */
.cmd-screen {
  position: relative; border-radius: var(--radius); padding: 12px;
  min-height: calc(100vh - 104px);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  background: radial-gradient(ellipse at 50% 42%, rgba(var(--accent-rgb), 0.1), transparent 62%), var(--bg-primary);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.55), 0 0 32px rgba(var(--accent-rgb), 0.06);
  overflow: hidden;
}
.cmd-screen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background:
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 top 0 / 30px 2px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 top 0 / 2px 30px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 top 0 / 30px 2px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 top 0 / 2px 30px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 bottom 0 / 30px 2px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) left 0 bottom 0 / 2px 30px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 bottom 0 / 30px 2px,
    linear-gradient(var(--accent-cyan), var(--accent-cyan)) right 0 bottom 0 / 2px 30px;
  background-repeat: no-repeat;
}
.cmd-screen.map-fullscreen { position: fixed; inset: 0; z-index: 950; width: 100vw; height: 100vh; border-radius: 0; border: none; padding: 14px; background: var(--bg-primary); overflow: hidden; }
.cmd-grid { position: relative; display: grid; grid-template-columns: 310px minmax(0, 1fr) 310px; gap: 12px; height: calc(100vh - 132px); min-height: 660px; align-items: stretch; }
.cmd-screen.map-fullscreen .cmd-grid { height: calc(100vh - 28px); }
.cmd-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; }
.cmd-col-left, .cmd-col-right { overflow-y: auto; padding-right: 2px; }

.cmd-panel {
  position: relative; padding: 10px 12px;
  background: var(--panel-bg);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), 0.06), 0 6px 20px rgba(0, 0, 0, 0.35);
}
.cmd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.14); }
.cmd-panel-title { display: flex; align-items: center; gap: 8px; flex-shrink: 0; font-size: 14px; font-weight: 600; letter-spacing: 2px; color: #eafff7; white-space: nowrap; }
.cmd-panel-title::before { content: ''; width: 4px; height: 13px; transform: skewX(-18deg); background: var(--accent-cyan); box-shadow: 0 0 9px var(--accent-cyan); }
.cmd-panel-sub { min-width: 0; font-size: 11.5px; color: #8fd6bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-panel-tag { font-size: 11.5px; padding: 1px 7px; color: var(--accent-cyan); border: 1px solid rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.08); white-space: nowrap; }

/* 左栏：旅游资源 */
.cmd-res-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cmd-res-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; background: rgba(var(--accent-rgb), 0.04); border: 1px solid rgba(var(--accent-rgb), 0.12); position: relative; transition: all 0.2s; }
.cmd-res-item:hover { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.4); box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.14); }
.cmd-res-icon { width: 24px; height: 24px; display: grid; place-items: center; font-size: 16px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.2), transparent 72%); }
.cmd-res-name { max-width: 100%; font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-res-num { font-size: 13.5px; font-weight: 700; color: var(--accent-cyan); font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* 左栏：客流 / 车流趋势 */
.cmd-trend { flex: 1 1 0; min-height: 132px; display: flex; flex-direction: column; }
.cmd-spark-wrap { position: relative; flex: 1; min-height: 66px; }
.cmd-spark { display: block; width: 100%; height: 100%; }
.cmd-spark-line { fill: none; stroke: var(--accent-cyan); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.55)); }
.cmd-spark-line.gold { stroke: var(--gold); filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.45)); }
.cmd-spark-area { fill: rgba(var(--accent-rgb), 0.12); }
.cmd-spark-area.gold { fill: rgba(var(--gold-rgb), 0.12); }
.cmd-spark-dot { fill: var(--gold); stroke: #03120e; stroke-width: 1; }
.cmd-spark-axis { display: flex; justify-content: space-between; margin-top: 3px; font-size: 11.5px; color: #8fd6bd; font-family: ui-monospace, Menlo, monospace; }
.cmd-spark-peak { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.cmd-spark-peak b { font-size: 16px; color: var(--gold); font-family: ui-monospace, Menlo, monospace; }

/* 中栏：主视觉数字面板 */
.cmd-hero {
  position: relative; flex: 0 0 auto; padding: 12px 20px 10px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(2, 18, 15, 0.5) 62%, rgba(2, 18, 15, 0.18));
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
  overflow: hidden;
}
.cmd-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% -10%, rgba(var(--accent-rgb), 0.2), transparent 62%); }
.cmd-hero-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cmd-hero-stat { flex: 1; min-width: 0; text-align: center; }
.cmd-hero-label { font-size: 12.5px; letter-spacing: 1px; color: #9fe0c9; }
.cmd-hero-value { font-size: 36px; font-weight: 800; line-height: 1.12; letter-spacing: -0.5px; color: var(--accent-cyan); text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.55); font-family: "DIN Alternate", "Bahnschrift", ui-monospace, Menlo, monospace; white-space: nowrap; }
.cmd-hero-digits { display: flex; align-items: center; justify-content: center; gap: 5px; height: 38px; }
.cmd-hero-digits span { display: grid; place-items: center; min-width: 26px; height: 36px; padding: 0 3px; font-size: 26px; font-weight: 700; font-family: ui-monospace, Menlo, monospace; color: #ffe37a; background: rgba(var(--gold-rgb), 0.08); border: 1px solid rgba(var(--gold-rgb), 0.42); box-shadow: inset 0 0 12px rgba(var(--gold-rgb), 0.18), 0 0 10px rgba(var(--gold-rgb), 0.12); }
.cmd-hero-divider { width: 1px; height: 46px; flex-shrink: 0; background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.5), transparent); }
.cmd-hero-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 9px; padding-top: 9px; border-top: 1px dashed rgba(var(--accent-rgb), 0.18); flex-wrap: wrap; }
.cmd-hero-total { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.cmd-hero-total b { font-size: 18px; color: var(--accent-cyan); font-family: ui-monospace, Menlo, monospace; text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4); }
.cmd-hero-total i { font-style: normal; font-size: 11.5px; color: #7fb8a1; }
.cmd-hero-levels { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12px; color: #8fd6bd; }
.cmd-level-item { display: flex; align-items: center; gap: 4px; }
.cmd-level-item i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cmd-level-item b { color: var(--text-primary); font-family: ui-monospace, Menlo, monospace; font-size: 13px; }

/* 中栏：地图 */
.cmd-map { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cmd-map-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cmd-map-nav { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.cmd-map-nav select { height: 26px; min-width: 104px; padding: 0 6px; font-size: 11.5px; font-family: inherit; color: var(--text-primary); background: rgba(var(--accent-rgb), 0.06); border: 1px solid var(--panel-line); outline: none; }
.cmd-map-nav select:focus { border-color: var(--accent-cyan); }
.cmd-map-nav select:disabled { opacity: 0.7; }
.cmd-map-nav select option { color: #e6fff6; background: #04160f; }
.cmd-map-path { font-size: 11.5px; color: var(--accent-cyan); white-space: nowrap; }
.cmd-map-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cmd-mini-btn { padding: 3px 8px; font-size: 11.5px; color: var(--text-secondary); background: rgba(var(--accent-rgb), 0.05); border: 1px solid rgba(var(--accent-rgb), 0.18); cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.cmd-mini-btn:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.cmd-mini-btn.active { color: #03120e; font-weight: 600; background: linear-gradient(180deg, #4dffc4, var(--accent-green)); border-color: var(--accent-green); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35); }
.cmd-mini-btn.gold { color: var(--gold); border-color: rgba(var(--gold-rgb), 0.4); }
.cmd-mini-btn.gold:hover { color: #ffe37a; border-color: var(--gold); }
.cmd-map-body { position: relative; flex: 1; min-height: 0; }
.cmd-map-body .chart-container.xl { height: 100%; min-height: 320px; border-radius: 4px; }
.cmd-map-legend { position: absolute; left: 8px; bottom: 8px; z-index: 6; padding: 7px 9px; font-size: 11.5px; color: #a9e6d2; background: rgba(2, 14, 11, 0.62); border: 1px solid rgba(var(--accent-rgb), 0.16); backdrop-filter: blur(3px); }
.cmd-legend-row { display: flex; align-items: center; gap: 7px; line-height: 1.6; }
.cmd-legend-row i { width: 16px; height: 7px; flex-shrink: 0; }
.cmd-insight { position: absolute; z-index: 8; width: 186px; padding: 9px 11px; background: linear-gradient(160deg, rgba(2, 28, 22, 0.95), rgba(1, 15, 12, 0.96)); border: 1px solid rgba(var(--accent-rgb), 0.38); border-radius: 4px; box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.18); animation: portrait-in 0.15s ease-out; }
@keyframes portrait-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
.cmd-insight-title { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.2); font-size: 12px; font-weight: 600; color: var(--accent-cyan); }
.cmd-insight-title span { font-size: 11.5px; font-weight: 400; color: #8fd6bd; flex: 1; }
.cmd-insight-close { width: 16px; height: 16px; line-height: 14px; padding: 0; border: none; background: transparent; color: #8fd6bd; font-size: 14px; font-weight: 700; cursor: pointer; border-radius: 3px; transition: background 0.15s, color 0.15s; }
.cmd-insight-close:hover { background: rgba(255, 71, 87, 0.18); color: #ff6b81; }
.cmd-insight-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0; font-size: 12px; color: #a9e6d2; }
.cmd-insight-row b { font-size: 12.5px; color: var(--text-primary); font-family: ui-monospace, Menlo, monospace; }
.cmd-insight-row b.gold { color: var(--gold); }
.cmd-drill-tip { position: absolute; left: 8px; top: 8px; z-index: 6; max-width: 55%; padding: 5px 9px; font-size: 11.5px; color: var(--text-secondary); background: rgba(2, 14, 11, 0.66); border: 1px solid rgba(var(--accent-rgb), 0.16); }
.cmd-drill-tip .drill-path { color: var(--accent-cyan); }
.cmd-back-btn { position: absolute; right: 10px; top: 8px; z-index: 7; }

/* 右栏：智慧景区 / 应急配备 / 视频监控 */
.cmd-list { display: flex; flex-direction: column; }
.cmd-list-row { display: flex; align-items: center; gap: 8px; padding: 4px 7px; border-bottom: 1px solid rgba(var(--accent-rgb), 0.08); cursor: pointer; transition: all 0.15s; }
.cmd-list-row:last-child { border-bottom: none; }
.cmd-list-row:hover { background: rgba(var(--accent-rgb), 0.07); }
.cmd-list-icon { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 72%); border-radius: 50%; }
.cmd-list-main { flex: 1; min-width: 0; }
.cmd-list-name { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-list-desc { margin-top: 1px; font-size: 11.5px; color: #8fd6bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-list-unit { font-size: 11.5px; color: #8fd6bd; flex-shrink: 0; }
.cmd-list-value { flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--accent-cyan); font-family: ui-monospace, Menlo, monospace; }
.cmd-list-value.gold { color: var(--gold); }

.cmd-video { flex: 1 1 auto; min-height: 148px; display: flex; flex-direction: column; }
.cmd-video-place { font-size: 11.5px; color: #9fe0c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.cmd-video-shot { position: relative; flex: 1; min-height: 96px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), 0.3); background: #02110d; }
.cmd-video-shot img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) brightness(0.82) contrast(1.05); }
.cmd-video-shot::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 3px); opacity: 0.5; }
.cmd-video-osd { position: absolute; z-index: 2; padding: 1px 5px; font-size: 11.5px; color: #eafff7; background: rgba(1, 12, 9, 0.5); text-shadow: 0 1px 2px #000; letter-spacing: 0.5px; }
.cmd-video-osd.tl { left: 7px; top: 5px; }
.cmd-video-osd.tr { right: 7px; top: 5px; color: var(--accent-cyan); }
.cmd-video-osd.br { right: 7px; bottom: 5px; color: var(--gold); }
.cmd-video-people { position: absolute; z-index: 2; left: 7px; bottom: 5px; padding: 1px 6px; font-size: 11.5px; color: #ffe37a; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(var(--gold-rgb), 0.45); }
.cmd-video-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; }
.cmd-video-dot { width: 20px; height: 3px; background: rgba(var(--accent-rgb), 0.22); cursor: pointer; }
.cmd-video-dot.active { background: var(--accent-cyan); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6); }
.cmd-video-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11.5px; color: #9fe0c9; }
.cmd-video-foot .cmd-mini-btn { padding: 2px 7px; }
.cmd-linkage { display: flex; flex-direction: column; gap: 4px; }
.cmd-linkage .vlb-item { padding: 1px 0; }
.cmd-search-panel { padding: 8px 10px; }
.cmd-quick-search { width: 100%; }
.cmd-quick-search .quick-search-input { height: 30px; font-size: 12px; }
.cmd-quick-search .quick-search-panel { width: 360px; top: 36px; }
.topbar-right .user-meta { display: none; }
.topbar-right { gap: 10px; }

/* 场景子系统 / 数据共享 / 监控视频等残留配色统一 */
.scene-stat { background: var(--panel-bg); border-color: var(--panel-line); }
.scene-tab.active { background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.16), rgba(3, 20, 15, 0.9)); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.16); }
.cam-main { border-color: rgba(var(--accent-rgb), 0.35); background: radial-gradient(ellipse at 50% 40%, #0c3a2d 0%, #04160f 70%, #02100d 100%); }
.cam-main::before { background: repeating-linear-gradient(0deg, rgba(var(--accent-rgb), 0.05) 0 1px, transparent 1px 4px); }
.cam-tile { background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.1), rgba(3, 24, 18, 0.95)); }
.cam-tile::before { background: repeating-linear-gradient(0deg, rgba(var(--accent-rgb), 0.045) 0 1px, transparent 1px 5px); }
.cam-tile.active { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.45), 0 0 18px rgba(var(--accent-rgb), 0.22); }
.cam-hud-top { color: #cfe9dd; }
.cam-hud-bottom { color: var(--text-muted); }
.cam-stage-name { color: #e6fff6; text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45); }
.cam-stage-meta { color: var(--text-secondary); }
.cam-stage-tip, .cam-tile-top, .cam-tile-zone { color: var(--text-muted); }
.cam-glyph { filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), 0.5)); }
.cam-tile-name { color: #e6fff6; }
.cam-dot.live { box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8); }
.video-link-bar { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08), rgba(2, 14, 12, 0.9)); border-color: var(--panel-line); }
.share-table th { background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.16); }
.share-table th, .share-table td { border-color: rgba(var(--accent-rgb), 0.14); }
.share-switch { background: rgba(var(--accent-rgb), 0.06); border-color: rgba(var(--accent-rgb), 0.28); color: var(--text-secondary); }
.share-point { background: rgba(var(--accent-rgb), 0.04); border-color: rgba(var(--accent-rgb), 0.16); }
.mt-poi-core { color: #e6fff6; background: radial-gradient(circle at 35% 30%, #12553f, #031712 75%); }

/* 首页明细表（保留原景区运行明细，置于大屏下方） */
.cmd-detail { margin-top: 12px; }
.cmd-detail .card-title { font-size: 14px; }

/* 项目与案例库弹窗 */
.proj-table { width: 100%; border-collapse: collapse; }
.proj-table td, .proj-table th { font-size: 11.5px; padding: 8px 8px; white-space: nowrap; }
.proj-table th { text-align: left; color: var(--text-muted); font-weight: 500; }
.proj-table td:nth-child(1) { white-space: normal; min-width: 168px; font-weight: 600; color: #e6fff6; }
.proj-table td:nth-child(5) { white-space: normal; min-width: 210px; }
.proj-table td:nth-child(6) { white-space: normal; min-width: 140px; font-size: 10.5px; }
.proj-status { font-size: 10px; padding: 1px 7px; border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--accent-cyan); background: rgba(var(--accent-rgb), 0.1); }
.proj-status.plan { color: var(--gold); border-color: rgba(var(--gold-rgb), 0.4); background: rgba(var(--gold-rgb), 0.1); }
.proj-note { font-size: 10.5px; color: var(--text-muted); margin-top: -4px; }

/* 顶栏全屏按钮 */
.topbar-fs-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  font-size: 12px; font-family: inherit; color: var(--text-secondary);
  background: rgba(var(--accent-rgb), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 3px; cursor: pointer; white-space: nowrap; transition: all 0.15s; flex-shrink: 0;
}
.topbar-fs-btn:hover { color: var(--accent-cyan); border-color: var(--accent-cyan); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.22); }
.topbar-fs-btn.active { color: #03120e; font-weight: 600; background: linear-gradient(180deg, #4dffc4, var(--accent-green)); border-color: var(--accent-green); }

/* 整站全屏：1920×1080 设计稿等比缩放，非 16:9 留黑边 */
body.bs-bigscreen { overflow: hidden; background: #000; }
body.bs-bigscreen #app {
  position: fixed; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--bs-scale, 1));
  transform-origin: center center;
}
body.bs-bigscreen .app-layout { height: 1080px; }
body.bs-bigscreen .content-area { overflow-y: auto; }
/* 大屏模式下用设计稿高度替代 vh，保证等比缩放后三栏铺满 */
body.bs-bigscreen .cmd-screen { min-height: calc(1080px - 104px); }
body.bs-bigscreen .cmd-grid { height: calc(1080px - 132px); min-height: 0; }
body.bs-bigscreen .map-screen { min-height: calc(1080px - 104px); }

/* 资源库：行可点击 + 详情页 */
.row-link { cursor: pointer; transition: background 0.15s; }
.row-link:hover { background: rgba(var(--accent-rgb), 0.07); }
.row-link:hover .link-text { color: var(--accent-cyan); text-decoration: underline; }
.link-text { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.lib-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.lib-detail-title { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; color: var(--text-primary); }
.lib-detail-icon { font-size: 22px; }
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table th, .detail-table td { padding: 9px 10px; font-size: 13px; text-align: left; border-bottom: 1px solid var(--border-color); }
.detail-table th { width: 110px; font-weight: 500; color: var(--text-muted); background: rgba(var(--accent-rgb), 0.03); white-space: nowrap; }
.detail-table td { color: var(--text-primary); }

/* ----- 响应式 ----- */
@media (max-width: 1900px) {
  .topbar-right { gap: 8px; }
  .topbar-right .lang-switch, .topbar-right .iam-offline { display: none; }
  .cmd-title { padding: 0 8px; }
  .cmd-title-main { font-size: 19px; letter-spacing: 1px; }
  .cmd-tabs { gap: 4px; }
  .cmd-tab { padding: 5px 9px; }
}
/* 中等宽度：全屏按钮收成图标，给标题让位，保证标题不被省略号截断（见文件下方同名媒体查询） */
@media (max-width: 1600px) {
  .cmd-grid { grid-template-columns: 270px minmax(0, 1fr) 270px; }
  .cmd-title { padding: 0 8px; }
  .cmd-title-main { font-size: 18px; letter-spacing: 1px; }
  .cmd-title-sub { display: none; }
  .cmd-tabs { gap: 4px; }
  .topbar-right .lang-switch { display: none; }
  .cmd-tab { padding: 5px 9px; font-size: 11px; }
  .cmd-hero-value { font-size: 30px; }
  .cmd-res-grid { gap: 4px; }
  .cmd-res-item { padding-left: 0; padding-right: 0; }
  .cmd-res-name { font-size: 11.5px; }
  .user-meta { display: none; }
}
@media (max-width: 1400px) {
  .cmd-clock { display: none; }
  .quick-search { width: 200px; }
  .quick-search-panel { width: 300px; }
  .cmd-grid { grid-template-columns: 258px minmax(0, 1fr) 258px; }
  .cmd-title-main { font-size: 18px; letter-spacing: 1px; }
  .cmd-res-name { font-size: 11px; }
  .cmd-res-num { font-size: 12.5px; }
  .cmd-hero-digits { gap: 4px; height: 36px; }
  .cmd-hero-digits span { min-width: 24px; height: 34px; font-size: 24px; }
  .cmd-tab { letter-spacing: 0; }
  .topbar-right .lang-switch { display: none; }
  .topbar-right .topbar-icon { display: none; }
}
@media (max-width: 1180px) {
  .cmd-grid { grid-template-columns: 210px minmax(0, 1fr) 210px; }
  .cmd-title-main { font-size: 18px; letter-spacing: 2px; }
  .cmd-title-sub { display: none; }
  .cmd-res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 中等宽度：全屏按钮收成图标 + 标题占满中间列，保证顶栏标题完整不截断 */
@media (min-width: 1181px) and (max-width: 1520px) {
  .topbar-fs-btn { padding: 0 7px; gap: 0; }
  .topbar-fs-btn .fs-label { display: none; }
  .cmd-title { justify-self: stretch; padding: 0 12px; }
  .cmd-title-main { font-size: 17.5px; letter-spacing: 0.5px; }
  .cmd-tabs { gap: 3px; }
  .cmd-tab { padding: 5px 7px; font-size: 10.5px; }
}
@media (max-width: 1024px) {
  .cmd-grid { display: flex; flex-direction: column; height: auto; }
  .cmd-col-center { order: -1; }
  .cmd-map { min-height: 420px; }
  .cmd-col-left, .cmd-col-right { overflow: visible; }
  .cmd-tabs { flex-wrap: wrap; }
}
/* ----- 低高度视口：右栏紧凑模式（智慧景区 / 应急配备 / 视频监控 / 报警联动 免滚动） ----- */
/* 大屏等比缩放模式下（body.bs-bigscreen）不走紧凑规则，保持 1920×1080 设计稿字号 */
@media (max-height: 1040px) {
  body:not(.bs-bigscreen) .cmd-col { gap: 8px; }
  body:not(.bs-bigscreen) .cmd-panel { padding: 8px 10px; }
  body:not(.bs-bigscreen) .cmd-panel-head { padding-bottom: 5px; margin-bottom: 6px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-list-row { padding: 2px 6px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-list-icon { width: 18px; height: 18px; font-size: 12px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-list-desc { display: none; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-list-name { font-size: 12.5px; line-height: 1.35; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-list-value { font-size: 12.5px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video { min-height: 124px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video-place { display: none; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video-shot { min-height: 74px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video-dots { display: none; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video-osd.tr { display: none; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video-osd.tl { max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video-foot { margin-top: 5px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-linkage { gap: 2px; }
  body:not(.bs-bigscreen) .cmd-col-right .vlb-item { font-size: 11.5px; }
  body:not(.bs-bigscreen) .cmd-col-right .vlb-switch { width: 34px; height: 18px; }
  body:not(.bs-bigscreen) .cmd-col-right .vlb-switch i { width: 12px; height: 12px; }
  body:not(.bs-bigscreen) .cmd-col-right .vlb-switch.on i { left: 18px; }
}
@media (max-height: 800px) {
  body:not(.bs-bigscreen) .cmd-col { gap: 6px; }
  body:not(.bs-bigscreen) .cmd-panel { padding: 7px 9px; }
  body:not(.bs-bigscreen) .cmd-panel-title { font-size: 13px; letter-spacing: 1px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-list-row { padding: 1px 5px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-list-name { font-size: 12px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video { min-height: 108px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video-shot { min-height: 62px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video-foot { font-size: 11px; }
  body:not(.bs-bigscreen) .cmd-col-right .cmd-video-foot .cmd-mini-btn { padding: 1px 6px; }
}

/* ===== 登录页主题 ===== */
.auth-overlay { background: radial-gradient(circle at 50% 0%, #0a3a2c 0%, #031510 55%, #010a08 100%); }
.auth-card { background: linear-gradient(165deg, #07261d 0%, #03120e 100%); border-color: var(--panel-line); box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(var(--accent-rgb), .08) inset; }
.auth-name { background: linear-gradient(90deg, #00ffb2, #17e6a1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-demo { background: #051a14; border-color: rgba(var(--accent-rgb), .22); }
.auth-demo:hover { border-color: var(--accent-cyan); background: #07271e; }

/* ===== 智慧景区新模块 ===== */

/* AR实景 */
.ar-scene-panel { overflow: hidden; }
.ar-scene-view { position: relative; height: 320px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,255,178,.18); }
.ar-scene-bg { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(0,80,60,.4), rgba(3,18,14,.85)),
  repeating-linear-gradient(45deg, rgba(0,255,178,.04) 0 2px, transparent 2px 20px),
  radial-gradient(ellipse at center, #0a3a2c 0%, #03120e 70%); }
.ar-scene-bg::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 60%, rgba(0,255,178,.12) 0%, transparent 50%),
              radial-gradient(circle at 70% 40%, rgba(23,230,161,.08) 0%, transparent 40%);
  animation: arPulse 4s ease-in-out infinite; }
@keyframes arPulse { 0%,100%{opacity:.6;} 50%{opacity:1;} }
.ar-overlay { position: absolute; inset: 0; }
.ar-marker { position: absolute; transform: translate(-50%, -100%); cursor: pointer; }
.ar-pin { width: 14px; height: 14px; border-radius: 50%; background: #00ffb2; box-shadow: 0 0 0 4px rgba(0,255,178,.35), 0 0 14px #00ffb2; animation: arPin 1.8s infinite; }
@keyframes arPin { 0%,100%{transform:scale(1);} 50%{transform:scale(1.15);} }
.ar-label { margin-top: 6px; background: rgba(0,0,0,.65); border: 1px solid rgba(0,255,178,.4); color: #e6fff6; font-size: 11px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; backdrop-filter: blur(4px); }
.ar-scene-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px; display: flex; align-items: center; font-size: 12px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.6)); }
.ar-list { max-height: 380px; overflow-y: auto; }
.ar-item { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: .15s; align-items: center; }
.ar-item:hover, .ar-item.active { border-color: var(--accent-cyan); background: rgba(0,255,178,.06); }
.ar-item-icon { font-size: 20px; }
.ar-item-name { font-weight: 600; color: #e6fff6; }
.ar-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* 智慧停车 */
.parking-card { background: linear-gradient(180deg, rgba(7,33,26,.9), rgba(2,15,12,.92)); border: 1px solid var(--line, rgba(0,255,178,.18)); border-radius: 12px; padding: 14px; transition: .2s; }
.parking-card:hover { border-color: rgba(0,255,178,.42); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.25), 0 0 14px rgba(0,255,178,.08); }
.parking-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.parking-name { font-size: 15px; font-weight: 600; color: #e6fff6; }
.parking-bar { height: 8px; background: #0a241d; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.parking-bar-fill { height: 100%; border-radius: 4px; transition: .5s; }
.parking-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; text-align: center; }
.park-num { font-size: 18px; font-weight: 700; color: var(--accent-cyan); }
.park-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.parking-gates { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border-color); display: flex; flex-wrap: wrap; gap: 8px; }
.gate-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); padding: 4px 8px; background: rgba(0,255,178,.06); border-radius: 4px; border: 1px solid rgba(0,255,178,.12); }
.gate-item.waiting { border-color: rgba(245,197,66,.35); color: #f5c542; }
.gate-item.offline { border-color: rgba(255,93,93,.3); color: #ff5d5d; }
.gate-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 6px var(--accent-cyan); }

/* 智慧票务 */
.ticket-list { display: flex; flex-direction: column; gap: 10px; }
.ticket-item { display: flex; gap: 12px; padding: 10px; background: rgba(0,255,178,.04); border: 1px solid rgba(0,255,178,.1); border-radius: 8px; align-items: center; }
.ticket-icon { font-size: 24px; }
.ticket-price { color: #f5c542; font-weight: 700; margin-left: 8px; font-size: 13px; }

/* 智慧导览 */
.guide-points { display: flex; flex-direction: column; gap: 10px; max-height: 440px; overflow-y: auto; }
.guide-point { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; transition: .15s; }
.guide-point:hover { border-color: var(--accent-cyan); background: rgba(0,255,178,.05); }
.gp-icon { font-size: 22px; }
.gp-name { font-weight: 600; color: #e6fff6; }
.gp-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.gp-desc { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.gp-actions { display: flex; flex-direction: column; gap: 6px; }
.guide-screens { display: flex; flex-direction: column; gap: 10px; }
.gs-item { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; }
.gs-dot { width: 10px; height: 10px; border-radius: 50%; background: #6fae97; }
.gs-dot.online { background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); }

/* 广播系统 */
.broadcast-list { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; }
.broadcast-item { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--border-color); border-radius: 8px; align-items: center; transition: .15s; }
.broadcast-item:hover { border-color: var(--accent-cyan); background: rgba(0,255,178,.05); }
.bcast-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(0,255,178,.1); border: 1px solid rgba(0,255,178,.22); display: grid; place-items: center; font-size: 18px; }
.bcast-icon.offline { opacity: .5; }
.bcast-name { font-weight: 600; color: #e6fff6; }
.bcast-zone { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.bcast-last { font-size: 10px; color: #6fae97; margin-top: 4px; }
.bcast-actions { display: flex; gap: 6px; }
.emergency-broadcast { display: flex; flex-direction: column; gap: 14px; }
.eb-input textarea { width: 100%; background: rgba(6,32,26,.6); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-family: inherit; font-size: 13px; padding: 10px; outline: none; resize: vertical; }
.eb-input textarea:focus { border-color: var(--accent-cyan); }
.eb-zones { display: flex; flex-wrap: wrap; gap: 8px; }
.eb-zone-check { display: flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(0,255,178,.06); border: 1px solid rgba(0,255,178,.14); border-radius: 14px; font-size: 12px; cursor: pointer; }
.eb-zone-check:hover { border-color: var(--accent-cyan); }
.eb-zone-check input { accent-color: var(--accent-cyan); }
.eb-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--border-color); }

/* 数据驾驶舱 */
.cockpit-header { display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: linear-gradient(180deg, rgba(0,255,178,.08), transparent); border: 1px solid rgba(0,255,178,.18); border-radius: 10px; margin-bottom: 16px; }
.divider { height: 1px; background: var(--border-color); margin: 16px 0; }

/* 按钮 active 态 */
.btn.btn-sm.active { background: rgba(0,255,178,.15); border-color: var(--accent-cyan); color: var(--accent-cyan); }
.btn.btn-primary { background: linear-gradient(135deg, #00ffb2, #17e6a1); color: #03120e; border-color: transparent; font-weight: 600; }
.btn.btn-primary:hover { box-shadow: 0 0 16px rgba(0,255,178,.3); }
.btn.btn-primary:disabled { opacity: .5; cursor: not-allowed; }

/* tag 扩展 */
.tag.tag-green { background: rgba(23,230,161,.15); border-color: rgba(23,230,161,.4); color: #17e6a1; }
.tag.tag-orange { background: rgba(245,197,66,.15); border-color: rgba(245,197,66,.4); color: #f5c542; }
.tag.tag-red { background: rgba(255,93,93,.15); border-color: rgba(255,93,93,.4); color: #ff5d5d; }
.tag.tag-purple { background: rgba(125,227,197,.15); border-color: rgba(125,227,197,.4); color: #7de3c5; }

/* kpi-grid 扩展 */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1200px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== 资源管理地图联动 ===== */
.res-cat-list { padding: 8px; flex: 1; overflow-y: auto; }
.res-cat-item { display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;margin-bottom:4px;border:1px solid transparent;transition:.15s; }
.res-cat-item:hover { background:rgba(0,255,178,.05); }
.res-cat-item.active { background:rgba(0,255,178,.1); border-color:rgba(0,255,178,.35); }
.res-cat-icon { font-size:16px; width:22px; text-align:center; }
.res-cat-name { flex:1; font-size:13px; color:#e6fff6; }
.res-cat-item.active .res-cat-name { color:#00ffb2; }
.res-cat-count { font-size:11px; color:#6fae97; }

.res-map-list { padding:8px; flex:1; overflow-y:auto; }
.res-map-item { display:flex; gap:10px; padding:9px 10px; border:1px solid var(--border-color); border-radius:8px; margin-bottom:6px; cursor:pointer; transition:.15s; align-items:center; }
.res-map-item:hover { border-color:rgba(0,255,178,.35); background:rgba(0,255,178,.04); }
.res-map-item.active { border-color:#00ffb2; background:rgba(0,255,178,.08); box-shadow:0 0 10px rgba(0,255,178,.15); }
.res-map-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;background:#6fae97; }
.res-map-dot.online { background:#17e6a1; box-shadow:0 0 6px #17e6a1; }
.res-map-dot.warning { background:#f5c542; box-shadow:0 0 6px #f5c542; }
.res-map-name { font-size:13px; font-weight:600; color:#e6fff6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res-map-meta { font-size:11px; color:#8fd6bd; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res-map-actions { flex-shrink:0; }

/* 地图图例 */
.res-map-legend { position:absolute; bottom:12px; left:12px; background:rgba(10,20,30,.85); border:1px solid rgba(0,255,178,.3); border-radius:8px; padding:8px 12px; display:flex; gap:14px; align-items:center; font-size:11px; z-index:10; backdrop-filter:blur(6px); }
.legend-item { display:flex; gap:5px; align-items:center; color:#8fd6bd; }
.legend-dot { width:8px;height:8px;border-radius:50%;display:inline-block; }
.legend-dot.online { background:#17e6a1; box-shadow:0 0 4px #17e6a1; }
.legend-dot.warning { background:#f5c542; box-shadow:0 0 4px #f5c542; }
.legend-tip { color:#6fae97; margin-left:8px; padding-left:8px; border-left:1px solid rgba(0,255,178,.2); }

/* ===== 资源详情弹窗 ===== */
.modal-resource-detail {
  position: fixed; top:50%; left:50%; transform:translate(-50%, -50%);
  width: 720px; max-width: 92vw; max-height: 86vh; display:flex; flex-direction:column;
  background: linear-gradient(160deg, #0d1b22 0%, #0a1419 100%);
  border: 1px solid rgba(0,255,178,.35); border-radius:14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 30px rgba(0,255,178,.12);
  overflow:hidden; z-index:999; animation: mrdIn .25s ease-out;
}
@keyframes mrdIn { from { opacity:0; transform:translate(-50%, -50%) scale(.95); } to { opacity:1; transform:translate(-50%, -50%) scale(1); } }
.mrd-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(0,255,178,.15); background:rgba(0,255,178,.04); }
.mrd-title-row { display:flex; align-items:center; gap:10px; }
.mrd-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }
.mrd-dot.online { background:#17e6a1; box-shadow:0 0 6px #17e6a1; }
.mrd-dot.warning { background:#f5c542; box-shadow:0 0 6px #f5c542; }
.mrd-title { font-size:16px; font-weight:700; color:#e6fff6; }
.mrd-close { width:32px;height:32px;border:none;border-radius:8px;background:rgba(255,107,107,.12);color:#ff6b6b;font-size:20px;cursor:pointer;transition:.15s; display:flex;align-items:center;justify-content:center; }
.mrd-close:hover { background:#ff6b6b; color:#fff; }
.mrd-body { flex:1; overflow-y:auto; padding:18px 20px; }
.mrd-kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:20px; }
.mrd-kpi { background:rgba(0,255,178,.05); border:1px solid rgba(0,255,178,.15); border-radius:10px; padding:12px; text-align:center; }
.mrd-kpi-val { font-size:15px; font-weight:700; color:#00ffb2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrd-kpi-label { font-size:11px; color:#6fae97; margin-top:4px; }
.mrd-sections { display:flex; flex-direction:column; gap:16px; }
.mrd-section { background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:14px 16px; }
.mrd-section-title { font-size:12px; color:#00ffb2; margin-bottom:10px; font-weight:600; letter-spacing:.5px; }
.mrd-section-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
.mrd-info-item { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px dashed rgba(255,255,255,.05); }
.mrd-info-item:last-child { border-bottom:none; }
.mrd-info-key { font-size:12px; color:#6fae97; }
.mrd-info-val { font-size:12px; color:#e6fff6; font-weight:500; }
.mrd-actions { display:flex; gap:10px; flex-wrap:wrap; }
.mrd-actions .btn { flex:1; min-width:140px; justify-content:center; }
.mrd-footer { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-top:1px solid rgba(0,255,178,.15); background:rgba(0,0,0,.2); }