:root{--bg:#0b1020;--panel:#121a2f;--panel-2:#172138;--line:#243050;--text:#e6ebf5;--muted:#8d9ab8;--accent:#6366f1;--accent-2:#06b6d4;--ok:#22c55e;--bad:#ef4444;--warn:#f59e0b;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{color:var(--text);background:radial-gradient(900px 500px at 10% -10%, #6366f133, transparent), radial-gradient(800px 500px at 100% 0%, #06b6d428, transparent), var(--bg);min-height:100vh;margin:0;font-family:Segoe UI Variable,Segoe UI,system-ui,sans-serif}.app{max-width:1500px;margin:0 auto;padding:24px}.top{align-items:center;gap:16px;margin-bottom:20px;display:flex}.top h1{letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#a5b4fc 60%,#67e8f9);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:26px}.top p{color:var(--muted);margin:2px 0 0;font-size:14px}.logo{filter:drop-shadow(0 6px 18px #6366f166);width:52px;height:52px}main{grid-template-columns:minmax(0,1fr);gap:20px;display:grid}.panel{background:linear-gradient(180deg, var(--panel), #0f1629);border:1px solid var(--line);border-radius:14px;min-width:0;padding:16px;box-shadow:0 10px 40px #0006}.panel-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}h2{margin:0;font-size:17px}.count{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-radius:99px;margin-left:6px;padding:1px 9px;font-size:12px}.actions{flex-wrap:wrap;gap:8px;display:flex}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:8px;padding:7px 14px;transition:transform 80ms,background .15s,border-color .15s}button:hover{background:#1d2a48;border-color:#3b4a78}button:active{transform:translateY(1px)}button.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;border:0;font-weight:600}button.primary:hover{filter:brightness(1.1)}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{font:inherit;color:var(--text);border:1px solid var(--line);background:#0b1224;border-radius:7px;width:100%;min-width:0;padding:6px 8px}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid #6366f155}input:disabled{opacity:.45}.table{overflow-x:auto}.row{border-bottom:1px solid #1b2542;grid-template-columns:44px minmax(90px,1fr) minmax(110px,1.2fr) minmax(110px,1.2fr) minmax(130px,1.1fr) minmax(90px,.9fr) 104px 108px 118px;align-items:center;gap:6px;min-width:960px;padding:5px 0;display:grid}.row.head{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);font-size:11.5px}.row.off input,.row.off select{opacity:.4}.ports{gap:4px;display:flex}.cell{align-items:center;min-width:0;display:flex}.ports select{width:64px;padding:6px 2px}.pill{text-align:center;font-weight:600}.pill.allow{color:var(--ok)}.pill.drop,.pill.reject{color:var(--bad)}.row-actions{justify-content:flex-end;gap:3px;display:flex}.row-actions button{padding:4px 7px;line-height:1}.row-actions .danger:hover{border-color:var(--bad);background:#ef444433}.switch{width:34px;height:20px;margin-left:4px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.switch i{background:#2a3556;border-radius:99px;transition:all .2s;position:absolute;inset:0}.switch i:after{content:"";background:#fff;border-radius:50%;width:14px;height:14px;transition:all .2s;position:absolute;top:3px;left:3px}.switch input:checked+i{background:linear-gradient(135deg, var(--accent), var(--accent-2))}.switch input:checked+i:after{transform:translate(14px)}.empty{text-align:center;color:var(--muted);padding:28px}.issues{gap:6px;margin:14px 0 0;padding:0;list-style:none;display:grid}.issues li{border-radius:8px;padding:8px 12px;font-size:13px}.issues .error{background:#ef44441c;border:1px solid #ef444455}.issues .warn{background:#f59e0b1a;border:1px solid #f59e0b55}.tabs{flex-wrap:wrap;gap:6px;display:flex}.tab{flex-direction:column;align-items:flex-start;padding:7px 12px;line-height:1.2;display:flex}.tab small{color:var(--muted);font-size:11px}.tab.active{border-color:var(--accent);background:linear-gradient(135deg,#6366f128,#06b6d420)}.tab.active small{color:#a5b4fc}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px;display:flex}.toolbar label{color:var(--muted);gap:4px;min-width:180px;font-size:12px;display:grid}.banner{background:#ef44441c;border:1px solid #ef444455;border-radius:8px;margin-bottom:10px;padding:8px 12px;font-size:13px}.code{border:1px solid var(--line);color:#cbd5e1;white-space:pre;background:#060a16;border-radius:10px;min-height:240px;max-height:640px;margin:0;padding:14px;font:12.5px/1.55 Cascadia Code,Consolas,monospace;overflow:auto}.t-c{color:#64748b;font-style:italic}.t-s{color:#86efac}.t-f{color:#67e8f9}.t-v{color:#fca5a5}.t-k{color:#c4b5fd;font-weight:600}footer{text-align:center;color:var(--muted);margin-top:22px;font-size:12px}.modal{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;background:#000a;place-items:center;display:grid;position:fixed;inset:0}.dialog{background:var(--panel);border:1px solid var(--line);border-radius:14px;gap:12px;width:min(640px,92vw);padding:20px;display:grid}.dialog h3{margin:0}.dialog p{color:var(--muted);margin:0;font-size:13px}.dialog textarea{min-height:170px;font-family:Consolas,monospace;font-size:12.5px}.dialog .actions{justify-content:flex-end}code{background:var(--panel-2);border-radius:4px;padding:1px 5px}