/* 鱼类识别分析系统：统一视觉变量与基础样式 */
:root {
  color-scheme: dark;
  --bg: #07111d;
  --sidebar: #081522;
  --topbar: rgba(9, 23, 37, .96);
  --panel: #0c1c2b;
  --panel-2: #102337;
  --panel-3: #132a40;
  --line: #20384c;
  --line-soft: rgba(74, 111, 138, .22);
  --text: #e8f0f5;
  --muted: #8fa5b7;
  --faint: #61778b;
  --cyan: #23d5d1;
  --cyan-2: #58e2e0;
  --blue: #4f8dff;
  --purple: #8b7cff;
  --orange: #f4b75d;
  --danger: #ff7466;
  --success: #34d399;
  --sidebar-w: 246px;
  --topbar-h: 72px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 18px 45px rgba(0, 0, 0, .24);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { overflow: hidden; font-size: 14px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; }
button, a, [data-route], [data-action] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(35, 213, 209, .7); outline-offset: 2px; }

.app-shell { display: flex; height: 100vh; min-width: 320px; }
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: linear-gradient(180deg, #091827, #07131f); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: relative; z-index: 30; transition: width .24s ease, flex-basis .24s ease, transform .24s ease; }
.brand { height: var(--topbar-h); padding: 0 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line-soft); }
.brand-mark { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(35, 213, 209, .42); border-radius: 11px; display: grid; place-items: center; color: var(--cyan); background: rgba(35, 213, 209, .08); }
.brand-mark svg { width: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.brand-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.brand-copy strong { font-size: 16px; letter-spacing: .08em; white-space: nowrap; }
.brand-copy span { color: var(--faint); font-size: 8px; letter-spacing: .16em; white-space: nowrap; }
.icon-button { width: 34px; height: 34px; padding: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: background .16s, color .16s; }
.icon-button:hover { background: rgba(111, 148, 177, .12); color: var(--text); }
.collapse-button::before, .mobile-menu-button::before { content: ""; width: 15px; height: 11px; border-top: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; box-shadow: inset 0 4px transparent; }
.collapse-button::after, .mobile-menu-button::after { content: ""; position: absolute; width: 15px; border-top: 1.8px solid currentColor; }
.collapse-button { position: relative; width: 28px; }

.nav-list { flex: 1; overflow-y: auto; padding: 14px 10px 20px; scrollbar-width: thin; scrollbar-color: #25445b transparent; }
.nav-group { margin-bottom: 4px; }
.nav-item { min-height: 44px; width: 100%; padding: 0 11px; display: flex; align-items: center; gap: 11px; border-radius: 9px; background: transparent; color: #9eb0bf; cursor: pointer; text-align: left; position: relative; transition: color .16s, background .16s; }
.nav-item:hover { color: var(--text); background: rgba(84, 121, 151, .1); }
.nav-item.active { color: #dffdfc; background: linear-gradient(90deg, rgba(35, 213, 209, .16), rgba(35, 213, 209, .05)); }
.nav-item.active::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; background: var(--cyan); border-radius: 0 3px 3px 0; }
.nav-icon { width: 19px; height: 19px; flex: 0 0 19px; color: currentColor; }
.nav-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-label { flex: 1; font-size: 13px; white-space: nowrap; }
.nav-arrow { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: 3px; margin-top: -4px; opacity: .75; }
.nav-group.open .nav-arrow { transform: rotate(225deg); margin-top: 4px; }
.subnav { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.subnav-inner { min-height: 0; overflow: hidden; padding-left: 41px; }
.nav-group.open .subnav { grid-template-rows: 1fr; }
.subnav-item { width: 100%; min-height: 36px; padding: 0 8px; border-radius: 7px; background: transparent; color: #7890a3; text-align: left; cursor: pointer; font-size: 12px; position: relative; }
.subnav-item::before { content: ""; width: 4px; height: 4px; border: 1px solid currentColor; border-radius: 50%; display: inline-block; margin: 0 9px 1px 0; }
.subnav-item:hover, .subnav-item.active { color: var(--cyan-2); background: rgba(35, 213, 209, .07); }
.subnav-item.active::before { background: currentColor; box-shadow: 0 0 0 3px rgba(35, 213, 209, .1); }
.sidebar-footer { margin: 10px; padding: 12px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; gap: 10px; color: var(--muted); }
.sidebar-footer .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(52, 211, 153, .09); }
.sidebar-footer div { display: flex; flex-direction: column; gap: 3px; }
.sidebar-footer strong { color: #b9c8d3; font-size: 11px; font-weight: 500; }
.sidebar-footer small { color: var(--faint); font-size: 9px; }

.main-shell { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); flex: 0 0 var(--topbar-h); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: var(--topbar); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); position: relative; z-index: 20; }
.topbar-left, .topbar-right, .profile { display: flex; align-items: center; }
.topbar-left { gap: 10px; }
.topbar h1 { margin: 0 0 5px; font-size: 17px; font-weight: 600; letter-spacing: .03em; }
.breadcrumb { color: var(--faint); font-size: 10px; }
.topbar-right { gap: 18px; }
.system-time { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.system-time span { font-size: 10px; color: var(--faint); }
.system-time strong { color: #cbd8e1; font-size: 14px; letter-spacing: .08em; }
.notification-button { position: relative; }
.notification-button::before { content: ""; width: 14px; height: 14px; border: 1.6px solid currentColor; border-radius: 7px 7px 5px 5px; }
.notification-button::after { content: ""; position: absolute; width: 4px; border-top: 1.7px solid currentColor; bottom: 7px; }
.badge { position: absolute; right: 1px; top: 0; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; display: grid; place-items: center; background: var(--danger); color: white; font-size: 8px; border: 2px solid var(--topbar); }
.profile { gap: 9px; padding-left: 17px; border-left: 1px solid var(--line); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #082429; background: linear-gradient(135deg, var(--cyan-2), #58a8ff); font-weight: 700; }
.profile > div:last-child { display: flex; flex-direction: column; gap: 3px; }
.profile strong { font-size: 11px; font-weight: 600; }
.profile span { color: var(--faint); font-size: 9px; }
.mobile-menu-button { display: none; position: relative; }

.workspace { flex: 1; overflow: auto; min-height: 0; padding: 22px 24px 32px; background: radial-gradient(circle at 70% -20%, rgba(27, 84, 112, .11), transparent 38%), var(--bg); scrollbar-width: thin; scrollbar-color: #244258 transparent; }
.page-enter { animation: pageIn .25s ease both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.page-heading h2 { margin: 0 0 5px; font-size: 21px; font-weight: 600; letter-spacing: .02em; }
.page-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.btn { min-height: 36px; padding: 0 14px; border-radius: 8px; cursor: pointer; background: #173047; color: #cfdae2; border: 1px solid #29465b; font-size: 12px; font-weight: 500; transition: transform .15s, background .15s, border-color .15s; }
.btn:hover { background: #1b3953; border-color: #3c6079; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--cyan); color: #062326; border-color: var(--cyan); font-weight: 700; }
.btn.primary:hover { background: var(--cyan-2); }
.btn.danger { color: #ffb4ab; background: rgba(255, 116, 102, .08); border-color: rgba(255, 116, 102, .25); }
.btn.ghost { background: transparent; }
.btn.small { min-height: 29px; padding: 0 10px; font-size: 11px; }
.btn-icon { display: inline-flex; align-items: center; gap: 6px; }
.btn-icon::before { content: "+"; font-size: 16px; line-height: 0; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.metric-card { min-height: 104px; padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18, 42, 62, .86), rgba(10, 27, 42, .96)); position: relative; overflow: hidden; }
.metric-card::after { content: ""; position: absolute; right: -25px; top: -35px; width: 95px; height: 95px; border: 1px solid rgba(35, 213, 209, .08); border-radius: 50%; }
.metric-label { color: var(--muted); font-size: 11px; }
.metric-value { margin: 9px 0 6px; font-size: 27px; font-weight: 650; letter-spacing: .01em; }
.metric-value small { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.metric-foot { color: var(--faint); font-size: 10px; }
.metric-foot.up { color: #65d8a8; }
.metric-foot.warn { color: var(--orange); }
.metric-accent { position: absolute; width: 3px; left: 0; top: 18px; bottom: 18px; border-radius: 0 3px 3px 0; background: var(--cyan); }
.metric-card.warning .metric-accent { background: var(--orange); }
.metric-card.warning .metric-value { color: #ffd49a; }

.dashboard-grid { display: grid; grid-template-columns: minmax(500px, 1.65fr) minmax(285px, .8fr); gap: 14px; margin-bottom: 14px; }
.bottom-grid { display: grid; grid-template-columns: 1.4fr .72fr .88fr; gap: 14px; }
.panel { background: rgba(12, 28, 43, .94); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.panel-head { min-height: 50px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-soft); }
.panel-head strong { font-size: 13px; font-weight: 600; }
.panel-head span, .panel-note { color: var(--faint); font-size: 10px; }
.panel-body { padding: 16px; }
.panel-toolbar { display: flex; align-items: center; gap: 8px; }
.text-link { color: var(--cyan); cursor: pointer; background: none; padding: 0; font-size: 10px; }

.map-panel { min-height: 366px; position: relative; overflow: hidden; background: #091c2a; }
.water-map { position: absolute; inset: 50px 0 0; overflow: hidden; }
.water-map::before { content: ""; position: absolute; inset: -10%; background: linear-gradient(27deg, transparent 42%, rgba(33, 124, 153, .17) 43%, rgba(24, 104, 133, .22) 50%, transparent 52%), linear-gradient(147deg, transparent 50%, rgba(30, 112, 145, .18) 51%, rgba(27, 99, 132, .24) 56%, transparent 58%), repeating-linear-gradient(0deg, transparent 0 36px, rgba(56, 105, 131, .07) 37px 38px), repeating-linear-gradient(90deg, transparent 0 49px, rgba(56, 105, 131, .06) 50px 51px); transform: rotate(-3deg) scale(1.07); }
.water-map::after { content: ""; position: absolute; left: 12%; top: -20%; width: 28%; height: 150%; border: 31px solid rgba(30, 160, 176, .16); border-left-width: 46px; border-radius: 48% 60% 50% 55%; transform: rotate(27deg); filter: drop-shadow(0 0 12px rgba(25, 154, 172, .12)); }
.map-label { position: absolute; z-index: 2; color: #537a91; font-size: 10px; letter-spacing: .08em; }
.map-point { position: absolute; z-index: 3; width: 16px; height: 16px; margin: -8px; border: 2px solid #0b2e3b; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(35, 213, 209, .13); cursor: pointer; }
.map-point::after { content: attr(data-name); position: absolute; left: 18px; top: -6px; white-space: nowrap; color: #bcd0db; background: rgba(5, 18, 29, .84); border: 1px solid #24485d; padding: 4px 7px; border-radius: 5px; font-size: 9px; }
.map-point.warning { background: var(--orange); box-shadow: 0 0 0 5px rgba(244, 183, 93, .15); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(244, 183, 93, 0); } }
.map-legend { position: absolute; z-index: 4; left: 15px; bottom: 14px; display: flex; gap: 12px; color: var(--muted); font-size: 9px; background: rgba(6, 19, 31, .84); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; }
.legend-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); margin-right: 5px; }
.legend-dot.warn { background: var(--orange); }

.alert-list { padding: 4px 14px 10px; }
.alert-row { padding: 12px 2px; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: 7px 1fr auto; gap: 10px; align-items: start; cursor: pointer; }
.alert-row:last-child { border-bottom: 0; }
.alert-row:hover .alert-title { color: var(--cyan-2); }
.alert-level { width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: var(--orange); }
.alert-level.high { background: var(--danger); box-shadow: 0 0 0 4px rgba(255, 116, 102, .07); }
.alert-title { font-size: 11px; margin-bottom: 5px; transition: color .15s; }
.alert-meta { color: var(--faint); font-size: 9px; line-height: 1.7; }
.alert-time { color: var(--faint); font-size: 9px; }

.chart-wrap { position: relative; min-height: 190px; }
.chart-wrap canvas { width: 100%; height: 190px; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 8px; color: var(--muted); font-size: 9px; }
.chart-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; }
.donut-layout { min-height: 190px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; justify-items: start; }
.donut-layout canvas { width: 148px; height: 148px; aspect-ratio: 1; display: block; justify-self: center; }
.species-list { display: flex; flex-direction: column; gap: 9px; }
.species-row { display: grid; grid-template-columns: 8px 1fr auto; gap: 7px; font-size: 10px; align-items: center; }
.species-row i { width: 6px; height: 6px; border-radius: 2px; }
.species-row span { color: var(--muted); }
.species-row strong { font-size: 10px; }
.device-summary { display: flex; flex-direction: column; }
.device-summary-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.device-summary-row:last-child { border-bottom: 0; }
.device-summary-row span { color: var(--muted); font-size: 10px; }
.device-summary-row strong { font-size: 11px; }
.progress { height: 4px; background: #162c3d; border-radius: 4px; overflow: hidden; margin-top: 7px; grid-column: 1/-1; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); border-radius: inherit; }

.filter-panel { padding: 14px 16px; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.field { min-width: 140px; display: flex; flex-direction: column; gap: 6px; }
.field.grow { flex: 1; }
.field label { color: var(--muted); font-size: 10px; }
.input, .select, .textarea { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: #091a28; color: #cbd8e0; padding: 0 11px; outline: none; font-size: 11px; }
.input::placeholder, .textarea::placeholder { color: #50687b; }
.input:focus, .select:focus, .textarea:focus { border-color: rgba(35, 213, 209, .56); box-shadow: 0 0 0 3px rgba(35, 213, 209, .06); }
.select { min-width: 140px; }
.textarea { min-height: 88px; padding-top: 10px; resize: vertical; }
.check { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; cursor: pointer; }
.check input { accent-color: var(--cyan); }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.data-table th { height: 42px; padding: 0 14px; background: rgba(23, 49, 70, .5); color: #7f96a8; font-size: 10px; font-weight: 500; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { height: 50px; padding: 0 14px; color: #becbd4; font-size: 11px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(42, 84, 112, .08); }
.cell-title { color: var(--text); font-weight: 500; }
.cell-muted { color: var(--faint); }
.tag { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border-radius: 5px; color: #9be5c3; background: rgba(52, 211, 153, .09); border: 1px solid rgba(52, 211, 153, .18); font-size: 9px; }
.tag.warn { color: #ffd395; background: rgba(244, 183, 93, .09); border-color: rgba(244, 183, 93, .2); }
.tag.danger { color: #ffaaa1; background: rgba(255, 116, 102, .09); border-color: rgba(255, 116, 102, .2); }
.tag.info { color: #9fd7ff; background: rgba(79, 141, 255, .09); border-color: rgba(79, 141, 255, .2); }
.row-actions { display: flex; gap: 8px; }
.action-link { color: var(--cyan); background: none; padding: 0; cursor: pointer; font-size: 10px; }
.action-link.danger { color: #ff988d; }
.pagination { min-height: 50px; padding: 0 15px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; color: var(--faint); font-size: 10px; }
.pages { display: flex; gap: 5px; }
.page-btn { width: 28px; height: 28px; border-radius: 6px; background: #10273a; color: var(--muted); cursor: pointer; border: 1px solid var(--line); }
.page-btn.active { background: rgba(35, 213, 209, .14); color: var(--cyan); border-color: rgba(35, 213, 209, .34); }

.monitor-layout { display: grid; grid-template-columns: 260px 1fr; gap: 14px; min-height: 630px; }
.tree { padding: 10px 14px 16px; }
.tree-row { min-height: 36px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; border-radius: 7px; padding: 0 8px; cursor: pointer; }
.tree-row:hover, .tree-row.active { background: rgba(35, 213, 209, .08); color: var(--cyan-2); }
.tree-row.child { padding-left: 27px; }
.tree-bullet { width: 7px; height: 7px; border-radius: 2px; border: 1px solid currentColor; }
.video-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 12px; }
.video-tile { border: 1px solid var(--line); border-radius: 10px; background: #06101a; overflow: hidden; position: relative; aspect-ratio: 16/9; }
.video-scene { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(40, 144, 157, .23), transparent 32%), linear-gradient(165deg, #0a2937, #071620 60%, #08131a); overflow: hidden; }
.video-scene::before, .video-scene::after { content: ""; position: absolute; border-radius: 50% 42% 50% 45%; border: 1px solid rgba(79, 174, 184, .28); width: 58px; height: 19px; transform: rotate(-8deg); }
.video-scene::before { left: 30%; top: 42%; box-shadow: 112px 55px 0 -4px rgba(0,0,0,0), 112px 55px 0 -3px rgba(79,174,184,.17); }
.video-scene::after { right: 18%; top: 26%; width: 38px; height: 13px; opacity: .65; }
.video-noise { position: absolute; inset: 0; opacity: .28; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(122, 205, 211, .025) 4px); }
.video-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 11px 9px; background: linear-gradient(transparent, rgba(3, 11, 18, .88)); display: flex; justify-content: space-between; align-items: end; }
.video-info strong { font-size: 10px; }
.video-info span { color: var(--cyan); font-size: 9px; }
.live-tag { position: absolute; left: 10px; top: 10px; color: #b9f6d7; background: rgba(5, 24, 24, .7); border: 1px solid rgba(52, 211, 153, .28); border-radius: 5px; padding: 4px 7px; font-size: 8px; }
.video-tools { position: absolute; right: 10px; top: 10px; display: flex; gap: 5px; }
.round-tool { width: 25px; height: 25px; border-radius: 6px; background: rgba(4, 14, 23, .72); color: #a5bac7; cursor: pointer; border: 1px solid rgba(92, 128, 150, .3); font-size: 10px; }
.scan-box { position: absolute; width: 75px; height: 34px; border: 1px solid rgba(35, 213, 209, .65); box-shadow: inset 0 0 0 1px rgba(35, 213, 209, .18); }
.scan-label { position: absolute; left: -1px; bottom: 100%; color: #042226; background: var(--cyan); font-size: 7px; padding: 2px 4px; white-space: nowrap; }
.point-detail { display: grid; grid-template-columns: 1.35fr .65fr; gap: 14px; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 9px; overflow: hidden; }
.info-item { padding: 14px; background: var(--panel); }
.info-item span { display: block; color: var(--faint); font-size: 9px; margin-bottom: 6px; }
.info-item strong { font-size: 11px; font-weight: 500; }

.tabs { display: flex; min-height: 46px; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.tab { padding: 0 2px; background: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; font-size: 11px; }
.tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.warning-detail-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.timeline { padding: 0 5px; }
.timeline-item { position: relative; padding: 0 0 22px 25px; border-left: 1px solid var(--line); margin-left: 6px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -5px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(35, 213, 209, .08); }
.timeline-item strong { display: block; font-size: 11px; margin-bottom: 5px; }
.timeline-item span { color: var(--faint); font-size: 9px; }

.download-list { display: grid; gap: 10px; }
.download-card { padding: 14px; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: rgba(16, 37, 55, .46); }
.file-icon { width: 42px; height: 42px; border-radius: 9px; background: rgba(79, 141, 255, .1); color: #8bb7ff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.download-card strong { display: block; font-size: 11px; margin-bottom: 5px; }
.download-card span { color: var(--faint); font-size: 9px; }
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.setting-block { padding: 17px; }
.setting-block h3 { margin: 0 0 4px; font-size: 13px; }
.setting-block > p { margin: 0 0 18px; color: var(--muted); font-size: 10px; }
.setting-row { min-height: 50px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line-soft); gap: 20px; }
.setting-row label { color: #b8c7d1; font-size: 11px; }
.switch { width: 36px; height: 20px; border-radius: 12px; background: #243c4f; padding: 3px; cursor: pointer; transition: background .16s; }
.switch::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: #7890a1; transition: transform .16s, background .16s; }
.switch.on { background: rgba(35, 213, 209, .27); }
.switch.on::before { transform: translateX(16px); background: var(--cyan); }

.analysis-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 14px; margin-bottom: 14px; }
.stat-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mini-stat { padding: 14px; border: 1px solid var(--line-soft); border-radius: 9px; background: #0e2234; }
.mini-stat span { color: var(--faint); font-size: 9px; }
.mini-stat strong { display: block; margin-top: 8px; font-size: 19px; }
.length-bars { display: flex; flex-direction: column; gap: 13px; }
.bar-row { display: grid; grid-template-columns: 68px 1fr 45px; gap: 9px; align-items: center; font-size: 9px; color: var(--muted); }
.bar-track { height: 8px; background: #172e41; border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); border-radius: inherit; }

.report-builder { display: grid; grid-template-columns: 230px 1fr 250px; gap: 14px; min-height: 630px; }
.component-list { padding: 10px; }
.component-item { min-height: 44px; margin-bottom: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; background: #0d2031; cursor: grab; }
.component-item::before { content: "⋮⋮"; color: var(--faint); letter-spacing: -3px; }
.report-canvas { padding: 34px; background: #dce4e8; color: #1c2a34; min-height: 630px; }
.report-paper { max-width: 680px; min-height: 560px; margin: 0 auto; background: white; padding: 38px 42px; box-shadow: 0 8px 28px rgba(6, 20, 30, .2); }
.report-paper h3 { font-size: 20px; text-align: center; margin: 0 0 6px; }
.report-paper .paper-meta { text-align: center; color: #71808b; font-size: 9px; margin-bottom: 28px; }
.paper-block { border: 1px dashed #9aadb9; border-radius: 4px; padding: 16px; margin-bottom: 14px; position: relative; }
.paper-block.selected { border: 2px solid #2aa6a2; }
.paper-block strong { font-size: 12px; }
.paper-placeholder { height: 85px; margin-top: 12px; background: linear-gradient(180deg, #eef4f6, #fafcfd); display: flex; align-items: end; padding: 10px; gap: 6px; }
.paper-placeholder i { flex: 1; background: #4cb8b5; border-radius: 2px 2px 0 0; }
.report-preview { max-width: 1000px; margin: auto; }
.report-preview .report-paper { max-width: 900px; min-height: 760px; }

.model-cards { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 14px; margin-bottom: 14px; }
.model-card { padding: 17px; }
.model-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 17px; }
.model-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: rgba(139, 124, 255, .12); color: #b6adff; font-weight: 700; font-size: 11px; }
.model-card h3 { margin: 0 0 5px; font-size: 12px; }
.model-card p { margin: 0; color: var(--faint); font-size: 9px; }
.model-score { font-size: 23px; margin: 10px 0 5px; }
.train-layout { display: grid; grid-template-columns: 1fr 320px; gap: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.training-console { min-height: 238px; border: 1px solid #1d384c; border-radius: 9px; padding: 14px; background: #06111b; color: #7da6b8; font: 10px/1.9 Consolas, monospace; overflow: hidden; }
.training-console .ok { color: var(--cyan); }
.training-console .warn { color: var(--orange); }
.radar-layout { display: grid; grid-template-columns: minmax(300px, .9fr) 1.1fr; gap: 14px; }
.radar-layout canvas { width: 100%; height: 310px; }
.deployment-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 26px; }
.flow-step { text-align: center; position: relative; }
.flow-step:not(:last-child)::after { content: ""; position: absolute; left: calc(50% + 30px); right: calc(-50% + 30px); top: 24px; border-top: 1px dashed #38596f; }
.flow-node { width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: #132c41; border: 1px solid #2c526b; color: var(--muted); position: relative; z-index: 2; font-size: 11px; }
.flow-step.done .flow-node { color: #062529; background: var(--cyan); border-color: var(--cyan); }
.flow-step.active .flow-node { color: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 5px rgba(244, 183, 93, .08); }
.flow-step strong { display: block; font-size: 10px; margin-bottom: 4px; }
.flow-step span { color: var(--faint); font-size: 9px; }

.role-layout { display: grid; grid-template-columns: 280px 1fr; gap: 14px; }
.role-list { padding: 9px; }
.role-item { padding: 12px; margin-bottom: 7px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.role-item.active { background: rgba(35, 213, 209, .07); border-color: rgba(35, 213, 209, .2); }
.role-item strong { display: block; font-size: 11px; margin-bottom: 5px; }
.role-item span { color: var(--faint); font-size: 9px; }
.permission-tree { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.permission-group { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.permission-group > label { min-height: 40px; padding: 0 12px; background: #11283b; display: flex; align-items: center; gap: 7px; color: #c8d4dc; font-size: 11px; }
.permission-children { padding: 9px 12px; display: flex; flex-direction: column; gap: 10px; }
.menu-tree-table td:first-child { padding-left: 22px; }
.menu-indent { display: inline-block; width: 24px; color: var(--faint); }
.log-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.config-tabs-layout { display: grid; grid-template-columns: 210px 1fr; min-height: 560px; }
.config-nav { padding: 10px; border-right: 1px solid var(--line); }
.config-nav button { width: 100%; min-height: 40px; padding: 0 12px; text-align: left; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; }
.config-nav button.active { background: rgba(35, 213, 209, .08); color: var(--cyan); }
.config-content { padding: 24px; max-width: 760px; }
.config-content h3 { margin: 0 0 5px; font-size: 14px; }
.config-content > p { color: var(--muted); font-size: 10px; margin: 0 0 22px; }

.empty-state { min-height: 280px; display: grid; place-items: center; text-align: center; color: var(--muted); }
.empty-state strong { display: block; color: var(--text); margin-bottom: 7px; }
.drawer { position: fixed; z-index: 70; right: 0; top: 0; bottom: 0; width: 380px; max-width: 92vw; background: #0a1927; border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(0,0,0,.28); transform: translateX(105%); transition: transform .24s ease; }
.drawer.open { transform: none; }
.drawer-head, .modal-head { min-height: 72px; padding: 0 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.drawer-head > div, .modal-head > div { display: flex; flex-direction: column; gap: 5px; }
.drawer-head strong, .modal-head strong { font-size: 14px; }
.drawer-head span, .modal-head span { color: var(--faint); font-size: 9px; }
.drawer-head .icon-button::before, .modal-head .icon-button::before { content: ""; width: 14px; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.drawer-head .icon-button::after, .modal-head .icon-button::after { content: ""; position: absolute; width: 14px; border-top: 1.5px solid currentColor; transform: rotate(-45deg); }
.drawer-list { padding: 8px 18px; }
.drawer-message { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.drawer-message strong { display: block; font-size: 11px; margin-bottom: 6px; }
.drawer-message p { color: var(--muted); font-size: 10px; line-height: 1.65; margin: 0 0 7px; }
.drawer-message span { color: var(--faint); font-size: 9px; }
.overlay { position: fixed; z-index: 60; inset: 0; background: rgba(2, 8, 13, .58); opacity: 0; visibility: hidden; transition: .2s; }
.overlay.show { opacity: 1; visibility: visible; }
.toast-stack { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; }
.toast { width: 290px; padding: 12px 14px; border-radius: 9px; background: #12283a; border: 1px solid #2a4a60; box-shadow: var(--shadow); animation: toastIn .22s ease both; font-size: 11px; color: #d6e1e8; }
.toast.success { border-left: 3px solid var(--success); }
.toast.warning { border-left: 3px solid var(--orange); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
.modal { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: .2s; background: rgba(2, 8, 13, .65); }
.modal.open { opacity: 1; visibility: visible; }
.modal-card { width: min(560px, 96vw); max-height: 88vh; overflow: auto; border: 1px solid #2b4c62; border-radius: 13px; background: #0c1c2b; box-shadow: var(--shadow); transform: translateY(8px); transition: transform .2s; }
.modal.open .modal-card { transform: none; }
.modal-body { padding: 20px; }
.modal-actions { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.detail-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.detail-item { padding: 12px; border-radius: 8px; background: #102438; }
.detail-item span { display: block; color: var(--faint); font-size: 9px; margin-bottom: 6px; }
.detail-item strong { font-size: 11px; font-weight: 500; }

.sidebar-collapsed .sidebar { width: 66px; flex-basis: 66px; }
.sidebar-collapsed .brand { padding: 0 13px; }
.sidebar-collapsed .brand-copy, .sidebar-collapsed .collapse-button, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-arrow, .sidebar-collapsed .subnav, .sidebar-collapsed .sidebar-footer div { display: none; }
.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-footer { justify-content: center; padding: 12px 0; }

@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .bottom-grid { grid-template-columns: 1fr 1fr; }
  .bottom-grid > :first-child { grid-column: 1/-1; }
  .model-cards { grid-template-columns: repeat(2, 1fr); }
  .report-builder { grid-template-columns: 200px 1fr; }
  .report-builder > :last-child { display: none; }
}

@media (max-width: 880px) {
  body { overflow: auto; }
  .app-shell { min-height: 100vh; height: auto; }
  .sidebar, .sidebar-collapsed .sidebar { position: fixed; inset: 0 auto 0 0; width: 246px; transform: translateX(-105%); box-shadow: 20px 0 40px rgba(0,0,0,.35); }
  .sidebar.mobile-open { transform: none; }
  .sidebar-collapsed .brand-copy, .sidebar-collapsed .collapse-button, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-arrow, .sidebar-collapsed .subnav, .sidebar-collapsed .sidebar-footer div { display: flex; }
  .sidebar-collapsed .nav-item { justify-content: flex-start; padding: 0 11px; }
  .main-shell { width: 100%; }
  .mobile-menu-button { display: grid; }
  .collapse-button { display: none !important; }
  .topbar { padding: 0 14px; position: sticky; top: 0; }
  .topbar-right { gap: 8px; }
  .system-time, .profile > div:last-child { display: none; }
  .profile { padding-left: 8px; }
  .workspace { padding: 16px 14px 28px; min-height: calc(100vh - 72px); }
  .dashboard-grid, .analysis-grid, .point-detail, .warning-detail-layout, .train-layout, .radar-layout, .role-layout { grid-template-columns: 1fr; }
  .monitor-layout { grid-template-columns: 1fr; }
  .monitor-layout > :first-child { display: none; }
  .config-grid { grid-template-columns: 1fr; }
  .permission-tree { grid-template-columns: repeat(2, 1fr); }
  .report-builder { grid-template-columns: 1fr; }
  .report-builder > :first-child { display: none; }
  .deployment-flow { grid-template-columns: repeat(2, 1fr); }
  .flow-step::after { display: none; }
}

@media (max-width: 600px) {
  .metric-grid, .bottom-grid, .model-cards, .log-overview { grid-template-columns: 1fr; }
  .bottom-grid > :first-child { grid-column: auto; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { width: 100%; }
  .heading-actions .btn { flex: 1; }
  .video-grid { grid-template-columns: 1fr; }
  .filter-panel { align-items: stretch; }
  .field, .field.grow, .select { min-width: 100%; width: 100%; }
  .filter-panel .btn { flex: 1; }
  .form-grid, .info-grid, .permission-tree, .detail-list { grid-template-columns: 1fr; }
  .report-canvas { padding: 13px; }
  .report-paper { padding: 26px 20px; }
  .config-tabs-layout { grid-template-columns: 1fr; }
  .config-nav { border-right: 0; border-bottom: 1px solid var(--line); display: flex; overflow-x: auto; }
  .config-nav button { min-width: 110px; }
  .donut-layout { grid-template-columns: 1fr; }
}

/* 登录页 */
.login-mode { overflow: auto; }
.login-screen { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.login-screen[hidden] { display: none !important; }
.login-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 20% 15%, rgba(35, 213, 209, .14), transparent 36%), radial-gradient(circle at 80% 80%, rgba(79, 141, 255, .12), transparent 40%), linear-gradient(160deg, #07111d, #0a1c2d 55%, #07111d); }
.login-card { position: relative; z-index: 1; width: min(420px, 100%); padding: 28px 26px 24px; border: 1px solid var(--line); border-radius: 14px; background: rgba(12, 28, 43, .94); box-shadow: var(--shadow); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.login-brand strong { display: block; font-size: 18px; letter-spacing: .06em; }
.login-brand span { display: block; margin-top: 4px; color: var(--faint); font-size: 10px; line-height: 1.5; }
.login-submit { width: 100%; margin-top: 18px; min-height: 42px; }

.playback-layout { display: grid; grid-template-columns: 1.5fr .55fr; gap: 14px; }
.playback-stage { display: grid; gap: 12px; }
.playback-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.playback-bar { flex: 1; min-width: 140px; height: 6px; border-radius: 6px; background: #162c3d; overflow: hidden; }
.playback-progress { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.playback-time { color: var(--faint); font-size: 10px; white-space: nowrap; }
.playlist { display: grid; gap: 8px; }
.playlist-item { text-align: left; padding: 12px; border-radius: 8px; border: 1px solid var(--line); background: #0d2031; color: var(--muted); cursor: pointer; }
.playlist-item strong { display: block; color: var(--text); font-size: 11px; margin-bottom: 6px; }
.playlist-item span { font-size: 9px; line-height: 1.6; color: var(--faint); }
.playlist-item.active, .playlist-item:hover { border-color: rgba(35, 213, 209, .35); background: rgba(35, 213, 209, .08); color: var(--cyan-2); }

.matrix-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; }
.matrix-grid .input { text-align: center; padding: 0 6px; }
.upload-zone { min-height: 140px; border: 1px dashed rgba(35, 213, 209, .35); border-radius: 10px; display: grid; place-items: center; text-align: center; gap: 6px; background: rgba(35, 213, 209, .04); cursor: pointer; padding: 20px; margin-bottom: 8px; }
.upload-zone strong { font-size: 12px; color: var(--cyan-2); }
.upload-zone span { color: var(--faint); font-size: 10px; }

@media (max-width: 880px) {
  .playback-layout { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}