/* منصة المعالي — الأساس المشترك لصفحتي الدخول ولوحة المتابعة (هوية الحقيبة والدليل) */
@import url('/assets/fonts.css');
:root {
  --g900: #0e302d; --g800: #154440; --g700: #1c5954; --g600: #236b65; --g500: #2e837b; --g200: #c9e0db; --g100: #e4f0ed; --g50: #f1f7f5;
  --gold: #d6aa48; --gold-d: #8f6a1c; --gold-l: #f7edd4; --orange: #b14e00; --orange-l: #f8e5d6; --beige-l: #eeede5; --blue: #2f6e8f; --blue-l: #e3eef4;
  --bg: #f6f5ef; --paper: #fff; --paper-2: #fbfbf7; --ink: #1b2e2b; --ink-2: #33473f; --muted: #5d6f69; --line: #e4e2d7; --line-2: #d4d2c4;
  --ok: #1f7a4d; --ok-l: #e1f2e8; --warn: #9a6a12; --warn-l: #fbf1d9; --bad: #a2400a; --bad-l: #fbe7dc;
  --shadow-s: 0 1px 2px rgba(14, 48, 45, .06); --shadow: 0 1px 2px rgba(14, 48, 45, .05), 0 8px 24px rgba(14, 48, 45, .07); --shadow-l: 0 2px 6px rgba(14, 48, 45, .08), 0 18px 40px rgba(14, 48, 45, .14);
  --r: 14px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1c1a; --paper: #132a27; --paper-2: #10241f; --ink: #e6efec; --ink-2: #cddcd7; --muted: #9db2ab; --line: #24413c; --line-2: #2f524c;
    --g50: #12302b; --g100: #173a35; --g200: #22514a; --gold-l: #3a3018; --orange-l: #3d2414; --blue-l: #15303d; --beige-l: #23302c;
    --ok: #5cc28c; --ok-l: #143326; --warn: #e0b45a; --warn-l: #3a3018; --bad: #f08a42; --bad-l: #3d2414; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1c1a; --paper: #132a27; --paper-2: #10241f; --ink: #e6efec; --ink-2: #cddcd7; --muted: #9db2ab; --line: #24413c; --line-2: #2f524c;
  --g50: #12302b; --g100: #173a35; --g200: #22514a; --gold-l: #3a3018; --orange-l: #3d2414; --blue-l: #15303d; --beige-l: #23302c;
  --ok: #5cc28c; --ok-l: #143326; --warn: #e0b45a; --warn-l: #3a3018; --bad: #f08a42; --bad-l: #3d2414; color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; background: var(--bg); color: var(--ink); font-size: 15.5px; line-height: 1.75; }
a { color: var(--g700); }
h1, h2, h3 { line-height: 1.35; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); } .small { font-size: 13.5px; } .tiny { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-weight: 700; font-size: 14.5px; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--g500); background: var(--g50); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--g700); border-color: var(--g700); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--g600); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--g700); }
.btn.danger { color: var(--bad); border-color: var(--bad-l); }
.btn.sm { min-height: 32px; padding: 0 10px; font-size: 13.5px; border-radius: 9px; }
.btn.lg { min-height: 48px; padding: 0 22px; font-size: 16px; }
.fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fld > span { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.fld input, .fld select, .fld textarea, input.in, select.in { width: 100%; border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; background: var(--paper-2); min-height: 42px; }
.fld input:focus, .fld select:focus, .fld textarea:focus, input.in:focus, select.in:focus { border-color: var(--g500); box-shadow: 0 0 0 3px var(--g100); outline: none; background: var(--paper); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-s); }
.pad { padding: 18px 20px; }
.msg { border-radius: 11px; padding: 10px 12px; font-size: 14px; margin: 0; }
.msg.err { background: var(--bad-l); color: var(--bad); } .msg.ok { background: var(--ok-l); color: var(--ok); } .msg.info { background: var(--blue-l); color: var(--blue); }
.spin { width: 30px; height: 30px; border: 4px solid var(--g200); border-top-color: var(--g700); border-radius: 50%; animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }