/* ── MonTherapy app theme (mirrored from RN src/theme/colors.js) ── */
:root{
  --forest:#4D6535;  --grove:#6A8450;  --sage:#C8DECE;  --amber:#C9853A;
  --blush:#E07A84;   --walnut:#7A5035; --paper:#F2E8D5;
  --header:#5A7040;  --primary:#556f44; --btn:#4D6535;  --bg:#F2E8D5;
  --accent:#e7f1e7;  --card:#FAF3E8;
  --border:rgba(122,80,53,.18); --divider:rgba(122,80,53,.10);
  --text:rgba(45,41,32,.92); --muted:rgba(122,80,53,.65); --placeholder:rgba(122,80,53,.40);
  --soft-blue:#E5F0FF; --blue:#2D6CDF; --soft-red:#f4968a; --red:#C84B41;
  --aqua:#2F8FA4; --soft-sand:#fed697; --sand:#B7862D; --soft-cream:#fff4e1;
  --danger:#f4968a; --alert:#fed697;
  --tab-inactive:rgba(100,116,139,.60);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  background:#d8d2c4; /* behind the phone frame on desktop */
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  color:var(--text);
}

/* ── Phone frame: full-screen on mobile, centered app frame on desktop ── */
#phone{
  position:relative; margin:0 auto; max-width:480px; min-height:100dvh;
  background:var(--bg); display:flex; flex-direction:column; overflow:hidden;
}
@media (min-width:520px){
  body{ padding:0; }
  #phone{ min-height:100dvh; box-shadow:0 0 60px rgba(0,0,0,.25); }
}

/* ── Header (RN AppHeader) ── */
#app-header{
  position:relative; height:180px; flex:0 0 auto;
  background:url('../img/header_bg.png') center/cover no-repeat, var(--header);
  border-bottom:2.5px solid var(--forest);
  display:flex; flex-direction:column; justify-content:space-between;
  padding-bottom:14px;
}
.hdr-btn{
  position:absolute; top:16px; z-index:10; border:none; cursor:pointer;
  background:rgba(0,0,0,.18); color:#fff; font-weight:800; font-size:11px;
  border-radius:8px; padding:6px 10px; letter-spacing:.3px;
}
#hdr-left{ left:16px; } #hdr-right{ right:16px; }
.brand-row{ display:flex; align-items:center; justify-content:center; gap:10px; padding-top:18px; }
.brand-logo{ width:64px; height:64px; object-fit:contain; }
.brand-name{ color:#2D3B1A; font-size:19px; font-weight:900; letter-spacing:.5px; }
.brand-tag{ color:var(--forest); font-size:11px; font-weight:600; margin-top:2px; }
.hdr-titles{ padding:0 20px; }
.hdr-title{
  color:#fff; font-size:22px; font-weight:900; letter-spacing:-.5px;
  text-shadow:0 1px 4px rgba(0,0,0,.25);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hdr-subtitle{ color:rgba(255,255,255,.82); font-size:11px; font-weight:700; margin-top:2px; min-height:14px; }

/* ── Screen area ── */
#screen{ flex:1; overflow-y:auto; padding:16px; padding-bottom:86px; }

/* ── Bottom tabs (RN MainTabs) ── */
#tabbar{
  position:absolute; left:0; right:0; bottom:0; z-index:50;
  height:66px; display:flex; background:#FAF3E8;
  border-top:1px solid rgba(122,80,53,.14);
  padding:4px 0 10px;
}
.tab{
  flex:1; border:none; background:none; cursor:pointer; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--tab-inactive); font-size:11px; font-weight:800; letter-spacing:.3px;
  font-family:inherit;
}
.tab img{ width:22px; height:22px; object-fit:contain; opacity:.7; filter:grayscale(1) opacity(.55); }
.tab .tab-ind{
  position:absolute; top:0; width:28px; height:2px; border-radius:1px;
  background:transparent;
}
.tab.active{ color:var(--tab-c); }
.tab.active img{ opacity:1; filter:none; }
.tab.active .tab-ind{ background:var(--tab-c); }

/* ── Cards & shared components ── */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:16px; margin-bottom:12px; box-shadow:0 1px 3px rgba(122,80,53,.08);
}
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  border:none; cursor:pointer; background:var(--btn); color:#fff;
  font-weight:800; font-size:15px; letter-spacing:.2px; font-family:inherit;
  border-radius:14px; padding:14px 18px; transition:transform .12s, opacity .12s;
}
.btn:active{ transform:scale(.98); }
.btn.secondary{ background:var(--accent); color:var(--forest); }
.btn.outline{ background:transparent; border:1.5px solid var(--forest); color:var(--forest); }
.btn:disabled{ opacity:.55; }
.input{
  width:100%; border:1.5px solid var(--border); border-radius:14px;
  background:#fff; padding:14px 16px; font-size:15px; color:var(--text);
  outline:none; font-family:inherit;
}
.input:focus{ border-color:var(--forest); }
.input::placeholder{ color:var(--placeholder); }
.chip{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent); color:var(--forest); border-radius:999px;
  padding:5px 12px; font-size:12px; font-weight:700;
}
.muted{ color:var(--muted); font-size:13px; }
.h2{ font-size:17px; font-weight:900; color:var(--text); margin-bottom:10px; }

/* ── Placeholder screens (Phase 0) ── */
.placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:45vh; text-align:center; gap:10px;
}
.placeholder .ph-icon{
  width:74px; height:74px; border-radius:22px; background:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:32px;
}
.placeholder h3{ font-size:18px; font-weight:900; }

/* ── Splash ── */
#splash{
  position:absolute; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  transition:opacity .4s;
}
#splash.hide{ opacity:0; pointer-events:none; }
#splash img{ width:96px; height:96px; object-fit:contain; }
.splash-name{ font-size:22px; font-weight:900; color:#2D3B1A; letter-spacing:1px; }
.spinner{
  width:26px; height:26px; border-radius:50%;
  border:3px solid var(--divider); border-top-color:var(--forest);
  animation:spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ── Toasts ── */
#toasts{ position:absolute; top:14px; left:0; right:0; z-index:120; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.toast{
  background:#2D3B1A; color:#fff; border-radius:12px; padding:10px 18px;
  font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.25);
  animation:toastIn .25s ease; max-width:86%;
}
.toast.error{ background:var(--red); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:none; } }

/* ── Auth screens ── */
.auth-wrap{ padding-top:8px; }
.auth-wrap .field{ margin-bottom:12px; }
.auth-link{ color:var(--forest); font-weight:800; cursor:pointer; text-decoration:underline; }