/* ============================================================
   Albassara | البصارة — shared register  (v2 · Headspace direction)
   Bright white · soft "shiny" colors · sky-blue hero + green companion
   Light mode focus. RTL is the design-time default.
   Display: Lemonada (rounded, creative) · Body: Tajawal · Latin: Poppins
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lemonada:wght@300;400;500;600;700&family=Tajawal:wght@300;400;500;700;800&family=Poppins:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---- surfaces ---- */
  --paper:          #FFFFFF;   /* bright white page */
  --paper-elevated: #F1F7FC;   /* soft blue-white cards */
  --paper-warm:     #FBF5EF;   /* soft warm tint (coffee context) */

  /* ---- text ---- */
  --ink:    #222A39;   /* soft dark navy (not black) */
  --stone:  #7C879A;   /* soft slate — secondary text */
  --whisper:#E6EEF5;   /* dividers / tone-on-tone */

  /* ---- brand + flow accents (soft + shiny) ---- */
  --brand:   #2BA7E6;  /* sky-blue — hero / primary */
  --brand-2: #2FBE9A;  /* green — companion / grounding */
  --coffee:  #FF8B57;  /* soft coral — coffee flow */
  --dream:   #2FB892;  /* soft teal-green — dream flow */
  --brass-muted: #E2A852; /* ramadan / warning */
  --danger:  #F0706B;  /* soft coral-red — error/destructive (never bright) */

  /* legacy aliases so existing markup keeps resolving */
  --terracotta: var(--coffee);
  --olive:      var(--dream);
  --dusty-rust: var(--danger);

  /* ---- shiny gradients ---- */
  --g-brand:  linear-gradient(135deg, #54C6F5 0%, #2B8FE0 100%);
  --g-green:  linear-gradient(135deg, #5BD9B4 0%, #23A57E 100%);
  --g-coffee: linear-gradient(135deg, #FFB081 0%, #FF7A4D 100%);
  --g-dream:  linear-gradient(135deg, #5FD6B2 0%, #25A983 100%);

  /* ---- soft tint bands (over white) ---- */
  --coffee-soft: rgba(255,139,87,0.13);
  --dream-soft:  rgba(47,184,146,0.13);
  --brand-soft:  rgba(43,167,230,0.12);
  --stone-soft:  rgba(124,135,154,0.14);

  --font-ar-display: "Lemonada", system-ui, sans-serif;
  --font-ar:         "Tajawal", system-ui, sans-serif;
  --font-la:         "Poppins", system-ui, sans-serif;

  --r-card: 28px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.33, 0.0, 0.12, 1);

  /* soft colored glows */
  --glow-brand:  0 14px 30px -12px rgba(43,167,230,0.55);
  --glow-coffee: 0 14px 30px -12px rgba(255,123,77,0.50);
  --glow-dream:  0 14px 30px -12px rgba(37,169,131,0.50);
  --shadow-card: 0 18px 40px -26px rgba(34,42,57,0.30);
}

/* dark variant (kept for parity; light is the focus) */
.screen.dark {
  --paper:          #14171E;
  --paper-elevated: #1E232D;
  --ink:    #EAF1F8;
  --stone:  #93A0B3;
  --whisper:#2A313D;
  --brand-soft:  rgba(43,167,230,0.16);
  --coffee-soft: rgba(255,139,87,0.16);
  --dream-soft:  rgba(47,184,146,0.16);
  --stone-soft:  rgba(124,135,154,0.18);
}

/* dark — component-specific overrides for values not driven by tokens */
.screen.dark .flow-card { background: var(--paper-elevated); box-shadow: 0 18px 40px -26px #000; }
.screen.dark .flow-card.coffee { background: linear-gradient(160deg, #2B211B 0%, #1E232D 65%); }
.screen.dark .flow-card.dream  { background: linear-gradient(160deg, #182A22 0%, #1E232D 65%); }
.screen.dark .photo-ph { background: linear-gradient(160deg, #2B211B 0%, #221B16 100%); color: #FFB081; }
.screen.dark .photo-ph .lbl { color: #E0996F; }
.screen.dark .photo-ph .steam { background: radial-gradient(60% 40% at 50% 30%, rgba(255,255,255,0.08), transparent 70%); }
.screen.dark .photo-ph.dream { background: linear-gradient(160deg, #15271F 0%, #14201A 100%); color: #5FD6B2; }
.screen.dark .photo-ph.dream .lbl { color: #67C7A2; }
.screen.dark .quota { color: #7CC6EE; }
.screen.dark .wslot { background: var(--paper-elevated); }
.screen.dark .btn-ghost { background: var(--paper-elevated); color: var(--ink); border-color: var(--whisper); }
.screen.dark .modal-card, .screen.dark .sheet { background: var(--paper-elevated); }
.screen.dark .toggle::after { background: #EAF1F8; }
.screen.dark .nav-row, .screen.dark .set-row, .screen.dark .hrow { border-color: var(--whisper); }

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   PHONE FRAME (390 × 844 reference)
   ============================================================ */
.phone { width: 390px; flex: 0 0 390px; }
.phone-bezel {
  width: 390px; height: 844px;
  border-radius: 52px;
  background: #0d1116;
  padding: 5px;
  box-shadow:
    0 1px 0 1px rgba(255,255,255,0.05) inset,
    0 44px 90px -34px rgba(20,40,60,0.5),
    0 8px 22px -8px rgba(20,40,60,0.32);
  position: relative;
}
.screen {
  width: 100%; height: 100%;
  border-radius: 47px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ar);
  direction: rtl;
  position: relative;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
.screen.ltr { direction: ltr; }

.statusbar {
  height: 54px; flex: 0 0 54px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px 0 26px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  font-family: var(--font-la);
}
.statusbar .sysicons { display: flex; align-items: center; gap: 6px; }
.statusbar .sysicons svg { display: block; }
.notch {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 30px; background: #0d1116; border-radius: 16px; z-index: 5;
}

.screen-body {
  flex: 1 1 auto; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0 26px; position: relative;
}
.screen-body.scroll { overflow-y: auto; }
.pad-top { padding-top: 14px; }
.center-stack {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
}

.appbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 18px; flex: 0 0 auto;
}
.appbar .back { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); }
.appbar .title { font-size: 18px; font-weight: 700; }

/* ============================================================
   TYPE
   ============================================================ */
.lockup { display: flex; flex-direction: column; align-items: center; gap: 8px; line-height: 1; }
.lockup .ar {
  font-family: var(--font-ar-display);
  font-size: 44px; font-weight: 600; letter-spacing: 0; color: var(--ink);
}
.lockup .en {
  font-family: var(--font-la);
  font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--brand); font-weight: 600; padding-inline-start: 0.4em;
}
.lockup.row { flex-direction: row; align-items: baseline; gap: 12px; }
.lockup.row .ar { font-size: 24px; }

.display {
  font-family: var(--font-ar-display);
  font-size: 29px; font-weight: 600; line-height: 1.4; color: var(--ink); text-wrap: balance;
}
.display.lg { font-size: 35px; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--brand); }
.body { font-size: 17px; line-height: 1.75; color: var(--ink); text-wrap: pretty; }
.body.soft { color: var(--stone); font-size: 16px; }
.caption { font-size: 13px; line-height: 1.6; color: var(--stone); }

.reader { font-size: 18.5px; line-height: 1.85; color: var(--ink); font-weight: 400; }
.reader p { margin-bottom: 20px; text-wrap: pretty; }
.reader p:last-child { margin-bottom: 0; }
.reveal { opacity: 1; }
.reveal.dim { opacity: 0.16; }

/* ============================================================
   BUTTONS (soft + shiny)
   ============================================================ */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 58px; border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-ar); font-size: 18px; font-weight: 700;
  cursor: pointer; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), filter .3s var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--g-brand);  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), var(--glow-brand); }
.btn-coffee  { background: var(--g-coffee); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), var(--glow-coffee); }
.btn-olive,
.btn-dream   { background: var(--g-dream);  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), var(--glow-dream); }
.btn-green   { background: var(--g-green);  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), var(--glow-dream); }
.btn:hover { filter: saturate(1.05) brightness(1.02); }
.btn-ghost {
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--whisper); box-shadow: none;
}
.btn-ghost:hover { filter: none; border-color: var(--stone); }
.btn-rust { background: var(--danger); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 14px 30px -12px rgba(240,112,107,0.5); }
.btn-text { background: none; border: none; color: var(--stone); font-family: var(--font-ar); font-size: 16px; font-weight: 500; height: 48px; cursor: pointer; box-shadow: none; }
.btn-text:hover { filter: none; }
.btn-sm { height: 50px; font-size: 16px; }

/* ============================================================
   LOAD-BEARING PATTERNS
   ============================================================ */

/* DisclaimerBanner — dream surfaces, permanent, no dismiss */
.disclaimer-banner {
  background: var(--dream-soft); color: #1E8E6C;
  font-style: italic; font-size: 13.5px; line-height: 1.5; font-weight: 500;
  text-align: center; padding: 12px 22px; flex: 0 0 auto;
}
.screen.dark .disclaimer-banner { color: #5FD6B2; }

/* CoffeeHonestyStamp — coffee surfaces, permanent, no dismiss */
.honesty-stamp {
  background: var(--coffee-soft); color: #D9622F;
  font-size: 13.5px; line-height: 1.5; font-weight: 500;
  text-align: center; padding: 12px 22px; flex: 0 0 auto;
}
.screen.dark .honesty-stamp { color: #FFB081; }

/* CacheServedLabel — slate band, distinct, above reading, no dismiss */
.cache-label {
  background: var(--stone-soft); color: var(--stone);
  font-size: 14px; line-height: 1.55; font-weight: 500;
  border-radius: 16px; padding: 13px 16px;
  display: flex; gap: 11px; align-items: flex-start; margin-bottom: 22px;
}
.cache-label .dot { flex: 0 0 auto; margin-top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--stone); }

/* ReadingStallState — fade-in below last paragraph, no spinner */
.stall { font-size: 17px; color: var(--stone); font-style: italic; margin-top: 8px; animation: stallfade 1.2s var(--ease); }
@keyframes stallfade { from { opacity: 0; } to { opacity: 1; } }

/* QuotaIndicator — small soft chip */
.quota {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px;
  border-radius: var(--r-pill); background: var(--brand-soft); color: #1E83BC;
  font-size: 14px; font-weight: 600;
}

/* ============================================================
   MOTION-SHAPE (AI presence — soft shiny ovoid, never a face)
   ============================================================ */
.breath {
  width: 100px; height: 82px;
  border-radius: 50% 50% 48% 52% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 36% 30%, #8FD9F7 0%, #44ACE6 55%, #2B95DC 100%);
  opacity: 0.85;
  box-shadow: 0 16px 34px -14px rgba(43,167,230,0.6);
  animation: breathe 4s var(--ease) infinite;
}
.breath.green { background: radial-gradient(circle at 36% 30%, #7EE4C2 0%, #34BF98 55%, #21A07C 100%); box-shadow: 0 16px 34px -14px rgba(37,169,131,0.55); }
.breath.sm { width: 58px; height: 48px; }
@keyframes breathe {
  0%   { transform: scale(1.0)  rotate(0deg);   }
  40%  { transform: scale(1.07) rotate(-1.5deg);}
  50%  { transform: scale(1.07) rotate(-1.5deg);}
  100% { transform: scale(1.0)  rotate(0deg);   }
}
@media (prefers-reduced-motion: reduce) { .breath { animation: none; } }

/* ============================================================
   AI PRESENCE (motion-shape + glow + sparkles + Jarvis orbit)
   Organic ovoid only — never a face. Driven by [data-state].
   ============================================================ */
.aip { position: relative; width: 240px; height: 220px; display: grid; place-items: center; }
.aip.sm { width: 170px; height: 150px; }
.aip.sm .breath { width: 80px; height: 68px; }
.aip.sm .aip-glow { width: 126px; height: 112px; }
.aip.sm .aip-glow.g2 { width: 84px; height: 78px; }
.aip .breath { position: relative; z-index: 4; }

/* soft glow halo */
.aip-glow {
  position: absolute; z-index: 1; width: 170px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(43,167,230,0.50) 0%, rgba(43,167,230,0) 68%);
  filter: blur(6px); animation: glowPulse 4s var(--ease) infinite;
}
.aip-glow.g2 {
  width: 110px; height: 100px;
  background: radial-gradient(circle, rgba(95,214,178,0.55) 0%, rgba(95,214,178,0) 70%);
  animation: glowPulse 3s var(--ease) infinite; animation-delay: .4s;
}
@keyframes glowPulse { 0%,100%{ transform: scale(0.85); opacity:.45;} 50%{ transform: scale(1.18); opacity:.9;} }

/* ambient twinkles scattered around the shape */
.aip-spark { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.aip-spark i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 7px 2px rgba(43,167,230,0.85);
  opacity: 0; animation: twinkle 3.2s ease-in-out infinite;
}
.aip-spark i.green { box-shadow: 0 0 7px 2px rgba(47,190,154,0.9); }
.aip-spark i:nth-child(1){ top:14%; left:24%; animation-delay:.0s; }
.aip-spark i:nth-child(2){ top:8%;  left:64%; width:5px; height:5px; animation-delay:.7s; }
.aip-spark i:nth-child(3){ top:34%; left:84%; animation-delay:1.3s; }
.aip-spark i:nth-child(4){ top:72%; left:80%; width:5px; height:5px; animation-delay:.4s; }
.aip-spark i:nth-child(5){ top:86%; left:54%; animation-delay:1.7s; }
.aip-spark i:nth-child(6){ top:80%; left:20%; width:4px; height:4px; animation-delay:1.0s; }
.aip-spark i:nth-child(7){ top:46%; left:10%; animation-delay:2.1s; }
.aip-spark i:nth-child(8){ top:20%; left:46%; width:4px; height:4px; animation-delay:2.6s; }
@keyframes twinkle {
  0%,100% { opacity:0; transform: scale(0.4); }
  45%,55% { opacity:1; transform: scale(1); }
}

/* Jarvis orbit ring — hidden unless thinking */
.aip-orbit { position: absolute; z-index: 2; width: 200px; height: 200px; opacity: 0; transition: opacity .6s var(--ease); }
.aip-orbit::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  border: 1.5px dashed rgba(43,167,230,0.28);
}
.aip-orbit b {
  position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 9px 2px rgba(43,167,230,0.95);
}
.aip-orbit b.g { background:#eafff7; box-shadow: 0 0 9px 2px rgba(47,190,154,0.95); }
.aip-orbit b:nth-child(1){ transform: rotate(0deg)   translateX(98px); }
.aip-orbit b:nth-child(2){ transform: rotate(60deg)  translateX(98px); width:6px;height:6px;margin:-3px; }
.aip-orbit b:nth-child(3){ transform: rotate(120deg) translateX(98px); }
.aip-orbit b:nth-child(4){ transform: rotate(180deg) translateX(98px); width:6px;height:6px;margin:-3px; }
.aip-orbit b:nth-child(5){ transform: rotate(240deg) translateX(98px); }
.aip-orbit b:nth-child(6){ transform: rotate(300deg) translateX(98px); width:5px;height:5px;margin:-2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }

/* ---- state machine ---- */
.aip[data-state="idle"]      .breath { animation-duration: 5.2s; }
.aip[data-state="idle"]      .aip-glow { animation-duration: 5.2s; opacity:.4; }
.aip[data-state="idle"]      .aip-spark i { animation-duration: 4.6s; }

.aip[data-state="listening"] .breath { width: 116px; height: 96px; }
.aip[data-state="listening"] .aip-glow { transform: scale(1.05); }
.aip[data-state="listening"] .aip-spark i { animation-duration: 2.2s; }

.aip[data-state="thinking"]  .aip-orbit { opacity: 1; animation: spin 7s linear infinite; }
.aip[data-state="thinking"]  .breath { animation-duration: 2.4s; }
.aip[data-state="thinking"]  .aip-glow { animation-duration: 2.4s; }
.aip[data-state="thinking"]  .aip-glow.g2 { opacity: 1; }
.aip[data-state="thinking"]  .aip-spark i { animation-duration: 1.5s; }

.aip[data-state="speaking"]  .breath { animation: breathe 4s var(--ease) infinite, wobble 1.5s ease-in-out infinite; width: 92px; height: 78px; }
.aip[data-state="speaking"]  .aip-glow { animation-duration: 1.6s; }
.aip[data-state="speaking"]  .aip-spark i { animation-duration: 1.1s; }
@keyframes wobble { 0%,100%{ transform: scale(1.04) rotate(-1.4deg);} 50%{ transform: scale(1.07) rotate(1.6deg);} }

@media (prefers-reduced-motion: reduce) {
  .aip-glow, .aip-spark i, .aip-orbit, .aip .breath { animation: none !important; }
  .aip-spark i { opacity: .8; }
}

/* ============================================================
   CARDS / LISTS / TABS
   ============================================================ */
.flow-card {
  background: var(--paper); border-radius: var(--r-card);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.flow-card.coffee { background: linear-gradient(160deg, #FFF4ED 0%, #FFFFFF 60%); }
.flow-card.dream  { background: linear-gradient(160deg, #ECFAF4 0%, #FFFFFF 60%); }
.flow-card:hover { transform: translateY(-4px); }
.flow-card.coffee:hover { box-shadow: var(--glow-coffee), var(--shadow-card); }
.flow-card.dream:hover  { box-shadow: var(--glow-dream),  var(--shadow-card); }
.flow-card .glyph { width: 44px; height: 44px; }
.flow-card .badge {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; flex: 0 0 auto;
}
.flow-card .badge.coffee { background: var(--g-coffee); box-shadow: var(--glow-coffee); }
.flow-card .badge.dream  { background: var(--g-dream);  box-shadow: var(--glow-dream); }
.flow-card .badge svg { stroke: #fff; }
.flow-card .name { font-family: var(--font-ar-display); font-size: 23px; font-weight: 600; }
.flow-card .accent-rail { position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; }
.rail-terracotta { background: var(--coffee); }
.rail-olive { background: var(--dream); }

.opt-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 64px; padding: 0 22px;
  border-radius: 18px; background: var(--paper-elevated);
  border: 1.5px solid transparent; font-size: 19px; font-weight: 500; color: var(--ink);
  cursor: pointer; transition: border-color .3s var(--ease), background .3s var(--ease);
}
.opt-row.sel { border-color: var(--brand); background: var(--brand-soft); }
.opt-row.sel.olive { border-color: var(--dream); background: var(--dream-soft); }
.opt-row.disabled { color: var(--stone); cursor: default; }
.opt-row .soon { font-size: 13px; color: var(--stone); font-weight: 500; }
.opt-row .tick { color: var(--brand); }
.opt-row.olive .tick { color: var(--dream); }

.set-group { display: flex; flex-direction: column; }
.set-group .grp-label { font-size: 13px; color: var(--stone); font-weight: 700; letter-spacing: 0.02em; padding: 0 4px 10px; }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 4px; border-bottom: 1px solid var(--whisper); font-size: 17px; }
.set-row:last-child { border-bottom: none; }
.set-row .val { color: var(--stone); font-size: 16px; display: flex; align-items: center; gap: 8px; }

/* settings root nav rows (type + hairlines only, no icons/decoration) */
.set-title { font-size: 22px; font-weight: 700; color: var(--ink); }   /* utility: no display font (P6) */
.nav-row { display: flex; align-items: center; justify-content: space-between; padding: 19px 4px; border-bottom: 1px solid var(--whisper); font-size: 17px; cursor: pointer; }
.nav-row:last-child { border-bottom: none; }
.nav-row .lead { display: flex; flex-direction: column; gap: 3px; }
.nav-row .sub { font-size: 13px; color: var(--stone); }
.nav-row .chev { color: var(--stone); display: flex; }

.toggle { width: 50px; height: 30px; border-radius: 999px; background: var(--whisper); position: relative; flex: 0 0 auto; transition: background .3s var(--ease); }
.toggle::after { content: ""; position: absolute; top: 3px; inset-inline-end: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.18); transition: inset-inline-end .3s var(--ease); }
.toggle.on { background: var(--g-green); }
.toggle.on::after { inset-inline-end: 23px; }

.tabs {
  flex: 0 0 auto; height: 80px; padding: 8px 36px 26px;
  display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-start;
  border-top: 1px solid var(--whisper); background: var(--paper);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; color: var(--stone); font-weight: 500; }
.tab svg { width: 24px; height: 24px; }
.tab.active { color: var(--brand); }

.hair { height: 1px; background: var(--whisper); width: 100%; }

/* history rows (no photo thumbnails — purged after 24h) */
.hrow { display: flex; align-items: center; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--whisper); }
.hrow:last-child { border-bottom: none; }
.hrow .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto; }
.hrow .ic.coffee { background: var(--coffee-soft); color: var(--coffee); }
.hrow .ic.dream { background: var(--dream-soft); color: var(--dream); }
.hrow .txt { flex: 1; min-width: 0; }
.hrow .prev { font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hrow .date { font-size: 13px; color: var(--stone); margin-top: 3px; }

/* modal (destructive confirms, full-screen backup) */
.modal-scrim { position: absolute; inset: 0; background: rgba(18,26,36,0.5); display: flex; align-items: center; justify-content: center; padding: 30px; }
.modal-card { background: var(--paper); border-radius: 26px; padding: 30px 26px 24px; width: 100%; box-shadow: 0 30px 70px -22px rgba(0,0,0,0.45); text-align: center; }
.modal-card .m-title { font-family: var(--font-ar-display); font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.modal-card .m-body { font-size: 16px; color: var(--stone); line-height: 1.65; margin-bottom: 24px; }
.modal-card .m-actions { display: flex; flex-direction: column; gap: 10px; }

/* bottom sheet (paywall / share) */
.sheet-scrim { position: absolute; inset: 0; background: rgba(18,26,36,0.5); display: flex; align-items: flex-end; }
.sheet { background: var(--paper); width: 100%; border-radius: 30px 30px 0 0; padding: 14px 26px 34px; box-shadow: 0 -22px 54px -20px rgba(0,0,0,0.32); }
.sheet .grip { width: 42px; height: 4px; border-radius: 2px; background: var(--whisper); margin: 0 auto 20px; }

/* helpline buttons (distress redirect) */
.help-btn { display: flex; align-items: center; gap: 14px; width: 100%; background: var(--paper-elevated); border: none; border-radius: 16px; padding: 15px 16px; text-align: start; cursor: pointer; font-family: var(--font-ar); }
.help-btn .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: 0 0 auto; }
.help-btn .nm { font-size: 16px; color: var(--ink); font-weight: 600; }
.help-btn .no { font-family: var(--font-la); font-size: 14px; color: var(--brand); margin-top: 2px; direction: ltr; text-align: start; }

/* photo placeholders (hero cup / horizon imagery) */
.photo-ph { border-radius: 22px; flex-shrink: 0; background: linear-gradient(160deg, #FFF1E8 0%, #FAE6D6 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--coffee); position: relative; overflow: hidden; }
.photo-ph .lbl { font-size: 13px; color: #C2774E; font-weight: 600; }
.photo-ph.dream { background: linear-gradient(160deg, #EAF8F1 0%, #D8F0E6 100%); color: var(--dream); }
.photo-ph.dream .lbl { color: #27916F; }
.photo-ph .steam { position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 30%, rgba(255,255,255,0.5), transparent 70%); }

/* camera viewfinder (capture screens) */
.viewfinder { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #2b2620 0%, #14110e 75%); display: flex; flex-direction: column; color: #fff; }
.vf-top { padding: 16px 24px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.7); }
.vf-mid { flex: 1; display: grid; place-items: center; }
.cup-guide { width: 210px; height: 210px; border: 2px dashed rgba(255,255,255,0.45); border-radius: 50%; display: grid; place-items: center; }
.cup-guide svg { opacity: 0.6; }
.vf-hint { text-align: center; font-size: 18px; line-height: 1.6; padding: 0 34px; color: #fff; font-weight: 500; }
.vf-bottom { padding: 26px 0 40px; display: flex; align-items: center; justify-content: center; gap: 40px; }
.shutter { width: 74px; height: 74px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,0.3); }
.vf-icon-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.12); }

/* text input surface (dream) */
.input-area { background: var(--paper-elevated); border-radius: 18px; padding: 18px 18px; min-height: 210px; font-size: 17px; line-height: 1.75; color: var(--ink); position: relative; }
.input-area .ph { color: var(--stone); }
.input-area .caret { display: inline-block; width: 2px; height: 22px; background: var(--dream); vertical-align: -4px; margin-inline-start: 1px; animation: caretBlink 1.1s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* audio waveform — warm ink lines, never a mystical glow */
.wave { display: flex; align-items: center; gap: 4px; height: 64px; justify-content: center; }
.wave i { width: 4px; border-radius: 2px; background: var(--ink); opacity: 0.45; height: 16px; animation: waveP 1.1s ease-in-out infinite; }
.wave i:nth-child(2n){ opacity: 0.65; }
.wave i:nth-child(3n){ opacity: 0.3; }
@keyframes waveP { 0%,100%{ transform: scaleY(0.4);} 50%{ transform: scaleY(1.4);} }
@media (prefers-reduced-motion: reduce){ .wave i { animation: none; } }

/* BIP39 word cells (LTR-within-RTL grid) */
.word { display: flex; align-items: baseline; gap: 9px; background: var(--paper-elevated); border-radius: 14px; padding: 13px 14px; }
.word .n { font-family: var(--font-la); font-size: 13px; color: var(--brand); min-width: 18px; font-weight: 600; }
.word .w { font-family: var(--font-la); font-size: 17px; color: var(--ink); font-weight: 500; letter-spacing: 0.01em; }

/* BIP39 input slots (verify / restore) */
.wslot { display: flex; align-items: center; gap: 9px; background: #fff; border: 1.5px solid var(--whisper); border-radius: 12px; padding: 12px 13px; }
.wslot.focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.wslot.ok { border-color: var(--dream); }
.wslot.err { border-color: var(--danger); }
.wslot .n { font-family: var(--font-la); font-size: 12px; color: var(--brand); font-weight: 700; min-width: 16px; }
.wslot .v { font-family: var(--font-la); font-size: 16px; color: var(--ink); font-weight: 500; }
.wslot .v.empty { color: var(--stone); opacity: 0.55; }

/* ============================================================
   PALMISTRY (violet) ACCENT + SHARED EXTENSIONS
   New flows reuse every token above; the only per-flow novelty
   is the violet palm accent. Everything else is composed from
   existing radii, fonts, shadows and patterns.
   ============================================================ */
:root {
  --palm:      #7C5CD6;
  --g-palm:    linear-gradient(135deg, #9B7DE8 0%, #6A47C9 100%);
  --palm-soft: rgba(124,92,214,0.13);
  --glow-palm: 0 14px 30px -12px rgba(124,92,214,0.50);
}
.screen.dark { --palm-soft: rgba(124,92,214,0.18); }

/* accent buttons */
.btn-brand { background: var(--g-brand); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), var(--glow-brand); }
.btn-palm  { background: var(--g-palm);  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), var(--glow-palm); }

/* honesty / disclaimer banner — flow-tinted variants (still permanent, no dismiss) */
.honesty-stamp.brand { background: var(--brand-soft); color: #1E83BC; }
.honesty-stamp.palm  { background: var(--palm-soft);  color: #5E3FB0; }
.screen.dark .honesty-stamp.brand { color: #7CC6EE; }
.screen.dark .honesty-stamp.palm  { color: #B9A2F0; }

/* option rows — violet selected state */
.opt-row.sel.palm { border-color: var(--palm); background: var(--palm-soft); }
.opt-row.palm .tick { color: var(--palm); }

/* photo placeholders — brand + palm tints */
.photo-ph.brand { background: linear-gradient(160deg, #E9F6FF 0%, #D6ECFA 100%); color: var(--brand); }
.photo-ph.brand .lbl { color: #1E83BC; }
.photo-ph.palm  { background: linear-gradient(160deg, #F1ECFC 0%, #E5DBF7 100%); color: var(--palm); }
.photo-ph.palm .lbl { color: #6A4FC0; }
.screen.dark .photo-ph.brand { background: linear-gradient(160deg, #11212E 0%, #14201A 100%); color: #7CC6EE; }
.screen.dark .photo-ph.palm  { background: linear-gradient(160deg, #211B2E 0%, #1A1622 100%); color: #B9A2F0; }
.screen.dark .photo-ph.palm .lbl { color: #B9A2F0; }

/* AiPresence — violet variant */
.breath.violet { background: radial-gradient(circle at 36% 30%, #B9A2F0 0%, #7C5CD6 55%, #6A47C9 100%); box-shadow: 0 16px 34px -14px rgba(124,92,214,0.55); }
.aip-glow.violet { background: radial-gradient(circle, rgba(124,92,214,0.50) 0%, rgba(124,92,214,0) 68%); }
.aip-spark i.violet { box-shadow: 0 0 7px 2px rgba(124,92,214,0.9); }
.aip-orbit b.v { background: #f3eeff; box-shadow: 0 0 9px 2px rgba(124,92,214,0.95); }

/* ---- feedback thumbs (was the reading useful?) ---- */
.feedback { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.feedback .lbl { font-size: 13.5px; color: var(--stone); margin-inline-end: 2px; }
.fb-btn { width: 44px; height: 44px; border-radius: 14px; background: var(--paper-elevated); border: 1.5px solid var(--whisper); display: grid; place-items: center; color: var(--stone); cursor: pointer; transition: all .25s var(--ease); }
.fb-btn.up.sel { border-color: var(--dream); color: var(--dream); background: var(--dream-soft); }
.fb-btn.down.sel { border-color: var(--danger); color: var(--danger); background: rgba(240,112,107,0.1); }

/* ---- reading action chips (report / share / listen) ---- */
.read-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.act-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--r-pill); background: var(--paper-elevated); border: 1.5px solid var(--whisper); color: var(--stone); font-family: var(--font-ar); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .25s var(--ease); }
.act-chip:hover { border-color: var(--stone); }
.act-chip svg { width: 18px; height: 18px; }

/* ---- daily notification opt-in card ---- */
.notif-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--paper-elevated); border-radius: 18px; padding: 16px 18px; margin-top: 4px; }
.notif-card .nc-txt .t { font-size: 16px; font-weight: 600; color: var(--ink); }
.notif-card .nc-txt .s { font-size: 13px; color: var(--stone); margin-top: 3px; line-height: 1.5; }

/* ---- chat composer (palmistry follow-up) ---- */
.composer { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--whisper); background: var(--paper); }
.composer .field { flex: 1; min-width: 0; height: 46px; border-radius: var(--r-pill); background: var(--paper-elevated); display: flex; align-items: center; padding: 0 18px; color: var(--stone); font-size: 15px; }
.composer .cbtn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; cursor: pointer; }
.composer .cbtn.attach { background: var(--paper-elevated); color: var(--stone); }
.composer .cbtn.send { color: #fff; }

/* ---- drum spinners (birth date / time) ---- */
.drums { display: flex; gap: 12px; justify-content: center; }
.drum-wrap { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.drum-wrap .drum-lab { font-size: 13px; color: var(--stone); font-weight: 600; }
.drum { position: relative; width: 100%; height: 188px; border-radius: 20px; background: var(--paper-elevated); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.drum .band { position: absolute; inset-inline: 8px; top: 50%; transform: translateY(-50%); height: 50px; border-radius: 12px; background: var(--paper); box-shadow: 0 2px 10px -6px rgba(34,42,57,0.25); }
.drum .it { position: relative; z-index: 1; font-family: var(--font-ar); font-size: 17px; color: var(--stone); height: 34px; display: grid; place-items: center; }
.drum .it.cur { font-size: 22px; font-weight: 700; color: var(--ink); height: 50px; }
.drum .it.f1 { opacity: 0.55; }
.drum .it.f2 { opacity: 0.22; }
.drum.err { box-shadow: inset 0 0 0 1.5px var(--danger); }

/* ---- birth-place search + geocode results ---- */
.search-field { display: flex; align-items: center; gap: 11px; height: 54px; border-radius: 16px; background: var(--paper-elevated); padding: 0 16px; color: var(--stone); }
.search-field svg { color: var(--stone); flex: 0 0 auto; }
.search-field .txt { font-size: 16px; }
.search-field .txt.typed { color: var(--ink); }
.geo-list { display: flex; flex-direction: column; margin-top: 6px; }
.geo-item { display: flex; align-items: center; gap: 13px; padding: 15px 4px; border-bottom: 1px solid var(--whisper); cursor: pointer; }
.geo-item:last-child { border-bottom: none; }
.geo-item .pin { color: var(--brand); flex: 0 0 auto; }
.geo-item .gt { flex: 1; min-width: 0; }
.geo-item .nm { font-size: 17px; color: var(--ink); }
.geo-item .sub { font-size: 13px; color: var(--stone); margin-top: 2px; }
.city-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--dream-soft); color: #1E8E6C; font-size: 15px; font-weight: 600; }
.city-pill svg { width: 16px; height: 16px; }
.inline-err { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--danger); margin-top: 12px; line-height: 1.5; }
.inline-err svg { flex: 0 0 auto; }
.empty-note { text-align: center; color: var(--stone); font-size: 15px; line-height: 1.7; padding: 36px 20px; }

/* ---- confirm summary card ---- */
.summary-card { background: var(--paper-elevated); border-radius: 20px; padding: 4px 20px; }
.summary-row { display: flex; align-items: center; justify-content: space-between; padding: 17px 0; border-bottom: 1px solid var(--whisper); }
.summary-row:last-child { border-bottom: none; }
.summary-row .k { color: var(--stone); font-size: 15px; }
.summary-row .v { color: var(--ink); font-size: 16px; font-weight: 600; }

/* ---- unknown-time partial-chart notice ---- */
.soft-note { display: flex; gap: 11px; align-items: flex-start; background: var(--brand-soft); color: #1E83BC; border-radius: 16px; padding: 14px 16px; font-size: 14px; line-height: 1.55; margin-top: 16px; }
.soft-note.palm { background: var(--palm-soft); color: #5E3FB0; }
.soft-note svg { flex: 0 0 auto; margin-top: 2px; }

/* ---- two-card landing dashboard (data saved) ---- */
.flow-card.brand { background: linear-gradient(160deg, #EAF6FF 0%, #FFFFFF 60%); }
.flow-card.brand .badge2 { background: var(--g-brand); box-shadow: var(--glow-brand); }
.flow-card.palm  .badge2 { background: var(--g-palm);  box-shadow: var(--glow-palm); }
.flow-card .badge2 { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; flex: 0 0 auto; }
.flow-card .badge2 svg { stroke: #fff; }
.dash-link { display: inline-flex; align-items: center; gap: 7px; align-self: center; margin-top: 6px; color: var(--brand); font-size: 14.5px; font-weight: 600; font-family: var(--font-ar); background: none; border: none; cursor: pointer; }

/* ---- natal chart wheel ---- */
.natal-wheel { width: 230px; height: 230px; flex-shrink: 0; margin: 0 auto 6px; display: block; }
.natal-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-bottom: 22px; }
.natal-legend .lg { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--stone); }
.natal-legend .lg .sw { width: 9px; height: 9px; border-radius: 50%; }

/* ---- palm-line diagram (re-renders per line being read) ---- */
.palm-diagram { width: 100%; max-width: 300px; flex-shrink: 0; margin: 0 auto 20px; display: block; }
.palm-diagram .pd-cap { text-align: center; font-size: 12.5px; color: var(--palm); font-weight: 600; margin-top: 4px; }

/* ---- guided-capture extras (palmistry) ---- */
.vf-counter { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-la); font-size: 13px; color: rgba(255,255,255,0.85); }
.vf-counter .dotrow { display: flex; gap: 5px; }
.vf-counter .dotrow i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.vf-counter .dotrow i.on { background: #B9A2F0; }
.palm-guide { width: 230px; height: 230px; border: 2px dashed rgba(255,255,255,0.45); border-radius: 50%; display: grid; place-items: center; }
.palm-guide.locked { border-style: solid; border-color: var(--palm); }
.vf-thumbs { display: flex; gap: 8px; justify-content: center; padding: 0 0 16px; }
.vf-thumb { width: 42px; height: 42px; border-radius: 10px; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.22); display: grid; place-items: center; font-family: var(--font-la); font-size: 13px; color: rgba(255,255,255,0.55); }
.vf-thumb.done { border-color: var(--palm); background: rgba(124,92,214,0.3); color: #fff; }
.vf-thumb.cur { border-color: rgba(255,255,255,0.8); border-style: dashed; }
.vf-skip { background: none; border: none; color: rgba(255,255,255,0.7); font-family: var(--font-ar); font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px; }
.shutter.palm { box-shadow: 0 0 0 5px rgba(124,92,214,0.5); }

/* ============================================================
   GALLERY (review surface — soft light, on-brand)
   ============================================================ */
body.gallery {
  direction: ltr;
  background:
    radial-gradient(120% 80% at 85% -5%, #E6F6FF 0%, transparent 55%),
    radial-gradient(110% 80% at 0% 105%, #E4F8F0 0%, transparent 50%),
    #F6FAFD;
  color: #2a3340;
  font-family: var(--font-la);
  min-height: 100vh;
  padding: 0 0 120px;
}
.gallery-head { padding: 64px 56px 26px; max-width: 1100px; }
.gallery-head .brand-ar { font-family: var(--font-ar-display); font-size: 42px; font-weight: 600; color: #222A39; }
.gallery-head .brand-en { font-size: 12px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--brand); margin-top: 8px; font-weight: 600; }
.gallery-head .lede { margin-top: 22px; font-size: 17px; line-height: 1.7; color: #5d6877; max-width: 640px; }
.gallery-head .lede em { color: var(--brand); font-style: italic; }
.flow-nav { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px 56px 0; max-width: 1100px; }
.flow-nav a { font-size: 13px; color: #56616f; text-decoration: none; border: 1px solid #d9e6f0; border-radius: 999px; padding: 8px 16px; transition: all .2s ease; background: rgba(255,255,255,0.6); }
.flow-nav a:hover { border-color: var(--brand); color: var(--brand); }

.section-head { padding: 70px 56px 10px; display: flex; align-items: baseline; gap: 16px; }
.section-head .num { font-family: var(--font-ar); font-size: 14px; color: var(--brand); }
.section-head h2 { font-size: 26px; font-weight: 600; color: #222A39; letter-spacing: -0.01em; }
.section-head .desc { font-size: 14px; color: #7a8593; }

.rail { display: flex; gap: 56px; padding: 30px 56px 10px; overflow-x: auto; align-items: flex-start; }
.rail.wrap { flex-wrap: wrap; gap: 48px 56px; overflow-x: visible; }
.gallery-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--brand); text-decoration: none; font-weight: 600; padding: 6px 0; }
.gallery-back:hover { text-decoration: underline; }
.statecap-row { display: flex; gap: 8px; align-items: center; margin: 2px 0 14px; }
.statecap-row .tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--brand); border-radius: 999px; padding: 4px 11px; }
.statecap-row .tag.alt { background: var(--coffee); }
.statecap-row .tag.alt2 { background: var(--dream); }
.statecap-row .tag.neutral { background: var(--stone); }

/* ---- gallery dark-preview theme + floating toggle ---- */
.theme-toggle { position: fixed; top: 18px; inset-inline-end: 24px; z-index: 200; display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--whisper); border-radius: 999px; padding: 5px; box-shadow: 0 12px 28px -14px rgba(20,40,60,0.35); }
.theme-toggle button { font-family: var(--font-ar); font-size: 13px; font-weight: 700; border: none; background: transparent; color: var(--stone); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: all .3s var(--ease); }
.theme-toggle button.active { background: var(--g-brand); color: #fff; }

body.gallery.g-dark { background: radial-gradient(120% 80% at 85% -5%, #0f1a26 0%, transparent 55%), radial-gradient(110% 80% at 0% 105%, #0f211b 0%, transparent 50%), #0b0e13; color: #aeb8c6; }
.g-dark .gallery-head .brand-ar { color: #eaf1f8; }
.g-dark .gallery-head .lede { color: #97a3b2; }
.g-dark .cell .sname { color: #dbe3ec; }
.g-dark .cell .snote { color: #8693a3; }
.g-dark .annot .pill { color: #8693a3; }
.g-dark .annot .pill b { color: #cdd6e2; }
.g-dark .flow-nav a { background: rgba(255,255,255,0.04); border-color: #26303c; color: #aeb8c6; }
.g-dark .theme-toggle { background: #161b22; border-color: #283341; }
.g-dark .sect-label { color: #8693a3; }
.g-dark .hero-wrap .one { color: #97a3b2; }
.g-dark .dir-card { background: #161b22; box-shadow: 0 18px 40px -26px #000; }
.g-dark .dir-card .ar { color: #eaf1f8; }
.g-dark .dir-card .ds { color: #8693a3; }
.g-dark .pill-btn.outline { background: #161b22; color: #eaf1f8; border-color: #283341; }
.g-dark .teaser, .g-dark .dir-grid { color: inherit; }
.cell { display: flex; flex-direction: column; gap: 0; }
.cell .meta { margin-top: 20px; max-width: 390px; }
.cell .scode { font-family: var(--font-la); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--brand); }
.cell .sname { font-size: 15px; color: #2a3340; margin-top: 3px; font-weight: 600; }
.cell .snote { font-size: 13px; color: #7a8593; margin-top: 6px; line-height: 1.55; }
.cell .annot { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.annot .pill { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.45; color: #687482; }
.annot .pill b { color: #2a3340; font-weight: 600; }
.annot .pill::before { content: ""; flex: 0 0 auto; margin-top: 5px; width: 6px; height: 6px; border-radius: 2px; background: var(--brand); opacity: 0.6; }

.statecap { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a95a3; margin-bottom: 12px; font-weight: 600; }