/* ═══════════════════════════════════════════════════
   REKHAI — DARK LUXURY DESIGN SYSTEM
═══════════════════════════════════════════════════ */
@keyframes chatDot{0%,80%,100%{transform:scale(0.6);opacity:0.3}40%{transform:scale(1);opacity:1}}
#screen-login{background:var(--bg)}
#chat-messages::-webkit-scrollbar{width:0}
#chat-messages{min-height:0}
:root{
  --bg:#07070F;
  --bg2:#0D0D1A;
  --surface:#12101E;
  --card:#1A1628;
  --glass:rgba(255,255,255,0.04);
  --glass2:rgba(255,255,255,0.07);
  --gold:#C9A84C;
  --gold-light:#F0C060;
  --gold-dark:#8B6B2A;
  --gold-glow:rgba(201,168,76,0.22);
  --text:#F5EFE3;
  --text2:#C4A882;
  --border:rgba(201,168,76,0.18);
  --border2:rgba(201,168,76,0.08);
  --radius:14px;
  --radius-sm:8px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:var(--bg);color:var(--text);
  font-family:'Cormorant Garamond',Georgia,serif;
  -webkit-font-smoothing:antialiased;
}

/* Cross-browser fixes */
*{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}
input,select,textarea,button{font-family:inherit;-webkit-appearance:none;appearance:none}
button{-webkit-tap-highlight-color:rgba(0,0,0,0)}
/* Firefox scrollbar */
*{scrollbar-width:thin;scrollbar-color:rgba(201,168,76,0.3) transparent}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(201,168,76,0.3);border-radius:2px}
/* iOS scroll containment on all scroll containers */
.screen,.modal-card,[style*="overflow"]{overscroll-behavior:contain}
/* Fix backdrop-filter for Firefox (no support — use fallback) */
@supports not (backdrop-filter:blur(1px)){
  .modal,.qa-card,.r-section,.detect-card,.reading-type-card{background:rgba(13,10,26,0.97)!important}
}
/* Prevent text size adjust on orientation change */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Fix select arrow for all browsers including iOS */
select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238B6B2A' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.7rem center;padding-right:2rem}
/* Active states for touch */
.btn-gold:active,.btn-ghost:active{transform:scale(0.97)}
/* Disabled state for all buttons */
button:disabled,.btn-gold:disabled,.btn-ghost:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none}
/* Loading state */
.btn-loading{position:relative;color:transparent !important}
.btn-loading::after{content:'';position:absolute;width:14px;height:14px;top:50%;left:50%;margin:-7px 0 0 -7px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Fix for iOS rubber-band scroll on fixed screens */
.screen{position:fixed;overflow:hidden}
#stars{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ── SCREENS ── */
.screen{
  position:fixed;top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:1;opacity:0;pointer-events:none;transition:opacity 0.7s ease;overflow:hidden;
}
.screen.active{opacity:1;pointer-events:all}

/* ── BUTTONS ── */
.btn-gold{
  background:linear-gradient(135deg,#B8922E,#E8B84B,#C9A84C);
  background-size:200% 200%;
  animation:goldShimmer 4s ease infinite;
  border:none;
  color:#07070F;
  font-family:'Cinzel',serif;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding:1.1rem 2.8rem;
  border-radius:4px;
  cursor:pointer;
  box-shadow:0 4px 24px rgba(201,168,76,0.35),0 1px 0 rgba(255,255,255,0.15) inset;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
  min-width:220px;
}
.btn-gold:active{
  transform:scale(0.97);
  box-shadow:0 2px 12px rgba(201,168,76,0.5);
}
@keyframes goldShimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text2);
  font-family:'Cinzel',serif;
  font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;
  padding:0.9rem 2rem;border-radius:4px;cursor:pointer;
  transition:all 0.2s;
}
.btn-ghost:active{border-color:var(--gold);color:var(--gold)}

/* ── DIVIDER ── */
.h-div{
  width:60%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:0 auto;
}

/* ── INTRO ── */
#screen-intro{
  background:radial-gradient(ellipse at 50% -10%,#1E1230 0%,#07070F 65%);
  padding:max(env(safe-area-inset-top),3.5rem) 1.5rem 2rem;
  text-align:center;gap:0;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;
}
.intro-sym{
  font-size:1.1rem;letter-spacing:0.7em;color:var(--gold-dark);
  margin-bottom:1.4rem;opacity:0.7;text-align:center;
}
.logo{
  font-family:'Cinzel Decorative',serif;
  font-size:3.2rem;font-weight:700;letter-spacing:0.1em;
  background:linear-gradient(135deg,var(--gold-dark) 0%,var(--gold-light) 45%,var(--gold) 60%,var(--gold-dark) 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:goldShimmer 5s ease infinite;
  margin-bottom:0.5rem;
}
.tagline{
  font-family:'Cinzel',serif;font-size:0.62rem;letter-spacing:0.32em;
  color:var(--text2);text-transform:uppercase;margin-bottom:2.8rem;
}
.intro-body{
  font-size:1.08rem;font-style:italic;color:var(--text2);
  line-height:1.75;max-width:280px;margin-bottom:2.8rem;
}
.intro-note{margin-top:2rem;font-size:0.7rem;color:var(--text2);opacity:0.75}
.lang-btn{
  background:var(--glass);border:1px solid var(--border2);border-radius:20px;
  color:var(--text2);font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.06em;
  padding:0.4rem 0.9rem;cursor:pointer;transition:all 0.2s;
  min-height:36px;
}
.lang-btn.active{background:rgba(201,168,76,0.15);border-color:var(--gold);color:var(--gold)}

/* ── HAND CHOICE ── */
#screen-hand{
  background:radial-gradient(ellipse at 50% 0%,#1E1230 0%,#07070F 65%);
  padding:2rem 1.5rem;text-align:center;gap:0;
}
.hand-choice-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:0.6rem;
  padding:1.8rem 0.5rem;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:all 0.25s;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:var(--text);
  -webkit-text-fill-color:var(--text);
}
.hand-choice-btn:active{
  border-color:var(--gold);background:rgba(201,168,76,0.1);
  box-shadow:0 0 30px rgba(201,168,76,0.2);
}

/* ── CAMERA ── */
#screen-camera{background:#000;justify-content:space-between;padding:0}
.cam-header{
  padding:max(env(safe-area-inset-top),2.5rem) 1.5rem 1.2rem;
  background:linear-gradient(to bottom,rgba(7,7,15,0.95),transparent);
  width:100%;text-align:center;
}
.cam-header h3{font-family:'Cinzel',serif;font-size:0.95rem;color:var(--gold-light);letter-spacing:0.1em}
.cam-header p{font-size:0.78rem;color:var(--text2);margin-top:0.3rem}
.cam-wrap{position:relative;flex:1;width:100%;overflow:hidden}
#video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
#overlay{position:absolute;top:0;left:0;width:100%;height:100%}
.lighting-bar-wrap{width:100%;max-width:320px;margin:0.75rem auto 0}
.lighting-bar-track{
  height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;margin-bottom:0.3rem;
}
.lighting-bar-fill{height:100%;width:0%;border-radius:3px;transition:width 0.3s ease,background 0.3s ease;background:#ef4444}
.lighting-bar-label{font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.08em;color:var(--text2);text-align:center}

.cam-footer{
  padding:1.5rem 1.5rem max(env(safe-area-inset-bottom),1.5rem);
  background:linear-gradient(to top,rgba(7,7,15,0.97),transparent);
  width:100%;text-align:center;
}

/* ── ANALYSIS (hidden, kept for retake flow) ── */
#screen-analysis{background:#000;justify-content:space-between;padding:0}
.anl-header{padding:max(env(safe-area-inset-top),2rem) 1.2rem 0.6rem;
  background:linear-gradient(to bottom,rgba(7,7,15,0.95),transparent);
  width:100%;text-align:center;flex-shrink:0}
.anl-header h3{font-family:'Cinzel',serif;font-size:0.9rem;color:var(--gold-light);letter-spacing:0.1em}
#anl-status{font-size:0.74rem;color:var(--text2);margin-top:0.3rem}
.anl-wrap{position:relative;flex:1;width:100%;overflow:hidden;background:#000;min-height:0}
#anl-img{width:100%;height:100%;object-fit:cover;display:block}
#draw-cvs{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.anl-spin-wrap{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  background:rgba(7,7,15,0.82);padding:1.5rem 2rem;border-radius:var(--radius);
  border:1px solid var(--border2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.anl-spin-wrap p{font-family:'Cinzel',serif;font-size:0.78rem;color:var(--gold-light);letter-spacing:0.06em}
.anl-ring{
  width:44px;height:44px;border-radius:50%;
  border:2.5px solid rgba(201,168,76,0.2);border-top-color:var(--gold);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.anl-legend{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
  padding:0.5rem 1rem;background:rgba(7,7,15,0.94);
  font-size:0.72rem;font-style:italic;flex-shrink:0;
}
.anl-footer{
  padding:0.8rem 1.2rem max(env(safe-area-inset-bottom),0.8rem);
  background:linear-gradient(to top,rgba(7,7,15,0.98),transparent);
  width:100%;display:flex;gap:0.7rem;align-items:center;flex-shrink:0;
}

/* ── PROCESSING ── */
#screen-processing{
  background:radial-gradient(ellipse at center,#1E1230 0%,#07070F 70%);
  gap:2.5rem;text-align:center;
}
.proc-rings{position:relative;width:160px;height:160px;display:flex;align-items:center;justify-content:center}
.proc-icon{position:absolute;font-size:3.2rem;z-index:2;animation:floatPulse 2.5s ease-in-out infinite}
@keyframes floatPulse{
  0%,100%{transform:scale(1) translateY(0);filter:drop-shadow(0 0 16px rgba(201,168,76,0.6))}
  50%{transform:scale(1.08) translateY(-4px);filter:drop-shadow(0 0 32px rgba(201,168,76,0.9))}
}
.ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(201,168,76,0.25);animation:ringExpand 3.2s ease-in-out infinite;
}
.ring:nth-child(1){width:80px;height:80px;animation-delay:0s}
.ring:nth-child(2){width:120px;height:120px;animation-delay:0.7s}
.ring:nth-child(3){width:160px;height:160px;animation-delay:1.4s}
@keyframes ringExpand{0%{opacity:0.7;transform:scale(0.88)}100%{opacity:0;transform:scale(1.12)}}
#proc-text{
  font-family:'Cinzel',serif;font-size:0.82rem;color:var(--gold-light);
  letter-spacing:0.06em;width:280px;text-align:center;
  line-height:1.35;height:2.8em;display:flex;align-items:center;justify-content:center;
}

/* ── READING ── */
#screen-reading{
  background:var(--bg);justify-content:flex-start;
  overflow-y:scroll;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:6rem;
  touch-action:pan-y;
}
.reading-head{
  width:100%;text-align:center;
  padding:max(env(safe-area-inset-top),3rem) 1.5rem 2.5rem;
  background:radial-gradient(ellipse at 50% 0%,#1E1230 0%,transparent 70%);
}
.reading-head h2{
  font-family:'Cinzel',serif;font-size:1.3rem;color:var(--gold-light);
  letter-spacing:0.12em;margin-bottom:0.8rem;
}
.reading-sub{font-size:0.78rem;font-style:italic;color:var(--text2);margin-top:0.6rem}

/* ── READING SECTIONS — premium glass cards ── */
.r-section{
  margin:0.6rem 1rem;
  padding:1.4rem 1.1rem;
  background:linear-gradient(135deg,rgba(201,168,76,0.05),rgba(201,168,76,0.02),var(--glass));
  border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  opacity:0;transform:translateY(20px);animation:sectionReveal 0.9s ease forwards;
  box-shadow:0 4px 24px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.04);
  box-sizing:border-box;width:calc(100% - 2rem);min-width:0;
}
@keyframes sectionReveal{to{opacity:1;transform:translateY(0)}}

/* ── COLLAPSIBLE SECTION PANELS ── */
.collapsible-wrap{
  margin:0.5rem 1rem;width:calc(100% - 2rem);box-sizing:border-box;
  border:1px solid var(--border);border-left:3px solid rgba(201,168,76,0.4);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--glass);overflow:hidden;
  opacity:0;transform:translateY(20px);animation:sectionReveal 0.9s ease forwards;
}
.collapsible-header{
  display:flex;align-items:center;gap:0.65rem;
  padding:0.85rem 1rem;cursor:pointer;
  background:linear-gradient(135deg,rgba(201,168,76,0.06),transparent);
  -webkit-tap-highlight-color:transparent;user-select:none;
  transition:background 0.2s;
}
.collapsible-header:active{background:rgba(201,168,76,0.1)}
.collapsible-icon{font-size:0.9rem;color:var(--gold);flex-shrink:0}
.collapsible-title-wrap{flex:1;min-width:0}
.collapsible-title{
  font-family:'Cinzel',serif;font-size:0.74rem;color:var(--gold-light);
  letter-spacing:0.08em;display:block;
}
.collapsible-sub{font-size:0.62rem;color:var(--text2);font-style:italic;margin-top:1px;display:block}
.collapsible-chevron{
  font-size:0.6rem;color:var(--text2);flex-shrink:0;
  transition:transform 0.3s ease;display:inline-block;
}
.collapsible-wrap.open .collapsible-chevron{transform:rotate(180deg)}
.collapsible-body{
  max-height:0;overflow:hidden;
  transition:max-height 0.55s cubic-bezier(0.4,0,0.2,1);
}
.collapsible-wrap.open .collapsible-body{max-height:8000px;transition:max-height 0.65s cubic-bezier(0.4,0,0.2,1)}
/* Remove redundant wrapper from inner r-section inside collapsible */
.collapsible-body>.r-section{
  margin:0;width:100%;border:none;border-radius:0;
  animation:none;opacity:1;transform:none;
  box-shadow:none;
}

.r-title{
  font-family:'Cinzel',serif;font-size:0.85rem;letter-spacing:0.1em;
  margin-bottom:1rem;
  background:linear-gradient(135deg,var(--gold-dark) 0%,var(--gold-light) 50%,var(--gold) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.r-body{
  font-size:0.95rem;line-height:1.82;color:var(--text);
  font-style:italic;font-weight:300;min-width:0;overflow-wrap:break-word;word-break:break-word;
}
.r-body em{color:var(--gold-light);font-style:normal;font-weight:500}
.r-div{
  width:85%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:0.4rem auto;opacity:0.2;
}

/* ── READING FOOTER ── */
.reading-footer{
  padding:2.5rem 1.5rem max(env(safe-area-inset-bottom),2rem);
  display:flex;flex-direction:column;gap:1rem;align-items:center;
}

/* ── DETECT CARD ── */
.detect-card{margin:0.6rem 1.2rem;
  background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden;
  opacity:0;animation:sectionReveal 0.9s ease forwards;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.detect-thumb{width:100%;height:160px;object-fit:cover;display:block;border-bottom:1px solid var(--border2)}
.detect-body{padding:1.2rem 1.3rem}
.detect-title{font-family:'Cinzel',serif;font-size:0.7rem;letter-spacing:0.15em;
  color:var(--gold-dark);text-transform:uppercase;margin-bottom:1rem}
.detect-rows{display:flex;flex-direction:column;gap:0.55rem}
.detect-row{display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem}
.detect-lbl{font-size:0.78rem;color:var(--text2);font-style:italic;white-space:nowrap;padding-top:1px}
.detect-val{font-size:0.78rem;color:var(--text);text-align:right;line-height:1.4}
.d-badge{display:inline-block;font-size:0.62rem;padding:0.15rem 0.5rem;border-radius:3px;
  font-family:'Cinzel',serif;letter-spacing:0.05em;margin-left:0.3rem;vertical-align:middle}
.b-good{background:rgba(34,197,94,0.12);color:#4ade80;border:1px solid rgba(34,197,94,0.25)}
.b-fair{background:rgba(234,179,8,0.12);color:#fbbf24;border:1px solid rgba(234,179,8,0.25)}
.b-low{background:rgba(239,68,68,0.12);color:#f87171;border:1px solid rgba(239,68,68,0.25)}
.detect-conf{margin-top:1rem;padding-top:0.9rem;border-top:1px solid var(--border2);
  display:flex;align-items:center;justify-content:space-between}

/* ── Q&A ── */
.qa-wrap{padding:2rem 1.5rem;border-top:1px solid var(--border2)}
.qa-heading{
  font-family:'Cinzel',serif;font-size:0.88rem;color:var(--gold);
  letter-spacing:0.12em;text-align:center;margin-bottom:1.4rem;
}
.qa-chips{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin-bottom:1.4rem}
.qa-chip{
  font-family:'Cinzel',serif;font-size:0.66rem;letter-spacing:0.06em;
  padding:0.5rem 1rem;border-radius:20px;
  border:1px solid var(--border);
  background:var(--glass);color:var(--text);cursor:pointer;transition:all 0.2s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.qa-chip:active{border-color:var(--gold);background:rgba(201,168,76,0.12);color:var(--gold-light)}
.qa-row{display:flex;gap:0.5rem}
#qa-input{
  flex:1;background:var(--surface);
  border:1px solid var(--border2);color:var(--text);
  padding:0.8rem 1rem;border-radius:4px;
  font-family:'Cormorant Garamond',serif;font-size:1rem;
  transition:border-color 0.2s;
}
#qa-input:focus{outline:none;border-color:var(--gold-dark)}
.qa-send{
  background:linear-gradient(135deg,#B8922E,#E8B84B);
  border:none;color:#07070F;font-weight:700;
  padding:0.8rem 1.2rem;border-radius:4px;cursor:pointer;font-size:1.1rem;
}
#qa-list{margin-top:1.4rem;display:flex;flex-direction:column;gap:1rem}
.qa-card{
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:1.3rem 1.3rem 1rem;animation:sectionReveal 0.6s ease forwards;opacity:0;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:relative;
}
.qa-q{font-family:'Cinzel',serif;font-size:0.72rem;color:var(--gold-dark);
  letter-spacing:0.06em;margin-bottom:0.7rem;padding-right:1.8rem}
.qa-a{font-size:1.02rem;line-height:1.82;color:var(--text);font-style:italic;font-weight:300}
.qa-spin{text-align:center;color:var(--text2);font-style:italic;padding:0.5rem}
.qa-share-btn{
  background:none;border:none;
  color:rgba(201,168,76,0.5);cursor:pointer;
  padding:0.2rem 0.3rem;font-size:0.62rem;
  font-family:'Cinzel',serif;letter-spacing:0.08em;
  transition:color 0.2s,opacity 0.2s;
  display:flex;align-items:center;gap:0.25rem;
}
.qa-share-btn:active{background:rgba(201,168,76,0.25);border-color:var(--gold)}
.qa-share-btn.shared{opacity:0.3;cursor:default;background:none;border-color:transparent}

/* ── MODAL ── */
.modal{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(7,7,15,0.9);display:none;
  align-items:center;justify-content:center;z-index:100;
  padding:1.5rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  overflow-y:auto;overscroll-behavior:contain;
}
.modal.open{display:flex}

/* ── DRUM PICKER ── */
.drum-wrap{display:flex;gap:0.5rem;align-items:center;justify-content:center;position:relative;margin-bottom:1rem;overflow:hidden;touch-action:pan-y;}
.drum-col-wrap{display:flex;flex-direction:column;align-items:center;gap:0.3rem}
.drum-col-label{font-family:'Cinzel',serif;font-size:0.58rem;color:var(--text2);letter-spacing:0.1em;text-transform:uppercase}
.drum-col{
  width:70px;height:150px;overflow-y:scroll;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;position:relative;cursor:grab;
  touch-action:pan-y;overscroll-behavior:contain;
}
.drum-col::-webkit-scrollbar{display:none}
.drum-col.narrow{width:52px}
.drum-col.wide{width:90px}
.drum-pad{height:50px;flex-shrink:0}
.drum-item{
  height:50px;display:flex;align-items:center;justify-content:center;
  scroll-snap-align:center;font-family:'Cinzel',serif;font-size:1.15rem;
  color:var(--text2);transition:color 0.15s,font-size 0.15s;
  user-select:none;-webkit-user-select:none;cursor:pointer;
  white-space:nowrap;overflow:hidden;touch-action:pan-y;
}
.drum-item.selected{color:var(--gold);font-size:1.35rem}
.drum-item.near{color:var(--text);font-size:1.2rem}
/* Selection highlight stripe */
.drum-highlight{
  position:absolute;top:50px;left:0;right:0;height:50px;pointer-events:none;
  background:rgba(201,168,76,0.08);border-top:1px solid rgba(201,168,76,0.25);
  border-bottom:1px solid rgba(201,168,76,0.25);border-radius:4px;
}
/* Fade top/bottom */
.drum-fade{
  position:absolute;left:0;right:0;pointer-events:none;z-index:1;
}
.drum-fade.top{top:0;height:50px;background:linear-gradient(to bottom,var(--card),transparent)}
.drum-fade.bottom{bottom:0;height:50px;background:linear-gradient(to top,var(--card),transparent)}

.modal-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:2rem;width:100%;max-width:360px;
  box-shadow:0 8px 48px rgba(0,0,0,0.6);
  margin:auto;
}
/* Buy credits — bottom sheet */
#buy-credits-modal{
  align-items:flex-end;
  padding:0;
}
#buy-credits-modal .bc-sheet{
  max-width:100%;
  border-radius:20px 20px 0 0;
  border-bottom:none;
  padding:1rem 1.4rem calc(env(safe-area-inset-bottom,0px) + 1.6rem);
  max-height:88vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  margin:0;
  width:100%;
  box-sizing:border-box;
}
.modal-card h3{font-family:'Cinzel',serif;color:var(--gold-light);font-size:1rem;margin-bottom:0.5rem}
.modal-card p{color:var(--text2);font-size:0.85rem;margin-bottom:1.3rem;line-height:1.6}
.modal-input{
  width:100%;background:var(--surface);border:1px solid var(--border2);color:var(--text);
  padding:0.9rem;font-size:0.88rem;border-radius:4px;margin-bottom:1rem;font-family:monospace;
}
.modal-input:focus{outline:none;border-color:var(--gold-dark)}
.modal-row{display:flex;gap:0.75rem}

/* ── AUTH NAV ── */
.auth-nav{
  position:absolute;top:max(env(safe-area-inset-top),0.7rem);
  left:0.9rem;         /* My Readings on the LEFT */
  display:flex;align-items:center;gap:0.4rem;z-index:10;
}
.auth-nav-right{
  position:absolute;top:max(env(safe-area-inset-top),0.7rem);
  right:0.9rem;        /* Profile + Sign Out on the RIGHT */
  display:flex;align-items:center;gap:0.7rem;z-index:10;
}
.auth-nav-btn{
  background:rgba(201,168,76,0.08);border:1px solid rgba(201,168,76,0.18);
  border-radius:7px;cursor:pointer;color:var(--text2);
  padding:0.4rem 0.55rem;transition:color 0.2s,border-color 0.2s;
  line-height:1;display:flex;align-items:center;justify-content:center;
  min-height:38px;min-width:38px;
}
.auth-nav-btn:active{color:var(--gold);border-color:var(--gold)}
.auth-avatar{width:30px;height:30px;border-radius:50%;border:1px solid var(--border);object-fit:cover;cursor:pointer;vertical-align:middle}

/* ── LOGIN SCREEN ── */
#screen-login{
  background:radial-gradient(ellipse at 50% -10%,#1E1230 0%,#07070F 65%);
  padding:2rem 1.5rem;text-align:center;gap:0;
}
.signin-icons{display:flex;gap:1.5rem;margin-bottom:2rem}
.signin-icon-btn{
  width:68px;height:68px;border-radius:50%;border:1px solid rgba(255,255,255,0.15);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:transform 0.15s,box-shadow 0.15s;
  box-shadow:0 2px 16px rgba(0,0,0,0.4);
}
.signin-icon-btn:active{transform:scale(0.93)}
.signin-icon-btn.g-btn{background:#fff}

/* ── HISTORY SCREEN ── */
#screen-history{
  background:var(--bg);justify-content:flex-start;
  overflow-y:scroll;overscroll-behavior:contain;padding-bottom:4rem;
}
.history-head{
  width:100%;text-align:center;
  padding:max(env(safe-area-inset-top),3rem) 1.5rem 1.2rem;
  border-bottom:1px solid var(--border2);position:relative;
}
.history-head h2{font-family:'Cinzel',serif;color:var(--gold-light);font-size:1.05rem;letter-spacing:0.1em}
.history-back{
  position:absolute;top:max(env(safe-area-inset-top),1rem);left:1rem;
  background:none;border:none;color:var(--text2);cursor:pointer;
  font-size:1.1rem;padding:0.4rem;
}
.history-empty{text-align:center;padding:4rem 2rem;color:var(--text2);font-size:0.88rem;line-height:1.8}
.h-card{
  width:100%;padding:1.1rem 1.5rem;
  border-bottom:1px solid var(--border2);
  cursor:pointer;transition:background 0.15s;
  display:flex;gap:1rem;align-items:flex-start;
}
.h-card:active{background:var(--glass)}
.h-card-icon{font-size:1.3rem;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem}
.h-card-icon svg{width:100%;height:100%}
.h-card-body{flex:1;min-width:0}
.h-card-date{font-family:'Cinzel',serif;font-size:0.7rem;color:var(--gold-dark);letter-spacing:0.08em;margin-bottom:0.2rem}
.h-card-hand{font-size:0.76rem;color:var(--text2);margin-bottom:0.35rem}
.h-card-preview{font-size:0.82rem;color:var(--text);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ── CREDITS BAR ── */
.credits-bar{
  display:flex;align-items:center;justify-content:flex-end;gap:0.6rem;
  padding:0.5rem 1.2rem;border-bottom:1px solid var(--border2);width:100%;
}
.credits-count{font-family:'Cinzel',serif;font-size:0.75rem;color:var(--gold);letter-spacing:0.06em}
.credits-buy-btn{
  background:none;border:1px solid var(--border);border-radius:4px;
  color:var(--text2);font-family:'Cinzel',serif;font-size:0.68rem;
  padding:0.3rem 0.65rem;cursor:pointer;letter-spacing:0.05em;transition:border-color 0.2s;
}
.credits-buy-btn:active{border-color:var(--gold);color:var(--gold)}

/* ── CHOOSE READING CARDS ── */
.reading-type-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;
  width:100%;max-width:380px;margin-bottom:1.2rem;
}
.reading-type-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.3rem 0.8rem 1.1rem;
  cursor:pointer;text-align:center;
  transition:border-color 0.25s,box-shadow 0.25s,transform 0.15s;
  display:flex;flex-direction:column;align-items:center;gap:0.45rem;
  position:relative;overflow:hidden;
}
.reading-type-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(201,168,76,0.06),transparent);
  opacity:0;transition:opacity 0.25s;
}
.reading-type-card:active,.reading-type-card.hovered{
  border-color:var(--gold);
  box-shadow:0 0 24px var(--gold-glow),inset 0 0 20px rgba(201,168,76,0.04);
  transform:translateY(-2px);
}
.reading-type-card:active::before{opacity:1}
.reading-type-card.disabled{
  opacity:0.5;cursor:default;
}
.rtc-icon{font-size:1.8rem;line-height:1;display:flex;align-items:center;justify-content:center}
.rtc-icon svg{display:block}
.rtc-name{
  font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:0.1em;
  color:var(--gold-light);
}
.rtc-sub{font-size:0.62rem;color:var(--text2);font-style:italic;line-height:1.35}
.rtc-badge{
  font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.08em;
  color:var(--gold-dark);background:rgba(201,168,76,0.1);
  border:1px solid rgba(201,168,76,0.2);border-radius:10px;
  padding:0.15rem 0.5rem;margin-top:0.1rem;
}
.continue-link{
  font-family:'Cinzel',serif;font-size:0.68rem;color:var(--gold-dark);
  letter-spacing:0.06em;text-decoration:underline;cursor:pointer;
  margin-top:0.2rem;opacity:0.8;
}

/* ── FACE SCREEN ── */
#screen-face{background:#000;justify-content:space-between;padding:0}
.face-header{
  padding:max(env(safe-area-inset-top),2.5rem) 1.5rem 1.2rem;
  background:linear-gradient(to bottom,rgba(7,7,15,0.95),transparent);
  width:100%;text-align:center;
}
.face-header h3{font-family:'Cinzel',serif;font-size:0.95rem;color:var(--gold-light);letter-spacing:0.1em}
.face-header p{font-size:0.78rem;color:var(--text2);margin-top:0.3rem}
.face-cam-wrap{position:relative;flex:1;width:100%;overflow:hidden}
#face-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
#face-overlay{position:absolute;top:0;left:0;width:100%;height:100%}
.face-footer{
  padding:1.5rem 1.5rem max(env(safe-area-inset-bottom),1.5rem);
  background:linear-gradient(to top,rgba(7,7,15,0.97),transparent);
  width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:0.75rem;
}
#face-status{
  font-family:'Cinzel',serif;font-size:0.74rem;letter-spacing:0.06em;
  color:var(--text2);min-height:1.2rem;text-align:center;
}
#face-capture-btn{
  display:none;
}
.face-lighting-bar-wrap{width:100%;max-width:300px;margin:0 auto}
.face-lighting-bar-track{
  height:5px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;margin-bottom:0.25rem;
}
.face-lighting-bar-fill{height:100%;width:0%;border-radius:3px;transition:width 0.3s ease,background 0.3s ease;background:#ef4444}
.face-lighting-bar-label{font-family:'Cinzel',serif;font-size:0.62rem;letter-spacing:0.07em;color:var(--text2);text-align:center}
.face-loading-wrap{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  background:rgba(7,7,15,0.85);padding:1.5rem 2rem;
  border-radius:var(--radius);border:1px solid var(--border2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.face-loading-wrap p{
  font-family:'Cinzel',serif;font-size:0.78rem;color:var(--gold-light);letter-spacing:0.06em;
}

/* ── TOPIC CARDS ── */
.r-topic-card{
  margin:0 1rem 0.75rem;
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--radius);overflow:visible;
}
.r-topic-header{
  display:flex;align-items:center;gap:0.75rem;padding:0.9rem 1.1rem;
  border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;
}
.r-topic-icon{font-size:1.3rem;flex-shrink:0}
.r-topic-info{flex:1}
.r-topic-name{font-family:'Cinzel',serif;font-size:0.78rem;color:var(--gold-light);letter-spacing:0.06em}
.r-topic-sub{font-size:0.72rem;color:var(--text2);font-style:italic;margin-top:2px}
.r-topic-cost{font-family:'Cinzel',serif;font-size:0.7rem;color:var(--gold-dark)}
.r-topic-lock{
  border-top:1px solid var(--border2);padding:0.6rem 1.1rem;
  font-size:0.75rem;color:var(--text2);font-style:italic;text-align:center;
}
.r-topic-body{
  border-top:1px solid var(--border2);padding:1rem 1.1rem 1.4rem;
  font-size:0.9rem;color:#D4C5A9;line-height:1.75;
  animation:sectionReveal 0.7s ease forwards;
  max-height:380px;overflow-y:auto;
  border-radius:0 0 var(--radius) var(--radius);
}
.r-copy-btn{
  background:none;border:1px solid rgba(201,168,76,0.25);border-radius:5px;
  color:#8B6B2A;font-size:0.78rem;padding:3px 7px;cursor:pointer;
  flex-shrink:0;line-height:1;transition:border-color 0.15s,color 0.15s;
}
.r-copy-btn:hover{border-color:rgba(201,168,76,0.6);color:#C9A84C}

/* ── TOPIC CHOICE BUTTONS ── */
.topic-choices-wrap{padding:0.5rem 1rem 1rem}
.choices-label{
  font-family:'Cinzel',serif;font-size:0.68rem;color:var(--gold-dark);
  letter-spacing:0.14em;text-align:center;margin-bottom:0.65rem;
}
.topic-choice-btn{
  display:flex;align-items:center;gap:0.65rem;width:100%;box-sizing:border-box;
  background:var(--glass);border:1px solid var(--border2);
  border-radius:var(--radius-sm);padding:0.7rem 0.85rem;
  margin-bottom:0.45rem;cursor:pointer;transition:border-color 0.2s,background 0.2s;
  min-width:0;
}
.topic-choice-btn:active{border-color:var(--gold);background:rgba(201,168,76,0.05)}
.topic-choice-btn.generating{opacity:0.6;cursor:default;font-style:italic}
.tcb-icon{font-size:1rem;flex-shrink:0}
.tcb-name{flex:1;min-width:0;font-family:'Cinzel',serif;font-size:0.72rem;color:var(--text);letter-spacing:0.03em;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcb-sub{font-size:0.65rem;color:var(--text2);font-style:italic;margin-top:1px}
.tcb-cost{
  font-family:'Cinzel',serif;font-size:0.7rem;font-weight:600;color:var(--gold);flex-shrink:0;
  background:rgba(201,168,76,0.14);border:1px solid rgba(201,168,76,0.35);
  border-radius:6px;padding:0.25rem 0.55rem;
  display:flex;align-items:center;justify-content:center;
  line-height:1.2;white-space:nowrap;align-self:center;
}

/* ── CREDIT PACKS ── */
.credit-pack{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:0.85rem 1rem;color:var(--text);font-family:'Cinzel',serif;
  font-size:0.82rem;cursor:pointer;transition:border-color 0.2s;
}
.credit-pack:active{border-color:var(--gold)}

/* ── READING SAVED INDICATOR ── */
.reading-saved{
  text-align:center;padding:0.3rem 1rem;
  font-family:'Cinzel',serif;font-size:0.68rem;letter-spacing:0.1em;
  color:var(--gold-dark);opacity:0;transition:opacity 0.8s;
}
.reading-saved.visible{opacity:1}

/* ── DESKTOP BLOCKER ── */
#screen-desktop{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:var(--bg);z-index:9999;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;
}
#screen-desktop .qr-wrap{
  background:#fff;padding:14px;border-radius:12px;
  margin:1.5rem 0;box-shadow:0 0 40px rgba(201,168,76,0.15);
}
#screen-desktop .qr-url{
  font-family:'Cinzel',serif;font-size:0.8rem;
  letter-spacing:0.08em;color:var(--text2);
}

/* ── PWA INSTALL BANNER ── */
#pwa-banner{
  display:none;position:fixed;bottom:0;left:0;right:0;
  padding:1rem 1.2rem;padding-bottom:max(1rem, env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--border);
  z-index:200;flex-direction:row;align-items:center;gap:0.8rem;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  animation:slideUp 0.4s ease;
}
#pwa-banner .pwa-text{flex:1}
#pwa-banner .pwa-title{font-family:'Cinzel',serif;color:var(--gold-light);font-size:0.82rem;margin-bottom:2px}
#pwa-banner .pwa-sub{color:var(--text2);font-size:0.72rem}
#pwa-banner .pwa-add{
  padding:0.55rem 1rem;font-size:0.78rem;white-space:nowrap;
  background:var(--gold);color:#07070F;border:none;border-radius:4px;
  font-family:'Cinzel',serif;letter-spacing:0.06em;cursor:pointer;font-weight:700;
}
#pwa-banner .pwa-dismiss{
  background:none;border:none;color:var(--text2);font-size:1.1rem;cursor:pointer;padding:0.2rem;line-height:1;
}

/* ── PROFILE SETUP / EDIT ── */
#screen-profile-setup,#screen-profile{
  background:radial-gradient(ellipse at 50% -10%,#1E1230 0%,#07070F 65%);
  padding:2rem 1.5rem;overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start;
}
.profile-head{width:100%;text-align:center;padding:max(env(safe-area-inset-top),2.5rem) 0 1.8rem;position:relative}
.profile-head h2{font-family:'Cinzel',serif;font-size:1.05rem;color:var(--gold-light);letter-spacing:0.12em;margin-bottom:0.5rem}
.profile-head p{font-size:0.82rem;color:var(--text2);font-style:italic;line-height:1.6;max-width:280px;margin:0 auto}
.profile-form{width:100%;max-width:360px;margin:0 auto;display:flex;flex-direction:column;gap:1.3rem}
.profile-field{display:flex;flex-direction:column;gap:0.4rem}
.profile-label{font-family:'Cinzel',serif;font-size:0.7rem;color:var(--gold-dark);letter-spacing:0.14em;text-transform:uppercase}
.profile-optional{font-size:0.68rem;color:var(--text2);opacity:0.6;font-style:italic;margin-left:0.4rem}
.profile-input{
  background:var(--surface);border:1px solid var(--border2);color:var(--text);
  padding:0.85rem 1rem;border-radius:4px;font-size:0.9rem;width:100%;font-family:'Cormorant Garamond',serif;
}
.profile-input:focus{outline:none;border-color:var(--gold-dark)}
.profile-input::placeholder{color:var(--text2);opacity:0.6}
.profile-input::-webkit-calendar-picker-indicator{filter:invert(0.7) sepia(1) saturate(2) hue-rotate(5deg)}
.profile-gender-row{display:flex;gap:0.75rem}
.profile-gender-btn{
  flex:1;padding:0.9rem 0.5rem;font-family:'Cinzel',serif;font-size:0.8rem;letter-spacing:0.07em;
  border:1px solid var(--border);border-radius:4px;background:var(--glass);color:var(--text);
  cursor:pointer;transition:all 0.2s;
}
.profile-gender-btn.selected{background:rgba(201,168,76,0.15);border-color:var(--gold);color:var(--gold)}
.profile-note{font-size:0.7rem;color:var(--text2);opacity:0.65;text-align:center;line-height:1.55}
.profile-saved-badge{
  font-family:'Cinzel',serif;font-size:0.62rem;letter-spacing:0.08em;
  color:#4ade80;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.25);
  border-radius:4px;padding:0.2rem 0.6rem;display:inline-block;margin-left:0.4rem;
}

/* ── BIRTH CHART INPUT ── */
#screen-birthchart{
  background:radial-gradient(ellipse at 50% -10%,#1A1A2E 0%,#07070F 65%);
  padding:2rem 1.5rem;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;
}
.bc-head{width:100%;text-align:center;padding:max(env(safe-area-inset-top),2.5rem) 0 2rem}
.bc-head h2{font-family:'Cinzel',serif;font-size:1.1rem;color:var(--gold-light);letter-spacing:0.12em;margin-bottom:0.5rem}
.bc-head p{font-size:0.82rem;color:var(--text2);font-style:italic;line-height:1.6;max-width:280px;margin:0 auto}
.bc-form{width:100%;max-width:360px;margin:0 auto;display:flex;flex-direction:column;gap:1.2rem}
.bc-field{display:flex;flex-direction:column;gap:0.4rem}
.bc-label{font-family:'Cinzel',serif;font-size:0.7rem;color:var(--gold-dark);letter-spacing:0.14em;text-transform:uppercase}
.bc-input{
  background:var(--surface);border:1px solid var(--border2);color:var(--text);
  padding:0.85rem 1rem;border-radius:var(--radius-sm);
  font-family:'Cormorant Garamond',serif;font-size:1rem;
  transition:border-color 0.2s;width:100%;
}
.bc-input:focus{outline:none;border-color:var(--gold-dark)}
.bc-input::placeholder{color:var(--text2);opacity:0.6}
.bc-input::-webkit-calendar-picker-indicator{filter:invert(0.7) sepia(1) saturate(2) hue-rotate(5deg)}
.time-input{ cursor:pointer!important; caret-color:transparent }
.time-input:focus{ outline:none; border-color:var(--gold-dark) }
#tp-am.active,#tp-pm.active{ background:rgba(201,168,76,0.2)!important; border-color:var(--gold)!important; color:var(--gold)!important }
#tp-hour,#tp-minute{ -webkit-appearance:none; appearance:none; outline:none }
#tp-hour:focus,#tp-minute:focus{ border-color:var(--gold-dark) }
.country-select{
  background:var(--surface);border:1px solid var(--border2);color:var(--text);
  border-radius:var(--radius-sm);font-family:'Cormorant Garamond',serif;font-size:0.88rem;
  width:100%;height:40px;box-sizing:border-box;cursor:pointer;
  padding:0 0.7rem;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238B6B2A' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0.7rem center;
}
.country-select:focus{outline:none;border-color:var(--gold-dark)}
.country-select option{background:#12101E;color:var(--text)}
.bc-unknown{display:flex;align-items:center;gap:0.5rem;margin-top:0.35rem}
.bc-unknown input[type=checkbox]{width:16px;height:16px;accent-color:var(--gold);cursor:pointer}
.bc-unknown label{font-size:0.78rem;color:var(--text2);font-style:italic;cursor:pointer}
.bc-note{font-size:0.7rem;color:var(--text2);opacity:0.7;text-align:center;line-height:1.55;margin-top:0.5rem}

/* ── QUESTIONS (kept hidden but functional) ── */
#screen-questions{
  background:radial-gradient(ellipse at 50% 0%,#1E1230 0%,#07070F 65%);
  padding:0 1.5rem 2rem;justify-content:flex-start;
  overflow-y:auto;overscroll-behavior:contain;
}
.q-top{width:100%;text-align:center;padding-top:max(env(safe-area-inset-top),3rem);margin-bottom:2rem}
.q-label{font-family:'Cinzel',serif;font-size:0.62rem;letter-spacing:0.26em;
  color:var(--gold-dark);text-transform:uppercase;margin-bottom:0.8rem}
.q-dots{display:flex;gap:7px;justify-content:center}
.q-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background 0.3s,transform 0.3s}
.q-dot.active{background:var(--gold);transform:scale(1.4)}
.q-dot.done{background:var(--gold-dark)}
.q-card{width:100%;max-width:400px;animation:slideUp 0.45s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes intentUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideUp{from{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}
.intent-chip{background:rgba(201,168,76,0.06);border:1px solid rgba(201,168,76,0.18);border-radius:9px;padding:0.65rem 0.8rem;color:var(--text2);font-size:0.75rem;font-family:Georgia,serif;cursor:pointer;text-align:left;transition:all 0.18s;line-height:1.3}
.intent-chip:hover{background:rgba(201,168,76,0.13);border-color:rgba(201,168,76,0.4);color:var(--gold-light)}
.intent-chip.selected{background:rgba(201,168,76,0.18);border-color:var(--gold);color:var(--gold-light)}
.intent-chip-all{grid-column:span 2;text-align:center}
.q-glyph{text-align:center;font-size:1.5rem;margin-bottom:1.2rem;color:var(--gold)}
.q-text{font-family:'Cinzel',serif;font-size:1.1rem;line-height:1.55;color:var(--text);text-align:center;margin-bottom:0.7rem}
.q-hint{font-size:0.88rem;font-style:italic;color:var(--text2);text-align:center;margin-bottom:2rem;line-height:1.45}
.q-opts{display:flex;flex-direction:column;gap:0.7rem}
.q-opt{
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:0.95rem 1.2rem;cursor:pointer;transition:all 0.2s;text-align:left;
  display:flex;align-items:center;gap:0.9rem;width:100%;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.q-opt:active,.q-opt.chosen{border-color:var(--gold);background:rgba(201,168,76,0.1);box-shadow:0 0 20px rgba(201,168,76,0.15)}
.q-opt-main{font-size:1rem;color:var(--text)}
.q-opt-sub{font-size:0.76rem;color:var(--text2);font-style:italic;margin-top:2px}
/* City searchable dropdown */
.city-wrap{position:relative;width:100%}
.city-input{width:100%;background:var(--surface);border:1px solid var(--border2);color:var(--text);
  padding:0.6rem 0.75rem;border-radius:var(--radius-sm);font-family:'Cormorant Garamond',serif;
  font-size:0.88rem;transition:border-color 0.2s;-webkit-appearance:none}
.city-input:focus{outline:none;border-color:var(--gold-dark)}
.city-input:-webkit-autofill,
.city-input:-webkit-autofill:hover,
.city-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 30px #0D0B1A inset !important;
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text);
}
.profile-input:-webkit-autofill,
.profile-input:-webkit-autofill:hover,
.profile-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 30px #0D0B1A inset !important;
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text);
}
.city-dropdown{
  position:absolute;top:100%;left:0;right:0;
  background:var(--card);border:1px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);
  max-height:200px;overflow-y:auto;z-index:200;display:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
.city-option{
  padding:0.65rem 0.85rem;font-size:0.85rem;color:var(--text);cursor:pointer;
  border-bottom:1px solid var(--border2);display:flex;justify-content:space-between;
}
.city-option:last-child{border-bottom:none}
.city-option:active,.city-option.highlighted{background:rgba(201,168,76,0.1);color:var(--gold-light)}
.city-option span{font-size:0.7rem;color:var(--text2)}

/* ── VEDIC CHART STYLES ── */
.vc-toggle{display:flex;gap:0.5rem;justify-content:center;margin:0.8rem 0 1rem}
.vc-toggle-btn{
  font-family:'Cinzel',serif;font-size:0.65rem;letter-spacing:0.08em;
  padding:0.35rem 0.85rem;border-radius:20px;border:1px solid var(--border);
  background:var(--glass);color:var(--text2);cursor:pointer;transition:all 0.2s;
}
.vc-toggle-btn.active{background:rgba(201,168,76,0.15);border-color:var(--gold);color:var(--gold)}

/* Charts horizontal scroll strip — one chart per swipe */
.chart-strip{
  display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x;
}
.chart-strip::-webkit-scrollbar{display:none}
.chart-strip-card{
  flex:0 0 100%;scroll-snap-align:start;
  padding:0 0.5rem;
}
/* Override si-chart defaults inside the strip */
.chart-strip-card .si-chart{
  width:100%;max-width:320px;margin:0 auto;font-size:0.6rem;
}
.chart-strip-card .si-cell{min-height:0}   /* let aspect-ratio control sizing */
.chart-strip-card .ni-chart{width:100%;max-width:320px;margin:0 auto}
.chart-strip-dots{
  display:flex;justify-content:center;gap:0.45rem;margin-top:0.6rem;
}
.chart-strip-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(201,168,76,0.3);transition:background 0.2s;
}
.chart-strip-dot.active{background:var(--gold)}
.chart-strip-label{
  font-family:'Cinzel',serif;font-size:0.65rem;color:var(--gold-dark);
  letter-spacing:0.1em;text-align:center;margin-bottom:0.25rem;
}
.chart-strip-sub{font-size:0.62rem;color:var(--text2);text-align:center;margin-bottom:0.5rem;font-style:italic}

/* South Indian (Tamil) Chart */
.si-chart{
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);
  border:1.5px solid rgba(201,168,76,0.5);aspect-ratio:1;width:100%;max-width:340px;
  margin:0 auto;font-size:0.62rem;
}
.si-cell{
  border:1px solid rgba(201,168,76,0.25);padding:3px 4px;min-height:60px;
  display:flex;flex-direction:column;position:relative;
  background:rgba(255,255,255,0.02);
}
.si-cell.si-lagna{background:rgba(201,168,76,0.08);border-color:rgba(201,168,76,0.5)}
.si-center{
  grid-column:2/4;grid-row:2/4;border:1px solid rgba(201,168,76,0.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:0.2rem;background:rgba(7,7,15,0.5);
}
.si-sign-name{font-family:'Cinzel',serif;font-size:0.55rem;color:var(--gold-dark);letter-spacing:0.04em;line-height:1.2}
.si-lag{font-family:'Cinzel',serif;font-size:0.55rem;color:var(--gold);position:absolute;top:2px;right:3px}
.si-planets{display:flex;flex-wrap:wrap;gap:2px;margin-top:2px}
.si-planet{
  background:rgba(201,168,76,0.12);border:1px solid rgba(201,168,76,0.2);
  border-radius:2px;padding:1px 3px;font-size:0.58rem;color:var(--text);line-height:1.3;
}
.si-planet.retro{color:#f0c060}

/* North Indian (Sanskrit) Chart */
.ni-chart{width:100%;max-width:340px;margin:0 auto;aspect-ratio:1;position:relative}
.ni-chart svg{width:100%;height:100%}

/* ── PERIODIC READINGS ── */
.periodic-wrap{padding:1rem 1.2rem;border-top:1px solid var(--border2)}
.periodic-heading{font-family:'Cinzel',serif;font-size:0.95rem;color:var(--gold);letter-spacing:0.1em;text-align:center;margin-bottom:1rem}
.periodic-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:0.6rem;margin-bottom:1rem}
.periodic-btn{
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text2);font-family:'Cinzel',serif;font-size:0.68rem;letter-spacing:0.06em;
  padding:0.7rem 1.4rem;cursor:pointer;text-align:center;transition:all 0.2s;
  min-width:180px;
}
.periodic-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(201,168,76,0.08)}
.periodic-btn.loading{opacity:0.6;pointer-events:none}
.periodic-btn .pb-icon{font-size:1.1rem;display:block;margin-bottom:0.2rem}
.periodic-btn .pb-label{display:block;font-size:0.72rem}
.periodic-btn .pb-status{display:block;font-size:0.65rem;color:var(--text2);margin-top:0.1rem;font-family:'Cormorant Garamond',serif;font-style:italic}
.periodic-reading-card{
  background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:1.2rem 1.3rem;margin-top:0.8rem;animation:sectionReveal 0.6s ease forwards;opacity:0;
}
.periodic-reading-title{font-family:'Cinzel',serif;font-size:0.85rem;color:var(--gold);letter-spacing:0.08em;margin-bottom:0.8rem}
.periodic-reading-body{font-size:1.05rem;line-height:1.85;color:var(--text);font-style:italic;font-weight:300}
.periodic-cost{font-size:0.65rem;color:var(--text2);margin-top:0.3rem;text-align:center;opacity:0.7}
/* ── PERIODIC HISTORY CARDS ── */
.periodic-history-card{
  border:1px solid var(--border2);border-radius:var(--radius-sm);
  margin-bottom:0.5rem;overflow:hidden;background:var(--glass);
}
.phc-header{
  display:flex;align-items:center;gap:0.6rem;padding:0.75rem 0.9rem;
  cursor:pointer;transition:background 0.15s;
}
.phc-header:active{background:rgba(201,168,76,0.05)}
.phc-icon{font-size:1.1rem;flex-shrink:0}
.phc-info{flex:1;min-width:0;text-align:left}
.phc-label{display:block;font-family:'Cinzel',serif;font-size:0.72rem;color:var(--gold-light);letter-spacing:0.05em}
.phc-date{display:block;font-size:0.65rem;color:var(--text2);margin-top:0.1rem}
.phc-toggle{color:var(--text2);font-size:0.7rem;transition:transform 0.25s;flex-shrink:0}
.phc-body{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.25s;
  font-size:0.95rem;line-height:1.8;color:var(--text);font-style:italic;font-weight:300;padding:0 0.9rem}
.periodic-history-card.open .phc-toggle{transform:rotate(180deg)}
.periodic-history-card.open .phc-body{max-height:600px;padding:0 0.9rem 0.9rem}

/* ── HISTORY GROUPS ── */
.history-group-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.8rem 1.5rem;
  font-family:'Cinzel',serif;font-size:0.72rem;color:var(--gold);
  letter-spacing:0.12em;text-transform:uppercase;
  border-bottom:1px solid var(--border2);border-top:1px solid var(--border2);
  background:var(--bg);position:sticky;top:0;z-index:5;
  cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:background 0.15s;
}
.history-group-header:active{background:rgba(201,168,76,0.05)}
.history-group-header .hgh-count{
  font-size:0.6rem;color:var(--text2);font-family:'Cinzel',serif;
  background:rgba(201,168,76,0.1);border:1px solid var(--border2);
  border-radius:10px;padding:0.1rem 0.4rem;margin-left:0.4rem;
}
.history-group-header .hgh-toggle{
  font-size:0.65rem;color:var(--text2);
  transition:transform 0.25s ease;
}
.history-group-header.collapsed .hgh-toggle{ transform:rotate(-90deg) }
.history-group-items{ overflow:hidden;transition:max-height 0.35s ease }
.history-group-items.collapsed{ max-height:0!important }

/* ═════════════════════════════════════════════════════════════════
   ✦ READING ENHANCEMENTS — chat-style oracle + better legibility ✦
   Appended after original styles so this section wins via cascade.
═════════════════════════════════════════════════════════════════ */

/* ── 1. Bigger, brighter, more readable reading body ─────────── */
#screen-reading .r-body{
  font-size:1.08rem;
  line-height:1.78;
  color:#F5EFE3;
  font-style:normal;        /* italic-as-default kills legibility — only on <em> */
  font-weight:400;
  letter-spacing:0.005em;
}
#screen-reading .r-body em,
#screen-reading .r-body i{
  color:#F0C060;
  font-style:italic;
  font-weight:500;
}
#screen-reading .r-body strong,
#screen-reading .r-body b{
  color:#F0C060;
  font-weight:600;
  font-style:normal;
  letter-spacing:0.01em;
}
#screen-reading .r-body p{ margin:0 0 0.85rem }
#screen-reading .r-body p:last-child{ margin-bottom:0 }

#screen-reading .r-title{
  font-size:0.95rem;
  letter-spacing:0.14em;
  margin-bottom:1.15rem;
  text-transform:uppercase;
}

#screen-reading .r-section{
  padding:1.5rem 1.2rem;
  margin:0.75rem 0.85rem;
  width:calc(100% - 1.7rem);
  border-left-width:3px;
  border-radius:0 14px 14px 0;
  box-shadow:0 6px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Pull-quote: any <blockquote> inside .r-body */
#screen-reading .r-body blockquote{
  margin:1.2rem -0.25rem;
  padding:1.1rem 1.2rem 1rem 1.4rem;
  background:linear-gradient(135deg,rgba(217,140,122,0.08),rgba(201,168,76,0.04));
  border-left:3px solid #C9A84C;
  border-radius:0 12px 12px 0;
  position:relative;
  font-style:italic;
  font-size:1.12rem;
  line-height:1.55;
  color:#F5EFE3;
}
#screen-reading .r-body blockquote::before{
  content:'\201C';
  position:absolute;top:-4px;left:8px;
  font-family:Georgia,serif;font-size:2.4rem;color:rgba(217,140,122,0.45);line-height:1;
}
#screen-reading .r-body blockquote cite{
  display:block;margin-top:0.5rem;
  font-family:'Cinzel',serif;font-style:normal;
  font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;
  color:#A88E3C;
}

/* Section reveal: keep the existing animation but smoother */
#screen-reading .r-section{
  animation-duration:0.7s;
}

/* ── 2. Reading head — clearer hierarchy, bigger title ────────── */
#screen-reading .reading-head h2{
  font-size:1.5rem;
  letter-spacing:0.14em;
  color:#F0C060;
}
#screen-reading .reading-sub{
  font-size:0.85rem;
  line-height:1.5;
  color:#E1CDA5;
  margin-top:0.7rem;
  font-style:italic;
}

/* ── 3. QA — chat-message treatment ──────────────────────────── */
#screen-reading .qa-wrap,
#screen-kundali .qa-wrap,
#screen-family .qa-wrap{
  padding:1.5rem 1rem 1.2rem;
  border-top:1px solid rgba(201,168,76,0.12);
  position:relative;
}
#screen-reading .qa-heading,
#screen-kundali .qa-heading,
#screen-family .qa-heading{
  font-family:'Cinzel',serif;
  font-size:0.78rem;
  letter-spacing:0.18em;
  color:#C9A84C;
  margin-bottom:1rem;
  text-transform:uppercase;
}
#screen-reading .qa-heading::before,
#screen-reading .qa-heading::after,
#screen-kundali .qa-heading::before,
#screen-kundali .qa-heading::after,
#screen-family .qa-heading::before,
#screen-family .qa-heading::after{
  content:' ✦ ';color:rgba(201,168,76,0.5);
}

/* The message thread */
#screen-reading #qa-list,
#screen-kundali #km-qa-list,
#screen-family #family-qa-list{
  margin-top:1rem;
  margin-bottom:1.2rem;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
  padding:0 0.25rem;
}

/* Each QA card becomes a 2-message exchange (question above, answer below) */
#screen-reading .qa-card,
#screen-kundali .qa-card,
#screen-family .qa-card{
  background:transparent !important;
  border:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
  box-shadow:none !important;
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  position:relative;
}

/* The user's question — right-aligned bubble */
#screen-reading .qa-card .qa-q,
#screen-kundali .qa-card .qa-q,
#screen-family .qa-card .qa-q{
  align-self:flex-end;
  max-width:82%;
  margin-bottom:0;padding:0.9rem 1.1rem !important;
  background:linear-gradient(135deg,rgba(201,168,76,0.32),rgba(201,168,76,0.2));
  border:1px solid rgba(201,168,76,0.6);
  border-radius:18px 18px 4px 18px;
  font-family:'Cormorant Garamond',serif !important;
  font-style:italic;
  font-size:1.05rem !important;
  font-weight:500;
  line-height:1.45;
  letter-spacing:0 !important;
  color:#FFF5DC !important;
  text-transform:none !important;
  text-align:left;
  box-shadow:0 4px 16px rgba(201,168,76,0.2),0 2px 8px rgba(0,0,0,0.3);
}
#screen-reading .qa-card .qa-q::before,
#screen-kundali .qa-card .qa-q::before,
#screen-family .qa-card .qa-q::before{
  content:'You ';
  font-family:'Cinzel',serif;font-style:normal;
  font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(201,168,76,0.7);
  display:block;margin-bottom:0.25rem;
}

/* The oracle's answer — left-aligned bubble, with sender label */
#screen-reading .qa-card .qa-a,
#screen-kundali .qa-card .qa-a,
#screen-family .qa-card .qa-a{
  align-self:flex-start;
  max-width:92%;
  padding:0.95rem 1.15rem 1rem;
  background:linear-gradient(135deg,rgba(201,168,76,0.06),rgba(255,255,255,0.03));
  border:1px solid rgba(201,168,76,0.2);
  border-radius:18px 18px 18px 4px;
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem !important;
  line-height:1.72 !important;
  color:#F5EFE3 !important;
  font-style:normal;
  font-weight:400;
  position:relative;
  margin-top:0.4rem;
  box-shadow:0 6px 22px rgba(0,0,0,0.3);
}
#screen-reading .qa-card .qa-a::before,
#screen-kundali .qa-card .qa-a::before,
#screen-family .qa-card .qa-a::before{
  content:'✦ Rekhai · The Oracle';
  display:block;
  font-family:'Cinzel',serif;
  font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;
  color:#C9A84C;
  margin-bottom:0.55rem;
  padding-bottom:0.5rem;
  border-bottom:1px solid rgba(201,168,76,0.15);
}
#screen-reading .qa-card .qa-a em,
#screen-reading .qa-card .qa-a i,
#screen-kundali .qa-card .qa-a em,
#screen-kundali .qa-card .qa-a i,
#screen-family .qa-card .qa-a em,
#screen-family .qa-card .qa-a i{
  color:#F0C060;font-style:italic;font-weight:500;
}
#screen-reading .qa-card .qa-a strong,
#screen-kundali .qa-card .qa-a strong,
#screen-family .qa-card .qa-a strong{
  color:#F0C060;font-weight:600;
}

/* Oracle "thinking" — three pulsing dots, left-aligned like a typing indicator */
#screen-reading .qa-card .qa-spin{
  align-self:flex-start;
  padding:0.95rem 1.2rem;
  background:linear-gradient(135deg,rgba(201,168,76,0.06),rgba(255,255,255,0.03));
  border:1px solid rgba(201,168,76,0.2);
  border-radius:18px 18px 18px 4px;
  display:flex;align-items:center;gap:0.5rem;
  font-family:'Cinzel',serif;
  font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;
  color:#C9A84C;
  font-style:normal;
  margin-top:0.4rem;
}
#screen-reading .qa-card .qa-spin::after{
  content:'';
  width:24px;height:6px;
  background:
    radial-gradient(circle at 4px 3px, #C9A84C 1.6px, transparent 2px),
    radial-gradient(circle at 12px 3px, #C9A84C 1.6px, transparent 2px),
    radial-gradient(circle at 20px 3px, #C9A84C 1.6px, transparent 2px);
  animation:qaThink 1.4s ease-in-out infinite;
}
@keyframes qaThink{
  0%,80%,100%{ opacity:0.3 }
  40%{ opacity:1 }
}

/* Share + copy button row — bottom-right of answer bubble, no boxes */
#screen-reading .qa-card .qa-btn-row,
#screen-reading-viewer .qa-card .qa-btn-row{
  display:flex;gap:0.6rem;justify-content:flex-end;align-items:center;
  margin-top:0.6rem;
}
#screen-reading .qa-card .qa-share-btn,
#screen-reading-viewer .qa-card .qa-share-btn,
#screen-reading .qa-card .r-copy-btn,
#screen-reading-viewer .qa-card .r-copy-btn{
  position:static;
  background:none;border:none;border-radius:0;
  color:rgba(201,168,76,0.45);
  padding:0;font-size:0;line-height:0;
  cursor:pointer;transition:color 0.2s,opacity 0.2s;
  opacity:0.7;
}
#screen-reading .qa-card .qa-share-btn:hover,
#screen-reading-viewer .qa-card .qa-share-btn:hover,
#screen-reading .qa-card .r-copy-btn:hover,
#screen-reading-viewer .qa-card .r-copy-btn:hover{ color:var(--gold);opacity:1; }
#screen-reading .qa-card .qa-share-btn svg,
#screen-reading-viewer .qa-card .qa-share-btn svg,
#screen-reading .qa-card .r-copy-btn svg,
#screen-reading-viewer .qa-card .r-copy-btn svg{ display:block; }

/* ── 4. The ask bar — pill-shape, chat-input feel ─────────────── */
#screen-reading .qa-row,
#screen-family .qa-row,
#screen-kundali .qa-row{
  gap:0.55rem;
  align-items:center;
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(201,168,76,0.22);
  border-radius:999px;
  padding:0.4rem 0.45rem 0.4rem 1.1rem;
  box-shadow:0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}
#screen-reading #qa-input,
#screen-kundali #km-qa-input,
#screen-family #family-qa-input{
  flex:1;
  background:transparent !important;
  border:none !important;
  padding:0.7rem 0 !important;
  font-size:1rem !important;
  border-radius:0 !important;
  min-height:auto;
  color:#F5EFE3 !important;
}
#screen-reading #qa-input::placeholder,
#screen-kundali #km-qa-input::placeholder,
#screen-family #family-qa-input::placeholder{
  color:rgba(225,205,165,0.5);
  font-style:italic;
}
#screen-reading .qa-send,
#screen-family .qa-send,
#screen-kundali .qa-send{
  background:linear-gradient(135deg,#E8B84B,#C9A84C) !important;
  border-radius:999px !important;
  padding:0.7rem 1.05rem !important;
  font-family:'Cinzel',serif !important;
  font-size:0.78rem !important;
  font-weight:700;
  letter-spacing:0.06em !important;
  color:#07070F !important;
  box-shadow:0 3px 10px rgba(201,168,76,0.4), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  min-width:54px;
  display:flex;align-items:center;justify-content:center;gap:3px;
}

/* Chip suggestions row — bigger taps, prettier (consistent across all services) */
#screen-reading .qa-chips,
#screen-kundali .qa-chips,
#screen-family .qa-chips{
  gap:0.45rem;
  margin-bottom:1.1rem;
}
#screen-reading .qa-chip,
#screen-kundali .qa-chip,
#screen-family .qa-chip{
  font-size:0.78rem !important;
  letter-spacing:0.04em !important;
  padding:0.65rem 1.05rem !important;
  font-style:italic;
  font-family:'Cormorant Garamond',serif !important;
  text-transform:none !important;
  border-color:rgba(201,168,76,0.22) !important;
  color:#E1CDA5 !important;
  min-height:38px;
  border-radius:999px !important;
}
#screen-reading .qa-chip:active,
#screen-kundali .qa-chip:active,
#screen-family .qa-chip:active{
  background:rgba(201,168,76,0.16) !important;
  border-color:#C9A84C !important;
  color:#F0C060 !important;
}

/* ── 5. Collapsible reading sections — bigger touch + clearer ── */
#screen-reading .collapsible-title{
  font-size:0.84rem;
  letter-spacing:0.12em;
}
#screen-reading .collapsible-sub{
  font-size:0.72rem;
  color:#E1CDA5;
  margin-top:3px;
}
#screen-reading .collapsible-header{
  padding:1rem 1.15rem;
  min-height:60px;
}
#screen-reading .collapsible-icon{
  font-size:1.05rem;
}

/* ── 6. Chat-flow order — messages above input, like Messages.app ── */
#screen-reading .qa-wrap,
#screen-kundali .qa-wrap,
#screen-family .qa-wrap{
  display:flex;
  flex-direction:column;
}
#screen-reading .qa-heading{ order:1 }
#screen-reading #qa-chips-suggest{ order:2 }
#screen-reading #qa-list{ order:3; margin-top:0.5rem; margin-bottom:1.1rem }
#screen-reading .qa-row{ order:4 }
#screen-kundali .qa-heading{ order:1 }
#screen-kundali #km-qa-list{ order:2; margin-top:0.5rem; margin-bottom:1.1rem }
#screen-kundali .qa-row{ order:3 }
#screen-family .qa-heading{ order:1 }
#screen-family #family-qa-suggestions{ order:2 }
#screen-family #family-qa-list{ order:3; margin-top:0.5rem; margin-bottom:1.1rem }
#screen-family #family-credit-label{ order:4 }
#screen-family .qa-row{ order:5 }

/* ── 7. Suggestion chips — friendlier, hide once chat fills up ── */
#screen-reading #qa-chips-suggest{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  justify-content:center;
  margin-bottom:1.1rem;
  padding:0 0.25rem;
}
#screen-reading #qa-chips-suggest::before{
  content:'Try asking';
  width:100%;text-align:center;
  font-family:'Cinzel',serif;
  font-size:0.62rem;letter-spacing:0.24em;text-transform:uppercase;
  color:rgba(225,205,165,0.5);
  margin-bottom:0.4rem;
}
#screen-reading #qa-chips-suggest .qa-chip{
  font-family:'Cormorant Garamond',serif !important;
  font-style:italic;
  font-size:0.86rem !important;
  letter-spacing:0 !important;
  padding:0.55rem 0.95rem !important;
  border:1px solid rgba(201,168,76,0.22) !important;
  border-radius:999px !important;
  background:rgba(201,168,76,0.05) !important;
  color:#E1CDA5 !important;
  text-transform:none !important;
  min-height:36px;
  cursor:pointer;
  transition:all 0.2s;
}
#screen-reading #qa-chips-suggest .qa-chip:hover,
#screen-reading #qa-chips-suggest .qa-chip:active{
  background:rgba(201,168,76,0.16) !important;
  border-color:#C9A84C !important;
  color:#F0C060 !important;
  transform:translateY(-1px);
}

/* After the user has asked 2+ questions, collapse the chips so the chat dominates */
#screen-reading .qa-wrap:has(#qa-list .qa-card:nth-child(2)) #qa-chips-suggest{
  opacity:0.55;
  transform:scale(0.92);
  transform-origin:center top;
  max-height:120px;overflow:hidden;
  margin-bottom:0.6rem;
}
#screen-reading .qa-wrap:has(#qa-list .qa-card:nth-child(2)) #qa-chips-suggest::before{
  content:'More to ask ↓';
  opacity:0.6;
}
#screen-reading .qa-wrap:has(#qa-list .qa-card:nth-child(2)) #qa-chips-suggest:hover{
  opacity:1;transform:scale(1);
}

/* ═══════════════════════════════════════════════════════════════════
   ✦ FULL UI/UX ENHANCEMENT — all screens · iOS + Android optimized ✦
═══════════════════════════════════════════════════════════════════ */

/* ── A. CROSS-PLATFORM BASELINE ───────────────────────────────── */

/* Inputs ≥ 16px so iOS doesn't auto-zoom on focus (Android also benefits) */
input,select,textarea{
  font-size:16px !important;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}

/* Tap targets: 48px covers both iOS HIG (44) and Material (48) */
button,.btn-gold,.btn-ghost,a[role="button"]{
  min-height:48px;
  touch-action:manipulation;
  /* removes Android 300ms tap delay; harmless on iOS */
}

/* Lightened secondary text — fixes legibility on dark bg */
:root{
  --text2:#E1CDA5;            /* was #C4A882 — lifted for AA contrast */
  --muted:#A89272;
}

/* Scroll containment on every scrollable container */
.screen,.modal-card,[style*="overflow"]{
  overscroll-behavior:contain;
}

/* Better focus ring for keyboard users (Android external kb / iPad) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.lang-btn:focus-visible,
.reading-type-card:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* No long-press selection on chrome elements */
.intro-sym,.tagline,.rtc-name,.rtc-sub,.r-title,
.collapsible-title,.collapsible-sub,
.lang-btn,.profile-label,.qa-heading,.profile-gender-btn{
  -webkit-user-select:none;user-select:none;
}

/* Active state for touch (works on both platforms) */
.reading-type-card:active,
.hand-choice-btn:active,
.profile-gender-btn:active,
.collapsible-header:active{
  transform:scale(0.98);
  transition:transform 0.06s ease;
}

/* ── B. INTRO / HOME — bigger card text + clearer hierarchy ──── */

#screen-intro .logo{ font-size:3.6rem !important; margin-bottom:0.45rem }
#screen-intro .tagline{
  font-size:0.72rem !important; letter-spacing:0.28em;
  color:#E1CDA5 !important; margin-bottom:1.8rem;
}
#screen-intro .intro-body{
  font-size:1.18rem !important; line-height:1.7 !important;
  color:#E1CDA5 !important; max-width:300px;
  margin-bottom:2rem !important;
}
#screen-intro .lang-btn{
  font-size:0.82rem !important;
  padding:0.55rem 1.1rem !important;
  min-height:42px !important;
  letter-spacing:0.08em !important;
}
#screen-intro .lang-btn.active{
  background:rgba(201,168,76,0.18) !important;
  border-color:var(--gold) !important;
  color:var(--gold-light) !important;
  font-weight:500;
}

#screen-intro .reading-type-grid{ gap:0.85rem !important }
#screen-intro .reading-type-card{
  padding:1.3rem 0.9rem !important;
  min-height:148px;
  border-radius:14px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:0.5rem !important;
  text-align:center;
}
#screen-intro .rtc-icon{ font-size:2.1rem !important; margin-bottom:0.4rem }
#screen-intro .rtc-name{
  font-size:0.92rem !important;
  letter-spacing:0.12em !important;
  color:var(--gold-light) !important;
  -webkit-background-clip:initial;-webkit-text-fill-color:var(--gold-light);
  background:none !important;
  font-weight:600;
}
#screen-intro .rtc-sub{
  font-size:0.86rem !important;
  line-height:1.45 !important;
  color:#E1CDA5 !important;
  font-style:italic;
  margin-top:0.15rem;
}
#screen-intro .intro-note{
  font-size:0.82rem !important;
  color:#A89272 !important;
  line-height:1.55;
  margin-top:1.6rem;
  max-width:300px;
  text-align:center;
}

/* ── C. LOGIN — bigger description text ──────────────────────── */
#screen-login .tagline{ font-size:0.72rem !important; letter-spacing:0.28em }
#screen-login .logo{ font-size:3.6rem !important }

/* ── D. PROFILE — grouped feel, bigger labels & inputs ───────── */

#screen-profile .profile-head h2,
#screen-profile-setup .profile-head h2{
  font-size:1.4rem !important; letter-spacing:0.14em;
  color:var(--gold-light) !important;
}
#screen-profile .profile-head p,
#screen-profile-setup .profile-head p{
  font-size:0.92rem !important; line-height:1.55;
  color:#E1CDA5 !important; margin-top:0.5rem;
  max-width:300px;
}

#screen-profile .profile-label,
#screen-profile-setup .profile-label{
  font-size:0.78rem !important;
  letter-spacing:0.16em !important;
  color:#E1CDA5 !important;
  margin-bottom:0.55rem;
  display:block;
  font-weight:500;
}
#screen-profile .profile-optional,
#screen-profile-setup .profile-optional{
  font-size:0.74rem !important;
  color:#A89272 !important;
  font-style:italic;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-family:'Cormorant Garamond',serif !important;
  font-weight:400 !important;
}

#screen-profile .profile-input,
#screen-profile-setup .profile-input,
#screen-profile .city-input,
#screen-profile-setup .city-input{
  padding:0.95rem 1rem !important;
  min-height:54px !important;
  font-size:1.02rem !important;
  border-radius:10px !important;
  background:rgba(0,0,0,0.35) !important;
  border:1px solid rgba(201,168,76,0.18) !important;
  color:var(--text) !important;
}
#screen-profile .profile-input:focus,
#screen-profile-setup .profile-input:focus{
  border-color:var(--gold) !important;
  box-shadow:0 0 0 3px rgba(201,168,76,0.14) !important;
  outline:none !important;
}

#screen-profile .profile-gender-row,
#screen-profile-setup .profile-gender-row{ gap:0.7rem !important }
#screen-profile .profile-gender-btn,
#screen-profile-setup .profile-gender-btn{
  padding:0.85rem 0.5rem !important;
  min-height:54px !important;
  font-size:0.92rem !important;
  letter-spacing:0.12em !important;
  border-radius:10px !important;
  border:1px solid rgba(201,168,76,0.18) !important;
}
#screen-profile .profile-gender-btn.active,
#screen-profile-setup .profile-gender-btn.active{
  background:rgba(201,168,76,0.14) !important;
  border-color:var(--gold) !important;
  color:var(--gold-light) !important;
  box-shadow:0 0 24px rgba(201,168,76,0.14) !important;
}

#screen-profile .profile-field,
#screen-profile-setup .profile-field{ margin-bottom:1.1rem }

#screen-profile .profile-note,
#screen-profile-setup .profile-note{
  font-size:0.85rem !important;
  line-height:1.55;
  color:#A89272 !important;
  margin-top:1rem;
  text-align:center;
}

/* ── E. HAND CHOICE — bigger, clearer ────────────────────────── */
#screen-hand{ gap:0 !important; padding-top:max(env(safe-area-inset-top),2.5rem) }
#screen-hand .intro-sym{ font-size:1.2rem !important; margin-bottom:1.2rem }
#screen-hand > p:first-of-type,
#screen-hand > p:nth-of-type(1){
  font-size:1.15rem !important;
  letter-spacing:0.14em !important;
  margin-bottom:0.7rem !important;
}
#screen-hand > p:nth-of-type(2){
  font-size:1rem !important;
  line-height:1.6 !important;
  color:#E1CDA5 !important;
  max-width:290px !important;
  margin-bottom:2.2rem !important;
}
#screen-hand .hand-choice-btn{
  padding:2rem 0.5rem !important;
  border-radius:14px !important;
  min-height:170px;
  gap:0.7rem !important;
}
#screen-hand .hand-choice-btn span:first-of-type{ font-size:0.95rem !important }
#screen-hand .hand-choice-btn span:nth-of-type(2){
  font-size:0.85rem !important; color:#E1CDA5 !important;
}

/* ── F. CAMERA — bigger guidance + clearer feedback ──────────── */
#screen-camera .cam-header h3{
  font-size:1.1rem !important;
  letter-spacing:0.14em !important;
  color:var(--gold-light) !important;
}
#screen-camera .cam-header p{
  font-size:0.92rem !important;
  line-height:1.5;
  color:#E1CDA5 !important;
  margin-top:0.45rem !important;
}
#screen-camera .cam-header p:nth-of-type(2){
  font-size:0.82rem !important;
  color:rgba(240,192,96,0.75) !important;
}
#screen-camera .btn-gold{
  font-size:0.95rem !important;
  letter-spacing:0.2em !important;
  padding:1.15rem 2.4rem !important;
  min-height:58px !important;
}
#screen-camera .lighting-bar-track{ height:8px !important }
#screen-camera .lighting-bar-label{
  font-size:0.78rem !important;
  letter-spacing:0.1em !important;
  color:#E1CDA5 !important;
  margin-top:0.45rem;
}

/* ── G. FACE READING — same as camera ────────────────────────── */
#screen-face .face-header h3{
  font-size:1.08rem !important;
  letter-spacing:0.12em !important;
}
#screen-face .face-header p{
  font-size:0.92rem !important; color:#E1CDA5 !important;
}

/* ── H. QUESTIONS (Oracle 5-step) — bigger options ───────────── */
#screen-questions .q-label{
  font-size:0.82rem !important;
  letter-spacing:0.22em !important;
  color:var(--gold-light) !important;
}
#screen-questions .q-text,
#screen-questions h2,
#screen-questions .q-question{
  font-size:1.45rem !important;
  line-height:1.4 !important;
  font-style:italic;
  color:var(--gold-light) !important;
  text-wrap:pretty;
}
#screen-questions .q-hint{
  font-size:1rem !important;
  line-height:1.55 !important;
  color:#E1CDA5 !important;
}
#screen-questions .q-opt,
#screen-questions .q-option{
  padding:1.1rem 1.1rem !important;
  min-height:74px !important;
  border-radius:12px !important;
  font-size:1rem !important;
}
#screen-questions .q-opt-label{ font-size:1.02rem !important; letter-spacing:0.06em }
#screen-questions .q-opt-sub{
  font-size:0.92rem !important;
  color:#E1CDA5 !important;
  font-style:italic;
}

/* ── I. PANCHANGAM — bigger numbers ──────────────────────────── */
#screen-panchang h2,
#screen-panchang .panchang-date{
  font-size:1.6rem !important;
  letter-spacing:0.08em !important;
  color:var(--gold-light) !important;
}
#screen-panchang .panchang-elem-name,
#screen-panchang .panchang-elem-label{
  font-size:0.78rem !important;
  letter-spacing:0.18em !important;
  color:var(--gold-light) !important;
}
#screen-panchang .panchang-elem-value,
#screen-panchang .panchang-elem-val{
  font-size:1.15rem !important;
  letter-spacing:0.04em !important;
  color:var(--text) !important;
  line-height:1.3;
}
#screen-panchang .panchang-elem-time,
#screen-panchang .panchang-elem-ends{
  font-size:0.92rem !important;
  color:#E1CDA5 !important;
  font-style:italic;
}

/* ── J. HISTORY (My Readings) — bigger cards, snippet legibility ── */

/* Header */
#screen-history .history-head{
  padding-top:max(env(safe-area-inset-top),2.6rem) !important;
  padding-bottom:1.4rem !important;
  background:radial-gradient(ellipse at 50% -10%, #1E1230 0%, transparent 70%);
}
#screen-history .history-head h2{
  font-size:1.5rem !important;
  letter-spacing:0.14em !important;
  color:var(--gold-light) !important;
}
#screen-history .history-head p{
  font-size:0.95rem !important;
  font-style:italic;
  color:#E1CDA5 !important;
  margin-top:0.55rem !important;
  letter-spacing:0.02em;
}
#screen-history .history-back{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--border2);
  border-radius:50%;
  font-size:1rem !important;
  color:var(--text2) !important;
}

/* Group headers — section titles like "This week" "Earlier" */
#screen-history .history-group{
  margin-bottom:0.4rem;
}
#screen-history .history-group-header{
  padding:1rem 1.4rem !important;
  font-family:'Cinzel',serif !important;
  font-size:0.84rem !important;
  letter-spacing:0.2em !important;
  text-transform:uppercase;
  color:var(--gold-light) !important;
  border-bottom:1px solid rgba(201,168,76,0.12) !important;
  min-height:54px;
}
#screen-history .history-group-header .hgh-count{
  font-size:0.7rem !important;
  letter-spacing:0.1em !important;
  background:rgba(201,168,76,0.16) !important;
  border:1px solid rgba(201,168,76,0.3) !important;
  border-radius:999px !important;
  padding:0.18rem 0.6rem !important;
  color:var(--gold-light) !important;
  margin-left:0.55rem !important;
}
#screen-history .history-group-header .hgh-toggle{
  font-size:0.78rem !important;
  color:var(--gold) !important;
  opacity:0.7;
}

/* Each reading card */
#screen-history .h-card{
  padding:1.2rem 1.3rem !important;
  gap:1.15rem !important;
  min-height:84px;
  border-bottom:1px solid rgba(201,168,76,0.08) !important;
  position:relative;
}
#screen-history .h-card:active{
  background:rgba(201,168,76,0.05) !important;
}
/* Icon — bigger, in a gold-bordered circle */
#screen-history .h-card-icon{
  width:42px !important;
  height:42px !important;
  font-size:1.1rem !important;
  margin-top:0 !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 50% 35%, rgba(201,168,76,0.18), rgba(201,168,76,0.04)) !important;
  border:1px solid rgba(201,168,76,0.32) !important;
  box-shadow:inset 0 1px 0 rgba(255,225,160,0.08), 0 0 16px rgba(201,168,76,0.12) !important;
  flex-shrink:0;
}
#screen-history .h-card-icon svg{ width:20px !important; height:20px !important }

/* Date — top label, gold */
#screen-history .h-card-date{
  font-size:0.78rem !important;
  letter-spacing:0.16em !important;
  color:var(--gold-light) !important;
  margin-bottom:0.35rem !important;
  font-weight:500;
  text-transform:uppercase;
}
/* Reading label — what kind of reading it was */
#screen-history .h-card-hand{
  font-size:0.95rem !important;
  font-style:italic;
  color:#E1CDA5 !important;
  margin-bottom:0.5rem !important;
  letter-spacing:0.01em;
  line-height:1.35;
}
/* Preview snippet — readable 2-line clamp */
#screen-history .h-card-preview{
  font-size:0.95rem !important;
  line-height:1.6 !important;
  color:var(--text) !important;
  font-style:normal !important;
  -webkit-line-clamp:2 !important;
  letter-spacing:0.005em;
}
#screen-history .h-card-q{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:0.97rem;
  color:#C9A84C;
  line-height:1.45;
  margin-top:0.35rem;
  background:rgba(201,168,76,0.08);
  border-left:2px solid rgba(201,168,76,0.45);
  padding:0.3rem 0.6rem;
  border-radius:0 4px 4px 0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
#screen-history .h-card-q-more{
  font-family:'Cinzel',serif;
  font-size:0.6rem;
  letter-spacing:0.08em;
  color:rgba(201,168,76,0.45);
  margin-top:0.18rem;
  padding-left:0.6rem;
}

/* Chevron at the right edge (added via ::after) */
#screen-history .h-card::after{
  content:'›';
  position:absolute;
  right:1.2rem;
  top:50%;
  transform:translateY(-50%);
  font-size:1.4rem;
  color:var(--gold-dark);
  opacity:0.6;
  font-family:Georgia, serif;
  pointer-events:none;
}
#screen-history .h-card-body{ padding-right:1rem }

/* Empty state — bigger, more inviting */
#screen-history .history-empty{
  padding:4rem 2rem !important;
  font-size:1.05rem !important;
  line-height:1.75 !important;
  color:#E1CDA5 !important;
  font-style:italic;
}
#screen-history .history-empty::before{
  content:'✦';
  display:block;
  font-size:2rem;
  color:var(--gold);
  margin-bottom:1rem;
  font-style:normal;
  opacity:0.7;
}

/* Periodic history cards (Daily/Weekly/etc. expand) */
#screen-history .periodic-history-card{
  margin-bottom:0.6rem !important;
  border-radius:10px !important;
}
#screen-history .periodic-history-card .phc-header{
  padding:1.1rem 1.2rem !important;
  min-height:60px;
  gap:0.9rem !important;
}
#screen-history .periodic-history-card .phc-icon{
  font-size:1.2rem !important;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,168,76,0.1);
  border:1px solid rgba(201,168,76,0.25);
  border-radius:50%;
  flex-shrink:0;
}
#screen-history .periodic-history-card .phc-label{
  font-size:0.88rem !important;
  letter-spacing:0.12em !important;
  color:var(--gold-light) !important;
}
#screen-history .periodic-history-card .phc-date{
  font-size:0.85rem !important;
  color:#E1CDA5 !important;
  font-style:italic;
}
#screen-history .periodic-history-card .phc-body{
  font-size:1rem !important;
  line-height:1.72 !important;
  font-style:normal !important;
  color:var(--text) !important;
  padding:0 1.2rem 0 1.2rem;
}
#screen-history .periodic-history-card.open .phc-body{
  padding:0.4rem 1.2rem 1.2rem !important;
}

/* ── K. GLOBAL — section dividers, buttons, modals ───────────── */
.btn-gold{
  font-size:0.9rem !important;
  letter-spacing:0.2em !important;
  padding:1.15rem 2.4rem !important;
  min-height:56px !important;
}
.btn-ghost{
  font-size:0.84rem !important;
  letter-spacing:0.16em !important;
  padding:1rem 1.8rem !important;
  min-height:50px !important;
}
.h-div{ height:1.5px !important }

/* Modal — bigger title text */
.modal-card h2,.modal-card h3{
  font-size:1.25rem !important;
  letter-spacing:0.12em !important;
}
.modal-card p,.modal-card li{
  font-size:1rem !important;
  line-height:1.65 !important;
  color:#E1CDA5;
}

/* ── L. PROFILE PROGRESS HINT (Today/Resume/etc.) — visible when text2 looks washed out */
.detect-card,.profile-form,.bc-form{
  /* slight bottom-padding boost for content above sticky CTAs */
  padding-bottom:1rem;
}

/* ── M. iOS safe-area for all sticky bottoms ────────────────── */
.cam-footer,.face-footer,.anl-footer,.reading-footer{
  padding-bottom:max(env(safe-area-inset-bottom),1.4rem) !important;
}

/* ── N. ANDROID DARK mode tap ripple feel (custom) ───────────── */
.reading-type-card,.hand-choice-btn,.profile-gender-btn,.lang-btn,
.qa-chip,.collapsible-header,.h-card,.periodic-history-card .phc-header{
  position:relative;overflow:hidden;
}
.reading-type-card::after,.hand-choice-btn::after,.profile-gender-btn::after,
.lang-btn::after,.qa-chip::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(240,192,96,0.18) 0%, transparent 60%);
  opacity:0;transition:opacity 0.3s;pointer-events:none;
}
.reading-type-card:active::after,.hand-choice-btn:active::after,
.profile-gender-btn:active::after,.lang-btn:active::after,
.qa-chip:active::after{ opacity:1 }

/* ── Reading Mode Toggle ─────────────────────────────────*/
.mode-toggle-pill{
  display:inline-flex;background:var(--surface);border:1px solid var(--border2);
  border-radius:20px;padding:2px;gap:2px;
}
.mode-btn{
  background:none;border:none;cursor:pointer;
  font-family:'Cinzel',serif;font-size:0.68rem;letter-spacing:0.06em;
  color:var(--text2);padding:0.3rem 0.85rem;border-radius:16px;
  transition:background 0.18s,color 0.18s;
}
.mode-btn.active{
  background:linear-gradient(135deg,#B8922E,#E8B84B);
  color:#07070F;font-weight:600;
}
.mode-toggle-sm .mode-btn{ font-size:0.6rem;padding:0.2rem 0.6rem }

/* ── Reading Viewer Screen ────────────────────────────── */
#screen-reading-viewer{
  display:flex;flex-direction:column;
  align-items:stretch;justify-content:flex-start;
  top:0;left:0;width:100%;height:100%;
  background:var(--bg);overflow:hidden;z-index:2;
}
.rv-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0.85rem 1rem 0.75rem;
  border-bottom:1px solid var(--border2);
  background:var(--bg);flex-shrink:0;
}
.rv-back-btn{
  display:flex;align-items:center;gap:0.45rem;
  background:none;border:none;color:var(--gold);
  font-family:'Cinzel',serif;font-size:0.74rem;letter-spacing:0.08em;
  cursor:pointer;padding:0.25rem 0;
}
.rv-nav{ display:flex;align-items:center;gap:0.5rem }
.rv-nav-btn{
  background:rgba(201,168,76,0.1);border:1px solid var(--border);
  color:var(--gold);font-size:1.1rem;line-height:1;
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s;
}
.rv-nav-btn:disabled{ opacity:0.3;cursor:not-allowed;pointer-events:none }
.rv-nav-btn:not(:disabled):active{ background:rgba(201,168,76,0.22) }
.rv-counter{
  font-family:'Cinzel',serif;font-size:0.7rem;color:var(--text2);
  min-width:3.2rem;text-align:center;
}
.rv-scroll{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:1.2rem 1rem 4rem;
}
.rv-reading-header{ margin-bottom:1rem }
.rv-type-chip{
  font-family:'Cinzel',serif;font-size:0.76rem;letter-spacing:0.09em;
  color:var(--gold-light);margin-bottom:0.2rem;
}
.rv-date{ font-size:0.72rem;color:var(--text2) }
.rv-info-row{
  display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1rem;
}
.rv-info-item{
  font-size:0.71rem;color:var(--text2);
  background:var(--surface);border:1px solid var(--border2);
  border-radius:4px;padding:0.2rem 0.55rem;
}
.rv-section-card{
  background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius);padding:1rem 1.1rem;
  margin-bottom:0.75rem;
}
.rv-section-title{
  font-family:'Cinzel',serif;font-size:0.71rem;color:var(--gold);
  letter-spacing:0.08em;margin-bottom:0.65rem;
}
.rv-section-sub{
  font-size:0.64rem;color:var(--text2);
  font-family:'Cormorant Garamond',serif;
  letter-spacing:0;margin-left:0.3rem;
}
.rv-member-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:0.35rem 0;border-bottom:1px solid var(--border2);
  font-size:0.78rem;
}
.rv-member-row:last-child{ border-bottom:none }
.rv-member-name{ color:var(--text) }
.rv-member-type{ color:var(--text2);font-size:0.68rem }
.rv-qa-divider{
  font-family:'Cinzel',serif;font-size:0.63rem;letter-spacing:0.14em;
  color:var(--text2);text-align:center;text-transform:uppercase;
  margin:1.1rem 0 0.8rem;
}
#screen-reading-viewer .r-body{
  font-size:1rem;line-height:1.82;color:var(--text);font-weight:300;
}
#screen-reading-viewer .r-body em,
#screen-reading-viewer .r-body i{ color:var(--gold-light);font-style:italic }
#screen-reading-viewer .r-body strong,
#screen-reading-viewer .r-body b{ color:var(--gold-light);font-weight:500 }
#screen-reading-viewer .r-title{
  font-family:'Cinzel',serif;font-size:0.78rem;color:var(--gold);
  letter-spacing:0.08em;margin:0.9rem 0 0.5rem;
}
#screen-reading-viewer .qa-card{
  display:flex;flex-direction:column;gap:0.7rem;
  background:transparent;border:none;padding:0;margin-bottom:0.9rem;
}
#screen-reading-viewer .qa-card .qa-q{
  align-self:flex-end;
  max-width:85%;
  padding:0.8rem 1rem !important;
  background:linear-gradient(135deg,rgba(201,168,76,0.32),rgba(201,168,76,0.2));
  border:1px solid rgba(201,168,76,0.6);
  border-radius:16px 16px 4px 16px;
  font-family:'Cormorant Garamond',serif !important;
  font-style:italic;font-size:0.97rem !important;font-weight:500;
  line-height:1.45;letter-spacing:0 !important;
  color:#FFF5DC !important;text-transform:none !important;
  text-align:left;box-shadow:0 4px 14px rgba(201,168,76,0.18),0 2px 8px rgba(0,0,0,0.25);
}
#screen-reading-viewer .qa-card .qa-q::before{
  content:'You ';
  font-family:'Cinzel',serif;font-style:normal;
  font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(201,168,76,0.75);display:block;margin-bottom:0.2rem;
}
#screen-reading-viewer .qa-card .qa-a{
  align-self:flex-start;
  max-width:92%;
  padding:0.85rem 1rem 0.85rem;
  background:linear-gradient(135deg,rgba(201,168,76,0.06),rgba(255,255,255,0.02));
  border:1px solid rgba(201,168,76,0.18);
  border-radius:16px 16px 16px 4px;
  font-size:0.97rem !important;line-height:1.72 !important;
  color:var(--text) !important;font-style:normal;font-weight:300;
  position:relative;
}
#screen-reading-viewer .qa-card .qa-a::before{
  content:'✦ Oracle';
  display:block;font-family:'Cinzel',serif;
  font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;
  color:#C9A84C;margin-bottom:0.45rem;padding-bottom:0.4rem;
  border-bottom:1px solid rgba(201,168,76,0.15);
}

/* ── Testimonial marquee ─────────────────────────────────── */
.testimonial-wrap{
  width:100%;overflow:hidden;
  margin-top:1.8rem;margin-bottom:0.2rem;
}
.testimonial-track{
  display:flex;gap:0.8rem;
  width:max-content;
  animation:marquee-rtl 32s linear infinite;
}
.testimonial-track:hover{ animation-play-state:paused }
.testimonial-card{
  min-width:230px;max-width:230px;
  background:rgba(201,168,76,0.05);
  border:1px solid rgba(201,168,76,0.15);
  border-radius:14px;padding:0.9rem 1rem;
  flex-shrink:0;
}
.testimonial-card p{
  font-family:'Cormorant Garamond',serif;
  font-size:0.88rem;line-height:1.6;
  color:var(--text);margin:0 0 0.6rem;font-style:italic;
}
.testimonial-card .t-name{
  font-size:0.65rem;color:var(--gold-light);opacity:0.8;
}
.testimonial-card .t-sign{
  font-size:0.6rem;color:var(--text2);margin-top:0.2rem;
}
@keyframes marquee-rtl{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}