@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap');

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

:root{
  --bg:#0a0906;
  --surface:#131009;
  --card:#181410;
  --card-hover:#1e1a13;
  --border:#252018;
  --border-l:#2e2820;
  --gold:#c9a96e;

  /* Tradition colors */
  --trad-ayurveda:#b07d4a;
  --trad-tcm:#7a5c8a;
  --trad-western:#4a7a5c;
  --trad-indigenous:#8a6a3a;
  --trad-european:#4a6a8a;
  --trad-african:#8a4a3a;
  --trad-south-american:#5a7a3a;
  --trad-pacific:#3a7a8a;
  --trad-other:#6a6a6a;
  --gold-l:#e0c48a;
  --gold-d:#8a7248;
  --gold-faint:rgba(201,169,110,0.06);
  --text:#e8e0d4;
  --text-m:#7a7268;
  --text-s:#5a554e;
  --caution-low:#4a7c6f;
  --caution-mod:#b8975a;
  --caution-hi:#8a4a4a;
  --font-display:'Cinzel',Georgia,serif;
  --font-body:'Crimson Text','Palatino Linotype',Palatino,Georgia,serif;
  --font-ui:system-ui,-apple-system,sans-serif;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  font-size:17px;
  line-height:1.6;
}

/* Subtle grain texture overlay */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;opacity:0.5;
}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--border-l);border-radius:3px}

/* ── TOAST ── */
#cma-toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(12px);
  background:var(--card);border:1px solid var(--border-l);
  color:var(--text);
  font-family:var(--font-display);font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;
  padding:10px 20px;border-radius:20px;
  opacity:0;transition:opacity 0.25s,transform 0.25s;
  pointer-events:none;z-index:9999;white-space:nowrap;
}
#cma-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── HEADER ── */
.site-header{
  text-align:center;
  padding:0 0 0;
  position:relative;
}
.header-top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.header-top-spacer{flex:1}
.logo-wrap{
  text-align:center;
  padding:20px 24px 4px;
  display:inline-block;
}
.logo-wrap img{
  max-width:200px;
  width:100%;
  height:auto;
  display:inline-block;
  /* The logo is gold-on-black — drop the black bg so it floats on our dark bg */
  mix-blend-mode:lighten;
}
/* ── AUTH UI ── */
.auth-header{position:relative}
.auth-btn{
  background:var(--gold);
  border:none;
  color:#0a0906;
  padding:8px 18px;
  border-radius:16px;
  font-family:var(--font-display);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  transition:background 0.2s;
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.auth-btn:hover{background:var(--gold-l)}
.user-menu{
  position:absolute;top:calc(100% + 8px);left:0;
  background:var(--surface);
  border:1px solid var(--border-l);
  border-radius:10px;
  padding:12px;
  min-width:180px;
  z-index:1000;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.user-menu-email{
  font-size:0.8rem;color:var(--text-m);
  font-family:var(--font-body);font-style:italic;
  margin-bottom:10px;padding-bottom:10px;
  border-bottom:1px solid var(--border);
  word-break:break-all;
}
.user-menu-btn{
  width:100%;padding:8px 0;
  background:none;border:1px solid var(--border-l);
  color:var(--text-m);border-radius:6px;
  font-family:var(--font-display);font-size:0.62rem;
  letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;transition:all 0.2s;
}
.user-menu-btn:hover{border-color:var(--gold-d);color:var(--gold)}

/* Login modal */
.login-modal-inner{max-width:440px}
.login-email-input{
  width:100%;padding:13px 16px;
  background:var(--card);border:1px solid var(--border-l);
  border-radius:6px;color:var(--text);
  font-family:var(--font-body);font-size:1rem;
  outline:none;transition:border-color 0.2s;
  margin-bottom:12px;display:block;
}
.login-email-input:focus{border-color:var(--gold-d)}
.login-email-input::placeholder{color:var(--text-s);font-style:italic}
.login-submit-btn{width:100%;padding:13px;font-size:0.72rem;letter-spacing:0.1em}
.login-note{
  margin-top:14px;font-size:0.82rem;
  color:var(--text-s);font-style:italic;
  line-height:1.6;font-family:var(--font-body);
  text-align:center;
}
.login-code-input{
  font-size:1.8rem !important;
  letter-spacing:0.4em;
  text-align:center;
  font-family:var(--font-display) !important;
  color:var(--gold) !important;
}
.login-back-btn{
  display:block;width:100%;margin-top:12px;
  background:none;border:none;
  color:var(--text-s);font-family:var(--font-body);
  font-size:0.85rem;font-style:italic;
  cursor:pointer;text-align:center;
  transition:color 0.2s;
}
.login-back-btn:hover{color:var(--text)}

/* Share app button */
.share-app-btn{
  background:transparent;
  border:1px solid var(--gold-d);
  color:var(--gold);
  padding:8px 18px;
  border-radius:16px;
  font-family:var(--font-display);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s;
}
.share-app-btn:hover{background:rgba(201,169,110,0.1);border-color:var(--gold)}

.logo-fallback{text-align:center}
.logo-fallback-text{
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--gold);
  letter-spacing:0.12em;
}

/* Decorative rule under logo */
.header-rule{
  display:flex;align-items:center;gap:12px;
  max-width:480px;margin:0 auto 4px;
  color:var(--gold-d);
}
.header-rule::before,.header-rule::after{
  content:'';flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-d),transparent);
  opacity:0.4;
}
.header-rule span{
  font-family:var(--font-body);
  font-size:0.85rem;
  letter-spacing:0.08em;
  color:var(--gold-d);
  font-style:italic;
  white-space:nowrap;
}

/* ── NAVIGATION ── */
.tab-bar{
  display:flex;gap:0;margin:20px 24px 0;
  border-bottom:1px solid var(--border);
}
.tab-btn{
  padding:11px 26px;background:none;border:none;
  color:var(--text);
  font-family:var(--font-display);
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;transition:color 0.2s;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  position:relative;
}
.tab-btn:hover{color:var(--gold)}
.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold)}

/* ── TAB PANELS ── */
.tab-panel{display:none;padding:32px 28px;min-height:60vh;position:relative;z-index:1}
.tab-panel.active{display:block}

/* ── COMPENDIUM HERO ── */
.compendium-hero{
  text-align:center;
  padding:44px 24px 40px;
  margin-bottom:32px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.compendium-hero::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,169,110,0.06) 0%,transparent 70%);
  pointer-events:none;
}
.hero-eyebrow{
  font-family:var(--font-display);
  font-size:0.62rem;
  letter-spacing:0.22em;
  color:var(--gold-d);
  text-transform:uppercase;
  margin-bottom:16px;
}
.hero-title{
  font-family:var(--font-display);
  font-size:2rem;
  color:var(--gold);
  font-weight:400;
  letter-spacing:0.06em;
  margin-bottom:16px;
  line-height:1.2;
}
.hero-sub{
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--text-m);
  line-height:1.75;
  max-width:600px;
  margin:0 auto 24px;
  font-style:italic;
}
.hero-cta{
  display:inline-block;
  padding:11px 28px;
  background:transparent;
  border:1px solid var(--gold-d);
  color:var(--gold);
  font-family:var(--font-display);
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border-radius:6px;
  cursor:pointer;
  transition:background 0.2s,border-color 0.2s;
}
.hero-cta:hover{background:rgba(201,169,110,0.08);border-color:var(--gold)}

/* ── HERO CHAT PREVIEW ── */
.hero-chat-preview{
  max-width:560px;margin:28px auto 0;
  text-align:left;
  background:var(--card);
  border:1px solid var(--border-l);
  border-radius:12px;
  padding:18px 20px;
}
.hero-chat-label{
  font-family:var(--font-display);
  font-size:0.6rem;
  letter-spacing:0.18em;
  color:var(--gold-d);
  text-transform:uppercase;
  margin-bottom:14px;
}
.hero-msg{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:12px;
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.hero-msg-user{flex-direction:row-reverse}
.hero-msg-av{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.bot-av{background:var(--surface);border:1px solid var(--border-l)}
.user-av{
  background:rgba(201,169,110,0.12);border:1px solid var(--gold-d);
  font-size:0.7rem;color:var(--gold);
}
.hero-msg-bubble{
  max-width:82%;padding:10px 14px;border-radius:10px;
  font-size:0.88rem;line-height:1.65;
  font-family:var(--font-body);
}
.hero-msg-user .hero-msg-bubble{
  background:rgba(201,169,110,0.08);
  border:1px solid rgba(201,169,110,0.18);
  color:var(--text);
}
.hero-msg-bot .hero-msg-bubble{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-m);
}
.hero-msg-bot .hero-msg-bubble em{color:var(--gold);font-style:normal;font-weight:600}
.hero-chat-try{
  display:block;width:100%;margin-top:14px;
  padding:9px 0;
  background:transparent;
  border:1px solid var(--border-l);
  border-radius:6px;
  color:var(--gold);
  font-family:var(--font-display);
  font-size:0.65rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  text-align:center;
  transition:background 0.2s,border-color 0.2s;
}
.hero-chat-try:hover{background:rgba(201,169,110,0.08);border-color:var(--gold-d)}

/* ── CHAT / CONSULT ── */
#chat-welcome{
  text-align:center;
  padding:40px 20px 32px;
  border-bottom:1px solid var(--border);
  margin-bottom:28px;
  position:relative;
}
#chat-welcome::before{
  content:'✦';
  display:block;
  font-size:1rem;
  color:var(--gold-d);
  margin-bottom:12px;
  letter-spacing:0.3em;
}
#chat-welcome h2{
  font-family:var(--font-display);
  font-size:1.35rem;
  color:var(--gold);
  margin-bottom:10px;
  font-weight:400;
  letter-spacing:0.08em;
}
#chat-welcome p{
  color:var(--text-m);
  font-size:1rem;
  font-style:italic;
  line-height:1.7;
  max-width:520px;
  margin:0 auto;
}

.chat-msgs{max-height:440px;overflow-y:auto;margin-bottom:20px}
.msg{display:flex;gap:12px;margin-bottom:18px;animation:fadeIn 0.3s ease}
.msg.user{flex-direction:row-reverse}
.msg-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:0.95rem;
}
.msg.bot .msg-avatar{background:var(--surface);border:1px solid var(--border-l);color:var(--gold)}
.msg-avatar-bot{display:flex;align-items:center;justify-content:center}
.msg.user .msg-avatar{background:rgba(201,169,110,0.12);border:1px solid var(--gold-d);color:var(--gold)}
.msg-bubble{
  max-width:70%;padding:14px 18px;border-radius:10px;
  font-size:1rem;line-height:1.7;
  font-family:var(--font-body);
}
.msg-bubble-wrap{display:flex;flex-direction:column;align-items:flex-start;max-width:70%;gap:4px}
.msg.bot .msg-bubble{background:var(--card);border:1px solid var(--border-l);color:var(--text)}
.msg-copy{
  background:none;border:none;
  color:var(--text-s);
  font-size:0.8rem;cursor:pointer;
  padding:2px 6px;border-radius:4px;
  opacity:0;transition:opacity 0.2s,color 0.2s;
  align-self:flex-end;
  font-family:var(--font-ui);
}
.msg:hover .msg-copy{opacity:1}
.msg-copy:hover{color:var(--gold)}
.msg.user .msg-bubble{background:rgba(201,169,110,0.08);border:1px solid rgba(201,169,110,0.2);color:var(--text)}
.msg-bubble p{margin-bottom:10px}.msg-bubble p:last-child{margin-bottom:0}
.msg-bubble strong{color:var(--gold);font-weight:600}
.msg-bubble em{color:var(--text-m)}

.typing-indicator{display:flex;gap:4px;align-items:center;padding:8px 0;color:var(--text-m);font-size:0.88rem}
.typing-indicator span{width:5px;height:5px;border-radius:50%;background:var(--text-m);animation:blink 1.4s infinite}
.typing-indicator span:nth-child(2){animation-delay:0.2s}
.typing-indicator span:nth-child(3){animation-delay:0.4s}
@keyframes blink{0%,60%,100%{transform:translateY(0);opacity:0.3}30%{transform:translateY(-5px);opacity:1}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.quick-prompts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.qp-btn{
  padding:6px 14px;
  background:var(--gold-faint);
  border:1px solid var(--border-l);
  color:var(--text-m);
  border-radius:20px;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:0.88rem;
  font-style:italic;
  transition:all 0.2s;
}
.qp-btn:hover{border-color:var(--gold-d);color:var(--gold);background:rgba(201,169,110,0.1)}

.chat-input-row{display:flex;gap:8px;margin-bottom:16px}
.chat-input-row input{
  flex:1;padding:13px 18px;
  background:var(--card);
  border:1px solid var(--border-l);
  border-radius:6px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  outline:none;
  transition:border-color 0.25s;
  min-width:0;
}
.chat-input-row input::placeholder{color:var(--text-s);font-style:italic}
.chat-input-row input:focus{border-color:var(--gold-d)}
.chat-input-row button{
  padding:10px 22px;
  background:var(--gold);
  color:#0a0906;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-family:var(--font-display);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  transition:background 0.2s;
  white-space:nowrap;
  flex-shrink:0;
}
.chat-input-row button:hover{background:var(--gold-l)}
.chat-input-row button:disabled{opacity:0.35;cursor:not-allowed}

/* ── COMPENDIUM ── */
.comp-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:24px;flex-wrap:wrap;gap:12px;
}
.comp-header h2{
  font-family:var(--font-display);
  font-size:1.1rem;
  color:var(--gold);
  font-weight:400;
  letter-spacing:0.1em;
}
.comp-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.comp-search{
  padding:8px 14px;
  background:var(--card);
  border:1px solid var(--border-l);
  border-radius:6px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:0.94rem;
  outline:none;
  width:220px;
  transition:border-color 0.2s;
}
.comp-search::placeholder{color:var(--text-s);font-style:italic}
.comp-search:focus{border-color:var(--gold-d)}
select.filter-select{
  padding:8px 10px;
  background:var(--card);
  border:1px solid var(--border-l);
  border-radius:6px;
  color:var(--text-m);
  font-family:var(--font-ui);
  font-size:0.8rem;
  outline:none;
  cursor:pointer;
  transition:border-color 0.2s;
}
select.filter-select:focus{border-color:var(--gold-d)}
select.filter-select option{background:var(--card);color:var(--text)}

.caution-legend{
  display:flex;gap:20px;margin-bottom:22px;
  font-size:0.78rem;color:var(--text-s);align-items:center;
  font-family:var(--font-ui);letter-spacing:0.04em;
}
.caution-legend span{display:flex;align-items:center;gap:5px}
.cd{width:8px;height:8px;border-radius:50%;display:inline-block}
.cd-l{background:var(--caution-low)}.cd-m{background:var(--caution-mod)}.cd-h{background:var(--caution-hi)}

/* ── HERB CARDS ── */
.herb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}

.herb-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px 18px 14px;
  cursor:pointer;
  transition:border-color 0.25s,transform 0.2s,background 0.2s,box-shadow 0.25s;
  position:relative;
  overflow:hidden;
}
/* Subtle left accent bar */
.herb-card::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--gold-d);
  opacity:0;
  transition:opacity 0.25s;
  border-radius:10px 0 0 10px;
}
.herb-card:hover{
  border-color:var(--border-l);
  background:var(--card-hover);
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
}
.herb-card:hover::before{opacity:0.7}

.hc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.hc-names{}
.hc-name{
  font-family:var(--font-display);
  font-size:0.92rem;
  color:var(--gold);
  font-weight:400;
  letter-spacing:0.04em;
  line-height:1.3;
}
.hc-latin{
  font-size:0.76rem;
  color:var(--text-s);
  font-style:italic;
  font-family:var(--font-body);
  margin-top:2px;
  display:block;
}

/* Tradition badge */
.hc-trad-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:0.65rem;
  font-family:var(--font-ui);
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:10px;
  border:1px solid;
  margin-top:2px;
  flex-shrink:0;
}
.trad-ayurveda{color:var(--trad-ayurveda);border-color:rgba(176,125,74,0.3);background:rgba(176,125,74,0.08)}
.trad-tcm{color:var(--trad-tcm);border-color:rgba(122,92,138,0.3);background:rgba(122,92,138,0.08)}
.trad-western{color:var(--trad-western);border-color:rgba(74,122,92,0.3);background:rgba(74,122,92,0.08)}
.trad-indigenous{color:var(--trad-indigenous);border-color:rgba(138,106,58,0.3);background:rgba(138,106,58,0.08)}
.trad-european{color:var(--trad-european);border-color:rgba(74,106,138,0.3);background:rgba(74,106,138,0.08)}
.trad-african{color:var(--trad-african);border-color:rgba(138,74,58,0.3);background:rgba(138,74,58,0.08)}
.trad-south-american{color:var(--trad-south-american);border-color:rgba(90,122,58,0.3);background:rgba(90,122,58,0.08)}
.trad-pacific{color:var(--trad-pacific);border-color:rgba(58,122,138,0.3);background:rgba(58,122,138,0.08)}
.trad-other{color:var(--trad-other);border-color:rgba(106,106,106,0.3);background:rgba(106,106,106,0.08)}
.trad-various{color:var(--gold-d);border-color:rgba(138,114,72,0.3);background:rgba(138,114,72,0.08)}

/* Category icon row */
.hc-category{
  display:flex;align-items:center;gap:6px;
  margin:8px 0 6px;
  font-size:0.75rem;
  font-family:var(--font-ui);
  color:var(--text-m);
  letter-spacing:0.04em;
}
.hc-cat-icon{font-size:0.9rem}

.hc-meta{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}
.hc-tag{
  font-size:0.65rem;
  padding:2px 8px;
  border-radius:10px;
  background:rgba(201,169,110,0.07);
  border:1px solid rgba(201,169,110,0.13);
  color:var(--gold-d);
  text-transform:capitalize;
  font-family:var(--font-ui);
  letter-spacing:0.04em;
}
.hc-desc{
  font-size:0.9rem;
  color:var(--text-m);
  line-height:1.55;
  margin:8px 0 10px;
  font-family:var(--font-body);
}
.hc-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:10px;
  border-top:1px solid var(--border);
  gap:8px;
}
.hc-foot-right{display:flex;align-items:center;gap:8px}
.hc-ask{
  background:none;
  border:1px solid var(--border-l);
  color:var(--gold-d);
  padding:4px 10px;
  border-radius:12px;
  font-family:var(--font-display);
  font-size:0.6rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s;
  white-space:nowrap;
}
.hc-ask:hover{
  background:rgba(201,169,110,0.08);
  border-color:var(--gold-d);
  color:var(--gold);
}
.hc-caution{
  font-size:0.72rem;
  color:var(--text-s);
  display:flex;align-items:center;gap:5px;
  font-family:var(--font-ui);
  letter-spacing:0.04em;
}
.hc-star{
  background:none;border:none;cursor:pointer;
  font-size:1.05rem;
  color:var(--text-s);
  transition:color 0.2s,transform 0.15s;
  padding:2px;
}
.hc-star:hover{color:var(--gold);transform:scale(1.15)}
.hc-star.active{color:var(--gold)}

/* ── MODAL ── */
.modal-ov{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:2000;
  display:none;align-items:flex-start;justify-content:center;
  padding:40px 16px;overflow-y:auto;
}
.modal-ov.open{display:flex}
.modal{
  background:var(--surface);
  border:1px solid var(--border-l);
  border-radius:14px;
  max-width:760px;width:100%;
  position:relative;
  animation:modalIn 0.25s ease;
}
@keyframes modalIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-hdr{
  padding:24px 28px 18px;
  border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:flex-start;
}
.modal-hdr h2{
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--gold);
  font-weight:400;
  letter-spacing:0.06em;
  margin-bottom:4px;
}
.modal-hdr .latin{font-style:italic;color:var(--text-m);font-size:0.9rem;font-family:var(--font-body)}
.modal-close{
  background:none;border:1px solid var(--border-l);color:var(--text-m);
  width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:1.1rem;
  transition:border-color 0.2s,color 0.2s;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.modal-close:hover{border-color:var(--gold-d);color:var(--gold)}
.modal-body{padding:22px 28px;overflow-y:auto;max-height:calc(100vh - 200px)}
.modal-section{margin-bottom:20px}
.modal-section h4{
  font-family:var(--font-display);
  font-size:0.65rem;
  color:var(--gold-d);
  text-transform:uppercase;
  letter-spacing:0.18em;
  margin-bottom:10px;
  font-weight:400;
}
.modal-section p,.modal-section li{
  font-size:1rem;
  color:var(--text-m);
  line-height:1.75;
  font-family:var(--font-body);
}
.modal-section ul{list-style:disc;padding-left:20px}
.modal-section li{margin-bottom:5px}
/* Modal tradition accent on header top border */
.modal-trad-ayurveda .modal-hdr{border-top:3px solid var(--trad-ayurveda)}
.modal-trad-tcm .modal-hdr{border-top:3px solid var(--trad-tcm)}
.modal-trad-western .modal-hdr{border-top:3px solid var(--trad-western)}
.modal-trad-indigenous .modal-hdr{border-top:3px solid var(--trad-indigenous)}
.modal-trad-european .modal-hdr{border-top:3px solid var(--trad-european)}
.modal-trad-african .modal-hdr{border-top:3px solid var(--trad-african)}
.modal-trad-south-american .modal-hdr{border-top:3px solid var(--trad-south-american)}
.modal-trad-pacific .modal-hdr{border-top:3px solid var(--trad-pacific)}
.modal-trad-other .modal-hdr,.modal-trad-various .modal-hdr{border-top:3px solid var(--gold-d)}

/* Tradition badge in modal */
.modal-trad-badge{
  display:inline-flex;align-items:center;
  font-size:0.68rem;font-family:var(--font-ui);
  letter-spacing:0.07em;text-transform:uppercase;
  padding:4px 10px;border-radius:10px;border:1px solid;
  margin-right:4px;
}
.trad-ayurveda{color:var(--trad-ayurveda);border-color:rgba(176,125,74,0.3);background:rgba(176,125,74,0.08)}
.trad-tcm{color:var(--trad-tcm);border-color:rgba(122,92,138,0.3);background:rgba(122,92,138,0.08)}
.trad-western{color:var(--trad-western);border-color:rgba(74,122,92,0.3);background:rgba(74,122,92,0.08)}
.trad-indigenous{color:var(--trad-indigenous);border-color:rgba(138,106,58,0.3);background:rgba(138,106,58,0.08)}
.trad-european{color:var(--trad-european);border-color:rgba(74,106,138,0.3);background:rgba(74,106,138,0.08)}
.trad-african{color:var(--trad-african);border-color:rgba(138,74,58,0.3);background:rgba(138,74,58,0.08)}
.trad-south-american{color:var(--trad-south-american);border-color:rgba(90,122,58,0.3);background:rgba(90,122,58,0.08)}
.trad-pacific{color:var(--trad-pacific);border-color:rgba(58,122,138,0.3);background:rgba(58,122,138,0.08)}
.trad-other,.trad-various{color:var(--gold-d);border-color:rgba(138,114,72,0.3);background:rgba(138,114,72,0.08)}

/* Meta row */
.modal-meta-row{
  display:flex;gap:0;
  margin-bottom:20px;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}
.modal-meta-item{
  flex:1;padding:10px 16px;
  background:var(--card);
}
.modal-meta-item+.modal-meta-item{border-left:1px solid var(--border)}
.modal-meta-label{
  display:block;
  font-family:var(--font-display);
  font-size:0.6rem;letter-spacing:0.16em;
  color:var(--gold-d);text-transform:uppercase;
  margin-bottom:4px;
}
.modal-meta-val{
  font-family:var(--font-body);
  font-size:0.95rem;color:var(--text);
}

/* Pills for tags/parts/preps */
.modal-pills{display:flex;flex-wrap:wrap;gap:6px}
.modal-pill{
  font-size:0.75rem;padding:4px 12px;border-radius:12px;
  background:rgba(201,169,110,0.07);
  border:1px solid rgba(201,169,110,0.15);
  color:var(--gold-d);text-transform:capitalize;
  font-family:var(--font-ui);letter-spacing:0.04em;
}

/* Constituent pills — slightly different tint to distinguish from use-case tags */
.modal-pill-constituent{
  background:rgba(122,92,138,0.08);
  border-color:rgba(122,92,138,0.2);
  color:#9a7ab0;
}

/* Dosage section */
.modal-dosage-section{
  background:rgba(201,169,110,0.04);
  border:1px solid var(--border-l);
  border-radius:8px;
  padding:12px 14px;
}
.modal-dosage-text{
  font-size:0.95rem;
  color:var(--text);
  font-style:italic;
  line-height:1.6;
  font-family:var(--font-body);
}

/* Safety section variants */
.modal-safety-section{
  padding:14px 16px;border-radius:8px;border-left:3px solid;
}
.modal-safety-low{background:rgba(74,124,111,0.06);border-color:var(--caution-low)}
.modal-safety-mod{background:rgba(184,151,90,0.06);border-color:var(--caution-mod)}
.modal-safety-high{background:rgba(138,74,74,0.08);border-color:var(--caution-hi)}
.modal-caution-note{
  margin-top:8px;
  font-size:0.88rem;
  color:var(--caution-hi);
  font-style:italic;
}

/* AI section */
.modal-ai-section{background:var(--card);border:1px solid var(--border-l);border-radius:8px;padding:16px}
.modal-ai-section h4{margin-bottom:8px}
.modal-ai{font-size:0.95rem;color:var(--text-m);line-height:1.75;font-family:var(--font-body);min-height:48px}
.modal-ai-loading{font-style:italic;color:var(--text-s)}

.modal-tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px}
.modal-tag{
  font-size:0.72rem;padding:4px 11px;border-radius:12px;
  background:rgba(201,169,110,0.08);
  border:1px solid rgba(201,169,110,0.15);
  color:var(--gold-d);text-transform:capitalize;
  font-family:var(--font-ui);
}
.modal-tag.caution-tag{background:rgba(138,74,74,0.12);border-color:rgba(138,74,74,0.25);color:var(--caution-hi)}

.aff-link{
  color:var(--gold-d);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-style:dotted;font-size:0.88rem;
  font-family:var(--font-body);
}
.aff-link:hover{color:var(--gold)}
.modal-buy{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  padding:12px 16px;
  background:var(--gold-faint);
  border:1px solid var(--border-l);
  border-radius:8px;margin:16px 0;
}
.modal-buy-label{
  font-size:0.68rem;color:var(--text-s);
  text-transform:uppercase;letter-spacing:0.12em;
  margin-right:4px;flex-shrink:0;
  font-family:var(--font-display);
}
.buy-link{
  font-size:0.84rem;color:var(--gold-d);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-style:dotted;transition:color 0.2s;
  font-family:var(--font-body);
}
.buy-link:hover{color:var(--gold)}
.modal-ai{
  padding:16px;
  background:var(--card);
  border:1px solid var(--border-l);
  border-radius:8px;
  margin:16px 0;
  font-size:1rem;
  color:var(--text-m);
  line-height:1.75;
  min-height:64px;
  position:relative;
  font-family:var(--font-body);
}
.modal-ai-loading{font-style:italic}
.modal-actions{
  display:flex;gap:10px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--border);
}

/* ── BUTTONS ── */
.btn-pri{
  padding:11px 20px;
  background:var(--gold);color:#0a0906;border:none;
  border-radius:6px;cursor:pointer;
  font-family:var(--font-display);font-size:0.68rem;
  font-weight:600;letter-spacing:0.1em;text-transform:uppercase;
  transition:background 0.2s;
}
.btn-pri:hover{background:var(--gold-l)}
.btn-sec{
  padding:11px 20px;background:transparent;color:var(--gold);
  border:1px solid var(--gold-d);
  border-radius:6px;cursor:pointer;
  font-family:var(--font-display);font-size:0.68rem;
  letter-spacing:0.1em;text-transform:uppercase;
  transition:background 0.2s;
}
.btn-sec:hover{background:rgba(201,169,110,0.08)}
.btn-ghost{
  padding:11px 20px;background:transparent;color:var(--text-m);
  border:1px solid var(--border-l);
  border-radius:6px;cursor:pointer;
  font-family:var(--font-display);font-size:0.68rem;
  letter-spacing:0.1em;text-transform:uppercase;
  transition:border-color 0.2s;
}
.btn-ghost:hover{border-color:var(--gold-d);color:var(--gold)}

/* ── SAVED ── */
.saved-empty{
  text-align:center;padding:64px 20px;
  color:var(--text-m);font-style:italic;font-size:1rem;line-height:1.7;
}
.saved-empty p:first-child{margin-bottom:8px;color:var(--text);font-style:normal;font-family:var(--font-display);font-size:0.85rem;letter-spacing:0.06em}

/* ── FOOTER ── */
footer{
  border-top:1px solid var(--border);
  padding:28px 24px;
  text-align:center;
  color:var(--text-s);
  font-size:0.78rem;
  margin-top:48px;
  line-height:1.6;
  font-family:var(--font-ui);
  letter-spacing:0.06em;
  position:relative;z-index:1;
}

/* ── TRADITIONS TAB ── */
.trad-hero{
  text-align:center;padding:36px 28px 28px;
  border-bottom:1px solid var(--border);margin-bottom:0;
  position:relative;
}
.trad-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(201,169,110,0.06) 0%,transparent 65%);
  pointer-events:none;
}
.trad-ailment-picker{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:20px 28px;
  border-bottom:1px solid var(--border);
}
.trad-ailment-btn{
  padding:9px 20px;
  background:var(--card);
  border:1px solid var(--border-l);
  color:var(--text-m);
  border-radius:20px;
  font-family:var(--font-display);
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s;
}
.trad-ailment-btn:hover{border-color:var(--gold-d);color:var(--gold)}
.trad-ailment-btn.active{
  background:rgba(201,169,110,0.1);
  border-color:var(--gold-d);
  color:var(--gold);
}
.trad-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
  padding:24px 28px;
}
.trad-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  transition:transform 0.2s,box-shadow 0.2s;
}
.trad-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.3)}
.trad-card-header{
  padding:14px 16px 12px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
.trad-card-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
}
.trad-card-name{
  font-family:var(--font-display);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:400;
}
.trad-card-body{padding:14px 16px}
.trad-card-philosophy{
  font-family:var(--font-body);
  font-size:0.88rem;
  color:var(--text-m);
  font-style:italic;
  line-height:1.6;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.trad-herb-list{display:flex;flex-direction:column;gap:10px}
.trad-herb{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:8px;cursor:pointer;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid transparent;
  transition:all 0.18s;
}
.trad-herb:hover{background:var(--card-hover);border-color:var(--border-l)}
.trad-herb-info{}
.trad-herb-name{
  font-family:var(--font-display);
  font-size:0.8rem;
  color:var(--gold);
  letter-spacing:0.03em;
  margin-bottom:2px;
}
.trad-herb-role{
  font-size:0.78rem;
  color:var(--text-m);
  font-family:var(--font-body);
  font-style:italic;
  line-height:1.4;
}
.trad-herb-arrow{
  color:var(--gold-d);
  font-size:0.75rem;
  margin-top:2px;
  flex-shrink:0;
  opacity:0;
  transition:opacity 0.18s;
}
.trad-herb:hover .trad-herb-arrow{opacity:1}

/* ── MISC ── */
.no-results{text-align:center;padding:48px;color:var(--text-m);font-style:italic;font-size:1rem}
.app-loading{text-align:center;padding:64px;color:var(--text-m);font-style:italic;font-size:1rem}
.fav-badge{
  background:var(--gold);color:#0a0906;
  border-radius:50%;width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.62rem;font-weight:700;margin-left:5px;
  font-family:var(--font-ui);
}

/* ── RESPONSIVE ── */
@media(max-width:700px){
  /* Header */
  .logo-wrap img{max-width:160px}
  .site-header{padding:18px 16px 0}

  /* Tabs — scroll horizontally if needed */
  .tab-bar{
    margin:14px 0 0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
  }
  .tab-bar::-webkit-scrollbar{display:none}
  .tab-btn{
    padding:10px 14px;
    font-size:0.72rem;
    letter-spacing:0.05em;
    white-space:nowrap;
    flex-shrink:0;
  }

  /* Panels */
  .tab-panel{padding:20px 16px}

  /* Hero sections */
  .compendium-hero,.trad-hero{padding:28px 16px 24px}
  .hero-title{font-size:1.5rem}
  .hero-sub{font-size:0.92rem}

  /* Compendium controls */
  .comp-header{flex-direction:column;align-items:stretch;gap:10px}
  .comp-controls{flex-direction:column;gap:8px}
  .comp-search{width:100%}
  select.filter-select{width:100%}

  /* Herb grid — single column on mobile */
  .herb-grid{grid-template-columns:1fr}

  /* Cards — slightly more compact */
  .herb-card{padding:14px 14px 11px}
  .hc-name{font-size:0.88rem}
  .hc-desc{font-size:0.86rem}

  /* Chat */
  .msg-bubble{max-width:88%}
  .chat-input-row{flex-direction:column}
  .chat-input-row input{font-size:1rem}
  #chat-welcome{padding:28px 12px 20px}
  #chat-welcome h2{font-size:1.1rem}
  .quick-prompts{gap:6px}
  .qp-btn{font-size:0.84rem}

  /* Modal */
  .modal-ov{padding:0;align-items:flex-end}
  .modal{
    border-radius:16px 16px 0 0;
    max-width:100%;
    max-height:90vh;
  }
  .modal-hdr{padding:16px 18px 13px}
  .modal-hdr h2{font-size:1.1rem}
  .modal-body{
    padding:16px 18px;
    max-height:calc(90vh - 100px);
  }
  .modal-meta-row{flex-direction:column}
  .modal-meta-item+.modal-meta-item{border-left:none;border-top:1px solid var(--border)}
  .modal-actions{flex-direction:column}
  .modal-actions .btn-pri,
  .modal-actions .btn-sec{width:100%;text-align:center}

  /* Traditions tab */
  .trad-ailment-picker{
    padding:14px 16px;
    gap:6px;
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .trad-ailment-picker::-webkit-scrollbar{display:none}
  .trad-ailment-btn{
    white-space:nowrap;
    flex-shrink:0;
    padding:8px 14px;
    font-size:0.62rem;
  }
  .trad-grid{
    grid-template-columns:1fr;
    padding:16px;
    gap:12px;
  }
  .trad-card-header{padding:12px 14px 10px}
  .trad-card-body{padding:12px 14px}
  .trad-card-philosophy{font-size:0.86rem}
  .trad-herb-name{font-size:0.78rem}
  .trad-herb-role{font-size:0.76rem}
  .trad-herb-arrow{opacity:0.4}

  /* Saved empty state */
  .saved-empty{padding:44px 16px}

  /* Footer */
  footer{padding:20px 16px;font-size:0.7rem}
}