*{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg-primary:#0a0a0f;
  --bg-secondary:#111118;
  --bg-card:#14141c;
  --bg-tertiary:#1a1a24;
  --border:#252535;
  --border-light:#303040;
  --text:#f1f5f9;
  --text-dim:#94a3b8;
  --text-muted:#64748b;
  --purple:#8b5cf6;
  --purple-deep:#6d28d9;
  --green:#10b981;
  --red:#ef4444;
  --orange:#f59e0b;
  --blue:#3b82f6;
  --shadow:0 20px 40px rgba(0,0,0,.45);
  --radius:16px;
  --radius-sm:10px;
  --transition:all .22s cubic-bezier(.4,0,.2,1);
  --font:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html{scroll-behavior:smooth}

body{
  background:var(--bg-primary);
  color:var(--text);
  font-family:var(--font);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* subtle backdrop and layered background to enrich the page like the prototype */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle at 10% 10%, rgba(139,92,246,0.06), transparent 8%), radial-gradient(circle at 90% 80%, rgba(59,130,246,0.04), transparent 12%), linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%);
  pointer-events: none;
}

.logo-text{
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.5px;
  background: linear-gradient(135deg, var(--text), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-icon{
  box-shadow: 0 6px 18px rgba(139,92,246,0.12), inset 0 -6px 12px rgba(0,0,0,0.2);
  transform: translateZ(0);
}

/* slightly stronger card lift and smoother shadow */
.vm-card:hover, .card:hover, .stat-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(2,6,23,0.6), 0 6px 18px rgba(0,0,0,0.35);
}

/* modernize primary button with subtle gradient and focus ring */
.btn-primary{
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color:#fff;
  box-shadow: 0 8px 20px rgba(139,92,246,0.18);
}
.btn-primary:focus{outline:none;box-shadow:0 0 0 6px rgba(139,92,246,0.08), 0 8px 20px rgba(139,92,246,0.18)}

/* subtle animated accent for active tabs/nav */
.nav-link.active{position:relative}
.nav-link.active::after{content:'';position:absolute;left:10%;right:10%;bottom:-8px;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--purple),var(--purple-deep));opacity:.95}

/* ─── HEADER ─────────────────────────────────────────────── */
.site-header{
  position:sticky;
  top:0;
  z-index:200;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.header-inner{
  max-width:1400px;
  margin:0 auto;
  padding:0 1.75rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  gap:1.5rem;
}

.logo{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color:var(--text);
  flex-shrink:0;
}

.logo-icon{
  width:34px;height:34px;
  background:linear-gradient(135deg,var(--purple),var(--purple-deep));
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  color:#fff;
}

.logo-text{
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:-.5px;
}

.nav{
  display:flex;
  align-items:center;
  gap:.2rem;
  flex-shrink:0;
}

.nav-link{
  padding:.5rem .9rem;
  color:var(--text-dim);
  background:none;
  border:none;
  border-radius:6px;
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
}

.nav-link:hover,.nav-link.active{
  color:var(--text);
  background:var(--bg-tertiary);
}

.nav-link.active{color:var(--purple)}

.header-right{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-shrink:0;
}

.user-badge{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.4rem .7rem .4rem .4rem;
  background:var(--bg-tertiary);
  border-radius:8px;
  border:1px solid var(--border);
}

.user-avatar{
  width:28px;height:28px;
  background:var(--purple);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  font-weight:800;
  color:#fff;
  letter-spacing:.5px;
}

.user-name{
  font-size:.82rem;
  font-weight:600;
  color:var(--text);
}

.role-tag{
  font-size:.65rem;
  font-weight:700;
  color:var(--purple);
  background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.2);
  padding:1px 6px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.btn-logout{
  padding:.45rem .9rem;
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.2);
  color:var(--red);
  border-radius:8px;
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
}

.btn-logout:hover{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}

/* ─── MAIN ───────────────────────────────────────────────── */
.main{
  max-width:1400px;
  margin:0 auto;
  padding:1.75rem;
}

.page{display:none}
.page.active{display:block;animation:fadeUp .28s ease}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.page-head{margin-bottom:1.75rem}

.page-title{
  font-size:1.75rem;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1.1;
}

.page-sub{
  color:var(--text-dim);
  font-size:.88rem;
  margin-top:5px;
  font-weight:500;
}

/* ─── STATS ──────────────────────────────────────────────── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.1rem;
  margin-bottom:1.75rem;
}

.stat-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem 1.4rem;
  transition:var(--transition);
}

.stat-card:hover{
  border-color:var(--border-light);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.stat-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.5rem;
}

.stat-icon{
  width:36px;height:36px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
}

.stat-icon.purple{background:rgba(139,92,246,.12);color:#c4b5fd}
.stat-icon.green{background:rgba(16,185,129,.12);color:var(--green)}
.stat-icon.red{background:rgba(239,68,68,.12);color:var(--red)}
.stat-icon.blue{background:rgba(59,130,246,.12);color:var(--blue)}
.stat-icon.orange{background:rgba(245,158,11,.12);color:var(--orange)}

.stat-badge{
  font-size:.7rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.stat-badge.ok{background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.15)}
.stat-badge.err{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.15)}
.stat-badge.warn{background:rgba(245,158,11,.1);color:var(--orange);border:1px solid rgba(245,158,11,.15)}
.stat-badge.neutral{background:rgba(255,255,255,.03);color:var(--text-dim);border:1px solid var(--border)}
.stat-badge.active{background:rgba(16,185,129,.1);color:var(--green);border:1px solid rgba(16,185,129,.15)}
.stat-badge.inactive{background:rgba(255,255,255,.03);color:var(--text-muted);border:1px solid var(--border)}

.stat-value{
  font-size:2rem;
  font-weight:900;
  letter-spacing:-1.5px;
  line-height:1;
}

.green-text{color:var(--green)}
.red-text{color:var(--red)}

.stat-label{
  font-size:.78rem;
  color:var(--text-muted);
  margin-top:4px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.4px;
}

/* ─── LAYOUT HELPERS ─────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.card-header{
  padding:.9rem 1.2rem;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.card-title{
  font-size:.92rem;
  font-weight:700;
  letter-spacing:-.01em;
}

.card-body{padding:1.2rem}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn{
  padding:.55rem 1rem;
  border-radius:var(--radius-sm);
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  border:none;
  transition:var(--transition);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  letter-spacing:.01em;
  font-family:var(--font);
  white-space:nowrap;
}

.btn-primary{background:var(--purple);color:#fff}
.btn-primary:hover{background:#a78bfa;transform:translateY(-1px);box-shadow:0 8px 20px rgba(139,92,246,.3)}

.btn-secondary{background:var(--bg-tertiary);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--purple);color:var(--purple);background:rgba(139,92,246,.05)}

.btn-ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-light);color:var(--text);background:rgba(255,255,255,.02)}

.btn-red{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.btn-red:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.3)}

.btn-sm{padding:.4rem .75rem;font-size:.75rem}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;pointer-events:none}

/* ─── QUICK ACTIONS ──────────────────────────────────────── */
.quick-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
}

.quick-actions .btn{height:44px;font-size:.85rem}

/* ─── ACTIVITY LOG ───────────────────────────────────────── */
.activity-list{display:flex;flex-direction:column;gap:0}

.activity-item{
  padding:.65rem 0;
  border-bottom:1px solid var(--border);
  font-size:.84rem;
  color:var(--text-dim);
  display:flex;
  align-items:flex-start;
  gap:.55rem;
}

.activity-item:last-child{border-bottom:none}

.act{font-weight:700}
.act.success{color:var(--green)}
.act.info{color:var(--blue)}
.act.warn{color:var(--orange)}
.act.error{color:var(--red)}
.act-time{font-size:.72rem;color:var(--text-muted);margin-top:2px}

/* ─── FILTERS ────────────────────────────────────────────── */
.filters{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:.85rem;
  margin-bottom:1.2rem;
}

.filters input,
.filters select{
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:.75rem 1rem;
  font-size:.84rem;
  font-weight:600;
  transition:var(--transition);
  font-family:var(--font);
}

.filters input:focus,.filters select:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(139,92,246,.12);
  background:var(--bg-tertiary);
}

.filters input::placeholder{color:var(--text-muted);font-weight:500}
.filters select option{background:var(--bg-card);color:var(--text)}

/* ─── VM GRID ────────────────────────────────────────────── */
.vm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}

.vm-card{
  background:linear-gradient(135deg,rgba(20,20,28,.95),rgba(26,26,36,.95));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.3rem 1.4rem;
  transition:var(--transition);
  position:relative;
}

.vm-card:hover{
  border-color:var(--border-light);
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.vm-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.2),transparent);
  border-radius:var(--radius) var(--radius) 0 0;
}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:.9rem;
}

.vm-name{font-size:1rem;font-weight:800;letter-spacing:-.3px}
.vm-meta{font-size:.75rem;color:var(--text-muted);margin-top:2px;font-weight:500}

.vm-stats-mini{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin-bottom:.9rem;
}

.mini-stat{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:8px;
  padding:.45rem .5rem;
  text-align:center;
}

.mini-label{
  display:block;
  font-size:.65rem;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.4px;
  font-weight:700;
  margin-bottom:2px;
}

.mini-val{
  display:block;
  font-size:.78rem;
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

/* resource bars */
.res-bar{margin-bottom:.6rem}
.res-bar-head{display:flex;justify-content:space-between;margin-bottom:.3rem;font-size:.72rem}
.res-label{color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.res-val{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.res-track{height:7px;background:var(--bg-tertiary);border-radius:999px;overflow:hidden}
.res-fill{height:100%;border-radius:999px;transition:width .5s ease}

.res-fill.low{background:linear-gradient(90deg,#10b981,#34d399)}
.res-fill.medium{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.res-fill.high{background:linear-gradient(90deg,#ef4444,#f87171)}
.res-fill.purple{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}

/* actions */
.actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:1.1rem;
}

.actions .btn{
  height:42px;
  font-size:.75rem;
  border-radius:var(--radius-sm);
  font-weight:800;
  letter-spacing:.01em;
}

.start{background:linear-gradient(135deg,#10b981,#059669);color:#fff}
.shutdown{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.restart{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff}
.stop{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.console{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff}
.bandwidth{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}

/* ─── PAGINATION ─────────────────────────────────────────── */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin:1.5rem auto;
  padding:.7rem 1.2rem;
  border-radius:var(--radius-sm);
  background:var(--bg-card);
  border:1px solid var(--border);
  width:fit-content;
}

.pagination button{
  min-width:80px;
  height:42px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-tertiary);
  color:var(--text-dim);
  font-size:.82rem;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
  font-family:var(--font);
}

.pagination button:hover:not(:disabled){
  border-color:var(--purple);
  color:var(--text);
}

.pagination button:disabled{opacity:.3;cursor:not-allowed}

.page-indicator{font-size:.82rem;color:var(--text-muted);font-weight:600;min-width:60px;text-align:center}

/* ─── TABLES ─────────────────────────────────────────────── */
.table-wrap{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}

.data-table{width:100%;border-collapse:collapse;font-size:.82rem}

.data-table th{
  text-align:left;
  color:var(--text-muted);
  padding:.85rem 1rem;
  border-bottom:1px solid var(--border);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-weight:700;
  background:rgba(255,255,255,.01);
}

.data-table td{
  padding:.85rem 1rem;
  color:var(--text-dim);
  border-bottom:1px solid var(--border);
  font-weight:500;
  vertical-align:middle;
}

.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr{transition:background .15s}
.data-table tbody tr:hover td{background:rgba(139,92,246,.03)}
.data-table strong{color:var(--text);font-weight:700}
.data-table small{color:var(--text-muted)}

.badge{
  padding:3px 8px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  border:1px solid transparent;
  display:inline-block;
}

.tabs{display:flex;gap:0;margin-bottom:1.2rem;border-bottom:1px solid var(--border)}
.tab{
  padding:.7rem 1.2rem;
  cursor:pointer;
  font-size:.84rem;
  font-weight:700;
  color:var(--text-muted);
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  transition:var(--transition);
}

.tab.active{color:var(--purple);border-bottom-color:var(--purple)}
.tab:hover{color:var(--text-dim)}

/* ─── CARDS ──────────────────────────────────────────────── */
.empty{
  text-align:center;
  color:var(--text-muted);
  padding:2.5rem 1rem;
  font-size:.88rem;
  font-weight:500;
}

.support-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem;
  cursor:pointer;
  transition:var(--transition);
  text-align:center;
}

.support-card:hover{
  border-color:var(--purple);
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}

.support-icon{
  width:44px;height:44px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  margin:0 auto .9rem;
}

.support-icon.purple{background:rgba(139,92,246,.12);color:#c4b5fd}
.support-icon.green{background:rgba(16,185,129,.12);color:var(--green)}
.support-icon.blue{background:rgba(59,130,246,.12);color:var(--blue)}

.support-title{font-size:.95rem;font-weight:800;margin-bottom:.2rem;letter-spacing:-.2px}
.support-desc{font-size:.78rem;color:var(--text-muted);font-weight:500}

.sub-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem 1.4rem;
  margin-bottom:.85rem;
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex-wrap:wrap;
  transition:var(--transition);
}

.sub-card:hover{border-color:var(--border-light)}

.sub-info{flex:1;min-width:180px}
.sub-plan{font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;letter-spacing:-.2px}
.sub-specs{font-size:.8rem;color:var(--text-muted);margin-top:3px;font-weight:500}
.sub-meta{font-size:.75rem;color:var(--text-muted);margin-top:4px;font-weight:500}
.sub-meta span{color:var(--text);font-weight:700}
.sub-price{font-size:1.4rem;font-weight:900;letter-spacing:-1px;line-height:1}
.sub-price small{font-size:.75rem;font-weight:600;color:var(--text-muted)}

.btn-cancel{
  padding:.5rem 1rem;
  background:transparent;
  border:1px solid rgba(239,68,68,.22);
  color:var(--red);
  border-radius:var(--radius-sm);
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  transition:var(--transition);
}

.btn-cancel:hover{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}

.cancel-notice{font-size:.75rem;color:var(--orange);margin-top:4px;font-weight:600}

.user-row{
  padding:1rem 1.2rem;
  margin:.5rem 0;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.015);
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:var(--transition);
}

.user-row:hover{background:rgba(139,92,246,.03);border-color:rgba(139,92,246,.12)}
.user-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}

.assigned-vms{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.vm-pill{
  background:rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.15);
  color:#c4b5fd;
  padding:2px 8px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:700;
}

.muted{color:var(--text-muted)}

/* ─── FORMS ──────────────────────────────────────────────── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-label{display:block;font-size:.72rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-bottom:.4rem}
.form-input{
  width:100%;
  padding:.7rem .9rem;
  background:var(--bg-primary);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-size:.84rem;
  font-weight:600;
  transition:var(--transition);
  font-family:var(--font);
}

.form-input:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(139,92,246,.12);
}

textarea.form-input{resize:vertical;min-height:80px;line-height:1.5}

/* ─── TOAST ──────────────────────────────────────────────── */
#toast-box{
  position:fixed;
  top:1.2rem;
  right:1.2rem;
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  pointer-events:none;
}

.toast{
  min-width:280px;
  padding:.85rem 1.1rem;
  border-radius:var(--radius-sm);
  color:#fff;
  font-weight:700;
  font-size:.82rem;
  box-shadow:0 14px 36px rgba(0,0,0,.5);
  animation:toastIn .3s ease;
  pointer-events:auto;
  letter-spacing:.01em;
  transition:opacity .3s, transform .3s;
}

.toast.success{background:rgba(16,185,129,.95);border:1px solid rgba(16,185,129,.25)}
.toast.error{background:rgba(239,68,68,.95);border:1px solid rgba(239,68,68,.25)}
.toast.info{background:rgba(59,130,246,.92);border:1px solid rgba(59,130,246,.25)}

@keyframes toastIn{
  from{opacity:0;transform:translateX(24px) scale(.96)}
  to{opacity:1;transform:translateX(0) scale(1)}
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.07);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.13)}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1100px){
  .stats-grid{grid-template-columns:1fr 1fr}
  .three-col{grid-template-columns:1fr 1fr}
}

@media(max-width:900px){
  .header-inner{flex-wrap:wrap;height:auto;padding:.75rem 1.25rem;gap:.75rem}
  .nav{order:3;width:100%;overflow-x:auto;padding:.3rem 0}
  .stats-grid,.vm-grid,.two-col,.three-col{grid-template-columns:1fr!important}
  .actions{grid-template-columns:1fr 1fr!important}
  .main{padding:1.25rem}
  .page-title{font-size:1.35rem}
  .user-name{display:none}
  .role-tag{display:none}
}

@media(max-width:600px){
  .filters{grid-template-columns:1fr!important}
  .vm-stats-mini{grid-template-columns:repeat(3,1fr)}
  .quick-actions{grid-template-columns:1fr}
  .header-right{gap:.5rem}
  .btn-logout{font-size:.75rem;padding:.4rem .65rem}
}

/* =======================================================

/* =======================================================
   CLEAN DASHBOARD LAYOUT + MODERN COSMETIC POLISH
   Matches the actual structure injected by app.js:
     <header class="top-nav"> + <main class="main">
     with .topbar, .stats-grid, .stat-card, .quick-actions,
     .vm-card, .data-table, .nav-btn, .view etc.
   Single clean block. No nuclear resets. Uses existing vars.
   ======================================================= */

/* --- TOP NAV (header bar) --- */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.top-nav-left .logo {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.6px;
  background: linear-gradient(135deg, #fff, var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.top-nav .nav-btn.has-beta {
  position: relative;
  margin-right: 10px;
}

.nav-beta {
  position: absolute;
  top: -5px;
  right: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.44rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1c1917;
  border: 1.5px solid rgba(0, 0, 0, 0.35);
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  z-index: 3;
  pointer-events: none;
}

.top-nav .nav-btn.active .nav-beta {
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
}

.top-nav .nav-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.top-nav .nav-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text);
}

.top-nav .nav-btn.active {
  background: rgba(139, 92, 246, 0.18);
  color: #fff;
  font-weight: 700;
}

.top-nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* --- MAIN CONTENT AREA --- */
.main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 22px 40px;
}

/* View containers */
.view {
  display: block;
}

.view.hidden {
  display: none !important;
}

/* Section headers inside views */
.topbar {
  margin-bottom: 16px;
}

.topbar h1 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 4px;
}

.topbar p {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0;
}

/* --- STATS / DASHBOARD CARDS --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  border-color: var(--border-light);
}

.stat-card .icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

/* Improve spacing between label and number in stat cards (Total/Running/Stopped etc) */
.stat-card > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.stat-card > div > span {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.stat-card > div > strong {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}

.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* --- QUICK ACTIONS --- */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.quick-actions .btn {
  height: 44px;
  font-size: .85rem;
  border-radius: 10px;
  font-weight: 700;
}

/* --- VM CARDS & GRIDS --- */
.vm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.vm-card {
  background: linear-gradient(135deg, rgba(20,20,28,.95), rgba(26,26,36,.95));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.vm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  border-color: var(--border-light);
}

.vm-card .card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.vm-card h2 {
  font-size: 1.05rem;
  margin: 0;
  font-weight: 700;
}

.badge {
  font-size: .7rem;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.badge.running { background: rgba(16,185,129,.15); color: #34d399; }
.badge.stopped { background: rgba(239,68,68,.12); color: #f87171; }

.vm-card .details p {
  margin: 3px 0;
  font-size: .85rem;
  color: var(--text-dim);
}

.vm-card .actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.vm-card .actions button {
  font-size: .72rem;
  padding: 6px 4px;
  border-radius: 8px;
  font-weight: 700;
  border: none;
  color: #fff;
  cursor: pointer;
}

/* Action button backgrounds for standalone pages (servers.html etc.) */
.vm-card .actions .start { background: linear-gradient(135deg,#10b981,#059669); }
.vm-card .actions .shutdown { background: linear-gradient(135deg,#f59e0b,#d97706); }
.vm-card .actions .restart { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.vm-card .actions .stop { background: linear-gradient(135deg,#ef4444,#dc2626); }
.vm-card .actions .console { background: linear-gradient(135deg,#8b5cf6,#7c3aed); }

.vm-card .actions button:disabled,
.vm-card .actions button[disabled] {
  opacity: 0.5;
  filter: grayscale(80%);
  background: #444 !important;
  color: #888 !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- TABLES & FILTERS --- */
.filters {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.filters input,
.filters select {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: .85rem;
}

.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.data-table th {
  text-align: left;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  color: var(--text-muted);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 10px 14px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* --- GENERAL COSMETIC / UTILITY --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text);
  transition: all .15s ease;
}

.btn:hover {
  background: var(--bg-secondary);
  border-color: var(--purple);
  transform: translateY(-1px);
}

.btn.primary,
.btn-primary {
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  color: #fff;
  border-color: transparent;
}

.btn.primary:hover,
.btn-primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

#toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 99999;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .85rem;
  background: rgba(16,185,129,.95);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  display: none;
}


/* FORCE DASHBOARD CONTENT VISIBLE - to fix persistent blank main area */
#app,
#app .main,
#app .view,
#app #dashView,
#app #serversView,
#app .topbar,
#app .stats-grid,
#app .stat-card,
#app .quick-actions,
#app .vm-card,
#app .vm-grid {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#app .main {
  min-height: 80vh !important;
  background: var(--bg-primary) !important;
  color: var(--text) !important;
}

#app #dashView {
  min-height: 300px !important;
}

/* Ensure grids and cards render */
#app .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
}

#app .stat-card {
  display: block !important;
  background: var(--bg-card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

#app .quick-actions {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
}

#app .vm-card {
  display: block !important;
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

/* Text inside should be visible */
#app .stat-card *,
#app .vm-card *,
#app .topbar * {
  color: inherit !important;
  visibility: visible !important;
}