/* ══════════════════════════════════════════════════════════════
   مستودع مسك — Base (reset · typography · helpers · screens)
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    direction: rtl;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
ul, ol { list-style: none; }
svg.ico { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: middle; flex-shrink: 0; }
h1, h2, h3, h4 { line-height: 1.3; font-weight: 800; letter-spacing: 0; }

::selection { background: var(--brand-200); color: var(--brand-800); }

/* أشرطة تمرير أنيقة */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

/* ─── الشاشات ─── */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }
.app-shell.active { display: flex; }
.hidden { display: none !important; }

/* ─── مساعدات ─── */
.muted { color: var(--text-2); }
.muted.sm, .sm { font-size: .82rem; }
.brand-text { color: var(--brand); }
.brand-text.lg { font-size: 1.35rem; }
.mono { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .03em; }
.center { display: flex; justify-content: center; margin-top: 18px; }
.t-left { text-align: left; }
.grad {
    background: linear-gradient(120deg, var(--brand-500), var(--brand-700));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cur { font-size: .72em; font-weight: 600; color: var(--text-2); }

/* ─── حركات ظهور (landing) ─── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .reveal { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
    .grid-2 { grid-template-columns: 1fr; }
}