/* =========================================================
   全局科技风主题层（叠加式，不改动业务逻辑）
   深空底 + 网格纹理 + 青金点缀 + 统一组件观感
   ========================================================= */

/* ---------- 全局背景：网格 + 光晕 ---------- */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(90, 180, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90, 180, 255, 0.032) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 20%, transparent 78%);
}
#app { position: relative; z-index: 1; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(61, 220, 255, .45), rgba(37, 99, 235, .45));
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(61, 220, 255, .7), rgba(37, 99, 235, .7)); }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 侧边栏 ---------- */
.sidebar {
  background: linear-gradient(180deg, rgba(9, 20, 44, .96) 0%, rgba(6, 13, 30, .98) 100%);
  border-right: 1px solid rgba(61, 220, 255, .18);
  box-shadow: 6px 0 30px rgba(0, 0, 0, .45), inset -1px 0 0 rgba(61, 220, 255, .06);
  position: relative;
}
.sidebar::after {
  content: ''; position: absolute; right: -1px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(61, 220, 255, .55), rgba(240, 199, 94, .45), transparent);
  animation: techSideGlow 6s ease-in-out infinite alternate;
}
@keyframes techSideGlow { 0% { opacity: .35; } 100% { opacity: 1; } }

.brand .logo {
  background: linear-gradient(140deg, #1e3a8a, #2563eb 55%, #3ddcff 130%);
  border: 1px solid rgba(240, 199, 94, .5);
  box-shadow: 0 6px 18px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.brand .brand-text .t1 {
  background: linear-gradient(90deg, #ffffff, #cdf3ff 55%, #f5d98a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 1px;
}
.brand .brand-text .t2 { color: #6f8bb3; }

.nav-group {
  color: #5f7ba4; font-size: 10px; letter-spacing: 3px;
  display: flex; align-items: center; gap: 8px;
}
.nav-group::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(61, 220, 255, .25), transparent); }

.nav-item { border-radius: 8px; position: relative; }
.nav-item:hover { background: rgba(61, 220, 255, .08); color: #eaf6ff; transform: translateX(2px); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(37, 99, 235, .32), rgba(61, 220, 255, .06));
  border-color: rgba(61, 220, 255, .3);
  color: #fff;
  box-shadow: inset 3px 0 0 #3ddcff, 0 0 18px rgba(61, 220, 255, .18);
}
.nav-item.active .ico { color: #7fe9ff; filter: drop-shadow(0 0 6px rgba(61, 220, 255, .7)); }
.nav-item .badge { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 0 10px rgba(239, 68, 68, .6); }
.side-foot { color: #4f688c; letter-spacing: 1px; }

/* ---------- 顶栏 ---------- */
.topbar {
  height: 62px;
  background: linear-gradient(90deg, rgba(10, 22, 46, .78), rgba(8, 16, 34, .62));
  border-bottom: 1px solid rgba(61, 220, 255, .16);
  position: relative; backdrop-filter: blur(10px);
}
.topbar::after {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, rgba(61, 220, 255, .55), rgba(240, 199, 94, .5), transparent);
  background-size: 55% 100%;
  animation: techTopFlow 7s linear infinite;
}
@keyframes techTopFlow { 0% { background-position: -110% 0; } 100% { background-position: 210% 0; } }
.topbar .crumb { font-size: 18px; letter-spacing: 1px; background: linear-gradient(90deg, #ffffff, #cdf3ff 60%, #f5d98a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.topbar .crumb small { -webkit-text-fill-color: #6f8bb3; }
.clock { color: #7fe9ff; text-shadow: 0 0 12px rgba(61, 220, 255, .35); }
.user-chip .avatar { background: linear-gradient(140deg, #1e40af, #3ddcff); border: 1px solid rgba(240, 199, 94, .5); }

/* ---------- 内容区 ---------- */
/* 注意：各页表格高度按 calc(100vh - xxx) 计算，padding 保持与原主题一致，避免产生多余滚动条 */
.content { padding: 22px 26px 40px; }
.content > * { animation: techPageIn .34s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes techPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 卡片 ---------- */
.card {
  background: linear-gradient(160deg, rgba(18, 36, 72, .42), rgba(8, 16, 34, .5));
  border: 1px solid rgba(61, 220, 255, .14);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
  padding: 16px 18px;
  transition: box-shadow .25s, border-color .25s;
}
.card:hover { border-color: rgba(61, 220, 255, .26); box-shadow: 0 14px 34px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .07); }
.card-title { font-size: 15px; letter-spacing: .5px; color: #eaf6ff; }
.card-title::before {
  width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, #bff3ff, #3ddcff);
  box-shadow: 0 0 10px rgba(61, 220, 255, .8);
}

/* 筛选工具条：控件统一高度，避免高低不齐 */
.page-toolbar { gap: 9px; row-gap: 10px; align-items: center; }
.page-toolbar .el-input, .page-toolbar .el-select, .page-toolbar .el-date-editor { height: 32px; }
.page-toolbar .el-button { height: 32px; }
.page-toolbar > span { white-space: nowrap; }
.page-toolbar .spacer { flex: 1; }
.card:has(> .page-toolbar) {
  padding: 12px 14px;
  background: linear-gradient(120deg, rgba(37, 99, 235, .12), rgba(8, 16, 34, .45));
  border-color: rgba(61, 220, 255, .18);
}

/* KPI：固定一行 6 张（窄屏降级 3×2），避免换行参差 */
.kpi-grid { gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1440px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi .label, .kpi .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi {
  min-height: 106px;
  display: flex; flex-direction: column; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(24, 48, 96, .5), rgba(8, 16, 34, .55));
  border: 1px solid rgba(61, 220, 255, .14);
  padding: 16px 18px;
}
.kpi .bar { height: 3px; border-radius: 3px 3px 0 0; }
.kpi .num { font-variant-numeric: tabular-nums; letter-spacing: -1px; margin-top: 2px; }
.kpi:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .42), 0 0 24px rgba(61, 220, 255, .12); }
.kpi .num { letter-spacing: -.5px; text-shadow: 0 0 18px rgba(61, 220, 255, .35); }
.kpi .num.gold { text-shadow: 0 0 20px rgba(240, 199, 94, .5); }
.kpi .label { color: #9fb4d4; }

/* 图表容器 */
.chart, .chart-sm, .chart-lg { border-radius: 10px; }

/* ---------- 表格 ---------- */
.grid-table .el-table {
  --el-table-border-color: rgba(61, 220, 255, .12);
  --el-table-header-bg-color: linear-gradient(90deg, rgba(37, 99, 235, .22), rgba(61, 220, 255, .08));
  --el-table-header-text-color: #7fe9ff;
  --el-table-row-hover-bg-color: rgba(61, 220, 255, .08);
  --el-table-text-color: #dbe7f7;
  font-size: 13px;
}
.el-table { background: transparent !important; }
.el-table__inner-wrapper::before { background-color: rgba(61, 220, 255, .12); }
.el-table th.el-table__cell {
  font-weight: 700; letter-spacing: .5px;
  background: linear-gradient(90deg, rgba(37, 99, 235, .22), rgba(61, 220, 255, .06)) !important;
  border-bottom: 1px solid rgba(61, 220, 255, .2) !important;
}
.el-table td.el-table__cell { border-bottom: 1px solid rgba(255, 255, 255, .05) !important; }
.el-table__body tr:hover > td.el-table__cell { background: rgba(61, 220, 255, .07) !important; }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: rgba(255, 255, 255, .022); }
.el-table .el-table__cell { padding: 9px 0; }
.el-table__empty-text { color: #6f8bb3; }
.el-table__fixed-right-patch { background: transparent; }

/* ---------- 按钮 ---------- */
.el-button {
  border-radius: 8px; font-weight: 500;
  transition: transform .18s, box-shadow .18s, background .18s;
}
.el-button:hover { transform: translateY(-1px); }
.el-button:active { transform: translateY(0); }
.el-button--primary {
  background: linear-gradient(135deg, #2563eb, #3ddcff);
  border: none; color: #04121f; font-weight: 700;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .4);
}
.el-button--primary:hover, .el-button--primary:focus {
  background: linear-gradient(135deg, #3b82f6, #7fe9ff);
  box-shadow: 0 6px 20px rgba(61, 220, 255, .5);
}
.el-button--success {
  background: linear-gradient(135deg, #16a34a, #4ade80); border: none; color: #04121f; font-weight: 700;
}
.el-button--danger { background: linear-gradient(135deg, #dc2626, #f87171); border: none; color: #fff; font-weight: 700; }
.el-button--warning { background: linear-gradient(135deg, #d97706, #fbbf24); border: none; color: #04121f; font-weight: 700; }
.el-button.is-plain { background: rgba(61, 220, 255, .06) !important; border: 1px solid rgba(61, 220, 255, .35) !important; color: #a9d8ff !important; }
.el-button.is-plain:hover { background: rgba(61, 220, 255, .14) !important; box-shadow: 0 0 14px rgba(61, 220, 255, .25); }
.el-button.is-text { background: transparent !important; border: none !important; }
.el-button--default { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); color: #d6e8ff; }
.el-button--default:hover { background: rgba(255, 255, 255, .09); border-color: rgba(61, 220, 255, .35); }
.el-button.is-disabled { opacity: .45; transform: none !important; }

/* ---------- 表单控件 ---------- */
.el-input__wrapper, .el-textarea__inner, .el-select__wrapper {
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: 0 0 0 1px rgba(61, 220, 255, .18) inset !important;
  border-radius: 8px !important;
  transition: box-shadow .2s, background .2s;
}
.el-input__wrapper:hover, .el-select__wrapper:hover { box-shadow: 0 0 0 1px rgba(61, 220, 255, .35) inset !important; }
.el-input__wrapper.is-focus, .el-select__wrapper.is-focused {
  background: rgba(61, 220, 255, .08) !important;
  box-shadow: 0 0 0 1px #3ddcff inset, 0 0 12px rgba(61, 220, 255, .3) !important;
}
.el-input__inner { color: #eaf6ff !important; }
.el-input__placeholder, .el-select__placeholder { color: #6f8bb3 !important; }
.el-form-item__label { color: #9fb4d4 !important; font-size: 13px; }
.el-select-dropdown, .el-picker-panel, .el-popper.is-light {
  background: #0b1730 !important;
  border: 1px solid rgba(61, 220, 255, .22) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55) !important;
}
.el-select-dropdown__item { color: #cfe0f7 !important; border-radius: 6px; margin: 2px 6px; }
.el-select-dropdown__item.is-hovering { background: rgba(61, 220, 255, .14) !important; }
.el-select-dropdown__item.is-selected { color: #7fe9ff !important; font-weight: 700; }
.el-popper.is-light .el-popper__arrow::before { background: #0b1730 !important; border-color: rgba(61, 220, 255, .22) !important; }

/* 单选按钮组 */
.el-radio-button__inner {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(61, 220, 255, .2) !important;
  color: #a9c2e0 !important;
  box-shadow: none !important;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner {
  background: linear-gradient(135deg, #2563eb, #3ddcff) !important;
  border-color: transparent !important; color: #04121f !important; font-weight: 700;
  box-shadow: 0 0 14px rgba(61, 220, 255, .4) !important;
}
.el-radio__label { color: #cfe0f7 !important; }
.el-radio__input.is-checked .el-radio__inner { background: #3ddcff; border-color: #3ddcff; box-shadow: 0 0 10px rgba(61, 220, 255, .6); }
.el-switch.is-checked .el-switch__core { background: linear-gradient(135deg, #2563eb, #3ddcff); border-color: transparent; }
.el-input-number__decrease, .el-input-number__increase { background: rgba(255, 255, 255, .04) !important; border-color: rgba(61, 220, 255, .18) !important; color: #cfe0f7 !important; }

/* ---------- 标签 ---------- */
.el-tag {
  border-radius: 6px; border: 1px solid transparent; font-weight: 600;
}
.el-tag--primary { background: rgba(37, 99, 235, .18); border-color: rgba(59, 130, 246, .45); color: #93c5fd; }
.el-tag--success { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .45); color: #86efac; }
.el-tag--warning { background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .45); color: #fcd34d; }
.el-tag--danger { background: rgba(239, 68, 68, .16); border-color: rgba(239, 68, 68, .45); color: #fca5a5; }
.el-tag--info { background: rgba(148, 163, 184, .14); border-color: rgba(148, 163, 184, .35); color: #cbd5e1; }
/* 隐患级别语义配色统一：一般=绿 / 较大=黄 / 严重=红 */
.tag-level-一般 { color: #7ee787; border-color: rgba(76, 217, 100, .45); background: rgba(76, 217, 100, .13); }
.tag-level-较大 { color: #fcd34d; border-color: rgba(251, 191, 36, .45); background: rgba(245, 158, 11, .14); }
.tag-level-严重 { color: #fca5a5; border-color: rgba(248, 113, 113, .5); background: rgba(239, 68, 68, .16); box-shadow: 0 0 12px rgba(239, 68, 68, .25); }

/* ---------- 分页 ---------- */
.el-pagination.is-background .el-pager li {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(61, 220, 255, .16);
  color: #a9c2e0 !important; border-radius: 7px; margin: 0 3px;
}
.el-pagination.is-background .el-pager li:not(.is-disabled):hover { color: #7fe9ff !important; border-color: rgba(61, 220, 255, .5); }
.el-pagination.is-background .el-pager li.is-active {
  background: linear-gradient(135deg, #2563eb, #3ddcff) !important;
  color: #04121f !important; font-weight: 800; border-color: transparent;
  box-shadow: 0 0 14px rgba(61, 220, 255, .45);
}
.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next {
  background: rgba(255, 255, 255, .05) !important; border: 1px solid rgba(61, 220, 255, .16);
  color: #a9c2e0 !important; border-radius: 7px;
}
.el-pagination__total, .el-pagination__jump { color: #8fa4c4 !important; }

/* ---------- 弹窗 / 抽屉 ---------- */
.el-dialog {
  background: linear-gradient(160deg, #0d1c3c, #070f22) !important;
  border: 1px solid rgba(61, 220, 255, .24) !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .65) !important;
  overflow: hidden;
}
.el-dialog__header { padding: 16px 20px 12px; border-bottom: 1px solid rgba(61, 220, 255, .14); position: relative; }
.el-dialog__header::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #3ddcff, #f0c75e);
}
.el-dialog__title { color: #eaf6ff; font-weight: 700; letter-spacing: .5px; }
.el-dialog__body { color: #dbe7f7; padding: 18px 20px; }
.el-dialog__footer { padding: 12px 20px 18px; border-top: 1px solid rgba(255, 255, 255, .06); }
.el-dialog__headerbtn .el-dialog__close { color: #8fa4c4; }
.el-dialog__headerbtn:hover .el-dialog__close { color: #7fe9ff; }

.el-drawer {
  background: linear-gradient(160deg, #0d1c3c, #070f22) !important;
  border-left: 1px solid rgba(61, 220, 255, .24) !important;
}
.el-drawer__header { margin-bottom: 0; padding: 16px 20px; border-bottom: 1px solid rgba(61, 220, 255, .14); color: #eaf6ff; font-weight: 700; }
.el-drawer__body { color: #dbe7f7; padding: 18px 20px; }
.el-drawer__close-btn { color: #8fa4c4; }

/* 描述列表 */
.el-descriptions { --el-descriptions-item-bordered-label-background: rgba(61, 220, 255, .08); }
.el-descriptions__body { background: transparent !important; color: #dbe7f7 !important; }
.el-descriptions__label { color: #9fb4d4 !important; font-weight: 500; }
.el-descriptions__content { color: #eaf6ff !important; }
.el-descriptions--border, .el-descriptions__cell { border-color: rgba(61, 220, 255, .14) !important; }
.el-descriptions__label.el-descriptions__cell.is-bordered-label { background: rgba(61, 220, 255, .07) !important; }

/* ---------- 页签 ---------- */
.el-tabs__item { color: #8fa4c4; font-weight: 500; }
.el-tabs__item.is-active { color: #7fe9ff; text-shadow: 0 0 12px rgba(61, 220, 255, .4); }
.el-tabs__active-bar { background: linear-gradient(90deg, #3ddcff, #f0c75e); height: 3px; border-radius: 3px; box-shadow: 0 0 10px rgba(61, 220, 255, .6); }
.el-tabs__nav-wrap::after { background-color: rgba(61, 220, 255, .12); }

/* ---------- 提示 / 消息 ---------- */
.el-message {
  background: linear-gradient(135deg, #10203f, #0a1428) !important;
  border: 1px solid rgba(61, 220, 255, .3) !important;
  border-radius: 10px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5) !important;
}
.el-message__content { color: #eaf6ff !important; }
.el-message-box {
  background: linear-gradient(160deg, #0d1c3c, #070f22) !important;
  border: 1px solid rgba(61, 220, 255, .25) !important; border-radius: 14px !important;
}
.el-loading-mask { background: rgba(4, 10, 22, .55) !important; backdrop-filter: blur(2px); }
.el-loading-spinner .path { stroke: #3ddcff !important; }
.el-loading-spinner .el-loading-text { color: #7fe9ff !important; }
.el-empty__description p { color: #6f8bb3 !important; }
.el-popconfirm__main { color: #dbe7f7 !important; }

/* ---------- 预警条 / 热点卡 ---------- */
.alert-strip {
  background: linear-gradient(90deg, rgba(239, 68, 68, .18), rgba(239, 68, 68, .04));
  border: 1px solid rgba(239, 68, 68, .38); border-radius: 10px;
  box-shadow: 0 0 22px rgba(239, 68, 68, .12);
}
.hot-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, .14), rgba(239, 68, 68, .03));
  border: 1px solid rgba(239, 68, 68, .32); border-radius: 12px;
}
.hot-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }

/* ---------- 各消防救援站上报统计 ---------- */
.stn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.stn-item {
  background: linear-gradient(135deg, rgba(61, 220, 255, .08), rgba(61, 220, 255, .02));
  border: 1px solid rgba(61, 220, 255, .22);
  border-radius: 12px;
  padding: 10px 12px;
}
.stn-name {
  font-size: 12px; color: #eaf0fb;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stn-nums { margin: 4px 0 6px; font-weight: 700; }
.stn-today { color: #7ee787; font-size: 18px; }
.stn-sep { color: var(--text-dim); margin: 0 4px; }
.stn-total { color: #f0c75e; font-size: 15px; }
.stn-bar { height: 4px; background: rgba(255, 255, 255, .08); border-radius: 3px; overflow: hidden; }
.stn-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #3ddcff, #f0c75e);
}

/* ---------- 图片画廊 ---------- */
.gallery { gap: 12px; }
.gallery .thumb { border: 1px solid rgba(61, 220, 255, .2); }
video { background: #000; }

/* ---------- 导入页：拖拽上传区 ---------- */
.up-zone {
  border: 1.5px dashed rgba(61, 220, 255, .35);
  border-radius: 12px; padding: 22px 18px; text-align: center; cursor: pointer;
  background: rgba(61, 220, 255, .05);
  transition: all .2s;
}
.up-zone:hover, .up-zone.over { background: rgba(61, 220, 255, .12); border-color: #3ddcff; box-shadow: 0 0 22px rgba(61, 220, 255, .22); }
.up-zone .up-ico { font-size: 30px; color: #7fe9ff; }
.up-zone .up-t { color: #cfe0f7; margin-top: 6px; }
.up-zone .up-s { color: #6f8bb3; font-size: 12px; margin-top: 4px; }
.up-file {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(61, 220, 255, .09); border: 1px solid rgba(61, 220, 255, .28);
}
.up-file .nm { flex: 1; min-width: 0; color: #eaf6ff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-file .sz { color: #8fa4c4; font-size: 12px; }

/* 说明条目 */
.doc-item { display: flex; gap: 10px; margin-bottom: 8px; line-height: 1.75; color: var(--text-sub); }
.doc-no {
  flex: 0 0 20px; height: 20px; margin-top: 3px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #04121f;
  background: linear-gradient(135deg, #bff3ff, #3ddcff);
}
.doc-item b { color: #f5d98a; }

/* 两栏等高 */
.row-equal > .el-col { display: flex; }
.row-equal > .el-col > .card { flex: 1; }

/* 折叠面板（预警中心-隐患集中区域） */
.hot-collapse {
  border: 1px solid rgba(61, 220, 255, .16) !important;
  border-radius: 12px !important;
  background: linear-gradient(160deg, rgba(18, 36, 72, .42), rgba(8, 16, 34, .5));
  overflow: hidden;
  --el-collapse-border-color: rgba(61, 220, 255, .14);
  --el-collapse-header-bg-color: transparent;
  --el-collapse-header-text-color: #eaf6ff;
  --el-collapse-header-height: 52px;
  --el-collapse-content-bg-color: transparent;
  --el-collapse-content-text-color: #dbe7f7;
}
.hot-collapse .el-collapse-item__header {
  padding: 0 16px; font-size: 15px; font-weight: 600;
  border-bottom: 1px solid rgba(61, 220, 255, .14);
}
.hot-collapse .el-collapse-item__header:hover { color: #7fe9ff; }
.hot-collapse .el-collapse-item__header .el-collapse-item__arrow { color: #3ddcff; font-size: 16px; }
.hot-collapse .el-collapse-item__wrap { border-bottom: none; }
.hot-collapse .el-collapse-item__content { padding: 16px; }
.hot-collapse .card-title { font-size: 15px; letter-spacing: .5px; color: #eaf6ff; }
.hot-collapse .card-title::before {
  width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, #bff3ff, #3ddcff);
  box-shadow: 0 0 10px rgba(61, 220, 255, .8);
}

/* ==================================================================
   督导统计（三表合并页）：主视觉头 + 卡片段落切换 + 面板化内容
   仅作用于 .sup-* 自定义类，不改动子页面原有样式
   ================================================================== */
.sup-wrap { display: flex; flex-direction: column; gap: 14px; }

/* ---------- 主视觉头 ---------- */
.sup-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 22px; border-radius: 18px;
  border: 1px solid rgba(61, 220, 255, .22);
  background:
    radial-gradient(900px 220px at 88% -40%, rgba(240, 199, 94, .20), transparent 60%),
    radial-gradient(700px 200px at 8% -30%, rgba(61, 220, 255, .22), transparent 62%),
    linear-gradient(120deg, rgba(20, 44, 92, .92), rgba(10, 20, 40, .94));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.sup-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, #3ddcff, #f0c75e 55%, transparent);
  box-shadow: 0 0 14px rgba(61, 220, 255, .7);
}
.sup-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(61, 220, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 220, 255, .05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(120deg, rgba(0, 0, 0, .55), transparent 70%);
  -webkit-mask-image: linear-gradient(120deg, rgba(0, 0, 0, .55), transparent 70%);
}
.sup-hero-l { position: relative; display: flex; align-items: center; gap: 14px; z-index: 1; }
.sup-hero-ico {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center; color: #06202b;
  background: linear-gradient(140deg, #bff3ff, #3ddcff 55%, #f0c75e);
  box-shadow: 0 0 20px rgba(61, 220, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.sup-hero-t { font-size: 20px; font-weight: 700; letter-spacing: 1.2px; color: #eaf6ff; }
.sup-hero-s { margin-top: 3px; font-size: 12.5px; color: #9fb6d4; letter-spacing: .3px; }
.sup-hero-r { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sup-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; font-size: 12px; color: #cfe6ff;
  border: 1px solid rgba(61, 220, 255, .26);
  background: linear-gradient(180deg, rgba(61, 220, 255, .14), rgba(61, 220, 255, .04));
}
.sup-chip i {
  width: 6px; height: 6px; border-radius: 50%; background: #3ddcff;
  box-shadow: 0 0 8px rgba(61, 220, 255, .9);
}
.sup-chip:nth-child(2) i { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, .9); }
.sup-chip:nth-child(3) i { background: #f0c75e; box-shadow: 0 0 8px rgba(240, 199, 94, .9); }

/* ---------- 段落切换（卡片式刻度） ---------- */
.sup-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sup-seg-item {
  position: relative; display: flex; align-items: center; gap: 11px;
  padding: 13px 15px; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(61, 220, 255, .14);
  background: linear-gradient(158deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.sup-seg-item:hover {
  transform: translateY(-2px);
  border-color: rgba(61, 220, 255, .42);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .32), 0 0 16px rgba(61, 220, 255, .16);
}
.sup-seg-item.active {
  border-color: rgba(240, 199, 94, .55);
  background:
    radial-gradient(420px 120px at 12% -30%, rgba(61, 220, 255, .20), transparent 65%),
    linear-gradient(158deg, rgba(240, 199, 94, .13), rgba(61, 220, 255, .07));
  box-shadow: 0 12px 26px rgba(0, 0, 0, .38), 0 0 20px rgba(240, 199, 94, .18);
}
.sup-seg-item.active::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #bff3ff, #3ddcff 45%, #f0c75e);
  box-shadow: 0 0 12px rgba(61, 220, 255, .8);
}
.sup-seg-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; color: #7fe9ff;
  border: 1px solid rgba(61, 220, 255, .22);
  background: rgba(61, 220, 255, .08);
}
.sup-seg-item.active .sup-seg-ico {
  color: #06202b;
  background: linear-gradient(140deg, #bff3ff, #3ddcff);
  border-color: transparent;
  box-shadow: 0 0 16px rgba(61, 220, 255, .55);
}
.sup-seg-txt { min-width: 0; }
.sup-seg-t { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #dbe9fb; letter-spacing: .4px; }
.sup-seg-item.active .sup-seg-t { color: #fff; text-shadow: 0 0 12px rgba(61, 220, 255, .45); }
.sup-seg-now {
  padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 700;
  color: #241a00; background: linear-gradient(135deg, var(--gold-soft), var(--gold));
}
.sup-seg-s {
  margin-top: 2px; font-size: 11.5px; color: #8fa4c4; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sup-seg-item.active .sup-seg-s { color: #b9d4ef; }

/* ---------- 内容面板 ---------- */
.sup-pane {
  position: relative; border-radius: 16px; padding: 14px 14px 2px;
  border: 1px solid rgba(61, 220, 255, .10);
  background: linear-gradient(180deg, rgba(61, 220, 255, .035), rgba(255, 255, 255, .012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.sup-pane::before {
  content: ''; position: absolute; left: 16px; right: 16px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61, 220, 255, .35), transparent);
}

/* ---------- 使用提示 ---------- */
.sup-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sup-tip {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; border-radius: 12px; font-size: 12px; line-height: 1.65; color: #9fb6d4;
  border: 1px dashed rgba(61, 220, 255, .16);
  background: rgba(255, 255, 255, .02);
}
.sup-tip-n {
  flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #06202b;
  background: linear-gradient(135deg, #bff3ff, #3ddcff);
}
@media (max-width: 1280px) {
  .sup-seg, .sup-tips { grid-template-columns: 1fr; }
  .sup-hero { flex-direction: column; align-items: flex-start; }
}

/* ========== 统一页面主视觉头（第二批：颜值统一）========== */
.ph-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; margin-bottom: 14px; border-radius: 14px;
  border: 1px solid rgba(61, 220, 255, .18);
  background:
    radial-gradient(620px 160px at 92% -50%, rgba(240, 199, 94, .16), transparent 62%),
    radial-gradient(520px 150px at 6% -40%, rgba(61, 220, 255, .18), transparent 64%),
    linear-gradient(120deg, rgba(20, 44, 92, .78), rgba(10, 20, 40, .82));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.ph-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, #3ddcff, #f0c75e 60%, transparent);
  box-shadow: 0 0 12px rgba(61, 220, 255, .6);
}
.ph-l { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ph-ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center; color: #06202b;
  background: linear-gradient(140deg, #bff3ff, #3ddcff 55%, #f0c75e);
  box-shadow: 0 0 16px rgba(61, 220, 255, .40), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.ph-t { font-size: 17px; font-weight: 700; letter-spacing: 1px; color: #eaf6ff; }
.ph-s { margin-top: 2px; font-size: 12px; color: #9fb6d4; }
.ph-r { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ph-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; color: #cfe6ff;
  border: 1px solid rgba(61, 220, 255, .22);
  background: linear-gradient(180deg, rgba(61, 220, 255, .12), rgba(61, 220, 255, .03));
}
.ph-chip i { width: 6px; height: 6px; border-radius: 50%; background: #3ddcff; box-shadow: 0 0 8px rgba(61, 220, 255, .85); }
.ph-chip:nth-child(2) i { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, .85); }
.ph-chip:nth-child(3) i { background: #f0c75e; box-shadow: 0 0 8px rgba(240, 199, 94, .85); }
@media (max-width: 1280px) { .ph-hero { flex-direction: column; align-items: flex-start; } }