:root{--bg:#070b16;--bg2:#0b1224;--card:#111a31;--card2:#151f3a;--txt:#edf3ff;--muted:#9cabcb;--brand:#6ee7ff;--brand2:#7c5cff;--ok:#42f59b;--line:rgba(255,255,255,.1);--shadow:0 25px 80px rgba(0,0,0,.35)}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(124,92,255,.28),transparent 32%),radial-gradient(circle at top right,rgba(110,231,255,.18),transparent 30%),var(--bg);color:var(--txt)}a{color:inherit;text-decoration:none}.container{width:min(1160px,calc(100% - 32px));margin:auto}.nav{position:sticky;top:0;z-index:20;background:rgba(7,11,22,.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav-inner{height:74px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;gap:10px;align-items:center;font-weight:900;font-size:22px}.logo-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 0 32px rgba(110,231,255,.25)}.links{display:flex;gap:22px;align-items:center}.links a{color:var(--muted);font-weight:700}.links a:hover,.links .active{color:var(--txt)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:linear-gradient(135deg,var(--brand),var(--brand2));color:#04101d;font-weight:900;border-radius:14px;padding:13px 18px;box-shadow:0 12px 32px rgba(124,92,255,.25)}.btn.secondary{background:rgba(255,255,255,.06);color:var(--txt);box-shadow:none}.menu{display:none;background:none;border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:10px 12px}.hero{padding:86px 0 58px}.grid{display:grid;gap:24px}.hero-grid{grid-template-columns:1.1fr .9fr;align-items:center}.badge{display:inline-flex;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--brand);background:rgba(110,231,255,.08);font-weight:800}.hero h1,.page-hero h1{font-size:clamp(42px,6vw,76px);line-height:.94;margin:18px 0}.gradient{background:linear-gradient(135deg,var(--brand),#fff,var(--brand2));-webkit-background-clip:text;color:transparent}.lead{font-size:20px;color:var(--muted);line-height:1.65}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.panel{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:var(--shadow)}.status-card{min-height:360px}.metric{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:16px 0;color:var(--muted)}.metric strong{color:var(--txt)}.server{margin-top:18px;padding:18px;border-radius:20px;background:rgba(0,0,0,.22);border:1px solid var(--line)}.bar{height:9px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--ok),var(--brand));border-radius:99px}.section{padding:62px 0}.section-title{font-size:42px;margin:0 0 12px}.muted{color:var(--muted);line-height:1.7}.cards{grid-template-columns:repeat(3,1fr)}.card{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:24px;padding:24px}.card h3{margin:0 0 10px;font-size:22px}.icon{font-size:30px;margin-bottom:12px}.price{font-size:42px;font-weight:950;margin:14px 0}.price span{font-size:14px;color:var(--muted)}ul.clean{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px;color:var(--muted)}ul.clean li:before{content:'✓';color:var(--ok);font-weight:900;margin-right:9px}.popular{position:relative;border-color:rgba(110,231,255,.45);box-shadow:0 0 55px rgba(110,231,255,.08)}.tag{position:absolute;right:18px;top:18px;background:rgba(110,231,255,.12);border:1px solid rgba(110,231,255,.35);color:var(--brand);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900}.page-hero{padding:72px 0 36px;border-bottom:1px solid var(--line)}.split{grid-template-columns:1fr 1fr;align-items:start}.table{overflow:hidden;border-radius:22px;border:1px solid var(--line)}.row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.035)}.row.head{font-weight:900;background:rgba(110,231,255,.08)}.faq{display:grid;gap:14px}.faq details{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:18px;padding:18px}.faq summary{cursor:pointer;font-weight:900}.form{display:grid;gap:14px}.input{width:100%;padding:15px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.055);color:var(--txt)}textarea.input{min-height:140px}.footer{margin-top:60px;border-top:1px solid var(--line);padding:34px 0;color:var(--muted)}@media(max-width:860px){.menu{display:block}.links{display:none;position:absolute;top:74px;left:0;right:0;background:#070b16;border-bottom:1px solid var(--line);padding:18px 16px;flex-direction:column;align-items:flex-start}.links.open{display:flex}.hero-grid,.cards,.split{grid-template-columns:1fr}.hero{padding-top:52px}.row{grid-template-columns:1fr}.hide-mobile{display:none}}
.status-overview{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.summary-pill{display:flex;align-items:center}.live-status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:24px;padding:22px}.service-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.service-title{font-weight:950;font-size:20px}.service-meta{color:var(--muted);font-size:14px;margin-top:6px}.live-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;font-weight:900;font-size:13px;border:1px solid var(--line);white-space:nowrap}.live-badge span{width:9px;height:9px;border-radius:99px;background:currentColor;box-shadow:0 0 18px currentColor}.live-badge.online{color:var(--ok);background:rgba(66,245,155,.08);border-color:rgba(66,245,155,.25)}.live-badge.slow{color:#ffd166;background:rgba(255,209,102,.09);border-color:rgba(255,209,102,.28)}.live-badge.offline{color:#ff5c7a;background:rgba(255,92,122,.09);border-color:rgba(255,92,122,.28)}.live-badge.checking{color:var(--brand);background:rgba(110,231,255,.08);border-color:rgba(110,231,255,.25)}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.service-grid div{background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:16px;padding:14px}.service-grid small{display:block;color:var(--muted);margin-bottom:5px}.service-grid strong{font-size:18px}.mini-link{display:inline-flex;color:var(--brand);font-weight:900;margin-top:2px}@media(max-width:860px){.live-status-grid{grid-template-columns:1fr}.status-overview{align-items:flex-start;flex-direction:column}.service-top{flex-direction:column}.service-grid{grid-template-columns:1fr}}

/* Account dropdown */
.user-menu-wrap{position:relative;display:inline-flex;align-items:center}.user-menu-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--txt);border-radius:14px;padding:10px 12px;font-weight:900;cursor:pointer}.user-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#04101d;font-size:12px;font-weight:950}.user-dropdown{position:absolute;right:0;top:calc(100% + 12px);min-width:220px;background:#111a31;border:1px solid var(--line);border-radius:18px;padding:9px;box-shadow:var(--shadow);display:none;z-index:100}.user-dropdown.open{display:block}.user-dropdown-header{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}.user-dropdown-name{font-weight:950;color:var(--txt)}.user-dropdown-email{font-size:12px;color:var(--muted);word-break:break-all;margin-top:3px}.user-dropdown a{display:block!important;padding:10px 12px!important;border-radius:12px;color:var(--muted)!important;font-weight:800}.user-dropdown a:hover{background:rgba(255,255,255,.07);color:var(--txt)!important}



/* Clientarea same as main site */
.sidebar-layout{display:grid;grid-template-columns:270px 1fr;gap:24px;align-items:start}
.sidebar{display:grid;gap:8px}
.sidebar a{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;border-radius:14px;color:var(--muted,#b8aecf);font-weight:800}
.sidebar a:hover,.sidebar a.active{background:rgba(255,255,255,.07);color:#fff}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:13px;border-bottom:1px solid rgba(255,255,255,.10);text-align:left;vertical-align:middle}
.table th{color:#fff;background:rgba(255,255,255,.04);font-size:13px}
.form{display:grid;gap:14px}
.input, select.input, textarea.input{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#0d0a1a;color:#fff;padding:13px 14px}
textarea.input{min-height:125px}
.alert{padding:14px 16px;border-radius:14px;background:rgba(255,45,109,.14);border:1px solid rgba(255,45,109,.25);margin:14px 0}
.alert.success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25)}
.pill.success{background:rgba(34,197,94,.15);color:#86efac}
.pill.warning{background:rgba(245,158,11,.15);color:#fde68a}
.pill.danger{background:rgba(239,68,68,.15);color:#fecaca}
.client-hero{margin-bottom:24px}
.ticket-message{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.04);overflow:hidden;margin-bottom:14px}
.ticket-message-head{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.10)}
.ticket-message-body{padding:15px;line-height:1.65}
@media(max-width:900px){.sidebar-layout{grid-template-columns:1fr}}



/* Admin panel fix */
.admin-kpi{min-height:130px}
.admin-actions{display:flex;gap:12px;flex-wrap:wrap}
.admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.admin-form-grid .full{grid-column:1/-1}
@media(max-width:800px){.admin-form-grid{grid-template-columns:1fr}}



/* WHMCS structure, main-site visual design */
.clientarea-wrap{padding:34px 0 70px}
.clientarea-layout{display:grid;grid-template-columns:290px 1fr;gap:24px;align-items:start}
.clientarea-sidebar{position:sticky;top:86px;display:grid;gap:16px}
.clientarea-nav-card{padding:14px}
.clientarea-profile{display:flex;gap:12px;align-items:center;padding:8px 8px 16px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:8px}
.clientarea-profile .meta{min-width:0}
.clientarea-profile strong{display:block;color:#fff}
.clientarea-profile span{display:block;color:var(--muted,#b8aecf);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clientarea-menu{display:grid;gap:6px}
.clientarea-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-radius:14px;color:var(--muted,#b8aecf);font-weight:850}
.clientarea-menu a:hover,.clientarea-menu a.active{background:rgba(255,255,255,.075);color:#fff}
.clientarea-menu small{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:rgba(110,231,255,.12);color:#6ee7ff;font-size:12px}
.clientarea-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px}
.clientarea-top h1{margin:8px 0 8px}
.clientarea-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.clientarea-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
.client-kpi{padding:18px;min-height:130px}
.client-kpi .icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(110,231,255,.20),rgba(124,92,255,.20));border:1px solid rgba(255,255,255,.12);margin-bottom:14px}
.client-kpi .num{font-size:34px;font-weight:950;line-height:1;color:#fff}
.client-kpi .label{color:var(--muted,#b8aecf);font-size:13px;font-weight:800;margin-top:4px}
.clientarea-panel{margin-bottom:24px}
.clientarea-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.clientarea-panel-head h2{margin:0}
.clientarea-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.clientarea-tabs a{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);color:var(--muted,#b8aecf);font-weight:850;font-size:13px}
.clientarea-tabs a.active,.clientarea-tabs a:hover{color:#06111f;background:linear-gradient(135deg,#6ee7ff,#7c5cff)}
.client-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}
.client-table th{padding:13px 14px;text-align:left;color:#dbeafe;background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.10);font-size:13px}
.client-table td{padding:14px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;vertical-align:middle}
.client-table tr:hover td{background:rgba(255,255,255,.025)}
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:950}
.status-badge.success{background:rgba(34,197,94,.14);color:#86efac}
.status-badge.warning{background:rgba(245,158,11,.15);color:#fde68a}
.status-badge.danger{background:rgba(239,68,68,.16);color:#fecaca}
.status-badge.neutral{background:rgba(255,255,255,.08);color:#d1d5db}
.client-form{display:grid;gap:14px}
.client-field{display:grid;gap:7px}
.client-field label{font-weight:850;color:#fff}
.client-input{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#0d0a1a;color:#fff;padding:13px 14px;outline:none}
.client-input:focus{border-color:rgba(110,231,255,.55);box-shadow:0 0 0 3px rgba(110,231,255,.10)}
textarea.client-input{min-height:130px;resize:vertical}
.ticket-thread{display:grid;gap:14px}
.ticket-bubble{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.045);overflow:hidden}
.ticket-bubble.admin{border-left:4px solid #6ee7ff}
.ticket-bubble.customer{border-left:4px solid #22c55e}
.ticket-bubble-head{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.10)}
.ticket-bubble-body{padding:15px;line-height:1.65;color:#fff}
.client-empty{text-align:center;padding:36px 14px;color:var(--muted,#b8aecf)}
.client-split{display:grid;grid-template-columns:1.15fr .85fr;gap:24px}
@media(max-width:1050px){.clientarea-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.client-split{grid-template-columns:1fr}}
@media(max-width:850px){.clientarea-layout{grid-template-columns:1fr}.clientarea-sidebar{position:static}.clientarea-top{flex-direction:column}.clientarea-actions{justify-content:flex-start}.clientarea-kpis{grid-template-columns:1fr}.client-table{font-size:13px}}



/* Game order flow */
.order-steps{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 28px}
.order-step{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);color:var(--muted,#b8aecf);font-weight:850}
.order-step.active{background:linear-gradient(135deg,#6ee7ff,#7c5cff);color:#07111f;border-color:transparent}
.game-card{text-align:left;min-height:220px;display:flex;flex-direction:column;justify-content:space-between}
.game-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(110,231,255,.20),rgba(124,92,255,.20));border:1px solid rgba(255,255,255,.12);font-size:26px;margin-bottom:14px}
.package-card{display:flex;flex-direction:column;gap:12px;min-height:300px}
.package-specs{display:grid;gap:8px;color:var(--muted,#b8aecf);margin:10px 0}
.package-specs span{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:7px}



/* Pricing game selector like old popular solutions */
.popular-solutions{padding-top:70px;padding-bottom:70px}
.popular-solutions h1,
.popular-solutions h2{font-size:clamp(34px,4vw,50px);line-height:1.05;margin:0 0 18px;font-weight:950;letter-spacing:-1px}
.popular-solutions .intro{color:#a9c4ff;font-size:18px;margin:0 0 24px;max-width:720px}
.solution-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px}
.solution-card{display:block;min-height:215px;padding:30px 28px;border-radius:24px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);box-shadow:0 18px 55px rgba(0,0,0,.18);transition:transform .18s ease,border-color .18s ease,background .18s ease}
.solution-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.065);border-color:rgba(110,231,255,.28)}
.solution-icon{font-size:34px;line-height:1;margin-bottom:26px;display:block}
.solution-card h3{font-size:24px;margin:0 0 16px;font-weight:950;color:#fff;letter-spacing:-.3px}
.solution-card p{font-size:17px;line-height:1.65;color:#a9c4ff;margin:0}
.solution-empty{grid-column:1/-1}
@media(max-width:900px){.solution-grid{grid-template-columns:1fr}.popular-solutions{padding-top:42px}}



/* Package select redesign */
.solution-card .btn{margin-top:24px;width:100%}
.package-select-section{padding-top:56px;padding-bottom:76px}
.package-select-header{margin-bottom:28px}
.package-select-header h1{font-size:clamp(42px,7vw,78px);line-height:.98;margin:0 0 18px;font-weight:950;letter-spacing:-2px}
.package-select-header .lead{max-width:760px}
.package-grid-clean{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.package-clean-card{padding:26px;border-radius:24px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);box-shadow:0 18px 55px rgba(0,0,0,.18);display:flex;flex-direction:column;min-height:420px;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.package-clean-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.065);border-color:rgba(110,231,255,.28)}
.package-clean-top{flex:1}
.package-clean-card .package-game{color:#fff;font-size:15px;font-weight:850;margin-bottom:18px}
.package-clean-card h2{font-size:26px;margin:0 0 18px;font-weight:950;letter-spacing:-.5px}
.package-clean-card .desc{font-size:16px;line-height:1.65;color:#a9c4ff;margin:0 0 22px}
.package-clean-card .price{font-size:42px;margin:8px 0 18px}
.package-clean-card .price small{font-size:16px;color:#a9c4ff}
.package-clean-specs{display:grid;gap:0;margin:18px 0 24px}
.package-clean-specs div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.09);color:#a9c4ff;font-size:15px}
.package-clean-specs strong{color:#a9c4ff}
.package-clean-specs span{color:#a9c4ff}
.package-clean-card .btn{width:100%;margin-top:auto}
.package-back{margin-bottom:24px}
@media(max-width:1050px){.package-grid-clean{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.package-grid-clean{grid-template-columns:1fr}.package-select-section{padding-top:36px}.package-select-header h1{font-size:42px}}

.menu a.active{color:#fff;background:rgba(255,255,255,.07);}



/* Unified navbar */
.nav.site-navbar{
  background:rgba(7,10,22,.92);
  border-bottom:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(16px);
  position:sticky;
  top:0;
  z-index:1000;
}
.nav.site-navbar .nav-inner{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav.site-navbar .brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:24px;
  font-weight:950;
  color:#fff;
}
.nav.site-navbar .logo{
  width:40px;
  height:40px;
  border-radius:12px;
  display:inline-block;
  background:linear-gradient(135deg,#6ee7ff,#7c5cff);
  box-shadow:0 0 32px rgba(110,231,255,.22);
}
.nav.site-navbar .menu{
  display:flex;
  align-items:center;
  gap:18px;
}
.nav.site-navbar .menu > a{
  color:#aeb8d4;
  font-weight:850;
  padding:10px 0;
}
.nav.site-navbar .menu > a:hover,
.nav.site-navbar .menu > a.active{
  color:#fff;
  background:transparent;
}
.nav.site-navbar .user-menu-btn{
  min-height:48px;
  padding:8px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.06);
}
.nav.site-navbar .user-avatar{
  width:30px;
  height:30px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background:linear-gradient(135deg,#6ee7ff,#7c5cff);
  color:#06111f;
  font-weight:950;
}
@media(max-width:850px){
  .nav.site-navbar .nav-inner{align-items:flex-start;flex-direction:column;padding:14px 0}
  .nav.site-navbar .menu{flex-wrap:wrap;gap:12px}
}



/* Login/register unified navbar final fix */
.nav.site-navbar{display:block!important}
.card .form{display:grid;gap:14px}
.alert.success{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.25)}



/* Invoice modal + Pterodactyl customer panel */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);display:none;align-items:center;justify-content:center;padding:22px;z-index:3000}
.modal-backdrop.open{display:flex}
.modal-card{width:min(760px,100%);max-height:92vh;overflow:auto;background:#151925;border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:26px;box-shadow:0 24px 80px rgba(0,0,0,.45)}
.modal-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}
.modal-close{border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:10px 13px;cursor:pointer;font-weight:900}
.server-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.server-tabs a{padding:10px 13px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#a9c4ff;font-weight:850}
.server-tabs a.active,.server-tabs a:hover{background:linear-gradient(135deg,#6ee7ff,#7c5cff);color:#07111f;border-color:transparent}
.console-box{background:#05070e;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px;min-height:260px;max-height:420px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:13px;color:#c7f9cc;white-space:pre-wrap}
.file-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.file-row strong{color:#fff}
.resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.resource-card{padding:16px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10)}
.resource-card .num{font-size:24px;font-weight:950;color:#fff}
.resource-card .label{font-size:13px;color:#a9c4ff;font-weight:800}
@media(max-width:900px){.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.resource-grid{grid-template-columns:1fr}}



/* Pterodactyl customer panel v2 */
.ptero-shell{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
.ptero-sidebar{position:sticky;top:88px;padding:18px}
.ptero-server-card{display:flex;gap:13px;align-items:center;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.10)}
.ptero-server-icon{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#6ee7ff,#7c5cff);display:grid;place-items:center;color:#06111f;font-weight:950}
.ptero-server-name{font-size:17px;font-weight:950;color:#fff;line-height:1.2}
.ptero-server-meta{font-size:13px;color:#a9c4ff;margin-top:3px;word-break:break-all}
.ptero-nav{display:grid;gap:7px}
.ptero-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-radius:14px;color:#a9b5d2;font-weight:850}
.ptero-nav a:hover,.ptero-nav a.active{background:rgba(255,255,255,.075);color:#fff}
.ptero-main-card{padding:26px;border-radius:26px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 65px rgba(0,0,0,.20)}
.ptero-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
.ptero-top h1{font-size:clamp(30px,4vw,44px);line-height:1.05;margin:8px 0 8px}
.ptero-actions{display:flex;gap:10px;flex-wrap:wrap}
.ptero-state{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(34,197,94,.14);color:#86efac;font-weight:950;border:1px solid rgba(34,197,94,.25)}
.ptero-state.offline{background:rgba(239,68,68,.14);color:#fecaca;border-color:rgba(239,68,68,.24)}
.ptero-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 24px}
.ptero-stat{padding:18px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.ptero-stat .num{font-size:26px;font-weight:950;color:#fff;margin-top:8px}
.ptero-stat .label{font-size:13px;color:#a9c4ff;font-weight:850}
.ptero-progress{height:8px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden;margin-top:12px}
.ptero-progress span{display:block;height:100%;background:linear-gradient(135deg,#6ee7ff,#7c5cff);border-radius:999px}
.ptero-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}
.ptero-table th{padding:13px 14px;text-align:left;color:#dbeafe;background:rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.10);font-size:13px}
.ptero-table td{padding:14px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;vertical-align:middle}
.ptero-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ptero-console{background:#05070e;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:18px;min-height:360px;max-height:520px;overflow:auto;font-family:ui-monospace,Consolas,monospace;font-size:13px;color:#bff7c8;white-space:pre-wrap}
.ptero-file-list{display:grid;gap:8px}
.ptero-file{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.ptero-file strong{color:#fff}
.ptero-file small{color:#a9c4ff}
.ptero-file-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.ptero-editor{min-height:430px;font-family:ui-monospace,Consolas,monospace}
.ptero-muted{color:#a9c4ff}
.ptero-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
@media(max-width:1050px){.ptero-shell{grid-template-columns:1fr}.ptero-sidebar{position:static}.ptero-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ptero-grid-2{grid-template-columns:1fr}}
@media(max-width:600px){.ptero-stat-grid{grid-template-columns:1fr}.ptero-actions .btn{width:100%}}



/* Repair polish: stable clientarea + server panel */
.repair-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.repair-page-title{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:22px}
.repair-page-title h1{margin:8px 0 8px}
.repair-server-grid{display:grid;gap:14px}
.repair-server-card{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10)}
.repair-server-left{display:flex;gap:14px;align-items:center;min-width:0}
.repair-server-icon{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,rgba(110,231,255,.22),rgba(124,92,255,.22));display:grid;place-items:center;font-size:22px}
.repair-server-name{font-weight:950;color:#fff;font-size:17px}
.repair-server-meta{color:#a9c4ff;font-size:13px;margin-top:3px;word-break:break-all}
.repair-status{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#dbeafe;font-size:12px;font-weight:950}
.repair-status.active,.repair-status.online,.repair-status.running{background:rgba(34,197,94,.14);color:#86efac;border:1px solid rgba(34,197,94,.24)}
.repair-status.offline{background:rgba(239,68,68,.14);color:#fecaca;border:1px solid rgba(239,68,68,.24)}
.repair-ptero-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
.repair-ptero-sidebar{position:sticky;top:86px;border-radius:24px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);padding:16px}
.repair-ptero-sidebar h3{margin:6px 8px 12px;color:#fff}
.repair-ptero-nav{display:grid;gap:6px}
.repair-ptero-nav a{padding:12px 13px;border-radius:14px;color:#aeb8d4;font-weight:850}
.repair-ptero-nav a.active,.repair-ptero-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.repair-ptero-main{min-width:0}
.repair-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0 22px}
.repair-kpi{padding:18px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10)}
.repair-kpi .label{color:#a9c4ff;font-size:13px;font-weight:850}
.repair-kpi .value{color:#fff;font-size:24px;font-weight:950;margin-top:6px;word-break:break-all}
.repair-console{border-radius:18px;background:#05070e;border:1px solid rgba(255,255,255,.12);padding:16px;min-height:320px;max-height:520px;overflow:auto;font-family:ui-monospace,Consolas,monospace;color:#bff7c8;font-size:13px;white-space:pre-wrap}
.repair-file{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);margin-bottom:8px}
@media(max-width:950px){.repair-ptero-layout{grid-template-columns:1fr}.repair-ptero-sidebar{position:static}.repair-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.repair-server-card{align-items:flex-start;flex-direction:column}.repair-kpis{grid-template-columns:1fr}}



/* Clean server panel redesign */
.clean-server-page{padding:34px 0 80px}
.clean-server-layout{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
.clean-server-side{position:sticky;top:86px;border-radius:26px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);padding:18px;box-shadow:0 18px 65px rgba(0,0,0,.18)}
.clean-server-brand{display:flex;gap:13px;align-items:center;padding:8px 8px 18px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.10)}
.clean-server-icon{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#6ee7ff,#7c5cff);display:grid;place-items:center;color:#06111f;font-weight:950}
.clean-server-title{font-size:17px;font-weight:950;color:#fff;line-height:1.15}
.clean-server-id{font-size:12px;color:#9fb8f5;margin-top:4px;word-break:break-all}
.clean-server-nav{display:grid;gap:7px}
.clean-server-nav a{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:14px;color:#aeb8d4;font-weight:850;text-decoration:none}
.clean-server-nav a:hover,.clean-server-nav a.active{background:rgba(255,255,255,.08);color:#fff}
.clean-server-main{min-width:0}
.clean-server-hero{border-radius:30px;background:radial-gradient(circle at top left,rgba(110,231,255,.14),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.13);padding:28px;box-shadow:0 18px 80px rgba(0,0,0,.24);margin-bottom:22px}
.clean-server-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.clean-server-hero h1{font-size:clamp(34px,4vw,52px);line-height:1;margin:10px 0 10px;letter-spacing:-1px}
.clean-server-sub{color:#a9c4ff;font-size:17px}
.clean-server-state{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;margin-top:14px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.25);color:#86efac;font-weight:950}
.clean-server-state.offline{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.25);color:#fecaca}
.clean-server-state.pending,.clean-server-state.starting{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.25);color:#fde68a}
.clean-server-actions{display:flex;gap:10px;flex-wrap:wrap}
.clean-power{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.clean-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.clean-stat{padding:18px;border-radius:22px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10)}
.clean-stat-label{color:#a9c4ff;font-size:13px;font-weight:900}
.clean-stat-value{color:#fff;font-size:25px;font-weight:950;margin:8px 0}
.clean-stat-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.clean-stat-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(135deg,#6ee7ff,#7c5cff)}
.clean-panel{border-radius:28px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);padding:24px;box-shadow:0 18px 65px rgba(0,0,0,.16)}
.clean-panel-head{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.clean-panel-head h2{margin:0;font-size:26px}
.clean-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:18px}
.clean-table th{padding:14px;text-align:left;color:#dbeafe;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.10);font-size:13px}
.clean-table td{padding:14px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;word-break:break-word}
.clean-console{border-radius:20px;background:#05070e;border:1px solid rgba(255,255,255,.12);padding:18px;min-height:340px;max-height:520px;overflow:auto;font-family:ui-monospace,Consolas,monospace;color:#bff7c8;font-size:13px;white-space:pre-wrap;line-height:1.55}
.clean-command{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:14px}
.clean-file{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.clean-file-left{display:flex;gap:12px;align-items:center;min-width:0}
.clean-file-icon{width:38px;height:38px;border-radius:13px;background:rgba(110,231,255,.13);display:grid;place-items:center}
.clean-file-name{font-weight:950;color:#fff}
.clean-file-meta{color:#a9c4ff;font-size:12px;margin-top:2px}
@media(max-width:1000px){.clean-server-layout{grid-template-columns:1fr}.clean-server-side{position:static}.clean-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.clean-stats{grid-template-columns:1fr}.clean-command{grid-template-columns:1fr}.clean-file{align-items:flex-start;flex-direction:column}}



/* FINAL clean server cards page */
.server-clean-wrap{padding:38px 0 80px}
.server-clean-grid{display:grid;grid-template-columns:285px minmax(0,1fr);gap:24px;align-items:start}
.server-clean-sidebar{position:sticky;top:86px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:26px;padding:18px;box-shadow:0 18px 60px rgba(0,0,0,.18)}
.server-clean-profile{display:flex;gap:13px;align-items:center;padding:8px 8px 18px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:14px}
.server-clean-avatar{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,#6ee7ff,#7c5cff);display:grid;place-items:center;color:#06111f;font-weight:950;font-size:20px}
.server-clean-name{color:#fff;font-size:18px;font-weight:950;line-height:1.15}
.server-clean-id{color:#a9c4ff;font-size:12px;margin-top:4px;word-break:break-all}
.server-clean-menu{display:grid;gap:7px}
.server-clean-menu a{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:14px;color:#aeb8d4;font-weight:900;text-decoration:none}
.server-clean-menu a:hover,.server-clean-menu a.active{background:rgba(255,255,255,.08);color:#fff}
.server-clean-main{min-width:0}
.server-clean-hero{background:radial-gradient(circle at top left,rgba(110,231,255,.14),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.13);border-radius:30px;padding:28px;margin-bottom:22px;box-shadow:0 18px 80px rgba(0,0,0,.24)}
.server-clean-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.server-clean-hero h1{font-size:clamp(34px,4vw,54px);line-height:1;margin:10px 0 10px;letter-spacing:-1px}
.server-clean-sub{color:#a9c4ff;font-size:17px}
.server-clean-state{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;margin-top:14px;font-weight:950;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.25);color:#86efac}
.server-clean-state.offline{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.25);color:#fecaca}
.server-clean-state.pending,.server-clean-state.starting{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.25);color:#fde68a}
.server-clean-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.server-clean-power-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:18px;margin-bottom:22px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.server-clean-power-card h2{margin:0;font-size:20px}
.server-clean-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.server-clean-stat{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:18px;min-height:130px}
.server-clean-stat-label{color:#a9c4ff;font-size:13px;font-weight:900}
.server-clean-stat-value{color:#fff;font-size:26px;font-weight:950;margin:9px 0 12px;word-break:break-word}
.server-clean-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.server-clean-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(135deg,#6ee7ff,#7c5cff)}
.server-clean-panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);border-radius:28px;padding:24px;box-shadow:0 18px 65px rgba(0,0,0,.16)}
.server-clean-panel-head{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.server-clean-panel-head h2{margin:0;font-size:26px}
.server-clean-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:18px}
.server-clean-table th{padding:14px;text-align:left;color:#dbeafe;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.10);font-size:13px;width:220px}
.server-clean-table td{padding:14px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;word-break:break-word}
.server-clean-console{border-radius:20px;background:#05070e;border:1px solid rgba(255,255,255,.12);padding:18px;min-height:340px;max-height:520px;overflow:auto;font-family:ui-monospace,Consolas,monospace;color:#bff7c8;font-size:13px;white-space:pre-wrap;line-height:1.55}
.server-clean-command{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:14px}
.server-clean-list{display:grid;gap:10px}
.server-clean-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.server-clean-item-left{display:flex;gap:12px;align-items:center;min-width:0}
.server-clean-item-icon{width:40px;height:40px;border-radius:14px;background:rgba(110,231,255,.13);display:grid;place-items:center}
.server-clean-item-title{font-weight:950;color:#fff}
.server-clean-item-meta{color:#a9c4ff;font-size:12px;margin-top:2px}
@media(max-width:1000px){.server-clean-grid{grid-template-columns:1fr}.server-clean-sidebar{position:static}.server-clean-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.server-clean-stats{grid-template-columns:1fr}.server-clean-command{grid-template-columns:1fr}.server-clean-item{align-items:flex-start;flex-direction:column}}


/* server-card-hard-fix */
.srvx-page *{box-sizing:border-box}
.srvx-page a{text-decoration:none}


/* client services live status */
.repair-status.running,.repair-status.online{background:rgba(34,197,94,.14)!important;color:#86efac!important;border:1px solid rgba(34,197,94,.24)!important}
.repair-status.offline{background:rgba(239,68,68,.14)!important;color:#fecaca!important;border:1px solid rgba(239,68,68,.24)!important}
.repair-status.starting,.repair-status.stopping,.repair-status.pending{background:rgba(245,158,11,.14)!important;color:#fde68a!important;border:1px solid rgba(245,158,11,.24)!important}


/* only Pterodactyl live status on service cards */
.repair-actions .repair-status:not([data-service-status]){display:none!important}
.repair-status[data-service-status].running,
.repair-status[data-service-status].online{background:rgba(34,197,94,.14)!important;color:#86efac!important;border:1px solid rgba(34,197,94,.24)!important}
.repair-status[data-service-status].offline{background:rgba(239,68,68,.14)!important;color:#fecaca!important;border:1px solid rgba(239,68,68,.24)!important}
.repair-status[data-service-status].starting,
.repair-status[data-service-status].stopping,
.repair-status[data-service-status].pending{background:rgba(245,158,11,.14)!important;color:#fde68a!important;border:1px solid rgba(245,158,11,.24)!important}


/* dashboard Pterodactyl-only status */
.repair-status.active:not([data-dashboard-service-status]):not([data-service-status]){display:none!important}
.repair-status[data-dashboard-service-status].running,
.repair-status[data-dashboard-service-status].online{background:rgba(34,197,94,.14)!important;color:#86efac!important;border:1px solid rgba(34,197,94,.24)!important}
.repair-status[data-dashboard-service-status].offline{background:rgba(239,68,68,.14)!important;color:#fecaca!important;border:1px solid rgba(239,68,68,.24)!important}
.repair-status[data-dashboard-service-status].starting,
.repair-status[data-dashboard-service-status].stopping,
.repair-status[data-dashboard-service-status].pending{background:rgba(245,158,11,.14)!important;color:#fde68a!important;border:1px solid rgba(245,158,11,.24)!important}
.repair-status[data-dashboard-service-status].suspended{background:rgba(156,163,175,.16)!important;color:#e5e7eb!important;border:1px solid rgba(156,163,175,.30)!important}


/* Server Manager Cards Working */
.sm2-wrap{padding:36px 0 80px}
.sm2-layout{display:grid;grid-template-columns:292px minmax(0,1fr);gap:24px;align-items:start}
.sm2-sidebar{position:sticky;top:86px;border-radius:28px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);padding:18px;box-shadow:0 18px 65px rgba(0,0,0,.22)}
.sm2-profile{display:flex;gap:13px;align-items:center;padding:8px 8px 18px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.10)}
.sm2-avatar{width:50px;height:50px;border-radius:17px;background:linear-gradient(135deg,#6ee7ff,#7c5cff);display:grid;place-items:center;color:#06111f;font-weight:950;font-size:20px;flex:0 0 auto}
.sm2-name{font-size:18px;font-weight:950;color:#fff;line-height:1.15}
.sm2-id{font-size:12px;color:#a9c4ff;margin-top:4px;word-break:break-all}
.sm2-nav{display:grid;gap:8px}
.sm2-nav a{display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:15px;color:#aeb8d4;font-weight:900;text-decoration:none}
.sm2-nav a:hover,.sm2-nav a.active{background:rgba(255,255,255,.08);color:#fff}
.sm2-main{min-width:0}
.sm2-hero{border-radius:30px;background:radial-gradient(circle at top left,rgba(110,231,255,.16),transparent 35%),linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.13);padding:28px;margin-bottom:22px;box-shadow:0 18px 80px rgba(0,0,0,.24)}
.sm2-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}
.sm2-badge{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(110,231,255,.12);border:1px solid rgba(110,231,255,.22);color:#6ee7ff;font-weight:950}
.sm2-hero h1{font-size:clamp(36px,4vw,56px);line-height:1;margin:12px 0 10px;letter-spacing:-1px}
.sm2-sub{color:#a9c4ff;font-size:17px}
.sm2-state{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;margin-top:14px;font-weight:950;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.25);color:#86efac}
.sm2-state.offline{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.25);color:#fecaca}
.sm2-state.pending,.sm2-state.starting,.sm2-state.stopping{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.25);color:#fde68a}
.sm2-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sm2-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.sm2-card{border-radius:24px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);padding:20px;box-shadow:0 18px 65px rgba(0,0,0,.14)}
.sm2-card h2{margin:0 0 14px;font-size:24px}
.sm2-stat-label{color:#a9c4ff;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.35px}
.sm2-stat-value{color:#fff;font-size:26px;font-weight:950;margin:10px 0 12px;word-break:break-word}
.sm2-bar{height:9px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.sm2-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(135deg,#6ee7ff,#7c5cff)}
.sm2-panel{border-radius:28px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);padding:24px;box-shadow:0 18px 65px rgba(0,0,0,.16);margin-bottom:22px}
.sm2-panel-head{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.sm2-panel-head h2{margin:0;font-size:26px}
.sm2-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:18px;overflow:hidden}
.sm2-table th{padding:14px;text-align:left;color:#dbeafe;background:rgba(255,255,255,.055);border-bottom:1px solid rgba(255,255,255,.10);font-size:13px}
.sm2-table td{padding:14px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;word-break:break-word}
.sm2-console{border-radius:22px;background:#05070e;border:1px solid rgba(255,255,255,.12);padding:18px;min-height:380px;max-height:560px;overflow:auto;font-family:ui-monospace,Consolas,monospace;color:#bff7c8;font-size:13px;white-space:pre-wrap;line-height:1.55}
.sm2-command{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:14px}
.sm2-list{display:grid;gap:10px}
.sm2-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.sm2-item-left{display:flex;gap:12px;align-items:center;min-width:0}
.sm2-icon{width:42px;height:42px;border-radius:14px;background:rgba(110,231,255,.13);display:grid;place-items:center;flex:0 0 auto}
.sm2-title{font-weight:950;color:#fff}
.sm2-meta{color:#a9c4ff;font-size:12px;margin-top:2px}
.sm2-form-grid{display:grid;grid-template-columns:1fr 160px auto;gap:10px;margin-bottom:18px}
.sm2-editor{min-height:440px;font-family:ui-monospace,Consolas,monospace}
@media(max-width:1050px){.sm2-layout{grid-template-columns:1fr}.sm2-sidebar{position:static}.sm2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.sm2-grid{grid-template-columns:1fr}.sm2-command,.sm2-form-grid{grid-template-columns:1fr}.sm2-item{align-items:flex-start;flex-direction:column}}


/* Bigger file editor + database password display */
.sm2-editor{
  min-height:620px!important;
  height:620px!important;
  width:100%!important;
  resize:vertical!important;
  font-family:ui-monospace,Consolas,monospace!important;
  font-size:14px!important;
  line-height:1.5!important;
}
.sm2-table code{
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:7px 9px;
  color:#dbeafe;
}



/* Mobile friendly global fixes */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(1180px, calc(100% - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.card {
  max-width: 100%;
  overflow: hidden;
}

.table,
table {
  width: 100%;
}

.table-wrapper,
.table-responsive {
  width: 100%;
  overflow-x: auto;
}

/* Make wide tables scroll instead of breaking mobile */
.card table,
.sm2-panel table,
.server-clean-panel table,
.clean-panel table,
.nn-card table {
  display: block;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

/* Forms */
.input,
input,
select,
textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.form {
  width: 100%;
}

/* Buttons/actions */
.repair-actions,
.server-clean-actions,
.clean-server-actions,
.sm2-actions,
.nn-actions,
.ptero-actions {
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .container {
    width: min(100% - 24px, 1180px) !important;
  }

  .section {
    padding-top: 34px !important;
    padding-bottom: 48px !important;
  }

  h1 {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  .lead {
    font-size: 16px !important;
  }

  /* Navbar/header */
  .nav,
  nav,
  header .container,
  .navbar,
  .site-nav {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  nav a,
  .nav a,
  .navbar a {
    font-size: 14px !important;
  }

  /* Hero sections */
  .hero,
  .hero-grid,
  .hero-content,
  .grid,
  .pricing-grid,
  .features-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .hero {
    padding: 42px 0 !important;
  }

  /* Cards */
  .card {
    padding: 20px !important;
    border-radius: 22px !important;
  }

  .repair-server-card,
  .nn-service,
  .server-clean-item,
  .srvx-item,
  .sm2-item {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .repair-server-card > *,
  .nn-service > *,
  .server-clean-item > *,
  .srvx-item > *,
  .sm2-item > * {
    width: 100%;
  }

  .btn,
  button,
  input[type="submit"] {
    min-height: 44px;
  }
}

@media (max-width: 720px) {
  /* Client/dashboard layouts */
  .nn-layout,
  .repair-ptero-layout,
  .clean-server-layout,
  .server-clean-grid,
  .srvx-grid,
  .sm2-layout,
  .ptero-pro-layout,
  .ptero-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .nn-sidebar,
  .repair-ptero-sidebar,
  .clean-server-side,
  .server-clean-sidebar,
  .srvx-sidebar,
  .sm2-sidebar,
  .ptero-pro-sidebar,
  .ptero-sidebar {
    position: static !important;
    width: 100% !important;
    top: auto !important;
  }

  .nn-menu,
  .repair-ptero-nav,
  .clean-server-nav,
  .server-clean-menu,
  .srvx-nav,
  .sm2-nav,
  .ptero-pro-nav,
  .ptero-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .nn-menu a,
  .repair-ptero-nav a,
  .clean-server-nav a,
  .server-clean-menu a,
  .srvx-nav a,
  .sm2-nav a,
  .ptero-pro-nav a,
  .ptero-nav a {
    padding: 11px 10px !important;
    font-size: 13px !important;
    justify-content: flex-start !important;
  }

  .nn-kpi-grid,
  .repair-kpis,
  .clean-stats,
  .server-clean-stats,
  .srvx-stats,
  .sm2-grid,
  .ptero-stats,
  .ptero-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .nn-grid-2,
  .ptero-split,
  .ptero-grid-2,
  .sm2-form-grid {
    grid-template-columns: 1fr !important;
  }

  .server-clean-hero,
  .srvx-hero,
  .sm2-hero,
  .clean-server-hero,
  .nn-hero-card {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  .server-clean-top,
  .srvx-top,
  .sm2-top,
  .clean-server-top,
  .nn-hero-row,
  .repair-page-title {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .server-clean-actions,
  .clean-server-actions,
  .srvx-actions,
  .sm2-actions,
  .repair-actions,
  .nn-actions {
    width: 100%;
  }

  .server-clean-actions .btn,
  .clean-server-actions .btn,
  .srvx-actions .btn,
  .sm2-actions .btn,
  .repair-actions .btn,
  .nn-actions .btn,
  .server-clean-actions button,
  .clean-server-actions button,
  .srvx-actions button,
  .sm2-actions button,
  .repair-actions button,
  .nn-actions button {
    flex: 1 1 auto;
    text-align: center;
  }

  .server-clean-power-card,
  .srvx-control,
  .sm2-panel-head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .srvx-command,
  .sm2-command,
  .ptero-command,
  .clean-command {
    grid-template-columns: 1fr !important;
  }

  .sm2-editor,
  textarea.sm2-editor {
    height: 420px !important;
    min-height: 420px !important;
  }
}

@media (max-width: 520px) {
  .container {
    width: min(100% - 18px, 1180px) !important;
  }

  .card,
  .nn-card,
  .sm2-panel,
  .srvx-panel,
  .server-clean-panel,
  .clean-panel {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .nn-kpi-grid,
  .repair-kpis,
  .clean-stats,
  .server-clean-stats,
  .srvx-stats,
  .sm2-grid,
  .ptero-stats,
  .ptero-stat-grid {
    grid-template-columns: 1fr !important;
  }

  .nn-menu,
  .repair-ptero-nav,
  .clean-server-nav,
  .server-clean-menu,
  .srvx-nav,
  .sm2-nav,
  .ptero-pro-nav,
  .ptero-nav {
    grid-template-columns: 1fr !important;
  }

  .btn,
  button,
  input[type="submit"] {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .timer {
    grid-template-columns: 1fr 1fr !important;
  }

  .gate-card {
    padding: 22px !important;
  }

  /* Hide table overflow nicely on tiny screens */
  th, td {
    font-size: 13px !important;
  }
}



/* Mobile burger menu + overlap fixes */
@media (max-width: 760px) {
  /* Header must stay compact */
  header,
  .site-header,
  .navbar-wrap {
    position: relative !important;
    z-index: 50 !important;
  }

  header .container,
  .site-header .container,
  .navbar,
  .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .brand,
  .logo,
  .navbar-brand {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .brand span,
  .logo span,
  .navbar-brand span {
    white-space: nowrap !important;
  }

  /* Burger button smaller */
  .nav-toggle,
  .menu-toggle,
  .hamburger,
  button[aria-label*="menu"],
  button[aria-label*="Menu"] {
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 48px !important;
    padding: 0 !important;
    flex: 0 0 54px !important;
    border-radius: 16px !important;
  }

  /* Mobile nav should not cover whole page width */
  .nav-links,
  .navbar-menu,
  .menu,
  .mobile-menu {
    width: min(320px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 16px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .nav-links.open,
  .navbar-menu.open,
  .menu.open,
  .mobile-menu.open,
  .nav-links.active,
  .navbar-menu.active,
  .menu.active,
  .mobile-menu.active {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    position: absolute !important;
    right: 12px !important;
    top: calc(100% + 10px) !important;
    z-index: 100 !important;
    background: rgba(8, 13, 28, .96) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.35) !important;
  }

  .nav-links a,
  .navbar-menu a,
  .menu a,
  .mobile-menu a {
    width: 100% !important;
    min-width: 0 !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    text-align: left !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
  }

  .nav-links .btn,
  .navbar-menu .btn,
  .menu .btn,
  .mobile-menu .btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  /* Login/register pages: stop nav from overlapping card */
  .auth-card,
  .login-card,
  .register-card,
  form.card {
    margin-top: 34px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .badge,
  .pill {
    display: inline-flex !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  /* Client area sidebar/profile overlap fix */
  .nn-sidebar,
  .repair-ptero-sidebar,
  .client-sidebar,
  .dashboard-sidebar,
  .sidebar-card {
    padding: 16px !important;
    overflow: hidden !important;
  }

  .nn-profile,
  .repair-profile,
  .client-profile,
  .profile-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  .nn-profile > *,
  .repair-profile > *,
  .client-profile > *,
  .profile-card > * {
    min-width: 0 !important;
  }

  .nn-profile .name,
  .repair-profile .name,
  .client-profile .name,
  .profile-card .name,
  .nn-profile strong,
  .repair-profile strong,
  .client-profile strong,
  .profile-card strong {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nn-profile .email,
  .repair-profile .email,
  .client-profile .email,
  .profile-card .email,
  .nn-profile small,
  .repair-profile small,
  .client-profile small,
  .profile-card small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }

  /* Customer dropdown/user button */
  .user-menu,
  .account-menu,
  .profile-dropdown {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .user-menu .btn,
  .account-menu .btn,
  .profile-dropdown .btn {
    width: auto !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }

  /* General anti-overlap */
  .card,
  .panel,
  .nn-card,
  .repair-card {
    overflow: hidden !important;
  }

  .card > *,
  .panel > *,
  .nn-card > *,
  .repair-card > * {
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  .nav-links.open,
  .navbar-menu.open,
  .menu.open,
  .mobile-menu.open,
  .nav-links.active,
  .navbar-menu.active,
  .menu.active,
  .mobile-menu.active {
    width: min(292px, calc(100vw - 24px)) !important;
    grid-template-columns: 1fr !important;
    right: 10px !important;
  }

  .nav-toggle,
  .menu-toggle,
  .hamburger,
  button[aria-label*="menu"],
  button[aria-label*="Menu"] {
    width: 50px !important;
    min-width: 50px !important;
    flex-basis: 50px !important;
  }

  .brand,
  .logo,
  .navbar-brand {
    gap: 8px !important;
  }

  .brand img,
  .logo img,
  .navbar-brand img {
    width: 42px !important;
    height: 42px !important;
  }
}



/* HARD mobile navigation/clientarea fix */
@media (max-width: 760px) {
  body {
    overflow-x: hidden !important;
  }

  /* Header as a clean single row */
  header,
  .site-header,
  .navbar-wrap,
  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: rgba(7, 11, 22, .96) !important;
    backdrop-filter: blur(16px) !important;
  }

  header .container,
  .site-header .container,
  .navbar,
  .nav {
    min-height: 76px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  /* Never let the mobile menu push the page down */
  .nav-links,
  .navbar-menu,
  .menu,
  .mobile-menu {
    display: none !important;
  }

  .nav-links.open,
  .nav-links.active,
  .navbar-menu.open,
  .navbar-menu.active,
  .menu.open,
  .menu.active,
  .mobile-menu.open,
  .mobile-menu.active {
    display: grid !important;
    position: fixed !important;
    top: 86px !important;
    right: 12px !important;
    left: auto !important;
    width: min(310px, calc(100vw - 24px)) !important;
    max-width: min(310px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 105px) !important;
    overflow-y: auto !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 14px !important;
    margin: 0 !important;
    border-radius: 22px !important;
    background: rgba(10, 16, 34, .98) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 26px 90px rgba(0,0,0,.55) !important;
    z-index: 1000 !important;
    backdrop-filter: blur(18px) !important;
  }

  .nav-links.open a,
  .nav-links.active a,
  .navbar-menu.open a,
  .navbar-menu.active a,
  .menu.open a,
  .menu.active a,
  .mobile-menu.open a,
  .mobile-menu.active a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    background: transparent !important;
  }

  .nav-links.open a:hover,
  .nav-links.active a:hover,
  .navbar-menu.open a:hover,
  .navbar-menu.active a:hover,
  .menu.open a:hover,
  .menu.active a:hover,
  .mobile-menu.open a:hover,
  .mobile-menu.active a:hover {
    background: rgba(255,255,255,.07) !important;
  }

  .nav-links.open .btn,
  .nav-links.active .btn,
  .navbar-menu.open .btn,
  .navbar-menu.active .btn,
  .menu.open .btn,
  .menu.active .btn,
  .mobile-menu.open .btn,
  .mobile-menu.active .btn {
    width: 100% !important;
    margin: 4px 0 0 !important;
  }

  /* User/account dropdown must not become a huge left sidebar */
  .user-dropdown,
  .account-dropdown,
  .profile-dropdown,
  .dropdown-menu,
  .client-dropdown {
    position: fixed !important;
    top: 86px !important;
    right: 12px !important;
    left: auto !important;
    width: min(310px, calc(100vw - 24px)) !important;
    max-width: min(310px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 105px) !important;
    overflow-y: auto !important;
    border-radius: 22px !important;
    z-index: 1001 !important;
  }

  /* Client sidebar becomes a neat card, not an overlay */
  .nn-sidebar,
  .repair-ptero-sidebar,
  .client-sidebar,
  .dashboard-sidebar,
  .sidebar-card,
  aside {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 0 0 18px !important;
    box-sizing: border-box !important;
  }

  /* But if a sidebar is inside the header dropdown, keep it compact */
  header aside,
  .site-header aside,
  .nav-links aside,
  .navbar-menu aside,
  .menu aside,
  .mobile-menu aside {
    width: 100% !important;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }

  /* Prevent profile/email from sticking outside */
  .nn-profile,
  .repair-profile,
  .client-profile,
  .profile-card,
  .user-card,
  .account-card {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .nn-profile *,
  .repair-profile *,
  .client-profile *,
  .profile-card *,
  .user-card *,
  .account-card * {
    min-width: 0 !important;
  }

  .nn-profile small,
  .repair-profile small,
  .client-profile small,
  .profile-card small,
  .user-card small,
  .account-card small,
  .email,
  .user-email {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Main content must start below sticky header and not sit under menu */
  main,
  .section,
  .hero {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Hero buttons and node card spacing */
  .hero .btn,
  .hero-actions .btn,
  .repair-actions .btn {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  .hero,
  .section {
    padding-top: 30px !important;
  }

  /* Big node/status card should not be hidden under side menu */
  .node-card,
  .status-card,
  .live-node,
  .server-status-card {
    width: 100% !important;
    margin-top: 18px !important;
  }
}

@media (max-width: 430px) {
  .nav-links.open,
  .nav-links.active,
  .navbar-menu.open,
  .navbar-menu.active,
  .menu.open,
  .menu.active,
  .mobile-menu.open,
  .mobile-menu.active,
  .user-dropdown,
  .account-dropdown,
  .profile-dropdown,
  .dropdown-menu,
  .client-dropdown {
    width: min(285px, calc(100vw - 20px)) !important;
    max-width: min(285px, calc(100vw - 20px)) !important;
    right: 10px !important;
  }

  h1 {
    font-size: clamp(34px, 10vw, 48px) !important;
  }

  .lead,
  p {
    font-size: 16px !important;
  }
}



/* Burger visible fix */
@media (max-width: 760px) {
  /* Keep burger button visible */
  .nav-toggle,
  .menu-toggle,
  .hamburger,
  button[aria-label*="menu"],
  button[aria-label*="Menu"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1200 !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 48px !important;
    flex: 0 0 54px !important;
  }

  /* Hide only the links menu, not the burger button */
  .nav-links:not(.open):not(.active),
  .navbar-menu:not(.open):not(.active),
  .mobile-menu:not(.open):not(.active) {
    display: none !important;
  }

  /* Do NOT globally hide .menu, because some themes use that class on the burger button */
  .menu:not(button):not(.nav-toggle):not(.menu-toggle):not(.hamburger):not(.open):not(.active) {
    display: none !important;
  }

  .nav-links.open,
  .nav-links.active,
  .navbar-menu.open,
  .navbar-menu.active,
  .mobile-menu.open,
  .mobile-menu.active,
  .menu.open,
  .menu.active {
    display: grid !important;
  }

  header .container,
  .site-header .container,
  .navbar,
  .nav {
    overflow: visible !important;
  }
}



/* Safe mobile recovery fix */
@media (max-width: 760px) {
  html, body {
    background: linear-gradient(135deg,#070b16,#0b1224) !important;
    color: #fff !important;
    overflow-x: hidden !important;
  }

  .container {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }

  header,
  .site-header,
  .navbar-wrap {
    background: rgba(7,11,22,.96) !important;
    position: relative !important;
    z-index: 50 !important;
  }

  header .container,
  .site-header .container,
  .navbar,
  .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    min-height: 76px !important;
  }

  /* Show existing burger button if it exists */
  .nav-toggle,
  .menu-toggle,
  .hamburger,
  button[aria-label*="menu"],
  button[aria-label*="Menu"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 48px !important;
    flex: 0 0 54px !important;
    border-radius: 16px !important;
    z-index: 80 !important;
  }

  /* Closed menu */
  .nav-links:not(.open):not(.active),
  .navbar-menu:not(.open):not(.active),
  .mobile-menu:not(.open):not(.active) {
    display: none !important;
  }

  /* Open menu */
  .nav-links.open,
  .nav-links.active,
  .navbar-menu.open,
  .navbar-menu.active,
  .mobile-menu.open,
  .mobile-menu.active {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: min(300px, calc(100vw - 24px)) !important;
    max-width: min(300px, calc(100vw - 24px)) !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(8,13,28,.98) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.35) !important;
    z-index: 100 !important;
  }

  .nav-links.open a,
  .nav-links.active a,
  .navbar-menu.open a,
  .navbar-menu.active a,
  .mobile-menu.open a,
  .mobile-menu.active a {
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  main,
  .section,
  .hero {
    display: block !important;
    min-height: auto !important;
    background: transparent !important;
  }

  .card,
  .panel,
  .nn-card,
  .repair-card {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .hero-grid,
  .grid,
  .pricing-grid,
  .features-grid,
  .nn-layout,
  .sm2-layout,
  .srvx-grid {
    grid-template-columns: 1fr !important;
  }
}



/* Real burger menu fix */
.nn-burger {
  display: none;
}

@media (max-width: 760px) {
  .nn-burger {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 48px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(13,20,42,.92) !important;
    color: #fff !important;
    padding: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1001 !important;
  }

  .nn-burger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #fff !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  .nn-burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .nn-burger.is-open span:nth-child(2) {
    opacity: 0 !important;
  }
  .nn-burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  header,
  .site-header,
  .navbar-wrap {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    overflow: visible !important;
  }

  header .container,
  .site-header .container,
  .navbar,
  .nav {
    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  /* Hide desktop nav on mobile unless opened */
  .nav-links,
  .navbar-menu,
  nav.menu,
  .mobile-menu {
    display: none !important;
  }

  .nav-links.nn-open,
  .navbar-menu.nn-open,
  nav.menu.nn-open,
  .mobile-menu.nn-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(300px, calc(100vw - 24px)) !important;
    max-width: min(300px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(8,13,28,.98) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(18px) !important;
    z-index: 1000 !important;
  }

  .nav-links.nn-open a,
  .navbar-menu.nn-open a,
  nav.menu.nn-open a,
  .mobile-menu.nn-open a {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  .nav-links.nn-open .btn,
  .navbar-menu.nn-open .btn,
  nav.menu.nn-open .btn,
  .mobile-menu.nn-open .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Prevent old active/open classes from breaking layout; our JS uses nn-open */
  .nav-links.open:not(.nn-open),
  .nav-links.active:not(.nn-open),
  .navbar-menu.open:not(.nn-open),
  .navbar-menu.active:not(.nn-open),
  .mobile-menu.open:not(.nn-open),
  .mobile-menu.active:not(.nn-open) {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .nav-links.nn-open,
  .navbar-menu.nn-open,
  nav.menu.nn-open,
  .mobile-menu.nn-open {
    width: min(285px, calc(100vw - 20px)) !important;
  }
}



/* Final burger placement fix */
@media (max-width: 760px) {
  header,
  .site-header,
  .navbar-wrap {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    overflow: visible !important;
  }

  header .container,
  .site-header .container,
  .navbar,
  .nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 86px !important;
    gap: 12px !important;
    position: relative !important;
  }

  .brand,
  .logo,
  .navbar-brand,
  .site-logo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .nn-burger {
    display: inline-flex !important;
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    height: 50px !important;
    margin-left: auto !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 1001 !important;
    align-self: center !important;
  }

  .nav-links.nn-open,
  .navbar-menu.nn-open,
  nav.menu.nn-open,
  .mobile-menu.nn-open {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(300px, calc(100vw - 24px)) !important;
    max-width: min(300px, calc(100vw - 24px)) !important;
    z-index: 1000 !important;
  }

  /* Hide desktop nav on index too, but keep burger visible */
  .nav-links:not(.nn-open),
  .navbar-menu:not(.nn-open),
  nav.menu:not(.nn-open),
  .mobile-menu:not(.nn-open) {
    display: none !important;
  }

  main,
  .hero,
  .section {
    margin-top: 0 !important;
  }
}



/* FINAL mobile burger header fix */
.nn-burger {
  display: none;
}

@media (max-width: 760px) {
  header,
  .site-header,
  .navbar-wrap {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    overflow: visible !important;
    background: rgba(7,11,22,.96) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }

  header .container,
  .site-header .container,
  .navbar,
  .nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    min-height: 86px !important;
    height: auto !important;
    position: relative !important;
    overflow: visible !important;
  }

  .brand,
  .logo,
  .site-logo,
  .navbar-brand,
  header a[href="index.php"],
  header a[href="/"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: calc(100% - 72px) !important;
  }

  .brand img,
  .logo img,
  .site-logo img,
  .navbar-brand img {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
  }

  .nn-burger {
    display: inline-flex !important;
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 50px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    align-self: center !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(13,20,42,.94) !important;
    box-shadow: 0 14px 45px rgba(0,0,0,.28) !important;
    z-index: 10001 !important;
  }

  .nn-burger span {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #fff !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  .nn-burger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }

  .nn-burger.is-open span:nth-child(2) {
    opacity: 0 !important;
  }

  .nn-burger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  /* Hide desktop nav on mobile. Use nn-open only. */
  .nav-links,
  .navbar-menu,
  .mobile-menu {
    display: none !important;
  }

  .nav-links.nn-open,
  .navbar-menu.nn-open,
  .mobile-menu.nn-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(300px, calc(100vw - 24px)) !important;
    max-width: min(300px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 112px) !important;
    overflow-y: auto !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(8,13,28,.98) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(18px) !important;
    z-index: 10000 !important;
  }

  .nav-links.nn-open a,
  .navbar-menu.nn-open a,
  .mobile-menu.nn-open a {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  /* Do not let old open/active classes show menu wrong */
  .nav-links.open:not(.nn-open),
  .nav-links.active:not(.nn-open),
  .navbar-menu.open:not(.nn-open),
  .navbar-menu.active:not(.nn-open),
  .mobile-menu.open:not(.nn-open),
  .mobile-menu.active:not(.nn-open) {
    display: none !important;
  }
}



/* REAL fixed mobile header/menu */
.nn-real-mobile-header,
.nn-real-mobile-menu {
  display: none;
}

@media (max-width: 760px) {
  /* Hide old/broken mobile nav/header controls, but keep page content */
  header .nn-burger,
  .site-header .nn-burger,
  .navbar-wrap .nn-burger {
    display: none !important;
  }

  .nn-real-mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
    width: 100% !important;
    min-height: 86px !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    background: rgba(7,11,22,.98) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    backdrop-filter: blur(18px) !important;
  }

  /* Hide the old header on mobile to avoid duplicate logo / missing burger */
  header,
  .site-header,
  .navbar-wrap {
    display: none !important;
  }

  .nn-real-mobile-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 24px !important;
    font-weight: 950 !important;
    min-width: 0 !important;
  }

  .nn-real-mobile-logo {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg,#6ee7ff,#7c5cff) !important;
    box-shadow: 0 0 34px rgba(110,231,255,.18) !important;
  }

  .nn-real-mobile-burger {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 56px !important;
    height: 52px !important;
    min-width: 56px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(13,20,42,.96) !important;
    box-shadow: 0 14px 45px rgba(0,0,0,.28) !important;
    padding: 0 !important;
  }

  .nn-real-mobile-burger span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #fff !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  .nn-real-mobile-burger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  .nn-real-mobile-burger.is-open span:nth-child(2) {
    opacity: 0 !important;
  }
  .nn-real-mobile-burger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  .nn-real-mobile-menu {
    display: none !important;
    position: fixed !important;
    top: 94px !important;
    right: 14px !important;
    z-index: 999998 !important;
    width: min(310px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 112px) !important;
    overflow-y: auto !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(8,13,28,.985) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.55) !important;
    backdrop-filter: blur(18px) !important;
    box-sizing: border-box !important;
  }

  .nn-real-mobile-menu.is-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .nn-real-mobile-menu a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    width: 100% !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    color: #a9c4ff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 15px !important;
  }

  .nn-real-mobile-menu a.active,
  .nn-real-mobile-menu a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
  }

  .nn-real-mobile-menu a[href="register.php"] {
    justify-content: center !important;
    color: #06111f !important;
    background: linear-gradient(135deg,#6ee7ff,#7c5cff) !important;
    margin-top: 4px !important;
  }

  body {
    background: linear-gradient(135deg,#070b16,#0b1224) !important;
  }
}



/* Remove duplicate old mobile navbar */
@media (max-width: 760px) {
  .nn-real-mobile-header {
    display: flex !important;
  }

  /* Hide the original website header/nav on mobile */
  body > header:not(.nn-real-mobile-header),
  body > .site-header,
  body > .navbar-wrap,
  body > .navbar,
  body > nav,
  .site-header:not(.nn-real-mobile-header),
  .navbar-wrap,
  .main-navbar,
  .top-navbar {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* If old header content is inside a wrapper, hide duplicate brand row after the real mobile header */
  .nn-real-mobile-header + header,
  .nn-real-mobile-header + .site-header,
  .nn-real-mobile-header + .navbar-wrap,
  .nn-real-mobile-header + nav {
    display: none !important;
  }

  /* Prevent extra spacing from hidden header */
  main,
  .hero,
  .section {
    margin-top: 0 !important;
  }
}



@media (max-width: 760px) {
  .nn-old-mobile-hidden {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}



/* Mobile menu link panel fix */
@media (max-width: 760px) {
  .nn-real-mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
    width: 100% !important;
    min-height: 86px !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    background: rgba(7,11,22,.98) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    backdrop-filter: blur(18px) !important;
  }

  .nn-real-mobile-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 24px !important;
    font-weight: 950 !important;
  }

  .nn-real-mobile-logo {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg,#6ee7ff,#7c5cff) !important;
  }

  .nn-real-mobile-burger {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 56px !important;
    height: 52px !important;
    min-width: 56px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    background: rgba(13,20,42,.96) !important;
    padding: 0 !important;
  }

  .nn-real-mobile-burger span {
    width: 25px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #fff !important;
    transition: transform .18s ease, opacity .18s ease !important;
  }

  .nn-real-mobile-burger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }
  .nn-real-mobile-burger.is-open span:nth-child(2) {
    opacity: 0 !important;
  }
  .nn-real-mobile-burger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  .nn-real-mobile-menu {
    display: none !important;
    position: fixed !important;
    top: 94px !important;
    right: 14px !important;
    z-index: 999998 !important;
    width: min(310px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 112px) !important;
    overflow-y: auto !important;
    padding: 14px !important;
    border-radius: 22px !important;
    background: rgba(8,13,28,.985) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.55) !important;
    backdrop-filter: blur(18px) !important;
    box-sizing: border-box !important;
  }

  .nn-real-mobile-menu.is-open {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .nn-real-mobile-menu a {
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
    width: 100% !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    color: #a9c4ff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 15px !important;
  }

  .nn-real-mobile-menu a.active,
  .nn-real-mobile-menu a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
  }

  .nn-real-mobile-menu a[href="register.php"] {
    justify-content: center !important;
    color: #06111f !important;
    background: linear-gradient(135deg,#6ee7ff,#7c5cff) !important;
    margin-top: 4px !important;
  }

  body > header:not(.nn-real-mobile-header),
  body > .site-header,
  body > .navbar-wrap,
  body > nav:not(.nn-real-mobile-menu) {
    display: none !important;
  }

  /* hide the empty old dropdown pill from previous nav fixes */
  .nav-links.nn-open,
  .navbar-menu.nn-open,
  .mobile-menu.nn-open {
    display: none !important;
  }
}