:root { --ops-bg:#020b18; --ops-panel:#061727; --ops-panel-2:#0a213a; --ops-line:#124d78; --ops-cyan:#06d7ff; --ops-blue:#168dff; --ops-text:#e6f3ff; --ops-muted:#8ba9c5; --ops-green:#2dde68; --ops-orange:#ffb338; }
body { background:var(--ops-bg); color:var(--ops-text); font-family:var(--font-sans); }
.ops-page { display:flex; flex-direction:column; width:calc(100% - 44px); max-width:1600px; margin:0 auto; padding:18px 0 64px; color:var(--ops-text); }
.ops-page .ops-header { order:1; }.ops-page .ops-alert { order:2; }.ops-page .ops-kpis { order:3; }.ops-page .ops-company-overview { order:4; }.ops-page .ops-weekly-total { order:5; }.ops-page .ops-company-weekly { order:6; }.ops-page .ops-health-section { order:7; }.ops-page .ops-trend-section { order:8; }.ops-page .ops-model-section { order:9; }.ops-page .ops-filter-section { order:10; }.ops-page .ops-task-section { order:11; }
.ops-header { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:62px; padding:0 12px 16px; border-bottom:1px solid var(--ops-line); }
.ops-header:after { content:""; position:absolute; bottom:-1px; left:22%; width:56%; height:2px; background:var(--ops-cyan); box-shadow:0 0 16px rgba(6,215,255,.65); }
.ops-eyebrow { display:none; }.ops-header h1 { margin:0; position:absolute; left:50%; transform:translateX(-50%); color:#f5fbff; font-size:34px; line-height:1.1; font-weight:600; letter-spacing:.08em; text-shadow:0 0 18px rgba(22,141,255,.5); }.ops-header-meta { display:flex; align-items:center; gap:7px; margin:0; color:var(--ops-text); font-size:14px; }.ops-header-meta svg { width:16px; height:16px; color:var(--ops-cyan); }.ops-refresh { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--ops-line); border-radius:5px; padding:8px 13px; background:var(--ops-panel); color:var(--ops-text); font:inherit; font-size:12px; cursor:pointer; }.ops-refresh:hover { border-color:var(--ops-cyan); color:var(--ops-cyan); }.ops-refresh svg { width:15px; height:15px; }
.ops-alert { display:flex; align-items:center; gap:10px; margin:14px 0 0; padding:10px 13px; border:1px solid #6b2930; background:#1c101a; color:#ffb9bd; font-size:12px; }.ops-alert span { flex:1; }.ops-alert button,.ops-filters button { border:1px solid var(--ops-line); border-radius:4px; padding:6px 12px; background:transparent; color:var(--ops-text); font:inherit; cursor:pointer; }.ops-alert button:hover,.ops-filters button:hover { border-color:var(--ops-cyan); color:var(--ops-cyan); }
.ops-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:14px; }.ops-kpis article { position:relative; min-height:138px; padding:20px 20px 16px 84px; border:1px solid var(--ops-line); border-radius:5px; background:linear-gradient(105deg,var(--ops-panel),#03111f); box-shadow:inset 0 0 24px rgba(11,86,138,.14); }.ops-kpis article:before,.ops-kpis article:after { content:""; position:absolute; width:12px; height:12px; border-color:var(--ops-cyan); }.ops-kpis article:before { top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; }.ops-kpis article:after { right:-1px; bottom:-1px; border-right:2px solid; border-bottom:2px solid; }.ops-kpi-icon { position:absolute; left:20px; top:32px; display:grid; place-items:center; width:48px; height:48px; border-radius:10px; background:#0b4271; color:var(--ops-cyan); }.ops-kpi-icon svg { width:26px; height:26px; }.ops-kpis span,.ops-kpis small { display:block; color:var(--ops-text); font-size:14px; }.ops-kpis .ops-kpi-icon { display:grid; }.ops-kpis strong { display:block; margin:7px 0 6px; color:var(--ops-cyan); font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.02em; }.ops-kpis small { color:var(--ops-muted); font-size:12px; }
.ops-section { margin-top:16px; border:1px solid var(--ops-line); border-radius:5px; background:linear-gradient(105deg,rgba(6,23,39,.98),rgba(3,14,27,.98)); box-shadow:inset 0 0 28px rgba(9,73,119,.12); }.ops-section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px 12px; }.ops-section-head>div { display:flex; align-items:center; gap:10px; }.ops-section-actions { display:flex; align-items:center; gap:10px; }.ops-kicker { margin:0; width:4px; height:22px; overflow:hidden; color:transparent; background:var(--ops-cyan); border-radius:2px; }.ops-section-head h2 { margin:0; color:var(--ops-text); font-size:17px; font-weight:600; }.ops-section-head>span,.ops-section-actions>span { color:var(--ops-muted); font-size:12px; }.ops-expand { border:1px solid var(--ops-line); border-radius:4px; padding:4px 9px; background:transparent; color:var(--ops-cyan); font:inherit; font-size:12px; cursor:pointer; }.ops-expand:hover { border-color:var(--ops-cyan); background:rgba(6,215,255,.08); }
.ops-company-table { padding:0 14px 14px; }.ops-company-table table { width:100%; border-collapse:collapse; font-size:14px; }.ops-company-table th,.ops-company-table td { padding:12px 14px; border:1px solid rgba(36,94,135,.62); text-align:center; }.ops-company-table th { color:#a7d9ff; background:rgba(10,54,91,.65); font-weight:500; }.ops-company-table td:first-child { text-align:left; font-weight:600; }.ops-company-table tr:last-child td { color:var(--ops-cyan); font-weight:600; }
.ops-trend-wrap { padding:0 16px 16px; }.ops-trend-svg { display:block; width:100%; height:270px; }.ops-chart-grid { stroke:rgba(116,157,190,.25); stroke-dasharray:3 4; }.ops-chart-axis { stroke:rgba(132,171,204,.45); }.ops-chart-label { fill:var(--ops-muted); font-size:11px; }.ops-chart-legend { display:flex; gap:18px; margin:0 0 4px 58px; color:var(--ops-text); font-size:12px; }.ops-chart-legend span { display:inline-flex; align-items:center; gap:6px; }.ops-chart-legend i { display:inline-block; width:10px; height:3px; border-radius:2px; }.legend-zhaoyuantou { background:#35dc5b; }.legend-zhaojiafang { background:#1d96ff; }.legend-dushang { background:#ffab3d; }
.ops-filters { display:grid; grid-template-columns:1.3fr 1.3fr 1.1fr 1.1fr 1fr 1fr auto; gap:10px; padding:0 16px 16px; }.ops-filters label { display:grid; gap:5px; color:var(--ops-text); font-size:12px; }.ops-filters input,.ops-filters select { min-width:0; height:36px; padding:0 9px; border:1px solid var(--ops-line); border-radius:4px; background:#061526; color:var(--ops-text); font:inherit; font-size:12px; }.ops-filters button { align-self:end; height:36px; white-space:nowrap; }
.ops-health-table,.ops-table-wrap { padding:0 14px 14px; overflow-x:auto; }.ops-health-table table,.ops-table-wrap table { width:100%; min-width:840px; border-collapse:collapse; font-size:13px; }.ops-health-table th,.ops-health-table td,.ops-table-wrap th,.ops-table-wrap td { padding:11px 12px; border:1px solid rgba(36,94,135,.62); text-align:center; white-space:nowrap; }.ops-health-table th,.ops-table-wrap th { color:#a7d9ff; background:rgba(10,54,91,.65); font-weight:500; }.ops-health-table td:first-child,.ops-table-wrap td:first-child { text-align:left; }.ops-table-wrap td { color:#d5e8f7; }.ops-table-wrap tr:nth-child(even) td { background:rgba(14,45,77,.4); }.ops-model { color:var(--ops-cyan)!important; }.ops-mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; }.ops-status { display:inline-flex; padding:2px 8px; border-radius:999px; font-size:11px; }.ops-status.is-success { color:var(--ops-green); background:rgba(45,222,104,.12); }.ops-status.is-failed { color:#ff6470; background:rgba(255,65,78,.14); }.ops-status.is-pending { color:var(--ops-orange); background:rgba(255,179,56,.14); }.ops-online { color:var(--ops-green); }.ops-offline { color:#ff6470; }.ops-empty { display:grid; place-items:center; gap:7px; min-height:120px; color:var(--ops-muted); }.ops-empty svg { width:23px; height:23px; }.ops-empty p { margin:0; font-size:12px; }
@media (max-width:1100px) { .ops-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.ops-filters { grid-template-columns:repeat(4,minmax(0,1fr)); }.ops-filters button { grid-column:span 1; } }
@media (max-width:620px) { .ops-page { width:calc(100% - 20px); padding-top:10px; }.ops-header { align-items:flex-start; flex-direction:column; gap:10px; }.ops-header h1 { position:static; transform:none; order:-1; width:100%; text-align:center; font-size:25px; }.ops-refresh { position:absolute; right:0; bottom:12px; }.ops-header-meta { font-size:11px; }.ops-kpis { grid-template-columns:1fr; }.ops-kpis strong { font-size:27px; }.ops-company-table,.ops-health-table,.ops-table-wrap { padding-inline:8px; }.ops-filters { grid-template-columns:1fr 1fr; }.ops-filters label:nth-child(3) { grid-column:span 2; }.ops-filters button { grid-column:span 2; }.ops-chart-legend { margin-left:10px; gap:10px; }.ops-trend-svg { height:220px; } }
@media (min-width:1101px) { .ops-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }