@font-face { font-family: 'Tajawal'; font-weight: 400; font-display: swap; src: url('/fonts/tajawal-400-ar.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Tajawal'; font-weight: 400; font-display: swap; src: url('/fonts/tajawal-400-la.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tajawal'; font-weight: 500; font-display: swap; src: url('/fonts/tajawal-500-ar.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Tajawal'; font-weight: 500; font-display: swap; src: url('/fonts/tajawal-500-la.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tajawal'; font-weight: 700; font-display: swap; src: url('/fonts/tajawal-700-ar.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Tajawal'; font-weight: 700; font-display: swap; src: url('/fonts/tajawal-700-la.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #eceff5; --panel: #ffffff; --panel-2: #f4f6fa; --elevated: #ffffff;
  --border: #e5e9f0; --border-strong: #d3dae6;
  --text: #14203a; --text-2: #4a5872; --muted: #8b97ac;
  --primary: #2f5fd0; --primary-hover: #2951b8; --primary-ink: #ffffff; --primary-soft: #2f5fd012;
  --ok: #12a150; --ok-soft: #12a15014; --danger: #d63b3b; --danger-soft: #d63b3b12;
  --ring: 0 0 0 3px #2f5fd026;
  --shadow-sm: 0 1px 2px rgba(20,32,58,.06);
  --shadow-md: 0 6px 20px -6px rgba(20,32,58,.14);
  --radius: 12px; --radius-lg: 16px;
}
:root[data-theme="dark"] {
  --bg: #0a0e16; --panel: #121826; --panel-2: #171f30; --elevated: #1a2233;
  --border: #232c3f; --border-strong: #303a50;
  --text: #e9eef8; --text-2: #a7b3ca; --muted: #6a7690;
  --primary: #4d82ff; --primary-hover: #6493ff; --primary-ink: #0a0e16; --primary-soft: #4d82ff1f;
  --ok: #2ecc71; --ok-soft: #2ecc7118; --danger: #ff5b5b; --danger-soft: #ff5b5b18;
  --ring: 0 0 0 3px #4d82ff33;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px -8px rgba(0,0,0,.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0e16; --panel: #121826; --panel-2: #171f30; --elevated: #1a2233;
    --border: #232c3f; --border-strong: #303a50;
    --text: #e9eef8; --text-2: #a7b3ca; --muted: #6a7690;
    --primary: #4d82ff; --primary-hover: #6493ff; --primary-ink: #0a0e16; --primary-soft: #4d82ff1f;
    --ok: #2ecc71; --ok-soft: #2ecc7118; --danger: #ff5b5b; --danger-soft: #ff5b5b18;
    --ring: 0 0 0 3px #4d82ff33;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 10px 30px -8px rgba(0,0,0,.55);
  }
}

* { box-sizing: border-box; }
body { font-family: 'Tajawal', system-ui, 'Segoe UI', Tahoma, sans-serif; margin: 0;
  background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; letter-spacing: -.1px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }
svg { display: block; }
.ico { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round; }

/* زر التبديل بين الثيمات */
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--panel-2); color: var(--text-2); cursor: pointer; display: grid; place-items: center;
  flex-shrink: 0; transition: color .15s, border-color .15s, background .15s; }
.icon-btn:hover { color: var(--text); border-color: var(--primary); }
.icon-btn .ico { width: 18px; height: 18px; }