/* ============================================================
   ElProfessor V2 — chat-first product tokens
   Light-first, with [data-theme="dark"] override.
   Color language:  GOLD = human / expert / memory (the throughline)
                    TEAL = the AI  ·  EMERALD = agreement  ·  CORAL = contradiction
   Fonts: Cairo (name + display) · IBM Plex Sans Arabic (UI + body)
   ============================================================ */
@import url("../fonts.css");            /* Cairo, Tajawal, Amiri */
@import url("../fonts/plex-arabic.css"); /* IBM Plex Sans Arabic */
@import url("https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&display=swap"); /* خط الرُّقعة — رؤوس الصفحات */

:root{
  /* brand constants */
  --navy:#1A2B4A; --navy-dark:#0F172A; --navy-deep:#0A0F1C;
  --gold:#9E2B4E; --gold-light:#C2415F; --gold-dark:#7E2240; --gold-soft:#F7E7EC;

  /* layered accents (theme-independent hues) */
  --human:#9E2B4E;        /* expert / you — عنّابي burgundy */
  --human-bg:rgba(158,43,78,.12);
  --ai:#0E8E9B;           /* the AI — teal */
  --ai-bg:rgba(14,142,155,.10);
  --agree:#1C9A5B;        /* concord pulse */
  --agree-bg:rgba(28,154,91,.12);
  --conflict:#D9663B;     /* contradiction pulse */
  --conflict-bg:rgba(217,102,59,.12);
  --memory:#6E59C7;       /* "those who preceded you" — wise violet, used sparingly */
  --memory-bg:rgba(110,89,199,.10);
  --mascot:#9E2B4E;       /* «بروف» — عنّابي الهوية (محسوم نهائي: توحيد الهوية — كحلي + عنّابي بس) */

  /* fonts */
  --font-display:"Cairo","IBM Plex Sans Arabic",sans-serif;
  --font-ui:"IBM Plex Sans Arabic","Tajawal",sans-serif;
  --font-hero:"Aref Ruqaa","Cairo",serif; /* كاليجرافي — لعناوين السطوح الكبيرة فقط */

  /* radii / motion */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-2xl:28px; --r-full:9999px;
  --ease:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1);
  --t:.22s; --t2:.4s;

  /* ---- LIGHT THEME (default) ---- */
  --bg:#EEF2F8;
  --surface:#FFFFFF;
  --surface-2:#F5F7FB;
  --surface-3:#E9EEF6;
  --sidebar:#FBFCFE;
  --ink:#0E1726;
  --ink-2:#3A4658;
  --muted:#697587;
  --faint:#9AA6B6;
  --border:#E2E8F1;
  --border-2:#D3DCE8;
  --shadow-sm:0 1px 2px rgba(16,28,52,.05);
  --shadow:0 6px 24px rgba(16,28,52,.08);
  --shadow-lg:0 20px 56px rgba(16,28,52,.14);
  --shadow-pop:0 12px 40px rgba(16,28,52,.16);
  --on-gold:#FFFFFF;
  --bubble-ai:#F0FAFB;
  --bubble-human:#FBF1F4;
}

[data-theme="dark"]{
  --bg:#0B1120;
  --surface:#131C30;
  --surface-2:#0F1729;
  --surface-3:#1B2640;
  --sidebar:#0E1626;
  --ink:#F2F5FA;
  --ink-2:#C4CDDC;
  --muted:#8A97AC;
  --faint:#5B6880;
  --border:rgba(255,255,255,.09);
  --border-2:rgba(255,255,255,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);
  --shadow-pop:0 16px 48px rgba(0,0,0,.55);
  --human:#E0617F; --human-bg:rgba(224,97,127,.16);
  --ai:#36C5D2; --ai-bg:rgba(54,197,210,.14);
  --agree:#34C77B; --agree-bg:rgba(52,199,123,.16);
  --conflict:#F0855A; --conflict-bg:rgba(240,133,90,.16);
  --memory:#9C8AE6; --memory-bg:rgba(156,138,230,.16);
  --gold:#D6537A; --gold-light:#E3789A; --gold-dark:#B23A5A; --gold-soft:rgba(214,83,122,.1);
  --mascot:#D6537A;
  --on-gold:#23070F;
  --bubble-ai:rgba(54,197,210,.07);
  --bubble-human:rgba(224,97,127,.08);
}

/* base */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);direction:rtl;
  -webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;color:inherit}
input,textarea{font-family:inherit}
::selection{background:rgba(212,175,55,.28)}

/* utility type */
.display{font-family:var(--font-display);font-weight:900;letter-spacing:-.01em}
.brandname{font-family:var(--font-display);font-weight:800}

/* ---- readability: accent glyphs on a navy ground ----
   عنّابي/accent numbers & words sitting on the dark-navy heroes get a hairline
   white outline so the glyph separates from the blue. paint-order draws the
   stroke behind the fill, so the fill stays solid and only a thin white ring
   shows. Applies in BOTH light and dark for a consistent treatment. */
.on-navy-accent{
  -webkit-text-stroke:1.4px rgba(255,255,255,.95);
  text-stroke:1.4px rgba(255,255,255,.95);
  paint-order:stroke fill;
}
.on-navy-accent.sm{-webkit-text-stroke-width:.9px;text-stroke-width:.9px}

/* ---- shared filter toolbar (search + sort) + secondary type/level chips ----
   mirrors the Marketplace pattern so every surface filters the same way:
   a [search + sort] bar, then a row of filled type/status chips, then the
   surface's own specialty pills. */
.flt-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:1080px;margin:0 auto 12px}
.flt-search{flex:1;min-width:200px;position:relative;display:flex;align-items:center}
.flt-search .ep-icon{position:absolute;right:12px;color:var(--faint)}
.flt-search input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 36px 10px 14px;font-size:14.5px;color:var(--ink);font-family:inherit}
.flt-search input:focus{outline:none;border-color:var(--gold)}
.flt-sort{display:flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:4px 8px 4px 4px;flex-wrap:wrap}
.flt-sort>.ep-icon{color:var(--muted);margin:0 4px}
.flt-sort button{border:none;background:transparent;color:var(--muted);font-size:13px;font-weight:700;padding:6px 11px;border-radius:var(--r-sm);font-family:inherit}
.flt-sort button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.flt-types{display:flex;flex-wrap:wrap;gap:7px;max-width:1080px;margin:0 auto 12px;align-items:center}
.flt-type{border:none;background:var(--surface-2);color:var(--muted);font-size:13px;font-weight:700;padding:8px 14px;border-radius:var(--r-md);transition:background var(--t);font-family:inherit}
.flt-type:hover{background:var(--surface-3);color:var(--ink)}
.flt-type.on{background:var(--human);color:var(--on-gold)}
.flt-glabel{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--faint);margin-left:2px}
.flt-empty{grid-column:1/-1;text-align:center;padding:48px 20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.flt-empty-ic{width:60px;height:60px;border-radius:50%;background:var(--surface-2);color:var(--faint);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.flt-empty b{font-family:var(--font-display);font-weight:800;font-size:17.5px;color:var(--ink)}
.flt-empty span{font-size:14px;color:var(--muted);max-width:360px;line-height:1.7}

/* ——— shared EmptyState (first-run / no-data guidance) ——— */
.empty{grid-column:1/-1;max-width:480px;margin:30px auto;text-align:center;display:flex;flex-direction:column;align-items:center;padding:44px 24px}
.empty.compact{margin:14px auto;padding:30px 20px}
.empty-art{position:relative;width:88px;height:88px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.empty-ic{width:62px;height:62px;border-radius:var(--r-xl);background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--border);color:var(--human);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;box-shadow:var(--shadow-sm)}
.empty-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed var(--border-2)}
@media (prefers-reduced-motion: no-preference){.empty-ring{animation:emSpin 32s linear infinite}}
@keyframes emSpin{to{transform:rotate(360deg)}}
.empty-title{font-family:var(--font-display);font-weight:800;font-size:21px;color:var(--ink);margin-bottom:9px;line-height:1.4}
.empty-sub{font-size:14.5px;color:var(--muted);line-height:1.8;max-width:420px;margin-bottom:22px;text-wrap:pretty}
.empty-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.empty-cta{display:inline-flex;align-items:center;gap:7px;background:var(--human);color:#fff;border:none;font-family:inherit;font-weight:700;font-size:14px;padding:11px 22px;border-radius:var(--r-md);box-shadow:0 6px 18px rgba(158,43,78,.25);transition:background var(--t),transform var(--t)}
.empty-cta:hover{background:var(--gold-light);transform:translateY(-1px)}
.empty-cta2{background:transparent;border:1px solid var(--border-2);color:var(--ink-2);font-family:inherit;font-weight:700;font-size:14px;padding:11px 18px;border-radius:var(--r-md);transition:border-color var(--t),color var(--t)}
.empty-cta2:hover{border-color:var(--human);color:var(--human)}

/* ——— feature lifecycle tags: تعمل (بلا شارة) · بيتا · قريبًا ——— */
.feat-tag{display:inline-flex;align-items:center;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:var(--r-full);vertical-align:middle;line-height:1.5;letter-spacing:.01em}
.feat-tag.beta{background:var(--ai-bg);color:var(--ai);border:1px solid var(--ai)}
.feat-tag.soon{background:var(--surface-3);color:var(--muted);border:1px solid var(--border-2)}
.feat-tag.sm{font-size:9.5px;padding:1px 6px}
/* على الـrail: نقطة صغيرة في الركن (البيل الكاملة كانت تركب على الأيقونة) — الشارة النصية «بيتا» تظهر في رأس السطح نفسه */
.rail-btn .rail-feat{position:absolute;top:5px;left:8px;width:8px;height:8px;border-radius:50%;background:var(--ai);box-shadow:0 0 0 2px var(--sidebar);padding:0;border:none;pointer-events:none}
.rail-btn{position:relative}

/* ——— «تبدأ من» pricing + fair-price badge (السعر العادل: حسب بلدك وصفتك) ——— */
.from-price{display:inline-flex;align-items:baseline;gap:4px}
.from-price small{font-size:.62em;font-weight:700;color:var(--muted)}
.fair-badge{display:inline-flex;align-items:center;gap:5px;background:var(--agree-bg);color:var(--agree);border:1px dashed var(--agree);border-radius:var(--r-full);font-size:11.5px;font-weight:800;padding:3px 10px;cursor:pointer;font-family:inherit;transition:background var(--t)}
.fair-badge:hover{background:transparent}

/* ——— «درّب معنا» invite card (داخل السوق والمواضيع) ——— */
.twu-invite{display:flex;align-items:center;gap:14px;max-width:1080px;margin:0 auto 16px;background:linear-gradient(120deg,var(--navy),var(--navy-dark));border-radius:var(--r-lg);padding:14px 18px;color:#fff;border:1px solid rgba(255,255,255,.08)}
.twu-invite-ic{width:42px;height:42px;border-radius:var(--r-md);background:rgba(158,43,78,.35);display:flex;align-items:center;justify-content:center;color:#F2B8C9;flex-shrink:0}
.twu-invite-tx{flex:1;min-width:0}
.twu-invite-tx b{display:block;font-family:var(--font-display);font-weight:800;font-size:15px}
.twu-invite-tx span{font-size:12.5px;color:rgba(255,255,255,.75);line-height:1.7}
.twu-invite-btn{display:inline-flex;align-items:center;gap:7px;background:var(--gold);border:none;color:#fff;font-family:inherit;font-weight:800;font-size:13.5px;padding:10px 18px;border-radius:var(--r-md);flex-shrink:0;transition:background var(--t)}
.twu-invite-btn:hover{background:var(--gold-light)}
@media(max-width:680px){.twu-invite{flex-wrap:wrap}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}