:root{
  --bg-from:#0F1729;--bg-to:#151E31;
  --s1:#0B2248;--s2:#0E2A52;--s3:#12305E;--s4:#163868;
  --glass:rgba(11,34,72,.95);
  --hover:rgba(30,77,140,.5);--active:rgba(25,63,117,.6);
  --bd:rgba(100,160,240,.18);--bd-s:rgba(80,140,220,.14);--bd-h:rgba(120,180,255,.25);
  --t1:#eaf0f9;--t2:#b8c9de;--t3:#8a9db5;--t4:#627a94;
  --corp-primary:#2563EB;--corp-primary-hover:#1D4ED8;--corp-primary-light:#3B82F6;--corp-primary-glow:rgba(37,99,235,0.35);--corp-secondary:#1E3A5F;--corp-accent:#0891B2;--corp-accent-soft:rgba(8,145,178,0.12);
  --blue:#7ec4ff;--blue-h:#a4d6ff;--blue-dim:rgba(126,196,255,.10);--blue-cont:rgba(126,196,255,.14);
  --green:#5ee09a;--green-bg:rgba(94,224,154,.10);--green-bd:rgba(94,224,154,.22);
  --yellow:#fad24a;--yellow-bg:rgba(250,210,74,.10);--yellow-bd:rgba(250,210,74,.22);
  --red:#ff8a8a;--red-bg:rgba(255,138,138,.10);--red-bd:rgba(255,138,138,.22);
  --orange:#ffa96a;--cyan:#54e0da;--purple:#bb9aff;
  --p-tcp:#7ec4ff;--p-udp:#5ee09a;--p-icmp:#fad24a;--p-http:#ffa96a;
  --p-https:#5ee09a;--p-ssh:#ff8a8a;--p-ftp:#ff9db0;--p-sftp:#bb9aff;
  --p-dns:#96d4ff;--p-smtp:#7ec4ff;--p-mysql:#ff8a8a;--p-rdp:#54e0da;
  --p-smb:#ffa96a;--p-ntp:#5ee09a;--p-other:#8a9db5;
  --f:'Inter',system-ui,sans-serif;
  --fm:'JetBrains Mono','Fira Code',monospace;
  --r-xs:4px;--r-sm:8px;--r-md:12px;--r-pill:100px;
  --ease:cubic-bezier(.2,0,0,1);--dur:180ms;--dur-f:80ms
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;font-family:var(--f);font-size:14px;color:var(--t1);
  background:linear-gradient(160deg,#0B2248,#12305E 60%,#193F75);
  -webkit-font-smoothing:antialiased}
body::after{content:'';position:fixed;inset:0;
  background-image:radial-gradient(rgba(100,170,255,.04) 1px,transparent 1px);
  background-size:26px 26px;pointer-events:none;z-index:0}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(126,196,255,.14);border-radius:3px}
*{scrollbar-width:thin;scrollbar-color:rgba(126,196,255,.14) transparent}
.mi{font-family:'Material Symbols Rounded';font-style:normal;font-weight:400;font-size:20px;
  line-height:1;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;
  font-feature-settings:'liga';font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;
  display:inline-flex;align-items:center;justify-content:center}

#app{display:grid;height:100vh;grid-template-columns:260px 1fr 300px;grid-template-rows:50px 1fr;
  grid-template-areas:"hd hd hd""sb cv rp";position:relative;z-index:1}
#app.sb-hidden{grid-template-columns:0px 1fr 300px}

.hd{grid-area:hd;display:flex;align-items:center;padding:0 14px;
  background:var(--glass);border-bottom:1px solid var(--bd-s);z-index:200}
.hd-left{display:flex;align-items:center;gap:6px}
.hd-hamburger{width:36px;height:36px;border:none;background:0;border-radius:var(--r-pill);
  color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.hd-hamburger:hover{background:var(--hover)}
.hd-brand{display:flex;align-items:center;gap:9px}
.hd-logo-wrap{width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--blue-cont);border:1px solid rgba(126,196,255,.18);
  display:flex;align-items:center;justify-content:center}
.hd-logo-icon{font-size:18px;color:var(--blue)}
.hd-title{font-size:15px;font-weight:500;color:var(--t1)}
.hd-breadcrumb{display:flex;align-items:center;gap:3px;margin-left:4px}
.hd-project{font-size:12px;color:var(--t4)}
.hd-center{flex:1;display:flex;justify-content:center;padding:0 20px}
.hd-search{position:relative;width:min(480px,100%)}
.hd-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--t4);pointer-events:none}
.hd-search input{width:100%;height:36px;padding:0 40px;
  background:rgba(126,196,255,.06);border:1px solid var(--bd);border-radius:var(--r-pill);
  font-family:var(--f);font-size:13px;color:var(--t1);outline:none;transition:all var(--dur)}
.hd-search input::placeholder{color:var(--t4)}
.hd-search input:focus{background:rgba(126,196,255,.1);border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-dim)}
.hd-search-kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-family:var(--fm);font-size:10px;color:var(--t4);padding:2px 5px;border-radius:var(--r-xs);
  border:1px solid var(--bd);background:var(--s2);pointer-events:none}
.hd-right{display:flex;align-items:center;gap:4px;margin-left:auto}
.hd-status{display:flex;align-items:center;gap:6px;padding:4px 11px 4px 9px;
  border-radius:var(--r-pill);background:var(--green-bg);border:1px solid var(--green-bd)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 6px rgba(94,224,154,.5);animation:pulse 2s ease-in-out infinite}
.status-label{font-size:11px;font-weight:500;color:var(--green)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hd-sep{width:1px;height:22px;background:var(--bd);margin:0 6px}
.hd-icon-btn{width:34px;height:34px;border:none;border-radius:var(--r-pill);background:0;
  color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.hd-icon-btn:hover{background:var(--hover);color:var(--t1)}
.hd-icon-btn .mi{font-size:19px}
.hd-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#7c6cf0,var(--blue));
  color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-left:4px;cursor:pointer}

.sb{grid-area:sb;background:var(--glass);border-right:1px solid var(--bd-s);overflow-y:auto;display:flex;flex-direction:column}
.sb-section{padding:14px 14px 0}.sb-section:last-child{padding-bottom:14px}
.sb-section-head{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--t4);margin-bottom:10px;
  padding-bottom:7px;border-bottom:1px solid var(--bd-s)}
.sb-section-icon{font-size:15px;color:var(--blue)}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sum-card{display:flex;align-items:center;gap:9px;padding:10px;border-radius:var(--r-sm);
  background:rgba(126,196,255,.04);border:1px solid var(--bd-s);transition:background var(--dur-f)}
.sum-card:hover{background:rgba(126,196,255,.08);border-color:var(--bd)}
.sum-icon-wrap{width:32px;height:32px;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sum-icon-wrap .mi{font-size:17px}
.sum-icon-wrap.blue{background:rgba(126,196,255,.12);color:var(--blue)}
.sum-icon-wrap.green{background:rgba(94,224,154,.12);color:var(--green)}
.sum-icon-wrap.yellow{background:rgba(250,210,74,.12);color:var(--yellow)}
.sum-icon-wrap.red{background:rgba(255,138,138,.12);color:var(--red)}
.sum-val{font-family:var(--fm);font-size:18px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.sum-label{font-size:10px;color:var(--t4);margin-top:1px;font-weight:500;letter-spacing:.04em}
.pb{display:flex;align-items:center;gap:7px;padding:4px 0}
.pb .nm{width:44px;font-family:var(--fm);font-size:10px;font-weight:500;color:var(--t3)}
.pb .tk{flex:1;height:5px;background:rgba(126,196,255,.06);border-radius:var(--r-pill);overflow:hidden}
.pb .fl{height:100%;border-radius:var(--r-pill);transition:width .5s var(--ease)}
.pb .ct{width:36px;text-align:right;font-family:var(--fm);font-size:10px;color:var(--t4)}
.lg-g{display:grid;grid-template-columns:1fr 1fr;gap:1px}
.lg-i{display:flex;align-items:center;gap:5px;font-family:var(--fm);font-size:10px;font-weight:500;
  color:var(--t3);padding:4px 5px;border-radius:var(--r-xs)}
.lg-i:hover{background:var(--hover)}
.lg-d{width:10px;height:3px;border-radius:var(--r-pill);flex-shrink:0}
.perf-row{display:flex;align-items:center;background:rgba(126,196,255,.04);border-radius:var(--r-sm);border:1px solid var(--bd-s);padding:10px 0}
.perf-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}
.perf-val{font-family:var(--fm);font-size:20px;font-weight:700;line-height:1}
.perf-unit{font-size:9px;color:var(--t4);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.perf-sep{width:1px;height:24px;background:var(--bd-s)}

.cv{grid-area:cv;position:relative;overflow:hidden}
#network-canvas{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 40% 40%, #1E4D8C 0%, #193F75 30%, #12305E 60%, #0B2248 100%);
  position:relative}
#network-canvas::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(140,190,255,.12) 1px, transparent 1px);
  background-size:24px 24px;pointer-events:none}
.cv-overlay-top{position:absolute;top:10px;left:10px;display:flex;gap:5px;z-index:5}
.cv-badge{display:flex;align-items:center;gap:4px;padding:5px 12px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--bd-s);font-family:var(--fm);font-size:11px;color:var(--t3)}
.cv-badge .mi{font-size:14px;color:var(--t4)}.cv-badge-val{font-weight:700;color:var(--t1)}.cv-badge-label{color:var(--t4);font-size:10px}
.cv-zoom{position:absolute;bottom:12px;right:12px;display:flex;flex-direction:column;gap:2px;z-index:5}
.cv-zoom-btn{width:36px;height:36px;border:1px solid var(--bd);border-radius:var(--r-sm);
  background:var(--glass);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cv-zoom-btn:hover{background:var(--s3);color:var(--t1)}
.cv-zoom-btn .mi{font-size:17px}
.net-placeholder{color:var(--t4);font-size:13px;text-align:center;display:flex;flex-direction:column;
  align-items:center;justify-content:center;height:100%;gap:14px}
.net-placeholder .mi{font-size:56px;opacity:.2;color:var(--blue)}

@media(max-width:1100px){#app{grid-template-columns:1fr 280px;grid-template-areas:"hd hd""cv rp"}.sb{display:none}}
@media(max-width:700px){#app{grid-template-columns:1fr;grid-template-areas:"hd""cv"}.sb,.rp{display:none}.hd-search,.hd-breadcrumb{display:none}}

/* RIGHT PANEL */
.rp{grid-area:rp;background:var(--glass);border-left:1px solid var(--bd-s);overflow-y:auto;display:flex;flex-direction:column}
.rp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;font-size:12px;color:var(--t4)}
.rp-content{display:flex;flex-direction:column;gap:0}
.rp-header{padding:14px;border-bottom:1px solid var(--bd-s)}
.rp-header-ip{font-family:var(--fm);font-size:15px;font-weight:700;color:var(--t1);word-break:break-all}
.rp-header-sub{font-size:11px;color:var(--t3);margin-top:3px;display:flex;align-items:center;gap:6px}
.rp-header-tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--r-pill);
  font-size:10px;font-weight:500;font-family:var(--fm);border:1px solid}
.rp-header-tag.priv{color:var(--blue);border-color:rgba(126,196,255,.25);background:rgba(126,196,255,.08)}
.rp-header-tag.pub{color:var(--orange);border-color:rgba(255,169,106,.25);background:rgba(255,169,106,.08)}
.rp-header-tag.grp{color:var(--purple);border-color:rgba(187,154,255,.25);background:rgba(187,154,255,.08)}
.rp-header-tag.mal{color:var(--red);border-color:rgba(255,138,138,.3);background:rgba(255,138,138,.1)}
.rp-section{padding:10px 14px;border-bottom:1px solid var(--bd-s)}
.rp-section-head{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;color:var(--t4);margin-bottom:8px}
.rp-badge{margin-left:auto;font-family:var(--fm);font-size:10px;font-weight:700;
  color:var(--blue);background:var(--blue-dim);padding:1px 7px;border-radius:var(--r-pill)}
.rp-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.rp-info-item{padding:6px 8px;border-radius:var(--r-xs);background:rgba(126,196,255,.04);border:1px solid var(--bd-s)}
.rp-info-label{font-size:9px;color:var(--t4);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.rp-info-val{font-family:var(--fm);font-size:12px;color:var(--t1);margin-top:1px;word-break:break-all}
.rp-dns-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto}
.rp-dns-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--r-xs);
  font-family:var(--fm);font-size:11px;color:var(--t2);transition:background var(--dur-f)}
.rp-dns-item:hover{background:var(--hover)}
.rp-dns-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.rp-conn-list,.rp-group-list{display:flex;flex-direction:column;gap:2px;max-height:250px;overflow-y:auto}
.rp-conn-item,.rp-group-item{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--r-xs);
  font-family:var(--fm);font-size:11px;color:var(--t2);cursor:pointer;transition:background var(--dur-f)}
.rp-conn-item:hover,.rp-group-item:hover{background:var(--hover)}
.rp-conn-pkts,.rp-group-pkts{margin-left:auto;font-size:10px;color:var(--t4)}

/* LOADING */
.ld{position:fixed;inset:0;z-index:9999;
  background:linear-gradient(160deg,#0B2248,#12305E 60%,#193F75);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
  transition:opacity .3s}
.ld.hid{opacity:0;pointer-events:none}
.ld-ring{width:36px;height:36px;position:relative}
.ld-ring div{box-sizing:border-box;display:block;position:absolute;
  width:28px;height:28px;margin:4px;border:3px solid transparent;
  border-radius:50%;border-top-color:var(--blue);animation:ld-spin 1s cubic-bezier(.5,0,.5,1) infinite}
.ld-ring div:nth-child(1){animation-delay:-.45s}
.ld-ring div:nth-child(2){animation-delay:-.3s}
.ld-ring div:nth-child(3){animation-delay:-.15s}
@keyframes ld-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.ld-tx{font-size:13px;color:var(--t3);font-weight:500}
.sb.collapsed{overflow:hidden;padding:0;border:0;width:0;min-width:0;opacity:0;pointer-events:none}

/* MODAL */
.modal-overlay{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.modal-box{width:min(560px,92vw);max-height:85vh;background:var(--s1);border:1px solid var(--bd);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--bd-s)}
.modal-title{font-size:14px;font-weight:500;color:var(--t1);flex:1}
.modal-close{width:32px;height:32px;border:none;background:0;border-radius:var(--r-pill);color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--hover)}
.modal-body{overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:14px}

/* Device list */
.dev-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}
.dev-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);background:rgba(126,196,255,.04);border:1px solid var(--bd-s);cursor:pointer;transition:background var(--dur-f)}
.dev-row:hover{background:rgba(126,196,255,.08)}
.dev-row-img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:rgba(126,196,255,.12);flex-shrink:0}
.dev-row-info{flex:1;min-width:0}
.dev-row-ip{font-family:var(--fm);font-size:12px;color:var(--t1)}
.dev-row-name{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Device form */
.dev-form{border-top:1px solid var(--bd-s);padding-top:12px}
.dev-form-title{font-size:12px;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.dev-form-row{display:flex;gap:10px;margin-bottom:8px}
.dev-field{flex:1;display:flex;flex-direction:column;gap:3px}
.dev-field label{font-size:10px;color:var(--t4);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.dev-field input{height:34px;padding:0 10px;background:rgba(126,196,255,.06);border:1px solid var(--bd);border-radius:var(--r-sm);
  font-family:var(--fm);font-size:12px;color:var(--t1);outline:none;transition:border var(--dur)}
.dev-field input:focus{border-color:var(--blue)}
.dev-img-row{display:flex;align-items:center;gap:10px}
.dev-img-preview{width:40px;height:40px;border-radius:var(--r-sm);background:rgba(126,196,255,.08);border:1px solid var(--bd-s);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.dev-img-preview img{width:100%;height:100%;object-fit:cover}
.dev-btn-upload{display:flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--bd);border-radius:var(--r-sm);
  background:rgba(126,196,255,.06);color:var(--t2);font-size:11px;font-family:var(--f);cursor:pointer;transition:background var(--dur-f)}
.dev-btn-upload:hover{background:rgba(126,196,255,.12)}
.dev-btn-save{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;margin-top:6px;
  border:none;border-radius:var(--r-sm);background:var(--blue);color:#042d4f;font-size:13px;font-weight:600;
  font-family:var(--f);cursor:pointer;transition:opacity var(--dur-f)}
.dev-btn-save:hover{opacity:.9}

/* DNS Tree */
.dns-tree{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.dns-tree.dns-hidden{display:none}
.dns-root{padding:4px 8px;border-radius:var(--r-xs);cursor:pointer;transition:background var(--dur-f)}
.dns-root:hover{background:var(--hover)}
.dns-root-row{display:flex;align-items:center;gap:6px}
.dns-root-arrow{font-size:14px;color:var(--t4);transition:transform .15s}
.dns-root-arrow.open{transform:rotate(90deg)}
.dns-root-name{font-family:var(--fm);font-size:11px;color:var(--blue);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dns-root-count{font-size:9px;color:var(--t4);background:rgba(126,196,255,.08);padding:1px 5px;border-radius:var(--r-pill)}
.dns-subs{padding-left:18px;display:none}
.dns-subs.open{display:flex;flex-direction:column;gap:0}
.dns-sub{font-family:var(--fm);font-size:10px;color:var(--t3);padding:2px 6px;border-radius:var(--r-xs);cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dns-sub:hover{color:var(--t1);background:var(--hover)}

/* DNS Fullscreen */
.dns-fullscreen{position:fixed;inset:0;z-index:1000;background:#0F172A;display:flex;flex-direction:column;overflow:hidden}
.dns-fs-head{display:flex;align-items:center;gap:12px;padding:14px 24px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;background:#0F172A}
.dns-fs-title{font-size:15px;font-weight:600;color:#F1F5F9;letter-spacing:-.3px}
.dns-fs-stats{font-size:11px;color:var(--t3);display:flex;gap:14px;margin-left:12px}
.dns-fs-stats b{font-weight:600;color:var(--t1)}
.dns-fs-search{border:1px solid var(--bd);background:rgba(126,196,255,.04);border-radius:var(--r-sm);padding:7px 14px;
  font-family:var(--fm);font-size:12px;color:var(--t1);outline:0;width:200px;transition:border var(--dur)}
.dns-fs-search:focus{border-color:var(--blue)}
.dns-fs-close{width:36px;height:36px;border:none;background:0;border-radius:var(--r-pill);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.dns-fs-close:hover{background:var(--hover)}
.dns-fs-layout{flex:1;display:flex;flex-direction:column;overflow:hidden}
.dns-analytics{padding:20px 24px;background:#fff;border-bottom:1px solid #E8EAED}
.dns-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.dns-kpi{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#F8F9FA;border:1px solid #E8EAED;border-radius:8px}
.dns-kpi-ic{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dns-kpi-ic .mi{font-size:20px}
.dns-kpi-v{font-family:var(--fm);font-size:22px;font-weight:700;color:#202124}
.dns-kpi-l{font-size:10px;color:#80868B;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.dns-charts-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.dns-chart-card-g{background:#F8F9FA;border:1px solid #E8EAED;border-radius:8px;padding:14px}
.dns-chart-title-g{font-size:11px;font-weight:700;color:#5F6368;display:flex;align-items:center;gap:6px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.03em}
.dns-chart-title-g .mi{font-size:16px;color:#1A73E8}

/* Top 5 rows */
.dns-top5{display:flex;flex-direction:column;gap:6px}
.dns-top5-row{display:flex;align-items:center;gap:8px;font-size:11px}
.dns-top5-n{width:18px;height:18px;background:#E8EAED;color:#5F6368;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0}
.dns-top5-d{flex:1;font-family:var(--fm);color:#202124;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.dns-top5-blk{color:#D93025;text-decoration:line-through}
.dns-top5-bar-bg{width:80px;height:6px;background:#E8EAED;border-radius:3px;flex-shrink:0;overflow:hidden}
.dns-top5-bar{height:100%;border-radius:3px;transition:width .3s}
.dns-top5-v{font-family:var(--fm);font-weight:700;color:#5F6368;font-size:10px;min-width:28px;text-align:right}
.dns-top5-empty{color:#80868B;font-size:11px;padding:8px 0}

/* Domain list - Google style */
.dns-fs-main{overflow-y:auto;padding:0}
.dns-fs-body{display:flex;flex-direction:column}
.dns-root-block{border-bottom:1px solid #E8EAED}
.dns-root-hd{display:flex;align-items:center;gap:8px;padding:10px 20px;cursor:pointer;transition:background .1s}
.dns-root-hd:hover{background:rgba(26,115,232,.04)}
.dns-root-hd .mi.arr{font-size:16px;color:#80868B;transition:transform .15s}
.dns-root-hd .mi.arr.open{transform:rotate(90deg)}
.dns-root-hd .dn{font-family:var(--fm);font-size:13px;color:#1A73E8;flex:1;font-weight:500}
.dns-root-hd .cnt{font-size:10px;color:#80868B;background:#F1F3F4;padding:2px 8px;border-radius:12px;font-weight:600;margin-right:4px}
.dns-btn-block{display:flex;align-items:center;gap:3px;padding:4px 10px;border:1px solid #DADCE0;border-radius:6px;
  background:#fff;color:#5F6368;font-size:10px;font-family:var(--f);cursor:pointer;transition:all .15s;white-space:nowrap;font-weight:600}
.dns-btn-block:hover{background:#FCE8E6;border-color:#D93025;color:#D93025}
.dns-btn-block.blocked{background:#FCE8E6;border-color:#F28B82;color:#D93025}
.dns-btn-block.blocked:hover{background:#E6F4EA;border-color:#34A853;color:#188038}
.dns-domain-blocked{position:relative}
.dns-domain-blocked::after{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;background:#D93025;opacity:.7}
.dns-sub-list{display:none;padding:2px 0 8px 44px}
.dns-sub-list.open{display:flex;flex-direction:column;gap:1px}
.dns-sub-row{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:6px}
.dns-sub-row:hover{background:rgba(26,115,232,.04)}
.dns-sub-row .dn{font-family:var(--fm);font-size:12px;color:#3C4043;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dns-sub-row .dns-btn-block{font-size:9px;padding:3px 8px}
.sb-clickable:hover{background:var(--hover);border-radius:var(--r-sm)}

/* Geo map */
.geo-layout{flex:1;display:grid;grid-template-columns:75fr 25fr;overflow:hidden}
.geo-map-area{width:100%;height:100%}
.geo-sidebar{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px;background:var(--glass);border-left:1px solid var(--bd-s)}
.geo-stat-card{background:rgba(37,99,235,.04);border:1px solid var(--bd-s);border-radius:var(--r-sm);padding:12px}
.geo-stat-title{font-size:10px;font-weight:600;color:var(--t3);display:flex;align-items:center;gap:5px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.geo-stat-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0;font-size:11px}
.geo-stat-row .lbl{color:var(--t2);font-family:var(--fm)}.geo-stat-row .val{color:var(--t1);font-family:var(--fm);font-weight:600}
.geo-country-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--r-xs);font-size:11px}
.geo-country-row:hover{background:var(--hover)}
.geo-country-flag{font-size:14px}.geo-country-name{flex:1;color:var(--t2)}.geo-country-cnt{font-family:var(--fm);font-weight:600;color:var(--t1);font-size:10px}
.geo-mal-row{padding:5px 6px;border-radius:var(--r-xs);font-family:var(--fm);font-size:10px;color:var(--red)}
.geo-mal-row:hover{background:rgba(255,138,138,.06)}
.geo-tip{background:rgba(15,23,41,.92)!important;border:1px solid rgba(37,99,235,.3)!important;color:#eaf0f9!important;
  font-family:var(--fm)!important;font-size:10px!important;border-radius:4px!important;padding:3px 8px!important;box-shadow:0 2px 8px rgba(0,0,0,.4)!important}
.geo-tip::before{border-top-color:rgba(37,99,235,.3)!important}

/* Device select dropdown */
.dev-select{width:100%;height:36px;padding:0 10px;background:rgba(37,99,235,.06);border:1px solid var(--bd);border-radius:var(--r-sm);
  font-family:var(--fm);font-size:12px;color:var(--t1);outline:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238a9db5'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.dev-select:focus{border-color:var(--blue)}
.dev-select option{background:var(--s2);color:var(--t1)}

/* Geo live IP rows */
.geo-live-row{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:var(--r-xs);font-size:10px;transition:background .1s}
.geo-live-row:hover{background:var(--hover)}
.geo-live-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.geo-live-ip{font-family:var(--fm);color:var(--t1);min-width:90px;font-size:10px}
.geo-live-asn{font-size:9px;color:var(--t4);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-live-proto{font-family:var(--fm);font-size:9px;font-weight:600;flex-shrink:0}

/* Geo popup */
.geo-popup .leaflet-popup-content-wrapper{background:rgba(15,23,41,.95)!important;border:1px solid rgba(37,99,235,.3)!important;border-radius:8px!important;box-shadow:0 4px 20px rgba(0,0,0,.5)!important;color:#eaf0f9!important}
.geo-popup .leaflet-popup-tip{background:rgba(15,23,41,.95)!important;border-color:rgba(37,99,235,.3)!important}
.geo-popup .leaflet-popup-close-button{color:var(--t3)!important}

/* Hide leaflet controls */
.leaflet-control-zoom,.leaflet-control-attribution{display:none!important}

/* ══════════════════════════════════════════
 *  STATS DASHBOARD — Light corporate (Google style)
 * ══════════════════════════════════════════ */
.stats-dashboard{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:16px;background:#F1F5F9}

/* ── KPI Row ── */
.st-kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.st-kpi{display:flex;align-items:center;gap:14px;padding:18px 16px;background:#fff;border:1px solid #E2E8F0;border-radius:12px;transition:all .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.st-kpi:hover{border-color:#93C5FD;box-shadow:0 4px 12px rgba(59,130,246,.08);transform:translateY(-1px)}
.st-kpi-ic{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.st-kpi-ic .mi{font-size:22px}
.st-kpi-v{font-family:var(--fm);font-size:24px;font-weight:700;color:#0F172A;line-height:1.1;display:flex;align-items:baseline;gap:6px}
.st-kpi-s{font-size:12px;font-weight:500;color:#64748B}
.st-kpi-l{font-size:10px;color:#94A3B8;margin-top:4px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}

/* ── Grid layouts ── */
.st-grid-2{display:grid;grid-template-columns:minmax(280px,1fr) 2fr;gap:14px}
.st-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* ── Cards ── */
.st-card{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:18px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.st-card:hover{border-color:#93C5FD}
.st-card-h{font-size:12px;font-weight:600;color:#475569;display:flex;align-items:center;gap:8px;margin-bottom:14px;letter-spacing:.3px}
.st-card-h .mi{font-size:18px;color:#3B82F6}
.st-card canvas{width:100%;display:block}

/* ── Tables ── */
.st-tbl-wrap{overflow-y:auto;max-height:220px}
.st-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
.st-tbl th{text-align:left;padding:8px 10px;color:#64748B;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:9px;border-bottom:2px solid #E2E8F0;position:sticky;top:0;background:#fff;z-index:1}
.st-tbl td{padding:7px 10px;color:#1E293B;font-family:var(--fm);font-size:11px;border-bottom:1px solid #F1F5F9}
.st-tbl-click{cursor:pointer;transition:background .12s}
.st-tbl-click:hover td{background:#EFF6FF}

/* ── Drill-down overlay ── */
.st-drill-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);animation:stFadeIn .15s ease}
.st-drill-box{width:min(1200px,95vw);max-height:85vh;background:#fff;border:1px solid #E2E8F0;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 25px 60px rgba(0,0,0,.15)}
.st-drill-head{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid #E2E8F0;background:#F8FAFC}
.st-drill-head .mi{font-size:18px;color:#3B82F6}
.st-drill-title{font-family:var(--fm);font-size:13px;font-weight:600;color:#0F172A}
.st-drill-body{overflow:auto;flex:1;max-height:70vh}
.st-drill-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}
.st-drill-tbl th{text-align:left;padding:10px 12px;color:#64748B;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:9px;border-bottom:2px solid #E2E8F0;position:sticky;top:0;background:#F8FAFC;z-index:1}
.st-drill-tbl td{padding:7px 12px;color:#1E293B;font-family:var(--fm);font-size:11px;border-bottom:1px solid #F1F5F9;white-space:nowrap}
.st-drill-tbl tr:hover td{background:#EFF6FF}
.st-drill-head .dns-fs-close{background:none;border:1px solid #E2E8F0;border-radius:8px;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#64748B;transition:all .15s}
.st-drill-head .dns-fs-close:hover{background:#F1F5F9;color:#0F172A}

/* ── Tabs ── */
.st-tabs{display:flex;gap:4px;margin-left:20px}
.st-tab{display:flex;align-items:center;gap:6px;padding:7px 16px;border:none;background:transparent;color:#94A3B8;font-size:12px;font-weight:600;cursor:pointer;border-radius:8px;font-family:inherit;transition:all .15s;letter-spacing:.02em}
.st-tab .mi{font-size:16px}
.st-tab:hover{background:rgba(255,255,255,.08);color:#CBD5E1}
.st-tab-active{background:rgba(59,130,246,.15)!important;color:#60A5FA!important;box-shadow:inset 0 0 0 1px rgba(59,130,246,.25)}

/* ── Anomaly ── */
.st-anom-header{display:flex;align-items:center;gap:10px;padding:12px 4px 6px;font-size:13px;font-weight:700;color:#D97706;letter-spacing:.3px;border-top:1px solid #E2E8F0;margin-top:6px}
.st-anom-header .mi{font-size:18px}
.st-anom-empty{display:flex;align-items:center;gap:8px;padding:16px;color:#059669;font-size:12px;font-weight:600;background:#ECFDF5;border-radius:8px;margin:4px;border:1px solid #A7F3D0}
.st-anom-empty .mi{font-size:18px}
.st-tbl-tall{max-height:400px}

/* ── Responsive ── */
@media(max-width:1200px){.st-kpi-row{grid-template-columns:repeat(3,1fr)}.st-grid-3{grid-template-columns:1fr 1fr}.st-grid-2{grid-template-columns:1fr 1fr}}
@media(max-width:800px){.st-kpi-row{grid-template-columns:repeat(2,1fr)}.st-grid-3,.st-grid-2{grid-template-columns:1fr}}
@keyframes stFadeIn{from{opacity:0}to{opacity:1}}

/* ══════════════════════════════════════════
 *  RULES ENGINE UI — Google Cloud style
 * ══════════════════════════════════════════ */
.rules-body{flex:1;overflow-y:auto;padding:24px 28px;background:#F1F5F9}

/* Auth overlay */
.rules-auth-overlay{position:absolute;inset:0;z-index:100;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.rules-auth-box{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:40px 36px;width:380px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.12)}
.rules-input{width:100%;padding:11px 14px;background:#F8FAFC;border:1px solid #CBD5E1;border-radius:8px;color:#0F172A;font-family:var(--fm);font-size:13px;margin-bottom:10px;outline:none;transition:border .15s}
.rules-input:focus{border-color:#3B82F6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.rules-input::placeholder{color:#94A3B8}
.rules-auth-err{color:#DC2626;font-size:11px;min-height:18px;margin-bottom:6px}

/* Buttons */
.rules-btn-primary{padding:10px 24px;background:#1A73E8;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;font-family:inherit}
.rules-btn-primary:hover{background:#1557B0}
.rules-btn-cancel{padding:10px 20px;background:#fff;border:1px solid #DADCE0;color:#5F6368;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;transition:all .15s;font-family:inherit}
.rules-btn-cancel:hover{background:#F1F3F4;border-color:#80868B}
.rules-btn-new{padding:7px 16px;background:#1A73E8;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;font-family:inherit}
.rules-btn-new:hover{background:#1557B0;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.rules-btn-new .mi{font-size:16px}

/* Rules list */
.rules-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 20px;color:#80868B;font-size:13px}
.rules-empty .mi{font-size:48px;color:#DADCE0}
.rules-row{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;border:1px solid #DADCE0;border-radius:8px;margin-bottom:8px;transition:all .15s;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.rules-row:hover{border-color:#1A73E8;box-shadow:0 1px 6px rgba(26,115,232,.12)}
.rules-row-off{opacity:.5}
.rules-row-toggle{cursor:pointer;flex-shrink:0}
.rules-row-toggle .mi{font-size:28px;transition:color .15s}
.rules-row-info{flex:1;cursor:pointer;min-width:0}
.rules-row-name{font-weight:600;color:#202124;font-size:14px;margin-bottom:4px}
.rules-row-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rules-row-action{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:4px;font-size:10px;font-weight:600;letter-spacing:.02em}
.rules-row-action .mi{font-size:13px}
.rules-row-clauses{font-size:11px;color:#5F6368}
.rules-row-pri{font-size:10px;color:#80868B;font-family:var(--fm);background:#F1F3F4;padding:2px 8px;border-radius:4px}
.rules-row-del{background:none;border:none;color:#80868B;cursor:pointer;padding:6px;border-radius:6px;transition:all .15s;flex-shrink:0}
.rules-row-del:hover{background:#FCE8E6;color:#D93025}
.rules-row-del .mi{font-size:18px}

/* Editor overlay */
.rules-editor-overlay{position:absolute;inset:0;z-index:90;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.rules-editor-box{background:#fff;border:1px solid #DADCE0;border-radius:12px;width:min(720px,92vw);max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 30px rgba(0,0,0,.15)}
.re-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #E8EAED;background:#F8F9FA}
.re-head span:first-child{color:#F9AB00}
.re-body{flex:1;overflow-y:auto;padding:20px;background:#fff}
.re-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid #E8EAED;background:#F8F9FA}

.re-label{display:block;font-size:11px;font-weight:600;color:#5F6368;letter-spacing:.02em;margin-bottom:5px;margin-top:14px}
.re-input{width:100%;padding:9px 12px;background:#fff;border:1px solid #DADCE0;border-radius:6px;color:#202124;font-family:var(--fm);font-size:12px;outline:none;transition:border .15s}
.re-input:focus{border-color:#1A73E8;box-shadow:0 0 0 2px rgba(26,115,232,.12)}
.re-input::placeholder{color:#80868B}
.re-sel{padding:8px 10px;background:#fff;border:1px solid #DADCE0;border-radius:6px;color:#202124;font-size:12px;outline:none;cursor:pointer}
.re-sel:focus{border-color:#1A73E8}
.re-sel option{background:#fff;color:#202124}
.re-row2{display:grid;grid-template-columns:1fr auto;gap:14px}

.re-section-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#1A73E8;margin-top:22px;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #E8EAED}
.re-section-head .mi{font-size:16px}

.re-logic-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.re-logic-row span{color:#5F6368;font-size:11px;font-weight:600}

/* Clause row */
.re-clause{display:flex;align-items:center;gap:6px;margin-bottom:8px;padding:8px 10px;background:#F8F9FA;border:1px solid #E8EAED;border-radius:8px}
.re-sel-field{flex:0 0 180px;font-size:11px}
.re-sel-op{flex:0 0 140px;font-size:11px}
.re-input-val{flex:1;font-size:11px;padding:7px 10px}
.re-no-val{color:#80868B;font-size:11px;flex:1;padding-left:8px}
.re-clause-del{background:none;border:none;color:#80868B;cursor:pointer;padding:4px;border-radius:4px;flex-shrink:0}
.re-clause-del:hover{color:#D93025;background:#FCE8E6}
.re-clause-del .mi{font-size:16px}

.rules-btn-add-clause{display:flex;align-items:center;gap:5px;padding:7px 14px;background:#E8F0FE;border:1px dashed #1A73E8;border-radius:8px;color:#1A73E8;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.rules-btn-add-clause:hover{background:#D2E3FC}
.rules-btn-add-clause .mi{font-size:16px}

.re-sel-action{width:100%;font-size:13px;padding:10px 12px}

@media(max-width:600px){.re-clause{flex-wrap:wrap}.re-sel-field,.re-sel-op{flex:1 1 100%}}

/* ══════════════════════════════════════════
 *  LOGIN SCREEN — Google style
 * ══════════════════════════════════════════ */
.login-screen{position:fixed;inset:0;z-index:10000;background:linear-gradient(160deg,#0B2248,#12305E 60%,#193F75);display:flex;align-items:center;justify-content:center;transition:opacity .4s}
.login-hide{opacity:0;pointer-events:none}
.login-box{background:#fff;border-radius:16px;padding:48px 40px;width:400px;text-align:center;box-shadow:0 4px 30px rgba(0,0,0,.15)}
.login-logo{margin-bottom:16px}
.login-title{font-size:22px;font-weight:700;color:#202124;margin-bottom:6px}
.login-subtitle{font-size:13px;color:#5F6368;margin-bottom:24px}
.login-input{width:100%;padding:12px 16px;background:#fff;border:1px solid #DADCE0;border-radius:8px;color:#202124;font-family:var(--fm);font-size:14px;margin-bottom:10px;outline:none;transition:border .15s}
.login-input:focus{border-color:#1A73E8;box-shadow:0 0 0 3px rgba(26,115,232,.1)}
.login-input::placeholder{color:#80868B}
.login-err{color:#D93025;font-size:12px;min-height:20px;margin-bottom:8px}
.login-btn{width:100%;padding:12px;background:#1A73E8;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s;font-family:inherit}
.login-btn:hover{background:#1557B0}
.login-btn:disabled{background:#80868B;cursor:not-allowed}

/* ══════════════════════════════════════════
 *  FIREWALL PANEL — Google style v2
 * ══════════════════════════════════════════ */

/* Badge */
.fw-badge{background:#D93025;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:12px;margin-left:6px;line-height:1.2}

/* Panel header */
.fw-panel-head{display:flex;align-items:center;gap:16px;padding:16px 24px;background:#fff;border-bottom:1px solid #DADCE0}
.fw-panel-head-left{display:flex;align-items:center;gap:12px}
.fw-panel-title{font-size:16px;font-weight:700;color:#202124}
.fw-panel-subtitle{font-size:11px;color:#80868B;margin-top:1px}
.fw-head-stats{display:flex;gap:24px;margin-right:16px}
.fw-head-stat{display:flex;flex-direction:column;align-items:center}
.fw-head-stat-v{font-family:var(--fm);font-size:20px;font-weight:800}
.fw-head-stat-l{font-size:9px;color:#80868B;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.fw-head-btn{background:none;border:1px solid #DADCE0;color:#5F6368;width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.fw-head-btn:hover{background:#F1F3F4;border-color:#80868B}
.fw-head-btn .mi{font-size:18px}

/* Panel body */
.fw-panel-body{flex:1;overflow-y:auto;background:#F1F5F9;padding:0}

/* Tabs */
.fw-tabs{display:flex;gap:0;background:#fff;border-bottom:1px solid #DADCE0;padding:0 24px}
.fw-tab{padding:12px 20px;background:none;border:none;border-bottom:2px solid transparent;color:#5F6368;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.fw-tab:hover{color:#202124;background:#F8F9FA}
.fw-tab-active{color:#1A73E8;border-bottom-color:#1A73E8}
.fw-tab-content{display:none;padding:20px 24px}
.fw-tab-visible{display:block}

/* Tables */
.fw-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid #DADCE0;border-radius:8px;overflow:hidden;font-size:12px}
.fw-table thead{background:#F8F9FA}
.fw-table th{padding:10px 14px;text-align:left;font-size:10px;font-weight:700;color:#5F6368;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid #E8EAED}
.fw-table td{padding:10px 14px;border-bottom:1px solid #F1F3F4;color:#3C4043}
.fw-table tr:last-child td{border-bottom:none}
.fw-table tr:hover td{background:#F8F9FA}
.fw-table-empty{text-align:center;color:#80868B;padding:32px;font-size:13px}
.fw-ip-cell{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-weight:600;color:#202124;font-size:12px}
.fw-ip-icon{font-size:15px;color:#D93025}
.fw-num{font-family:var(--fm);font-weight:700;color:#202124;text-align:center}
.fw-date{font-family:var(--fm);color:#80868B;font-size:11px;white-space:nowrap}
.fw-reason{color:#80868B;font-size:11px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.02em}
.fw-tag-block{background:#FCE8E6;color:#D93025}
.fw-tag-allow{background:#E6F4EA;color:#188038}
.fw-rule-tag{background:#E8F0FE;color:#1A73E8;padding:3px 10px;border-radius:4px;font-size:10px;font-weight:600}

/* By rule cards */
.fw-byrule{display:flex;flex-direction:column;gap:8px}
.fw-byrule-card{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;border:1px solid #DADCE0;border-radius:8px;transition:all .15s}
.fw-byrule-card:hover{border-color:#1A73E8;box-shadow:0 1px 6px rgba(26,115,232,.1)}
.fw-byrule-left{display:flex;align-items:center;gap:12px}
.fw-byrule-name{font-weight:600;color:#202124;font-size:13px;margin-bottom:4px}
.fw-byrule-count{font-family:var(--fm);font-size:24px;font-weight:800;color:#202124;display:flex;align-items:baseline;gap:4px}
.fw-byrule-count span{font-size:10px;font-weight:600;color:#80868B}