:root{--bg: #f0ece4;--surface: rgba(255,255,255,.88);--surface-2: rgba(255,255,255,.65);--border: rgba(0,0,0,.09);--ink: #1a2420;--ink-2: #4a5a56;--ink-3: #8a9a96;--accent: #d05430;--accent-2: #a83d1f;--teal: #0d7a6a;--teal-bg: rgba(13,122,106,.1);--warn: #b07020;--warn-bg: rgba(176,112,32,.1);--err-bg: rgba(208,84,48,.1);font-family:Inter,Segoe UI,system-ui,sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0;overflow:hidden}body{height:100%;background:radial-gradient(ellipse at 0% 0%,rgba(208,84,48,.12) 0%,transparent 50%),radial-gradient(ellipse at 100% 80%,rgba(13,122,106,.1) 0%,transparent 50%),#f0ece4;color:var(--ink)}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:12px;padding:0 20px;height:50px;background:#ffffffeb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;flex-shrink:0}.topbar-logo{font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap}.topbar-logo-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0}.topbar-sub{font-size:13px;color:var(--ink-3)}.topbar-status-group{display:flex;align-items:center;gap:8px;flex:1;justify-content:flex-end}.topbar-stat{display:inline-flex;align-items:center;gap:4px;background:#0000000d;border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:12px}.topbar-stat-label{color:var(--ink-3);font-size:11px}.topbar-stat-value{color:var(--ink);font-weight:600}.topbar-stat-error{display:inline-flex;align-items:center;gap:4px;background:var(--err-bg);border:1px solid rgba(208,84,48,.2);border-radius:6px;padding:2px 8px;font-size:12px;color:var(--accent-2);cursor:help;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:600;white-space:nowrap}.badge.running{background:var(--teal-bg);color:var(--teal)}.badge.stopped{background:var(--warn-bg);color:var(--warn)}.badge.idle{background:#00000012;color:var(--ink-2)}.badge.accent{background:#d054301a;color:var(--accent)}.badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.grid{display:flex;flex-direction:column;gap:14px;padding:14px;width:100%;height:100%;flex:1;min-height:0;box-sizing:border-box}.top-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;flex-shrink:0}.main-area{display:flex;flex-direction:row;gap:12px;width:100%;flex:1;min-height:0}.main-area>.card:first-child{flex:60;min-width:0}.port-panel{flex:40;min-width:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 2px 8px #00000012;display:flex;flex-direction:column;overflow:hidden;height:auto}.top-row>.card{height:auto}.main-area>.card{height:100%}.card-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--border);background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}.card-title{font-size:14px;font-weight:600;color:var(--ink)}.card-body{padding:14px}.card-body-scroll{padding:0;flex:1;min-height:0;overflow-y:auto;position:relative;display:flex;flex-direction:column}.field{margin-bottom:11px}.field-label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:5px;font-weight:500}input[type=text],input[type=url],input[type=number],select{width:100%;padding:8px 11px;font-size:13px;font-family:inherit;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-radius:7px;outline:none;transition:border-color .15s,background .15s;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}input:focus,select:focus{border-color:#d0543073;background:#fffffff7}input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--accent)}.btn-group{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}button{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 16px;font-size:13px;font-family:inherit;font-weight:500;border:none;border-radius:7px;cursor:pointer;transition:all .15s;white-space:nowrap}button.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 4px #d0543040}button.btn-primary:hover:not(:disabled){background:var(--accent-2);transform:translateY(-1px);box-shadow:0 3px 8px #d054304d}button.btn-secondary{background:#00000012;color:var(--ink-2)}button.btn-secondary:hover:not(:disabled){background:#0000001f}button.btn-danger{background:var(--err-bg);color:var(--accent);border:1px solid rgba(208,84,48,.18)}button.btn-danger:hover:not(:disabled){background:#d054302e}button:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat-item{background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:8px 10px}.stat-label{font-size:11px;color:var(--ink-3);margin-bottom:2px;text-transform:uppercase;letter-spacing:.04em}.stat-value{font-size:13px;font-weight:600;color:var(--ink);word-break:break-all}.node-filter-bar{display:flex;gap:8px;padding:8px 10px;background:var(--bg-2);border-bottom:1px solid var(--border);align-items:center}.search-input{flex:1;min-width:120px;padding:6px 10px;font-size:13px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink);outline:none;transition:border-color .15s}.search-input:focus{border-color:var(--accent)}.search-input::placeholder{color:var(--ink-3)}.filter-select{padding:6px 8px;font-size:13px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--ink);outline:none;cursor:pointer}.filter-select:focus{border-color:var(--accent)}.node-table-wrap{overflow-x:auto}.node-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}.node-table th{text-align:left;padding:10px;font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;background:var(--surface);position:sticky;top:0;z-index:5}.node-table th:nth-child(1){width:40px}.node-table th:nth-child(2){width:auto}.node-table th:nth-child(3){width:92px}.node-table th:nth-child(4){width:105px}.node-table th:nth-child(5){width:74px}.node-table th:nth-child(6){width:110px}.node-table th:nth-child(7){width:52px}.node-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-table tr:last-child td{border-bottom:none}.node-table tr:hover td{background:#00000006;cursor:pointer}.node-table tr.selected td{background:#0d7a6a0f}.node-name{font-size:13px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-tag{font-size:11px;color:var(--ink-3);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}.proto-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.proto-vless{background:#0d7a6a1f;color:var(--teal)}.proto-ss{background:#b070201f;color:var(--warn)}.proto-hysteria2{background:#d054301f;color:var(--accent)}.latency-ok{color:var(--teal);font-weight:600;font-size:13px}.latency-slow{color:var(--warn);font-weight:600;font-size:13px}.latency-fail{color:var(--ink-3);font-size:13px}.port-table{width:100%;border-collapse:collapse;font-size:13px}.port-table th{text-align:left;padding:10px;font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--surface);position:sticky;top:0;z-index:5}.port-table td{padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.port-table tr:last-child td{border-bottom:none}.port-table input[type=number]{width:84px;padding:5px 8px;font-size:13px}.port-node-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.port-node-ip{font-size:11px;color:var(--ink-3);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}.port-copy-actions{display:flex;gap:6px;flex-wrap:wrap}.port-copy-button{padding:5px 10px;font-size:12px}.error-banner{margin-top:10px;padding:9px 12px;background:var(--err-bg);border:1px solid rgba(208,84,48,.2);border-radius:7px;font-size:13px;color:var(--accent-2)}.empty-state{padding:28px 16px;text-align:center;color:var(--ink-3);font-size:13px;line-height:1.9}.divider{height:1px;background:var(--border);margin:10px 0}@media (max-width: 960px){.grid{grid-template-columns:1fr}.main-area{flex-direction:column}.port-panel{width:100%}.node-table th:nth-child(n+5),.node-table td:nth-child(n+5){display:none}}@media (max-width: 560px){.stat-grid{grid-template-columns:1fr}.btn-group button{flex:1}}.test-url-hint{font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.5}