:root {
  --bg: #0b0e13;
  --bg-2: #0f131a;
  --text: #e7ecf3;
  --muted: #9aa6b2;
  --brand: #6aa6ff;
  --brand-2: #7bd1ff;
  --ok: #19c37d;
  --warn: #f39c12;
  --danger: #ff4d4f;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,0.35);
  --border: 1px solid rgba(255,255,255,0.08);
  --blur: 18px;
}

/* Reset & Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Vazirmatn", system-ui, -apple-system, Segoe UI;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
}

/* Prevent overlay blocking clicks */
.bg-grid,
.bg-blob,
.card::before,
.glass::before,
.glass::after {
  pointer-events: none;
}

/* Background decoration */
.bg-grid {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--bg), var(--bg-2));
}
.bg-blob {
  position: fixed; width: 520px; height: 520px; border-radius: 50%;
  filter: blur(80px); opacity: .22; z-index: -1;
}
.blob-1 { right: -120px; top: -120px; background: radial-gradient(circle, var(--brand-2), transparent 60%); }
.blob-2 { left: -140px; bottom: -140px; background: radial-gradient(circle, #7bffcf, transparent 60%); }

/* Containers & Cards */
.container { max-width: 1200px; margin: 0 auto; padding: 0 12px; }
.glass {
  backdrop-filter: blur(var(--blur));
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border: var(--border); border-radius: var(--radius);
  position: relative;
}
.card {
  border: var(--border); border-radius: var(--radius);
  background: rgba(255,255,255,0.05); box-shadow: var(--shadow);
  padding: 14px; position: relative; overflow: hidden;
}
.card::before {
  content:""; position:absolute; inset:0; border-radius: inherit;
  background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);
  opacity:0; transition: opacity .25s ease;
}
.card:hover::before { opacity:.8; }

/* Layout grid */
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Responsive breakpoints */
@media (max-width: 992px){
  .grid.two, .grid.four { grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .row-actions { flex-wrap: wrap; gap: 8px; }
}

/* Header bits */
.head-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap: wrap; gap: 10px; margin-bottom:10px; }
.row-actions { display:inline-flex; align-items:center; gap:8px; flex-wrap: wrap; }
.brand { display:inline-flex; align-items:center; gap:10px; }
.logo-circle {
  width:36px; height:36px; min-width:36px; border-radius:50%;
  display:grid; place-items:center; font-weight:800; color:#0b0e13;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:8px 12px; border-radius:12px; border: var(--border);
  background: rgba(255,255,255,0.05); color: var(--text); cursor:pointer;
  min-height: 38px; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: rgba(255,255,255,0.08); }
.btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0e13; border:0; }
.btn.ghost { background: rgba(255,255,255,0.05); }
@media (max-width: 768px) {
  .btn { min-height: 44px; font-size: 15px; padding: 10px 14px; }
}

/* Badges / KPI */
.badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; border: var(--border); }
.badge.ok { color: var(--ok); border-color: rgba(25,195,125,0.35); }
.badge.muted { color: var(--muted); }
.kpi { display:grid; gap:6px; }
.kpi-head { display:inline-flex; align-items:center; gap:8px; color: var(--muted); }
.kpi-val { font-weight:800; font-size:1.6rem; }
.kpi-foot { font-size:12px; color: var(--muted); }
.kpi-foot.ok { color: var(--ok); }
.kpi-foot.warn { color: var(--warn); }
.muted { color: var(--muted); }

/* Forms */
.form { display:grid; gap:10px; }
.field { position: relative; }
.field input, .field textarea, .select, .field select {
  width:100%; padding:12px; border-radius:12px; background: rgba(255,255,255,0.06); border: var(--border);
  color: var(--text); outline:none;
}
.field label {
  position:absolute; top:50%; transform:translateY(-50%);
  right:10px; color: var(--muted); transition:.2s ease; padding:0 4px;
}
.field input:focus+label, .field input:not(:placeholder-shown)+label,
.field textarea:focus+label, .field textarea:not(:placeholder-shown)+label {
  top:-8px; font-size:12px; color: var(--brand-2); background: var(--bg-2);
}

/* Switch */
.switch label { display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.switch input { display:none; }
.switch span { width: 42px; height: 22px; background: rgba(255,255,255,0.2); border-radius:999px; position:relative; transition: background .2s ease; }
.switch span::after { content:""; position:absolute; width:18px; height:18px; background:#fff; border-radius:50%; top:2px; right:2px; transition: transform .2s ease; }
.switch input:checked + span { background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.switch input:checked + span::after { transform: translateX(-20px); }