:root{
  --bg-1:#FFF4D6;
  --bg-2:#FFE7C2;
  --coral:#FF8552;
  --coral-dark:#E8632F;
  --teal:#1B998B;
  --teal-dark:#127A6F;
  --gold:#FFC845;
  --gold-dark:#E8A616;
  --ink:#2E2A25;
  --ink-soft:#5A5245;
  --card:#FFFFFF;
  --card-border:#EFE0BF;
  --focus:#0B5FFF;
  --scale:1;
  --radius-lg:28px;
  --radius-md:18px;
  --brand-title-color:var(--teal-dark);
  --brand-subtitle-color:var(--coral-dark);
  --danger:#C4291C;
  --danger-dark:#971F14;
}
[data-theme="dark"]{
  --bg-1:#241D14;
  --bg-2:#2E2417;
  --card:#332A1D;
  --card-border:#4A3D28;
  --ink:#FAF3E4;
  --ink-soft:#D8CBB2;
  --gold:#FFCE5C;
  /* The base teal-dark/coral-dark are too close in brightness to this
     theme's near-black background to read comfortably, so the brand
     banner gets its own brighter dark-mode colors here. */
  --brand-title-color:#5EEAD4;
  --brand-subtitle-color:#FF9466;
  /* Base --danger is too dark to read comfortably on this theme's
     near-black background, same reasoning as the brand colors above. */
  --danger:#FF6B5B;
  --danger-dark:#E8503F;
}
*{box-sizing:border-box;}
html{font-size:calc(16px * var(--scale));}
body{
  margin:0;
  font-family:'Atkinson Hyperlegible', sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-1) 100%);
  min-height:100vh;
  transition:background .3s ease, color .3s ease;
  padding-bottom:5.5rem;
}
h1,h2,h3,.display{font-family:'Baloo 2', sans-serif;}
button{font-family:inherit;}
a{color:inherit;}

/* ---------- Skip / focus ---------- */
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;border-radius:0 0 10px 0;z-index:200;}
.skip-link:focus{left:0;}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px;}

/* ---------- Brand banner (very top of every page) ---------- */
.brand-banner{
  text-align:center;
  padding:1.5rem 1rem 1.15rem;
  background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border-bottom:2px solid var(--card-border);
}
.brand-banner-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:clamp(1.9rem, 5vw, 2.6rem);
  color:var(--brand-title-color);
  line-height:1.15;
}
.brand-banner-sub{
  font-family:'Baloo 2', sans-serif;
  font-weight:600;
  font-size:clamp(1.05rem, 2.5vw, 1.35rem);
  color:var(--brand-subtitle-color);
  margin-top:.15rem;
}

/* ---------- Top accessibility bar (shared, every view) ---------- */
.a11y-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.75rem 1.25rem;
  background:var(--card);
  border-bottom:2px solid var(--card-border);
  position:sticky;top:0;z-index:100;
}
.a11y-group{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.a11y-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--bg-1);
  border:2px solid var(--card-border);
  color:var(--ink);
  padding:.5rem .8rem;
  border-radius:999px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
}
.a11y-btn:hover{border-color:var(--coral);}
.home-btn{background:var(--teal);color:#fff;border-color:var(--teal-dark);}
.home-btn[disabled]{opacity:.55;cursor:default;}
.trust-note{display:flex;align-items:center;gap:.4rem;font-size:.95rem;color:var(--ink-soft);}
.account-email{font-size:.95rem;color:var(--ink-soft);font-weight:700;padding:.4rem .3rem;}
.plus-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  background:var(--gold);color:var(--ink);
  border:2px solid var(--gold-dark);
  border-radius:999px;
  padding:.35rem .7rem;
  font-size:.9rem;font-weight:800;
}

/* ---------- Sign-in screen ---------- */
.login-page{max-width:560px;margin:2.5rem auto 0;padding:0 1.5rem;}
.login-card{
  background:var(--card);border:2px solid var(--card-border);border-radius:var(--radius-lg);
  padding:2.75rem 2.25rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  box-shadow:0 4px 0 var(--card-border);
}
.login-badge{font-size:3rem;line-height:1;}
.login-card h1{margin:0;font-size:clamp(1.8rem, 5vw, 2.3rem);color:var(--teal-dark);}
.login-sub{margin:0;font-size:1.2rem;line-height:1.5;color:var(--ink-soft);max-width:42ch;}
.login-error{
  margin:0;font-size:1.1rem;font-weight:700;color:var(--coral-dark);
  background:var(--bg-1);border:2px solid var(--coral);border-radius:var(--radius-md);
  padding:.85rem 1.1rem;width:100%;
}
.login-form{display:flex;flex-direction:column;gap:.75rem;width:100%;margin-top:.5rem;}
.login-label{font-size:1.1rem;font-weight:700;text-align:left;}
.login-input{
  font-size:1.4rem;padding:1rem 1.2rem;
  border:2px solid var(--card-border);border-radius:var(--radius-md);
  background:var(--card);color:var(--ink);font-family:inherit;text-align:center;
  width:100%;
}
.login-input:focus{border-color:var(--teal);}
.login-code-input{letter-spacing:.4em;font-weight:700;}
.login-btn{
  background:var(--teal);color:#fff;border:none;border-radius:999px;
  padding:1.1rem 1.5rem;font-size:1.3rem;font-weight:700;cursor:pointer;
  box-shadow:0 6px 0 var(--teal-dark);margin-top:.25rem;
}
.login-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--teal-dark);}
.login-btn:disabled{opacity:.6;cursor:default;}
.login-links{display:flex;flex-direction:column;gap:.6rem;margin-top:.5rem;}
.login-link-btn{
  background:none;border:none;color:var(--ink-soft);text-decoration:underline;
  font-size:1.05rem;cursor:pointer;padding:.25rem;
}
.login-link-btn:disabled{opacity:.6;cursor:default;}

/* ---------- Hero (home view) ---------- */
.hero{
  max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem 1rem;
  display:grid;grid-template-columns:1.05fr 1fr;gap:2.5rem;align-items:center;
}
.hero-copy h1{
  font-size:clamp(2.1rem, 4vw, 3rem);
  line-height:1.08;margin:0 0 .75rem;
  color:var(--ink);
}
.hero-copy h1 .accent{color:var(--coral-dark);}
.hero-copy p{font-size:1.25rem;color:var(--ink-soft);margin:0 0 1.75rem;max-width:38ch;}
.voice-cta{
  display:inline-flex;align-items:center;gap:.9rem;
  background:var(--teal);color:#fff;
  border:none;border-radius:999px;
  padding:1.1rem 1.6rem;
  font-size:1.25rem;font-weight:700;
  cursor:pointer;
  box-shadow:0 8px 0 var(--teal-dark);
}
.voice-cta:active{transform:translateY(4px);box-shadow:0 4px 0 var(--teal-dark);}
.mic-pulse{
  width:2.6rem;height:2.6rem;border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35);}50%{box-shadow:0 0 0 12px rgba(255,255,255,0);}}
.voice-cta.listening{background:var(--coral-dark);}
.voice-cta.listening .mic-pulse{
  background:rgba(255,255,255,.35);
  animation:listening-pulse 1s ease-in-out infinite;
}
@keyframes listening-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.6);}50%{box-shadow:0 0 0 16px rgba(255,255,255,0);}}
.hear-again{
  display:inline-block;margin-top:.9rem;background:none;border:none;
  color:var(--ink-soft);text-decoration:underline;font-size:1rem;cursor:pointer;padding:.25rem;
}
.hero-art{display:flex;justify-content:center;}
.hero-art svg{width:100%;max-width:440px;height:auto;}
.hero-photo{
  width:100%;max-width:440px;height:auto;
  border-radius:var(--radius-lg, 20px);
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  object-fit:cover;
}

/* ---------- Title banner ---------- */
.title-banner{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; padding:1.25rem 1rem 0.25rem;
  font-family:'Baloo 2', sans-serif;
}
.title-banner .bold-part{
  font-weight:800; font-size:2rem; color:var(--teal);
}
.title-banner .reg-part{
  font-weight:500; font-size:2rem; color:var(--coral-dark);
}
@media (max-width:800px){
  .title-banner .bold-part, .title-banner .reg-part{font-size:1.6rem;}
}

/* ---------- Category grid (home view) ---------- */
.section-title{max-width:1100px;margin:2.5rem auto .25rem;padding:0 1.5rem;}
.section-title h2{font-size:1.7rem;margin:0 0 .25rem;}
.section-title p{margin:0;color:var(--ink-soft);font-size:1.1rem;}

.cat-grid{
  max-width:1100px;margin:1.25rem auto 0;padding:0 1.5rem;
  display:grid;grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:1.1rem;
}
.cat-card{
  background:var(--card);
  border:2px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:1.4rem 1.1rem;
  text-align:left;
  cursor:pointer;
  display:flex;flex-direction:column;gap:.6rem;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow:0 4px 0 var(--card-border);
}
.cat-card:hover{transform:translateY(-3px);}
.cat-card:active{transform:translateY(1px);box-shadow:0 1px 0 var(--card-border);}
.cat-icon{
  width:3.1rem;height:3.1rem;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
}
.cat-card h3{margin:0;font-size:1.25rem;color:var(--ink);}
.cat-card span.sub{color:var(--ink-soft);font-size:.98rem;}

/* ---------- Subscription banner (home view) ---------- */
.sub-banner{
  max-width:1100px;margin:2.75rem auto 0;padding:0 1.5rem;
}
.sub-inner{
  background:linear-gradient(120deg, var(--gold), var(--coral));
  border-radius:var(--radius-lg);
  padding:1.8rem 2rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem;
  color:#3A2200;
  box-shadow:0 6px 0 var(--gold-dark);
}
.sub-inner h3{margin:0 0 .35rem;font-size:1.5rem;}
.sub-inner p{margin:0;font-size:1.08rem;max-width:46ch;}
.sub-cta{
  background:#3A2200;color:#FFF4D6;border:none;border-radius:999px;
  padding:.9rem 1.5rem;font-size:1.1rem;font-weight:700;cursor:pointer;white-space:nowrap;
}

/* ---------- Category view (topic pages) ---------- */
.topic-header{
  max-width:1100px;margin:0 auto;padding:2rem 1.5rem 0;
  display:flex;align-items:center;gap:1rem;
}
.topic-icon{
  width:3.6rem;height:3.6rem;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;flex-shrink:0;
}
.topic-header h1{margin:0;font-size:2rem;}
.topic-header p{margin:.2rem 0 0;color:var(--ink-soft);font-size:1.1rem;}

.topic-layout{
  max-width:900px;margin:1.5rem auto 0;padding:0 1.5rem;
}
.chat-panel{
  background:var(--card);border:2px solid var(--card-border);border-radius:var(--radius-lg);
  min-height:360px;padding:1.5rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:1rem;
}
.chat-log{
  flex:1;min-height:260px;max-height:420px;overflow-y:auto;
  display:flex;flex-direction:column;gap:.75rem;padding:.25rem;
}
.chat-bubble{
  max-width:92%;padding:.85rem 1.1rem;border-radius:var(--radius-md);
  font-size:1.08rem;line-height:1.4;white-space:pre-wrap;
}
.chat-bubble-ai{
  align-self:flex-start;background:var(--bg-1);border:2px solid var(--card-border);
  border-bottom-left-radius:4px;
}
.chat-bubble-user{
  align-self:flex-end;background:var(--teal);color:#fff;
  border-bottom-right-radius:4px;
}
.chat-input-row{display:flex;flex-wrap:wrap;gap:.6rem;}
.chat-input-row input{
  flex:1 1 12rem;min-width:0;font-size:1.1rem;padding:.85rem 1rem;
  border:2px solid var(--card-border);border-radius:999px;
  background:var(--card);color:var(--ink);font-family:inherit;
}
.chat-input-row input:focus{border-color:var(--teal);}
.chat-input-row button{
  flex:0 0 auto;min-width:5.5rem;
  background:var(--coral);color:#fff;border:none;border-radius:999px;
  padding:.85rem 1.5rem;font-size:1.1rem;font-weight:700;cursor:pointer;
}
.chat-input-row button:disabled{opacity:.6;cursor:default;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.chat-tools{display:flex;flex-wrap:wrap;gap:.75rem;}
.chat-tools button{
  display:inline-flex;align-items:center;gap:.5rem;
  border:2px solid var(--card-border);background:var(--bg-1);color:var(--ink);
  padding:.7rem 1.1rem;border-radius:999px;font-size:1.05rem;font-weight:700;cursor:pointer;
}
.chat-tools .voice-cta{padding:.7rem 1.2rem;font-size:1.05rem;box-shadow:0 5px 0 var(--teal-dark);}
.chat-tools .voice-cta .mic-pulse{width:2rem;height:2rem;font-size:.9rem;}

.usage-hint{
  margin:0;font-size:.95rem;color:var(--ink-soft);
}

/* ---------- Upgrade prompts (freemium gating) ---------- */
.upgrade-bubble{
  max-width:92%!important;background:linear-gradient(120deg, var(--gold), var(--coral))!important;
  border:none!important;color:#3A2200;display:flex;flex-direction:column;gap:.75rem;align-items:flex-start;
}
.upgrade-message{
  margin:0;
  font-size:1.2rem;
  font-weight:700;
  line-height:1.5;
  color:#3A2200!important;
}
.upgrade-panel{
  max-width:640px;margin:1.5rem auto 0;
  background:linear-gradient(120deg, var(--gold), var(--coral));
  border-radius:var(--radius-lg);padding:1.8rem;color:#3A2200;
  display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
  box-shadow:0 6px 0 var(--gold-dark);
}
.upgrade-cta{
  background:#3A2200;color:#FFF4D6;border:none;border-radius:999px;
  padding:.85rem 1.4rem;font-size:1.05rem;font-weight:700;cursor:pointer;
}

/* ---------- Subscribe page (placeholder — no real payment yet) ---------- */
.subscribe-page{
  max-width:640px;margin:2rem auto 0;padding:0 1.5rem;
}
.subscribe-card{
  background:var(--card);border:2px solid var(--card-border);border-radius:var(--radius-lg);
  padding:2.5rem 2rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  box-shadow:0 4px 0 var(--card-border);
}
.subscribe-badge{
  font-size:2.8rem;line-height:1;
}
.subscribe-card h1{
  margin:0;font-size:clamp(1.9rem, 5vw, 2.4rem);color:var(--teal-dark);
}
.subscribe-tagline{
  margin:0;font-size:1.2rem;color:var(--ink-soft);
}
.benefit-list{
  list-style:none;margin:.25rem 0 0;padding:0;text-align:left;width:100%;
  display:flex;flex-direction:column;gap:.85rem;
}
.benefit-list li{
  font-size:1.15rem;line-height:1.5;
}
.coming-soon-note{
  width:100%;
  background:var(--bg-1);border:2px solid var(--gold-dark);border-radius:var(--radius-md);
  padding:1.1rem 1.3rem;font-size:1.1rem;font-weight:700;color:var(--ink);
}
.subscribe-cta-btn{
  width:100%;background:linear-gradient(120deg, var(--gold), var(--coral));color:#3A2200;
  border:none;border-radius:999px;
  padding:1.1rem 2rem;font-size:1.25rem;font-weight:700;cursor:pointer;
  box-shadow:0 6px 0 var(--gold-dark);
}
.subscribe-cta-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--gold-dark);}
.subscribe-cta-btn:disabled{opacity:.65;cursor:default;transform:none;box-shadow:0 6px 0 var(--gold-dark);}
.subscribe-back-btn{
  background:var(--teal);color:#fff;border:none;border-radius:999px;
  padding:1.1rem 2rem;font-size:1.25rem;font-weight:700;cursor:pointer;
  box-shadow:0 6px 0 var(--teal-dark);margin-top:.5rem;
}
.subscribe-back-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--teal-dark);}
.danger-zone{
  width:100%;max-width:520px;margin:2rem auto 0;
  background:var(--card);border:2px solid var(--danger);border-radius:var(--radius-md);
  padding:1.5rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
}
.danger-zone h2{margin:0;font-size:1.3rem;color:var(--danger-dark);}
.danger-zone p{margin:0;font-size:1rem;color:var(--ink-soft);}
.delete-account-btn{
  background:var(--danger);color:#fff;border:none;border-radius:999px;
  padding:.9rem 1.8rem;font-size:1.1rem;font-weight:700;cursor:pointer;
  box-shadow:0 6px 0 var(--danger-dark);
}
.delete-account-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--danger-dark);}
.delete-account-btn:disabled{opacity:.65;cursor:default;transform:none;box-shadow:0 6px 0 var(--danger-dark);}

/* ---------- Chat history (Senior Solutions Plus) ---------- */
.history-list{
  max-width:900px;margin:1.5rem auto 0;padding:0 1.5rem;
  display:flex;flex-direction:column;gap:.9rem;
}
.history-item{
  background:var(--card);border:2px solid var(--card-border);border-radius:var(--radius-md);
  padding:1.1rem 1.3rem;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:.25rem;
  font-family:inherit;color:var(--ink);
}
.history-item:hover{border-color:var(--teal);}
.history-item strong{font-family:'Baloo 2',sans-serif;font-size:1.1rem;}
.history-date{color:var(--ink-soft);font-size:.92rem;}
.history-preview{color:var(--ink-soft);font-size:1rem;}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:center;}
  .hero-copy p{margin-left:auto;margin-right:auto;}
  .hero-art{order:-1;}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:5.5rem;transform:translate(-50%,20px);
  background:var(--ink);color:var(--bg-1);padding:.9rem 1.3rem;border-radius:14px;
  font-size:1.05rem;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
  max-width:88vw;text-align:center;z-index:150;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------- Disclaimer footer (shared, every view) ---------- */
.disclaimer{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--ink);color:var(--bg-1);
  text-align:center;font-size:.75rem;line-height:1.2;
  padding:.3rem .75rem;z-index:120;
}
.disclaimer strong{color:var(--gold);}