/* ============== Pai — design tokens ============== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');

:root{
  --bg:#FFFFFF;
  --bg-soft:#F3F5F2;
  --bg-soft-2:#EAEDE8;
  --ink:#12150F;
  --ink-2:#5B6157;
  --ink-3:#8B9085;
  --line:#E8EAE5;
  --line-2:#DCDFD8;

  --green:#0E8A4C;          /* brand / accents */
  --green-press:#0B7341;
  --green-cta:#1C7A49;      /* big forest CTA, like ref */
  --green-cta-press:#166139;
  --green-50:#E9F5EC;
  --green-100:#D6ECDC;
  --green-ink:#0A5E36;

  --accent:#4E5AE8;         /* promo / route line (purple-blue, like ref) */
  --accent-50:#ECEEFC;
  --accent-ink:#3A45C4;

  --amber:#F1A33B;
  --star:#F5A623;

  --shadow-sheet:0 -8px 30px rgba(20,30,18,0.10);
  --shadow-card:0 1px 2px rgba(20,30,18,0.05), 0 6px 18px rgba(20,30,18,0.06);
  --shadow-pop:0 10px 30px rgba(20,30,18,0.16);

  --r-sheet:26px;
  --r-card:18px;
  --r-pill:999px;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
#root *{ scrollbar-width:none; -ms-overflow-style:none; }
#root *::-webkit-scrollbar{ display:none; width:0; height:0; }
html,body{margin:0;padding:0;}
body{
  font-family:'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  background:#C9CCC6;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* root stage centers the device */
#stage{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:28px;
  background:
    radial-gradient(1200px 700px at 50% -10%, #DDE0DA 0%, #C9CCC6 60%);
}

/* screen scaffold inside the device content area */
.scr{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:var(--bg);
  overflow:hidden;
}
.scr-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.scr-scroll::-webkit-scrollbar{ display:none; width:0; }

/* status bar safe area */
.safe-top{ height:60px; flex:none; }
.safe-bottom{ height:34px; flex:none; }

/* typography helpers */
.t-h1{ font-size:32px; font-weight:800; letter-spacing:-0.02em; line-height:1.08; }
.t-h2{ font-size:24px; font-weight:800; letter-spacing:-0.02em; line-height:1.12; }
.t-h3{ font-size:19px; font-weight:700; letter-spacing:-0.01em; }
.t-title{ font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.t-body{ font-size:15px; font-weight:500; color:var(--ink-2); line-height:1.4; }
.t-sub{ font-size:13px; font-weight:500; color:var(--ink-3); }
.t-mono{ font-family:'SF Mono', ui-monospace, monospace; }
.muted{ color:var(--ink-2); }
.muted-2{ color:var(--ink-3); }
.thai{ font-weight:600; }

/* buttons */
.btn{
  border:none; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:17px; letter-spacing:-0.01em;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease;
  user-select:none;
}
.btn:active{ transform:scale(0.975); }
.btn-cta{
  background:var(--green-cta); color:#fff;
  height:56px; border-radius:var(--r-pill); width:100%;
  box-shadow:0 6px 18px rgba(28,122,73,0.28);
}
.btn-cta:active{ background:var(--green-cta-press); }
.btn-dark{ background:var(--ink); color:#fff; height:56px; border-radius:var(--r-pill); width:100%; }
.btn-ghost{
  background:var(--bg-soft); color:var(--ink);
  height:52px; border-radius:var(--r-pill); width:100%; font-weight:700;
}
.btn-round{
  width:56px; height:56px; border-radius:var(--r-pill); flex:none;
  background:var(--green-cta); color:#fff;
}

/* chips */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 12px; border-radius:var(--r-pill);
  font-size:12px; font-weight:700; letter-spacing:0.01em;
}
.chip-green{ background:var(--green); color:#fff; }
.chip-soft{ background:var(--bg-soft); color:var(--ink-2); }
.chip-faster{ background:var(--green-100); color:var(--green-ink); text-transform:uppercase; }

/* generic card / row */
.card{ background:var(--bg); border-radius:var(--r-card); box-shadow:var(--shadow-card); }
.row-tap{ transition:background .12s ease; cursor:pointer; }
.row-tap:active{ background:var(--bg-soft); }

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

/* bottom sheet handle */
.sheet-handle{ width:38px; height:5px; border-radius:99px; background:var(--line-2); margin:10px auto 4px; }

/* bottom tab bar */
.tabbar{
  flex:none; display:flex; padding:8px 10px 0;
  border-top:1px solid var(--line); background:var(--bg);
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 0 4px; border-radius:16px; cursor:pointer; color:var(--ink-3);
  font-size:12px; font-weight:700; transition:background .15s ease, color .15s ease;
}
.tab.active{ color:var(--green-cta); background:var(--green-50); }

/* segmented tabs */
.seg{ display:flex; gap:28px; padding:0 4px; }
.seg-item{ position:relative; padding:8px 0 12px; font-size:18px; font-weight:700; color:var(--ink-3); cursor:pointer; }
.seg-item.on{ color:var(--ink); }
.seg-item.on::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px; background:var(--green); 
}

/* inputs */
.field{
  display:flex; align-items:center; gap:12px;
  background:var(--bg-soft); border-radius:14px; padding:0 16px; height:54px;
  font-size:16px; font-weight:600;
}
.field input{ border:none; background:transparent; outline:none; font:inherit; flex:1; color:var(--ink); }
.field input::placeholder{ color:var(--ink-3); font-weight:600; }

/* circle icon button */
.icon-btn{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-soft); cursor:pointer;
}
.icon-btn.white{ background:#fff; box-shadow:var(--shadow-card); }

/* fades / animations */
@keyframes fadeUp{ from{transform:translateY(10px);} to{transform:none;} }
@keyframes fadeIn{ from{transform:translateY(4px);} to{transform:none;} }
@keyframes sheetUp{ from{transform:translateY(26px);} to{transform:none;} }
@keyframes pulse{ 0%{transform:scale(.5); opacity:.55;} 100%{transform:scale(2.6); opacity:0;} }
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes dash{ to{ stroke-dashoffset:-32; } }
@keyframes carmove{ to{ offset-distance:100%; } }
.anim-fade-up{ animation:fadeUp .34s cubic-bezier(.2,.8,.2,1) both; }
.anim-fade{ animation:fadeIn .3s ease both; }
.anim-sheet{ animation:sheetUp .36s cubic-bezier(.2,.85,.25,1) both; }

.spinner{
  width:54px; height:54px; border-radius:50%;
  border:4px solid var(--green-100); border-top-color:var(--green);
  animation:spin .9s linear infinite;
}