/* =============================================================
   PLANETS (كواكبك) — pixel-built reference layout
   ============================================================= */
.page-planets { gap: 14px; }
.pl-breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.pl-crumb { background: none; border: none; color: var(--text-muted); font: inherit; cursor: pointer; }
.pl-crumb:hover { color: var(--cyan); }
.pl-crumb-cur { color: #fff; font-weight: 700; }
.pl-actions { margin-inline-start: auto; display: flex; gap: 8px; }
.pl-act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03); color: var(--text-soft); font: inherit; font-size: 12px; transition: all .16s; }
.pl-act:hover { border-color: rgba(152,114,255,0.5); color: #fff; }
.pl-act.fav.on { color: var(--gold, #F8C648); border-color: rgba(248,198,72,0.55); background: rgba(248,198,72,0.08); }
.pl-act.fav:hover { color: var(--gold-2); border-color: rgba(248,198,72,0.5); }

/* header */
.pl-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.plh-title { display: flex; align-items: center; gap: 16px; }
.plh-glyph { font-size: 46px; line-height: 1; filter: drop-shadow(0 0 18px currentColor); animation: plGlyphFloat 5s ease-in-out infinite; }
@keyframes plGlyphFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.plh-name { font-size: 34px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.plh-head { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; }
.plh-badges { display: flex; gap: 10px; }
.plh-badge { position: relative; min-width: 128px; padding: 10px 14px; border-radius: 14px; border: 1px solid; text-align: center; cursor: pointer; font: inherit; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.plh-badge:hover { transform: translateY(-2px); }
.plh-badge.p { border-color: rgba(98,221,255,0.45); background: rgba(98,221,255,0.06); }
.plh-badge.p:hover { border-color: rgba(98,221,255,0.8); box-shadow: 0 0 18px rgba(98,221,255,0.25); }
.plh-badge.d { border-color: rgba(192,132,255,0.45); background: rgba(192,132,255,0.06); }
.plh-badge.d:hover { border-color: rgba(192,132,255,0.8); box-shadow: 0 0 18px rgba(192,132,255,0.25); }
.plhb-go { position: absolute; top: 8px; inset-inline-start: 9px; opacity: 0; color: var(--text-muted); transition: opacity .16s; }
.plh-badge:hover .plhb-go { opacity: 1; }
.plhb-k { display: block; font-size: 12px; font-weight: 700; }
.plh-badge.p .plhb-k { color: var(--cyan); } .plh-badge.d .plhb-k { color: var(--violet); }
.plh-badge strong { display: block; font-family: var(--font-mono); font-size: 22px; color: #fff; margin: 2px 0; }
.plh-badge em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); }

/* 2-column body — RTL visual order: meaning/cards(right) · orrery(left) */
.planets-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pl-left, .pl-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pl-left { position: sticky; top: 8px; }
/* entrance animation when switching planets (super-polish) */
.pl-right { animation: plRightIn .42s cubic-bezier(.22,.9,.3,1) both; }
.pl-right > * { animation: plRiseIn .5s cubic-bezier(.22,.9,.3,1) both; }
.pl-right > *:nth-child(2) { animation-delay: .06s; }
.pl-right > *:nth-child(3) { animation-delay: .12s; }
@keyframes plRightIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes plRiseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.pl-orrery-card { transition: box-shadow .4s ease; }
.pl-orrery-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 50px rgba(255,150,60,0.12); }
.pl-card, .pl-orrery-card, .pl-strip-card, .pl-quote-card, .pl-conn-card, .pl-meaning-card, .pl-reflect-card, .pl-rail-card {
  border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.pl-orrery-card { padding: 8px; display: grid; place-items: center; background:
  radial-gradient(circle at 50% 42%, rgba(255,140,40,0.10), transparent 60%), var(--surface-2); }
.orrery-stage { width: 100%; display: grid; place-items: center; }
.orrery-stage canvas { display: block; max-width: 100%; height: auto; }

.pl-strip-card { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px; gap: 8px; }
.pl-strip-item { text-align: center; display: flex; flex-direction: column; gap: 5px; }
.pl-strip-item:not(:last-child) { border-inline-end: 1px solid rgba(255,255,255,0.06); }
.pls-k { font-size: 11px; color: var(--text-dim); font-weight: 700; }
.pls-v { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; font-weight: 600; color: #fff; }

.pl-quote-card { position: relative; padding: 18px 20px; text-align: center; overflow: hidden; }
.plq-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.plq-text { margin: 10px 0 0; font-family: var(--font-display, Cairo); font-size: 17px; font-weight: 600; color: #fff; line-height: 1.7; }
.plq-mark { position: absolute; top: 4px; inset-inline-start: 14px; font-size: 48px; color: rgba(152,114,255,0.25); font-family: Georgia, serif; }

/* middle: connections */
.pl-conn-card { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.plc-h { font-size: 14px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.plc-h::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: linear-gradient(var(--cyan), var(--violet)); }
.plc-section { display: flex; flex-direction: column; gap: 8px; }
.plc-section:not(:last-child) { padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.plc-sub { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.plc-gates { display: flex; flex-direction: column; gap: 6px; }
.plc-gate { display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-soft); background: rgba(255,255,255,0.02); color: var(--text-soft); font: inherit; font-size: 13px; transition: all .16s; }
.plc-gate b { font-family: var(--font-mono); color: var(--cyan); min-width: 22px; }
.plc-gate:hover { border-color: rgba(152,114,255,0.5); transform: translateX(-2px); }
html[dir=ltr] .plc-gate:hover { transform: translateX(2px); }
.plc-mapbtn { margin-top: 2px; padding: 8px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  border: 1px solid rgba(152,114,255,0.4); background: rgba(152,114,255,0.08); color: var(--violet); transition: all .16s; }
.plc-mapbtn:hover { background: rgba(152,114,255,0.16); }
.plc-line { display: flex; align-items: flex-start; gap: 12px; }
.plc-line-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 800; font-size: 16px; color: var(--violet); border: 1px solid rgba(192,132,255,0.4); background: rgba(192,132,255,0.08); }
.plc-line strong { display: block; font-size: 13px; color: #fff; }
.plc-line p { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.7; }
.plc-pos { display: flex; align-items: flex-start; gap: 10px; }
.plc-pos-ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03); }
.plc-pos strong { display: block; font-size: 13px; color: #fff; }
.plc-pos p { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* right: meaning + quad + reflection */
.pl-meaning-card { padding: 18px 20px; position: relative; overflow: hidden; }
.pl-meaning-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent); opacity: .7; }
.pl-meaning-card .plm-star { position: absolute; top: 16px; inset-inline-end: 16px; color: var(--violet); opacity: .55; }
.pl-meaning-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 9px; padding-inline-end: 30px; letter-spacing: -.01em; }
.pl-meaning-card p { margin: 0; font-size: 13.5px; color: var(--text-soft); line-height: 2; }
.pl-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.pl-qcard { padding: 14px 15px; border-radius: var(--radius-xl); border: 1px solid; transition: transform .18s ease, box-shadow .18s ease; }
.pl-qcard:hover { transform: translateY(-2px); }
.pl-qcard.cyan { border-color: rgba(98,221,255,0.3); background: linear-gradient(160deg, rgba(98,221,255,0.08), rgba(98,221,255,0.02)); }
.pl-qcard.cyan:hover { box-shadow: 0 8px 24px rgba(98,221,255,0.12); }
.pl-qcard.violet { border-color: rgba(192,132,255,0.3); background: linear-gradient(160deg, rgba(192,132,255,0.08), rgba(192,132,255,0.02)); }
.pl-qcard.violet:hover { box-shadow: 0 8px 24px rgba(192,132,255,0.12); }
.pl-qcard.green { border-color: rgba(95,214,181,0.3); background: linear-gradient(160deg, rgba(95,214,181,0.08), rgba(95,214,181,0.02)); }
.pl-qcard.green:hover { box-shadow: 0 8px 24px rgba(95,214,181,0.12); }
.pl-qcard.red { border-color: rgba(244,95,95,0.3); background: linear-gradient(160deg, rgba(244,95,95,0.08), rgba(244,95,95,0.02)); }
.pl-qcard.red:hover { box-shadow: 0 8px 24px rgba(244,95,95,0.12); }
.plq-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 7px; flex-wrap: wrap; }
.pl-qcard.cyan .plq-h { color: var(--cyan); } .pl-qcard.violet .plq-h { color: var(--violet); }
.pl-qcard.green .plq-h { color: #5FD6B5; } .pl-qcard.red .plq-h { color: #ff8a8a; }
.plq-h em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-dim); width: 100%; }
.pl-qcard p { margin: 0; font-size: 12px; color: var(--text-soft); line-height: 1.8; }
.pl-reflect-card { padding: 14px 16px; }
.plr-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--cyan); margin-bottom: 10px; }
.pl-reflect-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pl-reflect-card li { position: relative; padding-inline-start: 16px; font-size: 12.5px; color: var(--text-muted); line-height: 1.7; }
.pl-reflect-card li::before { content: "؟"; position: absolute; inset-inline-start: 0; color: var(--cyan); font-weight: 800; }

/* rail */
.pl-rail-card { padding: 14px 16px; }
.pl-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pl-rail-head h3 { font-size: 15px; font-weight: 700; margin: 0; }
.pl-rail-head span { font-size: 12px; color: var(--text-dim); }
.pl-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(74px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.pl-rail-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 6px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border-soft); background: rgba(255,255,255,0.02); transition: all .18s; }
.pl-rail-item:hover { border-color: color-mix(in oklch, var(--pr) 50%, transparent); transform: translateY(-2px); }
.pl-rail-item.is-active { border-color: var(--pr); background: color-mix(in oklch, var(--pr) 12%, transparent); box-shadow: 0 0 18px color-mix(in oklch, var(--pr) 30%, transparent); }
.pri-glyph { font-size: 22px; line-height: 1; filter: drop-shadow(0 0 8px currentColor); }
.pri-name { font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.pri-nums { display: flex; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; }
.pri-nums .p { color: var(--cyan); } .pri-nums .d { color: var(--violet); }

@media (max-width: 760px) { .planets-layout { grid-template-columns: 1fr; } .pl-left { position: static; } .pl-quad { grid-template-columns: 1fr; } .plh-badges { width: 100%; } }

/* =============================================================
   BACKGROUND MODES — option A smart text tokens (dawn)
   In dawn mode the sky goes pale, so text sitting directly ON the
   background must darken for contrast. Text INSIDE cards stays light
   (cards remain dark). We only retint on-background elements.
   ============================================================= */
.bg-dawn .page-title {
  color: #1b1f3a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.bg-dawn .page-subtitle { color: #3a3e5c; }
.bg-dawn .centers-details > .cd-h,
.bg-dawn .page > .cd-h,
.bg-dawn .ph-eyebrow,
.bg-dawn .page-header .eyebrow { color: #2c2f4d; }
/* help button on the header sits on bg too */
.bg-dawn .help-btn { border-color: rgba(40,44,77,0.3); color: #2c2f4d; }
.bg-dawn .help-btn .help-icon { background: rgba(40,44,77,0.12); color: #2c2f4d; }
/* the page-host's own scroll fade/edges, if any, stay neutral */

/* OFF mode — solid deep background behind everything */
.bg-off body, html.bg-off body { background: #05060f; }
html.bg-off { background: #05060f; }

/* background-mode picker (settings) */
.set-row-full { display: block !important; padding-top: 4px !important; }
.bgmode { width: 100%; }
.bgmode-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.bgmode-opt {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 6px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03);
  color: var(--text-muted); font: inherit; transition: all .18s ease;
}
.bgmode-opt:hover { border-color: rgba(152,114,255,0.45); color: var(--text-soft); transform: translateY(-2px); }
.bgmode-opt.active {
  border-color: rgba(152,114,255,0.7); color: #fff;
  background: linear-gradient(180deg, rgba(152,114,255,0.22), rgba(110,80,200,0.12));
  box-shadow: 0 0 18px rgba(152,114,255,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.bgmode-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,0.04); }
.bgmode-opt.active .bgmode-ic { background: rgba(98,221,255,0.12); color: var(--cyan); }
.bgmode-label { font-size: 12px; font-weight: 700; }
.bgmode-hint { margin: 10px 2px 2px; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 560px) { .bgmode-grid { grid-template-columns: repeat(3, 1fr); } }

/* =============================================================
   CENTERS (مراكزي) — pixel layout: planet cols + bodygraph, art cards
   ============================================================= */
.page-centers .centers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ccc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ccc-ring { display: flex; align-items: center; gap: 10px; }
.ccc-ring-text strong { display: block; color: var(--green); font-size: 12.5px; font-weight: 700; }
.ccc-ring-text em { display: block; color: var(--text-muted); font-size: 10.5px; font-style: normal; margin-top: 2px; }
.ccc-legend { display: flex; flex-direction: row !important; gap: 16px !important; padding: 8px 0 !important; background: none !important; border: none !important; }
.ccc-legend .legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-soft); }
.lg-dot { width: 9px; height: 9px; border-radius: 999px; }
.lg-dot.defined { background: var(--green); box-shadow: 0 0 8px var(--green); }
.lg-dot.undefined { background: rgba(170,180,210,0.4); }

/* 3-column stage: planets | bodygraph | planets */
.ccc-stage { display: grid; grid-template-columns: 46px 1fr 46px; gap: 8px; align-items: stretch; margin-top: 4px; }
.ccc-bodygraph { display: grid; place-items: start center; }
.ccc-bodygraph .bg-wrap { max-width: 270px; }
.planet-col { display: flex; flex-direction: column; gap: 6px; padding-top: 28px; }
.pc-head { font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-align: center; margin-bottom: 4px; white-space: nowrap; }
.pc-list { display: flex; flex-direction: column; gap: 7px; }
.pc-row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.pc-glyph { font-size: 14px; line-height: 1; width: 16px; text-align: center; }
.pc-num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text-soft); }

/* Matching card dimensions in the collapsed grid. */
.page-centers .centers-detail-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch; gap: 14px !important; }
.page-centers .centers-detail-grid:not(:has(.is-expanded)) { grid-auto-rows: 1fr; }
.page-centers .center-card { min-height: 0 !important; grid-column: auto; transition: box-shadow .3s ease, border-color .3s ease; }
.page-centers .center-card.is-active { transform: none; }
.page-centers .center-card.is-expanded { grid-column: 1 / -1; border-color: color-mix(in oklch, var(--cc-tone) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--cc-tone) 30%, transparent), 0 18px 50px rgba(0,0,0,0.5); }
/* full, uncropped artwork (source is 504×420) */
.page-centers .cc-figure { position: relative; aspect-ratio: 504 / 420; height: auto !important; overflow: hidden; }
.page-centers .center-card.is-expanded .cc-figure { aspect-ratio: auto; height: 240px !important; }
.page-centers .cc-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.page-centers .center-card:hover .cc-figure img { transform: scale(1.04); }
.page-centers .cc-figure-glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .8; }
.page-centers .cc-figure::after { content: ""; position: absolute; inset: auto 0 0 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(8,11,24,0.6) 72%, rgba(8,11,24,0.95)); pointer-events: none; }
.page-centers .cc-body { padding: 13px 15px; display: flex; flex-direction: column; flex: 1; }
.page-centers .cc-title { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.page-centers .cc-name { font-size: 14.5px; }
.page-centers .cc-title .cc-tag { margin-inline-start: auto; }
.page-centers .cc-short { color: var(--text-muted); font-size: 12px; line-height: 1.75; margin: 8px 0 0; }

/* smooth expand via grid-template-rows (no max-height jank) */
.cc-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.4,0,.15,1); }
.cc-expand.open { grid-template-rows: 1fr; }
.cc-expand-inner { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-4px); transition: opacity .35s ease .06s, transform .35s ease .06s; }
.cc-expand.open .cc-expand-inner { opacity: 1; transform: translateY(0); }
.cc-block { margin-top: 14px; }
.cc-block:first-child { margin-top: 12px; }
.cc-block-h { display: block; font-size: 12px; font-weight: 800; letter-spacing: .02em; margin-bottom: 6px; }
.cc-block p { color: var(--text-soft); font-size: 12.5px; line-height: 1.9; margin: 0; }
.cc-reflect { position: relative; padding-inline-start: 14px; color: var(--text-muted) !important; }
.cc-reflect::before { content: "؟"; position: absolute; inset-inline-start: 0; color: var(--cyan); font-weight: 800; }
.cc-gate-chips, .cc-chan-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-gate-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--text-soft);
  border: 1px solid color-mix(in oklch, var(--chip) 45%, transparent); background: color-mix(in oklch, var(--chip) 12%, transparent);
  transition: all .16s ease; }
.cc-gate-chip b { color: var(--chip); font-family: var(--font-mono); }
.cc-gate-chip:hover { background: color-mix(in oklch, var(--chip) 22%, transparent); transform: translateY(-1px); }
.cc-chan-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px;
  color: var(--text-muted); border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03); font-family: var(--font-mono); }
.cc-cta { display: inline-flex !important; align-items: center; align-self: flex-start; gap: 7px; margin-top: auto; }
.page-centers .cc-expand { margin-bottom: 14px; }
.cc-cta-chev { display: inline-flex; transition: transform .3s ease; }
.cc-cta.is-open .cc-cta-chev { transform: rotate(180deg); }

.vision-card .vc-figure { width: 88px; height: 88px; display: grid; place-items: center; }
@media (max-width: 1100px) { .page-centers .centers-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 620px) { .page-centers .centers-detail-grid { grid-template-columns: 1fr !important; } }

/* =============================================================
   SIDEBAR — animated nav icons on hover (per-section motion)
   Default: muted/grey. Hover: brand color + animation.
   Active: stays brand color + animation.
   ============================================================= */
.nav-item .ni-icon { transition: transform 200ms ease, color 220ms ease; transform-origin: center; color: var(--text-dim); }
.nav-item .ni-icon svg { overflow: visible; transition: filter 220ms ease; }
/* lit state = hovered OR active */
.nav-item.is-hover .ni-icon,
.nav-item.active .ni-icon { color: var(--cyan); }
.nav-item.is-hover .ni-icon svg,
.nav-item.active .ni-icon svg { filter: drop-shadow(0 0 6px rgba(98,221,255,0.55)); }
/* genes (dna) lights up violet to match its in-page mark */
.nav-item[data-icon="gates"].is-hover .ni-icon,
.nav-item[data-icon="gates"].active .ni-icon { color: var(--violet); }
.nav-item[data-icon="gates"].is-hover .ni-icon svg,
.nav-item[data-icon="gates"].active .ni-icon svg { filter: drop-shadow(0 0 6px rgba(192,132,255,0.6)); }

/* motion plays while hovered OR active */
/* home — gentle hop */
.nav-item[data-icon="home"].is-hover .ni-icon,
.nav-item[data-icon="home"].active .ni-icon { animation: niHop 600ms ease; }
@keyframes niHop { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-3px) scale(1.08); } 60% { transform: translateY(1px); } }

/* overview — quick scan pulse */
.nav-item[data-icon="overview"].is-hover .ni-icon { animation: niPulse 700ms ease infinite; }
@keyframes niPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* guide — book flip */
.nav-item[data-icon="guide"].is-hover .ni-icon { animation: niFlip 900ms ease; }
@keyframes niFlip { 0% { transform: perspective(60px) rotateY(0); } 50% { transform: perspective(60px) rotateY(28deg); } 100% { transform: perspective(60px) rotateY(0); } }

/* centers — node breathe */
.nav-item[data-icon="centers"].is-hover .ni-icon { animation: niBreathe 1.1s ease infinite; }
@keyframes niBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* planets — orbital spin */
.nav-item[data-icon="planets"].is-hover .ni-icon { animation: niSpin 2.4s linear infinite; }
@keyframes niSpin { to { transform: rotate(360deg); } }

/* genes (dna) — helix sway */
.nav-item[data-icon="gates"].is-hover .ni-icon { animation: niSway 900ms ease-in-out infinite; }
@keyframes niSway { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* compare — swap shuffle */
.nav-item[data-icon="compare"].is-hover .ni-icon { animation: niSwap 800ms ease infinite; }
@keyframes niSwap { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-2px) rotate(-6deg); } 75% { transform: translateX(2px) rotate(6deg); } }

/* labs (spade) — float + glow */
.nav-item[data-icon="labs"].is-hover .ni-icon { animation: niFloat 1.4s ease-in-out infinite; }
@keyframes niFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.08); } }

/* =============================================================
   GATES (جيناتك) — pixel refinements + data-driven detail
   ============================================================= */
.gates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: start; }
.gate-detail { order: 1; }
.gates-list-card { order: 2; }
.gates-count-pill { padding: 7px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  color: var(--violet); border: 1px solid rgba(152,114,255,0.4); background: rgba(152,114,255,0.07); }
.gate-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; cursor: pointer; min-height: 96px; justify-content: center; }
.gt-side { position: static !important; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; border: 1px solid; margin-bottom: 2px; }
.gt-num { font-family: var(--font-mono); font-size: 21px; font-weight: 800; color: #fff; }
.gt-planet { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-soft); }
.gt-kw { font-size: 11px; color: var(--text-muted); }
.gd-center { display: inline-flex; align-items: center; gap: 6px; color: var(--violet); border: 1px solid rgba(152,114,255,0.5); background: rgba(152,114,255,0.08); }
.gd-title b { font-family: var(--font-mono); }
.gd-titleblock { flex: 1; }
.gd-meta { flex-wrap: wrap; gap: 8px !important; }
.gd-line-chip, .gd-planet-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03); color: var(--text-soft); }
.gd-figure { flex-shrink: 0; width: 64px; height: 64px; display: grid; place-items: center; }
.gd-tworow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gd-bal-card .gbc-h b, .gd-line .gbc-h b { font-weight: 800; }
.gd-line-cyan { border-color: rgba(98,221,255,0.42) !important; background: rgba(98,221,255,0.05) !important; }
.gd-line-full { padding: 16px 18px !important; }
.gd-line-full .gbc-h { font-size: 14.5px; margin-bottom: 8px; }
.gd-line-full > p { color: var(--text-soft) !important; font-size: 13.5px !important; line-height: 2 !important; }
.gd-reflect { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gd-reflect li { position: relative; padding-inline-start: 16px; color: var(--text-muted); font-size: 12.5px; line-height: 1.75; }
.gd-reflect li::before { content: "؟"; position: absolute; inset-inline-start: 0; color: var(--cyan); font-weight: 800; }
@media (max-width: 900px) { .gates-grid { grid-template-columns: 1fr !important; } .gd-tworow { grid-template-columns: 1fr; } }

/* =============================================================
   BODYGRAPH — interactive wrapper, channel flow, click popup
   ============================================================= */
.bg-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 1250;
  margin-inline: auto;
}
/* Size by height in fixed-height / flex-centered containers so the taller
   chart fills the space instead of collapsing to content width. */
.bodygraph-wrap .bg-wrap { width: auto; height: 560px; max-height: 72vh; max-width: 100%; }
.guide-map-figure { height: 440px; }
.guide-map-figure .bg-wrap { width: auto; height: 100%; max-width: 100%; }
.bg-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bg-flow { animation: bgFlow 1.4s linear infinite; }
@keyframes bgFlow { to { stroke-dashoffset: -92; } }

/* click popup */
.bg-pop {
  position: absolute; z-index: 20;
  width: min(264px, 78vw);
  border-radius: 16px;
  border: 1px solid rgba(98,221,255,0.34);
  background: linear-gradient(180deg, rgba(16,20,40,0.98), rgba(9,12,26,0.98));
  box-shadow: 0 0 0 1px rgba(118,75,255,0.16), 0 18px 50px rgba(0,0,0,0.6), 0 0 28px rgba(98,221,255,0.16);
  backdrop-filter: blur(14px);
  padding: 13px 14px 14px;
  margin: 10px;
  opacity: 1;
  animation: bgPopIn 180ms cubic-bezier(.3,1.2,.5,1);
  transform-origin: top center;
}
.bg-pop.bottom { transform-origin: bottom center; }
@keyframes bgPopIn { from { transform: scale(0.92) translateY(4px); } to { transform: scale(1) translateY(0); } }
.bg-pop-head { display: flex; align-items: flex-start; gap: 10px; }
.bg-pop-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: 800; font-size: 15px;
  color: #06121f; background: linear-gradient(135deg, #8fe6ff, #62DDFF);
  box-shadow: 0 0 14px rgba(98,221,255,0.4);
}
.bg-pop-num.chan { font-size: 11px; background: linear-gradient(135deg, #62DDFF, #C084FF); }
.bg-pop-num.off { color: rgba(220,224,245,0.7); background: rgba(40,48,78,0.9); box-shadow: none; border: 1px solid rgba(150,160,210,0.3); }
.bg-pop-num.center { font-size: 17px; }
.bg-pop-open { font-size: 10px; font-weight: 600; color: var(--text-muted); border: 1px solid rgba(150,160,210,0.3); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.bg-key.side.open { color: var(--text-muted); border-color: rgba(150,160,210,0.3); background: rgba(150,160,210,0.06); }
.bg-pop-gatekeys { gap: 5px; }
.bg-gatechip {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 12px;
  color: rgba(220,224,245,0.6); background: rgba(28,34,58,0.8); border: 1px solid rgba(150,160,210,0.22);
  transition: all 140ms;
}
.bg-gatechip:hover { color: #fff; border-color: rgba(98,221,255,0.6); transform: translateY(-1px); }
.bg-gatechip.on { color: #06121f; background: linear-gradient(135deg, #8fe6ff, #62DDFF); border-color: transparent; box-shadow: 0 0 10px rgba(98,221,255,0.35); }
.bg-pop-titles { flex: 1; min-width: 0; }
.bg-pop-titles strong { display: block; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.bg-pop-titles span { display: block; margin-top: 2px; color: var(--text-muted); font-size: 11.5px; }
.bg-pop-tones { display: flex; gap: 4px; flex-shrink: 0; padding-top: 3px; }
.bg-pop-tones i { width: 9px; height: 9px; border-radius: 999px; display: block; }
.bg-pop-tones .tone-p { background: #62DDFF; box-shadow: 0 0 7px #62DDFF; }
.bg-pop-tones .tone-d { background: #C084FF; box-shadow: 0 0 7px #C084FF; }
.bg-pop-body { margin: 10px 0 0; color: var(--text-soft); font-size: 12.5px; line-height: 1.85; }
.bg-pop-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bg-key { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid; }
.bg-key i { width: 6px; height: 6px; border-radius: 999px; }
.bg-key.shadow { color: #ff9ba6; border-color: rgba(244,95,95,0.34); background: rgba(244,95,95,0.07); }
.bg-key.shadow i { background: #f45f5f; }
.bg-key.gift { color: #8fe6ff; border-color: rgba(98,221,255,0.34); background: rgba(98,221,255,0.07); }
.bg-key.gift i { background: #62DDFF; }
.bg-key.siddhi { color: #e0c4ff; border-color: rgba(192,132,255,0.34); background: rgba(192,132,255,0.07); }
.bg-key.siddhi i { background: #C084FF; }
.bg-key.side { color: var(--gold-2); border-color: rgba(248,198,72,0.34); background: rgba(248,198,72,0.07); }
.bg-pop-side { color: var(--cyan); font-style: normal; font-weight: 600; }
.bg-pop-close {
  position: absolute; top: 8px; inset-inline-end: 8px;
  width: 22px; height: 22px; border-radius: 7px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.06); color: var(--text-muted); font-size: 16px; line-height: 1;
  display: grid; place-items: center; transition: all 150ms;
}
.bg-pop-close:hover { background: rgba(244,95,95,0.18); color: #ff8a8a; }
.bg-pop-cta {
  width: 100%; margin-top: 12px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg, rgba(98,221,255,0.16), rgba(192,132,255,0.16));
  border: 1px solid rgba(98,221,255,0.34); border-radius: 10px;
  color: #d8ecff; font-size: 12.5px; font-weight: 700; padding: 9px 12px;
  transition: all .16s ease;
}
.bg-pop-cta:hover { background: linear-gradient(135deg, rgba(98,221,255,0.28), rgba(192,132,255,0.28)); border-color: rgba(98,221,255,0.6); color: #fff; }
.bg-pop-cta span { font-size: 14px; }

/* list → detail "full page" links */
.gd-fulllink, .cc-fulllink {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: linear-gradient(135deg, rgba(98,221,255,0.12), rgba(192,132,255,0.12));
  border: 1px solid rgba(98,221,255,0.30); border-radius: 999px;
  color: #d8ecff; font-size: 12px; font-weight: 700; padding: 6px 13px; transition: all .16s ease;
}
.gd-fulllink { margin-inline-start: auto; }
.cc-fulllink { margin-top: 12px; }
.gd-fulllink:hover, .cc-fulllink:hover { background: linear-gradient(135deg, rgba(98,221,255,0.24), rgba(192,132,255,0.24)); border-color: rgba(98,221,255,0.55); color: #fff; transform: translateX(-2px); }
.gd-fulllink span, .cc-fulllink span { font-size: 13px; }
/* channel chips become navigable buttons */
.cc-chan-chip { cursor: pointer; transition: all .15s ease; }
.cc-chan-chip:hover { border-color: rgba(98,221,255,0.5); color: #fff; transform: translateY(-1px); }

/* =============================================================
   Spade's Life Explained — System Pages stylesheet
   Auth · Onboarding · Settings · Notifications · Premium
   + shared controls (toggle, segmented, fields, empty/loading)
   Loaded after styles.css; uses the same design tokens.
   ============================================================= */

/* ── Shared form field ─────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.01em; }
.field-wrap {
  position: relative; display: flex; align-items: center;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.field-wrap:focus-within {
  border-color: rgba(152,114,255,0.6);
  background: rgba(138,92,255,0.06);
  box-shadow: 0 0 0 3px rgba(138,92,255,0.14);
}
.field-icon {
  display: grid; place-items: center; width: 42px; flex-shrink: 0;
  color: var(--text-dim);
}
.field-wrap:focus-within .field-icon { color: var(--cyan); }
.field-wrap input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font: inherit; font-size: 15px;
  padding: 12px 14px 12px 0;
}
.field-wrap input::placeholder { color: var(--text-dim); }
.field-wrap input:disabled { opacity: 0.45; }
html[dir="rtl"] .field-wrap input { padding: 12px 0 12px 14px; }
.field-wrap input[type="date"], .field-wrap input[type="time"] { color-scheme: dark; }

.check-inline { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--text-soft); }
.check-inline input { width: 17px; height: 17px; accent-color: var(--violet); cursor: pointer; }

/* ── Toggle ────────────────────────────────────────────────── */
.tg {
  position: relative; width: 42px; height: 24px; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.06); cursor: pointer; padding: 0;
  transition: background 220ms ease, border-color 220ms ease;
}
.tg-knob {
  position: absolute; top: 2px; inset-inline-start: 2px;
  width: 18px; height: 18px; border-radius: 999px;
  background: #cfd2ee; box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: transform 220ms cubic-bezier(.4,1.3,.5,1), background 220ms ease;
}
.tg.on { background: linear-gradient(180deg, rgba(152,114,255,0.9), rgba(110,80,200,0.7)); border-color: rgba(152,114,255,0.8); box-shadow: 0 0 14px rgba(152,114,255,0.4); }
.tg.on .tg-knob { transform: translateX(18px); background: #fff; }
/* RTL: the knob travels the other way (start side is the right) */
html[dir="rtl"] .tg.on .tg-knob { transform: translateX(-18px); }

/* ── Segmented control ─────────────────────────────────────── */
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--radius-md); background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft); }
.seg-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: calc(var(--radius-md) - 4px);
  border: none; background: none; color: var(--text-muted);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 160ms ease;
}
.seg-opt:hover { color: var(--text-soft); }
.seg-opt.active { background: linear-gradient(180deg, rgba(152,114,255,0.42), rgba(110,80,200,0.28)); color: #fff; box-shadow: 0 0 14px rgba(152,114,255,0.3); }
.seg.seg-sm .seg-opt { padding: 6px 9px; }
.seg.seg-wrap { display: flex; flex-wrap: wrap; }
.seg.seg-wrap .seg-opt { flex: 1 1 auto; }

.btn-danger {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  border-radius: 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid rgba(244,95,95,0.5); background: rgba(244,95,95,0.08); color: #FF8A8A;
  transition: all 180ms ease;
}
.btn-danger:hover { background: rgba(244,95,95,0.16); border-color: rgba(244,95,95,0.8); }
.set-mini { padding: 8px 13px !important; font-size: 13px !important; }

/* =============================================================
   AUTH — full-screen split
   ============================================================= */
.flow-root { min-height: 100vh; position: relative; z-index: 1; }
/* full-screen flows (auth/join/onboarding) borrow .app-shell only for its
   rtl/ltr direction helpers — NOT its fixed flex+100vh+hidden shell, which
   would shrink the page to content width and clip tall forms. */
.flow-root.app-shell { display: block; flex-direction: initial; height: auto; min-height: 100vh; overflow: visible; }
.flow-root.app-shell[dir="rtl"] { direction: rtl; }
.auth-page {
  position: relative; z-index: 1; min-height: 100vh;
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: linear-gradient(90deg, rgba(2,4,13,0.45), rgba(2,4,13,0.16) 52%, rgba(2,4,13,0.45));
}
.auth-lang {
  position: absolute; top: 24px; inset-inline-end: 28px; z-index: 5;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03);
  color: var(--text-soft); font: inherit; font-size: 13px; font-weight: 600;
  transition: all 180ms ease;
}
.auth-lang:hover { border-color: rgba(152,114,255,0.5); color: #fff; }

.auth-aside {
  position: relative; padding: clamp(2.4rem, 5vw, 4.5rem); display: flex; flex-direction: column; gap: 2.4rem; justify-content: center;
  overflow: hidden;
}
.auth-brand, .auth-promise, .auth-beta { position: relative; z-index: 1; }
.auth-brand { display: flex; align-items: center; gap: 16px; }
.auth-brand-text strong { display: block; font-family: var(--font-en); font-size: 18px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; }
.auth-brand-text em { display: block; margin-top: 4px; font-style: normal; font-size: 14px; font-weight: 600; color: var(--gold-2); }
.auth-promise h1 { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.18; margin: 0.6rem 0 0.8rem; letter-spacing: -0.02em; }
.auth-promise p { color: var(--text-muted); font-size: 1.04rem; line-height: 2; max-width: 30rem; margin: 0; }
.auth-beta {
  display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--radius-xl);
  border: 1px solid rgba(248,198,72,0.28); background: rgba(248,198,72,0.05);
  max-width: 30rem;
}
.auth-beta-icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(248,198,72,0.4); background: rgba(248,198,72,0.08); }
.auth-beta strong { display: block; color: var(--gold-2); font-size: 14.5px; margin-bottom: 4px; }
.auth-beta p { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.75; }

/* ── extended auth flows: forgot · verify · beta ── */
.auth-beta-btn { width: 100%; align-items: center; cursor: pointer; font-family: inherit; text-align: start; transition: border-color .18s, transform .18s; }
.auth-beta-btn:hover { border-color: rgba(248,198,72,0.5); transform: translateY(-1px); }
.auth-beta-btn > svg { color: var(--gold); flex: none; }
.app-shell.ltr .auth-beta-btn > svg, .auth-page.auth-centered .auth-beta-btn > svg { transform: scaleX(-1); }
.auth-aside-items { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; max-width: 30rem; }
.auth-aside-item { display: flex; gap: 13px; align-items: flex-start; padding: 15px 18px; border-radius: var(--radius-xl, 16px); border: 1px solid rgba(152,114,255,0.18); background: rgba(152,114,255,0.04); }
[dir="rtl"] .auth-aside-item { text-align: right; }
.auth-aside-ic { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--violet); border: 1px solid rgba(152,114,255,0.4); background: rgba(152,114,255,0.1); }
.auth-aside-ic.green { color: var(--green); border-color: rgba(95,214,181,0.4); background: rgba(95,214,181,0.1); }
.auth-aside-ic.gold { color: var(--gold); border-color: rgba(248,198,72,0.4); background: rgba(248,198,72,0.1); }
.auth-aside-item strong { display: block; color: #fff; font-size: 14px; margin-bottom: 3px; }
.auth-aside-item p { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.7; }

.auth-verify-title { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: #fff; text-align: center; }
[dir="rtl"] .auth-verify-title { font-weight: 700; }
.auth-verify-sub { color: var(--text-muted); font-size: 13.5px; line-height: 1.9; text-align: center; margin-top: -4px; }
.auth-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--violet); border: 1px solid rgba(152,114,255,0.4); background: rgba(152,114,255,0.06); transition: all .18s; }
.auth-secondary:hover { background: rgba(152,114,255,0.14); }
.app-shell.ltr .auth-secondary svg, .auth-centered .auth-secondary svg { transform: scaleX(-1); }

/* verify (centered) */
.auth-page.auth-centered { grid-template-columns: 1fr; place-items: center; align-content: center; gap: 22px; padding: 40px 20px; }
.auth-brand-top { justify-content: center; }
.auth-verify { gap: 16px; align-items: stretch; max-width: 540px; }
.auth-verify-ic { width: 74px; height: 74px; margin: 0 auto; border-radius: 18px; display: grid; place-items: center; color: var(--violet); border: 1px solid rgba(152,114,255,0.5); background: rgba(152,114,255,0.1); box-shadow: 0 0 30px rgba(152,114,255,0.3); }
.auth-verify-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.02); }
.auth-vstep { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; }
.auth-vstep-ic { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: var(--violet); border: 1px solid rgba(152,114,255,0.4); background: rgba(152,114,255,0.1); }
.auth-vstep strong { font-size: 12.5px; color: #fff; font-weight: 700; }
.auth-vstep span { font-size: 10.5px; color: var(--text-muted); }
.auth-back-inline { margin: 0 auto; background: transparent; border: none; }
.app-shell.ltr .auth-back-inline svg, .auth-centered .auth-back-inline svg { transform: scaleX(-1); }
.auth-beta-lock { width: 56px; height: 56px; margin: 0 auto; border-radius: 16px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(248,198,72,0.5); background: rgba(248,198,72,0.1); }


.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(2rem, 4vw, 3.5rem); gap: 1.2rem; }
.auth-card {
  width: 100%; max-width: 460px;
  border-radius: var(--radius-3xl);
  border: 1px solid rgba(184,116,255,0.26);
  background: linear-gradient(160deg, rgba(21,21,46,0.86), rgba(7,9,23,0.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 80px rgba(0,0,0,0.5);
  backdrop-filter: blur(22px); padding: 2rem 1.9rem;
}
.auth-form-title { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--text); }
.auth-form-intro { margin: 0 0 1.3rem; color: var(--text-muted); font-size: 0.85rem; line-height: 1.7; }
.flow-root.auth-scroll {
  height: 100dvh; min-height: 0; overflow-y: auto;
  background: linear-gradient(90deg, rgba(2,4,13,0.34), rgba(2,4,13,0.12) 52%, rgba(2,4,13,0.34));
}
.auth-scroll .auth-page { min-height: 100dvh; background: none; }
.auth-gateway { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1160px; margin-inline: auto; }
.auth-gateway .auth-aside { padding: clamp(1rem, 4vw, 3rem); gap: 1.4rem; }
.auth-gateway .auth-main { padding: 24px 16px; }
.auth-gateway .auth-card { padding: clamp(1.15rem, 2.3vw, 1.8rem); }
.auth-gateway .auth-form { gap: 0.75rem; }
.auth-gateway .field-wrap { min-height: 44px; }
.auth-gateway .field-wrap input { min-width: 0; }
.auth-gateway .field-wrap input:autofill,
.auth-gateway .field-wrap input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #151626 inset;
  -webkit-text-fill-color: var(--text-soft);
  caret-color: var(--text-soft);
}
.auth-choice { border: 0; min-inline-size: 0; }
.auth-choice legend { font-weight: 650; margin-bottom: 6px; color: var(--text-soft); }
.auth-step { margin-bottom: 7px; color: var(--gold); }
.auth-switch { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; color: var(--text-muted); }
.auth-switch button { color: var(--gold-2); }
.auth-password-toggle { flex: none; display: grid; place-items: center; min-width: 40px; min-height: 40px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.auth-password-toggle[aria-pressed="true"] { color: var(--gold); }
.auth-feedback { width: 100%; min-height: 42px; padding-inline: 10px; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); font: inherit; }
.auth-gateway :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.beta-journey { padding: 18px 22px; margin-block: 0 18px; }
.beta-journey h2 { margin-block: 6px; }
.beta-journey p { color: var(--text-muted); margin-block: 6px; }
.beta-journey-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; }
.beta-birth-intake .cc-wrap { padding: 0; }
.beta-birth-intake .cc-grid { display: block; }
.beta-birth-intake .cc-form { padding: 0; background: none; border: 0; }
.beta-birth-intake .cc-privacy, .beta-birth-intake .cc-form-head { display: none; }
.beta-confirm-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px; }
@media (max-width: 980px) {
  .auth-page.auth-gateway { grid-template-columns: minmax(0, 1fr); padding-block: 64px 16px; }
  .auth-gateway .auth-aside { padding: 0 16px; }
}
@media (min-width: 981px) and (max-height: 720px) {
  .auth-gateway .auth-main { padding-block: 12px; }
  .auth-gateway .auth-card { padding-block: 16px; }
  .auth-gateway .auth-form { gap: 8px; }
  .auth-gateway .auth-form-intro { margin-bottom: 12px; }
  .auth-gateway .auth-switch { margin-top: 10px; }
}
.auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft); margin-bottom: 1.8rem; }
.auth-tab { position: relative; z-index: 1; padding: 11px; border: none; background: none; color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: calc(var(--radius-lg) - 4px); transition: color 200ms; }
.auth-tab.active { color: #fff; }
.auth-tab-glow { position: absolute; z-index: 0; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 6px); border-radius: calc(var(--radius-lg) - 4px); background: linear-gradient(180deg, rgba(152,114,255,0.42), rgba(110,80,200,0.26)); box-shadow: 0 0 16px rgba(152,114,255,0.32); transition: inset-inline-start 280ms cubic-bezier(.4,1.1,.5,1); }

/* ── Beta application screening fields ── */
.beta-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.beta-seg-b {
  padding: 10px 6px; min-height: 42px; border-radius: var(--radius-md, 0.78rem);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-soft, #D5D7F2); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.beta-seg-b:hover { border-color: rgba(152,114,255,0.45); }
.beta-seg-b.on { color: #fff; background: linear-gradient(180deg, rgba(152,114,255,0.28), rgba(110,80,200,0.14)); border-color: rgba(152,114,255,0.7); box-shadow: 0 0 14px rgba(152,114,255,0.25); }
.beta-textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 78px;
  padding: 12px 14px; border-radius: var(--radius-md, 0.78rem);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-family: inherit; font-size: 13.5px; line-height: 1.7;
}
.beta-textarea:focus { outline: none; border-color: rgba(152,114,255,0.6); box-shadow: 0 0 0 3px rgba(152,114,255,0.14); }
.beta-textarea::placeholder { color: var(--text-dim, #686878); }
.spin-soft { animation: spinSoft 2.4s linear infinite; }
@keyframes spinSoft { to { transform: rotate(360deg); } }
/* glow follows the active tab — keyed off the parent's data-mode so the
   browser reliably recomputes it (class-on-sibling invalidation is flaky) */
.auth-tabs[data-mode="signup"] .auth-tab-glow { inset-inline-start: calc(50% + 2px); }
.auth-form { display: flex; flex-direction: column; gap: 1.05rem; }
.auth-row { display: flex; align-items: center; justify-content: space-between; }
.auth-link { color: var(--cyan); font-size: 13px; font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-submit { width: 100%; padding: 13px !important; font-size: 15px !important; margin-top: 0.2rem; }
.auth-or { position: relative; text-align: center; margin: 0.3rem 0; }
.auth-or::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border-soft); }
.auth-or span { position: relative; background: var(--surface); padding: 0 14px; color: var(--text-dim); font-size: 12.5px; }
.auth-google { width: 100%; padding: 12px !important; }
.auth-foot { margin: 1.4rem 0 0; text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.7; }
.auth-back { background: none; border: none; color: var(--text-muted); font: inherit; font-size: 13.5px; cursor: pointer; transition: color 160ms; }
.auth-back:hover { color: var(--cyan); }

/* =============================================================
   ONBOARDING — full-screen wizard
   ============================================================= */
.onb-page {
  min-height: 100vh; display: grid; place-items: center; padding: clamp(1.4rem, 3vw, 3rem);
  position: relative; z-index: 1;
  background:
    radial-gradient(1000px 720px at 50% -6%, rgba(137,83,255,0.16), transparent 55%),
    radial-gradient(820px 640px at 88% 110%, rgba(98,221,255,0.1), transparent 60%),
    var(--void);
}
.onb-card {
  width: 100%; max-width: 600px;
  border-radius: var(--radius-3xl);
  border: 1px solid rgba(184,116,255,0.26);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 28px 90px rgba(0,0,0,0.55);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.onb-head { display: flex; align-items: center; gap: 16px; }
.onb-title { font-size: 1.7rem; font-weight: 700; margin: 4px 0 0; letter-spacing: -0.01em; }
.onb-sub { color: var(--text-muted); font-size: 0.98rem; line-height: 1.9; margin: 1rem 0 1.6rem; }

.onb-steps { display: flex; align-items: center; gap: 6px; margin-bottom: 1.8rem; }
.onb-step { display: flex; align-items: center; gap: 9px; flex: 1; }
.onb-step:not(:last-child)::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--border-soft); transition: background 300ms; }
.onb-step.done:not(:last-child)::after { background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.onb-step-dot {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--text-dim);
  border: 1px solid var(--border-soft); background: rgba(255,255,255,0.03);
  transition: all 280ms ease;
}
.onb-step.active .onb-step-dot { color: #fff; border-color: rgba(152,114,255,0.8); background: linear-gradient(180deg, rgba(152,114,255,0.5), rgba(110,80,200,0.3)); box-shadow: 0 0 16px rgba(152,114,255,0.4); }
.onb-step.done .onb-step-dot { color: var(--cyan); border-color: rgba(98,221,255,0.6); background: rgba(98,221,255,0.08); }
.onb-step-label { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.onb-step.active .onb-step-label { color: #fff; }

.onb-body { min-height: 220px; }
.onb-fields { display: flex; flex-direction: column; gap: 1.2rem; animation: pgIn 360ms ease both; }
.onb-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.onb-hint { display: flex; align-items: flex-start; gap: 8px; color: var(--text-dim); font-size: 12.5px; line-height: 1.7; margin: 0; }
.onb-hint svg { flex-shrink: 0; margin-top: 2px; color: var(--cyan); }

.onb-confirm { animation: pgIn 360ms ease both; display: flex; flex-direction: column; gap: 1.3rem; }
.onb-summary { border-radius: var(--radius-xl); border: 1px solid var(--border-soft); background: rgba(255,255,255,0.02); overflow: hidden; }
.onb-sum-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.onb-sum-row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.05); }
.onb-sum-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--cyan); border: 1px solid rgba(98,221,255,0.3); background: rgba(98,221,255,0.05); flex-shrink: 0; }
.onb-sum-k { color: var(--text-muted); font-size: 14px; }
.onb-sum-v { margin-inline-start: auto; color: #fff; font-weight: 600; font-size: 14.5px; }
.onb-consent { margin-top: 0.2rem; }
.onb-reassure { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 12.5px; margin: 0; }
.onb-reassure svg { color: var(--green); }

.onb-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--border-soft); }

.onb-generating { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; text-align: center; }
.onb-generating h2 { font-size: 1.6rem; font-weight: 700; margin: 0.6rem 0 0; }
.onb-generating p { color: var(--text-muted); margin: 0; }
.onb-progress { width: 240px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 0.6rem; }
.onb-progress span { display: block; height: 100%; width: 40%; border-radius: 4px; background: linear-gradient(90deg, var(--violet), var(--cyan)); animation: onbBar 2.4s ease-in-out forwards; }
@keyframes onbBar { 0% { width: 8%; } 70% { width: 82%; } 100% { width: 100%; } }

/* =============================================================
   SETTINGS
   ============================================================= */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.settings-grid:has(> .settings-col:only-child) { grid-template-columns: minmax(0, 1fr); }
.settings-col { display: flex; flex-direction: column; gap: 18px; }
.set-group-title { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; padding-inline-start: 4px; }
.set-group-title.danger { color: #FF8A8A; }
.set-card {
  border-radius: var(--radius-2xl); border: 1px solid var(--border);
  background: var(--surface-2); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.set-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.set-row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.05); }
.set-row-text { flex: 1; min-width: 0; }
.set-row-text strong { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.set-row-text span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.set-row-ctrl { flex-shrink: 0; }
.set-row.is-danger strong { color: #FF8A8A; }
.set-input { background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft); border-radius: var(--radius-md); color: #fff; font: inherit; font-size: 14px; padding: 9px 13px; width: 220px; max-width: 42vw; }
.set-input:focus { outline: none; border-color: rgba(152,114,255,0.6); box-shadow: 0 0 0 3px rgba(138,92,255,0.14); }
.set-account { display: flex; align-items: center; gap: 14px; padding: 18px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.set-avatar { width: 50px; height: 50px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; background: linear-gradient(135deg, #8A5CFF, #62DDFF); flex-shrink: 0; }
.set-account-text { flex: 1; }
.set-account-text strong { display: block; font-size: 15px; color: #fff; }
.set-account-text span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted); }
.danger-zone { margin-top: 4px; }

/* =============================================================
   NOTIFICATIONS
   ============================================================= */
.notif-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.notif-filters { display: flex; gap: 8px; }
.notif-tools { display: flex; align-items: center; gap: 10px; }
.dot-badge { width: 6px; height: 6px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.notif-list { display: flex; flex-direction: column; gap: 10px; }
.notif-day { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 8px 0 2px; padding-inline-start: 4px; }
.notif-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  border-radius: var(--radius-xl); border: 1px solid var(--border);
  background: var(--surface-2); transition: border-color 180ms, background 180ms, transform 180ms;
}
.notif-row:hover { border-color: rgba(152,114,255,0.4); transform: translateX(-2px); }
html[dir="ltr"] .notif-row:hover { transform: translateX(2px); }
.notif-row.is-unread { background: rgba(138,92,255,0.05); border-color: rgba(152,114,255,0.3); }
.notif-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid; }
.notif-text { flex: 1; min-width: 0; }
.notif-text strong { display: block; font-size: 14.5px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.notif-text p { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.7; }
.notif-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.notif-time { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.notif-dot { width: 8px; height: 8px; border-radius: 999px; }

/* skeleton / empty */
.notif-row.is-skeleton { align-items: center; }
.sk { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: skShine 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes skShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sk-icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.sk-line { height: 11px; } .sk-line.w60 { width: 60%; } .sk-line.w90 { width: 90%; }
.sk-time { width: 44px; height: 11px; flex-shrink: 0; }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 2rem; gap: 1rem; }
.empty-orb { width: 80px; height: 80px; border-radius: 999px; display: grid; place-items: center; color: var(--violet);
  border: 1px solid rgba(152,114,255,0.3); background: radial-gradient(circle at 50% 40%, rgba(152,114,255,0.16), transparent 70%);
  box-shadow: 0 0 36px rgba(152,114,255,0.2); }
.empty-state h3 { font-size: 1.3rem; font-weight: 700; margin: 0; }
.empty-state p { color: var(--text-muted); max-width: 30rem; line-height: 1.9; margin: 0; }

/* =============================================================
   PREMIUM
   ============================================================= */
.page-premium { align-items: center; }
.premium-hero { text-align: center; max-width: 640px; margin: 0 auto 2.4rem; }
.premium-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700; margin: 0.6rem 0 0.7rem; letter-spacing: -0.02em; }
.premium-sub { color: var(--text-muted); font-size: 1.02rem; line-height: 1.95; margin: 0 0 1.8rem; }
.premium-help { display: flex; justify-content: center; margin: 0 0 1.6rem; }
.premium-help .help-btn { margin-top: 0; }
.billing-toggle { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.billing-toggle span.active { color: #fff; }
.save-pill { padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--green); border: 1px solid rgba(95,214,181,0.4); background: rgba(95,214,181,0.08); }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.tier-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius-2xl); border: 1px solid var(--border);
  background: var(--surface-2); padding: 1.8rem 1.5rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.tier-card:hover { transform: translateY(-3px); border-color: rgba(152,114,255,0.4); }
.tier-card.featured {
  border-color: rgba(248,198,72,0.5);
  background: linear-gradient(180deg, rgba(248,198,72,0.06), var(--surface-2) 60%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 40px rgba(248,198,72,0.12); transform: scale(1.03);
}
.tier-card.featured:hover { transform: scale(1.03) translateY(-3px); }
.tier-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #2a1c00; background: linear-gradient(180deg, #F8C648, #D9A030); box-shadow: 0 4px 16px rgba(248,198,72,0.4); white-space: nowrap; }
.tier-name { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.6rem; }
.tier-price { display: flex; align-items: baseline; gap: 3px; }
.tier-cur { font-size: 1.1rem; color: var(--text-muted); font-weight: 600; }
.tier-amt { font-size: 2.6rem; font-weight: 800; color: #fff; font-family: var(--font-en); letter-spacing: -0.02em; }
.tier-unit { font-size: 0.95rem; color: var(--text-muted); }
.tier-note { color: var(--text-muted); font-size: 13px; margin: 0.4rem 0 1.2rem; }
.tier-cta { width: 100%; margin-bottom: 1.4rem; }
.tier-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.tier-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--text-soft); line-height: 1.6; }
.feat-check { flex-shrink: 0; width: 19px; height: 19px; border-radius: 999px; display: grid; place-items: center; color: var(--green); border: 1px solid rgba(95,214,181,0.4); background: rgba(95,214,181,0.08); margin-top: 1px; }
.premium-guarantee { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-dim); font-size: 13px; margin: 2rem 0 0; }
.premium-guarantee svg { color: var(--green); }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 980px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-page:not(.auth-centered) { align-content: center; padding-block: 68px 24px; }
  .auth-aside { padding: 0 24px; align-items: center; }
  .auth-aside .auth-promise, .auth-aside .auth-beta, .auth-aside-items { display: none; }
  .auth-aside .auth-brand canvas { max-width: 54px; height: auto; }
  .auth-main { padding: 20px 16px; }
  .auth-card { padding: 1.4rem; }
  .settings-grid { grid-template-columns: 1fr; }
  .tier-grid { grid-template-columns: 1fr; max-width: 420px; }
  .tier-card.featured { transform: none; }
  .tier-card.featured:hover { transform: translateY(-3px); }
}
@media (max-width: 560px) {
  .onb-2col { grid-template-columns: 1fr; }
  .notif-toolbar { flex-direction: column; align-items: stretch; }
}