/* =========================================================
   دجلة — الأساس: الألوان، الزجاج، الأزرار، الهيكل
   عدّل الألوان من هنا وتتغيّر بكل التطبيق
   ========================================================= */
:root {
  /* الخلفية والنصوص */
  --bg: #050507;
  --ink: #F5F5F7;
  --muted: #A3A3AD;
  --faint: #6B6B76;

  /* الأحمر */
  --red: #E5263A;
  --red-hi: #FF5468;
  --red-deep: #8E0E1F;
  --red-glow: rgba(229, 38, 58, .45);
  --glow-a: rgba(229, 38, 58, .38);
  --glow-b: rgba(142, 14, 31, .45);
  --glow-c: rgba(255, 84, 104, .16);
  --gold: #F5C451;
  --gold-hi: #FFE39A;
  --gold-deep: #A8761B;

  /* الزجاج */
  --glass: rgba(255, 255, 255, .055);
  --glass-2: rgba(255, 255, 255, .09);
  --glass-3: rgba(255, 255, 255, .14);
  --edge: rgba(255, 255, 255, .11);
  --edge-hi: rgba(255, 255, 255, .22);
  --blur: blur(20px) saturate(150%);

  /* العمق ثلاثي الأبعاد */
  --depth: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.5);
  --depth-sm: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px -8px rgba(0,0,0,.8);

  --ok: #2FD18B;
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 14px;
  --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --display: "Reem Kufi", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* أضواء حمراء خلف الزجاج */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 82% 8%, var(--glow-a), transparent 62%),
    radial-gradient(30vmax 30vmax at 8% 72%, var(--glow-b), transparent 65%),
    radial-gradient(24vmax 24vmax at 60% 100%, var(--glow-c), transparent 70%),
    var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.grow { flex: 1; }
.ic { flex-shrink: 0; }

/* ---------- الزجاج ---------- */
.glass {
  background: linear-gradient(160deg, var(--glass-2), var(--glass) 55%);
  border: 1px solid var(--edge);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--depth);
  border-radius: var(--r-lg);
}

/* ---------- الأزرار ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 600;
  background: linear-gradient(180deg, var(--glass-3), var(--glass));
  border: 1px solid var(--edge); box-shadow: var(--depth-sm);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn.primary {
  background: linear-gradient(180deg, var(--red-hi), var(--red) 45%, var(--red-deep));
  border-color: rgba(255,120,135,.45); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 0 rgba(0,0,0,.28), 0 10px 24px -8px var(--red-glow);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.btn.danger { color: var(--red-hi); border-color: rgba(229,38,58,.45); }
.btn.sm { min-height: 34px; padding: 0 14px; font-size: 14px; }
.btn:disabled { opacity: .55; pointer-events: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: var(--muted); cursor: pointer; transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--glass-2); color: var(--ink); }
.icon-btn.raised { background: linear-gradient(180deg, var(--glass-3), var(--glass)); border: 1px solid var(--edge); box-shadow: var(--depth-sm); color: var(--ink); }

/* ---------- الحقول ---------- */
input, textarea, select {
  width: 100%; background: rgba(0,0,0,.35); border: 1px solid var(--edge);
  border-radius: var(--r-md); padding: 11px 14px; outline: none; resize: none;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
}
input:focus, textarea:focus, select:focus { border-color: var(--red); box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(229,38,58,.2); }
select { appearance: none; padding-inline-end: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: 18px 50%, 13px 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: #141418; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.stack { display: grid; gap: 14px; }

/* مفتاح تشغيل/إطفاء */
.switch-row { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 400; }
.switch-row .row-main { flex: 1; }
.toggle { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.toggle span {
  position: absolute; inset: 0; border-radius: 999px; background: rgba(0,0,0,.5);
  border: 1px solid var(--edge); box-shadow: inset 0 2px 5px rgba(0,0,0,.6); transition: background .15s;
}
.toggle span::after {
  content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, #fff, #cfcfd6); box-shadow: 0 2px 4px rgba(0,0,0,.5); transition: transform .15s;
}
.toggle input:checked + span { background: linear-gradient(180deg, var(--red-hi), var(--red-deep)); }
.toggle input:checked + span::after { transform: translateX(-20px); }
.toggle input:focus-visible + span { outline: 2px solid var(--red-hi); outline-offset: 2px; }

.badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center;
  background: linear-gradient(180deg, var(--red-hi), var(--red)); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 0 12px var(--red-glow);
}

/* ---------- الصورة الشخصية ---------- */
.av {
  display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: radial-gradient(circle at 30% 25%, hsl(var(--h) var(--s) 46%), hsl(var(--h) var(--s) 16%));
  color: #fff; font-weight: 700; box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.5);
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.av span { font-size: .42em; }
.av-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.dot { position: absolute; bottom: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #111; display: none; }
.dot.on { display: block; background: var(--ok); box-shadow: 0 0 8px var(--ok); }

/* ---------- الهيكل العام ---------- */
.logo {
  font-family: var(--display); font-weight: 700; color: #fff; letter-spacing: 0;
  text-shadow: 0 1px 0 #ff6b7d, 0 2px 0 #d81f33, 0 3px 0 #b3192a, 0 4px 0 #8e0e1f, 0 5px 0 #6a0a17, 0 10px 18px rgba(229,38,58,.55);
}
.shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100dvh; }
.nav {
  position: sticky; top: 12px; height: calc(100dvh - 24px); margin: 12px; margin-inline-end: 0;
  display: flex; flex-direction: column; gap: 4px; padding: 22px 12px;
}
.nav .logo { font-size: 42px; padding: 0 14px 22px; }
.nav a[data-nav] {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--r-md); color: var(--muted); font-weight: 600;
  transition: background .12s, color .12s;
}
.nav a[data-nav]:hover { background: var(--glass-2); color: var(--ink); }
.nav a[data-nav].active {
  color: #fff; background: linear-gradient(180deg, rgba(229,38,58,.35), rgba(142,14,31,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px -8px var(--red-glow);
}
.nav .badge { margin-inline-start: auto; }
.view { width: 100%; max-width: 680px; margin-inline: auto; padding: 22px 16px 48px; }
.loading { padding: 48px; text-align: center; color: var(--muted); }

.top { display: flex; align-items: center; gap: 10px; margin: 2px 0 18px; }
.top h1 { font-family: var(--display); font-size: 30px; margin: 0; flex: 1; font-weight: 700; }
h2.sub { font-size: 14px; color: var(--muted); margin: 24px 6px 8px; font-weight: 600; }
.card { overflow: hidden; }
.card + .card { margin-top: 14px; }
.card.pad, .pad { padding: 18px; }
.card h2 { margin: 0; font-size: 17px; }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); display: grid; gap: 14px; justify-items: center; }
.empty p { margin: 0; max-width: 34ch; }
.empty a:not(.btn) { color: var(--red-hi); font-weight: 700; }

/* صفوف القوائم */
.row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; text-align: start; }
.list .row + .row, .card > .row + .row { border-top: 1px solid var(--edge); }
a.row:hover, button.row:hover { background: var(--glass); }
.row-main { flex: 1; min-width: 0; display: grid; }
.row-main b { font-weight: 600; }
.row-main small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.row-main small.strong { color: var(--ink); font-weight: 600; }
.row-end { display: grid; justify-items: end; gap: 4px; color: var(--muted); font-size: 12px; }
.row-end.inline { display: flex; align-items: center; gap: 6px; }
.row .who { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid var(--edge); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); margin: 18px 0 12px; }
.seg button { padding: 7px 16px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 14px; }
.seg button.on { color: #fff; background: linear-gradient(180deg, var(--glass-3), var(--glass)); box-shadow: var(--depth-sm); }

.search { position: relative; display: block; margin-bottom: 14px; }
.search svg { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { padding-inline-start: 46px; border-radius: 999px; min-height: 48px; }

/* ---------- نوافذ منبثقة ---------- */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.sheet {
  width: min(440px, 100%); max-height: 90dvh; overflow: auto; padding: 22px; display: grid; gap: 14px;
  background: linear-gradient(160deg, rgba(40,40,48,.92), rgba(18,18,22,.95));
  border: 1px solid var(--edge-hi); border-radius: var(--r-xl); box-shadow: var(--depth);
  animation: pop .18s ease-out;
}
.sheet h2 { margin: 0; font-size: 19px; }
.c-bar { display: flex; align-items: center; gap: 8px; }
.ghost { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; padding: 7px 12px; border-radius: 999px; font-weight: 600; }
.ghost:hover { background: var(--glass-2); color: var(--ink); }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }

/* ---------- تنبيهات ---------- */
#toasts { position: fixed; z-index: 100; bottom: 24px; inset-inline: 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.toast {
  padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: 14px; max-width: 480px; pointer-events: auto;
  background: linear-gradient(180deg, rgba(60,60,70,.92), rgba(25,25,30,.95)); border: 1px solid var(--edge-hi);
  box-shadow: var(--depth); animation: pop .18s ease-out;
}
.toast.clickable { cursor: pointer; }

/* ---------- الموبايل ---------- */
@media (max-width: 760px) {
  .shell { display: block; }
  .nav {
    position: fixed; z-index: 40; inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px; height: auto; margin: 0;
    flex-direction: row; justify-content: space-around; padding: 6px; border-radius: 24px;
  }
  .nav .logo { display: none; }
  .nav a[data-nav] { flex: 1; min-width: 0; flex-direction: column; gap: 1px; padding: 7px 2px; font-size: 10.5px; border-radius: 16px; white-space: nowrap; }
  .nav { padding: 5px 4px; gap: 0; }
  .nav .badge { position: absolute; top: 0; inset-inline-start: 52%; margin: 0; }
  .view { padding: 14px 12px calc(104px + env(safe-area-inset-bottom)); }
  body.in-chat .nav { display: none; }
  body.in-chat .view { padding: 0; max-width: none; }
  #toasts { bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@media (min-width: 761px) { body.in-chat .view { max-width: 880px; padding-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; }
}

/* ---------- تطبيق الموبايل ---------- */
.upd-banner { position: fixed; z-index: 120; top: calc(12px + env(safe-area-inset-top)); inset-inline: 0; margin: auto; width: min(420px, 100% - 24px);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; font-weight: 600; animation: pop .2s ease-out; }
.upd-banner span { flex: 1; }
.steps { margin: 0; padding-inline-start: 22px; display: grid; gap: 10px; line-height: 1.8; }
.steps svg { vertical-align: middle; }
@media (display-mode: standalone) { body { overscroll-behavior-y: none; } }

/* ---------- دجلة الذهبي ---------- */
/* ثيمات الألوان: كل ثيم يبدّل الأحمر بلون ثاني */
:root[data-accent="gold"] { --red: #D9A52B; --red-hi: #FFD66B; --red-deep: #7A5410; --red-glow: rgba(245,196,81,.45); --glow-a: rgba(245,196,81,.30); --glow-b: rgba(122,84,16,.45); --glow-c: rgba(255,214,107,.14); }
:root[data-accent="night"] { --red: #3B6CF6; --red-hi: #7FA3FF; --red-deep: #16307A; --red-glow: rgba(59,108,246,.45); --glow-a: rgba(59,108,246,.32); --glow-b: rgba(22,48,122,.5); --glow-c: rgba(127,163,255,.14); }
:root[data-accent="emerald"] { --red: #13A672; --red-hi: #4FE0A8; --red-deep: #0B5A3E; --red-glow: rgba(19,166,114,.45); --glow-a: rgba(19,166,114,.30); --glow-b: rgba(11,90,62,.5); --glow-c: rgba(79,224,168,.14); }
:root[data-accent="violet"] { --red: #8B4DF0; --red-hi: #B993FF; --red-deep: #46198F; --red-glow: rgba(139,77,240,.45); --glow-a: rgba(139,77,240,.32); --glow-b: rgba(70,25,143,.5); --glow-c: rgba(185,147,255,.14); }

/* الشارة والإطار الذهبي */
.gbadge { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-inline-start: 4px; border-radius: 50%; font-style: normal; font-size: 11px; line-height: 1; vertical-align: 1px;
  color: #3a2600; background: linear-gradient(160deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 8px rgba(245,196,81,.55), inset 0 1px 0 rgba(255,255,255,.6); }
.av.gold { box-shadow: 0 0 0 2px #0b0b0e, 0 0 0 4px var(--gold), 0 0 14px rgba(245,196,81,.55); }
.av.gold::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--ga, 0deg), transparent 0 70%, rgba(255,240,190,.9) 80%, transparent 90%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: gspin 3.5s linear infinite; }
.av { position: relative; }
.av.gold { overflow: visible; }
.av.gold img { border-radius: 50%; }
@property --ga { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes gspin { to { --ga: 360deg; } }
.gchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #3a2600;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold)); vertical-align: middle; }
.btn.goldbtn { color: #2b1c00; border-color: rgba(255,227,154,.6); text-shadow: none;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(0,0,0,.2), 0 10px 24px -8px rgba(245,196,81,.6); }