/* Qaraabah — refined visual system */
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Amiri+Quran&family=Reem+Kufi:wght@400;500;600;700&family=Cairo:wght@400;500;600;700;800&family=Amiri:wght@400;700&display=swap');

:root{
  /* Ink base — deep, warm-undertone charcoal */
  --ink-0: #0B100D;
  --ink-1: #111712;
  --ink-2: #161E18;
  --ink-3: #1D261F;
  --ink-4: #28332B;

  /* Parchment — for tree nodes & cards on light surfaces */
  --parch-0: #F5EFE3;
  --parch-1: #EAE3D2;
  --parch-2: #D8CFB8;

  /* Antique gold + bronze accent (single hue family) */
  --gold-0: #C9A961;
  --gold-1: #B89446;
  --gold-2: #8C6F3F;
  --gold-3: #6B5430;

  /* Sage — generation 2 */
  --sage-0: #8AA372;
  --sage-1: #6E8358;

  /* Muted neutrals */
  --slate-0: #7A8076;
  --slate-1: #5A615A;

  /* Text */
  --text-0: #F0E8D6;
  --text-1: #D4CDB8;
  --text-2: #948C78;
  --text-3: #5C5849;

  /* Lines */
  --hair: rgba(201,169,97,.13);
  --hair-strong: rgba(201,169,97,.24);
  --rim-soft: rgba(201,169,97,.08);

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25);
  --shadow-2: 0 8px 32px rgba(0,0,0,.4);

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body{
  font-family:'Cairo', sans-serif;
  background: var(--ink-0);
  color: var(--text-0);
  direction: rtl;
  font-feature-settings: "ss01", "kern";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.6;
}

button{ font-family:'Cairo', sans-serif; cursor: pointer; border: none; white-space: nowrap; }
input, select, textarea { font-family:'Cairo', sans-serif; }

/* ─────────── Buttons ─────────── */
.btn-primary{
  background: var(--gold-0); color: var(--ink-0);
  font-weight: 700; font-size: 13px;
  padding: 8px 16px; border-radius: var(--r-md);
  letter-spacing: .01em;
  transition: background .15s;
}
.btn-primary:hover{ background: #D4B670; }
.btn-primary.btn-sm{ padding: 6px 13px; font-size: 12px; }
.btn-primary.btn-lg{ padding: 14px 28px; font-size: 15px; }

.btn-ghost{
  background: transparent; color: var(--text-1);
  border: 1px solid var(--hair-strong);
  padding: 7px 14px; border-radius: var(--r-md); font-size: 12px; font-weight: 600;
  transition: all .15s;
}
.btn-ghost:hover{ border-color: var(--gold-0); color: var(--gold-0); }

.btn-icon{
  background: transparent; color: var(--text-1);
  width: 34px; height: 34px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; position: relative;
  border: 1px solid transparent;
}
.btn-icon:hover{ background: var(--ink-2); border-color: var(--hair); }
.btn-icon .dot{
  position: absolute; top: 7px; right: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-0);
}

/* ─────────── Logo ─────────── */
.logo{ display: flex; align-items: center; gap: 10px; }
.logo-name{ font-family:'Amiri', serif; font-weight: 700; font-size: 18px; color: var(--gold-0); letter-spacing: .03em; }
.logo-sub{ font-size: 10px; color: var(--text-3); letter-spacing: .35em; margin-top: -2px; }

/* ─────────── Landing ─────────── */
.landing{ min-height: 100vh; position: relative; overflow: hidden; background: var(--ink-0); }
.landing-bg-grain{
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,169,97,.10), transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(138,163,114,.05), transparent 70%);
}
.landing-nav{
  position: relative; z-index: 2;
  padding: 22px 48px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--hair);
}
.landing-hero{
  position: relative; z-index: 2;
  max-width: 740px; margin: 0 auto;
  padding: 110px 32px 80px;
  text-align: center;
}
.landing-eyebrow{
  font-size: 10px; letter-spacing: .55em; color: var(--gold-2);
  margin-bottom: 28px;
}
.landing-h1{
  font-family:'Amiri', serif; font-weight: 700;
  font-size: clamp(48px, 7vw, 86px);
  line-height: 1.15; color: var(--text-0);
  margin-bottom: 26px;
}
.landing-h1 em{ font-style: normal; color: var(--gold-0); }
.landing-sub{
  color: var(--text-2); font-size: 16px; line-height: 2;
  max-width: 520px; margin: 0 auto 44px;
}
.landing-cta{ display: flex; flex-direction: column; align-items: center; gap: 14px; }
.landing-meta{ font-size: 12px; color: var(--text-3); letter-spacing: .04em; }
.landing-quote{
  margin-top: 80px; font-family:'Amiri', serif;
  font-size: 18px; color: var(--gold-2); opacity: .8;
  padding-top: 32px; border-top: 1px solid var(--hair);
  max-width: 600px; margin-left: auto; margin-right: auto;
}

/* ─────────── App shell ─────────── */
.app-shell{ display: flex; height: 100vh; overflow: hidden; }

.sidebar{
  width: 248px; min-width: 248px;
  background: var(--ink-1);
  border-left: 1px solid var(--hair);
  display: flex; flex-direction: column;
}
.sidebar-brand{ padding: 22px 20px 14px; border-bottom: 1px solid var(--hair); }
.sidebar-family{
  padding: 14px 20px; border-bottom: 1px solid var(--hair);
}
.family-name{ font-family:'Amiri', serif; font-size: 17px; color: var(--text-0); font-weight: 700; }
.family-meta{ font-size: 11px; color: var(--text-3); letter-spacing: .15em; margin-top: 2px; }

.sidebar-nav{ flex: 1; overflow-y: auto; padding: 10px; }
.nav-section{ display: flex; flex-direction: column; gap: 1px; }
.nav-divider{ height: 1px; background: var(--hair); margin: 14px 4px; }
.nav-label-group{
  font-size: 9px; letter-spacing: .3em; color: var(--text-3);
  padding: 4px 10px 6px;
}
.nav-item{
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 500; color: var(--text-1);
  cursor: pointer; transition: all .15s;
  border-right: 2px solid transparent;
}
.nav-item:hover{ background: var(--ink-2); color: var(--text-0); }
.nav-item.active{
  background: rgba(201,169,97,.1);
  color: var(--gold-0); font-weight: 700;
  border-right-color: var(--gold-0);
}
.nav-icon{
  width: 18px; text-align: center;
  font-size: 13px; opacity: .85;
  font-family:'Amiri', serif;
}
.nav-item.active .nav-icon{ opacity: 1; color: var(--gold-0); }
.nav-label{ flex: 1; }
.nav-meta{
  font-size: 10px; color: var(--text-3);
  background: var(--ink-3); padding: 1px 7px; border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.nav-badge{
  background: var(--gold-0); color: var(--ink-0);
  font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 9px;
}

.sidebar-footer{ padding: 12px; border-top: 1px solid var(--hair); }
.user-card{
  display: flex; align-items: center; gap: 10px;
  padding: 10px; background: var(--ink-2);
  border: 1px solid var(--hair); border-radius: var(--r-md);
}
.user-avatar{
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(201,169,97,.14);
  border: 1px solid var(--hair-strong);
  display: flex; align-items: center; justify-content: center;
  font-family:'Amiri', serif; font-weight: 700; font-size: 12px;
  color: var(--gold-0);
}
.user-info{ flex: 1; min-width: 0; }
.user-name{ font-size: 12px; font-weight: 700; color: var(--text-0); }
.user-role{ font-size: 10px; color: var(--text-3); }
.user-logout{
  background: transparent; color: var(--text-2);
  width: 26px; height: 26px; border-radius: 4px;
  font-size: 13px;
}
.user-logout:hover{ color: var(--gold-0); background: var(--ink-3); }

/* ─────────── Page area ─────────── */
.page-area{ flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--ink-0); }

.topbar{
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px; height: 60px;
  background: var(--ink-1);
  border-bottom: 1px solid var(--hair);
}
.topbar-title{
  font-family:'Amiri', serif; font-weight: 700;
  font-size: 18px; color: var(--text-0);
}
.topbar-left{ min-width: 180px; }
.topbar-search{
  flex: 1; max-width: 420px; position: relative;
  display: flex; align-items: center; gap: 8px;
  background: var(--ink-2); border: 1px solid var(--hair);
  border-radius: var(--r-md); padding: 7px 14px;
  transition: border-color .15s;
}
.topbar-search:focus-within{ border-color: var(--gold-2); }
.search-icon{ color: var(--text-3); font-size: 14px; }
.topbar-search input{
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--text-0); font-size: 13px;
}
.topbar-search input::placeholder{ color: var(--text-3); }

.search-drop{
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--ink-1); border: 1px solid var(--hair-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-2);
  z-index: 100; max-height: 320px; overflow-y: auto;
}
.search-item{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--hair);
}
.search-item:last-child{ border-bottom: none; }
.search-item:hover{ background: var(--ink-2); }
.si-mono{
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(201,169,97,.14); border: 1px solid var(--hair-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-family:'Amiri', serif; font-weight: 700; font-size: 11px; color: var(--gold-0);
}
.si-name{ flex: 1; font-size: 13px; color: var(--text-0); font-weight: 600; }
.si-meta{ font-size: 11px; color: var(--text-3); }

.topbar-right{ display: flex; align-items: center; gap: 8px; }

.page-content{ flex: 1; overflow: auto; }

/* ─────────── Tree view ─────────── */
.tree-toolbar{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 24px; background: var(--ink-1);
  border-bottom: 1px solid var(--hair);
}
.tree-toolbar-left{ display: flex; align-items: baseline; gap: 14px; }
.tree-family-name{
  font-family:'Amiri', serif; font-weight: 700;
  font-size: 17px; color: var(--gold-0);
}
.tree-meta{ font-size: 11px; color: var(--text-3); letter-spacing: .04em; }

.tree-filter-group{
  display: flex; gap: 1px; background: var(--ink-2);
  padding: 3px; border-radius: var(--r-md);
  border: 1px solid var(--hair);
  margin-right: auto;
}
.tf-chip{
  background: transparent; color: var(--text-2);
  font-size: 11px; font-weight: 600;
  padding: 5px 12px; border-radius: 5px;
  transition: all .15s;
}
.tf-chip:hover{ color: var(--text-0); }
.tf-chip.active{
  background: var(--ink-3); color: var(--gold-0);
  box-shadow: 0 1px 0 rgba(201,169,97,.15);
}

.tree-toolbar-right{ display: flex; gap: 6px; }
.tf-icon-btn{
  background: var(--ink-2); color: var(--text-1);
  border: 1px solid var(--hair); border-radius: var(--r-md);
  width: 32px; height: 32px; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tf-icon-btn:hover:not(:disabled){ border-color: var(--gold-2); color: var(--gold-0); }
.tf-icon-btn:disabled{ opacity: .35; cursor: not-allowed; }

.tree-canvas{
  flex: 1; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 25%, rgba(201,169,97,.04), transparent 70%),
    var(--ink-0);
}
.tree-svg{ width: 100%; height: 100%; cursor: grab; direction: ltr; }
.tree-svg:active{ cursor: grabbing; }

.tree-legend{
  position: absolute; bottom: 16px; right: 16px;
  background: rgba(11,16,13,.92); backdrop-filter: blur(8px);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  padding: 12px 14px; font-size: 11px; color: var(--text-1);
  min-width: 160px;
}
.tl-title{
  font-family:'Amiri', serif; color: var(--gold-0); font-weight: 700;
  font-size: 12px; margin-bottom: 8px;
  border-bottom: 1px solid var(--hair); padding-bottom: 6px;
}
.tl-row{ display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.tl-swatch{ width: 10px; height: 10px; border-radius: 2px; }

/* ─────────── Profile ─────────── */
.profile-page{ padding: 24px 32px 40px; max-width: 1200px; margin: 0 auto; }

.profile-hero{
  background: var(--ink-1); border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  margin-bottom: 20px;
}
.ph-actions{
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--hair);
}
.ph-body{ display: flex; gap: 28px; align-items: flex-start; }

.ph-mono{
  position: relative; cursor: pointer;
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(201,169,97,.1);
  border: 2px solid var(--gold-2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ph-mono-letters{
  font-family:'Amiri', serif; font-weight: 700;
  font-size: 32px; color: var(--gold-0);
}
.ph-crown{
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--gold-0); color: var(--ink-0);
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  border: 2px solid var(--ink-1);
}
.ph-photo{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ph-photo-edit{
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,16,13,.55); font-size: 20px;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.ph-mono:hover .ph-photo-edit{ opacity: 1; }

.ph-info{ flex: 1; min-width: 0; }
.ph-lineage{
  font-size: 11px; color: var(--text-3);
  margin-bottom: 8px; letter-spacing: .04em;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.ph-lineage-link{ cursor: pointer; transition: color .15s; }
.ph-lineage-link:hover{ color: var(--gold-0); }
.ph-lineage-self{ color: var(--gold-0); font-weight: 700; }
.ph-lineage-sep{ color: var(--text-3); opacity: .5; }

.ph-name{
  font-family:'Amiri', serif; font-weight: 700;
  font-size: 32px; line-height: 1.15; color: var(--text-0);
  margin-bottom: 6px;
}
.ph-kunya{ font-size: 13px; color: var(--text-2); margin-bottom: 14px; font-style: italic; }
.ph-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

.tag{
  display: inline-flex; align-items: center;
  white-space: nowrap; flex-shrink: 0;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 4px;
  letter-spacing: .02em;
}
.tag-gold{ background: rgba(201,169,97,.12); color: var(--gold-0); border: 1px solid rgba(201,169,97,.25); }
.tag-bronze{ background: var(--gold-2); color: var(--ink-0); }
.tag-sage{ background: rgba(138,163,114,.14); color: var(--sage-0); border: 1px solid rgba(138,163,114,.3); }
.tag-mute{ background: rgba(122,128,118,.12); color: var(--slate-0); border: 1px solid rgba(122,128,118,.25); }
.tag-line{ background: transparent; color: var(--text-2); border: 1px solid var(--hair-strong); }

.ph-life{
  display: flex; align-items: center; gap: 12px;
  font-family:'Amiri', serif;
  color: var(--text-1); font-size: 16px;
}
.life-year{ color: var(--gold-0); font-weight: 700; font-size: 22px; }
.life-sep{ color: var(--text-3); letter-spacing: -.1em; }
.life-age{ color: var(--text-2); font-size: 12px; font-family:'Cairo', sans-serif; }

/* Stat tiles */
.profile-stats{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 20px;
}
.stat-tile{
  background: var(--ink-1); border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.stat-tile-label{
  font-size: 10px; letter-spacing: .25em;
  color: var(--text-3); margin-bottom: 8px;
}
.stat-tile-value{
  font-family:'Amiri', serif; font-weight: 700;
  font-size: 16px; color: var(--text-0);
  font-variant-numeric: tabular-nums;
}
.stat-tile-value.lg{ font-size: 36px; line-height: 1.1; color: var(--gold-0); }
.stat-tile.big{ padding: 22px; }

/* Body two-column */
.profile-body{
  display: grid; grid-template-columns: 1fr 360px; gap: 20px;
}

.profile-section{
  background: var(--ink-1); border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 22px 24px; margin-bottom: 16px;
}
.profile-section.is-compact{ padding: 18px 20px; }
.ps-header{ margin-bottom: 16px; }
.ps-title{
  font-family:'Amiri', serif; font-weight: 700;
  font-size: 17px; color: var(--gold-0);
  display: flex; align-items: baseline; gap: 8px;
}
.ps-count{
  font-family:'Cairo', sans-serif; font-size: 11px;
  color: var(--text-3); font-weight: 500;
  background: var(--ink-3); padding: 1px 8px; border-radius: 9px;
}
.ps-subtitle{ font-size: 12px; color: var(--text-3); margin-top: 4px; }

.bio-text{
  font-family:'Amiri', serif; font-size: 16px; line-height: 1.95;
  color: var(--text-1);
}

/* Lineage chain */
.lineage-chain{ display: flex; flex-direction: column; }
.lineage-step{
  display: flex; gap: 14px; cursor: pointer;
  padding: 4px 0; transition: opacity .15s;
}
.lineage-step:hover .ls-card{ background: var(--ink-3); border-color: var(--hair-strong); }
.ls-rail{
  width: 24px; flex-shrink: 0; position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.ls-dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink-1); border: 2px solid var(--gold-2);
  z-index: 2; margin-top: 14px;
}
.lineage-step.is-self .ls-dot{ background: var(--gold-0); border-color: var(--gold-0); }
.ls-line{
  position: absolute; top: 26px; bottom: -8px; left: 50%;
  width: 1px; background: var(--hair-strong);
  transform: translateX(-50%);
}
.ls-card{
  flex: 1; background: var(--ink-2); border: 1px solid var(--hair);
  border-radius: var(--r-md); padding: 12px 16px;
  margin-bottom: 8px;
  transition: all .15s;
}
.ls-num{ font-size: 10px; letter-spacing: .2em; color: var(--text-3); margin-bottom: 4px; }
.ls-name{ font-family:'Amiri', serif; font-weight: 700; font-size: 16px; color: var(--text-0); }
.ls-meta{ font-size: 12px; color: var(--text-2); margin-top: 3px; }

/* Person row */
.person-row{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px; cursor: pointer;
  border-bottom: 1px solid var(--hair);
  transition: padding .15s;
}
.person-row:last-child{ border-bottom: none; }
.person-row:hover{ padding-right: 8px; }
.person-row:hover .pr-arrow{ opacity: 1; transform: translateX(-3px); color: var(--gold-0); }

.pr-mono{
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(201,169,97,.12); border: 1px solid var(--hair-strong);
  display: flex; align-items: center; justify-content: center;
  font-family:'Amiri', serif; font-weight: 700; font-size: 12px;
  color: var(--gold-0); flex-shrink: 0;
}
.pr-mono.is-inlaw{
  background: rgba(122,128,118,.12); border-color: rgba(122,128,118,.3);
  color: var(--slate-0);
}
.pr-info{ flex: 1; min-width: 0; }
.pr-name{
  font-family:'Amiri', serif; font-weight: 700; font-size: 14px; color: var(--text-0);
  display: flex; align-items: baseline; gap: 6px;
}
.pr-dagger{ font-size: 11px; color: var(--text-3); font-family: serif; }
.pr-meta{ display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); margin-top: 2px; }
.pr-rel{ color: var(--gold-2); font-weight: 600; }
.pr-dot{ color: var(--text-3); opacity: .5; }
.pr-arrow{ color: var(--text-3); font-size: 14px; opacity: .35; transition: all .15s; }

.see-more{
  text-align: center; padding: 10px;
  font-size: 12px; color: var(--gold-0);
  cursor: pointer; border-top: 1px solid var(--hair);
}

/* Members grid (simple) */
.members-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; padding: 24px; }
.m-card{
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--ink-1);
  border: 1px solid var(--hair); border-radius: var(--r-md);
  cursor: pointer; transition: all .15s; position: relative;
}
.m-card:hover{ border-color: var(--gold-2); transform: translateY(-1px); }
.m-mono{
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(201,169,97,.12); border: 1px solid var(--hair-strong);
  display: flex; align-items: center; justify-content: center;
  font-family:'Amiri', serif; font-weight: 700; font-size: 13px; color: var(--gold-0);
}
.m-mono.is-inlaw{ background: rgba(122,128,118,.12); border-color: rgba(122,128,118,.3); color: var(--slate-0); }
.m-body{ flex: 1; min-width: 0; }
.m-name{ font-family:'Amiri', serif; font-weight: 700; font-size: 14px; color: var(--text-0); }
.m-sub{ font-size: 11px; color: var(--text-2); margin-top: 2px; }
.m-tag{ font-size: 10px; color: var(--text-3); }

/* Dashboard */
.dashboard{ padding: 32px; }
.dash-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* ─────────── Kinship calculator ─────────── */
.kinship-page{ padding: 32px; max-width: 1100px; margin: 0 auto; }
.kin-intro{ text-align: center; margin-bottom: 36px; }
.kin-eyebrow{ font-size: 10px; letter-spacing: .55em; color: var(--gold-2); margin-bottom: 16px; }
.kin-title{ font-family:'Amiri', serif; font-weight: 700; font-size: 38px; color: var(--text-0); margin-bottom: 10px; }
.kin-sub{ color: var(--text-2); font-size: 14px; max-width: 520px; margin: 0 auto; line-height: 1.8; }

.kin-pickers{ display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; margin-bottom: 28px; }
.kin-vs{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 70px; }
.kin-vs-line{ width: 1px; flex: 1; background: var(--hair-strong); }
.kin-vs-label{ font-family:'Amiri', serif; font-size: 12px; color: var(--gold-0); writing-mode: vertical-rl; text-orientation: mixed; }

.kin-picker{ background: var(--ink-1); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 20px; min-height: 130px; }
.kin-picker.is-selected{ border-color: var(--gold-2); }
.kin-picker-label{ font-size: 10px; letter-spacing: .25em; color: var(--text-3); margin-bottom: 14px; }
.kin-search{ display: flex; align-items: center; gap: 10px; background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px 14px; }
.kin-search input{ flex: 1; background: transparent; border: none; outline: none; color: var(--text-0); font-size: 14px; }
.kin-search input::placeholder{ color: var(--text-3); }

.kin-results{ margin-top: 10px; background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-md); overflow: hidden; }
.kin-result-item{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--hair); }
.kin-result-item:last-child{ border-bottom: none; }
.kin-result-item:hover{ background: var(--ink-3); }
.kin-result-name{ flex: 1; font-size: 13px; color: var(--text-0); font-weight: 600; font-family:'Amiri', serif; }
.kin-result-meta{ font-size: 11px; color: var(--text-3); }

.kin-card-selected{ display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.kin-mono{ width: 48px; height: 48px; border-radius: 50%; background: rgba(201,169,97,.14); border: 1.5px solid var(--gold-2); display: flex; align-items: center; justify-content: center; font-family:'Amiri', serif; font-weight: 700; font-size: 16px; color: var(--gold-0); }
.kin-card-info{ flex: 1; min-width: 0; }
.kin-card-name{ font-family:'Amiri', serif; font-weight: 700; font-size: 17px; color: var(--text-0); }
.kin-card-meta{ font-size: 12px; color: var(--text-2); margin-top: 3px; }
.kin-clear{ background: var(--ink-2); color: var(--text-2); border: 1px solid var(--hair); border-radius: 50%; width: 26px; height: 26px; font-size: 16px; }
.kin-clear:hover{ border-color: var(--gold-2); color: var(--gold-0); }

.kin-result{ background: var(--ink-1); border: 1px solid var(--gold-2); border-radius: var(--r-lg); padding: 32px; text-align: center; position: relative; }
.kin-result::before, .kin-result::after{ content: '✦'; position: absolute; top: 12px; color: var(--gold-2); font-size: 14px; }
.kin-result::before{ left: 16px; } .kin-result::after{ right: 16px; }
.kin-result-eyebrow{ font-size: 10px; letter-spacing: .35em; color: var(--gold-2); margin-bottom: 12px; }
.kin-result-label{ font-family:'Amiri', serif; font-weight: 700; font-size: 32px; color: var(--gold-0); margin-bottom: 8px; }
.kin-result-degree{ font-size: 13px; color: var(--text-2); margin-bottom: 24px; }

.kin-result.kin-result-empty{ border-color: var(--hair-strong); padding: 40px 24px; }
.kin-empty-icon{ font-size: 38px; color: var(--text-3); margin-bottom: 12px; }
.kin-empty-text{ color: var(--text-2); font-size: 14px; }

.kin-path{ border-top: 1px solid var(--hair); padding-top: 22px; margin-top: 8px; }
.kin-path-title{ font-size: 11px; letter-spacing: .25em; color: var(--text-3); margin-bottom: 18px; }
.kin-path-rail{ display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.kin-path-node{ background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 14px; min-width: 130px; cursor: pointer; transition: all .15s; }
.kin-path-node:hover{ border-color: var(--gold-2); transform: translateY(-1px); }
.kin-path-node.is-end{ border-color: var(--gold-2); background: rgba(201,169,97,.06); }
.kin-path-mono{ width: 32px; height: 32px; border-radius: 50%; background: rgba(201,169,97,.14); border: 1px solid var(--hair-strong); display: flex; align-items: center; justify-content: center; font-family:'Amiri', serif; font-weight: 700; font-size: 11px; color: var(--gold-0); margin: 0 auto 6px; }
.kin-path-name{ font-family:'Amiri', serif; font-weight: 700; font-size: 13px; color: var(--text-0); text-align: center; }
.kin-path-tag{ font-size: 10px; color: var(--gold-2); margin-top: 4px; text-align: center; letter-spacing: .1em; }
.kin-path-arrow{ color: var(--gold-2); font-size: 16px; opacity: .6; }

/* ─────────── Lineage documents ─────────── */
.docs-page{ display: grid; grid-template-columns: 280px 1fr; gap: 0; height: 100%; }
.docs-sidebar{ background: var(--ink-1); border-left: 1px solid var(--hair); padding: 20px 16px; overflow-y: auto; }
.docs-section-title{ font-size: 10px; letter-spacing: .25em; color: var(--text-3); margin-bottom: 10px; }
.docs-list{ display: flex; flex-direction: column; gap: 4px; }
.docs-list-item{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; border: 1px solid transparent; }
.docs-list-item:hover{ background: var(--ink-2); }
.docs-list-item.active{ background: rgba(201,169,97,.08); border-color: var(--gold-2); }
.dl-mono{ width: 30px; height: 30px; border-radius: 50%; background: rgba(201,169,97,.14); border: 1px solid var(--hair-strong); display: flex; align-items: center; justify-content: center; font-family:'Amiri', serif; font-weight: 700; font-size: 11px; color: var(--gold-0); flex-shrink: 0; }
.dl-info{ flex: 1; min-width: 0; }
.dl-name{ font-family:'Amiri', serif; font-weight: 700; font-size: 13px; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-meta{ font-size: 10px; color: var(--text-3); margin-top: 2px; }
.docs-types{ display: flex; flex-direction: column; gap: 6px; }
.docs-type{ display: flex; gap: 10px; padding: 10px 12px; background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-md); cursor: pointer; }
.docs-type.active{ border-color: var(--gold-2); background: rgba(201,169,97,.06); }
.docs-type.is-coming{ opacity: .5; cursor: not-allowed; }
.dt-icon{ font-family:'Amiri', serif; color: var(--gold-0); font-size: 16px; }
.dt-title{ font-family:'Amiri', serif; font-weight: 700; font-size: 13px; color: var(--text-0); }
.dt-meta{ font-size: 10px; color: var(--text-3); margin-top: 2px; }

.docs-stage{ background: var(--ink-0); padding: 24px 32px 40px; overflow-y: auto; }
.docs-stage-toolbar{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dst-meta{ font-size: 11px; letter-spacing: .25em; color: var(--text-3); }

/* Lineage document — parchment, ink & antique gold */
.parchment{
  position: relative; max-width: 800px; margin: 0 auto;
  background:
    radial-gradient(ellipse 500px 300px at 50% 0%, rgba(201,169,97,.08), transparent 70%),
    linear-gradient(180deg, var(--parch-0) 0%, var(--parch-1) 100%);
  color: #2A2318;
  --brand-gold: #8C6F3F;
  --brand-ink: #2A2318;
  --brand-rim: rgba(140,111,63,.4);
  padding: 64px 68px 48px;
  border-radius: 2px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.3);
  overflow: hidden;
}
/* Subtle laid-paper texture */
.parchment::before{
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(90deg, rgba(140,111,63,.05) 0 1px, transparent 1px 3px);
}
.parchment::after{
  content: ''; position: absolute; inset: 12px;
  border: 1.5px solid var(--brand-rim); border-radius: 1px; pointer-events: none;
}
.pmt-corner{
  position: absolute; width: 34px; height: 34px; pointer-events: none;
  border: 2px solid var(--gold-2); opacity: .85; z-index: 3;
}
.pmt-corner-tl{ top: 22px; right: 22px; border-bottom: none; border-left: none; }
.pmt-corner-tr{ top: 22px; left: 22px; border-bottom: none; border-right: none; }
.pmt-corner-bl{ bottom: 22px; right: 22px; border-top: none; border-left: none; }
.pmt-corner-br{ bottom: 22px; left: 22px; border-top: none; border-right: none; }

.pmt-header{ text-align: center; margin-bottom: 28px; position: relative; }
.pmt-tughra{ display: flex; justify-content: center; margin-bottom: 14px; }
.pmt-bismillah{
  font-family:'Reem Kufi', 'Cairo', sans-serif; font-weight: 500;
  font-size: 18px; color: var(--brand-gold); margin-bottom: 24px; letter-spacing: .04em;
}
.pmt-divider{ display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.pmt-divider-sm{ margin-top: 12px; margin-bottom: 0; }
.pmt-divider-line{ width: 80px; height: 1px; background: linear-gradient(to right, transparent, var(--brand-rim), transparent); }
.pmt-divider-sm .pmt-divider-line{ width: 50px; }
.pmt-divider-orn{ color: var(--brand-gold); font-size: 11px; }
.pmt-eyebrow{
  font-family:'Reem Kufi','Cairo', sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .55em; color: var(--brand-gold);
  margin-bottom: 14px; text-transform: uppercase;
}
.pmt-family{
  font-family:'Amiri', serif; font-weight: 700;
  font-size: 46px; color: var(--brand-ink); letter-spacing: -.01em; line-height: 1.1;
}

.pmt-body{ position: relative; z-index: 2; }
.pmt-prose{
  font-family:'Cairo', sans-serif; font-weight: 400;
  font-size: 15px; line-height: 2.05;
  color: rgba(42,35,24,.88); margin-bottom: 28px;
}
.pmt-name{ font-family:'Amiri', serif; color: var(--brand-gold); font-weight: 700; font-size: 18px; }
.pmt-yr{ color: var(--brand-gold); font-weight: 700; font-variant-numeric: tabular-nums; }

.pmt-chain{
  background: rgba(140,111,63,.06);
  border: 1px solid var(--brand-rim); border-radius: 4px;
  padding: 18px 22px; margin-bottom: 28px;
}
.pmt-chain-row{ display: grid; grid-template-columns: 32px 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(140,111,63,.15); }
.pmt-chain-row:last-child{ border-bottom: none; }
.pcr-num{ font-family:'Amiri', serif; font-weight: 700; font-size: 13px; color: var(--brand-gold); text-align: center; font-variant-numeric: tabular-nums; opacity: .85; }
.pcr-line{ height: 1px; background: linear-gradient(to right, var(--brand-rim), transparent); }
.pcr-name{ font-family:'Amiri', serif; font-size: 16px; color: var(--brand-ink); font-weight: 700; }
.pmt-chain-row.is-self .pcr-name{ color: var(--brand-gold); }
.pmt-chain-row.is-self{ background: rgba(140,111,63,.1); margin: 0 -12px; padding-right: 12px; padding-left: 12px; border-radius: 4px; border-bottom: 1px solid rgba(140,111,63,.15); }
.pcr-tag{ font-family:'Cairo', sans-serif; font-size: 10px; letter-spacing: .12em; color: var(--brand-gold); font-weight: 600; margin-right: 8px; opacity: .85; }
.pcr-yr{ font-family:'Cairo', sans-serif; color: rgba(42,35,24,.65); font-size: 12px; font-variant-numeric: tabular-nums; }

.pmt-quote{
  text-align: center; font-family:'Amiri', serif;
  font-size: 18px; color: var(--brand-gold); padding: 22px 0; margin: 16px 0 28px;
  border-top: 1px solid var(--brand-rim);
  border-bottom: 1px solid var(--brand-rim);
}
.pmt-quote-cite{ font-size: 11px; color: rgba(42,35,24,.55); margin-top: 8px; font-family:'Cairo', sans-serif; letter-spacing: .1em; }

.pmt-footer{ display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding-top: 22px; border-top: 1px solid var(--brand-rim); }
.pmt-seal{ display: flex; gap: 16px; align-items: center; }
.pmt-seal-ring{
  width: 70px; height: 70px; border-radius: 50%;
  border: 1.5px solid var(--brand-gold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  position: relative; background: rgba(140,111,63,.08);
}
.pmt-seal-ring::before{ content: ''; position: absolute; inset: 5px; border: 1px solid rgba(140,111,63,.4); border-radius: 50%; }
.pmt-seal-ring span{ font-family:'Amiri', serif; font-weight: 700; font-size: 13px; color: var(--brand-gold); }
.pmt-seal-meta{ font-size: 11px; color: rgba(42,35,24,.7); line-height: 1.8; font-family:'Cairo', sans-serif; }
.pmt-seal-meta strong{ font-weight: 700; color: var(--brand-ink); }
.pmt-signoff{ text-align: center; min-width: 130px; }
.pmt-sig-line{ height: 1px; background: var(--brand-gold); opacity: .7; margin-bottom: 6px; }
.pmt-sig-label{ font-family:'Cairo', sans-serif; font-size: 11px; color: rgba(42,35,24,.65); letter-spacing: .1em; }

@media print {
  .sidebar, .topbar, .docs-sidebar, .docs-stage-toolbar { display: none !important; }
  .app-shell, .page-area, .page-content, .docs-page, .docs-stage{ display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; background: white !important; }
  .parchment{ box-shadow: none !important; max-width: 100%; }
}

/* Responsive */
.lifeline{ position: relative; padding-right: 24px; }
.lifeline::before{ content: ''; position: absolute; right: 7px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(to bottom, var(--gold-2), var(--hair-strong) 50%, transparent); }
.life-event{ position: relative; padding: 8px 0 16px; display: grid; grid-template-columns: 60px 1fr; gap: 14px; align-items: baseline; }
.life-event::before{ content: ''; position: absolute; right: 4px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-1); border: 2px solid var(--gold-2); }
.life-event.is-major::before{ background: var(--gold-0); border-color: var(--gold-0); width: 10px; height: 10px; right: 3px; top: 13px; }
.le-year{ font-family:'Amiri', serif; font-weight: 700; font-size: 15px; color: var(--gold-0); font-variant-numeric: tabular-nums; }
.le-body{ }
.le-title{ font-family:'Amiri', serif; font-weight: 700; font-size: 14px; color: var(--text-0); margin-bottom: 2px; }
.le-detail{ font-size: 12px; color: var(--text-2); }

/* Manuscript ornament corners on hero */
.profile-hero{ position: relative; }
.profile-hero::before, .profile-hero::after{
  content: ''; position: absolute; width: 28px; height: 28px;
  border: 1px solid var(--gold-2); opacity: .55; pointer-events: none;
}
.profile-hero::before{ top: 8px; right: 8px; border-bottom: none; border-left: none; }
.profile-hero::after{ bottom: 8px; left: 8px; border-top: none; border-right: none; }
@media (max-width: 960px){
  .profile-body{ grid-template-columns: 1fr; }
  .profile-stats{ grid-template-columns: repeat(2, 1fr); }
  .sidebar{ width: 200px; min-width: 200px; }
}

/* ─────────── Chat ─────────── */
.chat-page{ display: grid; grid-template-columns: 300px 1fr; height: 100%; }
.chat-sidebar{ background: var(--ink-1); border-left: 1px solid var(--hair); padding: 20px 16px; overflow-y: auto; }
.chat-list{ display: flex; flex-direction: column; gap: 4px; }
.chat-list-item{ display: flex; gap: 10px; padding: 10px; border-radius: var(--r-md); cursor: pointer; border: 1px solid transparent; }
.chat-list-item:hover{ background: var(--ink-2); }
.chat-list-item.active{ background: rgba(201,169,97,.08); border-color: var(--gold-2); }
.cl-mono{ width: 38px; height: 38px; border-radius: 50%; background: rgba(201,169,97,.14); border: 1px solid var(--hair-strong); display: flex; align-items: center; justify-content: center; font-family:'Amiri', serif; font-weight: 700; font-size: 15px; color: var(--gold-0); flex-shrink: 0; }
.cl-mono.lg{ width: 44px; height: 44px; font-size: 17px; }
.cl-body{ flex: 1; min-width: 0; }
.cl-top{ display: flex; justify-content: space-between; gap: 8px; }
.cl-name{ font-family:'Amiri', serif; font-weight: 700; font-size: 13px; color: var(--text-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-time{ font-size: 10px; color: var(--text-3); flex-shrink: 0; }
.cl-bottom{ display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.cl-last{ font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-unread{ background: var(--gold-0); color: var(--ink-0); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; flex-shrink: 0; }
.chat-stage{ display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-header{ display: flex; align-items: center; gap: 12px; padding: 14px 24px; background: var(--ink-1); border-bottom: 1px solid var(--hair); }
.chat-header-name{ font-family:'Amiri', serif; font-weight: 700; font-size: 15px; color: var(--text-0); }
.chat-header-meta{ font-size: 11px; color: var(--text-3); margin-top: 2px; }
.chat-thread{ flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; background: var(--ink-0); }
.chat-bubble-row{ display: flex; flex-direction: column; align-items: flex-start; max-width: 62%; }
.chat-bubble-row.is-mine{ align-self: flex-end; align-items: flex-end; }
.cb-sender{ font-size: 11px; color: var(--gold-2); font-weight: 600; margin-bottom: 3px; }
.chat-bubble{ background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px 14px; font-size: 13.5px; line-height: 1.7; color: var(--text-0); }
.is-mine .chat-bubble{ background: rgba(201,169,97,.14); border-color: var(--hair-strong); }
.cb-time{ font-size: 10px; color: var(--text-3); margin-top: 4px; }
.chat-composer{ display: flex; gap: 10px; padding: 14px 24px; background: var(--ink-1); border-top: 1px solid var(--hair); }
.chat-composer input{ flex: 1; background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px 14px; color: var(--text-0); font-size: 13px; outline: none; }
.chat-composer input:focus{ border-color: var(--gold-2); }
.chat-composer input::placeholder{ color: var(--text-3); }

/* ─────────── Events ─────────── */
.events-page{ padding: 24px 32px 40px; }
.events-toolbar{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.events-grid{ display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.event-card{ display: flex; gap: 18px; background: var(--ink-1); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 18px 20px; transition: border-color .15s; }
.event-card:hover{ border-color: var(--gold-2); }
.ev-date{ width: 64px; flex-shrink: 0; text-align: center; border-left: 1px solid var(--hair); padding-left: 18px; }
.ev-date-d{ font-family:'Amiri', serif; font-weight: 700; font-size: 26px; color: var(--gold-0); line-height: 1; }
.ev-date-m{ font-size: 10px; color: var(--text-3); margin-top: 4px; }
.ev-body{ flex: 1; min-width: 0; }
.ev-top{ margin-bottom: 6px; }
.ev-title{ font-family:'Amiri', serif; font-weight: 700; font-size: 16px; color: var(--text-0); margin-bottom: 4px; }
.ev-meta{ font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.ev-foot{ display: flex; gap: 16px; font-size: 11px; color: var(--text-3); }
.ev-host{ cursor: pointer; }
.ev-host:hover{ color: var(--gold-0); }
.empty-note{ text-align: center; padding: 40px; color: var(--text-3); font-size: 13px; }

/* ─────────── Requests ─────────── */
.requests-page{ padding: 24px 32px 40px; position: relative; }
.req-list{ display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.req-card{ display: flex; gap: 16px; align-items: flex-start; background: var(--ink-1); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 18px 20px; }
.req-icon{ width: 36px; height: 36px; border-radius: 50%; background: rgba(201,169,97,.12); border: 1px solid var(--hair-strong); display: flex; align-items: center; justify-content: center; font-family:'Amiri', serif; color: var(--gold-0); font-size: 15px; flex-shrink: 0; }
.req-body{ flex: 1; min-width: 0; }
.req-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.req-time{ font-size: 10px; color: var(--text-3); }
.req-name{ font-family:'Amiri', serif; font-weight: 700; font-size: 14px; color: var(--text-0); cursor: pointer; margin-bottom: 3px; }
.req-name:hover{ color: var(--gold-0); }
.req-meta{ font-size: 12px; color: var(--text-2); line-height: 1.6; }
.req-actions{ display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.req-diff{ display: flex; flex-direction: column; gap: 4px; margin-top: 10px; background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 8px 12px; }
.req-diff-row{ display: flex; align-items: center; gap: 8px; font-size: 12px; }
.req-diff-label{ color: var(--text-3); width: 90px; flex-shrink: 0; }
.req-diff-old{ color: var(--text-2); text-decoration: line-through; }
.req-diff-arrow{ color: var(--gold-2); }
.req-diff-new{ color: var(--gold-0); font-weight: 700; }
.req-toast{ position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--ink-2); border: 1px solid var(--gold-2); color: var(--text-0); padding: 10px 20px; border-radius: var(--r-md); font-size: 13px; box-shadow: var(--shadow-2); z-index: 200; }

/* ─────────── Settings ─────────── */
.settings-page{ padding: 24px 32px 40px; max-width: 720px; }
.settings-tabs{ display: flex; gap: 4px; border-bottom: 1px solid var(--hair); margin-bottom: 20px; }
.settings-tab{ padding: 10px 4px; font-size: 13px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-left: 20px; }
.settings-tab:hover{ color: var(--text-0); }
.settings-tab.active{ color: var(--gold-0); font-weight: 700; border-bottom-color: var(--gold-0); }
.settings-field{ margin-bottom: 16px; }
.settings-field label{ display: block; font-size: 11px; color: var(--text-3); letter-spacing: .04em; margin-bottom: 6px; }
.settings-field input{ width: 100%; background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 9px 12px; color: var(--text-0); font-size: 13px; outline: none; }
.settings-field input:focus{ border-color: var(--gold-2); }
.settings-field input:disabled{ opacity: .55; }
.settings-logo-row{ display: flex; align-items: center; gap: 14px; }
.settings-radio-group{ display: flex; flex-direction: column; gap: 10px; }
.settings-radio{ display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-1); cursor: pointer; }
.settings-radio input{ accent-color: var(--gold-0); width: 15px; height: 15px; }
.settings-row{ display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 13px; color: var(--text-1); }
.settings-row:last-child{ border-bottom: none; }
.switch{ width: 38px; height: 22px; border-radius: 11px; background: var(--ink-3); border: 1px solid var(--hair-strong); position: relative; cursor: pointer; transition: background .15s; flex-shrink: 0; }
.switch.on{ background: rgba(201,169,97,.35); border-color: var(--gold-2); }
.switch-knob{ position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); transition: all .15s; }
.switch.on .switch-knob{ right: calc(100% - 18px); background: var(--gold-0); }

/* ─────────── Doc: birth certificate grid ─────────── */
.cert-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; background: rgba(140,111,63,.06); border: 1px solid var(--brand-rim); border-radius: 4px; padding: 22px 26px; margin: 20px 0 28px; }
.cert-field{ }
.cert-label{ font-family:'Cairo', sans-serif; font-size: 10px; letter-spacing: .2em; color: var(--brand-gold); margin-bottom: 4px; text-transform: uppercase; }
.cert-value{ font-family:'Amiri', serif; font-weight: 700; font-size: 16px; color: var(--brand-ink); }

/* ─────────── Add member modal ─────────── */
.modal-overlay{ position: fixed; inset: 0; background: rgba(11,16,13,.7); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 300; }
.modal-card{ background: var(--ink-1); border: 1px solid var(--hair-strong); border-radius: var(--r-lg); padding: 28px; width: 480px; max-width: 92vw; box-shadow: var(--shadow-2); }
.modal-title{ font-family:'Amiri', serif; font-weight: 700; font-size: 19px; color: var(--gold-0); margin-bottom: 18px; }
.modal-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal-actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.settings-field select{ width: 100%; background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 9px 12px; color: var(--text-0); font-size: 13px; outline: none; }
.settings-field select:focus{ border-color: var(--gold-2); }
.settings-field textarea{ width:100%; background:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:9px 12px; color:var(--text-0); font-size:13px; outline:none; resize:vertical; line-height:1.8; }
.settings-field textarea:focus{ border-color:var(--gold-2); }

/* ─────────── v2: layout primitives ─────────── */
.page-pad{ padding:26px 32px 48px; max-width:1320px; margin:0 auto; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.sec-title{ font-family:'Amiri',serif; font-weight:700; font-size:24px; color:var(--text-0); }
.sec-sub{ font-size:12.5px; color:var(--text-2); margin-top:4px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.chip-row .tf-chip{ border:1px solid var(--hair); background:var(--ink-1); }
.chip-row .tf-chip.active{ border-color:var(--gold-2); background:rgba(201,169,97,.1); }
.btn-xs{ padding:4px 10px; font-size:11px; }
.btn-ghost.danger{ border-color:rgba(190,90,80,.35); color:#C98A80; }
.btn-ghost.danger:hover{ border-color:#C98A80; color:#E0A79C; }
.link-btn{ background:none; color:var(--gold-0); font-size:11.5px; font-weight:600; }
.topbar-search.inline{ max-width:280px; flex:none; }
.search-clear{ background:none; color:var(--text-3); font-size:16px; line-height:1; padding:0 2px; }
.search-clear:hover{ color:var(--gold-0); }

/* ─────────── Empty states ─────────── */
.empty-state{ text-align:center; padding:60px 24px; max-width:520px; margin:0 auto; }
.empty-state.tall{ padding:120px 24px; }
.es-orn{ font-family:'Amiri',serif; font-size:44px; color:var(--gold-2); opacity:.7; margin-bottom:14px; }
.es-title{ font-family:'Amiri',serif; font-weight:700; font-size:22px; color:var(--text-0); margin-bottom:8px; }
.es-sub{ font-size:13px; color:var(--text-2); line-height:1.9; margin-bottom:22px; }

/* ─────────── Toasts ─────────── */
.toast-stack{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:500; align-items:center; }
.toast{ background:var(--ink-2); border:1px solid var(--gold-2); color:var(--text-0); padding:10px 20px; border-radius:999px; font-size:12.5px; box-shadow:var(--shadow-2); animation:toastIn .25s ease; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* ─────────── Family switcher ─────────── */
.fam-switch{ padding:12px; border-bottom:1px solid var(--hair); position:relative; }
.fs-current{ width:100%; display:flex; align-items:center; gap:10px; background:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:9px 10px; text-align:right; transition:border-color .15s; }
.fs-current:hover, .fs-current.open{ border-color:var(--gold-2); }
.fs-crest{ width:32px; height:32px; border-radius:8px; border:1px solid; display:flex; align-items:center; justify-content:center; font-family:'Amiri',serif; font-weight:700; font-size:12px; flex-shrink:0; }
.fs-txt{ flex:1; min-width:0; display:block; }
.fs-name{ display:block; font-family:'Amiri',serif; font-weight:700; font-size:13.5px; color:var(--text-0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-meta{ display:block; font-size:10px; color:var(--text-3); }
.fs-caret{ color:var(--text-3); font-size:12px; }
.fs-drop{ position:absolute; top:calc(100% - 4px); left:12px; right:12px; background:var(--ink-2); border:1px solid var(--hair-strong); border-radius:var(--r-md); box-shadow:var(--shadow-2); z-index:60; overflow:hidden; }
.fs-item{ display:flex; align-items:center; gap:9px; padding:9px 12px; font-size:12.5px; color:var(--text-1); cursor:pointer; border-bottom:1px solid var(--hair); }
.fs-item:last-child{ border-bottom:none; }
.fs-item:hover{ background:var(--ink-3); color:var(--text-0); }
.fs-item.on{ color:var(--gold-0); }
.fs-item.is-add{ color:var(--gold-0); font-weight:700; justify-content:center; background:rgba(201,169,97,.06); }
.fs-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.fs-n{ margin-right:auto; font-size:10px; color:var(--text-3); }

/* ─────────── Notifications ─────────── */
.notif-wrap{ position:relative; }
.notif-drop{ position:absolute; top:calc(100% + 8px); left:0; width:300px; background:var(--ink-1); border:1px solid var(--hair-strong); border-radius:var(--r-md); box-shadow:var(--shadow-2); z-index:150; overflow:hidden; }
.nd-head{ padding:10px 14px; font-family:'Amiri',serif; font-weight:700; font-size:13px; color:var(--gold-0); border-bottom:1px solid var(--hair); }
.nd-item{ padding:11px 14px; border-bottom:1px solid var(--hair); cursor:pointer; }
.nd-item:hover{ background:var(--ink-2); }
.nd-t{ font-size:12.5px; font-weight:700; color:var(--text-0); }
.nd-s{ font-size:11.5px; color:var(--text-2); margin-top:2px; }
.nd-w{ font-size:10px; color:var(--text-3); margin-top:4px; }
.nd-foot{ padding:9px; text-align:center; font-size:11.5px; color:var(--gold-0); cursor:pointer; background:rgba(201,169,97,.05); }

/* ─────────── Dashboard ─────────── */
.hero-band{ display:flex; align-items:center; justify-content:space-between; gap:24px; background:linear-gradient(135deg, var(--ink-1), var(--ink-2)); border:1px solid var(--hair); border-radius:var(--r-lg); padding:30px 34px; margin-bottom:20px; position:relative; overflow:hidden; }
.hb-eyebrow{ font-size:10px; letter-spacing:.4em; color:var(--gold-2); margin-bottom:10px; }
.hb-title{ font-family:'Amiri',serif; font-weight:700; font-size:30px; color:var(--text-0); margin-bottom:8px; }
.hb-sub{ font-size:13px; color:var(--text-2); margin-bottom:20px; max-width:460px; line-height:1.9; }
.hb-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.hb-orn{ font-family:'Amiri',serif; font-size:120px; color:var(--gold-0); opacity:.09; line-height:1; }
.stat-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:20px; }
.stat-tile.big{ cursor:pointer; transition:border-color .15s, transform .15s; }
.stat-tile.big:hover{ border-color:var(--gold-2); transform:translateY(-2px); }
.dash-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.panel{ background:var(--ink-1); border:1px solid var(--hair); border-radius:var(--r-lg); padding:18px 20px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--hair); }
.panel-head h4{ font-family:'Amiri',serif; font-weight:700; font-size:15px; color:var(--gold-0); }
.dash-fam{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--hair); cursor:pointer; font-size:13px; color:var(--text-1); }
.dash-fam:last-child{ border-bottom:none; }
.dash-fam:hover .df-name{ color:var(--gold-0); }
.df-name{ font-family:'Amiri',serif; font-weight:700; }
.df-bar{ flex:1; height:4px; background:var(--ink-3); border-radius:2px; overflow:hidden; }
.df-bar i{ display:block; height:100%; border-radius:2px; }
.df-n{ font-size:11px; color:var(--text-3); }
.dash-recent{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--hair); cursor:pointer; }
.dash-recent:last-child{ border-bottom:none; }
.dr-name{ flex:1; font-family:'Amiri',serif; font-weight:700; font-size:13px; color:var(--text-0); }
.dr-fam{ font-size:11px; }
.dash-recent:hover .dr-name{ color:var(--gold-0); }

/* ─────────── Families gallery ─────────── */
.fam-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.fam-card{ background:var(--ink-1); border:1px solid var(--hair); border-radius:var(--r-lg); padding:20px; cursor:pointer; transition:all .16s; display:flex; flex-direction:column; gap:14px; }
.fam-card:hover{ border-color:var(--gold-2); transform:translateY(-2px); }
.fam-card.is-active{ border-color:var(--gold-2); background:linear-gradient(180deg, rgba(201,169,97,.06), transparent); }
.fc-top{ display:flex; align-items:center; gap:12px; }
.fc-crest{ width:44px; height:44px; border-radius:10px; border:1.5px solid; display:flex; align-items:center; justify-content:center; font-family:'Amiri',serif; font-weight:700; font-size:15px; flex-shrink:0; }
.fc-id{ flex:1; min-width:0; }
.fc-name{ font-family:'Amiri',serif; font-weight:700; font-size:18px; color:var(--text-0); }
.fc-meta{ font-size:11px; color:var(--text-3); margin-top:2px; }
.fc-badge{ font-size:9.5px; letter-spacing:.12em; color:var(--gold-0); border:1px solid var(--hair-strong); border-radius:999px; padding:2px 8px; }
.fc-motto{ font-family:'Amiri',serif; font-size:13.5px; color:var(--text-2); }
.fc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:12px 0; }
.fc-stats div{ text-align:center; }
.fc-stats b{ display:block; font-family:'Amiri',serif; font-size:20px; color:var(--gold-0); }
.fc-stats span{ font-size:10px; color:var(--text-3); }
.fc-root{ font-size:11.5px; color:var(--text-2); }
.fc-root b{ color:var(--text-1); font-family:'Amiri',serif; }
.fc-allies{ display:flex; flex-wrap:wrap; gap:6px; }
.ally-chip{ font-size:10.5px; border:1px solid; border-radius:999px; padding:2px 9px; }
.ally-chip:hover{ background:rgba(201,169,97,.08); }
.fc-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; }
.fam-card.is-new{ align-items:center; justify-content:center; text-align:center; border-style:dashed; border-color:var(--hair-strong); background:transparent; min-height:220px; }
.fn-plus{ font-size:26px; color:var(--gold-0); }
.fn-title{ font-family:'Amiri',serif; font-weight:700; font-size:17px; color:var(--text-0); }
.fn-sub{ font-size:12px; color:var(--text-3); max-width:230px; line-height:1.8; }

/* ─────────── Wizard ─────────── */
.modal-card.wide{ width:600px; }
.wiz-head{ margin-bottom:18px; }
.wiz-steps{ display:flex; gap:8px; margin-top:14px; }
.wiz-step{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-3); background:var(--ink-2); border:1px solid var(--hair); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.wiz-step.active{ color:var(--gold-0); border-color:var(--gold-2); background:rgba(201,169,97,.08); }
.wiz-step.done{ color:var(--sage-0); cursor:pointer; }
.ws-num{ font-family:'Amiri',serif; font-weight:700; }
.wiz-body{ max-height:52vh; overflow-y:auto; overflow-x:hidden; padding-left:4px; }
.wiz-note{ font-size:12px; color:var(--text-2); margin-bottom:14px; line-height:1.8; }
.wiz-hint{ font-size:11.5px; color:var(--gold-0); background:rgba(201,169,97,.08); border:1px solid var(--hair-strong); border-radius:var(--r-md); padding:8px 12px; }
.wiz-check{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-1); cursor:pointer; margin-bottom:16px; }
.wiz-check input{ accent-color:var(--gold-0); width:15px; height:15px; }
.swatch-row{ display:flex; gap:8px; }
.swatch{ width:26px; height:26px; border-radius:7px; border:2px solid transparent; }
.swatch.on{ border-color:var(--text-0); box-shadow:0 0 0 2px var(--ink-1) inset; }
.seg-row{ display:flex; gap:4px; background:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:3px; margin-bottom:16px; }
.seg{ flex:1; background:transparent; color:var(--text-2); font-size:12px; font-weight:600; padding:7px; border-radius:5px; }
.seg.on{ background:var(--ink-3); color:var(--gold-0); }
.modal-actions{ align-items:center; }

/* ─────────── Alliances ─────────── */
.ally-list{ display:flex; flex-direction:column; gap:12px; max-width:820px; }
.ally-card{ background:var(--ink-1); border:1px solid var(--hair); border-radius:var(--r-lg); padding:18px 20px; }
.ac-head{ display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--hair); margin-bottom:10px; }
.ac-fam{ font-family:'Amiri',serif; font-weight:700; font-size:17px; cursor:pointer; }
.ac-fam:hover{ text-decoration:underline; }
.ac-link{ color:var(--gold-0); font-size:18px; }
.ac-count{ margin-right:auto; font-size:10.5px; color:var(--text-3); border:1px solid var(--hair); border-radius:999px; padding:2px 9px; white-space:nowrap; }
.ac-row{ display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; border-bottom:1px solid var(--hair); }
.ac-row:last-child{ border-bottom:none; }
.ac-p{ font-family:'Amiri',serif; font-weight:700; color:var(--text-0); cursor:pointer; }
.ac-p:hover{ color:var(--gold-0); }
.ac-rings{ color:var(--gold-2); }
.ac-year{ font-size:11px; color:var(--text-3); }
.ac-del{ margin-right:auto; background:none; color:var(--text-3); font-size:16px; width:22px; height:22px; border-radius:4px; }
.ac-del:hover{ color:#C98A80; background:var(--ink-3); }

/* ─────────── Tree v2 ─────────── */
.tree-wrap{ height:100%; display:flex; flex-direction:column; }
.tree-toolbar-left{ display:flex; align-items:center; gap:12px; }
.tree-crest{ width:38px; height:38px; border-radius:9px; border:1.5px solid; display:flex; align-items:center; justify-content:center; font-family:'Amiri',serif; font-weight:700; font-size:13px; }
.tree-ally{ color:var(--gold-0); }
.tf-toggle{ display:flex; align-items:center; gap:6px; background:var(--ink-2); color:var(--text-2); border:1px solid var(--hair); border-radius:var(--r-md); font-size:11px; font-weight:600; padding:0 11px; height:32px; }
.tf-toggle.on{ color:var(--gold-0); border-color:var(--gold-2); background:rgba(201,169,97,.08); }
.tf-toggle span{ font-size:13px; }
.tree-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; pointer-events:none; }
.te-orn{ font-family:'Amiri',serif; font-size:40px; color:var(--gold-2); opacity:.5; }
.te-title{ font-family:'Amiri',serif; font-weight:700; font-size:18px; color:var(--text-1); }
.te-sub{ font-size:12px; color:var(--text-3); }

/* ─────────── Misc v2 ─────────── */
.m-mono img, .pr-mono img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.m-card{ overflow:hidden; }
.data-stats{ display:flex; gap:22px; margin-top:18px; padding-top:14px; border-top:1px solid var(--hair); font-size:12px; color:var(--text-2); }
.data-stats b{ font-family:'Amiri',serif; font-size:17px; color:var(--gold-0); margin-left:5px; }
.kin-cross{ font-size:12px; color:var(--gold-0); background:rgba(201,169,97,.07); border:1px solid var(--hair-strong); border-radius:var(--r-md); padding:8px 14px; display:inline-block; margin-bottom:18px; }
.ph-actions .btn-ghost, .ph-actions .btn-primary{ white-space:nowrap; }

/* ─────────── Verdict (fiqh result) ─────────── */
.verdict{ background:var(--ink-1); border:1px solid var(--gold-2); border-radius:var(--r-lg); padding:28px 30px; position:relative; }
.verdict-head{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--hair); margin-bottom:22px; }
.vh-side{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.vh-name{ font-family:'Amiri',serif; font-weight:700; font-size:14px; color:var(--text-1); text-align:center; }
.vh-mid{ text-align:center; min-width:200px; }
.vh-arrow{ color:var(--gold-2); font-size:15px; opacity:.6; }
.vh-term{ font-family:'Amiri',serif; font-weight:700; font-size:34px; color:var(--gold-0); line-height:1.25; margin:4px 0 6px; }
.vh-of{ font-size:11.5px; color:var(--text-3); }
.verdict-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.vcard{ background:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:16px 18px; text-align:right; }
.vc-label{ font-size:9.5px; letter-spacing:.25em; color:var(--text-3); margin-bottom:8px; }
.vc-value{ font-family:'Amiri',serif; font-weight:700; font-size:19px; color:var(--text-0); display:flex; align-items:center; gap:8px; }
.vc-icon{ color:var(--gold-0); }
.vc-note{ font-size:11.5px; color:var(--text-2); line-height:1.85; margin-top:7px; }
.vc-daleel{ font-family:'Amiri',serif; font-size:12.5px; color:var(--gold-2); line-height:1.9; margin-top:10px; padding-top:9px; border-top:1px solid var(--hair); }
.vcard.is-forbidden{ border-color:rgba(190,110,100,.4); background:rgba(190,110,100,.06); }
.vcard.is-forbidden .vc-value{ color:#D99A90; }
.vcard.is-temp{ border-color:rgba(201,169,97,.4); background:rgba(201,169,97,.06); }
.vcard.is-temp .vc-value{ color:var(--gold-0); }
.vcard.is-allowed{ border-color:rgba(138,163,114,.4); background:rgba(138,163,114,.06); }
.vcard.is-allowed .vc-value{ color:var(--sage-0); }
.vcard.is-spouse{ border-color:var(--gold-2); }
.verdict-virtue{ font-family:'Amiri',serif; font-size:15px; color:var(--gold-0); text-align:center; margin-top:18px; padding:14px; border:1px solid var(--hair-strong); border-radius:var(--r-md); }
.kin-path-node.is-lca{ border-color:var(--gold-0); background:rgba(201,169,97,.1); }
.fatwa-note{ margin-top:20px; padding:12px 16px; background:rgba(122,128,118,.07); border:1px solid var(--hair); border-radius:var(--r-md); font-size:11.5px; color:var(--text-2); line-height:1.9; text-align:center; }

/* ─────────── Glossary ─────────── */
.glossary{ max-width:960px; }
.gl-head{ text-align:center; margin-bottom:28px; }
.gl-orn{ font-family:'Amiri',serif; font-size:34px; color:var(--gold-2); opacity:.75; }
.gl-title{ font-family:'Amiri',serif; font-weight:700; font-size:34px; color:var(--text-0); margin:6px 0 10px; }
.gl-sub{ font-size:13px; color:var(--text-2); line-height:1.95; max-width:560px; margin:0 auto 22px; }
.gl-ayah{ font-family:'Amiri',serif; font-size:19px; color:var(--gold-0); line-height:2; padding-top:20px; border-top:1px solid var(--hair); max-width:640px; margin:0 auto; }
.gl-ayah-cite{ font-size:10.5px; letter-spacing:.2em; color:var(--text-3); margin-top:8px; }
.gl-tabs{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:24px; }
.gl-tab{ background:var(--ink-1); border:1px solid var(--hair); color:var(--text-2); font-size:12px; font-weight:600; padding:8px 16px; border-radius:999px; }
.gl-tab:hover{ color:var(--text-0); border-color:var(--hair-strong); }
.gl-tab.on{ background:rgba(201,169,97,.1); border-color:var(--gold-2); color:var(--gold-0); }
.gl-section{ background:var(--ink-1); border:1px solid var(--hair); border-radius:var(--r-lg); padding:26px 28px; }
.gl-sec-title{ font-family:'Amiri',serif; font-weight:700; font-size:22px; color:var(--gold-0); margin-bottom:8px; }
.gl-sec-intro{ font-size:13px; color:var(--text-2); line-height:1.95; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--hair); }
.gl-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.gl-group{ background:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:18px 20px; }
.gl-group-name{ font-family:'Amiri',serif; font-weight:700; font-size:16px; color:var(--text-0); margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid var(--hair); }
.gl-list{ list-style:none; display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.gl-list li{ font-size:12.5px; color:var(--text-1); line-height:1.75; padding-right:16px; position:relative; }
.gl-list li::before{ content:'◦'; position:absolute; right:0; color:var(--gold-2); }
.gl-rule{ font-size:11.5px; color:var(--gold-2); line-height:1.9; padding-top:11px; border-top:1px solid var(--hair); }
.gl-daleel-box{ margin-top:18px; background:var(--ink-1); border:1px solid var(--hair-strong); border-radius:var(--r-lg); padding:24px 28px; }
.gl-db-title{ font-family:'Amiri',serif; font-weight:700; font-size:17px; color:var(--gold-0); margin-bottom:14px; }
.gl-db-list{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.gl-db-list li{ font-family:'Amiri',serif; font-size:15px; color:var(--text-1); line-height:2; padding-right:18px; position:relative; }
.gl-db-list li::before{ content:'﴿'; position:absolute; right:0; color:var(--gold-2); font-size:13px; }

/* ─────────── Bonds on profile ─────────── */
.bond-row{ display:flex; align-items:center; gap:6px; }
.bond-row .person-row{ flex:1; }
.bond-del{ background:none; color:var(--text-3); font-size:16px; width:24px; height:24px; border-radius:4px; flex-shrink:0; }
.bond-del:hover{ color:#C98A80; background:var(--ink-3); }
.bond-note{ font-family:'Amiri',serif; font-size:12.5px; color:var(--gold-2); line-height:1.9; margin-top:10px; padding-top:10px; border-top:1px solid var(--hair); }

@media (max-width:1180px){
  .stat-row{ grid-template-columns:repeat(3,1fr); }
  .dash-cols{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .hero-band{ flex-direction:column; align-items:flex-start; }
  .hb-orn{ display:none; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .page-pad{ padding:20px 18px 40px; }
  .verdict-head{ grid-template-columns:1fr; }
}

/* ─────────── حاسبة المواريث ─────────── */
.mirath-page{ padding: 28px 32px 60px; max-width: 1320px; margin: 0 auto; }
.mi-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.mirath-page .page-h2{ font-family:'Amiri', serif; font-weight:700; font-size:26px; color:var(--text-0); }
.mirath-page .page-sub{ font-size:13px; color:var(--text-2); margin-top:6px; line-height:1.8; }
.mi-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap:20px; align-items:start; }
@media (max-width: 1080px){ .mi-grid{ grid-template-columns: minmax(0,1fr); } }
.mi-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.mi-dead{ display:flex; align-items:center; gap:12px; }
.mi-dead .si-mono{ width:38px; height:38px; border-radius:50%; background:rgba(201,169,97,.14); border:1px solid var(--hair-strong); display:flex; align-items:center; justify-content:center; font-family:'Amiri',serif; font-weight:700; color:var(--gold-0); }
.mi-dead-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.mi-dead-txt b{ font-family:'Amiri',serif; font-size:16px; color:var(--text-0); }
.mi-dead-txt span{ font-size:11px; color:var(--text-3); }
.mi-ladder{ margin-top:14px; border:1px solid var(--hair); border-radius:var(--r-md); overflow:hidden; }
.mi-ladder > div{ display:flex; justify-content:space-between; gap:12px; padding:9px 14px; font-size:12.5px; color:var(--text-2); border-bottom:1px solid var(--hair); }
.mi-ladder > div:last-child{ border-bottom:none; }
.mi-ladder b{ font-variant-numeric:tabular-nums; color:var(--text-1); }
.mi-ladder-net{ background:rgba(201,169,97,.07); }
.mi-ladder-net span, .mi-ladder-net b{ color:var(--gold-0) !important; font-weight:700; }
.mi-warn{ background:rgba(201,169,97,.08); border:1px solid rgba(201,169,97,.28); color:var(--gold-0); font-size:12px; line-height:1.7; padding:10px 12px; border-radius:var(--r-md); }
.mi-group{ margin-top:16px; }
.mi-group:first-of-type{ margin-top:10px; }
.mi-group-t{ font-size:10px; letter-spacing:.3em; color:var(--text-3); margin-bottom:8px; }
.mi-fields{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:6px 14px; }
.mi-field{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--hair); }
.mi-field-l{ font-size:13px; color:var(--text-1); }
.mi-step{ display:flex; align-items:center; gap:2px; background:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:2px; }
.mi-step.on{ border-color:var(--gold-2); background:rgba(201,169,97,.08); }
.mi-step button{ width:24px; height:24px; border-radius:6px; background:transparent; color:var(--text-2); font-size:14px; line-height:1; }
.mi-step button:hover:not(:disabled){ color:var(--gold-0); background:var(--ink-3); }
.mi-step button:disabled{ opacity:.3; cursor:not-allowed; }
.mi-step-val{ min-width:22px; text-align:center; font-size:13px; font-weight:700; color:var(--text-1); font-family:'Amiri',serif; }
.mi-step.on .mi-step-val{ color:var(--gold-0); }
.mi-flag{ font-size:12px; padding:9px 12px; border-radius:var(--r-md); margin:10px 0 4px; border:1px solid; }
.mi-flag.awl{ color:var(--gold-0); border-color:rgba(201,169,97,.3); background:rgba(201,169,97,.08); }
.mi-flag.radd{ color:var(--sage-0); border-color:rgba(138,163,114,.3); background:rgba(138,163,114,.08); }
.mi-table{ width:100%; border-collapse:collapse; margin-top:12px; }
.mi-table th{ text-align:right; font-size:10px; letter-spacing:.2em; color:var(--text-3); font-weight:400; padding:0 8px 8px; border-bottom:1px solid var(--hair-strong); }
.mi-table td{ padding:12px 8px; border-bottom:1px solid var(--hair); vertical-align:top; font-size:13px; color:var(--text-1); }
.mi-table tfoot td{ border-bottom:none; border-top:1px solid var(--hair-strong); font-weight:700; color:var(--gold-0); font-size:13px; }
.mi-h{ font-family:'Amiri',serif; font-weight:700; font-size:16px; color:var(--text-0); display:flex; align-items:baseline; gap:8px; }
.mi-cnt{ font-size:11px; color:var(--text-3); font-family:'Cairo',sans-serif; }
.mi-why{ font-size:11.5px; color:var(--text-2); margin-top:3px; line-height:1.7; }
.mi-split{ font-size:11px; color:var(--gold-2); margin-top:4px; }
.mi-frac{ white-space:nowrap; }
.mi-frac b{ display:block; font-family:'Amiri',serif; font-size:17px; color:var(--gold-0); margin-top:5px; }
.mi-badge{ display:inline-block; font-size:9.5px; letter-spacing:.08em; padding:2px 7px; border-radius:9px; border:1px solid; }
.mi-badge.fard{ color:var(--gold-0); border-color:rgba(201,169,97,.28); background:rgba(201,169,97,.1); }
.mi-badge.asaba{ color:var(--sage-0); border-color:rgba(138,163,114,.3); background:rgba(138,163,114,.1); }
.mi-badge.both{ color:var(--text-1); border-color:var(--hair-strong); background:var(--ink-2); }
.mi-pct, .mi-amt{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.mi-amt{ font-weight:700; color:var(--text-0); }
.mi-daleel{ margin-top:18px; border-top:1px solid var(--hair); padding-top:14px; display:flex; flex-direction:column; gap:10px; }
.mi-ayah{ font-family:'Amiri',serif; font-size:14.5px; line-height:2; color:var(--gold-2); }
.mi-note{ border-bottom:1px solid var(--hair); padding:10px 0; cursor:pointer; }
.mi-note:last-child{ border-bottom:none; }
.mi-note-t{ display:flex; align-items:center; justify-content:space-between; }
.mi-note-caret{ color:var(--text-3); transition:transform .18s; }
.mi-note.open .mi-note-caret{ transform:rotate(180deg); }
.mi-note-b{ font-size:12.5px; line-height:1.9; color:var(--text-2); max-height:0; overflow:hidden; transition:max-height .25s, margin .2s; }
.mi-note.open .mi-note-b{ max-height:340px; margin-top:8px; }
.mi-disclaimer{ font-size:11.5px; line-height:1.9; color:var(--text-3); border:1px dashed var(--hair-strong); border-radius:var(--r-md); padding:14px 16px; }

/* ─────────── المزامنة ─────────── */
.sync-status{ display:flex; align-items:center; gap:12px; background:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:12px 14px; }
.sync-status-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sync-status-txt b{ font-size:13px; color:var(--text-0); }
.sync-status-txt span{ font-size:11.5px; color:var(--text-2); }
.sync-dot{ width:9px; height:9px; border-radius:50%; background:var(--text-3); flex-shrink:0; }
.sync-dot.ok, .sync-dot.idle{ background:var(--sage-0); box-shadow:0 0 0 3px rgba(138,163,114,.15); }
.sync-dot.pending, .sync-dot.syncing{ background:var(--gold-0); box-shadow:0 0 0 3px rgba(201,169,97,.15); animation:syncPulse 1.2s infinite; }
.sync-dot.error{ background:#C4664F; box-shadow:0 0 0 3px rgba(196,102,79,.16); }
@keyframes syncPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.sync-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.settings-field select{ width:100%; background:var(--ink-2); border:1px solid var(--hair); border-radius:var(--r-md); padding:9px 12px; color:var(--text-0); font-size:13px; }
.settings-field select:focus{ outline:none; border-color:var(--gold-2); }
.settings-row input[type=range]{ accent-color:var(--gold-0); max-width:200px; }

.mi-num{ direction:ltr; text-align:left; font-variant-numeric:tabular-nums; letter-spacing:.03em; }
.mi-hint{ display:block; font-size:11px; color:var(--text-3); margin-top:6px; line-height:1.7; }
.mi-cur-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 14px; }
.mi-cur-row > span{ font-size:11px; letter-spacing:.2em; color:var(--text-3); }
.mi-cur-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.mi-cur{ background:var(--ink-2); border:1px solid var(--hair); color:var(--text-2); font-size:12px; padding:4px 10px; border-radius:var(--r-md); }
.mi-cur:hover{ border-color:var(--gold-2); color:var(--gold-0); }
.mi-cur.on{ background:rgba(201,169,97,.12); border-color:var(--gold-2); color:var(--gold-0); font-weight:700; }
.mi-disclaimer b{ color:var(--gold-0); }

/* ── Auth ── */
.auth-wrap{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh;background:var(--ink-0);color:var(--text-0)}
.auth-aside{position:relative;background:linear-gradient(180deg,var(--ink-1),var(--ink-0));border-inline-end:1px solid var(--hair);display:flex;align-items:center;padding:56px 64px}
.auth-aside:after{content:'❋';position:absolute;inset-inline-end:-40px;bottom:-30px;font-size:220px;color:rgba(201,169,97,.045);line-height:1}
.auth-aside-in{max-width:460px;position:relative;z-index:1}
.auth-eyebrow{font:500 11px/1 'Reem Kufi',sans-serif;letter-spacing:.34em;color:var(--gold-2);margin-bottom:26px}
.auth-h1{font:700 clamp(34px,4vw,52px)/1.28 'Aref Ruqaa',serif;color:var(--text-0);margin:0 0 20px}
.auth-h1 em{font-style:normal;color:var(--gold-0)}
.auth-lead{font:400 15.5px/1.95 'Cairo',sans-serif;color:var(--text-2);margin:0 0 26px;text-wrap:pretty}
.auth-points{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:12px}
.auth-points li{font:400 13.5px/1.8 'Cairo',sans-serif;color:var(--text-1);padding-inline-start:20px;position:relative}
.auth-points li:before{content:'◈';position:absolute;inset-inline-start:0;color:var(--gold-2);font-size:11px}
.auth-quote{font:400 17px/2 'Amiri Quran',serif;color:var(--gold-2);padding-top:24px;border-top:1px solid var(--hair)}
.auth-main{display:flex;align-items:center;justify-content:center;padding:48px 40px;overflow:auto}
.auth-card{width:100%;max-width:460px}
.auth-tabs{display:flex;gap:0;border:1px solid var(--hair-strong);border-radius:var(--r-md);overflow:hidden;margin-bottom:22px}
.auth-tabs button{flex:1;padding:13px;background:transparent;border:0;color:var(--text-2);font:600 14px 'Cairo',sans-serif;cursor:pointer;transition:.18s}
.auth-tabs button.on{background:rgba(201,169,97,.1);color:var(--gold-0)}
.auth-boot{font:400 12.5px/1.8 'Cairo',sans-serif;color:var(--text-1);background:rgba(201,169,97,.07);border:1px solid var(--hair);border-radius:var(--r-md);padding:12px 14px;margin-bottom:16px}
.auth-err{font:500 13px/1.7 'Cairo',sans-serif;color:#E0A090;background:rgba(180,70,50,.12);border:1px solid rgba(180,70,50,.3);border-radius:var(--r-md);padding:11px 14px;margin-bottom:16px}
.auth-form{display:flex;flex-direction:column;gap:15px}
.auth-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-label{font:600 12px 'Cairo',sans-serif;color:var(--text-2);letter-spacing:.04em;margin-top:4px}
.auth-paths{display:flex;flex-direction:column;gap:9px}
.auth-path{display:flex;flex-direction:column;gap:3px;text-align:start;padding:12px 14px;background:transparent;border:1px solid var(--hair);border-radius:var(--r-md);cursor:pointer;transition:.18s}
.auth-path:hover{border-color:var(--hair-strong)}
.auth-path.on{border-color:var(--gold-2);background:rgba(201,169,97,.08)}
.ap-t{font:600 13.5px 'Cairo',sans-serif;color:var(--text-0)}
.ap-s{font:400 11.5px/1.6 'Cairo',sans-serif;color:var(--text-2)}
.auth-submit{width:100%;margin-top:6px}
.auth-alt,.auth-fine{font:400 12.5px/1.8 'Cairo',sans-serif;color:var(--text-2);text-align:center}
.auth-back{background:transparent;border:0;color:var(--text-3);font:400 12px 'Cairo',sans-serif;cursor:pointer;margin-top:18px;width:100%}
.auth-back:hover{color:var(--gold-2)}
@media(max-width:900px){.auth-wrap{grid-template-columns:1fr}.auth-aside{display:none}}

/* ── Admin ── */
.adm-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 16px}
.adm-check{font:400 12.5px 'Cairo',sans-serif;color:var(--text-2);display:flex;align-items:center;gap:6px;cursor:pointer}
.adm-count{font:500 12px 'Cairo',sans-serif;color:var(--text-3);margin-inline-start:auto}
.adm-table-wrap{border:1px solid var(--hair);border-radius:var(--r-md);overflow:auto;background:var(--ink-1)}
.adm-table{width:100%;border-collapse:collapse;font:400 13px 'Cairo',sans-serif}
.adm-table th{text-align:start;padding:11px 14px;font:600 11.5px 'Cairo',sans-serif;letter-spacing:.05em;color:var(--text-3);background:var(--ink-2);border-bottom:1px solid var(--hair);white-space:nowrap}
.adm-table td{padding:11px 14px;border-bottom:1px solid var(--rim-soft);color:var(--text-1);vertical-align:middle}
.adm-table tr:last-child td{border-bottom:0}
.adm-table tr.is-off{opacity:.42}
.adm-table .muted{color:var(--text-3);font-size:12px}
.adm-u{display:flex;flex-direction:column;gap:2px}
.adm-u span{font-size:11.5px;color:var(--text-3)}
.adm-sel{background:var(--ink-2);border:1px solid var(--hair);color:var(--text-1);border-radius:var(--r-sm);padding:6px 9px;font:400 12.5px 'Cairo',sans-serif;cursor:pointer}
.adm-badge{display:inline-block;padding:3px 9px;border-radius:999px;font:600 11px 'Cairo',sans-serif;border:1px solid var(--hair-strong);color:var(--text-2)}
.adm-badge.s-active{color:var(--sage-0);border-color:rgba(138,163,114,.4)}
.adm-badge.s-suspended{color:var(--gold-0);border-color:var(--hair-strong)}
.adm-badge.s-disabled,.adm-badge.s-deleted{color:#C98A7A;border-color:rgba(201,138,122,.35)}
.adm-acts{display:flex;gap:6px;flex-wrap:wrap}
.adm-acts button{background:transparent;border:1px solid var(--hair);color:var(--text-2);border-radius:var(--r-sm);padding:5px 10px;font:500 11.5px 'Cairo',sans-serif;cursor:pointer;transition:.16s;white-space:nowrap}
.adm-acts button:hover{border-color:var(--gold-2);color:var(--gold-0)}
.adm-acts button.dgr:hover{border-color:rgba(201,138,122,.5);color:#D99A88}
.btn-danger{background:rgba(180,70,50,.16);border:1px solid rgba(201,138,122,.45);color:#E5A897;border-radius:var(--r-sm);padding:9px 18px;font:600 13px 'Cairo',sans-serif;cursor:pointer}
.btn-danger:hover{background:rgba(180,70,50,.26)}
.adm-note{font:400 12.5px/1.9 'Cairo',sans-serif;color:var(--text-3);margin:14px 0 0;text-wrap:pretty}
.adm-req{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border-bottom:1px solid var(--rim-soft);font:400 13px/1.7 'Cairo',sans-serif;color:var(--text-1);flex-wrap:wrap}
.adm-req:last-child{border-bottom:0}
.adm-req .muted{color:var(--text-3);font-size:11.5px}
.adm-code{font:700 15px/1 'Reem Kufi',monospace;letter-spacing:.2em;color:var(--gold-0);border:1px dashed var(--hair-strong);border-radius:var(--r-sm);padding:7px 12px}
.adm-code.sm{font-size:12.5px;padding:4px 8px;letter-spacing:.14em}
.adm-act{font:600 11px 'Reem Kufi',monospace;color:var(--gold-2);letter-spacing:.04em;margin-inline-end:6px}

/* ── Import wizard ── */
.imp-steps{display:flex;gap:8px;margin:18px 0 20px;flex-wrap:wrap}
.imp-step{display:flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid var(--hair);border-radius:999px;font:500 12.5px 'Cairo',sans-serif;color:var(--text-3)}
.imp-step.on{border-color:var(--gold-2);color:var(--gold-0);background:rgba(201,169,97,.08)}
.imp-step.done{color:var(--sage-0);border-color:rgba(138,163,114,.35)}
.is-n{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(201,169,97,.14);font:600 11px 'Cairo',sans-serif}
.imp-drop{border:1.5px dashed var(--hair-strong);border-radius:var(--r-lg);padding:64px 24px;text-align:center;cursor:pointer;transition:.2s;background:var(--ink-1)}
.imp-drop:hover{border-color:var(--gold-2);background:rgba(201,169,97,.04)}
.imp-drop-icon{font-size:40px;color:var(--gold-2);margin-bottom:14px}
.imp-drop-t{font:600 16px 'Cairo',sans-serif;color:var(--text-0);margin-bottom:6px}
.imp-drop-s{font:400 12.5px 'Cairo',sans-serif;color:var(--text-3)}
.imp-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;padding:4px 0 8px}
.imp-map-row{display:flex;flex-direction:column;gap:6px}
.imp-map-row label{font:500 12px 'Cairo',sans-serif;color:var(--text-2)}
.imp-map-row .req{color:#C98A7A}
.imp-map-row select{width:100%}
.stat-tile.danger .stat-n{color:#D99A88}
.shield-tag{display:inline-flex;align-items:center;gap:5px;font:500 11px 'Cairo',sans-serif;color:var(--text-3);border:1px dashed var(--hair-strong);border-radius:999px;padding:3px 9px}

/* ── المجالس ── */
.mj-page{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 64px);overflow:hidden}
.mj-rail{border-inline-end:1px solid var(--hair);overflow-y:auto;padding:16px 12px;background:var(--ink-1);display:flex;flex-direction:column;gap:4px}
.mj-rail-head{padding:0 6px 12px}
.mj-rail-title{font:700 17px 'Cairo',sans-serif;color:var(--text-0)}
.mj-rail-sub{font:400 11.5px 'Cairo',sans-serif;color:var(--text-3);margin-top:3px}
.mj-group{margin-top:10px}
.mj-group-t{font:600 10.5px 'Cairo',sans-serif;letter-spacing:.14em;color:var(--text-3);padding:0 6px 6px}
.mj-item{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:start;background:transparent;border:1px solid transparent;border-radius:var(--r-md);padding:9px 10px;cursor:pointer;transition:.15s;position:relative}
.mj-item:hover{background:rgba(201,169,97,.05)}
.mj-item.on{background:rgba(201,169,97,.09);border-color:var(--hair-strong)}
.mj-dot{font-size:13px;line-height:1.5;flex-shrink:0}
.mj-it{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.mj-it-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mj-name{font:600 13px 'Cairo',sans-serif;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-when{font:400 10px 'Cairo',sans-serif;color:var(--text-3);flex-shrink:0}
.mj-prev{font:400 11.5px/1.5 'Cairo',sans-serif;color:var(--text-3);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.mj-badge{position:absolute;inset-inline-start:10px;bottom:8px;min-width:17px;height:17px;display:grid;place-items:center;border-radius:999px;background:var(--gold-2);color:#12100D;font:700 10px 'Cairo',sans-serif;padding:0 5px}
.mj-lock{font:500 9.5px 'Cairo',sans-serif;color:var(--text-3);border:1px solid var(--hair);border-radius:999px;padding:1px 6px;align-self:center}
.mj-new{background:transparent;border:1px dashed var(--hair-strong);color:var(--text-2);border-radius:var(--r-md);padding:9px;font:500 12px 'Cairo',sans-serif;cursor:pointer;margin-top:14px}
.mj-new:hover{border-color:var(--gold-2);color:var(--gold-0)}
.mj-link{border:1px solid var(--hair-strong);background:rgba(201,169,97,.06);border-radius:var(--r-md);padding:12px;margin:6px 0 10px;display:flex;flex-direction:column;gap:7px}
.mj-link-t{font:600 12.5px 'Cairo',sans-serif;color:var(--gold-0)}
.mj-link-s{font:400 11px/1.6 'Cairo',sans-serif;color:var(--text-3)}
.mj-link-in{background:var(--ink-2);border:1px solid var(--hair);color:var(--text-0);border-radius:var(--r-sm);padding:8px 10px;font:400 12.5px 'Cairo',sans-serif}
.mj-link-opt{background:transparent;border:1px solid var(--hair);color:var(--text-1);border-radius:var(--r-sm);padding:7px 10px;font:500 12px 'Cairo',sans-serif;cursor:pointer;text-align:start}
.mj-link-opt:hover{border-color:var(--gold-2);color:var(--gold-0)}
.mj-link-row{display:flex;gap:8px;justify-content:flex-end}
.mj-rules{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair)}
.mj-rules-t{background:transparent;border:0;color:var(--text-3);font:500 11.5px 'Cairo',sans-serif;cursor:pointer;padding:4px 6px}
.mj-rules-t:hover{color:var(--gold-2)}
.mj-rules-l{margin:6px 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:6px}
.mj-rules-l li{font:400 10.8px/1.6 'Cairo',sans-serif;color:var(--text-3)}
.mj-room{display:flex;flex-direction:column;min-width:0;height:100%}
.mj-room-head{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--hair);background:var(--ink-1)}
.mj-room-icon{font-size:20px}
.mj-room-id{flex:1;min-width:0}
.mj-room-t{font:700 15.5px 'Cairo',sans-serif;color:var(--text-0)}
.mj-room-s{font:400 11.5px 'Cairo',sans-serif;color:var(--text-3);margin-top:2px}
.mj-pinned{display:flex;align-items:center;gap:9px;padding:9px 22px;background:rgba(201,169,97,.07);border-bottom:1px solid var(--hair)}
.mj-pin-tag{font:600 10px 'Cairo',sans-serif;color:var(--gold-0);border:1px solid var(--hair-strong);border-radius:999px;padding:2px 8px;flex-shrink:0}
.mj-pin-txt{font:400 12.5px 'Cairo',sans-serif;color:var(--text-1);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-pin-x{background:transparent;border:0;color:var(--text-3);cursor:pointer;font-size:16px}
.mj-stream{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:3px}
.mj-day{display:flex;align-items:center;gap:12px;margin:16px 0 10px;color:var(--text-3);font:500 10.5px 'Cairo',sans-serif}
.mj-day:before,.mj-day:after{content:'';height:1px;background:var(--hair);flex:1}
.mj-msg{display:flex;flex-direction:column;align-items:flex-start;max-width:min(620px,78%);margin-bottom:7px}
.mj-msg.mine{align-self:flex-end;align-items:flex-end}
.mj-msg.cont{margin-top:-4px}
.mj-msg-who{display:flex;align-items:baseline;gap:7px;margin-bottom:4px;padding:0 3px}
.mj-who-name{font:600 12px 'Cairo',sans-serif;color:var(--gold-0);cursor:pointer}
.mj-who-name:hover{text-decoration:underline}
.mj-who-fam{font:400 10px 'Cairo',sans-serif;color:var(--text-3)}
.mj-bubble{position:relative;background:var(--ink-2);border:1px solid var(--hair);border-radius:14px;padding:10px 14px 6px;display:flex;flex-direction:column;gap:3px}
.mj-msg.mine .mj-bubble{background:rgba(201,169,97,.1);border-color:var(--hair-strong)}
.mj-text{font:400 13.5px/1.85 'Cairo',sans-serif;color:var(--text-0);white-space:pre-wrap;overflow-wrap:anywhere}
.mj-meta{display:flex;gap:7px;align-items:center;align-self:flex-end;font:400 9.5px 'Cairo',sans-serif;color:var(--text-3)}
.mj-edited{font-style:italic}
.mj-acts{position:absolute;top:-11px;inset-inline-end:8px;display:none;gap:4px;background:var(--ink-1);border:1px solid var(--hair-strong);border-radius:999px;padding:2px 4px}
.mj-bubble:hover .mj-acts{display:flex}
.mj-acts button{background:transparent;border:0;color:var(--text-2);font:500 10px 'Cairo',sans-serif;cursor:pointer;padding:2px 6px;border-radius:999px}
.mj-acts button:hover{color:var(--gold-0);background:rgba(201,169,97,.1)}
.mj-edit{display:flex;gap:6px;align-items:center}
.mj-edit input{background:var(--ink-2);border:1px solid var(--gold-2);color:var(--text-0);border-radius:var(--r-sm);padding:8px 11px;font:400 13px 'Cairo',sans-serif;min-width:240px}
.mj-compose{display:flex;gap:10px;padding:14px 22px;border-top:1px solid var(--hair);background:var(--ink-1)}
.mj-compose input{flex:1;background:var(--ink-2);border:1px solid var(--hair);color:var(--text-0);border-radius:var(--r-md);padding:12px 15px;font:400 13.5px 'Cairo',sans-serif}
.mj-compose input:focus{outline:none;border-color:var(--gold-2)}
.mj-blocked{padding:16px 22px;border-top:1px solid var(--hair);background:var(--ink-1);font:400 12.5px/1.7 'Cairo',sans-serif;color:var(--text-3);text-align:center}
.mj-first{margin:auto;text-align:center}
.mj-first-t{font:600 15px 'Cairo',sans-serif;color:var(--text-2)}
.mj-first-s{font:400 12px 'Cairo',sans-serif;color:var(--text-3);margin-top:6px}
.mj-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:40px}
@media(max-width:900px){.mj-page{grid-template-columns:1fr}.mj-rail{display:none}}