:root { --bg:#f5f7fa; --surface:#fff; --text:#27313d; --muted:#788492; --line:#e7ebf0; --line-strong:#d7dde5; --green:#16a05d; --green-soft:#ebf8f1; --blue:#2878e6; --blue-soft:#edf5ff; --red:#d34a4a; --red-soft:#fff0f0; --amber:#b87516; --shadow:0 10px 30px rgba(35,52,72,.07); }
* { box-sizing:border-box; } html { color-scheme:light; } body { margin:0; background:var(--bg); color:var(--text); font:14px/1.55 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select { font:inherit; } button { cursor:pointer; } .hidden { display:none!important; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app { width:min(1440px,100%); margin:0 auto; padding:28px 24px 48px; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; } h1 { margin:0; font-size:26px; line-height:1.2; letter-spacing:0; } .topbar p { margin:7px 0 0; color:var(--muted); }
.service-state { display:flex; align-items:center; gap:9px; padding:7px 11px; border:1px solid #ccebdc; border-radius:6px; background:var(--green-soft); color:#137a49; font-size:12px; font-weight:650; white-space:nowrap; } .live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(22,160,93,.12); }
.summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--line); border-radius:7px; background:var(--surface); margin-bottom:14px; } .summary>div { min-height:74px; padding:14px 18px; border-right:1px solid var(--line); } .summary>div:last-child { border-right:0; } .summary span { display:block; color:var(--muted); font-size:12px; } .summary strong { display:block; margin-top:5px; font-size:20px; line-height:1.25; }
.panel,.log-panel { border:1px solid var(--line); border-radius:7px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border-bottom:1px solid var(--line); } .toolbar-left,.toolbar-actions { display:flex; align-items:center; gap:8px; } .search input { width:240px; height:34px; padding:0 11px; border:1px solid var(--line-strong); border-radius:5px; outline:none; } .search input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(40,120,230,.1); } .selection { color:var(--muted); font-size:12px; }
.button { min-height:34px; padding:0 13px; border:1px solid transparent; border-radius:5px; font-size:13px; font-weight:600; white-space:nowrap; } .button:disabled { opacity:.45; cursor:not-allowed; } .button.primary { background:var(--blue); color:#fff; } .button.secondary { border-color:var(--line-strong); background:#fff; color:var(--text); } .button.add { background:var(--green); color:#fff; } .button.danger { border-color:#f0caca; background:var(--red-soft); color:var(--red); } .button:not(:disabled):hover { filter:brightness(.97); }
.notice { min-height:36px; padding:9px 15px; border-bottom:1px solid var(--line); background:#fbfcfd; color:var(--muted); font-size:12px; } .notice.success { color:#127747; background:var(--green-soft); } .notice.error { color:#ad3636; background:var(--red-soft); }
.progress { height:3px; background:#dfeaf8; } .progress span { display:block; width:0; height:100%; background:var(--blue); transition:width .2s ease; }
.table-wrap { overflow-x:auto; } table { width:100%; min-width:1040px; border-collapse:collapse; } th,td { height:46px; padding:8px 13px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; } th { height:40px; background:#fafbfc; color:#687482; font-size:12px; font-weight:600; } tbody tr:hover { background:#fbfcfe; } tbody tr:last-child td { border-bottom:0; } .check-cell { width:44px; text-align:center; } input[type=checkbox] { width:16px; height:16px; accent-color:var(--green); }
.node-info { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:center; } .node-icon { display:grid; width:30px; height:30px; place-items:center; border-radius:5px; background:var(--blue-soft); color:var(--blue); font-size:11px; font-weight:800; } .node-copy strong,.node-copy span { display:block; } .node-copy strong { font-size:13px; } .node-copy span { max-width:410px; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font:11px ui-monospace,SFMono-Regular,Consolas,monospace; white-space:nowrap; }
.status-pill { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:12px; } .status-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:#a7b0ba; } .status-pill.success { color:#137a49; } .status-pill.success::before { background:var(--green); } .status-pill.warning { color:var(--amber); } .status-pill.warning::before { background:#d49328; } .status-pill.danger { color:var(--red); } .status-pill.danger::before { background:var(--red); }
.metric { font-variant-numeric:tabular-nums; } .metric.primary { font-weight:700; color:var(--text); } .muted { color:var(--muted); } .actions-cell { width:186px; text-align:right; } .row-actions { display:flex; justify-content:flex-end; gap:4px; } .row-action { padding:5px 8px; border:0; background:transparent; color:var(--blue); font-size:12px; } .row-action.delete { color:var(--red); } .row-action:hover { background:var(--blue-soft); border-radius:4px; }
.empty { padding:52px 20px; text-align:center; color:var(--muted); } .empty strong,.empty span { display:block; } .empty strong { margin-bottom:5px; color:var(--text); }
.log-panel { margin-top:14px; } .log-head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line); } .log-head strong { margin-right:10px; } .log-head span { color:var(--muted); font-size:12px; } .log-head button { border:0; background:transparent; color:var(--blue); font-size:12px; } pre { min-height:92px; max-height:220px; margin:0; padding:12px 15px; overflow:auto; background:#18212b; color:#cbd8e5; font:11px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; }
dialog { width:min(520px,calc(100% - 28px)); padding:0; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--text); box-shadow:0 24px 80px rgba(20,31,45,.25); } dialog::backdrop { background:rgba(21,31,43,.38); } dialog form { padding:20px; } .dialog-head { display:flex; justify-content:space-between; gap:20px; margin-bottom:18px; } .dialog-head h2 { margin:0; font-size:18px; } .dialog-head p { margin:4px 0 0; color:var(--muted); font-size:12px; } .close { width:28px; height:28px; border:0; border-radius:4px; background:#f2f4f7; color:var(--muted); font-size:19px; } dialog label { display:grid; gap:6px; margin-top:13px; color:#4f5d6a; font-size:12px; font-weight:600; } dialog input,dialog select { width:100%; height:38px; padding:0 10px; border:1px solid var(--line-strong); border-radius:5px; outline:none; } dialog input:focus,dialog select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(40,120,230,.1); } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; } .switch-row { display:flex; align-items:center; justify-content:space-between; padding:11px 0; } .switch-row span strong,.switch-row span small { display:block; } .switch-row span small { margin-top:2px; color:var(--muted); font-weight:400; } .switch-row input { width:18px; } .dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
@media(max-width:860px){ .app{padding:18px 12px 36px}.topbar{align-items:flex-start}.summary{grid-template-columns:1fr 1fr}.summary>div:nth-child(2){border-right:0}.summary>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.toolbar{align-items:stretch;flex-direction:column}.toolbar-left,.toolbar-actions{flex-wrap:wrap}.search{flex:1}.search input{width:100%}.selection{display:none}.toolbar-actions .button{flex:1}.service-state{margin-top:3px} }
@media(max-width:520px){ .topbar{display:block}.service-state{display:inline-flex;margin-top:14px}.form-grid{grid-template-columns:1fr}.summary strong{font-size:17px} }