*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#f5f7fb;color:#172033}.layout{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:245px;background:#101d36;color:#fff;padding:22px 15px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 28px;text-decoration:none;color:#fff}.brand:hover{color:#fff}.logo{width:39px;height:39px;border-radius:11px;background:#2563eb;display:grid;place-items:center;font-size:21px;font-weight:900}.brand-name{font-size:19px;font-weight:850}.brand-name span{color:#7fb1ff}.nav-title{font-size:10px;letter-spacing:1.5px;color:#71819b;margin:0 10px 10px}.nav{display:flex;flex-direction:column;gap:5px}.nav a{color:#aebbd0;text-decoration:none;padding:12px;border-radius:9px;font-size:13px;font-weight:750}.nav a:hover,.nav a.active{background:#1b3156;color:#fff}.nav a i{width:18px;text-align:center;display:inline-block;font-size:13px}.nav a span{margin-left:8px}.account{margin-top:auto;padding:13px 11px;border-radius:11px;background:#172844}.account-name{font-size:13px;font-weight:800}.account-email{font-size:11px;color:#94a5bf;margin-top:4px;word-break:break-word}.account a{display:block;margin-top:12px;color:#ffadb5;text-decoration:none;font-size:12px;font-weight:750}.main{margin-left:245px;min-height:100vh;padding:24px 30px 45px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font-size:10px;color:#64748b;text-transform:uppercase;letter-spacing:1.1px;font-weight:800}.top-title{font-size:16px;font-weight:850;margin-top:3px}.top-user{font-size:12px;color:#475569;background:#fff;border:1px solid #e3e8ef;border-radius:9px;padding:9px 12px}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:19px}.page-head h1{font-size:28px;margin:0;letter-spacing:-.5px}.page-head p{margin:5px 0 0;color:#64748b;font-size:13px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat{background:#fff;border:1px solid #e3e8ef;border-radius:13px;padding:17px}.stat small{display:block;color:#64748b;font-size:11px}.stat strong{display:block;font-size:25px;margin-top:7px}.card{background:#fff;border:1px solid #e3e8ef;border-radius:14px;padding:18px;box-shadow:0 3px 12px rgba(15,23,42,.035)}.card h3{margin:0;font-size:15px}.empty{padding:34px;text-align:center;color:#64748b}.vps-list{display:grid;gap:13px}.vps-card{border:1px solid #e3e8ef;border-radius:14px;padding:17px;background:#fff}.vps-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.server{display:flex;gap:12px;align-items:center}.os-icon{width:45px;height:45px;border-radius:12px;background:#eef4ff;display:grid;place-items:center;font-size:23px}.server-name{font-weight:850;font-size:16px}.server-ip{font-size:12px;color:#64748b;margin-top:3px}.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:850;text-transform:uppercase}.pill.online{background:#ecfdf3;color:#16803d}.pill.offline{background:#fff1f2;color:#be123c}.dot{width:6px;height:6px;border-radius:50%;background:currentColor}.details{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}.detail{background:#f8fafc;border:1px solid #edf1f5;border-radius:9px;padding:10px}.detail small{display:block;color:#64748b;font-size:9px;margin-bottom:4px}.detail strong{font-size:11px;word-break:break-word}.vps-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:13px}.paid{font-size:12px;color:#64748b}.paid strong{color:#172033;font-size:14px;margin-left:5px}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #d8e0ea;background:#fff;color:#172033;border-radius:9px;padding:9px 13px;font-size:11px;font-weight:800;cursor:pointer}.btn.primary{background:#2563eb;color:#fff;border-color:#2563eb}.btn.danger{color:#b42318;border-color:#efc7c3}.btn:hover{filter:brightness(.98)}.notice{border-radius:10px;padding:11px 13px;font-size:12px;margin-bottom:13px}.notice.success{background:#ecfdf3;border:1px solid #b7ebcb;color:#166534}.notice.error{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239}.manage-hero{background:#101d36;color:#fff;border-radius:15px;padding:20px;margin-bottom:15px}.hero-top{display:flex;justify-content:space-between;gap:15px}.hero-name{font-size:20px;font-weight:850}.hero-ip{font-size:12px;color:#a9b7cb;margin-top:5px}.hero-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:17px}.hero-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);padding:10px;border-radius:9px}.hero-stat small{display:block;color:#93a4bb;font-size:9px}.hero-stat strong{display:block;margin-top:4px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.manage-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.controls form{margin:0}.controls .btn{width:100%;min-height:39px}.hint{color:#64748b;font-size:11px;line-height:1.5;margin:8px 0 11px}.field{width:100%;height:40px;border:1px solid #d8e0ea;border-radius:8px;padding:0 11px;font-size:12px;outline:none;background:#fff}.field:focus{border-color:#7aa7ff;box-shadow:0 0 0 3px rgba(37,99,235,.08)}.row{display:flex;gap:8px}.row .btn{min-width:105px}.rebuild-warning{background:#fff8eb;border:1px solid #f2d59b;color:#805b12;padding:9px 11px;border-radius:8px;font-size:11px;line-height:1.45;margin-bottom:10px}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.metrics{margin-top:14px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}.metric{padding:10px;border:1px solid #edf1f5;border-radius:9px;background:#f8fafc}.metric small{display:block;color:#64748b;font-size:9px}.metric strong{display:block;margin-top:4px;font-size:12px}.muted{color:#64748b;font-size:12px}.profile-card{max-width:650px}.profile-row{padding:13px 0;border-bottom:1px solid #edf1f5}.profile-row:last-child{border-bottom:0}.profile-row small{display:block;color:#64748b;font-size:10px}.profile-row strong{display:block;margin-top:5px;font-size:13px}.login-page{min-height:100vh;display:grid;place-items:center;background:#f5f7fb;padding:20px}.login-card{width:min(410px,100%);background:#fff;border:1px solid #e3e8ef;border-radius:15px;padding:26px;box-shadow:0 8px 28px rgba(15,23,42,.06)}.login-brand{font-size:23px;font-weight:900;text-align:center}.login-sub{text-align:center;color:#64748b;font-size:12px;margin:5px 0 22px}.login-label{display:block;font-size:11px;font-weight:800;margin-bottom:6px}.login-field{width:100%;height:43px;border:1px solid #d8e0ea;border-radius:9px;padding:0 12px;margin-bottom:13px;font-size:13px}.login-btn{width:100%;height:43px;border:0;border-radius:9px;background:#2563eb;color:#fff;font-weight:800;cursor:pointer}.login-note{text-align:center;color:#64748b;font-size:10px;margin-top:14px}@media(max-width:1050px){.details{grid-template-columns:repeat(3,1fr)}.hero-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:800px){.sidebar{position:static;width:100%;height:auto}.account{margin-top:20px}.layout{display:block}.main{margin-left:0;padding:20px}.manage-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.hero-grid{grid-template-columns:repeat(2,1fr)}.topbar{align-items:flex-start}.top-user{display:none}}@media(max-width:520px){.details{grid-template-columns:repeat(2,1fr)}.vps-top,.hero-top,.page-head,.vps-bottom{flex-direction:column;align-items:flex-start}.controls{grid-template-columns:1fr 1fr}.info-grid,.metric-grid{grid-template-columns:1fr 1fr}.row{flex-direction:column}.row .btn{width:100%}}
.notice.warning{background:#fff8eb;border:1px solid #f2d59b;color:#805b12}.notice code{background:rgba(0,0,0,.05);padding:2px 5px;border-radius:4px}.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}.metric-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.metric-tabs{display:flex;gap:6px}.metric-output{margin-top:12px}.metric-grid{grid-template-columns:repeat(4,1fr)}@media(max-width:800px){.metric-head{flex-direction:column}.metric-tabs{width:100%}.metric-tabs .btn{flex:1}}
/* NexGen Hosting shared panel styling */
.layout{min-height:100vh;width:100%}
.sidebar{
 position:fixed;left:0;top:0;bottom:0;width:245px;
 background:#111827;color:#fff;padding:0;
 display:flex;flex-direction:column;z-index:10;
}
.sidebar .brand{
 display:flex;align-items:center;gap:10px;
 padding:20px 18px;
 color:#fff;text-decoration:none;
 font-weight:700;font-size:20px;line-height:24px;
}
.sidebar .brand:hover{color:#fff}
.sidebar .brand-logo{
 width:32px;height:32px;min-width:32px;border-radius:8px;
 background:#2563eb;display:inline-flex;align-items:center;
 justify-content:center;color:#fff;font-size:17px;font-weight:900;
 line-height:1;box-shadow:0 2px 6px rgba(37,99,235,.25);
}
.sidebar .brand-name{font-size:20px;font-weight:700;color:#fff;line-height:24px}
.sidebar .nav-title{
 font-size:10px;letter-spacing:1.5px;color:#71819b;
 margin:0 18px 6px;
}
.sidebar .nav{display:flex;flex-direction:column;gap:0}
.sidebar .nav a{
 box-sizing:border-box;width:100%;
 color:#d1d5db;text-decoration:none;
 display:flex;align-items:center;
 padding:12px 18px;margin:0;border-radius:0;
 font-size:16px;font-weight:400;line-height:24px;
}
.sidebar .nav a:hover,.sidebar .nav a.active{background:#1f2937;color:#fff}
.sidebar .nav a span{margin-left:0}
.sidebar .menu-icon{
 display:inline-flex;align-items:center;justify-content:center;
 width:20px;min-width:20px;margin-right:7px;
 font-size:16px;line-height:24px;
}
.sidebar .account{
 margin-top:auto;padding:13px 18px;border-radius:0;background:#172033;
}
.sidebar .account-name{font-size:13px;font-weight:800;line-height:18px}
.sidebar .account-email{font-size:11px;color:#94a5bf;margin-top:4px;word-break:break-word;line-height:16px}
.sidebar .account a{
 display:flex;align-items:center;margin-top:12px;
 color:#ffadb5;text-decoration:none;font-size:16px;font-weight:400;line-height:24px;
}
.main{
 display:block;
 margin-left:245px;
 width:calc(100% - 245px);
 min-height:100vh;
 padding:24px 30px 45px;
 box-sizing:border-box;
 color:#172033;
}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
@media(max-width:800px){
 .sidebar{position:static;width:100%;height:auto}
 .sidebar .account{margin-top:20px}
 .layout{display:block}
 .main{margin-left:0;width:100%;padding:20px}
}

/* DEFINITIVE SHARED SIDEBAR - Admin / Reseller / Customer */
.panel-sidebar-fix{}
.layout{display:block!important;min-height:100vh;width:100%}
.sidebar{
 position:fixed!important;left:0!important;top:0!important;bottom:0!important;
 width:245px!important;height:auto!important;
 background:#111827!important;color:#fff!important;
 padding:0!important;margin:0!important;
 display:flex!important;flex-direction:column!important;
 z-index:1000!important;
}
.sidebar .brand{
 display:flex!important;align-items:center!important;gap:10px!important;
 width:100%!important;box-sizing:border-box!important;
 padding:20px 18px!important;margin:0!important;
 color:#fff!important;text-decoration:none!important;
 font-size:20px!important;font-weight:700!important;line-height:24px!important;
}
.sidebar .brand:hover{color:#fff!important;text-decoration:none!important}
.sidebar .brand-logo{
 width:32px!important;height:32px!important;min-width:32px!important;
 border-radius:8px!important;background:#2563eb!important;
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 color:#fff!important;font-size:17px!important;font-weight:900!important;
 line-height:1!important;box-shadow:0 2px 6px rgba(37,99,235,.25)!important;
}
.sidebar .brand-name{font-size:20px!important;font-weight:700!important;color:#fff!important;line-height:24px!important}
.sidebar .nav-title{
 font-size:10px!important;letter-spacing:1.5px!important;color:#71819b!important;
 margin:0 18px 6px!important;padding:0!important;
}
.sidebar .nav{display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important;margin:0!important;padding:0!important}
.sidebar .nav a{
 display:flex!important;align-items:center!important;
 width:100%!important;box-sizing:border-box!important;
 margin:0!important;padding:12px 18px!important;
 border-radius:0!important;
 color:#d1d5db!important;text-decoration:none!important;
 font-size:16px!important;font-weight:400!important;line-height:24px!important;
}
.sidebar .nav a:hover,.sidebar .nav a.active{
 background:#1f2937!important;color:#fff!important;
}
.sidebar .nav a i{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 width:20px!important;min-width:20px!important;margin-right:7px!important;
 font-size:16px!important;line-height:24px!important;
}
.sidebar .nav a span{margin-left:0!important}
.sidebar .account{
 margin-top:auto!important;width:100%!important;box-sizing:border-box!important;
 padding:13px 18px!important;border-radius:0!important;background:#172033!important;
}
.sidebar .account-name{font-size:13px!important;font-weight:800!important;line-height:18px!important}
.sidebar .account-email{font-size:11px!important;color:#94a5bf!important;margin-top:4px!important;line-height:16px!important}
.sidebar .account a{
 display:flex!important;align-items:center!important;
 margin-top:12px!important;padding:0!important;
 color:#ffadb5!important;text-decoration:none!important;
 font-size:16px!important;font-weight:400!important;line-height:24px!important;
}
.sidebar .account a .menu-icon{margin-right:7px!important}
.main{
 display:block!important;position:relative!important;
 margin-left:245px!important;
 width:calc(100% - 245px)!important;
 min-height:100vh!important;
 box-sizing:border-box!important;
 padding:24px 30px 45px!important;
 color:#172033!important;
}
.main .topbar{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-bottom:24px!important}
.page-head h1,.top-title{color:#172033!important}
.page-head p,.eyebrow{color:#64748b!important}
@media(max-width:800px){
 .sidebar{position:static!important;width:100%!important;height:auto!important}
 .sidebar .account{margin-top:20px!important}
 .main{margin-left:0!important;width:100%!important;padding:20px!important}
}

/* FINAL MOBILE DRAWER: desktop unchanged */
.ng-customer-mobile-header,.ng-customer-mobile-backdrop{display:none}
@media(max-width:800px){
 .ng-customer-mobile-header{display:flex;position:sticky;top:0;z-index:1200;height:58px;background:#111827;color:#fff;align-items:center;justify-content:space-between;padding:0 15px}
 .ng-customer-mobile-brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:18px;font-weight:800}
 .ng-customer-mobile-logo{width:32px;height:32px;border-radius:8px;background:#2563eb;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:17px;font-weight:900}
 .ng-customer-menu-toggle{width:40px;height:40px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:#1f2937;color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center}
 .ng-customer-mobile-backdrop{display:block;position:fixed;inset:58px 0 0;background:rgba(15,23,42,.45);z-index:1090;opacity:0;visibility:hidden}
 .ng-customer-mobile-backdrop.ng-show{opacity:1;visibility:visible}
 .sidebar{position:fixed!important;left:0!important;top:58px!important;bottom:auto!important;width:min(300px,88vw)!important;height:calc(100vh - 58px)!important;min-height:0!important;overflow-y:auto!important;z-index:1100!important;transform:translateX(-105%)!important;transition:transform .15s ease!important;box-shadow:8px 0 24px rgba(0,0,0,.2)!important}
 .sidebar.ng-open{transform:translateX(0)!important}
 .sidebar .brand{display:none!important}
 .sidebar .nav a{padding:12px 18px!important;font-size:16px!important;line-height:24px!important}
 .main{margin-left:0!important;width:100%!important;min-width:0!important;padding:20px 15px 35px!important;overflow-x:hidden!important}
}
@media(max-width:420px){.ng-customer-mobile-header{padding:0 12px}.ng-customer-mobile-brand{font-size:17px}.main{padding:18px 12px 30px!important}}

@media(max-width:800px){
 .ng-customer-mobile-header{display:flex!important;position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;height:58px!important;z-index:2147483000!important;background:#111827!important;color:#fff!important;align-items:center!important;justify-content:space-between!important;padding:0 14px!important}
 .ng-customer-mobile-brand{display:flex!important;align-items:center!important;gap:9px!important;color:#fff!important;text-decoration:none!important;font-size:18px!important;font-weight:800!important}
 .ng-customer-menu-toggle{display:flex!important;width:42px!important;height:42px!important;align-items:center!important;justify-content:center!important;padding:0!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:8px!important;background:#1f2937!important;color:#fff!important;font-size:26px!important;line-height:1!important}
 .ng-customer-mobile-backdrop{display:block!important;position:fixed!important;top:58px!important;left:0!important;right:0!important;bottom:0!important;z-index:2147482000!important}
 .sidebar{top:58px!important;height:calc(100vh - 58px)!important;z-index:2147482500!important}
 .main{padding-top:78px!important}
}

/* Interaction stability: no visual redesign */
@media(max-width:800px){body.ng-menu-locked{overflow:hidden!important;touch-action:none!important}.ng-customer-menu-toggle{cursor:pointer;touch-action:manipulation;transition:transform .2s ease,background .2s ease}.ng-customer-menu-toggle:active{transform:scale(.94)}.ng-customer-mobile-backdrop{pointer-events:none;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s linear .28s}.ng-customer-mobile-backdrop.ng-show{pointer-events:auto;opacity:1;visibility:visible;transition:opacity .28s ease,visibility 0s linear 0s}.sidebar{transition:transform .30s cubic-bezier(.22,1,.36,1)!important}}