:root{
  --bg:#070812;--bg2:#090b17;--panel:#0d0f1b;--panel2:#111424;--panel3:#15182a;
  --line:rgba(255,255,255,.075);--line-strong:rgba(255,255,255,.12);
  --text:#f7f8ff;--text2:#d9dcef;--muted:#8d91aa;--muted2:#676c85;
  --violet:#7c3cff;--violet2:#9d6bff;--cyan:#00d4ff;--cyan2:#66e8ff;
  --green:#43e6a2;--amber:#ffbd5b;--danger:#ff5f7e;
  --gradient:linear-gradient(135deg,var(--violet) 0%,var(--cyan) 100%);
  --shadow:0 24px 70px rgba(0,0,0,.34);--radius:18px;--radius-sm:12px;
}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 72% -18%,rgba(124,60,255,.10),transparent 34%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}a{color:var(--cyan);text-decoration:none}button,input,select,textarea{font:inherit}.ambient{position:fixed;pointer-events:none;filter:blur(80px);opacity:.18;border-radius:999px;z-index:0}.ambient-a{width:360px;height:360px;background:var(--violet);right:-180px;top:12%}.ambient-b{width:300px;height:300px;background:var(--cyan);left:18%;bottom:-220px}.shell{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:268px minmax(0,1fr)}
.sidebar{height:100vh;position:sticky;top:0;display:flex;flex-direction:column;padding:24px 18px 18px;background:rgba(8,9,18,.88);backdrop-filter:blur(20px);border-right:1px solid var(--line)}.sidebar-top{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 0}.brand{display:inline-flex;align-items:center;gap:12px;color:white}.brand-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;position:relative;background:linear-gradient(150deg,rgba(124,60,255,.24),rgba(0,212,255,.12));border:1px solid rgba(124,60,255,.35);box-shadow:inset 0 0 22px rgba(124,60,255,.12),0 0 28px rgba(124,60,255,.10)}.brand-mark:before{content:"";position:absolute;inset:-1px;border-radius:13px;padding:1px;background:var(--gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.7}.brand-mark span{font-size:17px;font-weight:950;letter-spacing:-.08em;background:var(--gradient);-webkit-background-clip:text;color:transparent}.brand-copy{display:grid;line-height:1.05}.brand-copy strong{font-size:14px;letter-spacing:.18em}.brand-copy small{font-size:9px;color:var(--muted);letter-spacing:.12em;margin-top:6px}.mobile-nav-toggle{display:none;border:0;background:transparent;width:38px;height:38px;padding:9px}.mobile-nav-toggle span{display:block;height:2px;background:#fff;margin:4px 0;border-radius:4px}
.sidebar-nav{display:flex;flex-direction:column;gap:5px;margin-top:34px}.nav-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:#565c75;margin:22px 13px 8px}.nav-label:first-child{margin-top:0}.sidebar-nav a{min-height:44px;display:flex;align-items:center;gap:11px;padding:10px 12px;color:#9ca1b9;border:1px solid transparent;border-radius:11px;font-size:13px;font-weight:600;position:relative;transition:.18s ease}.sidebar-nav a:hover{color:#fff;background:rgba(255,255,255,.035);border-color:var(--line)}.sidebar-nav a.active{color:white;background:linear-gradient(90deg,rgba(124,60,255,.16),rgba(0,212,255,.055));border-color:rgba(124,60,255,.22)}.sidebar-nav a.active:before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:2px;border-radius:4px;background:var(--gradient);box-shadow:0 0 16px rgba(124,60,255,.55)}.nav-icon{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045);font-size:12px;color:#aeb4cd}.sidebar-nav a.active .nav-icon{color:var(--cyan);background:rgba(124,60,255,.10);border-color:rgba(124,60,255,.22)}
.sidebar-foot{margin-top:auto}.portal-health{display:flex;align-items:center;gap:10px;margin:0 4px 13px;padding:12px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:12px}.portal-health>div{display:grid}.portal-health strong{font-size:11px}.portal-health small{font-size:9px;color:var(--muted);margin-top:3px}.health-dot{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 14px rgba(67,230,162,.7);flex:0 0 auto}.user{border-top:1px solid var(--line);padding:16px 5px 3px;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center}.avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,rgba(124,60,255,.26),rgba(0,212,255,.14));border:1px solid rgba(124,60,255,.24);display:grid;place-items:center;font-weight:850;font-size:12px}.user-copy{display:grid;min-width:0}.user-copy strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-copy small{font-size:9px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout{border:0;background:none;color:#727891;cursor:pointer;padding:6px;font-size:16px}.logout:hover{color:#fff}
.content{width:100%;min-width:0;max-width:1660px;margin:0 auto;padding:34px 44px 18px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:9px;font-weight:850;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}.topbar h1,h1{font-size:30px;line-height:1.15;letter-spacing:-.035em;margin:6px 0 0;font-weight:760}.topbar-actions{display:flex;align-items:center;gap:9px}.live,.date-chip{display:inline-flex;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.025);height:34px;padding:0 11px;border-radius:999px;font-size:10px;color:var(--muted)}.live span{width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:7px;box-shadow:0 0 12px rgba(67,230,162,.7)}.page-body{min-height:calc(100vh - 150px)}.portal-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:18px 2px 0;margin-top:38px;color:#555b73;font-size:9px;letter-spacing:.05em}
h2{font-size:19px;letter-spacing:-.02em;margin:5px 0;font-weight:720}.page-lead{color:var(--muted);font-size:12px;margin:7px 0 0;line-height:1.6}.section{margin-top:28px}.first-section{margin-top:0}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:13px}.section-head a{font-size:11px;color:var(--cyan)}.section-meta{font-size:10px;color:var(--muted)}
.grid{display:grid;gap:14px}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.card,.table-card,.form-card,.chart-card,.stack-card,.admin-panel,.billing-run-form{position:relative;background:linear-gradient(145deg,rgba(17,20,36,.96),rgba(10,12,24,.96));border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 40px rgba(0,0,0,.14)}.card{padding:20px;overflow:hidden}.card:before{content:"";position:absolute;width:130px;height:90px;right:-70px;top:-55px;background:radial-gradient(circle,rgba(124,60,255,.18),transparent 68%)}.card>span,.metric span{display:block;color:var(--muted);font-size:9px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.card>strong{display:block;font-size:25px;letter-spacing:-.03em;margin:9px 0 4px}.card small{color:var(--muted);font-size:10px}.card:hover{border-color:rgba(124,60,255,.22)}
.status-hero{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:22px 24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(120deg,rgba(17,20,36,.95),rgba(10,12,24,.98));overflow:hidden;position:relative}.status-hero:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-160px;top:-170px;background:radial-gradient(circle,rgba(124,60,255,.18),transparent 70%)}.status-hero.healthy{border-color:rgba(67,230,162,.17)}.status-hero.danger{border-color:rgba(255,95,126,.28)}.status-orb{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(67,230,162,.06);border:1px solid rgba(67,230,162,.18)}.status-orb span{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 6px rgba(67,230,162,.07),0 0 22px rgba(67,230,162,.4)}.status-hero.danger .status-orb span{background:var(--danger);box-shadow:0 0 0 6px rgba(255,95,126,.08),0 0 22px rgba(255,95,126,.4)}.status-hero h2{font-size:18px}.status-hero p{color:var(--muted);margin:4px 0 0;font-size:11px}.status-time{text-align:right;position:relative;z-index:1}.status-time span,.status-time small{display:block;color:var(--muted);font-size:9px}.status-time strong{display:block;font-size:18px;margin:4px 0}
.monitor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.monitor-card{display:block;color:inherit;background:linear-gradient(145deg,rgba(16,19,34,.97),rgba(10,12,23,.97));border:1px solid var(--line);border-radius:18px;padding:18px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.monitor-card:hover{transform:translateY(-2px);border-color:rgba(124,60,255,.28);box-shadow:0 18px 50px rgba(0,0,0,.2)}.monitor-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.service-identity{display:grid;grid-template-columns:12px 1fr;column-gap:9px;align-items:start}.service-identity strong{grid-column:2;font-size:13px}.service-identity small{grid-column:2;color:var(--muted);font-size:9px;margin-top:3px}.endpoint{color:#70768f;font-size:10px;margin:17px 0 13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.monitor-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0}.monitor-metrics span{display:block;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.07em}.monitor-metrics b{display:block;font-size:12px;margin-top:5px}.monitor-card-footer{display:flex;justify-content:space-between;color:#6b718a;font-size:9px;padding-top:12px}.status{width:8px;height:8px;border-radius:50%;margin-top:4px}.status.ok{background:var(--green);box-shadow:0 0 11px rgba(67,230,162,.55)}.status.bad{background:var(--danger);box-shadow:0 0 11px rgba(255,95,126,.45)}.status.unknown{background:#6a7088}.status.large{width:10px;height:10px;margin-top:0}.state-label,.pill{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:5px 8px;font-size:8px;font-weight:800;letter-spacing:.05em}.state-label.ok,.pill.paid,.pill.resolved,.pill.matched,.pill.completed{color:var(--green);border-color:rgba(67,230,162,.25);background:rgba(67,230,162,.05)}.state-label.bad,.pill.open,.pill.overdue,.pill.manual_review{color:#ff91a6;border-color:rgba(255,95,126,.28);background:rgba(255,95,126,.055)}.state-label.unknown,.pill{color:#a8adc3}.pill.partial,.pill.partially_paid,.pill.unmatched,.pill.pending{color:var(--amber);border-color:rgba(255,189,91,.25);background:rgba(255,189,91,.045)}.pill.test,.pill.running{color:var(--cyan2);border-color:rgba(0,212,255,.23);background:rgba(0,212,255,.045)}
.table-card{overflow:auto}.table-card table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);font-size:11px}th{font-size:8px;color:#737991;letter-spacing:.10em;text-transform:uppercase;font-weight:800}tbody tr{transition:background .15s}tbody tr:hover{background:rgba(255,255,255,.018)}tbody tr:last-child td{border-bottom:0}.muted-cell,.table-sub{color:var(--muted)}.table-sub{display:block;font-size:8px;margin-top:4px}.empty{border:1px dashed var(--line-strong);padding:28px;border-radius:15px;text-align:center;color:var(--muted);font-size:11px}.pagination{margin-top:14px}
.button,.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;min-height:40px;padding:0 15px;background:var(--gradient);color:white;font-weight:800;font-size:11px;box-shadow:0 8px 24px rgba(124,60,255,.16);cursor:pointer;text-decoration:none;transition:.16s}.button:hover,.primary:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(124,60,255,.24)}.link{border:0;background:none;color:var(--cyan);cursor:pointer;padding:6px 0;font-size:10px}.danger-button{background:transparent;border:0;color:#ff8299;cursor:pointer}.actions{display:flex;align-items:center;gap:10px;margin-top:14px}.invoice-actions{display:flex;align-items:center;gap:10px}
.form-card{padding:24px;max-width:920px}.wide{max-width:none}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:19px 0}.form-grid.compact{margin:0 0 16px}label{display:grid;gap:7px;color:#adb2c9;font-size:10px;font-weight:650}input,select,textarea{width:100%;background:#090b16;border:1px solid var(--line-strong);border-radius:10px;color:#fff;padding:10px 11px;outline:none;transition:border-color .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:rgba(124,60,255,.55);box-shadow:0 0 0 3px rgba(124,60,255,.10)}input::placeholder{color:#51566e}.checks{display:flex;gap:17px;flex-wrap:wrap;margin:10px 0 16px}.check{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:8px}.check input{width:auto}.flash{border:1px solid var(--line);border-radius:13px;padding:12px 15px;margin-bottom:17px;font-size:11px}.flash.success{color:#b8f8da;border-color:rgba(67,230,162,.22);background:rgba(67,230,162,.055)}.flash.danger{color:#ffc2ce;border-color:rgba(255,95,126,.25);background:rgba(255,95,126,.06)}.flash ul{margin:7px 0 0}.error{font-size:10px;color:#ff91a6}
.admin-panel{margin-top:9px;overflow:hidden}.admin-panel summary{cursor:pointer;list-style:none;padding:15px 17px;display:flex;justify-content:space-between;align-items:center;gap:20px}.admin-panel summary::-webkit-details-marker{display:none}.admin-panel summary>div:first-child{display:grid;grid-template-columns:14px 1fr;column-gap:9px}.admin-panel summary strong{grid-column:2;font-size:12px}.admin-panel summary small{grid-column:2;color:var(--muted);font-size:9px;margin-top:3px}.summary-metrics{display:flex;gap:20px;color:#bbc0d4;font-size:10px}.inline-form{border-top:1px solid var(--line);padding:17px}.add-panel{border-style:dashed}.billing-test{margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.service-topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px}.back-link{display:inline-block;color:var(--muted);font-size:10px;margin-bottom:10px}.service-title-line{display:flex;align-items:center;gap:8px;font-size:12px}.service-url{display:inline-block;color:#7d839b;font-size:10px;margin-top:6px}.range-tabs{display:inline-flex;align-items:center;background:#090b16;border:1px solid var(--line);padding:3px;border-radius:10px}.range-tabs a{padding:7px 10px;border-radius:7px;color:var(--muted);font-size:9px;font-weight:800}.range-tabs a.active{color:#fff;background:linear-gradient(135deg,rgba(124,60,255,.25),rgba(0,212,255,.10));box-shadow:inset 0 0 0 1px rgba(124,60,255,.18)}.service-kpis,.resource-kpis,.dashboard-kpis,.billing-kpis,.admin-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.monitoring-layout{display:grid;grid-template-columns:2fr 1fr;gap:14px}.monitoring-layout.resource-charts{grid-template-columns:1fr 1fr}.chart-card{padding:19px;min-width:0}.chart-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.chart-stat{text-align:right}.chart-stat span{display:block;color:var(--muted);font-size:8px;letter-spacing:.09em}.chart-stat strong{display:block;margin-top:4px;font-size:12px}.chart-wrap{height:240px;padding-top:7px}.chart-wrap.compact{height:190px}.chart-wrap svg{display:block;width:100%;height:100%;overflow:visible}.chart-gridline{stroke:rgba(255,255,255,.065);stroke-width:1}.chart-line{fill:none;stroke:var(--cyan);stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(0,212,255,.22))}.chart-line.secondary{stroke:var(--violet2);filter:drop-shadow(0 0 4px rgba(157,107,255,.2))}.chart-line.tertiary{stroke:#e274ff}.chart-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;margin-top:5px}.chart-empty{height:180px;display:grid;place-items:center;color:var(--muted);font-size:10px}.sla-number{font-size:32px;font-weight:850;letter-spacing:-.04em;margin:11px 0}.progress{height:7px;background:#080a14;border:1px solid var(--line);border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:var(--gradient);border-radius:999px}.sla-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:20px}.sla-grid>div:last-child{grid-column:1/-1}.sla-grid span{color:var(--muted);font-size:9px}.sla-grid strong{display:block;margin-top:5px;font-size:13px}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.stack-card{overflow:hidden}.alert-row,.incident-row,.empty-inline{display:flex;align-items:center;gap:11px;padding:14px 15px;border-bottom:1px solid var(--line)}.alert-row:last-child,.incident-row:last-child,.empty-inline:last-child{border-bottom:0}.alert-row>div,.incident-row>div,.empty-inline>div{display:grid}.alert-row small,.incident-row small,.empty-inline small{color:var(--muted);font-size:8px;margin-top:3px}.alert-dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}.alert-dot.critical{background:var(--danger)}.checkmark{width:27px;height:27px;border:1px solid rgba(67,230,162,.25);border-radius:50%;display:grid;place-items:center;color:var(--green);font-weight:900}.incident-row{justify-content:space-between}.monitor-footnote{text-align:center;color:#555b72;font-size:8px;margin:23px 0 5px}
.billing-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:18px}.integration-badges{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.integration-badge{border:1px solid var(--line);border-radius:999px;padding:6px 9px;font-size:8px;font-weight:850;letter-spacing:.06em}.integration-badge.ok{color:var(--green);border-color:rgba(67,230,162,.23);background:rgba(67,230,162,.045)}.integration-badge.bad{color:#ff91a6;border-color:rgba(255,95,126,.25);background:rgba(255,95,126,.05)}.integration-badge.test{color:var(--cyan2);border-color:rgba(0,212,255,.23);background:rgba(0,212,255,.045)}.ops-warning{margin-top:15px;border:1px solid rgba(0,212,255,.18);background:rgba(0,212,255,.045);border-radius:13px;padding:13px 15px;color:#bfefff;font-size:10px}.billing-run-form{display:flex;align-items:flex-end;gap:11px;padding:15px}.billing-run-form label{max-width:240px}.billing-run-form label span{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.billing-columns{align-items:start}.compact-table table{font-size:10px}.compact-table th,.compact-table td{padding:11px}
/* login */
.login-page{min-height:100vh;background:#070812;overflow-x:hidden}.login-ambient{position:fixed;border-radius:50%;filter:blur(110px);opacity:.24;pointer-events:none}.login-ambient-a{width:460px;height:460px;background:var(--violet);left:-220px;top:-160px}.login-ambient-b{width:420px;height:420px;background:var(--cyan);right:-220px;bottom:-220px}.login-shell{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr)}.login-brand-panel{position:relative;padding:46px clamp(42px,7vw,108px);display:flex;flex-direction:column;border-right:1px solid var(--line);background:linear-gradient(130deg,rgba(124,60,255,.055),transparent 50%)}.login-brand{align-self:flex-start}.login-copy{margin:auto 0;max-width:680px}.login-copy h1{font-size:clamp(42px,5vw,72px);line-height:1.02;letter-spacing:-.055em;margin:15px 0 20px;font-weight:780}.login-copy h1 span{background:var(--gradient);-webkit-background-clip:text;color:transparent}.login-copy>p{max-width:560px;color:#9ba0b8;line-height:1.72;font-size:14px}.login-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:42px}.login-feature-grid>div{display:grid;grid-template-columns:10px 1fr;column-gap:10px;padding:15px 16px;border:1px solid var(--line);background:rgba(255,255,255,.018);border-radius:14px}.login-feature-grid strong{grid-column:2;font-size:11px}.login-feature-grid small{grid-column:2;color:var(--muted);font-size:9px;line-height:1.5;margin-top:4px}.feature-dot{width:7px;height:7px;border-radius:50%;background:var(--gradient);margin-top:3px}.login-trust{display:flex;align-items:center;gap:8px;color:#696f87;font-size:9px}.login-form-panel{display:grid;place-items:center;padding:38px;background:rgba(7,8,18,.62);backdrop-filter:blur(20px)}.login-card{width:min(430px,100%);padding:36px;border:1px solid var(--line);background:linear-gradient(150deg,rgba(16,18,33,.96),rgba(9,11,22,.96));border-radius:22px;box-shadow:var(--shadow)}.login-card h2{font-size:28px;margin:9px 0 8px}.login-card>p{color:var(--muted);font-size:11px;margin:0 0 28px}.login-card label{margin:15px 0}.login-card label>span{font-size:9px;text-transform:uppercase;letter-spacing:.08em}.login-card input{height:46px}.login-submit{width:100%;height:46px;margin-top:8px;justify-content:space-between;padding:0 17px}.login-meta{text-align:center;color:#555a70;font-size:8px;margin-top:18px}.login-mobile-brand{display:none}
@media(max-width:1180px){.shell{grid-template-columns:232px minmax(0,1fr)}.content{padding:30px 28px}.monitor-grid{grid-template-columns:1fr}.kpis,.service-kpis,.resource-kpis,.dashboard-kpis,.billing-kpis,.admin-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.monitoring-layout,.monitoring-layout.resource-charts,.two-columns{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr 440px}.login-brand-panel{padding:42px}.login-copy h1{font-size:48px}}
@media(max-width:820px){body.nav-open{overflow:hidden}.shell{display:block}.sidebar{height:auto;position:sticky;z-index:50;padding:12px 15px;top:0;border-right:0;border-bottom:1px solid var(--line)}.sidebar-top{padding:0}.brand-mark{width:35px;height:35px}.brand-copy small{display:none}.mobile-nav-toggle{display:block}.sidebar-nav,.sidebar-foot{display:none}.nav-open .sidebar{height:100vh}.nav-open .sidebar-nav{display:flex;margin-top:20px}.nav-open .sidebar-foot{display:block;margin-top:auto}.content{padding:23px 17px}.topbar{align-items:flex-start}.date-chip{display:none}.portal-footer{flex-direction:column}.login-shell{display:block}.login-brand-panel{display:none}.login-form-panel{min-height:100vh;padding:20px}.login-mobile-brand{display:flex;align-items:center;gap:10px;margin-bottom:34px}.login-mobile-brand strong{letter-spacing:.16em;font-size:13px}}
@media(max-width:600px){.content{padding:20px 13px}.topbar h1{font-size:25px}.live{height:30px;font-size:9px}.kpis,.service-kpis,.resource-kpis,.dashboard-kpis,.billing-kpis,.admin-kpis,.form-grid{grid-template-columns:1fr}.status-hero{grid-template-columns:auto 1fr;padding:18px}.status-time{display:none}.monitor-metrics{grid-template-columns:1fr 1fr}.service-topbar,.billing-head{align-items:flex-start;flex-direction:column}.integration-badges{justify-content:flex-start}.billing-run-form{align-items:stretch;flex-direction:column}.billing-run-form label{max-width:none}.summary-metrics{display:none}.chart-card{padding:15px}.chart-wrap{height:195px}.login-card{padding:27px 22px;border-radius:18px}.portal-footer{margin-top:28px}.topbar-actions{gap:5px}.monitor-card{padding:15px}.table-card{border-radius:14px}}

/* =========================================================
   WEBNEST CLIENT PORTAL — V6.1 POLISH
   ========================================================= */

:root {
    --wn-bg: #070812;
    --wn-panel: #0d0f1b;
    --wn-panel-2: #111426;
    --wn-line: rgba(255,255,255,.085);
    --wn-line-soft: rgba(255,255,255,.055);

    --wn-text: #f4f6ff;
    --wn-text-2: #b8bdd0;
    --wn-text-3: #8f96ad;

    --wn-purple: #7c3cff;
    --wn-cyan: #00d4ff;

    --wn-green: #43e6a2;
    --wn-orange: #ffbd5b;
    --wn-red: #ff5f7e;

    --wn-radius: 18px;
    --wn-radius-sm: 12px;
}

/* ---------- GLOBAL OVERFLOW FIX ---------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--wn-bg);
}

main,
main > *,
.content,
.content-wrapper,
.page-content,
.dashboard-content {
    min-width: 0;
    max-width: 100%;
}

/* ---------- MAIN CONTENT ---------- */

.wn-main,
main {
    min-width: 0;
}

.wn-page,
.wn-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* ---------- CARDS ---------- */

.wn-card,
.card,
.panel {
    border-radius: var(--wn-radius);
    border: 1px solid var(--wn-line);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        ),
        var(--wn-panel);

    transition:
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.wn-card:hover,
.card:hover {
    border-color: rgba(124,60,255,.24);

    box-shadow:
        0 18px 45px rgba(0,0,0,.22),
        0 0 0 1px rgba(0,212,255,.018);

    transform: translateY(-1px);
}

/* ---------- TEXT CONTRAST ---------- */

.text-muted,
.muted,
.wn-muted,
small {
    color: var(--wn-text-3);
}

.wn-card p,
.card p,
td {
    color: var(--wn-text-2);
}

th,
.wn-label,
.eyebrow {
    color: #9da4bb;
}

/* ---------- SIDEBAR ---------- */

.wn-sidebar {
    background: rgba(7,8,18,.97);
    border-right: 1px solid var(--wn-line-soft);
}

.wn-sidebar a {
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.wn-sidebar a:hover {
    background: rgba(255,255,255,.035);
    color: #fff;
}

.wn-sidebar a.active,
.wn-sidebar .active > a {
    background:
        linear-gradient(
            90deg,
            rgba(124,60,255,.12),
            rgba(0,212,255,.035)
        );

    border-color: rgba(124,60,255,.33);
    color: #fff;
}

/* ---------- SUMMARY METRICS ---------- */

.wn-metrics-grid,
.metrics-grid,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.wn-metric,
.metric-card,
.stat-card {
    min-width: 0;
}

/* ---------- SERVICES ---------- */

.wn-services-grid,
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

.wn-service-card,
.service-card {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.wn-service-card .service-heading,
.service-card .service-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.wn-service-card .service-meta,
.service-card .service-meta {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--wn-text-3);
}

/* ---------- STATUS BADGES ---------- */

.badge,
.wn-badge {
    border-radius: 999px;
    letter-spacing: .04em;
}

.badge-success,
.wn-status-operational {
    color: var(--wn-green);
    background: rgba(67,230,162,.07);
    border-color: rgba(67,230,162,.28);
}

.badge-warning,
.wn-status-warning {
    color: var(--wn-orange);
    background: rgba(255,189,91,.07);
    border-color: rgba(255,189,91,.28);
}

.badge-danger,
.wn-status-down {
    color: var(--wn-red);
    background: rgba(255,95,126,.07);
    border-color: rgba(255,95,126,.28);
}

/* ---------- BILLING LAYOUT ---------- */

.wn-billing-grid,
.billing-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(320px, .95fr);

    gap: 18px;
    width: 100%;
    max-width: 100%;
}

.wn-billing-grid > *,
.billing-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* ---------- TABLES ---------- */

.wn-table-wrapper,
.table-wrapper,
.table-responsive {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    border-radius: var(--wn-radius);
}

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

td,
th {
    min-width: 0;
}

.wn-table-wrapper table,
.table-wrapper table {
    table-layout: auto;
}

.wn-table-wrapper {
    contain: inline-size;
}

/* ---------- BILLING STATUS BAR ---------- */

.wn-integration-badges,
.integration-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* ---------- PAGE HEADER ---------- */

.wn-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.wn-page-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* ---------- EMPTY STATES ---------- */

.wn-empty,
.empty-state {
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    color: var(--wn-text-3);

    border: 1px dashed rgba(255,255,255,.11);
    border-radius: 14px;

    background: rgba(255,255,255,.008);
}

/* ---------- BUTTONS ---------- */

.btn-primary,
.wn-btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--wn-purple),
            var(--wn-cyan)
        );

    border: 0;

    box-shadow:
        0 7px 24px rgba(124,60,255,.16);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.btn-primary:hover,
.wn-btn-primary:hover {
    transform: translateY(-1px);

    box-shadow:
        0 10px 28px rgba(124,60,255,.24);

    filter: brightness(1.05);
}

/* ---------- SUBTLE GLOW ---------- */

.wn-page::before {
    content: "";

    position: fixed;
    right: -280px;
    top: -260px;

    width: 720px;
    height: 720px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(124,60,255,.08),
            transparent 65%
        );

    filter: blur(3px);

    z-index: -1;
}

/* ---------- WIDE DESKTOP ---------- */

@media (min-width: 1500px) {

    .wn-services-grid,
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* ---------- LAPTOP ---------- */

@media (max-width: 1250px) {

    .wn-metrics-grid,
    .metrics-grid,
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-billing-grid,
    .billing-grid {
        grid-template-columns: 1fr;
    }

}

/* ---------- TABLET ---------- */

@media (max-width: 900px) {

    .wn-services-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    .wn-page-header {
        flex-direction: column;
        gap: 14px;
    }

    .wn-page-header-actions {
        width: 100%;
    }

    .wn-integration-badges,
    .integration-badges {
        justify-content: flex-start;
    }

}

/* ---------- MOBILE ---------- */

@media (max-width: 680px) {

    .wn-metrics-grid,
    .metrics-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .wn-card,
    .card,
    .panel {
        border-radius: 15px;
    }

    .wn-service-card .service-heading,
    .service-card .service-heading {
        flex-direction: column;
    }

    .wn-table-wrapper,
    .table-wrapper,
    .table-responsive {
        border-radius: 14px;
    }

}


/* =========================================================
   WEBNEST CLIENT PORTAL — V6.2 DASHBOARD POLISH
   ========================================================= */

/* services section takes full available width */
.wn-services-grid,
.services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

/* when there is only one service, let it use full width */
.wn-services-grid > :only-child,
.services-grid > :only-child {
    grid-column: 1 / -1;
    max-width: none;
}

/* service card header spacing */
.wn-service-card .service-title-wrap,
.service-card .service-title-wrap {
    min-width: 0;
}

.wn-service-card .service-heading,
.service-card .service-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
}

.wn-service-card h3,
.service-card h3 {
    margin: 0;
    line-height: 1.2;
}

/* metadata should never stick to service name */
.wn-service-card .service-meta,
.service-card .service-meta {
    display: block;
    margin-top: 6px;
    color: var(--wn-text-3);
    font-size: 12px;
    line-height: 1.4;
}

/* URL separation */
.wn-service-card .service-url,
.service-card .service-url {
    margin-top: 20px;
}

/* larger single service card metrics spacing */
.wn-services-grid > :only-child .service-metrics,
.services-grid > :only-child .service-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* give the dashboard a slightly more balanced max width */
.wn-content,
.wn-page {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

/* billing should remain full width inside the content area */
.wn-billing-grid,
.billing-grid {
    width: 100%;
}

/* section spacing */
.wn-section,
section {
    scroll-margin-top: 24px;
}

@media (max-width: 1000px) {

    .wn-services-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    .wn-services-grid > :only-child .service-metrics,
    .services-grid > :only-child .service-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 680px) {

    .wn-services-grid > :only-child .service-metrics,
    .services-grid > :only-child .service-metrics {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   WEBNEST CLIENT PORTAL — V6.3
   SYSTEM STATUS SPACING + BILLING OVERFLOW FIX
   ========================================================= */

/* ---------------------------------------------------------
   DASHBOARD — system status spacing
   --------------------------------------------------------- */

.wn-system-status,
.system-status,
.system-status-card {
    margin-bottom: 18px !important;
}

/* if status block is followed directly by metrics */
.wn-system-status + .wn-metrics-grid,
.system-status + .metrics-grid,
.system-status-card + .stats-grid,
.system-status-card + .wn-metrics-grid {
    margin-top: 18px !important;
}

/* prevent visual "touching" even if wrapper structure differs */
.wn-dashboard-summary,
.dashboard-summary {
    row-gap: 18px;
}


/* ---------------------------------------------------------
   BILLING — hard overflow containment
   --------------------------------------------------------- */

.wn-billing-grid,
.billing-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(0, .95fr);

    gap: 18px;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow: hidden;
}

/* every direct billing child must be shrinkable */
.wn-billing-grid > *,
.billing-grid > * {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


/* ---------------------------------------------------------
   FIO panel containment
   --------------------------------------------------------- */

.wn-fio-card,
.fio-card,
.bank-card,
.billing-bank-card {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}


/* ---------------------------------------------------------
   TABLE WRAPPERS
   --------------------------------------------------------- */

.wn-table-wrapper,
.table-wrapper,
.table-responsive {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    overflow-x: auto !important;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   TABLES — never stretch page
   --------------------------------------------------------- */

.wn-table-wrapper table,
.table-wrapper table,
.table-responsive table {
    width: 100%;
    max-width: 100%;

    table-layout: fixed;

    border-collapse: collapse;
}

.wn-table-wrapper th,
.wn-table-wrapper td,
.table-wrapper th,
.table-wrapper td,
.table-responsive th,
.table-responsive td {
    min-width: 0;
    max-width: 100%;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* FIO columns */

.wn-fio-card table th:nth-child(1),
.wn-fio-card table td:nth-child(1),
.fio-card table th:nth-child(1),
.fio-card table td:nth-child(1) {
    width: 32%;
}

.wn-fio-card table th:nth-child(2),
.wn-fio-card table td:nth-child(2),
.fio-card table th:nth-child(2),
.fio-card table td:nth-child(2) {
    width: 38%;
}

.wn-fio-card table th:nth-child(3),
.wn-fio-card table td:nth-child(3),
.fio-card table th:nth-child(3),
.fio-card table td:nth-child(3) {
    width: 30%;
}


/* ---------------------------------------------------------
   Empty states inside narrow panels
   --------------------------------------------------------- */

.wn-billing-grid .wn-empty,
.billing-grid .empty-state,
.wn-billing-grid .empty-state {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    box-sizing: border-box;

    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   headings/actions may not widen grid
   --------------------------------------------------------- */

.wn-billing-grid .wn-section-header,
.billing-grid .section-header {
    min-width: 0;
}

.wn-billing-grid .wn-section-header > *,
.billing-grid .section-header > * {
    min-width: 0;
}


/* ---------------------------------------------------------
   laptop/tablet
   --------------------------------------------------------- */

@media (max-width: 1250px) {

    .wn-billing-grid,
    .billing-grid {
        grid-template-columns: 1fr;
    }

}


/* ---------------------------------------------------------
   mobile
   --------------------------------------------------------- */

@media (max-width: 680px) {

    .wn-system-status,
    .system-status,
    .system-status-card {
        margin-bottom: 14px !important;
    }

    .wn-table-wrapper th,
    .wn-table-wrapper td,
    .table-wrapper th,
    .table-wrapper td,
    .table-responsive th,
    .table-responsive td {
        white-space: nowrap;
    }

}


/* WebNest layout V6.4 — selectors verified against the rendered portal. */
.billing-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    max-width: 100%;
}

.billing-columns > *,
.billing-columns .section-head > *,
.monitor-grid > *,
.monitor-card-head > *,
.service-identity > * {
    min-width: 0;
}

.billing-columns .section-head {
    flex-wrap: wrap;
}

.table-card {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}

/* Compact billing tables can fit their panels; wider content remains scrollable. */
.billing-columns .table-card table {
    min-width: 0;
    table-layout: auto;
}

.billing-columns th,
.billing-columns td,
.billing-columns .empty {
    overflow-wrap: anywhere;
}

.billing-columns td:nth-child(3) {
    white-space: nowrap;
}

#services .monitor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

#services .monitor-grid > :only-child {
    grid-column: 1 / -1;
}

.monitor-card .service-identity {
    grid-template-columns: 12px minmax(0, 1fr);
}

.monitor-card .service-identity strong,
.monitor-card .service-identity small {
    display: block;
    overflow-wrap: anywhere;
}

.monitor-card .service-identity small {
    margin-top: 6px;
}

.monitor-card-head {
    flex-wrap: wrap;
}

.status-hero + .dashboard-kpis {
    margin-top: 18px;
}

@media (max-width: 1180px) {
    .billing-columns,
    #services .monitor-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mail hosting uses the existing portal cards and spacing. */
.mail-address{display:flex;align-items:center;gap:12px;min-width:0}.mail-address input{min-width:0;flex:1}.mail-address span{overflow-wrap:anywhere}.mail-create{margin-top:16px}.mail-create button{margin-top:8px}.mail-table{max-width:100%;overflow-x:auto}.mail-table table{min-width:0;width:100%}.mail-table td{overflow-wrap:anywhere}.mail-dns{display:block;white-space:normal;overflow-wrap:anywhere;max-width:620px}.mail-credentials{border-color:#5e8cff;margin-bottom:24px}.mail-credentials input{font-family:monospace}.mail-create .muted{margin:12px 0}
@media(max-width:640px){.mail-address{flex-wrap:wrap}.mail-address input{flex-basis:100%}.mail-table table{min-width:520px}.mail-credentials .form-grid{grid-template-columns:1fr}}

.mail-intro > a.primary { color:#fff; white-space:nowrap; height:auto; min-height:42px; }
@media(max-width:640px) { .section-head.mail-intro { display:grid; gap:16px; } .mail-intro > a.primary { justify-self:start; } }