/* =============================================================
   Spade's Life Explained — CONSOLIDATED STYLESHEET
   -----
   Section A: Design tokens + base typography (from colors_and_type.css)
   Section B: Application component styles (from styles.css)
   Both token namespaces are intentionally kept:
     - Section A defines the documented design-system tokens
       (--oracle-*, --line-N, --center-*, semantic --fg/--bg roles).
     - Section B defines the short aliases the app's class rules
       actually consume (--violet, --cyan, --border, --r-*, --s-*).
   When porting, treat Section A as the source of truth for values;
   Section B's aliases map onto it.
   ============================================================= */
/* ⚠️ هذا السطر هو الاستثناء الوحيد من "لا CDN".
   بقيّة الاعتماديات مستضافة ذاتيًّا في vendor/، أما الخطوط فتُجلَب
   من Google Fonts. الأثر:
     • يعمل الموقع بلا إنترنت، لكن بخطوط النظام لا بخطوط الهوية
     • حاجب الإعلانات أو حجب النطاق يغيّر الشكل ولا يكسر الوظيفة
   قبل الرفع: نزّل العائلات السبع إلى fonts/ واستبدل هذا السطر
   بـ @font-face محلّية. سلاسل الاحتياط أدناه مضبوطة لهذه الحالة. */
@import url("https://fonts.googleapis.com/css2?family=Afacad:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Cairo:wght@400;500;600;700;800&family=Readex+Pro:wght@300;400;500;600;700&family=Reem+Kufi:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* =============================================================
   SECTION A — DESIGN TOKENS & BASE TYPE
   ============================================================= */
/* Web fonts. Afacad Flux carries the display; IBM Plex Sans Arabic is the
   Arabic-first body face. Substituted Afacad Flux → Afacad until the original
   .ttf files can be supplied (see README "FONTS — SUBSTITUTION FLAG"). */
:root {
  /* ─── BASE PALETTE (raw rgb tuples, used with rgb(var(--x) / α)) ─── */
  --rgb-background:        4 7 18;
  --rgb-background-accent: 15 21 48;
  --rgb-surface:          11 17 38;
  --rgb-surface-muted:    16 23 49;
  --rgb-surface-strong:   20 28 59;
  --rgb-text:            241 242 255;
  --rgb-text-soft:       213 215 242;
  --rgb-text-muted:      162 169 198;
  --rgb-purple:          152 114 255;
  --rgb-cyan:             92 221 255;
  --rgb-gold:            248 198  72;
  --rgb-danger:          255 108 136;
  --rgb-success:          94 223 167;

  /* ─── ORACLE COSMIC PALETTE (hex; primary surfaces + glow accents) ─── */
  --oracle-void:         #02040d;  /* deepest background */
  --oracle-ink:          #050817;  /* page wash */
  --oracle-panel:        rgba(5,8,22,0.76);    /* glass-card background */
  --oracle-panel-strong: rgba(7,10,27,0.90);   /* solid panel chrome */
  --oracle-line:         rgba(171,192,255,0.18); /* default 1px borders */
  --oracle-line-strong:  rgba(172,132,255,0.52);

  /* Brand accents */
  --oracle-purple:       #8A5CFF;  /* primary action */
  --oracle-purple-2:     #6D3BFF;  /* gradient stop / pressed */
  --oracle-purple-3:     #9D66FF;  /* glow / hover */
  --oracle-violet:       #C084FF;  /* lighter highlight */
  --oracle-cyan:         #62DDFF;  /* secondary / info accent */
  --oracle-gold:         #F8C648;  /* premium / founder */
  --oracle-gold-2:       #FFC857;  /* alt gold */

  /* Text */
  --oracle-text:         #F5F2FF;  /* high-emphasis */
  --oracle-text-soft:    #D5D7F2;
  --oracle-text-muted:   #AFA8C7;

  /* Card / shell surfaces (rgba so background gradients can layer) */
  --color-card-bg:       rgba(255,255,255,0.04);
  --color-card-border:   rgba(138,92,255,0.25);
  --color-sidebar-bg:    rgba(11,15,26,0.97);
  --color-topbar-bg:     rgba(11,15,26,0.92);

  /* ─── HUMAN DESIGN DOMAIN COLORS ─── */
  /* Profile lines (1–6) used across centers, gates, channels. */
  --line-1: 244 162  97;  /* terracotta — Investigator */
  --line-2: 228 209  98;  /* gold — Hermit */
  --line-3:  93 206 154;  /* mint — Martyr */
  --line-4:  89 210 249;  /* sky — Opportunist */
  --line-5: 144 118 255;  /* violet — Heretic */
  --line-6: 255 120 181;  /* rose — Role Model */

  /* Centers — colored when defined, neutral when undefined */
  --center-root:         244  95  95;
  --center-sacral:       246 152  89;
  --center-solar-plexus: 244 205  88;
  --center-spleen:        99 207 134;
  --center-ego:          244 122 122;
  --center-g:             95 214 181;
  --center-throat:        88 210 249;
  --center-ajna:         112 145 255;
  --center-head:         170 118 255;

  /* ─── TYPOGRAPHY ─── */
  --font-display: "Afacad", "Afacad Flux", "Space Grotesk", "Reem Kufi",
                  "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
  /* الاحتياط عربيّ أوّلًا: "Segoe UI" لا يحمل عربيةً على macOS ولا
     على لينكس، فبدونه كان النصّ يسقط إلى خطٍّ افتراضيّ رديء. */
  --font-ui:      "IBM Plex Sans Arabic", "Cairo", "Noto Sans Arabic", "Segoe UI",
                  "Geeza Pro", "Tahoma", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-heading: var(--font-display);
  --font-body:    var(--font-ui);

  /* Type scale (clamped for fluid response) */
  --fs-display:  clamp(2.6rem, 4.4vw, 4.2rem);  /* hero */
  --fs-h1:       clamp(2rem,  3.2vw, 2.8rem);
  --fs-h2:       clamp(1.5rem, 2.4vw, 2rem);
  --fs-h3:       clamp(1.18rem, 1.6vw, 1.4rem);
  --fs-h4:       1.05rem;
  --fs-body:     1rem;
  --fs-body-sm:  0.9rem;
  --fs-eyebrow:  0.78rem;
  --fs-meta:     0.74rem;

  --lh-tight:    1.15;
  --lh-snug:     1.35;
  --lh-body:     1.65;
  --lh-loose:    2;          /* used heavily for Arabic body copy */

  --tracking-eyebrow: 0.16em;
  --tracking-brand:   0.08em;
  --tracking-tight:   -0.02em;

  /* ─── SPACING / RADII / ELEVATION ─── */
  --space-1: 0.25rem;   --space-2: 0.5rem;
  --space-3: 0.75rem;   --space-4: 1rem;
  --space-5: 1.25rem;   --space-6: 1.5rem;
  --space-8: 2rem;      --space-10: 2.5rem;
  --space-12: 3rem;     --space-16: 4rem;

  --radius-sm:   0.5rem;
  --radius-md:   0.78rem;   /* inputs */
  --radius-lg:   1rem;      /* secondary buttons */
  --radius-xl:   1.35rem;   /* small panels, benefit cards */
  --radius-2xl:  1.75rem;
  --radius-3xl:  28px;      /* glass-card default — the signature radius */
  --radius-pill: 999px;

  /* Shadows — almost always paired with an inner top highlight */
  --shadow-cosmic:      0 18px 60px rgba(6,10,29,0.45);
  --shadow-glow:        0 0 0 1px rgba(152,114,255,0.24), 0 16px 40px rgba(61,22,125,0.32);
  --shadow-panel-glow:  0 0 0 1px rgba(255,255,255,0.04), 0 24px 60px rgba(6,10,29,0.45);
  --shadow-purple-glow: 0 0 28px rgba(157,102,255,0.34);
  --shadow-cyan-glow:   0 0 24px rgba(98,221,255,0.22);
  --shadow-gold-glow:   0 0 22px rgba(248,198,72,0.34);
  --inset-highlight:    inset 0 1px 0 rgba(255,255,255,0.08);

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   160ms;
  --dur-med:    260ms;
  --dur-slow:   420ms;

  /* Layout */
  --max-content: 1280px;
  --shell-gutter: clamp(1rem, 2.5vw, 2rem);
}

/* ============================================================
   SEMANTIC ROLES — high-level vars apps actually consume
   ============================================================ */
:root {
  --fg-1: var(--oracle-text);          /* primary text */
  --fg-2: var(--oracle-text-soft);
  --fg-3: var(--oracle-text-muted);
  --fg-accent-purple: var(--oracle-purple-3);
  --fg-accent-cyan:   var(--oracle-cyan);
  --fg-accent-gold:   var(--oracle-gold);

  --bg-app:       var(--oracle-void);
  --bg-page:      var(--oracle-ink);
  --bg-card:      var(--color-card-bg);
  --bg-card-border: var(--color-card-border);
  --bg-elevated:  var(--oracle-panel-strong);

  /* Card-on-cosmic-background recipe (used everywhere) */
  --bg-glass-card:
    linear-gradient(180deg, rgba(7,11,30,0.78), rgba(3,5,15,0.88)),
    radial-gradient(circle at 50% -8%, rgba(151,87,255,0.18), transparent 48%);
  --bg-glass-card-purple:
    linear-gradient(180deg, rgba(9,13,32,0.74), rgba(4,6,18,0.83)),
    radial-gradient(circle at 50% 0%, rgba(137,83,255,0.16), transparent 48%);
  --bg-glass-card-cyan:
    linear-gradient(180deg, rgba(8,18,35,0.72), rgba(3,7,18,0.86)),
    radial-gradient(circle at 50% 0%, rgba(98,221,255,0.14), transparent 48%);
  --bg-glass-card-gold:
    linear-gradient(180deg, rgba(28,22,8,0.62), rgba(8,6,2,0.78)),
    radial-gradient(circle at 50% 0%, rgba(248,198,72,0.18), transparent 48%);
}

/* ============================================================
   SEMANTIC TYPE — apply directly to elements
   ============================================================ */
html, body {
  background: var(--oracle-void);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: pretty;
  margin: 0;
}
h1, .h1 { font-size: var(--fs-h1); font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 700; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-shadow: 0 0 22px rgba(255,255,255,0.12);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}

.body-sm { font-size: var(--fs-body-sm); line-height: 1.7; color: var(--fg-3); }
.body-loose { line-height: var(--lh-loose); }  /* Arabic paragraphs */

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--oracle-cyan);
}

.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
  color: var(--fg-1);
}

.meta {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  color: var(--fg-3);
}

code, .mono, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--oracle-line);
  border-radius: 0.4rem;
  padding: 0.08em 0.36em;
  color: var(--oracle-cyan);
}

/* Gold premium label / founder accent */
.accent-gold  { color: var(--oracle-gold); }
.accent-cyan  { color: var(--oracle-cyan); }
.accent-purple{ color: var(--oracle-purple-3); }

/* =============================================================
   SECTION B — APPLICATION STYLES
   ============================================================= */
/* ── Fonts & tokens ────────────────────────────────────────── */
:root {
  /* Colors */
  --purple:        #8A5CFF;
  --purple-2:      #6D3BFF;
  --purple-3:      #9D66FF;
  --violet:        #C084FF;
  --cyan:          #62DDFF;
  --gold:          #F8C648;
  --gold-2:        #FFC857;
  --green:         #5FD6B5;
  --red:           #F45F5F;
  --rose:          #FF78B5;
  --danger:        #FF6C88;

  --text:          #F5F2FF;
  --text-soft:     #D5D7F2;
  --text-muted:    #AFA8C7;
  --text-dim:      #686878;

  --void:          #02040d;
  --ink:           #060814;
  --surface:       rgba(11,15,26,0.96);
  --surface-2:     rgba(10,14,28,0.88);
  --border:        rgba(138,92,255,0.22);
  --border-soft:   rgba(255,255,255,0.08);
  --border-cyan:   rgba(88,210,249,0.5);
  --border-violet: rgba(152,114,255,0.45);
  --border-gold:   rgba(248,198,72,0.5);
  --card:          rgba(255,255,255,0.035);
  --card-2:        rgba(255,255,255,0.025);

  /* Typography — refined default (Readex Pro body · Reem Kufi AR display · Space Grotesk EN display).
     Switch the whole app to the classic stack with  <html data-fonts="classic">  (see overrides below). */
  --font-ar:         "Cairo", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-en:         "Readex Pro", "Space Grotesk", system-ui, sans-serif;
  --font-display-ar: "Afacad", "Cairo", sans-serif;
  --font-display-en: "Space Grotesk", "Readex Pro", system-ui, sans-serif;
  --font-display:    var(--font-display-ar);
  --font-mono:  "Space Grotesk", ui-monospace, monospace;

  /* Radii */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
html, body {
  background: var(--void);
  color: var(--text-soft);
  font-family: var(--font-ar);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="en"], html[lang="en"] body { font-family: var(--font-en); }
/* Display stack follows the active language. */
.app-shell.ltr, .flow-root.ltr, html[lang="en"] { --font-display: var(--font-display-en); }

/* Neural galaxy canvas (handled by neural-galaxy.js — keeps it pinned) */
#neural-galaxy { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ── App shell ─────────────────────────────────────────────── */
.app-shell {
  position: relative; z-index: 1;
  display: flex; flex-direction: row;
  height: 100vh; overflow: hidden;
  direction: ltr; /* layout LTR; content gets its own dir */
}
.app-shell.rtl .main-area { direction: rtl; }
.app-shell.ltr .main-area { direction: ltr; }

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
  width: 238px; flex-shrink: 0;
  background: rgba(10,13,24,0.92);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
}
.app-shell.rtl .sidebar { direction: rtl; }
.app-shell.ltr .sidebar { direction: ltr; }
.app-shell.rtl .sidebar { border-right: none; border-left: 1px solid var(--border); }

.sidebar-brand {
  height: 64px; box-sizing: border-box;
  padding: 0 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(138,92,255,0.14);
}
.brand-orb {
  position: relative;
  flex-shrink: 0; border-radius: 999px;
  display: grid; place-items: center; overflow: visible;
  cursor: pointer;
  transition: transform 320ms ease;
}
/* ambient halo — light bleeding into the sidebar, no edge */
.brand-orb::before {
  content: ""; position: absolute; inset: -26%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle,
    rgba(151,87,255,0.30),
    rgba(98,221,255,0.10) 46%,
    transparent 72%);
  filter: blur(5px);
  transition: opacity 320ms ease;
}
.brand-orb canvas {
  display: block; width: 100%; height: 100%;
  position: relative; z-index: 1;
  /* feather the sigil itself so it melts into the background */
  -webkit-mask-image: radial-gradient(circle closest-side at center, #000 58%, rgba(0,0,0,0.5) 80%, transparent 99%);
          mask-image: radial-gradient(circle closest-side at center, #000 58%, rgba(0,0,0,0.5) 80%, transparent 99%);
}
.brand-orb.is-hover {
  transform: scale(1.06);
}
.brand-orb.is-hover::before {
  background: radial-gradient(circle,
    rgba(192,132,255,0.42),
    rgba(98,221,255,0.14) 48%,
    transparent 74%);
}
.brand-text strong {
  display: block; font-family: var(--font-en); font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; color: #fff; text-transform: uppercase; line-height: 1;
}
.brand-text em {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 13px; font-weight: 600; color: var(--gold-2);
  text-shadow: 0 0 12px rgba(248,198,72,0.26);
}

.sidebar-nav {
  flex: 1; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  border: 1px solid transparent;
  color: var(--text-soft);
  font-size: 15px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: all 180ms ease;
}
.app-shell.rtl .nav-item { direction: ltr; } /* icon-left visual order */
.nav-item:hover { background: rgba(255,255,255,0.05); }
.nav-item.active {
  background: radial-gradient(circle at 50%, rgba(138,92,255,0.18), rgba(11,15,26,0.6));
  border-color: rgba(138,92,255,0.8); color: #fff;
  box-shadow: 0 0 22px rgba(157,102,255,0.34), inset 0 1px 0 rgba(255,255,255,0.07);
}
.nav-item .ni-icon { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; }
.nav-item .ni-label { flex: 1; }
.app-shell.rtl .nav-item .ni-label { text-align: right; }
.app-shell.ltr .nav-item .ni-label { text-align: left; }
.nav-badge {
  font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px;
  background: rgba(248,198,72,0.12);
  border: 1px solid rgba(248,198,72,0.4);
  color: var(--gold); white-space: nowrap;
}

.sidebar-footer {
  margin: 10px 12px 16px;
  padding: 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(9,13,32,0.74), rgba(4,6,18,0.83)),
    radial-gradient(circle at 50% 0%, rgba(137,83,255,0.16), transparent 48%);
  border: 1px solid rgba(138,92,255,0.36);
  display: flex; flex-direction: column; gap: 10px;
}
.sf-support {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 8px; width: 100%; padding: 8px 14px; border-radius: 10px;
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--text-muted); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: color 180ms, border-color 180ms;
}
.sf-support:hover { color: var(--cyan); border-color: rgba(98,221,255,0.4); }

/* ── Main area ─────────────────────────────────────────────── */
.main-area {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.topbar {
  flex-shrink: 0; height: 64px;
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(138,92,255,0.14);
  background: rgba(10,14,26,0.7);
  backdrop-filter: blur(20px);
  position: relative; z-index: 5;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }

/* ── بحث الخريطة في البانل العلوي ─────────────────────────── */
.topbar-search { position: relative; flex: 0 1 380px; min-width: 180px; }
.topbar-search .tbs-ic {
  position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.42); pointer-events: none; display: grid; place-items: center;
}
.tbs-input {
  width: 100%; height: 40px; border-radius: 999px;
  padding-inline-start: 38px; padding-inline-end: 34px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text, #EAE6FF); font: inherit; font-size: 13.5px;
  outline: none; transition: border-color .18s, background .18s;
}
.tbs-input::placeholder { color: rgba(255,255,255,0.35); }
.tbs-input:focus { border-color: rgba(138,92,255,0.55); background: rgba(255,255,255,0.07); }
.tbs-clear {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6);
  cursor: pointer; line-height: 1; font-size: 15px;
}
.tbs-clear:hover { background: rgba(255,255,255,0.16); color: #fff; }

.tbs-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
  width: min(520px, 92vw); max-height: 66vh; overflow-y: auto;
  background: rgba(12,16,30,0.97); backdrop-filter: blur(22px);
  border: 1px solid rgba(138,92,255,0.24); border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55); padding: 8px; z-index: 60;
}
.tbs-count { font-size: 11.5px; color: rgba(255,255,255,0.45); padding: 6px 10px 8px; }
.tbs-empty { font-size: 13px; color: rgba(255,255,255,0.55); padding: 16px 12px; text-align: center; }
.tbs-group { margin-bottom: 6px; }
.tbs-sec {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #C084FF; padding: 6px 10px 4px;
}
.tbs-hit {
  display: block; width: 100%; text-align: start;
  background: transparent; border: 0; border-radius: 9px;
  padding: 8px 10px; cursor: pointer; color: inherit;
}
.tbs-hit:hover { background: rgba(138,92,255,0.13); }
.tbs-hit strong { display: block; font-size: 13.5px; font-weight: 600; color: #EAE6FF; }
.tbs-hit em {
  display: block; font-style: normal; font-size: 11.5px;
  color: rgba(255,255,255,0.45); margin-top: 1px;
}
.tbs-hit span {
  display: block; font-size: 12px; line-height: 1.55;
  color: rgba(255,255,255,0.62); margin-top: 3px;
}
@media (max-width: 900px) { .topbar-search { display: none; } }
.topbar-bell, .topbar-lang {
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  cursor: pointer; position: relative; color: var(--text-soft);
}
.topbar-lang { width: auto; padding: 0 12px; gap: 6px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.topbar-bell::after {
  content: ''; position: absolute; top: 9px; right: 9px;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
}
.topbar-user {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
}
.app-shell.rtl .topbar-user { padding: 4px 14px 4px 4px; }
.topbar-avatar {
  width: 36px; height: 36px; border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(152,114,255,0.4);
  box-shadow: 0 0 12px rgba(157,102,255,0.26);
  font-family: var(--font-ar); font-size: 14px;
  color: #fff;
}
.topbar-name { font-size: 14px; font-weight: 600; color: #fff; }
.topbar-chev { color: var(--text-muted); display: inline-flex; }

/* ── Page host ─────────────────────────────────────────────── */
.page-host {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  opacity: 1;
}
.page-host.fade-in { animation: pgIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes pgIn { from { transform: translateY(12px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .page-host.fade-in { animation: none; } }
.page {
  padding: 22px 28px 40px;
  display: flex; flex-direction: column; gap: 18px;
}
.page::-webkit-scrollbar, .page-host::-webkit-scrollbar { width: 6px; }
.page-host::-webkit-scrollbar-thumb { background: rgba(138,92,255,0.3); border-radius: 4px; }

/* ── Page header ───────────────────────────────────────────── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-shrink: 0;
}
.app-shell.rtl .page-header .ph-title-block { text-align: right; }
.app-shell.ltr .page-header .ph-title-block { text-align: left; }
.page-title {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 800; color: #fff;
  letter-spacing: -0.02em; line-height: 1.05;
  text-shadow: 0 0 24px rgba(255,255,255,0.1);
}
.app-shell.rtl .page-title { letter-spacing: 0; font-weight: 700; line-height: 1.18; }
.page-subtitle {
  margin-top: 5px; font-size: 14px; color: var(--text-muted); line-height: 1.7;
  max-width: 640px;
}
.help-btn {
  flex-shrink: 0; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid rgba(192,132,255,0.45);
  background: rgba(192,132,255,0.08);
  color: var(--violet); font-size: 13px; font-weight: 500; cursor: pointer;
  font-family: inherit; transition: border-color 180ms, color 180ms;
}
.help-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.help-icon {
  width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center;
  border: 1.5px solid currentColor; font-size: 11px; font-weight: 700;
}

/* ── Generic buttons ───────────────────────────────────────── */
.btn-ghost, .btn-outline, .btn-primary, .btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 18px; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 180ms ease;
}
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.025); color: var(--text-soft);
}
.btn-ghost:hover { border-color: rgba(152,114,255,0.45); background: rgba(138,92,255,0.06); }
.btn-outline {
  border: 1px solid rgba(152,114,255,0.55);
  background: rgba(152,114,255,0.05);
  color: var(--violet);
  box-shadow: 0 0 24px rgba(157,102,255,0.18) inset;
}
.btn-outline:hover { background: rgba(152,114,255,0.12); border-color: var(--violet); box-shadow: 0 0 24px rgba(157,102,255,0.32) inset; transform: translateY(-1px); }
.btn-gold {
  border: 1px solid rgba(248,198,72,0.72);
  background: linear-gradient(180deg, #F8C648, #D9A030);
  color: #1a1305;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 22px rgba(248,198,72,0.36);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 32px rgba(248,198,72,0.55); }
.btn-primary {
  border: 1px solid rgba(152,114,255,0.85);
  background: linear-gradient(180deg, #8A5CFF, #6D3BFF);
  color: #fff;
  box-shadow: 0 0 22px rgba(157,102,255,0.45);
}

/* ─────────────────────────────────────────────────────────────
   HOME
   ───────────────────────────────────────────────────────────── */
.home-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.hero-card {
  position: relative; min-height: 280px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(152,114,255,0.42);
  background:
    linear-gradient(180deg, rgba(11,8,32,0.88), rgba(4,4,18,0.92)),
    radial-gradient(circle at 70% 50%, rgba(151,87,255,0.22), transparent 60%);
  padding: 28px 32px;
  display: grid; grid-template-columns: 1fr 220px;
  gap: 18px; align-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 32px rgba(137,80,255,0.18);
  overflow: hidden;
}
.hero-text { display: flex; flex-direction: column; gap: 12px; }
.hero-welcome {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 26px; font-weight: 700; color: #fff;
}
.hero-welcome svg { color: var(--gold); }
.hero-title {
  font-size: 22px; font-weight: 600; color: var(--violet); line-height: 1.4;
  margin-bottom: 4px;
}
.hero-body { color: var(--text-muted); font-size: 13.5px; line-height: 1.9; max-width: 420px; }
.hero-card .btn-outline { margin-top: 6px; align-self: flex-start; }
.hero-figure {
  position: relative; width: 220px; height: 240px;
  display: grid; place-items: center;
}

.home-summary {
  border-radius: var(--r-xl);
  border: 1px solid rgba(98,221,255,0.42);
  background:
    linear-gradient(180deg, rgba(7,11,30,0.78), rgba(3,5,15,0.88)),
    radial-gradient(circle at 50% -8%, rgba(98,221,255,0.16), transparent 48%);
  padding: 14px 16px 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
}
.hs-header {
  display: flex; align-items: center; gap: 10px; padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: #fff; font-size: 15px; font-weight: 700;
}
.hs-header svg { color: var(--gold); }
.hs-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.hs-row {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  cursor: pointer;
  transition: background 180ms;
}
.hs-row:hover { background: rgba(255,255,255,0.03); }
.app-shell.rtl .hs-row .hs-text { text-align: right; }
.app-shell.ltr .hs-row .hs-text { text-align: left; flex: 1; }
.hs-text { display: flex; flex-direction: column; flex: 1; gap: 2px; align-items: flex-end; }
.app-shell.ltr .hs-text { align-items: flex-start; }
.hs-v { font-size: 13px; font-weight: 600; }
.hs-l { font-size: 11.5px; color: var(--text-muted); }
.hs-icon { display: inline-flex; }

/* Quick access strip */
.quick-section { display: flex; flex-direction: column; gap: 10px; }
.qs-label { color: var(--violet); font-size: 13px; font-weight: 700; padding: 0 4px; }
.app-shell.rtl .qs-label { text-align: right; }
.quick-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.quick-card {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--accent, var(--border));
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01));
  padding: 18px 16px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; color: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  transition: transform 200ms, box-shadow 200ms;
  text-align: center;
  font-family: inherit;
}
.quick-card:hover { transform: translateY(-2px); box-shadow: 0 0 22px color-mix(in oklch, var(--accent) 40%, transparent); }
.quick-card .qc-chev { position: absolute; top: 12px; opacity: 0.6; }
.app-shell.rtl .quick-card .qc-chev { left: 12px; }
.app-shell.ltr .quick-card .qc-chev { right: 12px; transform: scaleX(-1); }
.qc-icon { color: var(--accent); margin-top: 6px; }
.qc-title { color: var(--text); font-size: 15px; font-weight: 700; }
.qc-sub { color: var(--text-muted); font-size: 11.5px; }

/* Features grid */
.features-grid { display: grid; grid-template-columns: 1.05fr 1.05fr 1.05fr; gap: 14px; }
.feature-card {
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  padding: 18px;
  display: flex; gap: 16px;
  min-height: 170px;
}
.compass-card { border-color: rgba(192,132,255,0.4); }
.labs-card { border-color: rgba(192,132,255,0.3); flex-direction: column; }
.today-card { border-color: rgba(248,198,72,0.4); flex-direction: row-reverse; }
.app-shell.ltr .today-card { flex-direction: row; }
.fc-figure { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 96px; }
.fc-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fc-title-row { display: flex; align-items: center; gap: 8px; }
.fc-title-row h3 { font-size: 17px; color: #fff; font-weight: 700; }
.fc-title-row svg { color: var(--violet); }
.feature-card p { color: var(--text-muted); font-size: 12.5px; line-height: 1.85; }
.feature-card .btn-outline { align-self: flex-start; margin-top: auto; padding: 8px 14px; font-size: 13px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(192,132,255,0.35);
  background: rgba(192,132,255,0.08); color: var(--violet);
  font-size: 11.5px; font-weight: 600;
}
.badge-new {
  background: rgba(248,198,72,0.18); color: var(--gold);
  border: 1px solid rgba(248,198,72,0.5); padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.today-quote {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(248,198,72,0.32);
  background: rgba(248,198,72,0.05);
  color: var(--text-soft);
  font-size: 12.5px; line-height: 1.7;
}
.today-quote svg { color: var(--gold); flex-shrink: 0; margin-top: 3px; }

/* Deep CTA */
.deep-cta {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 20px; align-items: center;
  border-radius: var(--r-lg);
  border: 1px solid rgba(192,132,255,0.35);
  background:
    linear-gradient(180deg, rgba(13,11,32,0.75), rgba(6,5,18,0.85)),
    radial-gradient(circle at 0% 0%, rgba(192,132,255,0.18), transparent 50%);
  padding: 20px 24px;
}
.dc-figure { color: var(--violet); display: grid; place-items: center; }
.dc-text h3 { color: var(--gold); font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.dc-text p { color: var(--text-muted); font-size: 13px; line-height: 1.75; }
.dc-actions { display: flex; gap: 10px; flex-direction: row; }

/* ─────────────────────────────────────────────────────────────
   OVERVIEW — chart grid
   ───────────────────────────────────────────────────────────── */
.overview-grid {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) 180px 280px; gap: 14px;
  min-height: 0;
}
.overview-grid .bodygraph-wrap { min-width: 0; }
@media (min-width: 1101px) and (max-width: 1440px) {
  .overview-grid { grid-template-columns: 150px minmax(0, 1fr) 150px; }
  .overview-grid > .summary-card { grid-column: 1 / -1; }
}
.planet-col {
  border-radius: 18px; backdrop-filter: blur(18px);
  border: 1px solid; overflow: hidden;
  display: flex; flex-direction: column;
}
.planet-col.personality { border-color: rgba(88,210,249,0.48); background: linear-gradient(180deg, rgba(8,18,38,0.75), rgba(3,8,18,0.85)), radial-gradient(circle at 50% 0%, rgba(88,210,249,0.12), transparent 50%); }
.planet-col.design      { border-color: rgba(152,114,255,0.48); background: linear-gradient(180deg, rgba(10,8,38,0.75), rgba(3,3,18,0.85)), radial-gradient(circle at 50% 0%, rgba(152,114,255,0.12), transparent 50%); }
.pcol-header {
  padding: 12px 14px 10px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pcol-title { font-size: 16px; font-weight: 700; color: #fff; }
.pcol-icon { font-size: 20px; line-height: 1; }
.pcol-rows { padding: 6px 0; flex: 1; }
.prow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 14px; gap: 8px; transition: background 140ms;
}
.prow:hover { background: rgba(255,255,255,0.04); }
.planet-glyph {
  font-size: 17px; width: 22px; text-align: center; flex-shrink: 0;
  color: var(--text-muted);
  font-family: "Times New Roman", serif;
}
.planet-num {
  font-size: 14px; font-weight: 700; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: 0.01em;
}

.bodygraph-wrap {
  display: flex; align-items: center; justify-content: center;
  position: relative; min-height: 420px;
  border-radius: 18px;
  background: rgba(8,10,24,0.4);
  border: 1px solid rgba(138,92,255,0.18);
}

.summary-card {
  border-radius: 18px;
  border: 1px solid rgba(138,92,255,0.42);
  background: linear-gradient(180deg, rgba(9,13,32,0.88), rgba(3,5,18,0.9)), radial-gradient(circle at 50% 0%, rgba(151,87,255,0.16), transparent 50%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 28px rgba(137,80,255,0.16);
  backdrop-filter: blur(20px);
  overflow: hidden;
}
.sum-header {
  padding: 13px 16px 11px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sum-title { font-size: 15px; font-weight: 700; color: #fff; }
.sum-rows { padding: 4px 0; }
.sum-row {
  display: flex; align-items: start; justify-content: space-between;
  padding: 7px 16px; gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  min-height: 34px;
}
.sum-row:last-child { border-bottom: none; }
.sum-label { font-size: 13px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.app-shell.rtl .sum-label { text-align: right; }
.sum-value {
  font-size: 13px; font-weight: 600; color: var(--text-soft);
  font-family: var(--font-en); line-height: 1.35;
}
.app-shell.rtl .sum-value { text-align: left; }
.sum-value.small { font-size: 12px; color: var(--text-muted); }
.sum-value.tiny { font-size: 11.5px; line-height: 1.5; }

/* Insight cards */
.reading-synth {
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklab, var(--violet) 30%, var(--border-soft));
  background:
    linear-gradient(180deg, rgba(14,12,34,0.82), rgba(6,6,20,0.9)),
    radial-gradient(120% 140% at 0% 0%, rgba(192,132,255,0.16), transparent 55%),
    radial-gradient(120% 140% at 100% 0%, rgba(98,221,255,0.10), transparent 55%);
  padding: 22px 26px; margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.rs-head { display: flex; flex-direction: column; gap: 6px; }
.rs-eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--violet);
}
.app-shell.rtl .rs-eyebrow { letter-spacing: 0; }
.rs-headline { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #fff; line-height: 1.25; }
.app-shell.rtl .rs-head, .app-shell.rtl .reading-synth { text-align: right; }
.rs-lead { color: var(--text-soft); font-size: 15px; line-height: 1.9; font-weight: 600; }
.rs-para { color: var(--text-muted); font-size: 13.5px; line-height: 1.95; text-wrap: pretty; }

.insights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1500px) {
  .insights-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.insight-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  position: relative; overflow: hidden; cursor: pointer; text-align: start;
  transition: transform 200ms, box-shadow 200ms;
}
.ic-head { display: flex; align-items: center; gap: 11px; }
.ic-headtext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.insight-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--ic-accent);
  box-shadow: 0 0 12px var(--ic-accent);
}
.insight-card:hover { transform: translateY(-2px); }
.insight-card.clickable { cursor: pointer; }
.insight-card.clickable:hover { box-shadow: 0 14px 40px -22px var(--ic-accent); border-color: color-mix(in oklab, var(--ic-accent) 45%, transparent); }
.insight-card.clickable:focus-visible { outline: 2px solid var(--ic-accent); outline-offset: 2px; }
.insight-card .ic-go {
  position: absolute; bottom: 12px; inset-inline-end: 12px;
  color: var(--ic-color); opacity: 0; transform: translateX(4px);
  transition: opacity 180ms, transform 180ms;
}
.app-shell.ltr .insight-card .ic-go { transform: translateX(-4px) scaleX(-1); }
.insight-card.clickable:hover .ic-go { opacity: 0.9; transform: translateX(0); }
.app-shell.ltr .insight-card.clickable:hover .ic-go { transform: translateX(0) scaleX(-1); }
.ic-icon {
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid;
}
.ic-title { font-size: 14.5px; font-weight: 700; color: var(--ic-color); line-height: 1.2; }
.ic-subtitle { font-size: 11.5px; font-weight: 600; color: var(--ic-color); line-height: 1.3; opacity: 0.92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-body { font-size: 12.5px; color: var(--text-soft, #D5D7F2); line-height: 1.95; font-weight: 400; text-wrap: pretty; padding-top: 2px; border-top: 1px solid rgba(255,255,255,0.06); }

/* Action bar */
.action-bar { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 12px; padding-top: 4px; }

/* Channel flow animation */
@keyframes chFlow { to { stroke-dashoffset: -120; } }
.channel-flow { animation: chFlow 6s linear infinite; }

/* ─────────────────────────────────────────────────────────────
   GUIDE
   ───────────────────────────────────────────────────────────── */
.tabs-row {
  display: flex; gap: 8px;
  padding: 6px;
  background: rgba(11,15,26,0.6);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  align-self: flex-start;
}
.tab-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 10px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 180ms;
}
.tab-pill:hover { color: var(--text-soft); background: rgba(255,255,255,0.04); }
.tab-pill.active {
  background: linear-gradient(180deg, rgba(152,114,255,0.4), rgba(110,80,200,0.25));
  color: #fff; border-color: rgba(152,114,255,0.7);
  box-shadow: 0 0 18px rgba(152,114,255,0.35);
}
.tab-pill.cyan.active   { background: linear-gradient(180deg, rgba(88,210,249,0.4), rgba(50,150,200,0.25)); border-color: rgba(88,210,249,0.7); box-shadow: 0 0 18px rgba(88,210,249,0.35); }
.tab-pill.violet.active { background: linear-gradient(180deg, rgba(192,132,255,0.4), rgba(120,80,200,0.25)); border-color: rgba(192,132,255,0.7); box-shadow: 0 0 18px rgba(192,132,255,0.35); }
.tab-pill.green.active  { background: linear-gradient(180deg, rgba(95,214,181,0.4), rgba(50,150,120,0.25)); border-color: rgba(95,214,181,0.7); box-shadow: 0 0 18px rgba(95,214,181,0.35); }
.tab-pill.red.active    { background: linear-gradient(180deg, rgba(244,95,95,0.4), rgba(180,60,60,0.25)); border-color: rgba(244,95,95,0.7); box-shadow: 0 0 18px rgba(244,95,95,0.35); }

.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.guide-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11,15,30,0.86), rgba(5,7,18,0.92));
  padding: 18px 20px; display: flex; flex-direction: column; gap: 12px;
  min-height: 480px;
}
.card-h { font-size: 17px; font-weight: 700; color: #fff; }
.app-shell.rtl .card-h { text-align: right; }
.card-h.center { text-align: center; }

.guide-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.step {
  display: grid; grid-template-columns: 32px 38px 1fr; gap: 12px; align-items: flex-start;
  padding: 10px 6px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.step:last-child { border-bottom: none; }
.step-num { color: var(--violet); font-weight: 800; font-size: 18px; }
.step-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(152,114,255,0.1);
  border: 1px solid rgba(152,114,255,0.35);
  display: grid; place-items: center; color: var(--violet);
}
.step-text strong { display: block; font-size: 14px; font-weight: 700; }
.step-text span { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.7; margin-top: 3px; }

.guide-map { align-items: center; }
.guide-grid.guide-grid-no-sample { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .guide-grid.guide-grid-no-sample { grid-template-columns: 1fr; }
}
.guide-map-figure {
  position: relative; width: 100%; height: 360px;
  display: grid; place-items: center;
}
.guide-map-figure .bg-wrap { width: min(100%, 280px); }
.guide-map-figure svg { display: block; width: 100%; height: 100%; }
.guide-map-legend { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.guide-map-legend > div { padding: 8px; border: 1px solid var(--border-soft); border-radius: 9px; }
.guide-map-legend dt { font-size: .875rem; font-weight: 700; color: var(--cyan); }
.guide-map-legend dd { margin: 3px 0 0; font-size: .8rem; color: var(--text-soft); line-height: 1.55; }
.guide-center-map { grid-column: 1 / -1; min-width: 0; margin: 0; container-type: inline-size; }
.guide-center-map figcaption { text-align: center; }
.guide-center-map figcaption p { color: var(--text-soft); margin: 6px 0 0; }
.guide-center-stage { position: relative; width: 100%; max-width: 1050px; margin-inline: auto; aspect-ratio: 2; }
.guide-center-chart { position: absolute; inset: 0 30%; }
.guide-center-chart .bg-wrap, .guide-center-chart svg { display: block; width: 100%; height: 100%; }
.guide-center-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.guide-center-leaders path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .55; }
.guide-center-leaders circle { fill: currentColor; opacity: .8; }
.guide-center-leaders .is-highlighted path { stroke-width: 2; opacity: 1; }
.guide-center-labels { margin: 0; }
.guide-center-labels > div { position: absolute; top: var(--label-y); transform: translateY(-50%); width: 26%; padding: 6px 10px; border: 1px solid transparent; border-radius: 10px; }
.guide-center-labels [data-side="left"] { left: 0; text-align: right; }
.guide-center-labels [data-side="right"] { right: 0; text-align: left; }
.guide-center-labels dt { color: var(--center-tone); font-weight: 800; font-size: .95rem; }
.guide-center-labels dd { color: var(--text-soft); margin: 2px 0 0; font-size: .8rem; line-height: 1.45; }
.guide-center-labels .is-highlighted { border-color: var(--center-tone); background: rgba(25,29,52,.86); }
@container (max-width: 800px) {
  .guide-center-stage { aspect-ratio: auto; }
  .guide-center-chart { position: relative; inset: auto; width: min(100%, 330px); aspect-ratio: 4 / 5; margin-inline: auto; }
  .guide-center-leaders { display: none; }
  .guide-center-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .guide-center-labels > div { position: static; transform: none; width: auto; border-color: var(--border-soft); }
  .guide-center-labels [data-side] { text-align: start; }
}
.guide-center-detail { align-self: flex-start; margin-top: auto; }
.gloss-row.gloss-row-static { cursor: default; }
.beta-permission-options { min-width: 0; display: grid; gap: 12px; border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px; margin: 16px 0; }
.beta-permission-options legend { font-weight: 700; padding-inline: 6px; }
.beta-permission-options label { display: flex; gap: 8px; align-items: center; }
.beta-permission-options input { flex: none; accent-color: var(--violet); }
.annot {
  position: absolute; max-width: 130px;
  font-size: 11px; line-height: 1.4;
}
.annot span { color: var(--cyan); font-weight: 700; display: block; font-size: 11.5px; }
.annot em { color: var(--text-muted); font-style: normal; font-size: 10.5px; line-height: 1.5; }
.annot-head     { top: 4px; right: 50%; transform: translateX(50%); text-align: center; }
.annot-crown    { top: 80px; right: 8px; text-align: right; }
.annot-centers  { top: 180px; left: 8px; text-align: left; }
.annot-channels { top: 240px; right: 4px; text-align: right; }
.annot-root     { bottom: 8px; right: 50%; transform: translateX(50%); text-align: center; }
.app-shell.ltr .annot-crown { right: auto; left: 8px; text-align: left; }
.app-shell.ltr .annot-centers { left: auto; right: 8px; text-align: right; }
.app-shell.ltr .annot-channels { right: auto; left: 4px; text-align: left; }
.map-caption {
  margin-top: auto; padding-top: 8px;
  color: var(--text-muted); font-size: 12px; line-height: 1.75; text-align: center;
  max-width: 320px;
}

.glossary-list { display: flex; flex-direction: column; gap: 6px; }
.gloss-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--border-soft); cursor: pointer;
  transition: background 180ms;
}
.gloss-row:hover { background: rgba(255,255,255,0.04); }
.gloss-chev { color: var(--violet); opacity: 0.7; }
.gloss-text { flex: 1; }
.app-shell.rtl .gloss-text { text-align: right; }
.gloss-text strong { display: block; font-size: 13px; color: #fff; }
.gloss-text span { display: block; font-size: 11px; color: var(--text-muted); }

/* Ready CTA */
.ready-cta {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 18px; align-items: center;
  border-radius: var(--r-lg);
  border: 1px solid rgba(192,132,255,0.35);
  background:
    linear-gradient(180deg, rgba(13,11,32,0.75), rgba(6,5,18,0.85)),
    radial-gradient(circle at 0% 0%, rgba(192,132,255,0.18), transparent 50%);
  padding: 18px 24px;
}
.rc-icon { color: var(--violet); display: grid; place-items: center; }
.rc-text h3 { color: var(--gold); font-size: 17px; font-weight: 800; margin-bottom: 3px; }
.rc-text p  { color: var(--text-muted); font-size: 12.5px; }
.rc-actions { display: flex; gap: 10px; }

/* ─────────────────────────────────────────────────────────────
   GUIDE · learn panels (intro / types / authority / centers)
   ───────────────────────────────────────────────────────────── */
.tab-pill.gold.active { background: linear-gradient(180deg, rgba(248,198,72,0.4), rgba(190,150,40,0.25)); color:#fff; border-color: rgba(248,198,72,0.7); box-shadow: 0 0 18px rgba(248,198,72,0.3); }

.guide-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.intro-prose { gap: 14px; min-height: 0; }
.intro-lead { color: var(--text-soft); font-size: 16px; line-height: 1.85; font-weight: 600; }
.app-shell.rtl .intro-lead, .app-shell.rtl .intro-para { text-align: right; }
.intro-para { color: var(--text-muted); font-size: 13.5px; line-height: 1.95; text-wrap: pretty; }
.intro-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.intro-pillars { gap: 12px; min-height: 0; }
.pillar-rail { display: flex; flex-direction: column; gap: 8px; }
.pillar-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: flex-start;
  padding: 12px; border-radius: 12px; border: 1px solid var(--border-soft);
  border-inline-start: 3px solid var(--c);
  background: color-mix(in oklab, var(--c) 7%, transparent);
}
.pillar-ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  color: var(--c); background: color-mix(in oklab, var(--c) 15%, transparent);
  border: 1px solid color-mix(in oklab, var(--c) 45%, transparent);
}
.pillar-tx strong { display: block; font-size: 13.5px; font-weight: 700; color: #fff; }
.pillar-tx span { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.7; margin-top: 3px; }
.app-shell.rtl .pillar-tx { text-align: right; }

.learn-panel { display: flex; flex-direction: column; gap: 14px; }
.learn-lead { color: var(--text-soft); font-size: 14.5px; line-height: 1.8; max-width: 760px; }
.app-shell.rtl .learn-lead { text-align: right; }
.learn-grid { display: grid; gap: 12px; }
.learn-grid.types, .learn-grid.auth { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }
.learn-grid.centers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1050px) { .learn-grid.centers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .learn-grid.centers { grid-template-columns: minmax(0, 1fr); } }

.learn-card {
  position: relative; border-radius: var(--r-lg); padding: 16px 18px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11,15,30,0.86), rgba(5,7,18,0.92));
  display: flex; flex-direction: column; gap: 10px; transition: border-color 180ms, transform 180ms;
}
.learn-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--c) 45%, var(--border-soft)); }
.learn-card.mine {
  border-color: color-mix(in oklab, var(--c) 60%, transparent);
  background:
    linear-gradient(180deg, rgba(11,15,30,0.86), rgba(5,7,18,0.92)),
    radial-gradient(circle at 0% 0%, color-mix(in oklab, var(--c) 22%, transparent), transparent 60%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 30%, transparent), 0 14px 40px -20px color-mix(in oklab, var(--c) 60%, transparent);
}
.learn-head { display: flex; align-items: center; gap: 9px; }
.app-shell.rtl .learn-head { flex-direction: row-reverse; }
.learn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.learn-head h4 { font-size: 15.5px; font-weight: 800; color: #fff; flex: 1; }
.app-shell.rtl .learn-head h4 { text-align: right; }
.yours-badge {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  color: var(--c); background: color-mix(in oklab, var(--c) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--c) 50%, transparent);
}
.learn-desc { color: var(--text-muted); font-size: 12.5px; line-height: 1.85; text-wrap: pretty; }
.app-shell.rtl .learn-desc, .app-shell.rtl .learn-fn { text-align: right; }
.learn-desc.small { font-size: 11.5px; line-height: 1.75; }
.learn-fn { color: var(--text-soft); font-size: 12.5px; font-weight: 600; line-height: 1.7; }
.learn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.learn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 600;
  color: var(--text-soft); border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03);
}
.learn-chip em { font-style: normal; color: var(--text-muted); font-weight: 700; opacity: 0.85; }
.learn-process {
  margin-top: auto; padding: 10px 12px; border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--c) 28%, var(--border-soft));
  background: color-mix(in oklab, var(--c) 8%, transparent);
  display: flex; flex-direction: column; gap: 4px;
}
.app-shell.rtl .learn-process { text-align: right; }
.lp-k { font-size: 10.5px; font-weight: 800; color: var(--c); letter-spacing: 0.02em; }
.lp-v { font-size: 11.5px; color: var(--text-soft); line-height: 1.7; }
.status-pill {
  flex: none; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800;
}
.status-pill.def { color: #5FD6B5; background: rgba(95,214,181,0.14); border: 1px solid rgba(95,214,181,0.45); }
.status-pill.und { color: var(--text-muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft); }
.learn-card.center.open { opacity: 0.92; }
.learn-rich { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.lr-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.02); }
.app-shell.rtl .lr-row { text-align: right; }
.lr-row > span { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; align-self: start; }
.lr-row > p { font-size: 11.5px; line-height: 1.75; color: var(--text-soft); }
.lr-row.aligned > span { color: #5FD6B5; background: rgba(95,214,181,0.14); border: 1px solid rgba(95,214,181,0.4); }
.lr-row.notself > span { color: #FF8FA3; background: rgba(244,95,95,0.12); border: 1px solid rgba(244,95,95,0.35); }
.lr-row.practice > span { color: var(--gold); background: rgba(248,198,72,0.12); border: 1px solid rgba(248,198,72,0.4); }

@media (max-width: 920px) {
  .guide-intro { grid-template-columns: 1fr; }
  .guide-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   CENTERS
   ───────────────────────────────────────────────────────────── */
.centers-grid { display: grid; grid-template-columns: 320px 1fr; gap: 14px; }
.centers-chart-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11,15,30,0.86), rgba(5,7,18,0.92));
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.ccc-header { display: flex; align-items: center; justify-content: space-between; }
.ccc-legend {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--border-soft);
}
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-soft); }
.lg-dot { width: 10px; height: 10px; border-radius: 999px; }
.lg-dot.defined  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.lg-dot.undefined { background: rgba(255,255,255,0.25); }
.legend-pct { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.lg-pct-text strong { display: block; color: var(--green); font-size: 13px; font-weight: 700; }
.lg-pct-text em { display: block; color: var(--text-muted); font-size: 11px; font-style: normal; margin-top: 2px; }
.ccc-bodygraph { display: grid; place-items: center; padding-top: 4px; }

.centers-details { display: flex; flex-direction: column; gap: 12px; }
.cd-h { color: #fff; font-size: 17px; font-weight: 700; }
.app-shell.rtl .cd-h { text-align: right; }
.centers-detail-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }

/* ── تبويب «تعريف المراكز» ──────────────────────────────────── */
.cdef-grid {
  display: grid; gap: 14px; margin-top: 18px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.cdef-card {
  background: rgba(255,255,255,0.028);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px; padding: 18px 20px 14px;
  position: relative; overflow: hidden;
}
.cdef-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--cc-tone, #8A5CFF), transparent 75%);
  opacity: .75;
}
.cdef-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.cdef-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.cdef-head h3 { margin: 0; font-size: 15.5px; font-weight: 700; flex: 1; }
.cdef-key {
  margin: 0 0 14px; font-size: 12.5px; line-height: 1.7;
  color: rgba(255,255,255,0.52); font-style: italic;
}
.cdef-block { margin-bottom: 12px; }
.cdef-h {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; margin-bottom: 4px;
}
.cdef-block p {
  margin: 0; font-size: 13px; line-height: 1.85;
  color: rgba(255,255,255,0.72);
}
.cdef-card .cc-fulllink { margin-top: 4px; }
.chac-empty p {
  margin: 0; font-size: 13.5px; line-height: 1.9;
  color: rgba(255,255,255,0.62); text-align: center; padding: 8px 4px;
}
.center-card { grid-column: span 2; }
.center-card {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in oklch, var(--cc-tone) 28%, transparent);
  background: rgba(10,12,24,0.6);
  overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform 180ms, box-shadow 180ms;
  min-height: 200px;
}
.center-card.is-defined { border-color: color-mix(in oklch, var(--cc-tone) 50%, transparent); }
.center-card.is-active { box-shadow: 0 0 24px color-mix(in oklch, var(--cc-tone) 50%, transparent); transform: translateY(-2px); }
/* Full, uncropped center artwork (matches the 504×420 source ratio) */
.cc-figure {
  aspect-ratio: 504 / 420;
  width: 100%; overflow: hidden; position: relative;
  background: radial-gradient(circle at 50% 40%, rgba(20,16,44,0.6), rgba(4,5,14,0.95));
}
.cc-figure img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; position: relative; z-index: 1;
}
/* gentle fade so the artwork dissolves into the card body */
.cc-figure::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(8,10,22,0.55) 70%, rgba(8,10,22,0.9));
  pointer-events: none;
}
/* the half-width cards (head / ajna) keep the same full ratio */
/* the full-width root banner crops to a wide cinematic strip */
.cc-figure-glow {
  position: absolute; inset: 0; z-index: 0;
}
.cc-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cc-title { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 13.5px; font-weight: 700; }
.cc-num { color: var(--cc-tone); }
.cc-tag {
  align-self: flex-start;
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.cc-tag.tag-def { background: rgba(95,214,181,0.15); border: 1px solid rgba(95,214,181,0.45); color: var(--green); }
.cc-tag.tag-open { background: rgba(170,170,200,0.1); border: 1px solid rgba(170,170,200,0.3); color: var(--text-muted); }
.center-card p { color: var(--text-muted); font-size: 11.5px; line-height: 1.7; flex: 1; }
.cc-cta {
  align-self: flex-start;
  padding: 6px 14px; border-radius: 8px;
  background: rgba(0,0,0,0.4);
  border: 1px solid color-mix(in oklch, var(--cc-tone) 45%, transparent);
  color: var(--cc-tone); font-family: inherit; font-weight: 600; font-size: 12px;
  cursor: pointer;
}
.cc-cta.muted { color: var(--text-muted); border-color: rgba(170,170,200,0.3); }

.vision-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  border-radius: var(--r-lg);
  border: 1px solid rgba(192,132,255,0.4);
  background: linear-gradient(180deg, rgba(13,8,32,0.86), rgba(5,3,18,0.92));
  padding: 18px 22px;
}
.vc-icon { color: var(--violet); }
.vc-text h3 { color: var(--violet); font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.vc-text p { color: var(--text-muted); font-size: 13px; line-height: 1.85; }

/* ─────────────────────────────────────────────────────────────
   PLANETS
   ───────────────────────────────────────────────────────────── */
.planets-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 16px; }
.solar-system {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: radial-gradient(circle at 50% 50%, rgba(40,30,90,0.18), rgba(5,7,18,0.6));
  padding: 16px; min-height: 480px;
  display: grid; place-items: center;
}
.planet-detail {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11,15,30,0.9), rgba(5,7,18,0.92));
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.pd-header { display: flex; flex-direction: column; gap: 8px; }
.pd-badge {
  align-self: flex-start;
  background: rgba(152,114,255,0.18); color: var(--violet);
  border: 1px solid rgba(152,114,255,0.45);
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.pd-name-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-name { color: #fff; font-size: 28px; font-weight: 800; }
.pd-glyph { font-size: 22px; }
.pd-numbers { display: flex; gap: 10px; margin-inline-start: auto; }
.pd-num {
  text-align: center; padding: 8px 14px; border-radius: 10px;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid;
}
.pd-num.p { border-color: rgba(95,214,181,0.42); background: rgba(95,214,181,0.06); }
.pd-num.d { border-color: rgba(244,95,95,0.42); background: rgba(244,95,95,0.06); }
.pd-num div { font-size: 10.5px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.04em; }
.pd-num.p div { color: var(--green); }
.pd-num.d div { color: var(--red); }
.pd-num strong { font-size: 18px; color: #fff; font-family: var(--font-mono); }
.pd-num span { font-size: 10px; color: var(--text-muted); }
.pd-sub { color: var(--text-soft); font-size: 13px; line-height: 1.75; }

.pd-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-card {
  border-radius: 12px; padding: 12px 14px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.025);
  display: flex; flex-direction: column; gap: 6px;
}
.pdc-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.pdc-h em { font-style: normal; margin-inline-start: auto; font-weight: 500; font-size: 11.5px; color: var(--text-muted); }
.pd-card p { color: var(--text-muted); font-size: 12px; line-height: 1.8; }
.pd-cyan   { border-color: rgba(88,210,249,0.42); background: rgba(88,210,249,0.04); }
.pd-cyan .pdc-h { color: var(--cyan); }
.pd-violet { border-color: rgba(192,132,255,0.42); background: rgba(192,132,255,0.04); }
.pd-violet .pdc-h { color: var(--violet); }
.pd-green  { border-color: rgba(95,214,181,0.42); background: rgba(95,214,181,0.04); }
.pd-green .pdc-h { color: var(--green); }
.pd-red    { border-color: rgba(244,95,95,0.42); background: rgba(244,95,95,0.04); }
.pd-red .pdc-h { color: var(--red); }

.pd-questions {
  border-radius: 12px; padding: 12px 14px;
  border: 1px solid rgba(192,132,255,0.32);
  background: rgba(192,132,255,0.04);
}
.pdq-h { display: flex; align-items: center; gap: 8px; color: var(--violet); font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.pd-questions ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pd-questions li { color: var(--text-muted); font-size: 12.5px; line-height: 1.7; padding-inline-start: 14px; position: relative; }
.pd-questions li::before { content: "•"; color: var(--violet); position: absolute; inset-inline-start: 0; }

.planet-strip {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11,15,30,0.86), rgba(5,7,18,0.92));
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.ps-h { display: flex; flex-direction: column; gap: 2px; }
.ps-h h3 { color: #fff; font-size: 16px; font-weight: 700; }
.app-shell.rtl .ps-h { text-align: right; }
.ps-h p { color: var(--text-muted); font-size: 12px; }
.ps-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-muted); }
.ps-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 999px; margin-inline-end: 6px; vertical-align: middle; }
.planet-chips { display: grid; grid-template-columns: repeat(13, 1fr); gap: 8px; }
.pchip {
  border-radius: 10px; padding: 10px 6px;
  background: rgba(20,15,40,0.4);
  border: 1px solid var(--border-soft);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; font-family: inherit; color: var(--text-soft);
  transition: all 180ms;
}
.pchip:hover { border-color: var(--pc-color); }
.pchip.is-active { background: rgba(20,30,60,0.6); border-color: var(--pc-color); box-shadow: 0 0 16px color-mix(in oklch, var(--pc-color) 50%, transparent); }
.pchip-icon { font-size: 18px; }
.pchip-name { font-size: 11px; font-weight: 600; }
.pchip-num { font-size: 11px; font-family: var(--font-mono); font-weight: 700; }
.pchip-num.p { color: var(--cyan); }
.pchip-num.d { color: var(--violet); }

/* ─────────────────────────────────────────────────────────────
   GATES
   ───────────────────────────────────────────────────────────── */
.gates-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.gates-filters, .gates-sorts { display: flex; gap: 8px; align-items: center; }
.pill-select {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft);
  color: var(--text-muted); font-size: 12.5px; cursor: pointer;
}
.count-pill {
  padding: 6px 14px; border-radius: 999px;
  background: rgba(192,132,255,0.1); color: var(--violet);
  border: 1px solid rgba(192,132,255,0.35);
  font-size: 12.5px; font-weight: 700;
}
.gates-grid { display: grid; grid-template-columns: 1.2fr 1.5fr; gap: 14px; min-height: 0; }

.gates-list-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11,15,30,0.86), rgba(5,7,18,0.92));
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.gates-search {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-soft);
}
.gates-search input {
  flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font: inherit;
}
.gates-search input::placeholder { color: var(--text-dim); }
.gates-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gate-tile {
  position: relative; padding: 12px 10px; border-radius: 10px;
  background: rgba(15,20,40,0.6); border: 1px solid color-mix(in oklch, var(--gt-color) 35%, transparent);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer; font-family: inherit; color: var(--text-soft);
  transition: all 180ms;
}
.gate-tile:hover { border-color: var(--gt-color); }
.gate-tile.is-active { background: rgba(20,30,60,0.7); border-color: var(--gt-color); box-shadow: 0 0 18px color-mix(in oklch, var(--gt-color) 50%, transparent); }
.gt-side {
  position: absolute; top: 6px;
  font-size: 10px; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in oklch, var(--gt-color) 20%, transparent);
  color: var(--gt-color); font-weight: 700;
}
.app-shell.rtl .gt-side { right: 6px; }
.app-shell.ltr .gt-side { left: 6px; }
.gt-star { position: absolute; top: 7px; color: var(--text-muted); }
.app-shell.rtl .gt-star { left: 8px; }
.app-shell.ltr .gt-star { right: 8px; }
.gt-num { font-size: 22px; font-weight: 800; font-family: var(--font-mono); color: #fff; margin-top: 12px; }
.gt-planet { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-soft); }
.gt-kw { font-size: 10.5px; color: var(--text-muted); }
.see-more {
  background: transparent; border: 1px solid var(--border-soft);
  padding: 8px 16px; border-radius: 10px;
  color: var(--cyan); font-family: inherit; font-size: 12.5px; cursor: pointer;
  align-self: center;
}

.gate-detail {
  border-radius: var(--r-lg);
  border: 1px solid rgba(152,114,255,0.4);
  background:
    linear-gradient(180deg, rgba(13,11,32,0.86), rgba(5,3,18,0.92)),
    radial-gradient(circle at 90% 0%, rgba(192,132,255,0.12), transparent 50%);
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.gd-header { display: flex; gap: 8px; }
.gd-side, .gd-center {
  padding: 4px 14px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.gd-side.cyan { background: rgba(88,210,249,0.18); color: var(--cyan); border: 1px solid rgba(88,210,249,0.4); }
.gd-center.violet { background: rgba(192,132,255,0.12); color: var(--violet); border: 1px solid rgba(192,132,255,0.4); margin-inline-start: auto; }
.gd-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.gd-title { font-size: 32px; font-weight: 800; color: #fff; }
.gd-sub { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.gd-meta { color: var(--text-muted); font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.gd-body { color: var(--text-soft); font-size: 13px; line-height: 1.85; }
.gd-balance { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gd-bal-card, .gd-line {
  border-radius: 12px; padding: 12px 14px;
  border: 1px solid;
}
.gd-bal-card.green { border-color: rgba(95,214,181,0.42); background: rgba(95,214,181,0.05); }
.gd-bal-card.red { border-color: rgba(244,95,95,0.42); background: rgba(244,95,95,0.05); }
.gd-line { border-color: rgba(248,198,72,0.4); background: rgba(248,198,72,0.04); }
.gd-line-purple { border-color: rgba(192,132,255,0.42); background: rgba(192,132,255,0.04); }
.gbc-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.gd-bal-card.green .gbc-h { color: var(--green); }
.gd-bal-card.red .gbc-h { color: var(--red); }
.gd-line-purple .gbc-h { color: var(--violet); }
.gd-balance p { color: var(--text-muted); font-size: 12px; line-height: 1.7; }
.gd-balance p.ex { margin-top: 6px; color: var(--text-soft); }
.gd-line p { color: var(--text-muted); font-size: 12.5px; line-height: 1.8; }
.gd-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.gtg-label { color: var(--text-muted); font-size: 12px; }
.tag-chip {
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft);
  color: var(--text-soft); font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────
   COMPARE
   ───────────────────────────────────────────────────────────── */
.compare-pick {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 12px 16px; margin-bottom: 14px;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-soft);
}
.cpk-label { font-size: 13px; font-weight: 700; color: var(--text-soft); }
.cpk-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cpk-pill {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--text-muted);
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft);
  transition: all 0.18s ease;
}
.cpk-pill:hover { color: #fff; border-color: rgba(162,141,254,0.5); }
.cpk-pill.is-on {
  color: #fff; background: rgba(162,141,254,0.18);
  border-color: rgba(162,141,254,0.65);
  box-shadow: 0 0 14px rgba(162,141,254,0.18);
}
.cpk-sample.is-on { background: rgba(95,214,181,0.14); border-color: rgba(95,214,181,0.55); box-shadow: 0 0 14px rgba(95,214,181,0.15); }
.cpk-empty { font-size: 12px; color: var(--text-dim); }

.compare-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cp-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11,15,30,0.86), rgba(5,7,18,0.92));
  padding: 16px 18px;
}
.cp-me { border-color: rgba(152,114,255,0.42); background: linear-gradient(180deg, rgba(11,8,32,0.86), rgba(5,3,18,0.92)); }
.cp-head { display: flex; align-items: center; gap: 12px; }
.cp-head h3 { color: #fff; font-size: 18px; font-weight: 700; flex: 1; }
.app-shell.rtl .cp-head h3 { text-align: right; }
.cp-avatar {
  width: 44px; height: 44px; border-radius: 999px;
  background: linear-gradient(135deg, #8A5CFF, #62DDFF);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px;
  box-shadow: 0 0 16px rgba(157,102,255,0.4);
}
.cp-body { display: grid; grid-template-columns: 1fr 100px 1fr; gap: 12px; align-items: start; padding-top: 12px; }
.cp-meta { display: flex; flex-direction: column; gap: 8px; }
.cp-meta div em { display: block; font-style: normal; color: var(--text-muted); font-size: 11px; }
.cp-meta div span { display: block; color: var(--text-soft); font-size: 12.5px; font-weight: 600; }
.cp-mini-bg { display: grid; place-items: center; }
.cp-summary { display: flex; flex-direction: column; gap: 4px; }
.cp-tag {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(192,132,255,0.12); color: var(--violet);
  border: 1px solid rgba(192,132,255,0.35);
  font-size: 11px; font-weight: 700; align-self: flex-start;
  margin-bottom: 4px;
}
.cp-srow {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-soft);
}
.cp-sv { color: #fff; font-size: 12px; font-weight: 700; flex: 1; }
.app-shell.rtl .cp-sv { text-align: right; }
.cp-sl { font-size: 11px; color: var(--text-muted); }
.cp-si { color: var(--violet); }

.compare-table {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11,15,30,0.86), rgba(5,7,18,0.92));
  overflow: hidden;
}
.ct-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  padding: 12px 18px; gap: 14px;
  border-bottom: 1px solid var(--border-soft);
  align-items: center; font-size: 12.5px;
}
.ct-row:last-child { border-bottom: none; }
.ct-head { background: rgba(192,132,255,0.06); color: var(--violet); font-weight: 700; font-size: 13px; }
.ct-note { display: flex; align-items: center; gap: 6px; color: var(--text-soft); }
.ct-asp { color: var(--violet); font-weight: 700; }

.compare-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cb-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11,15,30,0.86), rgba(5,7,18,0.92));
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.cb-h { color: #fff; font-size: 16px; font-weight: 700; }
.app-shell.rtl .cb-h { text-align: right; }
.cb-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cb-mini {
  border-radius: 12px; padding: 10px 12px;
  border: 1px solid; display: flex; flex-direction: column; gap: 6px;
}
.cb-purple { border-color: rgba(152,114,255,0.42); background: rgba(152,114,255,0.05); }
.cb-purple .cbm-h { color: var(--violet); }
.cb-gold { border-color: rgba(248,198,72,0.42); background: rgba(248,198,72,0.05); }
.cb-gold .cbm-h { color: var(--gold); }
.cb-green { border-color: rgba(95,214,181,0.42); background: rgba(95,214,181,0.05); }
.cb-green .cbm-h { color: var(--green); }
.cbm-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.cb-mini p { font-size: 11.5px; line-height: 1.7; color: var(--text-muted); }
.cb-mini em { font-style: normal; font-size: 11px; color: var(--text-soft); font-weight: 600; }
.cb-channels { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; align-items: center; }
.cb-channels strong { color: var(--text-soft); font-size: 12.5px; }
.ch-tag {
  display: inline-flex; flex-direction: column; padding: 4px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft);
  font-size: 12px; color: #fff;
}
.ch-tag em { font-style: normal; font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.ch-none { font-size: 12.5px; color: var(--text-dim); }

.cbd-row, .cbr-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px; border-bottom: 1px solid var(--border-soft); }
.cbd-row:last-child, .cbr-row:last-child { border-bottom: none; }
.cbd-icon, .cbr-icon { flex-shrink: 0; margin-top: 1px; }
.cbd-text strong, .cbr-text strong { display: block; font-size: 13px; }
.cbd-text span, .cbr-text span { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.7; }

.deep-compare { grid-template-columns: 56px 1fr auto; }
.deep-compare .dc-figure { color: var(--gold); }
.deep-compare .dc-text h3 { color: #fff; }

/* ─────────────────────────────────────────────────────────────
   LABS
   ───────────────────────────────────────────────────────────── */
.page-labs { padding-top: 18px; }
.labs-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 8px 24px 4px;
}
.labs-title {
  font-size: 64px; font-weight: 800; line-height: 1.02;
  background: linear-gradient(180deg, #D7B4FF 0%, #B07BFF 45%, #7C5BE3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.02em;
  filter: drop-shadow(0 0 22px rgba(150,90,255,0.35));
}
.app-shell.rtl .labs-title { text-align: right; }
.labs-sub { color: var(--text-muted); font-size: 15px; margin-top: 8px; max-width: 460px; }
.app-shell.rtl .labs-sub { text-align: right; }
.labs-hero-help { margin-top: 14px; }
.labs-hero-help .help-btn { margin-top: 0; }

.labs-hero-figure {
  position: relative; width: 420px; height: 188px;
  display: grid; place-items: center; overflow: visible;
}
.labs-hero-figure image-slot { position: relative; z-index: 2; }
.labs-hero-glow {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 220px; height: 220px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(151,87,255,0.40), transparent 62%);
  filter: blur(6px);
}
.labs-hero-rings {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%) rotate(-16deg);
  width: 360px; height: 220px; z-index: 1; pointer-events: none;
  border-radius: 50%;
  border: 1px solid rgba(170,130,255,0.22);
  box-shadow:
    0 0 0 1px rgba(170,130,255,0.05),
    inset 0 0 40px rgba(151,87,255,0.10);
}
.labs-hero-rings::before {
  content: ""; position: absolute; inset: 26px 60px;
  border-radius: 50%; border: 1px solid rgba(170,130,255,0.14);
}

.labs-filters { padding: 14px 24px 4px; }

.labs-grid {
  padding: 4px 24px 24px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
}
.lab-card {
  grid-column: span 2;
  direction: ltr;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in oklch, var(--lc-color) 32%, rgba(120,90,160,0.18));
  background:
    linear-gradient(180deg, rgba(11,15,30,0.86), rgba(5,7,18,0.92)),
    radial-gradient(circle at 100% -10%, color-mix(in oklch, var(--lc-color) 16%, transparent), transparent 52%);
  padding: 20px 22px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center;
  min-height: 180px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 48px rgba(0,0,0,0.42);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.lab-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--lc-color) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 26px color-mix(in oklch, var(--lc-color) 20%, transparent),
    0 22px 56px rgba(0,0,0,0.5);
}
.lab-big {
  grid-column: span 3;
  min-height: 234px;
  padding: 22px 26px;
}
.lab-solo {
  grid-column: 1 / -1;
  min-height: 220px;
  padding: 24px 28px;
}
.labs-empty {
  grid-column: 1 / -1;
  padding: 40px 24px; text-align: center;
  color: var(--text-dim); font-size: 15px;
  border: 1px dashed var(--border-soft); border-radius: var(--r-lg);
}
.labs-note {
  margin: 0; padding: 4px 24px 26px;
  color: var(--text-dim); font-size: 12.5px; line-height: 1.8;
  text-align: center;
}
.lab-featured {
  border-color: color-mix(in oklch, var(--lc-color) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 0 30px color-mix(in oklch, var(--lc-color) 18%, transparent),
    0 18px 48px rgba(0,0,0,0.45);
}
.lab-locked { opacity: 0.66; }
.lab-locked:hover { transform: none; }

/* figure */
.lc-figure {
  position: relative; display: grid; place-items: center;
  align-self: center; overflow: visible;
}
.lc-figure image-slot { position: relative; z-index: 2; }
.lc-figure-glow {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 120%; height: 120%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, color-mix(in oklch, var(--lc-color) 34%, transparent), transparent 64%);
  filter: blur(4px);
}
.lab-big .lc-figure-glow { width: 128%; height: 128%; }

/* corner pins */
.lc-pin {
  position: absolute; top: 14px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: color-mix(in oklch, var(--lc-color) 16%, rgba(8,10,22,0.6));
  border: 1px solid color-mix(in oklch, var(--lc-color) 45%, transparent);
  color: var(--lc-color);
  display: inline-flex; align-items: center; gap: 5px;
  backdrop-filter: blur(8px);
  z-index: 3;
}
.app-shell.rtl .lc-pin { left: 16px; }
.app-shell.ltr .lc-pin { right: 16px; }
.lc-pin.lc-soon { background: rgba(150,150,180,0.1); color: var(--text-muted); border-color: rgba(150,150,180,0.28); }

/* text block */
.lc-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.app-shell.rtl .lc-text { direction: rtl; text-align: right; }
.app-shell.ltr .lc-text { direction: ltr; text-align: left; }
.lc-title-row { display: flex; align-items: center; gap: 9px; }
.app-shell.rtl .lc-title-row { flex-direction: row-reverse; justify-content: flex-end; }
.lc-title { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.lab-big .lc-title { font-size: 24px; }
.lc-beta-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(95,214,181,0.14); color: var(--green);
  border: 1px solid rgba(95,214,181,0.42);
}
.lc-lead { font-size: 14px; font-weight: 600; line-height: 1.55; opacity: 0.95; }
.lab-big .lc-lead { font-size: 15px; }
.lc-body { color: var(--text-muted); font-size: 12.5px; line-height: 1.85; flex: 1; }
.lab-big .lc-body { font-size: 13px; }

/* actions */
.lc-actions { display: flex; gap: 11px; align-items: center; margin-top: 10px; }
.lc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 11px;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--lc-color) 36%, transparent),
    color-mix(in oklch, var(--lc-color) 24%, transparent));
  border: 1px solid color-mix(in oklch, var(--lc-color) 60%, transparent);
  color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: filter 160ms ease, transform 160ms ease;
  box-shadow: 0 0 18px color-mix(in oklch, var(--lc-color) 20%, transparent);
}
.lc-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.lc-cta svg { transform: scaleX(1); }
.app-shell.ltr .lc-cta svg { transform: scaleX(-1); }
.lc-more {
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--text-muted); padding: 9px 14px; border-radius: 999px;
  font-size: 12px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color 160ms ease, border-color 160ms ease;
}
.lc-more:hover { color: var(--text-soft); border-color: rgba(171,192,255,0.3); }
.lc-locked-btn {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border-soft);
  color: var(--text-muted); padding: 11px 16px; border-radius: 11px;
  font-size: 13px; font-family: inherit; cursor: not-allowed;
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  margin-top: 10px; width: 100%;
}

@media (max-width: 1080px) {
  .labs-grid { grid-template-columns: repeat(2, 1fr); }
  .lab-card, .lab-big { grid-column: span 1; }
}
@media (max-width: 720px) {
  .labs-grid { grid-template-columns: 1fr; }
  .lab-card, .lab-big { grid-column: span 1; }
}

/* ─────────────────────────────────────────────────────────────
   TWEAKS PANEL
   ───────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   NEON FIGURE BLEND
   The art's background is dark navy — almost the same as the card. So a
   single radial mask that fades the figure's outer edge to transparent is
   all it takes: the navy edge melts into the dark card with no visible
   rectangle, while the neon subject in the centre stays fully intact
   (no blend / no filter that would wash out the glow).
   ═══════════════════════════════════════════════════════════════ */
image-slot::part(frame) { background: transparent !important; }

.lc-figure image-slot,
.labs-hero-figure image-slot,
.hero-figure image-slot,
.fc-figure image-slot {
  /* closest-side: 100% = the nearest edge, so alpha hits 0 BEFORE every
     edge of the box — no straight line can ever survive, even on wide
     crops like the 400×150 labs hero. */
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 42%, rgba(0,0,0,0.55) 70%, transparent 97%);
          mask-image: radial-gradient(ellipse closest-side at center, #000 42%, rgba(0,0,0,0.55) 70%, transparent 97%);
  /* screen blend: anything darker than the card melts into it — the
     artwork's navy backdrop (and with it the "frame") disappears, while
     the neon subject, being brighter, stays fully intact. */
  mix-blend-mode: screen;
}

/* (the old diagonal light-sweep was retired — light now travels along
   the stroke outlines of the SVG icons themselves; see content-db.css) */

/* ── Rings: slow orbital precession + comet, woken by hover ── */
@keyframes rings-precess {
  from { transform: translate(-50%, -50%) rotate(-16deg); }
  to   { transform: translate(-50%, -50%) rotate(344deg); }
}
.labs-hero-rings {
  animation: rings-precess 48s linear infinite;
  animation-play-state: paused;
}
.labs-hero-figure:hover .labs-hero-rings { animation-play-state: running; }
.labs-hero-rings::after {
  content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #D9C8FF;
  box-shadow: 0 0 8px 2px rgba(178,140,255,0.85), 0 0 22px 6px rgba(150,100,255,0.35);
  offset-path: ellipse(49% 49% at 50% 50%);
  animation: comet-orbit 7s linear infinite;
  animation-play-state: paused;
  opacity: 0; transition: opacity 0.5s ease;
}
@keyframes comet-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.labs-hero-figure:hover .labs-hero-rings::after { opacity: 1; animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .labs-hero-rings, .labs-hero-rings::after { animation: none; }
}

.tweaks-panel {
  position: fixed; z-index: 100;
  width: 340px; max-height: 88vh; overflow-y: auto;
  border-radius: 16px;
  background: rgba(8,10,20,0.96);
  border: 1px solid rgba(152,114,255,0.4);
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 24px rgba(157,102,255,0.2);
  backdrop-filter: blur(20px);
  font-family: var(--font-en);
  color: var(--text-soft);
}
.tweaks-panel::-webkit-scrollbar { width: 4px; }
.tweaks-panel::-webkit-scrollbar-thumb { background: rgba(152,114,255,0.35); border-radius: 4px; }
.tp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: grab;
}
.tp-head span { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.tp-x {
  background: transparent; border: 0; color: var(--text-muted); font-size: 22px; cursor: pointer;
  width: 24px; height: 24px; display: grid; place-items: center;
}
.tp-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.tp-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.tp-row label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.tp-row input[type=range] { width: 100%; accent-color: var(--violet); }
.tp-val { font-size: 11px; color: var(--violet); font-family: var(--font-mono); }
.tp-swatch-row { display: flex; gap: 8px; }
.tp-sw {
  width: 36px; height: 36px; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer; flex-shrink: 0;
}
.tp-sw.is-active { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.4); }
.tp-radio { display: flex; gap: 6px; }
.tp-radio button {
  flex: 1; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft);
  color: var(--text-muted); font-family: inherit; font-size: 12px; cursor: pointer;
}
.tp-radio button.is-active { background: rgba(152,114,255,0.2); color: #fff; border-color: var(--violet); }
.tp-footnote { font-size: 10.5px; color: var(--text-dim); padding-top: 4px; line-height: 1.5; }

.tp-section {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 10px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.tp-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.tp-section-h {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--violet); text-transform: uppercase;
}
.tp-row.tp-toggle {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
}
.tp-tg {
  width: 38px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border-soft);
  position: relative; cursor: pointer; transition: background 180ms;
  padding: 0;
}
.tp-tg.on { background: rgba(152,114,255,0.4); border-color: var(--violet); }
.tp-tg-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 999px;
  background: #fff; transition: transform 180ms ease;
}
.tp-tg.on .tp-tg-knob { transform: translateX(16px); }
.tp-row.tp-latlng {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.tp-row.tp-latlng label { grid-column: span 2; }
.tp-row input[type=number], .tp-row input[type=datetime-local] {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft);
  color: #fff; padding: 6px 10px; border-radius: 8px; font: inherit; font-size: 12px;
  width: 100%;
}
.tp-row input[type=number]:focus, .tp-row input[type=datetime-local]:focus {
  outline: none; border-color: var(--violet);
}