:root{
  --bg:#f4f6f8; --card:#ffffff; --border:#e4e8ec; --text:#1f2937; --muted:#6b7280;
  --primary:#2563eb; --primary-d:#1d4ed8; --ok:#16a34a; --err:#dc2626; --warn:#d97706;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Vazirmatn','Tahoma',sans-serif;
  background:var(--bg); color:var(--text); direction:rtl; text-align:right;
  font-size:15px; line-height:1.9;
}
a{color:var(--primary); text-decoration:none}
h1,h2,h3{margin:0 0 12px}
.muted{color:var(--muted); font-size:13px}

/* ── Layout ── */
#app{display:flex; min-height:100vh}
.sidebar{
  width:250px; background:#111827; color:#e5e7eb; flex-shrink:0;
  display:flex; flex-direction:column; padding:18px 14px; gap:4px;
}
.sidebar .brand{font-weight:700; font-size:16px; color:#fff; margin-bottom:18px; padding:0 6px}
.sidebar .brand small{display:block; font-weight:400; color:#9ca3af; font-size:12px; margin-top:4px}
.sidebar a{
  color:#d1d5db; padding:10px 12px; border-radius:10px; font-size:14px;
  display:flex; align-items:center; gap:8px;
}
.sidebar a:hover, .sidebar a.active{background:#1f2937; color:#fff}
.sidebar .grp-title{color:#6b7280; font-size:11px; margin:14px 6px 4px}
.sidebar .user-box{margin-top:auto; padding:10px; border-top:1px solid #1f2937; font-size:13px}
.sidebar .user-box a{padding:6px 2px}

.content{flex:1; min-width:0; padding:22px 26px}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.topbar h1{font-size:20px}

/* ── Cards / Grid ── */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:16px}
.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px}
.stat .num{font-size:26px; font-weight:800}
.stat .label{color:var(--muted); font-size:13px; margin-top:4px}
.stat.accent{border-color:var(--primary); background:linear-gradient(135deg,#eff6ff,#fff)}

.seg-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:8px}
.seg-card h3{font-size:15px; display:flex; justify-content:space-between; align-items:center}
.seg-card .count{background:var(--primary); color:#fff; border-radius:20px; padding:2px 10px; font-size:13px}
.seg-card p{color:var(--muted); font-size:13px; margin:0; flex:1}
.seg-card .actions{display:flex; gap:8px}

/* ── Forms ── */
label{display:block; margin-bottom:12px; font-size:13px; color:var(--text)}
input[type=text],input[type=password],input[type=number],input[type=tel],
input[type=date],input[type=datetime-local],select,textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  font-family:inherit; font-size:14px; margin-top:6px; background:#fff; color:var(--text);
}
textarea{resize:vertical; min-height:90px}
.form-row{display:flex; gap:14px; flex-wrap:wrap}
.form-row > label{flex:1; min-width:180px}
fieldset{border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:14px}
legend{padding:0 6px; font-size:13px; color:var(--muted)}
.checkbox-row{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.checkbox-row input{width:auto; margin:0}

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:10px;
  border:1px solid var(--border); background:#fff; color:var(--text); cursor:pointer;
  font-family:inherit; font-size:13.5px; transition:.15s;
}
.btn:hover{border-color:#c7ccd1}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-ok{background:var(--ok); border-color:var(--ok); color:#fff}
.btn-danger{background:#fff; border-color:var(--err); color:var(--err)}
.btn-danger:hover{background:#fef2f2}
.btn-sm{padding:6px 10px; font-size:12.5px}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ── Table ── */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{padding:10px 12px; text-align:right; border-bottom:1px solid var(--border)}
th{color:var(--muted); font-weight:600; font-size:12.5px}
tr:hover td{background:#fafbfc}
.table-wrap{overflow-x:auto}

/* ── Badges / Alerts ── */
.badge{display:inline-block; padding:2px 9px; border-radius:20px; font-size:11.5px}
.badge-ok{background:#dcfce7; color:#166534}
.badge-err{background:#fee2e2; color:#991b1b}
.badge-warn{background:#fef3c7; color:#92400e}
.badge-info{background:#dbeafe; color:#1e40af}
.badge-muted{background:#f1f5f9; color:#475569}

.alert{padding:12px 14px; border-radius:10px; margin-bottom:14px; font-size:13.5px}
.alert-ok{background:#f0fdf4; border:1px solid #bbf7d0; color:#166534}
.alert-err{background:#fef2f2; border:1px solid #fecaca; color:#991b1b}
.alert-info{background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af}

/* ── Auth page ── */
.auth-page{display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#111827,#1e3a8a)}
.auth-box{background:#fff; border-radius:18px; padding:34px; width:380px; max-width:92vw; box-shadow:0 20px 60px rgba(0,0,0,.25)}
.auth-box h1{font-size:19px; text-align:center; margin-bottom:18px}
.auth-box .btn{width:100%; justify-content:center; margin-top:6px}

/* ── Misc ── */
.pill-list{display:flex; flex-wrap:wrap; gap:6px}
.progress{height:8px; background:#e5e7eb; border-radius:6px; overflow:hidden}
.progress > div{height:100%; background:var(--primary)}
code{background:#f1f5f9; padding:1px 6px; border-radius:6px; font-size:12.5px}
.var-btn{display:inline-block; margin:2px; padding:3px 9px; background:#eff6ff; color:var(--primary); border-radius:8px; font-size:12px; cursor:pointer; border:1px solid #bfdbfe}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:800px){.two-col{grid-template-columns:1fr} .sidebar{display:none}}