/* ---------- Beauty Pack Theme (RTL-first) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');

:root{
  --bg:#0b1020; --card:#0f172a; --surface:#121a2e; --text:#e6e9f0; --muted:#97a3b6; --border:#1e2a44;
  --primary:#4f46e5; --primary-contrast:#ffffff;
  --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444;
  --glow: 0 10px 30px rgba(79,70,229,.25);
}
html[data-theme="light"]{
  --bg:#f5f7fb; --card:#ffffff; --surface:#ffffff; --text:#0f172a; --muted:#6b7280; --border:#e5e7eb;
  --glow: 0 10px 30px rgba(79,70,229,.12);
}
html[data-accent="emerald"]{--primary:#10b981}
html[data-accent="violet"]{--primary:#8b5cf6}
html[data-accent="rose"]{--primary:#f43f5e}
html[data-accent="amber"]{--primary:#f59e0b}

*{box-sizing:border-box}
html,body{height:100%}
body{
  direction: rtl;
  margin:0;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(79,70,229,.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(16,185,129,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Cairo', system-ui, -apple-system, Segoe UI, Tahoma, Arial, sans-serif;
}

/* Layout helpers */
.container{max-width:1120px;margin:auto;padding:16px}
.card{
  background:linear-gradient(180deg, var(--card), var(--surface));
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--glow);
}
.card.pad{padding:16px}
hr{border:none;border-top:1px solid var(--border);margin:12px 0}
.muted{color:var(--muted)}

/* Navbar */
.topnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
  background:linear-gradient(90deg, rgba(16,24,40,.95), rgba(16,24,40,.75));
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--border);
}
.topnav a{color:#fff; opacity:.92; text-decoration:none; padding:6px 10px; border-radius:8px}
.topnav a:hover{background:rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff}
.brand .logo{width:28px;height:28px;border-radius:8px;background:conic-gradient(from 0deg, var(--primary), #22c55e, var(--primary)); box-shadow:0 0 0 2px rgba(255,255,255,.12) inset}

.selector{background:transparent;color:#fff;border:1px solid var(--border);border-radius:10px;padding:6px 10px}

/* Buttons */
button,.button,.btn{
  background:var(--primary);
  color:var(--primary-contrast);
  border:1px solid var(--primary);
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  text-decoration:none;
  transition:.2s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
button:hover,.button:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.22)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border)}
.btn-danger{background:var(--danger);border-color:var(--danger)}
.btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}

/* Inputs */
input,select,textarea{
  width:100%;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.18);
}

/* Grid */
.grid{display:grid; gap:12px}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 860px){ .grid-2,.grid-3{grid-template-columns:1fr}}

/* Tables */
table{width:100%;border-collapse:collapse;overflow:hidden;border-radius:14px}
thead th{
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  color:var(--muted);
  font-weight:600;
}
td,th{padding:12px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle}
tbody tr:hover{background:rgba(255,255,255,.03)}

/* Status badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--border)}
.badge.ok{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.4)}
.badge.used{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4)}
.badge.warn{background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.4)}

/* Forms sections */
.form-section{margin-top:16px}
.section-title{font-weight:700;margin-bottom:8px}

/* Utility */
.text-center{text-align:center}
.space{height:10px}