/* theme.css — ضعه مع باقي الملفات */
:root {
  --bg:#07070e;--s1:#101018;--s2:#181820;--s3:#222230;
  --b1:rgba(255,255,255,0.07);--b2:rgba(255,255,255,0.12);--b3:rgba(255,255,255,0.18);
  --accent:#7c6eff;--a2:#a99fff;--adim:rgba(124,110,255,0.13);
  --green:#22c55e;--red:#ef4444;--amber:#f59e0b;
  --text:#eeedf8;--muted:#7a7990;--hint:#3d3c52;
  --shadow:rgba(0,0,0,0.4);
}
[data-theme="light"] {
  --bg:#f4f3ff;--s1:#ffffff;--s2:#f0effe;--s3:#e8e6fc;
  --b1:rgba(0,0,0,0.07);--b2:rgba(0,0,0,0.12);--b3:rgba(0,0,0,0.18);
  --accent:#6c5ce7;--a2:#5a4bd1;--adim:rgba(108,92,231,0.1);
  --text:#1a1830;--muted:#6b6880;--hint:#9e9ab8;
  --shadow:rgba(108,92,231,0.12);
}

/* Theme Toggle Button */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--b2);
  background: var(--s2);
  color: var(--muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all .2s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--s3); color: var(--text); }

/* Smooth transitions */
body, .nav, .card, input, select, textarea, .btn, .stat, .sb, .ac, .prod, .dur {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}