*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%}body{font-family:Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;background:#f3f4f6;color:#111827}button,input,select{font:inherit}button{cursor:pointer}.app-shell{max-width:1280px;margin:0 auto;padding:24px 20px 40px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.server-tabs{display:flex;gap:8px;margin-bottom:16px;padding:6px;background:#fff;border-radius:14px;box-shadow:0 1px 2px #0f172a0a;overflow-x:auto}.server-tab{border:0;background:transparent;color:#6b7280;border-radius:10px;padding:10px 16px;white-space:nowrap;font-weight:600}.server-tab.active{background:#ecfdf3;color:#15803d}.server-tab.ready:before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#22c55e;vertical-align:middle}.topbar h1{margin:0 0 6px;font-size:22px;font-weight:700}.meta{color:#6b7280;font-size:13px;display:flex;flex-wrap:wrap;gap:10px 16px}.badge{display:inline-flex;align-items:center;gap:6px}.dot{width:8px;height:8px;border-radius:50%;background:#d1d5db}.dot.running{background:#22c55e}.dot.stopped,.dot.stopping{background:#f97316}.actions{display:flex;gap:8px}.btn{border:1px solid #e5e7eb;background:#fff;color:#111827;border-radius:10px;padding:8px 14px}.btn.primary{background:#22c55e;border-color:#22c55e;color:#fff}.btn:disabled{opacity:.55;cursor:not-allowed}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px;overflow:visible}.metric-card,.panel,.settings-card,.notice,.instance-card{background:#fff;border-radius:14px;box-shadow:0 1px 2px #0f172a0a}.metric-card{min-height:132px;padding:22px 22px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;overflow:visible;z-index:1}.metric-card.has-detail{cursor:default}.metric-card:hover,.metric-card:focus-within{z-index:8}.detail-pop{position:absolute;left:0;top:100%;padding-top:10px;width:min(400px,calc(100vw - 48px));z-index:9}.detail-pop.is-end{left:auto;right:0}.detail-inner{position:relative;background:#fff;border-radius:12px;box-shadow:0 10px 30px #0f172a1f;padding:14px 16px 16px}.detail-inner:before{content:"";position:absolute;left:28px;top:-6px;width:12px;height:12px;background:#fff;transform:rotate(45deg);box-shadow:-2px -2px 4px #0f172a0a}.detail-pop.is-end .detail-inner:before{left:auto;right:28px}.detail-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#4b5563;font-size:13px;margin-bottom:10px}.detail-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:#ecfdf3;color:#15803d;font-size:12px;font-weight:600}.detail-section{background:#f5f6f8;color:#6b7280;font-size:13px;border-radius:8px;padding:8px 10px;margin-bottom:10px}.detail-grid{display:grid;gap:8px 16px}.detail-grid.is-two{grid-template-columns:1fr 1fr}.detail-row{display:flex;flex-wrap:wrap;gap:4px 6px;font-size:13px;line-height:1.5}.detail-row.span2{grid-column:1 / -1}.detail-k{color:#6b7280}.detail-v{color:#111827;font-weight:600}.metric-copy{min-width:0}.metric-label{color:#9ca3af;font-size:14px;margin-bottom:10px}.metric-value{color:#111827;font-size:22px;font-weight:700;line-height:1.25;word-break:break-all}.metric-value .used{color:#22c55e}.metric-sub{margin-top:4px;color:#9ca3af;font-size:12px}.donut{width:86px;height:86px;flex:none}.donut svg{width:86px;height:86px;display:block}.panel{padding:8px 18px 18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #f3f4f6;margin-bottom:14px}.tabs{display:flex;gap:22px}.tab{border:0;background:none;padding:14px 0 12px;color:#6b7280;position:relative}.tab.active{color:#111827;font-weight:700}.tab.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#22c55e;border-radius:3px 3px 0 0}.nic-filter{display:flex;align-items:center;gap:8px;color:#6b7280;font-size:13px}.nic-filter select{border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;background:#fff}.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}.stat{background:#fafafa;border-radius:12px;padding:12px 14px}.stat-label{color:#9ca3af;font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:6px}.stat-value{font-size:22px;font-weight:700}.stat-value small{font-size:13px;font-weight:500;color:#9ca3af;margin-left:4px}.chart{height:360px}.settings-card,.notice,.instance-card{padding:18px 20px;margin-bottom:14px}.notice{color:#b45309;background:#fffbeb}.notice.error{color:#b91c1c;background:#fef2f2}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}.field label{display:block;font-size:13px;color:#6b7280;margin-bottom:6px}.field input{width:100%;border:1px solid #e5e7eb;border-radius:10px;padding:9px 12px;background:#fff}.field.span-2{grid-column:span 2}.hint{margin:12px 0 0;color:#9ca3af;font-size:12px;line-height:1.6}.span-2{grid-column:span 2}@media(max-width:1100px){.cards,.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.cards,.stat-row,.form-grid{grid-template-columns:1fr}.field.span-2,.span-2{grid-column:span 1}.topbar{flex-direction:column}}