/* HOSTLY / ABUSEGUARD — Firewall Edition v0.4
   Inspired by hostly.network: near-black surfaces and violet accents from the supplied Firewall Manager.
   Pure CSS, no external assets or font downloads. */
:root {
  color-scheme: dark;
  --bg:#08080d;
  --bg-deep:#08070d;
  --sidebar:#09090f;
  --panel:#101017;
  --panel-low:#0d0c14;
  --panel-hover:#191321;
  --border:#292535;
  --border-soft:#211b2d;
  --text:#f1eff8;
  --muted:#a29ab3;
  --soft:#c5b9d9;
  --cyan:#a78bfa;
  --electric:#8b5cf6;
  --green:#34d399;
  --amber:#f4be79;
  --red:#f77798;
  --glow:rgba(139,92,246,.16);
  --radius:12px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body::before{content:"";pointer-events:none;position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 76% -10%,rgba(105,58,172,.12),transparent 48%),linear-gradient(180deg,#0e0915 0%,#0b0711 52%)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
::selection{background:#5c319c;color:#fff}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.icon-library{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.nav-icon{width:18px;height:18px;display:inline-block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round;flex-shrink:0}
.pulse-dot{width:7px;height:7px;background:var(--green);border-radius:50%;display:inline-block;flex-shrink:0;box-shadow:0 0 0 3px rgba(70,220,179,.09),0 0 15px rgba(70,220,179,.62)}
.gradient-text{background:linear-gradient(102deg,#d0beeb 0%,#a779eb 35%,#9e6aeb 96%);color:transparent;-webkit-background-clip:text;background-clip:text}
.brand-period{color:var(--cyan)}
/* Shell */
.layout{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.sidebar{min-width:0;min-height:100vh;background:linear-gradient(180deg,#120b1d 0%,#0f0918 55%,#0e0915 100%);border-right:1px solid var(--border-soft);padding:30px 17px 24px;display:flex;flex-direction:column;gap:0;position:relative;z-index:15}
.sidebar::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,rgba(159,90,255,.85),rgba(171,112,255,.55),transparent)}
.brand{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;padding:0 11px}
.brand-icon{width:44px;height:44px;display:grid;place-items:center;position:relative;border:1px solid rgba(150,84,242,.48);border-radius:13px;background:linear-gradient(145deg,#312049,#170d26 75%);color:#d0beeb;box-shadow:inset 0 1px rgba(255,255,255,.14),0 0 25px rgba(148,71,255,.11);font-weight:900;font-size:28px;line-height:1;letter-spacing:-3px;font-style:italic}
.brand-icon::after{content:"";position:absolute;inset:4px;pointer-events:none;border:1px solid rgba(178,123,255,.15);border-radius:9px}
.brand-icon span{transform:translateX(-1px);background:linear-gradient(150deg,#d0beeb,#945aeb 74%,#9862eb);color:transparent;-webkit-background-clip:text;background-clip:text}
.brand-copy{display:flex;flex-direction:column;min-width:0}
.brand-copy strong{font-size:22px;font-weight:850;letter-spacing:1.15px;line-height:1;white-space:nowrap}
.brand-copy small{font-size:9px;color:#9383aa;letter-spacing:1.65px;font-weight:750;margin-top:6px;white-space:nowrap}
.brand-separator{color:#5f5075;margin:0 3px}
.sidebar-badge{display:flex;align-items:center;gap:9px;color:#aa9bc0;letter-spacing:1.2px;font-size:9px;font-weight:800;border:1px solid #37284c;border-radius:10px;background:linear-gradient(120deg,#241736,#180e28);padding:11px 12px;margin:35px 9px 24px;white-space:nowrap}
.sidebar-badge .pulse-dot{width:6px;height:6px}
.sidebar-badge-end{color:#7c5fa7;margin-left:auto;font-variant-numeric:tabular-nums}
.navlabel{font-size:10px;font-weight:800;letter-spacing:1.5px;color:#786790;margin:0 12px 13px}
.navlabel-admin{margin-top:27px}
.navgroup{display:flex;flex-direction:column;gap:5px}
.nav{display:flex;align-items:center;gap:12px;padding:12px 13px;color:#a597bb;border:1px solid transparent;border-radius:11px;font-size:12px;font-weight:650;transition:color .16s ease,background .16s ease,border-color .16s ease}
.nav .nav-icon{width:17px;height:17px;stroke-width:1.85;color:#81709b}
.nav:hover{color:#fff;background:rgba(119,84,168,.13)}
.nav:hover .nav-icon{color:#bfa2eb}
.nav.active{color:#d0beeb;background:linear-gradient(90deg,rgba(105,56,173,.27),rgba(86,54,130,.12));border-color:rgba(148,89,231,.19);box-shadow:inset 3px 0 #874be1}
.nav.active .nav-icon{color:var(--cyan)}
.sidebar-spacer{flex:1;min-height:36px}
.sidebar-status{border:1px solid #3e2d56;border-radius:14px;padding:14px;background:radial-gradient(ellipse at 75% 0%,rgba(131,68,218,.15),transparent 70%),#180f27;box-shadow:0 12px 45px rgba(0,0,0,.15)}
.status-top{display:flex;align-items:center;gap:10px}
.status-symbol{width:30px;height:30px;border:1px solid #543979;border-radius:9px;display:grid;place-items:center;color:var(--cyan);background:#31204a}
.status-symbol .nav-icon{width:17px;height:17px}
.status-head{flex:1;min-width:0}
.status-head strong{display:block;font-size:11px;white-space:nowrap}
.status-head small{display:block;color:#9080a9;font-size:10px;margin-top:4px}
.sidebar-status p{font-size:10px;color:#a597ba;line-height:1.65;margin:15px 0 12px}
.status-progress{height:3px;border-radius:20px;background:#34244b;overflow:hidden}
.status-progress span{width:58%;height:100%;display:block;background:linear-gradient(90deg,#2ecbb3,#9e6aeb);border-radius:20px}
.status-caps{display:flex;justify-content:space-between;color:#8978a2;font-size:9px;letter-spacing:1.1px;margin-top:10px;font-weight:750}
.sidebar-website{display:flex;align-items:center;justify-content:space-between;margin:17px 11px 0;color:#9e8db6;font-size:11px;font-weight:700}
.sidebar-website:hover{color:var(--cyan)}
.sidebar-website .nav-icon{width:15px;height:15px}
.mobile-scrim,.menu-toggle{display:none}
.main{min-width:0;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:80px;flex-shrink:0;padding:0 37px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(22,14,32,.75);border-bottom:1px solid var(--border-soft)}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:16px;min-width:0}
.topbar-section{font-size:10px;letter-spacing:1.35px;font-weight:800;color:#9383aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-section span{color:#574470;margin:0 9px}
.topbar-section strong{color:#c8b7e1;font-weight:800}
.environment{display:flex;align-items:center;gap:9px;border:1px solid #3e2d55;background:#1a102a;color:#8eeadf;border-radius:99px;padding:9px 12px;font-size:9px;font-weight:850;letter-spacing:.75px;white-space:nowrap}
.account{display:flex;align-items:center;gap:10px;padding-left:15px;border-left:1px solid #352b44}
.avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:#d0beeb;background:linear-gradient(145deg,#4d2d79,#362352);border:1px solid #604584;box-shadow:inset 0 1px rgba(255,255,255,.1);font-weight:850;font-size:13px}
.account-info{display:flex;flex-direction:column;gap:3px}
.account-info b{font-size:11px;font-weight:750}
.account-info small{font-size:10px;color:var(--muted)}
.logout,.menu-toggle{width:36px;height:36px;align-items:center;justify-content:center;background:#191126;border:1px solid #3c2f4f;border-radius:10px;color:#9c8eb2;transition:.2s}
.logout:hover,.menu-toggle:hover{color:var(--cyan);border-color:#784cbb;background:#2b1d3f}
.logout .nav-icon{width:16px;height:16px}
.page{padding:35px 37px 60px;max-width:1700px;width:100%;margin:0 auto;flex:1}
.footer{display:flex;align-items:center;gap:11px;min-height:64px;border-top:1px solid #2d223d;padding:19px 37px;color:#7d6d92;font-size:9px;letter-spacing:1.2px;font-weight:800;flex-wrap:wrap}
.footer-brand{color:#d0beeb;letter-spacing:1.2px;font-size:11px}
.footer-sep{color:#553e75}
.footer-right{margin-left:auto}
/* Hero */
.dashboard-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:270px;overflow:hidden;margin-bottom:30px;padding:36px 42px;background:radial-gradient(ellipse at 86% 36%,rgba(138,78,222,.24),transparent 32%),radial-gradient(ellipse at 65% 90%,rgba(137,66,237,.08),transparent 43%),linear-gradient(118deg,#190f27 8%,#190e28 55%,#1a0f2b 100%);border:1px solid #45335e;border-radius:22px;box-shadow:inset 0 1px rgba(255,255,255,.045),0 24px 65px rgba(0,0,0,.13)}
.dashboard-hero::before{content:"";position:absolute;inset:0;opacity:.23;background-image:linear-gradient(rgba(164,118,228,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(164,118,228,.12) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(90deg,transparent 22%,black 100%)}
.dashboard-hero::after{content:"";position:absolute;bottom:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(167,105,255,.55),transparent)}
.hero-content{position:relative;z-index:1;max-width:660px}
.hero-kicker{display:flex;align-items:center;gap:11px;color:#ad93d5;letter-spacing:1.7px;font-size:10px;font-weight:800}
.hero-kicker-line{height:1px;width:24px;background:var(--cyan)}
.hero-content h1{font-size:clamp(34px,4.2vw,57px);letter-spacing:-2.8px;line-height:1.12;font-weight:800;margin:23px 0 14px}
.hero-content p{max-width:565px;font-size:13px;line-height:1.8;color:#a99abe;margin:0}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:19px;margin-top:27px}
.hero-status{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.9px;font-weight:850;color:#7ce3d5}
.hero-link{display:flex;align-items:center;gap:7px;color:#c7afeb;font-size:11px;font-weight:750}
.hero-link:hover{color:#fff}
.hero-link .nav-icon{width:14px;height:14px}
.hero-visual{width:256px;height:218px;position:relative;flex-shrink:0;margin-right:22px;display:grid;place-items:center;filter:drop-shadow(0 0 18px rgba(136,66,235,.2))}
.hero-orbit{position:absolute;border:1px solid rgba(154,96,235,.21);border-radius:50%;box-shadow:inset 0 0 30px rgba(129,62,223,.06)}
.orbit-one{width:204px;height:204px}.orbit-two{width:154px;height:154px;border-color:rgba(157,94,245,.38)}.orbit-three{width:111px;height:111px;border-color:rgba(152,95,233,.22)}
.hero-orbit::before{content:"";position:absolute;inset:-5px;border-top:1px solid rgba(167,104,255,.2);transform:rotate(-22deg);border-radius:50%}
.hero-core{width:76px;height:76px;display:grid;place-items:center;border-radius:22px;background:linear-gradient(140deg,#402666,#27163f);border:1px solid #6c4b9c;box-shadow:0 0 0 11px rgba(127,69,209,.07),0 0 38px rgba(157,88,253,.25),inset 0 1px rgba(255,255,255,.15)}
.hero-core .nav-icon{width:37px;height:37px;stroke-width:1.55;color:var(--cyan)}
.orbit-star{position:absolute;width:6px;height:6px;background:#9b65eb;border-radius:50%;box-shadow:0 0 15px 3px rgba(155,83,255,.4)}.star-a{top:16px;left:105px}.star-b{right:12px;top:134px}.star-c{bottom:32px;left:22px;width:4px;height:4px}
.orbit-caption{position:absolute;bottom:-9px;color:#846aab;letter-spacing:1.5px;font-size:9px;font-weight:800}
/* Typography & panels */
.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 2px 15px;color:#aa9cc0;font-size:10px;letter-spacing:1.55px;font-weight:850}
.section-title span:last-child{color:#776591;font-size:9px}
.section-title .section-slash{color:var(--cyan)!important;margin:0 6px;font-size:11px!important}
.eyebrow,.panel-eyebrow{font-size:10px;color:var(--cyan);letter-spacing:1.7px;font-weight:850}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:17px;flex-wrap:wrap;margin:4px 0 25px}
.page-heading h1{font-size:clamp(26px,2.65vw,36px);letter-spacing:-1.25px;line-height:1.13;margin:10px 0 9px;font-weight:800}
.page-heading p{color:var(--muted);font-size:12px;line-height:1.7;margin:0;max-width:700px}
.c{color:var(--cyan)}
.pill,.small-tag,.login-flag{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;letter-spacing:.8px;font-size:9px;font-weight:800;color:#b599e0;border:1px solid #483365;background:#26183a;border-radius:99px;padding:9px 13px}
.pill .pulse-dot,.small-tag .pulse-dot{width:6px;height:6px}
.small-tag{font-size:9px;background:#261a36;color:#b69ae1;border-color:#4a3468;padding:8px 11px}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:32px}
.stat-card,.panel{background:linear-gradient(145deg,rgba(36,24,53,.98),rgba(26,17,39,.98));border:1px solid var(--border);border-radius:var(--radius);box-shadow:inset 0 1px rgba(255,255,255,.028),0 12px 32px rgba(0,0,0,.09)}
.stat-card{padding:22px 21px 0;min-height:151px;position:relative;overflow:hidden;transition:transform .18s,border-color .18s}
.stat-card:hover{transform:translateY(-2px);border-color:#513b6e}
.stat-card::before{content:"";position:absolute;right:-40px;top:-75px;width:130px;height:145px;background:radial-gradient(circle,rgba(128,69,212,.12),transparent 72%);pointer-events:none}
.stat-label{color:#a597bb;font-size:11px;display:flex;justify-content:space-between;align-items:center;gap:7px;font-weight:650}
.stat-icon{width:30px;height:30px;border:1px solid #403056;border-radius:9px;display:grid;place-items:center;color:#9a6edd;background:#281a3d}
.stat-icon .nav-icon{width:16px;height:16px}
.stat-val{font-size:39px;letter-spacing:-1.5px;font-weight:800;margin:10px 0 4px;font-variant-numeric:tabular-nums}
.stat-val.warn{color:var(--amber)}
.stat-foot{color:#8a7aa2;font-size:10px;margin-bottom:19px}
.stat-bottom-line{position:absolute;bottom:0;left:0;height:2px;width:38%;background:linear-gradient(90deg,#8b51e1,rgba(156,98,238,.4),transparent)}
.panel{padding:24px 25px;margin-bottom:20px;min-width:0}
.twocol{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px}
.panelhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:23px}
.panelhead h2{font-size:16px;margin:6px 0 6px;letter-spacing:-.3px;font-weight:760}
.panelhead p{font-size:11px;line-height:1.65;margin:0;color:var(--muted)}
.quiet-link{display:inline-flex;align-items:center;gap:7px;color:#b089ea;font-size:11px;font-weight:750;white-space:nowrap}
.quiet-link:hover{color:#fff}
.quiet-link .nav-icon{width:14px;height:14px}
.chart{display:block;width:100%;height:220px;border-radius:5px;background:repeating-linear-gradient(to top,transparent,transparent calc(25% - 1px),rgba(125,94,167,.18) calc(25% - 1px),rgba(125,94,167,.18) 25%)}
.chartfoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#7e6c99;font-size:9px;letter-spacing:1.1px;font-weight:750;margin-top:18px}
.feed{display:flex;gap:12px;align-items:center;padding:13px 2px;border-bottom:1px solid #312443}
.feed:last-child{border-bottom:0}
.feed>div{flex:1;min-width:0}
.feed b{font-size:11px;font-weight:750}
.feed p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.55}
.status-dot{width:8px;height:8px;border-radius:50%;background:#84729e;flex-shrink:0}
.status-dot.bad{background:var(--amber);box-shadow:0 0 13px rgba(255,206,124,.28)}
.status-dot.good{background:var(--green)}
.tag{display:inline-flex;align-items:center;white-space:nowrap;gap:5px;font-size:10px;font-weight:700;padding:6px 10px;border:1px solid #48385e;border-radius:99px;background:#261b35;color:#b4a5cb}
.tag.yellow{background:#342b1d;border-color:#61502f;color:#ffd189}
.tag.green{background:#153631;border-color:#275d53;color:#77e8ca}
.tablewrap{overflow:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:#413059 transparent}
table{border-collapse:collapse;width:100%;min-width:550px;text-align:left}
thead th{font-size:9px;letter-spacing:1.05px;color:#85769c;font-weight:850;padding:14px 12px;border-bottom:1px solid #3c304c;white-space:nowrap}
tbody td{padding:15px 12px;border-bottom:1px solid #2f2241;color:#bcacd5;font-size:11px;vertical-align:middle;line-height:1.45}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(83,54,124,.12)}
tbody b{color:#d0beeb;font-weight:750}
.muted{color:var(--muted);font-size:10px;line-height:1.6}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{text-align:center;padding:45px 15px;color:var(--muted);font-size:12px}
.emptychart{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;min-height:220px;padding:25px;color:#ae9fc5;text-align:center}
.emptychart.compact{min-height:235px}
.empty-icon{width:49px;height:49px;display:grid;place-items:center;border:1px solid #4a3665;border-radius:15px;background:linear-gradient(145deg,#2e1d47,#241835);color:#a880e4;margin-bottom:5px}
.empty-icon .nav-icon{width:23px;height:23px}
.emptychart strong{font-size:13px;color:#d0beeb}
.emptychart small{font-size:11px;color:#9283a9;max-width:270px;line-height:1.6}
/* Forms, workflows, alerts */
input,select,textarea{background:#120b1d;color:#d0beeb;border:1px solid #413256;border-radius:10px;padding:11px 12px;min-width:0;max-width:100%;outline:0;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:#8853d7;box-shadow:0 0 0 3px rgba(159,90,255,.11)}
input::placeholder,textarea::placeholder{color:#76658d}
select{cursor:pointer}
textarea{resize:vertical;min-height:100px}
input[type=checkbox]{accent-color:var(--cyan);width:17px;height:17px;padding:0;flex-shrink:0}
label{font-size:11px;line-height:1.5;color:#b3a4ca;font-weight:700;display:flex;flex-direction:column;gap:8px}
label.checkline{flex-direction:row;align-items:center;gap:10px;font-size:12px}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid #4e3d65;background:linear-gradient(180deg,#2e2140,#251a35);border-radius:10px;color:#cdbbe7;font-weight:750;font-size:11px;padding:11px 17px;white-space:nowrap;min-height:39px;transition:transform .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:linear-gradient(180deg,#402e59,#2e1f42);border-color:#765c9c}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(115deg,#874dde,#9159e3);color:#180e27;border-color:#9461e1;box-shadow:0 8px 25px rgba(136,66,235,.13)}
.btn.primary:hover{background:linear-gradient(115deg,#a67be6,#a16feb);box-shadow:0 8px 26px rgba(137,66,236,.23)}
.btn.small{padding:7px 11px;font-size:10px;min-height:32px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn .nav-icon{width:16px;height:16px}
.stack{display:flex;flex-direction:column;gap:18px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px;align-items:end}
.form-grid .full{grid-column:1/-1}
.form-action{display:flex;align-items:end}
.inlineform{display:flex;align-items:center;gap:9px}
.inlineform.wrap{flex-wrap:wrap}
.inlineform input{width:190px}
.inlineform select{min-width:120px}
.permissions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:15px 0}
.perm{flex-direction:row;align-items:flex-start;gap:9px;border:1px solid #403155;border-radius:12px;padding:13px;background:#160d24;font-weight:400;cursor:pointer;transition:.15s}
.perm:hover,.perm:has(input:checked){border-color:#6a489d;background:#241735}
.perm input{margin:2px 0 0}
.perm b{display:block;color:#d0beeb;font-size:11px;overflow-wrap:anywhere}
.perm small{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin-top:5px}
.role-detail{padding:17px 1px;border-top:1px solid var(--border-soft)}
.role-detail summary{display:flex;align-items:center;flex-wrap:wrap;gap:16px;cursor:pointer}
.role-detail summary .tag{margin-left:auto}
.padtop{padding-top:17px}
details>summary{cursor:pointer;color:#bfa1eb;font-weight:700;font-size:11px}
details[open]>summary{margin-bottom:14px}
.subrow td{padding:8px 20px;background:#140b20}
.subrow details{max-width:960px}
.toast{padding:15px 17px;margin-bottom:19px;border:1px solid #4e3a6a;border-radius:12px;background:#28193d;color:#d0beeb;font-size:12px;line-height:1.6}
.toast.success{border-color:#276553;background:#102c28;color:#9debd3}
.toast.error{border-color:#804459;background:#321827;color:#ffc8d1}
.notice{padding:18px 20px;border:1px solid #4c356d;border-radius:12px;background:#27193b;color:#c7b6e0;font-size:12px;line-height:1.7;margin-bottom:20px}
.notice.danger{background:#38291b;border-color:#855f37;color:#ffdfb3}
.token{padding:13px;border:1px solid #403056;border-radius:9px;background:#120b1c;color:#ccb8eb;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;margin:11px 0}
/* Sign-in: split graphic / card */
.login-bg{min-height:100vh;position:relative;display:flex;justify-content:center;align-items:center;padding:32px;background:radial-gradient(ellipse at 82% 44%,rgba(105,56,174,.22),transparent 42%),radial-gradient(ellipse at 3% 4%,rgba(112,54,193,.16),transparent 45%),#0b0712;overflow:hidden}
.login-bg::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;background-image:linear-gradient(rgba(157,123,206,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(157,123,206,.075) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at center,black,transparent 82%)}
.login-bg::after{content:"";position:absolute;left:20%;top:-350px;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,rgba(125,60,216,.14),transparent 68%);pointer-events:none}
.login-shell{position:relative;z-index:1;width:min(1190px,100%)}
.login-brand{display:inline-flex;align-items:center;gap:12px;margin:0 0 53px}
.login-brand .brand-icon{width:46px;height:46px}
.login-brand .brand-copy strong{font-size:24px}
.login-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);gap:68px;align-items:center}
.login-intro{padding:10px 0 35px;max-width:630px}
.intro-eyebrow{display:flex;align-items:center;gap:12px;letter-spacing:1.35px;color:#aa93cd;font-size:10px;font-weight:850;white-space:nowrap}
.intro-line{width:46px;height:1px;background:#523779;margin-left:6px}
.login-intro h1{font-size:clamp(43px,5.9vw,76px);font-weight:850;line-height:1.09;letter-spacing:-4.3px;margin:32px 0 24px}
.login-intro h1>span:not(.gradient-text){color:#cbbae5}
.login-intro p{font-size:14px;color:#a293b8;line-height:1.9;max-width:460px;margin:0 0 42px}
.intro-features{display:grid;grid-template-columns:1fr;gap:23px}
.intro-features>div{display:flex;align-items:center;gap:13px}
.intro-feature-icon{display:grid;place-items:center;background:#281a3d;border:1px solid #493268;color:#a06eeb;border-radius:12px;width:40px;height:40px}
.intro-feature-icon .nav-icon{width:20px;height:20px}
.intro-features strong,.intro-features small{display:block}
.intro-features strong{font-size:12px;font-weight:760}
.intro-features small{font-size:10px;color:#9383aa;margin-top:6px}
.login-card{width:100%;border:1px solid #423258;border-radius:24px;padding:1px;background:linear-gradient(160deg,rgba(120,74,185,.27),rgba(34,22,51,.85) 55%,rgba(103,60,164,.22));box-shadow:0 36px 110px rgba(0,0,0,.38),0 0 95px rgba(101,52,169,.06)}
.login-inner{border-radius:23px;background:linear-gradient(153deg,#1c122a,#150d20 65%,#140c20);padding:44px 45px 37px}
.login-flag{font-size:9px;color:#ae91da;padding:8px 11px}
.login-flag .nav-icon{width:13px;height:13px}
.login-card h2{font-size:clamp(25px,2.7vw,33px);letter-spacing:-1.15px;line-height:1.2;margin:25px 0 12px}
.login-card p{margin:0 0 30px;color:#9e90b2;line-height:1.75;font-size:12px}
.login-card label{font-size:11px;color:#baaad2}
.login-card input{height:47px;background:#120a1d;border-color:#403056}
.login-card .btn.wide{width:100%;height:49px;margin-top:4px;font-size:12px;justify-content:center}
.login-security{margin-top:31px;padding-top:21px;border-top:1px solid #342944;display:flex;justify-content:center;align-items:center;gap:10px;color:#9486a8;font-size:10px}
.login-security .pulse-dot{width:6px;height:6px}
.login-bottom{border-top:1px solid rgba(112,85,151,.18);display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#73608d;margin-top:58px;padding-top:19px;font-size:9px;letter-spacing:1.1px;font-weight:750}
/* Breakpoints */
@media(max-width:1250px){.hero-visual{margin-right:0;width:210px}.orbit-one{width:180px;height:180px}.orbit-two{width:145px;height:145px}}
@media(max-width:1120px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.twocol{grid-template-columns:1fr}.permissions{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-content h1{font-size:43px}.login-layout{gap:30px}}
@media(max-width:880px){.layout{grid-template-columns:minmax(0,1fr)}.sidebar{position:fixed;inset:0 auto 0 0;width:280px;height:100vh;overflow:auto;transform:translateX(-101%);transition:transform .22s;box-shadow:14px 0 60px #0006}.nav-open .sidebar{transform:translateX(0)}.mobile-scrim{display:block;position:fixed;inset:0;background:#020711ba;z-index:14;opacity:0;visibility:hidden;transition:.2s}.nav-open .mobile-scrim{opacity:1;visibility:visible}.menu-toggle{display:inline-flex}.topbar{padding:0 22px;height:68px}.page{padding:25px 23px 45px}.footer{padding:19px 22px}.login-layout{grid-template-columns:1fr 1fr;gap:18px}.login-inner{padding:30px 25px}.login-intro h1{letter-spacing:-2.5px}.login-intro p{font-size:12px}}
@media(max-width:690px){.topbar{gap:10px}.topbar-left{gap:10px}.topbar-section{font-size:9px;max-width:240px}.topbar-right{gap:9px}.environment{display:none}.account{padding-left:0;border-left:0}.account-info{display:none}.page{padding:22px 16px 40px}.footer{padding:18px 16px}.footer-right{margin-left:0}.dashboard-hero{padding:27px 25px;min-height:245px}.hero-content h1{font-size:39px;letter-spacing:-2px}.hero-visual{display:none}.dashboard-hero::before{mask-image:none;opacity:.13}.permissions{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.inlineform{flex-wrap:wrap}.login-bg{padding:20px}.login-shell{max-width:460px}.login-brand{margin-bottom:25px}.login-layout{grid-template-columns:1fr;gap:0}.login-intro{display:none}.login-inner{padding:32px 28px}.login-bottom{margin-top:35px}.login-bottom span:last-child{display:none}}
@media(max-width:460px){.stat-grid{gap:10px}.stat-card{padding:17px 15px 0;min-height:143px}.stat-label{font-size:10px}.stat-icon{width:26px;height:26px}.stat-val{font-size:32px}.stat-foot{font-size:9px}.panel{padding:19px 16px}.page-heading{gap:12px}.page-heading h1{font-size:27px}.pill{white-space:normal}.dashboard-hero{padding:24px 20px}.hero-kicker{font-size:9px}.hero-content h1{font-size:36px}.hero-actions{gap:13px}.hero-status{font-size:8px}.section-title{font-size:9px}.section-title>span:last-child{display:none}.login-card h2{font-size:27px}.login-inner{padding:29px 23px}.topbar-section{max-width:170px}.footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Firewall Manager violet identity — overrides carried through ALL existing pages */
body::before{background:radial-gradient(ellipse at 79% 4%,rgba(107,57,160,.09),transparent 42%),#08080d}
.sidebar{background:linear-gradient(180deg,#0c0911,#09090f 60%,#09080f)}
.sidebar::after{background:linear-gradient(90deg,#8b5cf6,#533086,transparent)}
.brand-icon{background:linear-gradient(145deg,#271938,#110d1a);border-color:#624084;box-shadow:inset 0 1px rgba(255,255,255,.07),0 0 25px #8b5cf615}
.brand-icon span,.gradient-text,.violet-grad{background:linear-gradient(110deg,#f4e9ff,#c1a2ff 45%,#8b5cf6);color:transparent;-webkit-background-clip:text;background-clip:text}
.brand-period{color:#a78bfa}
.nav.active{background:linear-gradient(90deg,rgba(105,58,173,.26),rgba(40,22,58,.21));border-color:#503265;box-shadow:inset 3px 0 #8b5cf6}
.nav:hover{background:#21162d}.nav.active .nav-icon,.nav:hover .nav-icon{color:#bc9af8}
.sidebar-badge,.sidebar-status{background:linear-gradient(140deg,#160e20,#100c17);border-color:#36243f}
.status-symbol{color:#c5a1ff;background:#24162f;border-color:#523568}
.status-progress{background:#30203a}.status-progress span{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.topbar{background:#101017e8}
.environment{background:#0c1c18;border-color:#22483b;color:#72dfb4}
.dashboard-hero{background:radial-gradient(ellipse at 88% 42%,rgba(112,62,185,.31),transparent 35%),linear-gradient(115deg,#1b1026,#100d18 60%,#180f24);border-color:#392747}
.hero-core{background:linear-gradient(140deg,#3a2258,#1b1228);border-color:#7252a4}
.stat-card,.panel{background:linear-gradient(145deg,#15111d,#100d17);border-color:#2d2437;box-shadow:inset 0 1px #ffffff07,0 12px 32px #00000022}
.stat-card:hover{border-color:#624384}
.btn,.logout,.menu-toggle{background:linear-gradient(180deg,#211829,#18121f);border-color:#43314f;color:#e9dcf8}
.btn:hover,.logout:hover,.menu-toggle:hover{background:#30213d;border-color:#7d55a0}
.btn.primary{background:linear-gradient(115deg,#713edc,#9762ee);border-color:#a678fa;color:#fff;box-shadow:0 8px 24px #7c3aed25}
.btn.primary:hover{background:linear-gradient(115deg,#8752ef,#ae82fb);border-color:#bd93ff;box-shadow:0 8px 26px #7c3aed36}
input,select,textarea{background:#0d0b12;border-color:#382d43;color:#f2eafa}
input:focus,select:focus,textarea:focus{border-color:#9e70f4;box-shadow:0 0 0 3px #8b5cf626}
input[type=checkbox]{accent-color:#8b5cf6}
.toast{background:#24172f;border-color:#64467c;color:#e8d5ff}
.toast.success{background:#122b22;color:#b0f7d8;border-color:#28684b}
.toast.error{background:#311b26;color:#fcd1db;border-color:#724357}
.tag{background:#201726;border-color:#3a2945;color:#cab8d5}.tag.good,.tag.green{background:#13261f;color:#8ee0bc;border-color:#315846}
.quiet-link{color:#c29bff}.quiet-link:hover{color:#f5e9ff}
/* Integrated firewall pages */
.fw-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:23px}
.fw-kpi{border:1px solid #302239;background:linear-gradient(155deg,#1b1224,#110d18);padding:23px;border-radius:13px;min-width:0}
.fw-kpi span{font-size:9px;font-weight:850;letter-spacing:1.3px;color:#b3a0c8}.fw-kpi strong{display:block;color:#f2eaff;font-size:34px;font-weight:750;letter-spacing:-1.5px;margin:14px 0 7px}
.fw-kpi .fw-kpi-status{font-size:18px;letter-spacing:-.4px;margin:24px 0 12px}.fw-kpi small{color:#9d8aaf;font-size:10px;line-height:1.55}
.fw-banner{display:flex;align-items:center;gap:20px;border:1px solid #4a2a64;border-radius:14px;padding:20px 23px;background:radial-gradient(ellipse at 80% 20%,#6d28d91f,transparent 75%),linear-gradient(115deg,#261330,#120e1b);margin-bottom:23px}
.fw-banner-icon{width:46px;height:46px;border:1px solid #5e3c79;border-radius:12px;display:grid;place-items:center;background:#321842;font-size:27px;color:#b79aff;flex-shrink:0}.fw-banner>div:nth-child(2){flex:1}.fw-banner strong{font-size:13px;color:#efdffa}.fw-banner p{font-size:11px;line-height:1.7;color:#b79ec4;margin:8px 0 0}.fw-mini{font-size:9px;letter-spacing:1px;font-weight:800;color:#a28cbb;border:1px solid #453154;padding:7px 10px;border-radius:6px}
.fw-two-col{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:20px}.fw-section{padding:23px 24px}.fw-newip{display:flex;gap:10px;align-items:flex-end;margin-bottom:15px}.fw-newip label{flex:1;min-width:0}.fw-newip button{flex-shrink:0}
.fw-ip-list{display:flex;flex-direction:column;gap:0}.fw-ip-item{display:flex;align-items:center;gap:12px;padding:15px 0;border-top:1px solid #2d2136}.fw-ip-item>div{flex:1;min-width:0}.fw-ip-item b{font-size:12px;display:block;overflow-wrap:anywhere}.fw-ip-item small{display:block;font-size:10px;color:#9f8aac;margin-top:7px;overflow-wrap:anywhere}.fw-ip-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid #4e315a;border-radius:9px;background:#21162b;color:#bf99ed;flex-shrink:0;font-size:18px}
.fw-empty{min-height:165px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#a58cb8;text-align:center;gap:9px;padding:25px}.fw-empty>span{font-size:34px;color:#9871bb}.fw-empty strong{color:#e6d4f7}.fw-empty p{font-size:11px;max-width:270px;line-height:1.7}
.fw-statusbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 20px}.fw-statusbar .tag{border-radius:7px}
.fw-rule-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:20px}.fw-rule-editor{display:flex;flex-direction:column;gap:14px}.fw-rule-header,.fw-rule-row{display:grid;grid-template-columns:minmax(110px,2fr) minmax(75px,.7fr) minmax(90px,.9fr) minmax(100px,1.4fr) 110px;gap:8px;align-items:center}
.fw-rule-header{padding:0 7px 4px;color:#a891bf;font-size:9px;letter-spacing:.7px;font-weight:750}.fw-rule-row{border:1px solid #30243a;background:#130f1a;border-radius:9px;padding:12px 10px}.fw-rule-row label{min-width:0}.fw-rule-row label span{display:none}.fw-rule-row input,.fw-rule-row select{width:100%;height:38px;font-size:11px;padding:7px 8px}.fw-rule-buttons{display:flex;align-items:center;gap:4px}.fw-rule-buttons button{width:31px;height:34px;border-radius:7px;border:1px solid #443050;background:#281a31;color:#d3b9e8;font-size:16px}.fw-rule-buttons button:hover{border-color:#9360c0;background:#34213f}.fw-rule-buttons .fw-del{color:#f3a4bd}
.fw-rule-bottom{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;padding-top:5px}.fw-counter{font-size:11px;color:#a78fb7}.fw-inline-action{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:13px;border-top:1px solid #302539;padding-top:18px;margin-top:24px;color:#a996b8;font-size:11px}.fw-sidebar-col>.panel{margin-bottom:18px}.fw-checks>div{display:flex;align-items:center;gap:9px;color:#baa9c8;padding:10px 0;border-top:1px solid #291f31;font-size:11px}.fw-checks span{color:#60ddb1}.fw-safe-action{margin-top:22px}.btn.wide{width:100%}.fw-noapply{margin:17px 0 0;font-size:10px}.fw-data-block{display:flex;align-items:center;gap:15px;border:1px solid #34243f;border-radius:9px;background:#22142d;padding:13px;margin-bottom:13px}.fw-data-block strong{font-size:32px;color:#d2b7f4}.fw-data-block span{font-size:10px;color:#bba6cb}.fw-live-rule{padding:11px 0;border-top:1px solid #291f31}.fw-live-rule b{display:block;font-size:11px;color:#e7dafa}.fw-live-rule small{display:block;font-size:10px;color:#ae97c1;margin-top:5px;overflow-wrap:anywhere}.fw-pad-muted{font-size:11px;color:#a78eb9;padding:10px 0;line-height:1.7}.fw-text-link{font-size:11px;color:#c9a9ef;display:block;margin-top:15px}.fw-pad-form{padding-top:5px}.fw-confirm{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.fw-confirm label{flex:1;min-width:230px}.fw-confirm .btn{min-height:43px}
.fw-template-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.fw-template{padding:19px;border:1px solid #36253e;border-radius:12px;background:#160f1d}.fw-template-head{display:flex;gap:12px;align-items:center;margin-bottom:16px}.fw-template-head>div{flex:1;min-width:0}.fw-template-head b{display:block;font-size:12px}.fw-template-head small{display:block;color:#a18cae;font-size:10px;line-height:1.6;margin-top:5px}.fw-template-icon{display:grid;place-items:center;background:#2d1937;border:1px solid #533468;color:#bb95ea;width:36px;height:36px;font-size:19px;border-radius:9px}.fw-template-action{display:flex;align-items:flex-end;gap:9px}.fw-template-action label{flex:1}.fw-template-action select{width:100%}.fw-template-remove{margin-top:12px}.fw-template-remove button{font-size:10px;color:#df94ae;background:none;border:0;padding:0}
@media(max-width:1250px){.fw-rule-grid{grid-template-columns:1fr}.fw-sidebar-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.fw-sidebar-col>.panel{margin:0}.fw-sidebar-col>.panel:last-child{grid-column:1/-1}}
@media(max-width:1000px){.fw-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.fw-two-col{grid-template-columns:1fr}.fw-rule-header{display:none}.fw-rule-row{grid-template-columns:repeat(2,minmax(0,1fr))}.fw-rule-row label span{display:block;color:#9c82b2;font-size:10px}.fw-rule-buttons{grid-column:1/-1;justify-content:flex-end}}
@media(max-width:650px){.fw-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fw-kpi{padding:16px}.fw-kpi strong{font-size:27px}.fw-kpi .fw-kpi-status{font-size:14px}.fw-banner{align-items:flex-start;padding:17px}.fw-banner-icon{width:35px;height:35px}.fw-mini{display:none}.fw-newip{flex-wrap:wrap}.fw-newip label{flex:1 1 140px}.fw-newip button{width:100%}.fw-section{padding:17px}.fw-rule-row{grid-template-columns:1fr 1fr}.fw-rule-row label:first-child{grid-column:1/-1}.fw-sidebar-col{grid-template-columns:1fr}.fw-rule-bottom{flex-direction:column;align-items:stretch}.fw-template-list{grid-template-columns:1fr}.fw-template-action{flex-direction:column;align-items:stretch}}
.fw-backup-form{margin-top:7px}.fw-backup-form button{font-size:10px;background:none;border:0;padding:0}
.fw-metric-select{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;max-width:640px;margin:0 0 24px}.fw-metric-select label{flex:1;min-width:260px}
.fw-metric-chart{display:flex;flex-direction:column;gap:5px;max-height:450px;overflow:auto;padding-right:5px}
.fw-metric-row{display:grid;grid-template-columns:75px minmax(0,1fr) 60px;align-items:center;gap:10px;color:#a993c2;font-size:10px}.fw-metric-row time{font-variant-numeric:tabular-nums}.fw-metric-row b{text-align:right;font-variant-numeric:tabular-nums}.fw-meter{height:9px;position:relative;border-radius:8px;background:#1b1225;overflow:hidden}.fw-meter-all,.fw-meter-pass{position:absolute;left:0;top:0;height:100%;border-radius:8px}.fw-meter-all{background:linear-gradient(90deg,#59328e,#ad78ef)}.fw-meter-pass{background:#34d399;height:4px;top:5px}

.fw-meter{height:13px;background:transparent;overflow:visible;display:flex;flex-direction:column;gap:2px}
.fw-meter progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:5px;border:0;border-radius:9px;background:#1b1225;overflow:hidden;position:static}
.fw-meter progress::-webkit-progress-bar{background:#1b1225;border-radius:9px}
.fw-meter-all::-webkit-progress-value{background:linear-gradient(90deg,#59328e,#ad78ef);border-radius:9px}
.fw-meter-pass::-webkit-progress-value{background:#34d399;border-radius:9px}
.fw-meter-all::-moz-progress-bar{background:#8b5cf6}.fw-meter-pass::-moz-progress-bar{background:#34d399}
/* v0.6 VPS identity + audited action controls */
.ip-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#ddd6fe}
.danger-zone{margin-top:18px;padding:16px;border:1px solid rgba(239,68,68,.28);border-radius:12px;background:rgba(127,29,29,.08)}
.danger-zone p{margin:5px 0 12px;color:var(--muted);font-size:12px}
.action-grid{display:grid;grid-template-columns:minmax(160px,1fr) repeat(4,auto);gap:8px;align-items:end}
.btn.warn{border-color:rgba(245,158,11,.45);color:#fbbf24}.btn.danger{border-color:rgba(239,68,68,.5);color:#fca5a5}
.tag.red{border-color:rgba(239,68,68,.35);color:#fca5a5;background:rgba(239,68,68,.08)}
.inline-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.inline-actions form{margin:0}
@media(max-width:980px){.action-grid{grid-template-columns:1fr 1fr}.action-grid label{grid-column:1/-1}}

/* v0.7 */
.brand-image img{width:38px;height:38px;object-fit:contain;border-radius:10px}.login-logo{max-width:230px;max-height:76px;object-fit:contain;margin-bottom:42px}.language-switch{display:flex;gap:5px;border:1px solid var(--line,#2b223b);border-radius:9px;padding:3px}.language-switch a{padding:5px 8px;border-radius:6px;font-size:11px;text-decoration:none;color:var(--muted)}.language-switch a.active,.language-switch a:hover{background:rgba(139,92,246,.18);color:#fff}.login-language{margin-top:18px;justify-content:center}.branding-preview{display:flex;align-items:center;gap:30px;background:#0d0a14;border:1px solid var(--line,#2b223b);border-radius:16px;padding:20px}.branding-preview img{max-width:260px;max-height:90px;object-fit:contain}.branding-preview .mark-preview{width:70px;height:70px}.button-row{display:flex;gap:8px;flex-wrap:wrap}.btn.warning{border-color:#7c5c1a;color:#ffc857;background:#1a1408}.btn.danger,.tag.danger{border-color:#762a45;color:#ff7a9f;background:#1a0b12}.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}.metric-card{background:var(--panel,#121019);border:1px solid var(--line,#2b223b);border-radius:15px;padding:18px}.metric-card h3{margin:12px 0 4px}.metric-card p{font-size:12px;color:var(--muted);word-break:break-all}.metric-card strong{font-size:22px}.incident-row{display:flex;gap:18px;justify-content:space-between;border-top:1px solid var(--line,#2b223b);padding:18px 0}.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.compact-list>div{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line,#2b223b)}
.public-status{background:var(--bg,#08080D);color:#f5f2fb;min-height:100vh}.status-shell{max-width:920px;margin:auto;padding:50px 24px}.status-header{display:flex;align-items:center;gap:22px;margin-bottom:34px}.status-header img{width:160px;max-height:60px;object-fit:contain}.status-header h1{margin:0}.status-header p{color:#aaa0bb}.status-header .language-switch{margin-left:auto}.status-banner{border-radius:16px;padding:20px;margin:20px 0 34px;font-weight:700;border:1px solid}.status-banner.good{background:#081711;border-color:#1e5c44;color:#7fffc5}.status-banner.bad{background:#1a0b12;border-color:#762a45;color:#ff7a9f}.status-services{background:#100d17;border:1px solid #2b223b;border-radius:16px;overflow:hidden}.status-service{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;border-bottom:1px solid #241b32}.status-service:last-child{border:0}.status-service small{display:block;color:#8f849f;margin-top:4px}.status-pill{font-size:11px;text-transform:uppercase;border:1px solid #3a3048;padding:6px 10px;border-radius:99px}.status-pill.operational{color:#70efba;border-color:#225a46}.status-pill.down{color:#ff7a9f;border-color:#762a45}.status-event{background:#100d17;border:1px solid #2b223b;border-radius:14px;padding:20px;margin:12px 0}.status-event h3{margin:10px 0 5px}.status-event p,.status-event small{color:#aaa0bb}.status-shell footer{text-align:center;color:#6f657b;padding:50px 0 10px}@media(max-width:800px){.split-grid{grid-template-columns:1fr}.status-header{align-items:flex-start;flex-wrap:wrap}.status-header .language-switch{margin-left:0}}

/* v0.7.2 visual hotfix ------------------------------------------------------
   The SVG symbol library must never participate in document flow. Without
   this rule browsers give the root <svg> a 300x150 default viewport, creating
   the large blank strip above both authenticated and guest layouts. */
.svg-defs{
  position:absolute!important;
  width:0!important;
  height:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  visibility:hidden!important;
}

/* Login markup alignment for v0.7.2 */
.login-shell{display:block}
.login-layout{width:100%}
.login-intro{min-width:0}
.login-card{min-width:0}
.login-inner .stack{gap:15px}
.login-inner .btn.primary{width:100%;height:49px;margin-top:4px}

@media(max-width:880px){
  .login-layout{grid-template-columns:minmax(0,1fr) minmax(330px,.9fr)}
}
@media(max-width:760px){
  .login-shell{max-width:500px}
  .login-layout{grid-template-columns:1fr}
  .login-intro{display:none}
}

/* v0.7.3 compact login hotfix ----------------------------------------------
   Keep the desktop sign-in screen inside one viewport. On narrow/mobile
   layouts the document returns to natural scrolling so content is never cut. */
@media (min-width:761px){
  .login-bg{
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
    padding:18px 28px;
    align-items:stretch;
  }
  .login-shell{
    width:min(1240px,100%);
    height:100%;
    min-height:0;
    margin:0 auto;
    display:flex;
    flex-direction:column;
  }
  .login-brand{
    flex:0 0 auto;
    margin:0 0 14px;
    min-height:40px;
  }
  .login-brand img,
  .login-logo{
    width:auto;
    height:40px;
    max-width:190px;
    max-height:40px;
    margin:0!important;
    object-fit:contain;
  }
  .login-layout{
    flex:1 1 auto;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(365px,.92fr);
    gap:48px;
    align-items:center;
  }
  .login-intro{
    padding:0;
    max-width:590px;
  }
  .intro-eyebrow{
    margin-bottom:0;
    font-size:9px;
  }
  .login-intro h1{
    font-size:clamp(44px,4.7vw,66px);
    line-height:.98;
    letter-spacing:-3.4px;
    margin:22px 0 18px;
  }
  .login-intro p{
    font-size:13px;
    line-height:1.65;
    max-width:500px;
    margin:0 0 24px;
  }
  .intro-features{
    gap:10px;
    margin-top:0;
  }
  .intro-features>div{
    min-height:46px;
    gap:11px;
  }
  .intro-feature-icon{
    width:40px;
    height:40px;
    border-radius:12px;
  }
  .intro-features strong{font-size:12px}
  .intro-features small{font-size:10px;margin-top:2px}

  .login-card{
    max-width:490px;
    justify-self:end;
    border-radius:22px;
  }
  .login-inner{
    padding:28px 32px 20px;
    border-radius:21px;
  }
  .login-flag{
    padding:7px 10px;
    font-size:8px;
  }
  .login-card h2{
    font-size:29px;
    line-height:1.08;
    margin:18px 0 8px;
  }
  .login-card p{
    font-size:11px;
    line-height:1.55;
    margin:0 0 18px;
  }
  .login-inner .stack{gap:11px}
  .login-card label{font-size:10px}
  .login-card input{
    height:43px;
    margin-top:5px;
    padding:0 13px;
  }
  .login-inner .btn.primary{
    height:44px;
    margin-top:2px;
  }
  .login-security{
    margin-top:18px;
    padding-top:14px;
    font-size:9px;
  }
  .login-language{
    margin-top:11px;
  }
  .login-language a{
    padding:4px 9px;
    font-size:10px;
  }
}

@media (min-width:761px) and (max-height:820px){
  .login-bg{padding:12px 24px}
  .login-brand{margin-bottom:8px;min-height:34px}
  .login-brand img,.login-logo{height:34px;max-height:34px}
  .login-layout{gap:34px;grid-template-columns:minmax(0,1fr) minmax(350px,455px)}
  .login-intro h1{font-size:clamp(38px,4.2vw,56px);margin:15px 0 12px;letter-spacing:-2.8px}
  .login-intro p{font-size:12px;line-height:1.5;margin-bottom:16px}
  .intro-features{gap:7px}
  .intro-features>div{min-height:38px}
  .intro-feature-icon{width:35px;height:35px}
  .intro-features strong{font-size:11px}
  .intro-features small{font-size:9px}
  .login-inner{padding:22px 26px 15px}
  .login-card h2{font-size:25px;margin:13px 0 6px}
  .login-card p{margin-bottom:12px}
  .login-inner .stack{gap:8px}
  .login-card input{height:39px}
  .login-inner .btn.primary{height:40px}
  .login-security{margin-top:13px;padding-top:10px}
  .login-language{margin-top:8px}
}

@media (min-width:761px) and (max-height:700px){
  .login-bg{padding:9px 20px}
  .login-brand{display:none}
  .login-intro h1{font-size:44px;margin:10px 0 9px}
  .login-intro p{margin-bottom:11px}
  .intro-features>div:nth-child(3){display:none}
  .login-inner{padding:18px 22px 12px}
  .login-card h2{font-size:23px;margin-top:10px}
  .login-security{margin-top:9px;padding-top:8px}
}

@media (max-width:760px){
  .login-bg{
    min-height:100svh;
    height:auto;
    overflow:visible;
    padding:18px;
  }
  .login-brand img,.login-logo{margin:0!important}
}


/* v0.9 — complete firewall template library */
.template-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:14px;padding:18px}.template-card{display:flex;flex-direction:column;gap:14px;min-height:300px;padding:18px;border:1px solid rgba(167,139,250,.16);border-radius:20px;background:linear-gradient(145deg,rgba(139,92,246,.07),rgba(16,16,23,.92))}.template-card h3{font-size:19px;margin:4px 0 8px}.template-card p{color:#8f8b9c;font-size:13px;line-height:1.55;margin:0}.template-card-top{display:flex;align-items:center;gap:8px}.template-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(139,92,246,.14);color:#a78bfa;font-size:22px}.template-scope,.template-version{font-size:10px;letter-spacing:.12em;font-weight:800;color:#a78bfa}.template-version{margin-left:auto;color:#77717f}.template-star{color:#c4a7ff}.template-category{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#766e82;font-weight:800}.template-tags,.template-rules-preview{display:flex;flex-wrap:wrap;gap:6px}.template-tags span{padding:4px 8px;border-radius:999px;background:#181520;color:#9f97ab;font-size:10px}.template-rules-preview code{padding:5px 7px;border-radius:8px;background:#0b0a10;border:1px solid #24202d;color:#c7bfce;font-size:10px}.template-prepare{margin-top:auto;display:flex;align-items:end;gap:8px}.template-prepare label{flex:1;font-size:11px;color:#8f8998}.template-prepare select{width:100%;margin-top:5px}.template-meta{display:flex;justify-content:space-between;color:#77717f;font-size:11px}.template-card-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.template-card-actions form{margin:0}.template-filterbar{display:flex;gap:8px;align-items:center;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.05);flex-wrap:wrap}.template-filterbar input[type=search]{flex:1;min-width:220px}.checkline{display:flex!important;align-items:center;gap:8px}.checkline input{width:auto!important}.template-rule-editor{padding:0 18px 18px}.fw-editor-footer{display:flex;justify-content:flex-end;padding:0 18px 18px}.version-history{padding:0 18px 18px;display:grid;gap:8px}.version-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 15px;border:1px solid rgba(255,255,255,.06);border-radius:13px;background:#0d0c12}.version-row b{display:block;font-size:13px}.version-row small{display:block;color:#797380;margin-top:4px}.danger-zone{padding:18px;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:flex-end}.rules-table input,.rules-table select{min-width:120px}@media(max-width:760px){.template-card-grid{grid-template-columns:1fr;padding:12px}.template-prepare{flex-direction:column;align-items:stretch}.template-filterbar>*{width:100%}.version-row{align-items:flex-start;flex-direction:column}}

/* v0.9 VPS inventory polish */
.vps-page-heading{align-items:flex-end}.vps-sync-actions{display:flex;gap:9px;align-items:center}.vps-sync-actions form{margin:0}.vps-panel-head{align-items:center}.vps-table{min-width:1180px}.vps-table th{white-space:nowrap}.vps-table td{vertical-align:middle;padding-top:17px;padding-bottom:17px}.vps-identity{display:flex;align-items:center;gap:12px;min-width:170px}.vps-id-badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(145deg,#2b1741,#1a1026);border:1px solid #57347d;color:#cba8ff;font-size:12px;font-weight:900;letter-spacing:.02em;box-shadow:inset 0 0 22px rgba(139,92,246,.08)}.vps-id-copy{min-width:0}.vps-id-copy strong{display:block;color:#f1eafd;font-size:13px;line-height:1.2;margin-bottom:7px}.vps-meta-line{display:flex;align-items:center;gap:7px;color:#8f82a1;font-size:9px;white-space:nowrap}.vps-meta-line i{display:block;width:3px;height:3px;border-radius:50%;background:#655276}.vps-ip{display:inline-flex;padding:7px 9px;border-radius:8px;background:#100d16;border:1px solid #2d2339;color:#d8c6ee;font:600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}.vps-host{font-size:11px;color:#c4b6d2}.vps-owner{min-width:150px}.vps-owner strong{display:block;font-size:10px;color:#d2c6dc;overflow-wrap:anywhere}.vps-owner small{display:block;color:#81758e;font-size:9px;margin-top:5px}.vps-state-stack{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:95px}.vps-state-stack small{font-size:9px;color:#84788f;white-space:nowrap}.metric-value{display:block;font-size:13px;color:#eee7f5}.metric-unit{display:block;font-size:9px;color:#7f748a;margin-top:4px}.vps-manage{position:relative}.vps-manage>summary{list-style:none;cursor:pointer;display:inline-flex}.vps-manage>summary::-webkit-details-marker{display:none}.vps-manage[open] .vps-actions{position:absolute;right:0;z-index:20;width:min(430px,80vw);margin-top:8px;padding:17px;border:1px solid #4a2f62;border-radius:14px;background:#120b19;box-shadow:0 20px 55px rgba(0,0,0,.45)}.vps-action-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:2px}.vps-action-title strong{font-size:12px}.vps-action-title small{font-size:9px;color:#8c7e98}.vps-actions label{font-size:10px;color:#a999b7}.vps-actions input{margin-top:6px}.vps-actions .button-row{margin-top:4px}.tag.warning{color:#ffd27a;border-color:#654b1f;background:#261b0c}@media(max-width:900px){.vps-page-heading{align-items:flex-start}.vps-sync-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}}