:root{
  --bg:#000000;
  --panel:#33383a;
  --panel-2:#3a4042;
  --line:#43494b;
  --txt:#e7e9ea;
  --muted:#9aa0a3;
  --accent:#4cc38a;
  --accent-2:#3aae74;
  --danger:#e0655a;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:#000;}
#bgGrid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;
}
body{
  background:transparent;
  color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- Header ---------- */
header.top{
  position:sticky;top:0;z-index:10;
  backdrop-filter:blur(10px);
  background:rgba(0,0,0,.6);
  border-bottom:1px solid var(--line);
}
.top-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
}
.brand{display:flex;align-items:baseline;gap:8px;font-weight:700;letter-spacing:.5px}
.brand .logo{font-size:22px}
.brand .tag{color:var(--accent);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:2px}
.nav{display:flex;gap:16px;align-items:center;font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--txt)}
.badge-balance{
  background:var(--panel-2);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;font-size:13px;color:var(--txt);
  display:flex;align-items:center;gap:7px;
}
.badge-balance b{color:var(--accent)}

.nav-btn{
  background:var(--accent);color:#14241c;border:none;cursor:pointer;
  font-weight:700;font-size:13px;padding:8px 16px;border-radius:10px;
  transition:background .15s;
}
.nav-btn:hover{background:var(--accent-2)}
.nav-btn--outline{
  background:transparent;color:var(--txt);border:1px solid var(--line);
}
.nav-btn--outline:hover{border-color:var(--accent);color:var(--accent)}
.nav-btn--danger{
  background:transparent;color:var(--danger);border:1px solid var(--danger);
}
.nav-btn--danger:hover{background:var(--danger);color:#fff}
.nav-user-chip{
  display:inline-flex;align-items:center;
  background:linear-gradient(135deg,var(--accent),#1db954);
  color:#14241c;font-size:13px;font-weight:700;
  padding:6px 14px;border-radius:99px;cursor:pointer;
  transition:opacity .15s;letter-spacing:.3px;
}
.nav-user-chip:hover{opacity:.85}
.nav-btn--admin{
  background:transparent;color:var(--accent);border:1px solid var(--accent);
  padding:6px 14px;border-radius:99px;font-size:13px;font-weight:700;
  transition:background .15s,color .15s;
}
.nav-btn--admin:hover{background:var(--accent);color:#14241c}
.nav-link-cabinet{
  color:var(--accent);font-weight:600;font-size:14px;
  border:1px solid var(--accent);padding:7px 14px;border-radius:10px;
  transition:background .15s,color .15s;
}
.nav-link-cabinet:hover{background:var(--accent);color:#14241c}

/* ---------- Hero ---------- */
.hero{
  max-width:1100px;margin:0 auto;
  padding:54px 24px 18px;
  text-align:center;
}
.hero h1{
  font-size:clamp(28px,5vw,46px);
  margin:0 0 12px;font-weight:800;letter-spacing:-.5px;
}
.hero h1 .grad{
  background:linear-gradient(90deg,var(--accent),#8be0c0);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:var(--muted);max-width:620px;margin:0 auto;font-size:16px}

/* ---------- Layout ---------- */
main{max-width:1100px;margin:0 auto;padding:24px 24px 80px}
.grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;align-items:start;
}
@media (max-width:820px){.grid{grid-template-columns:1fr}}

/* ---------- Product card ---------- */
.card{
  background:linear-gradient(to top, rgba(252,176,173,.24), rgba(252,176,173,0) 50%), var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-head{
  padding:26px 28px 18px;
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
}
.card-head h2{margin:0 0 6px;font-size:22px}
.card-head .sub{color:var(--muted);font-size:14px}
.cpu-pill{
  flex:none;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;font-size:12px;color:var(--muted);
}
.cpu-pill b{display:block;color:var(--txt);font-size:13px;margin-top:2px}

.specs{list-style:none;padding:8px 28px 24px;margin:0}
.specs li{
  display:flex;align-items:center;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.specs li:last-child{border-bottom:none}
.spec-ico{
  flex:none;width:40px;height:40px;border-radius:10px;
  background:var(--panel-2);display:grid;place-items:center;font-size:19px;
}
.spec-name{font-size:15px}
.spec-val{color:var(--muted);font-size:13px;margin-top:1px}

/* ---------- Configurator ---------- */
.config{
  background:linear-gradient(to top, rgba(252,176,173,.24), rgba(252,176,173,0) 50%), var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 26px 28px;
  position:sticky;top:80px;
}
.config h3{margin:0 0 6px;font-size:18px}
.config .hint{color:var(--muted);font-size:13px;margin-bottom:22px}

.field{margin-bottom:22px}
.field-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.field-head label{font-size:14px;font-weight:600}
.field-head .val{font-size:20px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.field-head .val small{font-size:12px;color:var(--muted);font-weight:600;margin-left:2px}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:var(--panel-2);border-radius:999px;outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:3px solid var(--bg);
  box-shadow:0 0 0 1px var(--accent-2);
  transition:transform .12s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--accent);
  cursor:pointer;border:3px solid var(--bg);box-shadow:0 0 0 1px var(--accent-2);
}
.ticks{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px}

/* ---------- Price ---------- */
.price-box{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:18px 18px 16px;margin-top:8px;
}
.price-row{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.price-row + .price-row{margin-top:8px}
.price-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.price-total .lbl{font-size:14px;color:var(--muted)}
.price-total .num{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.per{color:var(--muted);font-size:14px;font-weight:600;margin-left:6px}

.btn{
  width:100%;margin-top:18px;
  background:var(--accent);color:#14241c;border:none;cursor:pointer;
  font-weight:800;font-size:16px;padding:15px;border-radius:12px;
  transition:background .15s,transform .05s;
  letter-spacing:.3px;
}
.btn:hover{background:var(--accent-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--full{width:100%}
.btn--sm{width:auto;margin-top:0;padding:10px 20px;font-size:14px;border-radius:10px}

.sec-note{font-size:11px;color:var(--muted);text-align:center;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:6px}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  color:var(--muted);font-size:13px;text-align:center;padding:26px 24px;
}
footer .brand{justify-content:center;color:var(--txt)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:var(--panel-2);border:1px solid var(--accent);
  color:var(--txt);padding:14px 20px;border-radius:12px;font-size:14px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast--success{border-color:var(--accent);color:var(--accent)}
.toast--info{border-color:#5eaaff;color:#5eaaff}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-overlay.active{opacity:1;pointer-events:auto}

.modal{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px;width:90%;max-width:420px;
  max-height:85vh;display:flex;flex-direction:column;
  position:relative;box-shadow:var(--shadow);
  transform:translateY(20px);transition:transform .2s;
}
.modal-overlay.active .modal{transform:translateY(0)}
.modal--large{max-width:640px}

.modal-close{
  position:absolute;top:16px;right:16px;
  background:none;border:none;color:var(--muted);font-size:22px;
  cursor:pointer;line-height:1;transition:color .15s;
}
.modal-close:hover{color:var(--txt)}

.modal-tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--panel-2);border-radius:10px;padding:4px}
.modal-tab{
  flex:1;background:none;border:none;color:var(--muted);
  font-size:14px;font-weight:600;padding:10px;border-radius:8px;
  cursor:pointer;transition:all .15s;
}
.modal-tab.active{background:var(--accent);color:#14241c}

.auth-form h2{margin:0 0 20px;font-size:20px}

.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.form-group input{
  width:100%;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;color:var(--txt);font-size:15px;
  outline:none;transition:border-color .15s;
}
.form-group input:focus{border-color:var(--accent)}
.form-group input::placeholder{color:var(--muted)}

.form-error{color:var(--danger);font-size:13px;min-height:18px;margin-bottom:12px}
.cf-turnstile{margin:12px 0;display:flex;justify-content:center}
.form-success{color:var(--accent);font-size:13px;min-height:18px;margin-bottom:12px}

/* ---------- Cabinet ---------- */
.cabinet{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;padding:4px}
.cabinet-header{
  display:flex;align-items:center;gap:18px;
  padding:20px 24px;background:var(--panel-2);border-radius:12px;
  margin-bottom:20px;flex-shrink:0;
}
.cabinet-avatar{
  width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#14241c;
  font-size:24px;font-weight:800;
  display:grid;place-items:center;flex:none;
}
.cabinet-name{font-size:20px;font-weight:800}
.cabinet-email{font-size:13px;color:var(--muted);margin-top:2px}
.cabinet-balance{
  margin-left:auto;font-size:22px;font-weight:800;color:var(--accent);
  font-variant-numeric:tabular-nums;
}

.cabinet-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--panel-2);border-radius:10px;padding:4px;flex-shrink:0}
.cabinet-tab{
  flex:1;background:none;border:none;color:var(--muted);
  font-size:13px;font-weight:600;padding:10px;border-radius:8px;
  cursor:pointer;transition:all .15s;
}
.cabinet-tab.active{background:var(--accent);color:#14241c}

.cabinet-body{flex:1;min-height:0;overflow-y:auto}
.cabinet-body::-webkit-scrollbar{width:5px}
.cabinet-body::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:99px}
.cabinet-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.cabinet-body::-webkit-scrollbar-thumb:hover{background:var(--accent)}

.cabinet-section{display:none}
.cabinet-section.active{display:block}

/* Services */
.section-empty{
  text-align:center;padding:40px 20px;color:var(--muted);
}
.section-empty .empty-icon{font-size:48px;margin-bottom:12px}
.section-empty .btn{margin-top:16px;max-width:200px;margin-left:auto;margin-right:auto}

.services-list{display:flex;flex-direction:column;gap:12px}
.service-card{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:16px 20px;
  display:flex;justify-content:space-between;align-items:center;
}
.service-info div:first-child{font-weight:700;font-size:15px}
.service-info div:last-child{font-size:13px;color:var(--muted);margin-top:2px}
.service-status{
  font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;
  background:rgba(76,195,138,.15);color:var(--accent);
}

/* Billing */
.balance-card{
  background:linear-gradient(135deg,rgba(76,195,138,.15),rgba(76,195,138,.05));
  border:1px solid var(--accent);border-radius:12px;
  padding:24px;text-align:center;margin-bottom:20px;
}
.balance-label{font-size:13px;color:var(--muted);margin-bottom:6px}
.balance-amount{font-size:36px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}

.amounts{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.amount-btn{
  flex:1;min-width:70px;background:var(--panel-2);border:1px solid var(--line);
  color:var(--txt);font-size:14px;font-weight:600;padding:12px;border-radius:10px;
  cursor:pointer;transition:all .15s;
}
.amount-btn:hover,.amount-btn.selected{border-color:var(--accent);color:var(--accent)}

.custom-amount{display:flex;gap:10px}
.custom-amount input{
  flex:1;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;color:var(--txt);font-size:15px;outline:none;
}
.custom-amount input:focus{border-color:var(--accent)}

/* Settings */
.settings-form .form-group{margin-bottom:16px}
.settings-form .btn{margin-top:8px}

/* Services */
.services-cta{margin-top:32px;text-align:center}
.services-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
@media(max-width:720px){.services-list{grid-template-columns:1fr}}
.server-card{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:18px 20px;
}
.server-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.server-name{font-weight:800;font-size:16px}
.server-status{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(76,195,138,.15);color:var(--accent)}
.server-status.suspended{background:rgba(224,101,90,.15);color:var(--danger)}
.server-specs{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:var(--muted);margin-bottom:10px}
.server-specs span{background:rgba(0,0,0,.2);padding:4px 8px;border-radius:8px}
.server-meta{font-size:12px;color:var(--muted);margin-bottom:12px}
.server-actions{display:flex;gap:8px}
.server-actions .btn{margin-top:0;padding:8px 14px;font-size:13px}
.muted{color:var(--muted);font-size:13px;text-align:center;padding:20px}

/* Admin */
.admin-subtabs{display:flex;gap:4px;margin-bottom:16px;background:var(--panel-2);border-radius:10px;padding:4px;flex-wrap:wrap}
.admin-subtab{flex:1;min-width:80px;background:none;border:none;color:var(--muted);font-size:12px;font-weight:600;padding:8px;border-radius:8px;cursor:pointer}
.admin-subtab.active{background:var(--accent);color:#14241c}
.admin-section{display:none}
.admin-section.active{display:block}
.admin-list{display:flex;flex-direction:column;gap:10px}
.search-input{
  width:100%;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;padding:10px 14px;color:var(--txt);font-size:14px;
  margin-bottom:14px;outline:none;transition:border-color .15s;box-sizing:border-box;
}
.search-input:focus{border-color:var(--accent)}
.search-input::placeholder{color:var(--muted)}
.admin-card{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:14px}
.admin-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.admin-card-title{font-weight:700;font-size:14px}
.admin-card-sub{font-size:12px;color:var(--muted)}
.admin-actions{display:flex;gap:6px;margin-top:10px}
.admin-actions .btn{padding:6px 12px;font-size:12px;margin:0}
.admin-input{width:70px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--txt);font-size:13px}
footer{position:relative}