:root{color:#0f172a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary:#2563eb;--primary-hover:#1d4ed8;--primary-active:#1e40af;--primary-50:#eff6ff;--primary-100:#dbeafe;--primary-200:#bfdbfe;--primary-500:#3b82f6;--primary-600:#2563eb;--primary-700:#1d4ed8;--primary-800:#1e40af;--primary-glow:#2563eb24;--canvas:#f8fafc;--card-bg:#fff;--line:#e2e8f0;--line-subtle:#f1f5f9;--line-hover:#cbd5e1;--ink:#0f172a;--ink-body:#334155;--muted:#64748b;--subtle:#94a3b8;--green:#16a34a;--green-bg:#f0fdf4;--green-border:#bbf7d0;--green-text:#15803d;--amber:#d97706;--amber-bg:#fffbeb;--amber-border:#fde68a;--amber-text:#b45309;--red:#dc2626;--red-bg:#fef2f2;--red-border:#fecaca;--red-text:#b91c1c;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:22px;--radius-pill:9999px;--shadow-xs:0 1px 2px 0 #0f172a0a;--shadow-card:0 1px 3px 0 #0f172a0f, 0 1px 2px -1px #0f172a0a;--shadow-hover:0 8px 20px -4px #2563eb14, 0 2px 6px -1px #0f172a0a;--shadow-modal:0 20px 40px -15px #2563eb24, 0 0 0 1px #e2e8f0cc;background-color:#f8fafc;font-family:Plus Jakarta Sans,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background-color:var(--canvas);min-width:320px;color:var(--ink);background-image:radial-gradient(circle at 10% 0,#eff6ff 0%,#0000 28rem),radial-gradient(circle at 90% 20%,#f0fdf4 0%,#0000 24rem),radial-gradient(circle at 50% 100%,#f1f5f9 0%,#0000 32rem);min-height:100vh;margin:0}button,input,select{font-family:inherit;font-size:13px}button{cursor:pointer;transition:all .18s cubic-bezier(.16,1,.3,1)}button:disabled{cursor:not-allowed;opacity:.55}.center-state{min-height:100vh;color:var(--muted);align-content:center;place-items:center;gap:14px;font-size:14px;font-weight:500;display:grid}.spinner{border:3px solid #dbeafe;border-top-color:var(--primary);border-radius:50%;width:26px;height:26px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.auth-shell{background:radial-gradient(circle at 20% 15%,#eff6ff 0%,#0000 50%),radial-gradient(circle at 80% 85%,#dbeafe 0%,#0000 50%),#f8fafc;place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{border:1px solid var(--line);border-radius:var(--radius-xl);width:min(100%,420px);color:var(--ink);background:var(--card-bg);box-shadow:var(--shadow-modal);padding:40px;position:relative;overflow:hidden}.login-card:before{content:"";background:linear-gradient(90deg,#2563eb,#38bdf8,#2563eb);height:4px;position:absolute;top:0;left:0;right:0}.brand-mark{color:#fff;letter-spacing:-1px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border-radius:14px;place-items:center;width:52px;height:52px;font-size:19px;font-weight:800;display:grid;box-shadow:0 8px 18px -4px #2563eb61,inset 0 1px 1px #fff6}.brand-mark span{color:#93c5fd;margin:0 1px}.brand-mark.small{border-radius:10px;width:36px;height:36px;font-size:13px;box-shadow:0 4px 10px -2px #2563eb4d}.eyebrow{color:var(--primary);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px;font-size:11px;font-weight:700}.login-card .eyebrow{margin-top:24px}h1,h2,p{margin-top:0}h1{letter-spacing:-.03em;color:var(--ink);margin-bottom:8px;font-size:26px;font-weight:700;line-height:1.15}h2{letter-spacing:-.02em;color:var(--ink);margin-bottom:6px;font-size:18px;font-weight:700}.muted{color:var(--muted);font-size:13px;line-height:1.5}.login-card .muted{color:var(--muted);margin-bottom:24px}.stack-form{gap:16px;display:grid}label{color:#334155;gap:6px;font-size:12px;font-weight:600;display:grid}input,select{border:1px solid var(--line);border-radius:var(--radius-sm);width:100%;min-height:42px;color:var(--ink);background:#fff;outline:none;padding:9px 13px;transition:all .18s}input::placeholder{color:var(--subtle)}input:hover,select:hover{border-color:var(--line-hover)}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);background:#fff}.primary,.secondary,.quiet{border-radius:var(--radius-sm);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;min-height:40px;padding:0 16px;font-size:13px;font-weight:600;display:inline-flex}.primary{color:#fff;background:linear-gradient(#2563eb 0%,#1d4ed8 100%);box-shadow:0 2px 8px -1px #2563eb59,inset 0 1px #ffffff26}.primary:hover:not(:disabled){background:linear-gradient(#1d4ed8 0%,#1e40af 100%);transform:translateY(-1px);box-shadow:0 4px 14px -1px #2563eb73}.primary:active:not(:disabled){background:#1e40af;transform:translateY(0)}.secondary{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}.secondary:hover:not(:disabled){color:#1e40af;background:#dbeafe;border-color:#93c5fd}.quiet{min-height:34px;color:var(--muted);border:1px solid var(--line);background:#fff}.quiet:hover{color:#dc2626;background:#fef2f2;border-color:#fecaca}.full{width:100%}.security-note{border-top:1px solid var(--line-subtle);color:var(--subtle);align-items:center;gap:6px;margin:22px 0 0;padding-top:16px;font-size:11px;line-height:1.5;display:flex}.alert{border-radius:var(--radius-sm);align-items:center;gap:8px;margin:14px 0;padding:12px 14px;font-size:13px;font-weight:500;display:flex}.alert.error{color:var(--red-text);border:1px solid var(--red-border);background:var(--red-bg)}.alert.success{color:var(--green-text);border:1px solid var(--green-border);background:var(--green-bg)}.app-shell{flex-direction:column;min-height:100vh;display:flex}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:50;height:66px;box-shadow:var(--shadow-xs);background:#ffffffe0;justify-content:space-between;align-items:center;padding:0 clamp(20px,4vw,56px);display:flex;position:sticky;top:0}.brand-inline,.top-actions,.site-title,.site-actions,.ip-chip,.server-ip,.hero-lock>div,.log-row,.user-pill{align-items:center;display:flex}.brand-inline{gap:12px}.brand-inline strong{color:var(--ink);letter-spacing:-.02em;font-size:15px;font-weight:700;display:block}.brand-inline small{color:var(--primary);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:700;display:block}.top-actions{gap:10px}.user-pill{border:1px solid var(--primary-200);border-radius:var(--radius-pill);min-height:32px;color:var(--primary-800);background:var(--primary-50);gap:6px;padding:0 12px;font-size:12px;font-weight:600;display:inline-flex}.content-wrap{width:min(1180px,100% - 40px);margin:0 auto;padding:40px 0 72px}.page-heading{justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px;display:flex}.page-heading h1{color:var(--ink);margin-bottom:4px}.page-heading .muted{color:var(--muted);margin-bottom:0;font-size:13px}.server-ip{border:1px solid var(--primary-100);border-radius:var(--radius-md);box-shadow:var(--shadow-card);background:#fff;flex-direction:column;align-items:flex-end;gap:6px;padding:12px 18px}.server-ip span{color:var(--muted);font-size:11px;font-weight:600}code{font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:12px}.server-ip code{color:var(--primary-700);background:var(--primary-50);border:1px solid var(--primary-200);border-radius:6px;padding:3px 8px;font-weight:700}.hero-lock{border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);background:#fff;justify-content:space-between;align-items:center;gap:20px;padding:22px 26px;transition:all .2s;display:flex}.hero-lock.active{border-color:var(--red-border);border-left:4px solid var(--red);background:#fff5f5;box-shadow:0 4px 14px -2px #dc26261a}.hero-lock>div{gap:16px}.hero-lock h2{margin-bottom:4px;font-size:17px}.hero-lock .muted{max-width:680px;margin:0;font-size:13px}.status-dot{background:var(--green);width:12px;height:12px;box-shadow:0 0 0 4px var(--green-border);border-radius:50%;flex:0 0 12px}.hero-lock.active .status-dot{background:var(--red);box-shadow:0 0 0 4px var(--red-border)}.toggle{border-radius:var(--radius-pill);background:#cbd5e1;border:0;flex-shrink:0;width:48px;height:26px;padding:3px;transition:background .2s;position:relative}.toggle span{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .2s cubic-bezier(.16,1,.3,1);display:block;box-shadow:0 2px 4px #0f172a33}.toggle.on{background:var(--primary)}.toggle.on span{transform:translate(22px)}.metrics{grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0;display:grid}.metric{border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);background:#fff;padding:20px 22px;transition:all .2s}.metric:hover{box-shadow:var(--shadow-hover);border-color:var(--primary-200);transform:translateY(-2px)}.metric span{color:var(--muted);letter-spacing:.02em;font-size:12px;font-weight:600;display:block}.metric strong{color:var(--ink);letter-spacing:-.04em;margin:10px 8px 0 0;font-size:30px;font-weight:800;line-height:1;display:inline-block}.metric small{color:#475569;background:var(--line-subtle);border-radius:var(--radius-pill);padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.panel{border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);background:#fff;margin-top:18px;padding:26px}.panel-title{margin-bottom:20px}.panel-title h2{color:var(--ink);margin-bottom:4px;font-size:18px;font-weight:700}.panel-title .muted{color:var(--muted);margin-bottom:0;font-size:13px;line-height:1.5}.quick-panel{border-color:var(--primary-200);border-top:3px solid var(--primary);background:linear-gradient(#f8faff 0%,#fff 60px)}.inline-form{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.field{min-width:150px}.field.grow{flex:200px}.ip-chip{border:1px solid var(--primary-200);border-radius:var(--radius-sm);background:var(--primary-50);flex-direction:column;justify-content:center;align-self:stretch;align-items:flex-start;gap:3px;padding:6px 14px}.ip-chip span{color:var(--primary-700);letter-spacing:.08em;text-transform:uppercase;font-size:10px;font-weight:700}.ip-chip code{color:var(--primary-800);font-size:13px;font-weight:700}.site-list{border-top:1px solid var(--line)}.site-row{border-bottom:1px solid var(--line);border-radius:var(--radius-sm);align-items:center;gap:16px;padding:16px 8px;transition:background .15s;display:flex}.site-row:hover{background:#f8fafc}.site-symbol{border-radius:var(--radius-sm);width:40px;height:40px;color:var(--primary);background:var(--primary-50);border:1px solid var(--primary-100);flex:0 0 40px;place-items:center;font-size:15px;font-weight:800;display:grid}.site-main{flex:1;min-width:0}.site-title{flex-wrap:wrap;gap:8px;margin-bottom:4px}.site-title strong{color:var(--ink);font-size:14px;font-weight:600}.site-main small{color:var(--muted);font-size:12px}.badge{border-radius:var(--radius-pill);align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:600;display:inline-flex}.badge.ok{color:var(--green-text);background:var(--green-bg);border:1px solid var(--green-border)}.badge.warning{color:var(--amber-text);background:var(--amber-bg);border:1px solid var(--amber-border)}.site-actions{flex-wrap:wrap;justify-content:flex-end;gap:14px}.switch-label{color:#475569;align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}.switch-label .toggle{transform-origin:100%;margin-right:-3px;transform:scale(.85)}.text-button{border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--primary-700);background:#fff;padding:6px 12px;font-size:12px;font-weight:600}.text-button:hover{background:var(--primary-50);border-color:var(--primary-200);color:var(--primary)}.add-site{gap:10px;margin-top:20px;display:flex}.add-site input{background:#fff;max-width:380px}.two-col{grid-template-columns:1.12fr .88fr;align-items:start;gap:0 18px;display:grid}.two-col .panel{min-width:0}.segmented{border-radius:var(--radius-sm);border:1px solid var(--line);background:#f1f5f9;margin-bottom:16px;padding:3px;display:inline-flex}.segmented button{color:var(--muted);background:0 0;border:0;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:600}.segmented button.selected{color:var(--ink);background:#fff;box-shadow:0 1px 3px #0f172a14}.site-rule-select{max-width:300px;margin:0 0 16px;display:block}.rule-form{grid-template-columns:minmax(0,1.4fr) 85px minmax(0,1fr) auto;gap:8px;margin-bottom:18px;display:grid}.rule-form input,.rule-form select{min-width:0;font-size:12px}.rule-list,.log-list{border-top:1px solid var(--line)}.rule-row{border-bottom:1px solid var(--line);border-radius:var(--radius-sm);grid-template-columns:50px minmax(110px,.8fr) minmax(0,1fr) 28px;align-items:center;gap:10px;min-height:48px;padding:4px 6px;transition:background .15s;display:grid}.rule-row:hover{background:#f8fafc}.rule-row code{color:var(--ink);border:1px solid var(--line);background:#f1f5f9;border-radius:4px;padding:3px 6px}.effect{text-align:center;letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:3px 6px;font-size:10px;font-weight:700}.effect.allow{color:var(--primary-700);background:var(--primary-50);border:1px solid var(--primary-200)}.effect.deny{color:var(--red-text);background:var(--red-bg);border:1px solid var(--red-border)}.rule-note{text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px;overflow:hidden}.icon-button{width:26px;height:26px;color:var(--muted);background:0 0;border:1px solid #0000;border-radius:6px;place-items:center;padding:0;font-size:18px;line-height:1;display:grid}.icon-button:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}.log-row{border-bottom:1px solid var(--line);border-radius:var(--radius-sm);gap:12px;min-height:60px;padding:8px 6px;transition:background .15s}.log-row:hover{background:#f8fafc}.log-dot{background:var(--red);width:8px;height:8px;box-shadow:0 0 0 3px var(--red-border);border-radius:50%;flex:0 0 8px}.log-dot.audit{background:var(--primary);box-shadow:0 0 0 3px var(--primary-200)}.log-row>div{flex:1;min-width:0}.log-row strong,.log-row small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.log-row strong{color:var(--ink);font-size:13px;font-weight:600}.log-row small{color:var(--muted);margin-top:3px;font-size:11px}.log-row time{color:var(--subtle);white-space:nowrap;font-size:11px;font-weight:500}.empty{color:var(--subtle);text-align:center;padding:30px 10px;font-size:13px;font-style:italic}@media (width<=840px){.content-wrap{padding-top:28px}.page-heading{flex-direction:column;align-items:flex-start}.server-ip{align-items:flex-start}.metrics,.two-col{grid-template-columns:1fr}.site-row{flex-wrap:wrap;align-items:flex-start}.site-actions{justify-content:flex-start;width:100%;margin-left:56px}}@media (width<=580px){.login-card{padding:30px 22px}.topbar{height:60px;padding:0 16px}.brand-inline small,.user-pill{display:none}.content-wrap{width:min(100% - 24px,1180px);padding-bottom:40px}.hero-lock{flex-direction:column;align-items:flex-start;padding:18px}.hero-lock>div{align-items:flex-start}.inline-form,.add-site{flex-direction:column;align-items:stretch}.inline-form .field,.ip-chip,.add-site input{width:100%;max-width:none}.inline-form>.primary,.add-site button{width:100%}.rule-form{grid-template-columns:1fr 85px}.rule-form input:first-child,.rule-form input:nth-child(3),.rule-form button{grid-column:1/-1}.rule-row{grid-template-columns:50px 1fr 26px}.rule-note{grid-area:2/2/auto/-1;padding-bottom:6px}}.metric-card-inner{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.metric-icon-box{border-radius:var(--radius-sm);background:var(--primary-50);width:44px;height:44px;color:var(--primary);border:1px solid var(--primary-100);flex-shrink:0;place-items:center;display:grid}.metric-icon-box.green{background:var(--green-bg);color:var(--green-text);border-color:var(--green-border)}.metric-icon-box.red{background:var(--red-bg);color:var(--red-text);border-color:var(--red-border)}.live-indicator{color:var(--green-text);align-items:center;gap:6px;font-size:11px;font-weight:600;display:inline-flex}.live-dot{background:var(--green);width:7px;height:7px;box-shadow:0 0 0 2px var(--green-border);border-radius:50%;animation:2s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}.badge-dot{background:currentColor;border-radius:50%;width:6px;height:6px}