:root{
  --bg: #0a0e1a;
  --bg-alt: #0f1423;
  --card: #141a2e;
  --card-hover: #1a2137;
  --border: #1f2744;
  --text: #e6ebff;
  --muted: #8a93b2;
  --primary: #6366f1;
  --primary-2: #a855f7;
  --accent: #22d3ee;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 12px;
  --radius-lg: 16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}

.cab-container{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}
.muted{color:var(--muted)}
.mono{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.92em}
.hint{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.5}

/* ============ HEADER ============ */
.cab-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(12px);
  background:rgba(10,14,26,.85);
  border-bottom:1px solid var(--border);
}
.cab-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
  gap:24px;
}
.cab-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:18px;
}
.cab-logo b{color:var(--primary)}
.cab-tag{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:100px;
  margin-left:6px;
}
.logo-mark{
  width:30px;height:30px;
  border-radius:8px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 6px 20px rgba(99,102,241,.35);
  position:relative;
}
.logo-mark::after{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:4px;
  border:2px solid rgba(255,255,255,.6);
  border-bottom:none;
  border-right:none;
}
.cab-nav-links{display:flex;gap:28px;align-items:center}
.cab-nav-links a{color:var(--muted);font-size:14px;font-weight:500;transition:color .2s}
.cab-nav-links a:hover{color:var(--text)}
.cab-nav-links .admin-link{color:var(--primary-2)}
.cab-user{display:flex;align-items:center;gap:16px}
.cab-email{font-size:13px;color:var(--muted)}
.cab-logout{font-size:13px;color:var(--muted);padding:6px 14px;border:1px solid var(--border);border-radius:8px;transition:all .2s}
.cab-logout:hover{color:var(--text);border-color:var(--danger)}

.cab-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
  border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  font-weight:600;
  font-size:14px;
  transition:transform .2s, box-shadow .2s;
  box-shadow:0 6px 20px rgba(99,102,241,.3);
}
.cab-btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(99,102,241,.45)}
.cab-btn-wide{width:100%;padding:13px 20px}

/* ============ MAIN ============ */
.cab-main{flex:1;padding:48px 0}
.cab-footer{
  padding:24px 0;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:13px;
  text-align:center;
}
.cab-footer a{color:var(--primary)}

/* ============ PAGE HEAD ============ */
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.page-head h1{
  font-size:32px;
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom:6px;
}
.page-head p{font-size:15px;color:var(--muted);max-width:640px}
.back-link{
  display:inline-block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:10px;
  transition:color .2s;
}
.back-link:hover{color:var(--primary)}

/* ============ AUTH ============ */
.auth-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:calc(100vh - 200px);
  padding:20px 0;
}
.auth-card{
  width:100%;
  max-width:440px;
  padding:44px 40px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
.auth-card h1{
  font-size:26px;
  font-weight:800;
  margin-bottom:8px;
  letter-spacing:-.01em;
}
.auth-sub{
  font-size:14px;
  color:var(--muted);
  margin-bottom:28px;
}
.auth-form{display:flex;flex-direction:column;gap:16px;margin-bottom:22px}
.auth-form label{display:block}
.auth-form span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:500;
}
.auth-form input,
.auth-form select,
.auth-form textarea{
  width:100%;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  transition:border-color .2s;
}
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus{
  outline:none;
  border-color:var(--primary);
}
.auth-form input:disabled{opacity:.6;cursor:not-allowed}
.auth-form small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.auth-alt{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  padding-top:20px;
  border-top:1px solid var(--border);
}
.auth-alt a{color:var(--primary);font-weight:600}

.alert{padding:12px 16px;border-radius:9px;font-size:13px;margin-bottom:18px;line-height:1.5}
.alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.alert-warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);color:#fcd34d}
.alert-warn small{color:var(--muted)}
.alert-success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3);color:#86efac;margin-bottom:28px}

/* ============ GOOGLE BUTTON ============ */
.google-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:14px 20px;
  background:#fff;
  color:#1f1f1f;
  border-radius:9px;
  font-weight:600;
  font-size:15px;
  transition:transform .15s, box-shadow .15s, background .15s;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.google-btn:hover{
  transform:translateY(-1px);
  background:#f8f9fa;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.google-btn svg{flex-shrink:0}
.auth-small{
  font-size:12px;
  color:var(--muted);
  margin:12px 0 24px;
  text-align:center;
  line-height:1.5;
}
.auth-small code{
  padding:1px 6px;
  background:var(--bg);
  border-radius:4px;
  font-family:'SF Mono',Menlo,monospace;
  font-size:11px;
}
.auth-sub code{
  padding:2px 8px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  font-family:'SF Mono',Menlo,monospace;
  font-size:12px;
  color:var(--primary);
}

/* ============ ADMIN LOGIN TOGGLE ============ */
.admin-login-toggle{
  margin-top:8px;
  padding-top:22px;
  border-top:1px solid var(--border);
}
.admin-login-toggle summary{
  cursor:pointer;
  font-size:12px;
  color:var(--muted);
  text-align:center;
  list-style:none;
  padding:6px;
  transition:color .2s;
}
.admin-login-toggle summary::-webkit-details-marker{display:none}
.admin-login-toggle summary:hover{color:var(--text)}
.admin-login-toggle summary::before{content:"⚙ "}
.admin-login-toggle[open] summary{color:var(--text);margin-bottom:14px}
.admin-form-inline{margin-bottom:0}

/* ============ SERVER CARDS ============ */
.srv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  grid-auto-rows:1fr;                     /* all rows equal height */
  gap:20px;
  align-items:stretch;
}
.srv-card{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:24px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:transform .3s, border-color .3s, background .3s;
  height:100%;                            /* fill grid cell */
}
.srv-card:hover{
  transform:translateY(-3px);
  background:var(--card-hover);
  border-color:var(--primary);
}
.srv-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.srv-name{font-size:17px;font-weight:700;margin-bottom:4px}
.srv-sub{font-size:13px;color:var(--muted)}
.srv-specs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px 16px;
  padding:16px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.srv-specs div{display:flex;flex-direction:column;gap:2px}
.srv-specs span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.srv-specs b{font-size:13px;font-weight:600;color:var(--text)}
.srv-foot{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.srv-price{font-size:13px;color:var(--muted)}
.srv-price b{
  font-size:22px;
  font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-right:4px;
}
.srv-due{font-size:12px;color:var(--muted)}

.srv-status{
  display:inline-block;
  padding:4px 10px;
  border-radius:100px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.srv-status-lg{padding:6px 14px;font-size:12px}
.srv-active{background:rgba(34,197,94,.15);color:#86efac;border:1px solid rgba(34,197,94,.3)}
.srv-pending{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}
.srv-suspended{background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.srv-terminated{background:rgba(100,116,139,.2);color:var(--muted);border:1px solid var(--border)}

/* ============ EMPTY STATE ============ */
.empty{
  text-align:center;
  padding:80px 24px;
  background:var(--card);
  border:1px dashed var(--border);
  border-radius:var(--radius-lg);
}
.empty-icon{font-size:56px;margin-bottom:16px}
.empty h3{font-size:22px;margin-bottom:10px}
.empty p{color:var(--muted);max-width:480px;margin:0 auto 26px;font-size:14px}

/* ============ DETAIL ============ */
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.detail-card{
  padding:28px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.detail-card h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.detail-list{display:grid;grid-template-columns:140px 1fr;gap:12px 16px}
.detail-list dt{font-size:13px;color:var(--muted)}
.detail-list dd{font-size:14px;color:var(--text)}
.detail-notes{grid-column:1/-1}
.detail-notes p{color:var(--muted);font-size:14px}

.support-cta{
  margin-top:32px;
  padding:20px 24px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  text-align:center;
  color:var(--muted);
  font-size:14px;
}
.support-cta a{color:var(--primary);font-weight:600}

/* ============ VPN ACCESS (ishosting details) ============ */
.vpn-access{
  margin-bottom:30px;
  padding:26px 28px;
  background:linear-gradient(180deg,#0c1124,#14192e);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.vpn-access-head h2{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:4px;
}
.vpn-access-head p{font-size:13px;margin-bottom:22px}
.vpn-access-head code{
  padding:2px 8px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text);
}
.vpn-access-state{
  padding:40px 20px;
  text-align:center;
}
.vpn-access-error{
  padding:20px;
  text-align:center;
  border:1px dashed rgba(239,68,68,.4);
  border-radius:12px;
  margin-top:14px;
}

.vpn-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:22px;
}
.vpn-tab{
  flex:1;
  min-width:120px;
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  transition:all .15s;
  white-space:nowrap;
  background:transparent;
}
.vpn-tab:hover{color:var(--text)}
.vpn-tab.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  box-shadow:0 4px 14px rgba(99,102,241,.35);
}

.vpn-panel{display:none;animation:fadeIn .25s ease}
.vpn-panel.active{display:block}

/* WireGuard grid */
.vpn-wg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}
.wg-card{
  padding:14px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  text-align:center;
  transition:border-color .2s;
}
.wg-card:hover{border-color:rgba(99,102,241,.4)}
.wg-card-head{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  margin-bottom:10px;
}
.wg-qr{
  width:100%;
  max-width:150px;
  aspect-ratio:1/1;
  margin:0 auto 12px;
  padding:6px;
  background:#fff;
  border-radius:8px;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  display:block;
}
.wg-card-actions{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
}

/* OpenVPN grid */
.vpn-ovpn-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px;
}
.ovpn-card{
  padding:12px 14px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ovpn-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}
.ovpn-badge{
  padding:2px 8px;
  border-radius:100px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
}
.ovpn-tcp .ovpn-badge{background:rgba(34,158,217,.15);color:#93c5fd;border:1px solid rgba(34,158,217,.3)}
.ovpn-udp .ovpn-badge{background:rgba(34,197,94,.15);color:#86efac;border:1px solid rgba(34,197,94,.3)}

/* PPTP/L2TP + SOCKS creds table */
.vpn-creds-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
.vpn-creds-table th,
.vpn-creds-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  text-align:left;
}
.vpn-creds-table th{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  background:rgba(255,255,255,.02);
}
.vpn-creds-table td{font-size:13px}
.vpn-creds-table tr:last-child td{border-bottom:none}

.vpn-single-creds{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.vpn-cred-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:10px;
}
.vpn-cred-label{
  flex-shrink:0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:700;
  min-width:140px;
}
.vpn-cred-value{
  flex:1;
  font-size:14px;
  word-break:break-all;
}

.vpn-copy-btn{
  flex-shrink:0;
  padding:5px 12px;
  background:rgba(99,102,241,.1);
  border:1px solid rgba(99,102,241,.3);
  border-radius:6px;
  font-size:11px;
  font-weight:600;
  color:#c7d2fe;
  transition:all .15s;
  white-space:nowrap;
}
.vpn-copy-btn:hover{background:rgba(99,102,241,.2);color:#fff}
.vpn-copy-btn.copied{
  background:rgba(34,197,94,.2);
  border-color:rgba(34,197,94,.4);
  color:#86efac;
}

@media (max-width:720px){
  .vpn-tab{min-width:unset;flex:1 1 40%;font-size:12px}
  .vpn-cred-row{flex-direction:column;align-items:stretch}
  .vpn-cred-label{min-width:unset}
}

/* ============ MONITORING (Proxmox summary) ============ */
.mon-section{
  margin-bottom:30px;
  padding:24px 26px;
  background:linear-gradient(180deg,#0c1124,#14192e);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
.mon-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:22px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.mon-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.01em;
}
.mon-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}
.mon-sub span{
  color:var(--text);
  font-family:'SF Mono',Menlo,monospace;
}
.mon-status{
  padding:6px 14px;
  border-radius:100px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  flex-shrink:0;
  white-space:nowrap;
}
.mon-status-loading{
  background:rgba(245,158,11,.12);
  color:#fcd34d;
  border:1px solid rgba(245,158,11,.3);
}
.mon-status-ok{
  background:rgba(34,197,94,.12);
  color:#86efac;
  border:1px solid rgba(34,197,94,.35);
  animation:mon-pulse 2.5s ease-in-out infinite;
}
.mon-status-err{
  background:rgba(239,68,68,.12);
  color:#fca5a5;
  border:1px solid rgba(239,68,68,.35);
}
@keyframes mon-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4)}
  50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}
}

.mon-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.mon-grid .mon-card-info{grid-column:1/-1}

.mon-card{
  padding:18px 20px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  transition:border-color .25s;
}
.mon-card:hover{border-color:rgba(99,102,241,.35)}
.mon-card-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:12px;
}
.mon-card-head span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:700;
}
.mon-card-head b{
  font-size:22px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.mon-bar{
  position:relative;
  height:8px;
  background:rgba(255,255,255,.04);
  border-radius:100px;
  overflow:hidden;
  margin-bottom:14px;
}
.mon-bar-fill{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0%;
  border-radius:100px;
  transition:width .5s ease, background .3s;
}
.bar-low{background:linear-gradient(90deg,#22c55e,#86efac)}
.bar-mid{background:linear-gradient(90deg,#22d3ee,#6366f1)}
.bar-high{background:linear-gradient(90deg,#f59e0b,#fcd34d)}
.bar-crit{background:linear-gradient(90deg,#ef4444,#fca5a5)}

.mon-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.mon-card-swap .mon-meta,
.mon-card-mem .mon-meta,
.mon-card-disk .mon-meta{grid-template-columns:repeat(3,1fr)}
.mon-card-swap .mon-meta{grid-template-columns:repeat(2,1fr)}
.mon-meta-vert{
  grid-template-columns:1fr 1fr;
  gap:14px 28px;
}
.mon-meta div{display:flex;flex-direction:column;gap:2px;min-width:0}
.mon-meta span{
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.mon-meta b{
  font-size:12px;
  font-weight:600;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mon-meta b.mono{font-family:'SF Mono',Menlo,monospace;font-size:11px}
.mon-meta .mon-kernel{font-size:10px}

@media (max-width:860px){
  .mon-grid{grid-template-columns:1fr}
  .mon-meta{grid-template-columns:1fr 1fr}
  .mon-meta-vert{grid-template-columns:1fr}
}

/* ============ INVOICES ============ */
.invoices-table{font-size:13px}
.invoice-row.inv-open td{background:rgba(245,158,11,.05)}
.invoice-row.inv-paid td{background:rgba(34,197,94,.04);opacity:.85}
.invoice-row.inv-cancelled td{opacity:.5}

.invoice-card{max-width:760px}
.invoice-amount{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:18px 22px;
  margin:16px 0 22px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
}
.invoice-amount span{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.invoice-amount b{
  font-size:32px;
  font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.order-quick-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0 10px;
  padding:12px 16px;
  background:rgba(239,68,68,.04);
  border:1px dashed rgba(239,68,68,.3);
  border-radius:10px;
  font-size:13px;
}
.order-quick-actions .small{font-size:11px}

/* ============ BALANCE STRIP (profile) ============ */
.balance-strip{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin-bottom:28px;
}
.bal-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:18px 20px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.bal-item span{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.bal-item b{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}
.bal-item small{
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}
.bal-item .bal-cta{
  display:inline-block;
  margin-top:8px;
  padding:4px 10px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  font-size:11px;
  font-weight:700;
  border-radius:6px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.bal-primary{
  background:linear-gradient(180deg,rgba(34,197,94,.08),var(--card));
  border-color:rgba(34,197,94,.3);
}
.bal-primary b{
  background:linear-gradient(135deg,#22c55e,#86efac);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.bal-warn{
  background:linear-gradient(180deg,rgba(245,158,11,.08),var(--card));
  border-color:rgba(245,158,11,.3);
}
.bal-warn b{color:#fcd34d}

@media (max-width:860px){
  .balance-strip{grid-template-columns:1fr 1fr}
}

/* ============ TICKETS ============ */
.tickets-table{font-size:13px}
.ticket-row.ticket-new-reply td,
.ticket-row.ticket-awaiting td{
  background:rgba(245,158,11,.04);
}
.ticket-badge-new,
.ticket-badge-awaiting{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  background:rgba(245,158,11,.15);
  color:#fcd34d;
  border:1px solid rgba(245,158,11,.35);
  border-radius:100px;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  vertical-align:middle;
}
.ticket-badge-new{
  background:rgba(34,197,94,.15);
  color:#86efac;
  border-color:rgba(34,197,94,.35);
}

.ticket-head-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.ticket-new-card{max-width:760px}

/* ---- Thread ---- */
.ticket-thread{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:26px;
}
.tkt-msg{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  max-width:85%;
}
.tkt-msg-client{
  align-self:flex-end;
  background:linear-gradient(180deg,rgba(99,102,241,.08),var(--card));
  border-color:rgba(99,102,241,.3);
}
.tkt-msg-admin{
  align-self:flex-start;
  background:linear-gradient(180deg,rgba(245,158,11,.06),var(--card));
  border-color:rgba(245,158,11,.3);
}
.tkt-msg-head{
  display:flex;
  align-items:center;
  gap:10px;
}
.tkt-avatar{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  background:var(--bg);
  border:1px solid var(--border);
  overflow:hidden;
}
.tkt-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.tkt-msg-admin .tkt-avatar{
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  color:#fff;
  border-color:rgba(245,158,11,.55);
}
.tkt-msg-meta{
  display:flex;
  flex-direction:column;
  gap:1px;
  line-height:1.2;
}
.tkt-msg-meta b{
  font-size:13px;
  font-weight:700;
}
.tkt-msg-body{
  font-size:14px;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
  color:var(--text);
}

.ticket-reply-form h3{
  font-size:15px;
  font-weight:700;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.ticket-reply-form label{display:block;margin-bottom:14px}
.ticket-reply-form span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:500;
}
.ticket-reply-form textarea{
  width:100%;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  resize:vertical;
  line-height:1.55;
}
.ticket-reply-form textarea:focus{outline:none;border-color:var(--primary)}
.ticket-reply-form button{margin-top:4px}

.tickets-filter{
  grid-template-columns:1fr;
}
.tickets-filter .chip{
  display:inline-block;
  text-decoration:none;
}

@media (max-width:860px){
  .spotlight-row{grid-template-columns:1fr}
  .tkt-msg{max-width:100%}
}

/* ============ POWER MANAGEMENT ============ */
.power-section{
  margin-top:20px;
  padding-top:22px;
  border-top:1px solid var(--border);
}
.power-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:16px;
  gap:12px;
  flex-wrap:wrap;
}
.power-head h3{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
}
.power-head .muted{
  font-size:11px;
}

.power-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.power-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:16px 18px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text);
  cursor:pointer;
  transition:all .2s;
  text-align:left;
  font-family:inherit;
}
.power-btn:hover:not(:disabled){
  transform:translateY(-2px);
  background:rgba(255,255,255,.04);
}
.power-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.power-icon{
  font-size:22px;
  line-height:1;
  margin-bottom:4px;
}
.power-label{
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
}
.power-hint{
  font-size:11px;
  color:var(--muted);
}

/* color coding per action */
.power-reboot:hover:not(:disabled){
  border-color:rgba(66,133,244,.55);
  box-shadow:0 8px 24px rgba(66,133,244,.2);
}
.power-reboot .power-icon{color:#93c5fd}

.power-off:hover:not(:disabled){
  border-color:rgba(239,68,68,.55);
  box-shadow:0 8px 24px rgba(239,68,68,.2);
}
.power-off .power-icon{color:#fca5a5}

.power-on:hover:not(:disabled){
  border-color:rgba(34,197,94,.55);
  box-shadow:0 8px 24px rgba(34,197,94,.2);
}
.power-on .power-icon{color:#86efac}

.power-ipmi:hover:not(:disabled){
  border-color:rgba(245,158,11,.55);
  box-shadow:0 8px 24px rgba(245,158,11,.2);
}
.power-ipmi .power-icon{color:#fcd34d}

.power-result{
  margin-top:16px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg);
  font-size:13px;
  animation:fadeIn .25s ease;
}
.power-result-icon{
  flex-shrink:0;
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  background:rgba(255,255,255,.05);
}
.power-result-text{flex:1;line-height:1.45}

.power-result-ok{
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.4);
  color:#86efac;
}
.power-result-ok .power-result-icon{
  background:rgba(34,197,94,.2);
  color:#86efac;
}

.power-result-err{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.4);
  color:#fca5a5;
}
.power-result-err .power-result-icon{
  background:rgba(239,68,68,.2);
  color:#fca5a5;
}

.power-result-info{
  background:rgba(245,158,11,.08);
  border-color:rgba(245,158,11,.4);
  color:#fcd34d;
}
.power-result-info .power-result-icon{
  background:rgba(245,158,11,.2);
  color:#fcd34d;
}

.power-result-loading{
  background:rgba(99,102,241,.06);
  border-color:rgba(99,102,241,.35);
  color:#c7d2fe;
}
.power-result-loading .power-result-icon{
  background:rgba(99,102,241,.2);
  color:#c7d2fe;
  animation:pulse 1.5s infinite;
}

@media (max-width:860px){
  .power-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .power-grid{grid-template-columns:1fr}
}

/* ============ PROFILE ============ */
.profile-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:24px;
  align-items:start;
}
.profile-form{display:flex;flex-direction:column;gap:16px}
.profile-form label{display:block}
.profile-form span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:500}
.profile-form input{
  width:100%;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
}
.profile-form input:focus{outline:none;border-color:var(--primary)}
.profile-form button{align-self:flex-start;margin-top:6px}

/* ============ ADMIN ============ */
.admin-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
.admin-full{grid-column:1/-1}
.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.admin-table th,
.admin-table td{
  padding:10px 12px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
.admin-table th{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:rgba(255,255,255,.02)}

.badge-admin{
  display:inline-block;
  padding:2px 8px;
  background:rgba(168,85,247,.15);
  color:#c4b5fd;
  border:1px solid rgba(168,85,247,.3);
  border-radius:100px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
}
.badge-google{
  display:inline-block;
  padding:2px 8px;
  background:rgba(66,133,244,.12);
  color:#93c5fd;
  border:1px solid rgba(66,133,244,.3);
  border-radius:100px;
  font-size:11px;
  font-weight:600;
}
.badge-password{
  display:inline-block;
  padding:2px 8px;
  background:rgba(100,116,139,.15);
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:100px;
  font-size:11px;
  font-weight:600;
}
.user-avatar{
  width:18px;
  height:18px;
  border-radius:50%;
  vertical-align:middle;
  margin-right:6px;
  border:1px solid var(--border);
}
.row-actions{
  display:flex;
  gap:4px;
  align-items:center;
  white-space:nowrap;
}
.inline-form{display:inline}
.link-action{
  color:var(--muted);
  font-size:11px;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:transparent;
  transition:all .15s;
  cursor:pointer;
  white-space:nowrap;
}
.link-action:hover{color:var(--primary);border-color:var(--primary)}
.muted.small{font-size:11px}

/* ============ SUPER ADMIN LOGIN CARD ============ */
.admin-login-card{
  background:linear-gradient(180deg,rgba(168,85,247,.08),var(--card));
  border-color:rgba(168,85,247,.35);
  box-shadow:0 30px 80px rgba(168,85,247,.12);
}
.admin-badge{
  display:inline-block;
  padding:5px 12px;
  background:rgba(168,85,247,.15);
  color:#c4b5fd;
  border:1px solid rgba(168,85,247,.35);
  border-radius:100px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  margin-bottom:16px;
}

.admin-form{display:flex;flex-direction:column;gap:14px}
.admin-form label{display:block}
.admin-form span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;font-weight:500}
.admin-form input,
.admin-form select,
.admin-form textarea{
  width:100%;
  padding:10px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font-family:inherit;
  font-size:13px;
}
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus{outline:none;border-color:var(--primary)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.admin-form button[type="submit"]{
  align-self:flex-start;
  margin-top:8px;
}

.link-danger{
  color:var(--muted);
  font-size:12px;
  transition:color .2s;
  cursor:pointer;
  padding:4px 8px;
}
.link-danger:hover{color:var(--danger)}

/* ============ TELEGRAM TEST BAR ============ */
.tg-test-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 20px;
  margin-bottom:24px;
  background:linear-gradient(135deg,rgba(34,158,217,.08),rgba(99,102,241,.04));
  border:1px solid rgba(34,158,217,.25);
  border-radius:12px;
  font-size:13px;
}
.tg-test-bar b{color:var(--text);margin:0 6px}
.tg-test-bar .muted{font-size:12px}
.tg-icon{
  display:inline-block;
  width:28px;height:28px;
  margin-right:8px;
  text-align:center;
  line-height:28px;
  background:rgba(34,158,217,.18);
  border-radius:8px;
  font-size:16px;
  vertical-align:middle;
}
.tg-test-actions{display:flex;gap:8px;align-items:center}

/* ============ PROFILE TELEGRAM LINK CARD ============ */
.tg-link-card{
  background:linear-gradient(180deg,rgba(34,158,217,.06),var(--card));
  border-color:rgba(34,158,217,.25);
}
.tg-linked{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.tg-status-ok{
  display:inline-block;
  padding:8px 14px;
  background:rgba(34,197,94,.12);
  color:#86efac;
  border:1px solid rgba(34,197,94,.35);
  border-radius:100px;
  font-size:13px;
  font-weight:700;
  align-self:flex-start;
}
.tg-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.tg-link-form{display:flex;flex-direction:column;gap:12px}
.tg-link-form .cab-btn-primary{
  background:linear-gradient(135deg,#229ED9,#1a8ec7);
  box-shadow:0 8px 24px rgba(34,158,217,.35);
}
.tg-link-form .cab-btn-primary:hover{
  box-shadow:0 12px 32px rgba(34,158,217,.5);
}

/* ============ INFERNO SPOTLIGHT ============ */
.inferno-spotlight{
  display:flex;
  align-items:center;
  gap:22px;
  padding:22px 26px;
  margin-bottom:28px;
  background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(168,85,247,.08));
  border:1px solid rgba(99,102,241,.3);
  border-radius:var(--radius-lg);
  transition:transform .25s, border-color .25s, box-shadow .25s;
  box-shadow:0 14px 40px rgba(99,102,241,.08);
}
.inferno-spotlight:hover{
  transform:translateY(-2px);
  border-color:var(--primary);
  box-shadow:0 20px 56px rgba(99,102,241,.25);
}
.spotlight-icon{
  flex-shrink:0;
  width:56px;height:56px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  box-shadow:0 12px 32px rgba(99,102,241,.35);
}
.spotlight-body{flex:1}
.spotlight-title{
  font-size:17px;
  font-weight:700;
  margin-bottom:4px;
  display:flex;
  align-items:center;
  gap:10px;
}
.spotlight-sub{
  font-size:13px;
  color:var(--muted);
}
.spotlight-sub b{color:var(--text)}
.spotlight-arrow{
  font-size:24px;
  color:var(--primary);
  flex-shrink:0;
}
.dot{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  box-shadow:0 0 8px currentColor;
}
.dot-ok{background:var(--success);color:var(--success)}
.dot-off{background:var(--muted);color:var(--muted);box-shadow:none}

.badge-inferno{
  display:inline-block;
  padding:1px 6px;
  margin-left:6px;
  background:rgba(99,102,241,.12);
  color:#c7d2fe;
  border:1px solid rgba(99,102,241,.3);
  border-radius:4px;
  font-size:10px;
  font-family:'SF Mono',Menlo,monospace;
  vertical-align:middle;
}

/* ============ PROFIT SUMMARY ============ */
.profit-summary{
  display:grid;
  grid-template-columns:1.2fr auto 1.2fr auto 1.2fr 0.8fr;
  gap:10px 16px;
  align-items:center;
  padding:26px 30px;
  margin-bottom:28px;
  background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(99,102,241,.06));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 14px 40px rgba(34,197,94,.04);
}
.profit-summary.compact{
  padding:18px 22px;
  margin-bottom:20px;
}
.profit-item{display:flex;flex-direction:column;gap:4px}
.profit-item span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  font-weight:500;
}
.profit-item b{
  font-size:24px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--text);
}
.profit-item b small{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  margin-left:4px;
}
.profit-summary.compact .profit-item b{font-size:20px}
.profit-divider{
  font-size:22px;
  color:var(--muted);
  font-weight:300;
}
.profit-item-main b{
  font-size:28px !important;
}
.profit-summary.compact .profit-item-main b{font-size:22px !important}
.profit-positive b,
.profit-item-main.profit-positive b{
  background:linear-gradient(135deg,#22c55e,#86efac);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.profit-negative b,
.profit-item-main.profit-negative b{
  background:linear-gradient(135deg,#ef4444,#fca5a5);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.profit-item-pct{
  border-left:1px solid var(--border);
  padding-left:20px;
  margin-left:10px;
}
.profit-item-pct b{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============ PROFIT CELLS IN TABLES ============ */
.cost-cell{
  color:var(--muted);
  font-size:13px;
}
.cost-cell small{font-size:10px;opacity:.7}
.price-cell b{
  font-size:15px;
  font-weight:800;
}
.profit-cell{
  font-size:14px;
  white-space:nowrap;
}
.profit-cell.profit-positive b{color:#86efac;font-weight:800}
.profit-cell.profit-negative b{color:#fca5a5;font-weight:800}
.margin-small{
  font-size:11px;
  color:var(--muted);
  margin-left:4px;
}

/* ============ SERVER DETAIL: PROFIT BREAKDOWN ============ */
.profit-breakdown{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pb-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:14px;
  padding:8px 0;
}
.pb-row span{color:var(--muted)}
.pb-row b{font-size:15px;font-weight:700}
.pb-total{
  padding-top:14px !important;
  margin-top:4px;
  border-top:1px solid var(--border);
}
.pb-total b{font-size:22px !important;font-weight:800}
.pb-total.profit-positive b{color:#86efac}
.pb-total.profit-negative b{color:#fca5a5}
.pb-margin{
  padding-top:4px;
  padding-bottom:0;
  font-size:12px;
}
.pb-margin b{
  font-size:13px;
  color:var(--primary) !important;
}

/* ============ PRICE EDIT LABEL ============ */
.price-edit-label{position:relative}
.price-edit-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.price-edit-input{
  font-size:18px !important;
  font-weight:700;
  padding-right:56px !important;
}
.price-suffix{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  pointer-events:none;
}
.price-hint{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
}
.price-hint b{color:var(--text);font-weight:600}
.price-hint b.profit-positive{
  background:linear-gradient(135deg,#22c55e,#86efac);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.price-hint b.profit-negative{
  background:linear-gradient(135deg,#ef4444,#fca5a5);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.inferno-head-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

/* ============ SPOTLIGHT ROW (admin home) ============ */
.spotlight-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:16px;
  margin-bottom:28px;
}
.spotlight-row .inferno-spotlight{margin-bottom:0}

.tickets-spotlight{
  background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(99,102,241,.04));
  border-color:rgba(245,158,11,.25);
}
.tickets-spotlight:hover{
  border-color:#f59e0b;
  box-shadow:0 20px 56px rgba(245,158,11,.2);
}
.tickets-spotlight .spotlight-icon{
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  box-shadow:0 12px 32px rgba(245,158,11,.35);
}
.tickets-spotlight .spotlight-arrow{color:#fcd34d}

.invoices-spotlight{
  background:linear-gradient(135deg,rgba(239,68,68,.06),rgba(245,158,11,.04));
  border-color:rgba(239,68,68,.25);
}
.invoices-spotlight:hover{
  border-color:#ef4444;
  box-shadow:0 20px 56px rgba(239,68,68,.18);
}
.invoices-spotlight .spotlight-icon{
  background:linear-gradient(135deg,#ef4444,#f59e0b);
  box-shadow:0 12px 32px rgba(239,68,68,.32);
}
.invoices-spotlight .spotlight-arrow{color:#fca5a5}

.ishosting-spotlight{
  background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(34,211,238,.05));
  border-color:rgba(34,197,94,.3);
}
.ishosting-spotlight:hover{
  border-color:#22c55e;
  box-shadow:0 20px 56px rgba(34,197,94,.22);
}
.ishosting-spotlight .spotlight-icon{
  background:linear-gradient(135deg,#22c55e,#22d3ee);
  box-shadow:0 12px 32px rgba(34,197,94,.35);
}
.ishosting-spotlight .spotlight-arrow{color:#86efac}
.ishosting-spotlight .spotlight-sub b{
  color:var(--text);
  font-size:15px;
}

/* ============ ISHOSTING ADMIN PAGE ============ */
.ish-head{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:18px;
  margin-bottom:28px;
}
.ish-balance-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:26px 28px;
  background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(34,211,238,.06));
  border:1px solid rgba(34,197,94,.35);
  border-radius:var(--radius-lg);
  box-shadow:0 20px 50px rgba(34,197,94,.12);
}
.ish-balance-label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}
.ish-balance-value{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.ish-balance-value b{
  font-size:48px;
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1;
  background:linear-gradient(135deg,#22c55e,#86efac);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ish-balance-value span{
  font-size:16px;
  color:var(--muted);
  font-weight:600;
}

.ish-stats-card{
  padding:22px 26px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.ish-stats-title{
  font-size:13px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
  margin-bottom:14px;
}
.ish-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px 22px;
}
.ish-stats-grid > div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.ish-stats-grid span{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.ish-stats-grid b{
  font-size:20px;
  font-weight:800;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

@media (max-width:860px){
  .ish-head{grid-template-columns:1fr}
  .ish-stats-grid{grid-template-columns:repeat(2,1fr)}
  .ish-balance-value b{font-size:36px}
}

.orders-spotlight{
  background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(99,102,241,.05));
  border-color:rgba(34,197,94,.25);
}
.orders-spotlight:hover{
  border-color:var(--success);
  box-shadow:0 20px 56px rgba(34,197,94,.2);
}
.orders-spotlight .spotlight-icon{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 12px 32px rgba(34,197,94,.35);
}
.orders-spotlight .spotlight-arrow{color:var(--success)}

.spotlight-alert{
  background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(239,68,68,.06));
  border-color:rgba(245,158,11,.4);
  animation:spotlight-pulse 2.5s ease-in-out infinite;
}
.spotlight-alert .spotlight-icon{
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  box-shadow:0 12px 32px rgba(245,158,11,.45);
}
.spotlight-alert .spotlight-arrow{color:var(--warning)}
@keyframes spotlight-pulse{
  0%,100%{box-shadow:0 14px 40px rgba(245,158,11,.15)}
  50%{box-shadow:0 20px 56px rgba(245,158,11,.35)}
}

.pending-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:22px;
  padding:0 9px;
  margin-left:8px;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;
  font-size:12px;
  font-weight:800;
  border-radius:100px;
  box-shadow:0 4px 12px rgba(239,68,68,.4);
}

/* ============ ORDER PAGE — tabs ============ */
.order-tabs{
  display:inline-flex;
  gap:6px;
  padding:6px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  margin-bottom:28px;
}
.ord-tab{
  padding:10px 20px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  transition:all .2s;
}
.ord-tab.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  box-shadow:0 4px 14px rgba(99,102,241,.35);
}
.ord-section{display:none}
.ord-section.active{display:block;animation:fadeIn .4s ease}

/* ============ FILTER BAR ============ */
.filter-bar{
  display:grid;
  grid-template-columns:repeat(3,1fr) 240px;
  gap:20px;
  padding:22px 24px;
  margin-bottom:20px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.filter-group{display:flex;flex-direction:column;gap:8px}
.filter-group label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.chip{
  padding:7px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:12px;
  font-weight:500;
  color:var(--muted);
  transition:all .15s;
  white-space:nowrap;
}
.chip:hover{color:var(--text);border-color:var(--primary)}
.chip.active{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 12px rgba(99,102,241,.3);
}
.filter-search input{
  width:100%;
  padding:9px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  height:34px;
  margin-top:0;
}
.filter-search input:focus{outline:none;border-color:var(--primary)}

/* ============ RACK LIST (catalog in server-rack style) ============ */
.rack-wrap{
  padding:22px;
  background:linear-gradient(180deg,#0c1124,#14192e);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  margin-bottom:20px;
}
.rack-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rack-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:16px 20px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--muted);
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:13px;
  text-align:left;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.rack-row:hover,
.rack-row:focus-visible{
  background:linear-gradient(90deg,rgba(99,102,241,.15),rgba(168,85,247,.1));
  border-color:rgba(99,102,241,.55);
  color:var(--text);
  transform:translateX(2px);
  box-shadow:0 8px 24px rgba(99,102,241,.2);
  outline:none;
}
.rack-row:hover .rack-price b,
.rack-row:focus-visible .rack-price b{
  background:linear-gradient(135deg,#86efac,var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.rack-row:hover .rack-arrow{color:#86efac;transform:translateX(3px)}

.led-pair{
  display:flex;
  gap:6px;
  flex-shrink:0;
  margin-right:4px;
}
.rack-row .led{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#64748b;
  box-shadow:0 0 6px currentColor;
}
.rack-row .led.g{
  background:var(--success);
  color:var(--success);
  animation:pulse 2s infinite;
}

.rack-code{
  color:var(--text);
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
}
.rack-sep{
  color:var(--border);
  flex-shrink:0;
}
.rack-os{
  font-weight:500;
  white-space:nowrap;
}
.rack-row:hover .rack-os,
.rack-row:focus-visible .rack-os{color:#c7d2fe}
.rack-specs{
  white-space:nowrap;
  font-size:12px;
  opacity:.85;
}
.rack-spacer{flex:1}
.rack-price{
  flex-shrink:0;
  font-family:'Inter',-apple-system,sans-serif;
  font-size:13px;
  color:var(--muted);
}
.rack-price b{
  font-size:18px;
  font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-right:4px;
  transition:all .2s;
}
.rack-period{
  font-size:11px;
  color:var(--muted);
  margin-left:2px;
}
.rack-cost{
  display:block;
  margin-top:3px;
  padding:2px 8px;
  background:rgba(245,158,11,.08);
  border:1px dashed rgba(245,158,11,.4);
  border-radius:5px;
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:10px;
  font-weight:600;
  color:#fcd34d;
  letter-spacing:.01em;
  white-space:nowrap;
  text-align:right;
}
.rack-arrow{
  flex-shrink:0;
  font-size:18px;
  color:var(--primary);
  font-family:'Inter',-apple-system,sans-serif;
  transition:transform .2s, color .2s;
  width:20px;
  text-align:center;
}

.no-matches{
  padding:40px 24px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

.custom-order{padding:32px;max-width:680px}
.cc-note{
  font-size:11px;
  color:var(--muted);
  text-align:center;
  margin-top:10px;
  line-height:1.5;
}

/* ============ VPN SECTION (ishosting) ============ */
.vpn-intro{
  margin-bottom:22px;
  padding:18px 22px;
  background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(99,102,241,.04));
  border:1px solid rgba(34,197,94,.25);
  border-radius:var(--radius-lg);
}
.vpn-intro h3{
  font-size:17px;
  font-weight:800;
  margin-bottom:4px;
  letter-spacing:-.01em;
}
.vpn-intro p{font-size:13px;margin:0}

.vpn-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:18px;
}
.vpn-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 22px;
  background:linear-gradient(180deg,rgba(34,197,94,.03),var(--card));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  transition:transform .25s, border-color .25s, box-shadow .25s;
}
.vpn-card:hover{
  transform:translateY(-3px);
  border-color:rgba(34,197,94,.45);
  box-shadow:0 18px 44px rgba(34,197,94,.12);
}
.vpn-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.vpn-name{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:2px;
}
.vpn-sub{
  font-size:12px;
  color:var(--muted);
}
.vpn-price-live{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0;
  min-width:80px;
}
.vpn-price-live b{
  font-size:28px;
  font-weight:800;
  line-height:1;
  background:linear-gradient(135deg,#22c55e,#86efac);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:transform .2s;
}
.vpn-price-live span{
  font-size:10px;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-top:1px;
}

.vpn-connections{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.vpn-tag{
  padding:3px 9px;
  background:rgba(99,102,241,.1);
  color:#c7d2fe;
  border:1px solid rgba(99,102,241,.25);
  border-radius:100px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
}

.vpn-select{display:block}
.vpn-select > span{
  display:block;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:600;
  margin-bottom:6px;
}
.vpn-select select{
  width:100%;
  padding:10px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
}
.vpn-select select:focus{outline:none;border-color:var(--primary)}

@media (max-width:520px){
  .vpn-grid{grid-template-columns:1fr}
}

/* ============ MODAL ============ */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(6,9,18,.75);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:20px;
  animation:fadeIn .2s ease;
}
.modal-overlay[hidden]{display:none}
.modal-card{
  width:100%;
  max-width:520px;
  max-height:90vh;
  overflow-y:auto;
  padding:40px 36px 32px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 40px 100px rgba(0,0,0,.6);
  position:relative;
  animation:modalIn .25s ease;
}
@keyframes modalIn{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.modal-close{
  position:absolute;
  top:14px;
  right:18px;
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  color:var(--muted);
  font-size:22px;
  line-height:1;
  transition:all .15s;
}
.modal-close:hover{background:rgba(255,255,255,.1);color:var(--text)}
.modal-header{margin-bottom:22px;padding-right:40px}
.modal-eyebrow{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--primary);
  margin-bottom:6px;
}
.modal-title{
  font-size:26px;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:4px;
}
.modal-card .muted{font-size:12px}

.modal-specs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:18px 0;
  margin-bottom:22px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.modal-specs > div{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.modal-specs span{
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.modal-specs b{
  font-size:16px;
  font-weight:700;
}
.modal-specs b.price-override{
  font-size:22px;
  font-weight:800;
}

.modal-card form{display:flex;flex-direction:column;gap:14px}
.modal-card form label{display:block}
.modal-card form span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:500;
}
.modal-card form input,
.modal-card form select,
.modal-card form textarea{
  width:100%;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  font-family:inherit;
  font-size:14px;
}
.modal-card form input:focus,
.modal-card form select:focus,
.modal-card form textarea:focus{outline:none;border-color:var(--primary)}

/* ============ PAYMENT MODAL ============ */
.pay-card{
  max-width:460px;
  padding:34px 34px 28px;
  background:linear-gradient(180deg,rgba(99,102,241,.08),var(--card));
  border-color:rgba(99,102,241,.3);
}
.pay-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
.pay-header .usdt-mark{
  width:52px;height:52px;
  margin:0;
  font-size:28px;
  flex-shrink:0;
}
.pay-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.2;
}
.pay-context{
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
  line-height:1.3;
}
.pay-amount-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:14px 18px;
  margin-bottom:18px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
}
.pay-amount-row span{
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.pay-amount-row b{
  font-size:24px;
  font-weight:800;
  background:linear-gradient(135deg,#26a17b,#86efac);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.pay-qr{
  display:flex;
  justify-content:center;
  margin-bottom:20px;
  padding:18px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:14px;
}
.pay-qr img{
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border-radius:6px;
}
.pay-qr-fallback{
  padding:40px 20px;
  color:var(--muted);
  font-size:13px;
  text-align:center;
}
.pay-field{margin-bottom:14px}
.pay-field label{
  display:block;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
  margin-bottom:6px;
}
.pay-value{
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:13px;
  color:var(--text);
}
.pay-network{
  display:inline-block;
  padding:6px 12px;
  background:rgba(38,161,123,.12);
  color:#86efac;
  border:1px solid rgba(38,161,123,.35);
  border-radius:8px;
  font-weight:600;
}
.pay-address-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
}
.pay-address{
  flex:1;
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:12px;
  color:var(--text);
  word-break:break-all;
  background:none;
  padding:0;
}
.pay-copy{
  flex-shrink:0;
  padding:6px 12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  transition:all .2s;
  box-shadow:0 4px 12px rgba(99,102,241,.3);
}
.pay-copy:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(99,102,241,.45)}
.pay-copy.copied{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  box-shadow:0 4px 12px rgba(34,197,94,.4);
}
.pay-hint{
  margin-top:18px;
  padding:12px 14px;
  background:rgba(245,158,11,.06);
  border:1px solid rgba(245,158,11,.25);
  border-radius:9px;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}
.pay-hint b{color:#fcd34d}

/* ============ PAYMENT VERIFY ("I paid") ============ */
.pay-verify{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.pay-verify-toggle{
  margin-top:0;
}
.pay-verify-form{display:flex;flex-direction:column;gap:12px}
.pay-verify-form label{display:block}
.pay-verify-form span{
  display:block;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
  font-weight:600;
}
.pay-verify-form input{
  width:100%;
  padding:11px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:9px;
  color:var(--text);
  font-family:'SF Mono',Menlo,monospace;
  font-size:12px;
  word-break:break-all;
}
.pay-verify-form input:focus{outline:none;border-color:var(--primary)}
.pay-verify-actions{
  display:flex;
  gap:10px;
}
.pay-verify-actions .cab-btn-primary{flex:1}
.cab-btn-ghost-small{
  padding:11px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:9px;
  font-size:13px;
  color:var(--muted);
  transition:all .15s;
}
.cab-btn-ghost-small:hover{color:var(--text);border-color:var(--primary)}

.pay-result{
  margin-top:14px;
  padding:14px 16px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg);
  animation:fadeIn .25s ease;
}
.pay-result-icon{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:700;
}
.pay-result-body{flex:1;line-height:1.45}
.pay-result-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:3px;
}
.pay-result-text{
  font-size:12px;
  color:var(--muted);
}

.pay-result-confirmed{
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.4);
}
.pay-result-confirmed .pay-result-icon{background:rgba(34,197,94,.2);color:#86efac}
.pay-result-confirmed .pay-result-title{color:#86efac}

.pay-result-pending,
.pay-result-loading{
  background:rgba(99,102,241,.06);
  border-color:rgba(99,102,241,.35);
}
.pay-result-pending .pay-result-icon,
.pay-result-loading .pay-result-icon{
  background:rgba(99,102,241,.2);
  color:#c7d2fe;
  animation:pulse 1.5s infinite;
}
.pay-result-pending .pay-result-title,
.pay-result-loading .pay-result-title{color:#c7d2fe}

.pay-result-mismatch{
  background:rgba(245,158,11,.08);
  border-color:rgba(245,158,11,.35);
}
.pay-result-mismatch .pay-result-icon{background:rgba(245,158,11,.2);color:#fcd34d}
.pay-result-mismatch .pay-result-title{color:#fcd34d}

.pay-result-failed{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.35);
}
.pay-result-failed .pay-result-icon{background:rgba(239,68,68,.2);color:#fca5a5}
.pay-result-failed .pay-result-title{color:#fca5a5}

/* Renew button in server card (dashboard) */
.srv-card-body{
  display:flex;
  flex-direction:column;
  gap:18px;
  color:inherit;
  flex:1 1 auto;            /* take all available height so button lines up */
  min-height:0;
}
.srv-card-body .srv-foot{
  margin-top:auto;          /* pin price block to the bottom of the body */
}
.srv-renew{
  margin-top:0;
  padding:11px 16px;
  font-size:13px;
  border-radius:9px;
  align-self:stretch;       /* button fills card width regardless of content */
}
.renew-btn{margin-top:18px;margin-bottom:8px}

/* ============ ORDERS TABLE (client + admin) ============ */
.orders-section{margin-top:40px}
.section-title{
  font-size:20px;
  font-weight:800;
  margin-bottom:16px;
  letter-spacing:-.01em;
}
.orders-table{font-size:13px}
.order-row.order-pending td{background:rgba(245,158,11,.03)}
.order-row.order-approved td{background:rgba(99,102,241,.03)}
.order-row.order-rejected td,
.order-row.order-cancelled td{opacity:.55}
.order-row.order-fulfilled td{background:rgba(34,197,94,.04)}

.order-status{
  display:inline-block;
  padding:3px 10px;
  border-radius:100px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.ord-pending{background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.35)}
.ord-approved{background:rgba(99,102,241,.15);color:#c7d2fe;border:1px solid rgba(99,102,241,.35)}
.ord-rejected{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}
.ord-fulfilled{background:rgba(34,197,94,.15);color:#86efac;border:1px solid rgba(34,197,94,.35)}
.ord-cancelled{background:rgba(100,116,139,.15);color:var(--muted);border:1px solid var(--border)}

/* ============ ADMIN ORDER CARDS ============ */
.order-card{margin-bottom:20px}
.order-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border);
}
.order-title{
  font-size:17px;
  font-weight:700;
  margin-bottom:4px;
}
.order-status-lg .order-status{
  padding:6px 14px;
  font-size:12px;
}
.order-message{
  margin:16px 0;
  padding:14px 16px;
  background:var(--bg);
  border-left:3px solid var(--primary);
  border-radius:6px;
}
.order-message p{margin-top:6px;font-size:14px;white-space:pre-wrap}
.order-actions-form{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.order-actions-form label{display:block}
.order-actions-form span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:500}
.order-actions-form textarea,
.order-actions-form input,
.order-actions-form select{
  width:100%;
  padding:10px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font-family:inherit;
  font-size:13px;
}
.order-actions-form textarea:focus,
.order-actions-form input:focus,
.order-actions-form select:focus{outline:none;border-color:var(--primary)}
.order-actions-form button{align-self:flex-start}

/* ============ INFERNO PAGE ============ */
.balance-card{
  padding:16px 22px;
  background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(168,85,247,.1));
  border:1px solid rgba(99,102,241,.3);
  border-radius:var(--radius);
  text-align:right;
}
.balance-card span{
  display:block;
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.balance-card b{
  font-size:22px;
  font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.inferno-table .assigned-row td{
  background:rgba(34,197,94,.05);
}
.inferno-table .prepared-row td{
  background:rgba(245,158,11,.04);
}
.price-override{
  font-size:16px;
  font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============ ADMIN-ONLY NOTES ============ */
.admin-only-card{
  background:linear-gradient(180deg,rgba(245,158,11,.06),var(--card));
  border-color:rgba(245,158,11,.3);
}
.admin-only-card h3{
  color:#fcd34d;
  border-bottom-color:rgba(245,158,11,.2);
}
.admin-only-card p{
  color:var(--text);
  white-space:pre-wrap;
}

.admin-notes-field{
  position:relative;
  padding:14px 16px;
  background:rgba(245,158,11,.04);
  border:1px dashed rgba(245,158,11,.3);
  border-radius:10px;
  margin-top:8px;
}
.admin-notes-field > span{
  color:#fcd34d !important;
  margin-bottom:8px !important;
}
.admin-notes-field > span b{color:#fcd34d}
.admin-notes-field textarea{
  background:var(--bg) !important;
}
.admin-notes-field small{
  display:block;
  margin-top:6px;
  font-size:11px;
  color:var(--muted);
  line-height:1.5;
}
.admin-notes-field small code{
  padding:1px 5px;
  background:var(--bg);
  border-radius:3px;
  font-family:'SF Mono',Menlo,monospace;
  font-size:10px;
}
.assign-form{
  display:flex;
  gap:6px;
  align-items:center;
}
.assign-form select{
  padding:6px 8px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  font-size:12px;
}
.cab-btn-primary.small{
  padding:6px 14px;
  font-size:12px;
  box-shadow:0 4px 12px rgba(99,102,241,.25);
}

.admin-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:24px 0;
  padding:16px 22px;
  background:rgba(168,85,247,.08);
  border:1px solid rgba(168,85,247,.25);
  border-radius:var(--radius);
  font-size:13px;
}
.admin-bar b{color:var(--muted);margin-right:6px}
.admin-bar code{
  padding:2px 8px;
  background:var(--bg);
  border-radius:4px;
  color:var(--text);
}

.alert code{
  padding:1px 6px;
  background:rgba(0,0,0,.3);
  border-radius:4px;
  font-family:'SF Mono',Menlo,monospace;
  font-size:12px;
}

.srv-status.srv-Active{background:rgba(34,197,94,.15);color:#86efac;border:1px solid rgba(34,197,94,.3)}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .filter-bar{grid-template-columns:1fr 1fr;gap:16px;padding:18px 20px}
  .filter-search{grid-column:1/-1}
  .rack-row{font-size:12px;padding:14px 16px;gap:10px}
  .rack-price b{font-size:16px}
}
@media (max-width:860px){
  .page-head h1{font-size:26px}
  .detail-grid,.profile-grid,.form-row,.spotlight-row{grid-template-columns:1fr}
  .rack-wrap{padding:14px}
  .rack-row{
    flex-wrap:wrap;
    row-gap:4px;
    padding:14px 16px;
  }
  .rack-row .rack-spacer{flex-basis:100%;height:0}
  .rack-row .rack-price{margin-left:22px}
  .rack-row .rack-arrow{margin-left:auto}
  .modal-card{padding:32px 24px 24px}
  .modal-specs{grid-template-columns:1fr 1fr}
  .modal-specs > div:nth-child(3){grid-column:1/-1}
  .cab-nav-links{display:none}
  .cab-user{gap:10px}
  .cab-email{display:none}
  .auth-card{padding:32px 24px}
  .cab-tag{display:none}
}
@media (max-width:560px){
  .srv-grid{grid-template-columns:1fr}
  .srv-specs{grid-template-columns:1fr}
  .detail-list{grid-template-columns:1fr;gap:4px 16px}
  .detail-list dt{margin-top:8px}
  .admin-table{font-size:12px}
  .admin-table th,.admin-table td{padding:8px 6px}
}