:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;color:#17202c;background:#f5f7fb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--surface: #ffffff;--surface-muted: #f8fafc;--line: #d9e1ec;--text-muted: #607086;--blue: #2563eb;--green: #16a34a;--amber: #d97706;--red: #dc2626;--violet: #7c3aed;--cyan: #0891b2;--ink: #0f172a;--shadow: 0 14px 36px rgba(24, 38, 67, .1);--shadow-soft: 0 1px 0 rgba(255, 255, 255, .8) inset}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(180deg,#f1f7fff2,#f5f7fbc7 42%,#f7f8fb),linear-gradient(90deg,#2563eb17,#0891b20f,#16a34a0d)}body:before{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;content:"";background-image:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.72),transparent 76%);mask-image:linear-gradient(180deg,rgba(0,0,0,.72),transparent 76%)}button{font:inherit}.app-shell{position:relative;min-height:100vh;isolation:isolate}.visual-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none}.visual-backdrop:before{position:absolute;top:-24%;right:-12%;bottom:-24%;left:-12%;content:"";background-image:linear-gradient(90deg,rgba(37,99,235,.13) 1px,transparent 1px),linear-gradient(rgba(8,145,178,.11) 1px,transparent 1px),linear-gradient(115deg,transparent 0 45%,rgba(124,58,237,.08) 48%,transparent 52%);background-size:72px 72px,72px 72px,360px 360px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.5) 46%,transparent 92%);mask-image:linear-gradient(180deg,rgba(0,0,0,.88),rgba(0,0,0,.5) 46%,transparent 92%);opacity:.72;transform:perspective(900px) rotateX(58deg) translateY(-26%);transform-origin:50% 0;animation:gridRun 18s linear infinite}.visual-backdrop:after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:linear-gradient(105deg,transparent 0 34%,rgba(255,255,255,.55) 45%,transparent 56%),linear-gradient(180deg,rgba(37,99,235,.08),transparent 32%,rgba(22,163,74,.07));opacity:.58;transform:translate(-78%) skew(-18deg);animation:glassSweep 12s ease-in-out infinite}.backdrop-ribbon{position:absolute;width:108vw;height:170px;border:1px solid rgba(37,99,235,.14);border-radius:8px;background:linear-gradient(90deg,transparent 0%,rgba(37,99,235,.1) 24%,rgba(8,145,178,.14) 50%,rgba(22,163,74,.1) 76%,transparent 100%),repeating-linear-gradient(90deg,rgba(15,23,42,.08) 0 1px,transparent 1px 18px);box-shadow:0 18px 70px #2563eb1c;opacity:.64;mix-blend-mode:multiply;transform:rotate(-8deg);animation:ribbonDrift 16s ease-in-out infinite alternate}.ribbon-a{top:98px;left:-18vw}.ribbon-b{right:-24vw;bottom:14%;transform:rotate(8deg);animation-duration:20s;animation-delay:-5s}.backdrop-scan{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(180deg,transparent 0 16px,rgba(37,99,235,.045) 17px 18px),repeating-linear-gradient(90deg,transparent 0 120px,rgba(8,145,178,.05) 121px 122px);-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.86) 16%,rgba(0,0,0,.42) 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.86) 16%,rgba(0,0,0,.42) 72%,transparent 100%);opacity:.68;animation:scanRun 9s linear infinite}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px;padding:14px clamp(16px,4vw,42px);border-bottom:1px solid rgba(148,163,184,.28);background:#ffffffc7;box-shadow:0 8px 30px #0f172a0f;-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);overflow:hidden}.topbar:after{position:absolute;inset:auto 0 0;height:2px;content:"";background:linear-gradient(90deg,var(--blue),var(--cyan),var(--green),var(--violet),var(--blue));background-size:240% 100%;box-shadow:0 0 18px #2563eb80;animation:spectrumSlide 7s linear infinite}.topbar>*{position:relative;z-index:1}.brand-block,.topbar-actions,.panel-header,.panel-title,.notice,.status-badge,.icon-button{display:flex;align-items:center}.brand-block{min-width:0;gap:12px}.brand-mark{position:relative;overflow:hidden;display:grid;flex:0 0 auto;width:42px;height:42px;place-items:center;border:1px solid rgba(37,99,235,.22);border-radius:8px;color:#fff;background:linear-gradient(135deg,#2563ebf2,#0891b2e6),#2563eb;box-shadow:0 10px 24px #2563eb3d}.brand-mark:after{position:absolute;top:-35%;right:-35%;bottom:-35%;left:-35%;content:"";background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.72),transparent 65%);transform:translate(-70%);animation:markSweep 3.4s ease-in-out infinite}.brand-mark svg{position:relative;z-index:1;filter:drop-shadow(0 0 8px rgba(255,255,255,.55))}h1,h2,p{margin:0}h1{font-size:20px;line-height:1.2;font-weight:760;letter-spacing:0;color:var(--ink)}.brand-block p{margin-top:4px;color:var(--text-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-actions{gap:10px;flex-wrap:wrap;justify-content:flex-end}.icon-button{gap:8px;min-height:38px;padding:0 13px;border:1px solid #cbd5e1;border-radius:8px;color:#1f2937;background:#ffffffdb;box-shadow:var(--shadow-soft);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.icon-button:hover{border-color:#94a3b8;background:#f8fafc;box-shadow:0 10px 22px #0f172a14;transform:translateY(-1px)}.icon-button:disabled{cursor:wait;opacity:.7}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.content{width:min(1440px,100%);margin:0 auto;padding:26px clamp(16px,4vw,42px) 42px}.notice{gap:10px;min-height:42px;margin-bottom:14px;padding:10px 12px;border:1px solid;border-radius:8px;font-size:14px;box-shadow:var(--shadow-soft)}.notice.warn{color:#7c2d12;border-color:#fed7aa;background:#fff7ed}.notice.danger{color:#7f1d1d;border-color:#fecaca;background:#fef2f2}.status-badge{gap:8px;min-height:34px;padding:0 11px;border:1px solid;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:var(--shadow-soft)}.status-dot{width:8px;height:8px;border-radius:999px;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:dotPulse 2s ease-out infinite}.status-badge.up{color:#166534;border-color:#bbf7d0;background:#f0fdf4}.status-badge.degraded,.status-badge.stale{color:#92400e;border-color:#fde68a;background:#fffbeb}.status-badge.down{color:#991b1b;border-color:#fecaca;background:#fef2f2}.status-badge.unknown{color:#475569;border-color:#cbd5e1;background:#f8fafc}.status-badge.compact{display:inline-flex;min-height:24px;padding:0 8px;font-size:12px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.metric-card{position:relative;overflow:hidden;display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;min-height:126px;padding:18px;border:1px solid rgba(148,163,184,.24);border-radius:8px;background:linear-gradient(180deg,#fffffff2,#f8fafceb),var(--surface);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.metric-card:before,.panel:before{position:absolute;inset:0 0 auto;height:3px;content:"";background:linear-gradient(90deg,var(--blue),var(--cyan),var(--green));opacity:.72}.metric-card:after,.panel:after,.chart-card:after{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:0;content:"";pointer-events:none;background:linear-gradient(112deg,transparent 0 38%,rgba(255,255,255,.7) 47%,transparent 58%);opacity:0;transform:translate(-118%)}.metric-card>*,.panel>*,.chart-card>*{position:relative;z-index:1}.metric-card:hover,.panel:hover{border-color:#2563eb3d;box-shadow:0 18px 42px #18264321;transform:translateY(-1px)}.metric-card:hover:after,.panel:hover:after,.chart-card:hover:after{animation:surfaceSheen 1.15s ease forwards}.metric-icon{position:relative;overflow:hidden;display:grid;width:42px;height:42px;place-items:center;border-radius:8px;color:var(--blue);background:linear-gradient(135deg,#eff6ff,#ecfeff);box-shadow:var(--shadow-soft)}.metric-icon:after{position:absolute;inset:auto 6px 6px;height:2px;content:"";background:currentColor;border-radius:8px;opacity:.45;box-shadow:0 0 12px currentColor}.metric-card.good .metric-icon{color:var(--green);background:#f0fdf4}.metric-card.warn .metric-icon{color:var(--amber);background:#fffbeb}.metric-card.danger .metric-icon{color:var(--red);background:#fef2f2}.metric-label{margin-bottom:8px;color:var(--text-muted);font-size:13px}.metric-card strong{display:block;font-size:28px;line-height:1.1;color:var(--ink);overflow-wrap:anywhere}.metric-card span{display:block;margin-top:10px;color:var(--text-muted);font-size:13px;line-height:1.4}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);gap:14px;margin-top:14px}.panel{position:relative;overflow:hidden;min-width:0;padding:18px;border:1px solid rgba(148,163,184,.24);border-radius:8px;background:linear-gradient(180deg,#fffffff5,#f8fafced),var(--surface);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.panel:before{background-size:220% 100%;animation:spectrumSlide 9s linear infinite}.content>.panel{margin-top:14px}.wide-panel{grid-row:span 2}.panel-header{justify-content:space-between;margin-bottom:15px}.panel-title{gap:8px;color:#223047}.panel-title svg{color:var(--cyan)}h2{font-size:16px;line-height:1.25}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.target-tabs{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;padding-bottom:2px}.target-tab{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border:1px solid #d8e0eb;border-radius:8px;color:#334155;background:#fff;cursor:pointer;white-space:nowrap;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}.target-tab:hover,.target-tab.active{border-color:#93c5fd;color:#1d4ed8;background:#eff6ff;box-shadow:0 8px 20px #2563eb1c;transform:translateY(-1px)}.mini-dot{width:8px;height:8px;border-radius:999px;background:#94a3b8}.mini-dot.up{background:var(--green)}.mini-dot.degraded,.mini-dot.stale{background:var(--amber)}.mini-dot.down{background:var(--red)}.chart-card{position:relative;overflow:hidden;min-width:0;padding:14px;border:1px solid rgba(148,163,184,.24);border-radius:8px;background:linear-gradient(180deg,#f8fafceb,#ffffffd1),var(--surface-muted);box-shadow:var(--shadow-soft)}.chart-card:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background-image:linear-gradient(rgba(37,99,235,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(8,145,178,.055) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45),transparent 82%);mask-image:linear-gradient(180deg,rgba(0,0,0,.45),transparent 82%)}.chart-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--text-muted);font-size:13px}.chart-caption strong{color:#1f2937;font-size:14px}.chart-card svg{display:block;width:100%;height:180px}.chart-card line{stroke:#cbd5e1;stroke-width:1}.chart-card path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(37,99,235,.25));stroke-dasharray:10 8;animation:dashFlow 16s linear infinite}.chart-card circle{filter:drop-shadow(0 0 5px rgba(37,99,235,.34))}.uptime-strip{display:grid;grid-template-columns:repeat(40,minmax(3px,1fr));gap:3px;min-height:78px;padding:10px;border:1px solid rgba(148,163,184,.24);border-radius:8px;background:linear-gradient(180deg,#f8fafc,#fff);box-shadow:var(--shadow-soft)}.uptime-strip span{min-height:16px;border-radius:3px;box-shadow:inset 0 1px #ffffff7a;transition:transform .12s ease,box-shadow .12s ease}.uptime-strip span:hover{transform:scaleY(1.18)}.uptime-strip .up{background:var(--green);box-shadow:inset 0 1px #ffffff7a,0 0 10px #16a34a47}.uptime-strip .down{background:var(--red);box-shadow:inset 0 1px #ffffff7a,0 0 10px #dc262642}.compact-list{display:grid;gap:10px;margin:14px 0 0}.compact-list div{display:grid;grid-template-columns:minmax(86px,.8fr) minmax(0,1.2fr);gap:12px;align-items:baseline;min-height:30px;padding-bottom:10px;border-bottom:1px solid #eef2f7}.compact-list div:last-child{border-bottom:0;padding-bottom:0}dt{color:var(--text-muted);font-size:13px}dd{margin:0;min-width:0;color:#1f2937;font-size:14px;font-weight:680;overflow-wrap:anywhere}.table-wrap{overflow-x:auto}table{width:100%;min-width:760px;border-collapse:collapse}th,td{padding:11px 10px;border-bottom:1px solid #e5eaf1;text-align:left;font-size:13px;white-space:nowrap}th{color:#526174;font-weight:760;background:linear-gradient(180deg,#f8fafc,#eef4fb)}td{color:#273345}.overview-table tbody tr,tbody tr{transition:background .14s ease,transform .14s ease}.overview-table tbody tr:hover td,tbody tr:hover td{background:#f8fbff}.overview-table tr.selected td{background:#eaf3ff}.overview-table tr.selected td:first-child{box-shadow:inset 3px 0 #2563ebcc}.model-link{max-width:280px;padding:0;border:0;color:#1d4ed8;background:transparent;cursor:pointer;font-weight:760;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.model-link:hover{text-decoration:underline}.table-status{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:760}.table-status.up{color:#166534;background:#dcfce7}.table-status.down{color:#991b1b;background:#fee2e2}.error-cell{max-width:300px;overflow:hidden;text-overflow:ellipsis}.empty-state{display:grid;min-height:82px;place-items:center;border:1px dashed #cbd5e1;border-radius:8px;color:var(--text-muted);background:#f8fafc;font-size:14px}.footer{display:flex;align-items:center;justify-content:center;gap:10px;padding:20px clamp(16px,4vw,42px) 34px;color:var(--text-muted);font-size:13px}@keyframes gridRun{to{background-position:72px 72px,72px 72px,360px 360px}}@keyframes glassSweep{0%,34%{transform:translate(-82%) skew(-18deg)}70%,to{transform:translate(86%) skew(-18deg)}}@keyframes ribbonDrift{0%{translate:-1.8% 0}to{translate:2.4% 18px}}@keyframes scanRun{to{background-position:0 36px,122px 0}}@keyframes spectrumSlide{to{background-position:240% 0}}@keyframes markSweep{0%,48%{transform:translate(-72%) rotate(8deg)}82%,to{transform:translate(72%) rotate(8deg)}}@keyframes dotPulse{0%{box-shadow:0 0 0 0 currentColor}70%,to{box-shadow:0 0 0 7px transparent}}@keyframes surfaceSheen{0%{opacity:0;transform:translate(-118%)}24%{opacity:.8}to{opacity:0;transform:translate(118%)}}@keyframes dashFlow{to{stroke-dashoffset:-180}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}.footer a{color:#1d4ed8;font-weight:760;text-decoration:none}.footer a:hover{text-decoration:underline}@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid,.chart-grid{grid-template-columns:1fr}.wide-panel{grid-row:auto}}@media(max-width:680px){.topbar{position:static;align-items:flex-start;flex-direction:column}.topbar-actions{width:100%;justify-content:space-between}.metric-grid{grid-template-columns:1fr}.metric-card strong{font-size:24px}.uptime-strip{grid-template-columns:repeat(30,minmax(3px,1fr))}}
