/* ===== Dark Mode ===== */
:root,
[data-theme="dark"],
.dark {
  --bg:            #0b1020;
  --card:          #0f172a;
  --text:          #e5e7eb;
  --muted:         #94a3b8;
  --accent:        #ef4444;
  --accent2:       #06b6d4;
  --line:          rgba(148,163,184,.18);
  --shadow:        0 18px 44px rgba(0,0,0,.35);
  --r:             16px;
  --max:           1180px;
  --sidebar-width: 320px;
  --thumb-width:   280px;
  --body-bg:
    radial-gradient(900px 420px at 15% -10%, rgba(239,68,68,.18), transparent 60%),
    radial-gradient(900px 420px at 110% 10%, rgba(6,182,212,.14), transparent 60%),
    #0b1020;
}

/* ===== Light Mode ===== */
[data-theme="light"] {
  --bg:      #f1f5f9;
  --card:    #ffffff;
  --text:    #1e293b;
  --muted:   #64748b;
  --accent:  #dc2626;
  --accent2: #0891b2;
  --line:    rgba(100,116,139,.18);
  --shadow:  0 8px 24px rgba(0,0,0,.10);
  --body-bg:
    radial-gradient(900px 420px at 15% -10%, rgba(220,38,38,.06), transparent 60%),
    radial-gradient(900px 420px at 110% 10%, rgba(8,145,178,.05), transparent 60%),
    #f1f5f9;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--app-font-family, "IRANSansX");
  background: var(--body-bg);
  color: var(--text);
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

a { color: inherit; text-decoration: none; }