@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');
/* ==========================================================================
   HomeMitra — shared design system
   Terracotta / warm-cream palette carried over from the original prototype.
   Type: Inter (body/UI) + Baloo 2 (brand/headings) — matches the Sehat Mentor feel.
   ========================================================================== */

:root{
  color-scheme: light;
  --bg: #f8f1e7;
  --page: #f3e9db;
  --surface: #fffaf3;
  --surface-2: #fff3e3;
  --border: #ecdcc4;
  --border-strong: #e0c9a6;
  --ink: #2c2013;
  --ink-secondary: #6b5842;
  --ink-muted: #9a8a72;
  --brand: #c1592f;
  --brand-dark: #9c451f;
  --brand-light: #f5ddc9;
  --brand-wash: #fbeee0;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --good: #0ca30c;
  --good-bg: #e5f6e1;
  --warning: #b97200;
  --warning-bg: #fdf0d8;
  --serious: #c4562c;
  --serious-bg: #fbe6da;
  --critical: #b7302f;
  --critical-bg: #fbdedd;
  --grid: #e6d7bf;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 2px 10px rgba(90, 60, 20, 0.06), 0 1px 2px rgba(90,60,20,0.05);
  --lift: 0 16px 38px rgba(120, 60, 20, 0.16);
  --sidebar-w: 246px;
}
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height:1.5;
}
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin: 0; font-family: 'Baloo 2', 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.005em; }
p{ margin: 0; }
button{ font-family: inherit; cursor: pointer; }
ul{ margin:0; padding:0; list-style:none; }
table{ border-collapse: collapse; width: 100%; }
:focus-visible{ outline:3px solid var(--brand-light); outline-offset:2px; border-radius:6px; }

/* ---------- Buttons ---------- */
.btn{ border-radius: 10px; padding: 9px 16px; font-size: 13.5px; font-weight:700; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:transform .14s ease, background .14s ease, box-shadow .14s ease; white-space:nowrap; }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background: var(--brand); color:#fff; box-shadow:0 6px 16px rgba(193,89,47,.22); }
.btn-primary:hover{ background: var(--brand-dark); }
.btn-ghost{ background: var(--surface); border:1px solid var(--border-strong); color: var(--ink); }
.btn-ghost:hover{ background: var(--surface-2); }
.btn-light{ background:#fff; color:var(--brand-dark); }
.btn-outline-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); }
.btn-outline-light:hover{ background:rgba(255,255,255,.16); color:#fff; }
.btn-sm{ padding:6px 12px; font-size:12.5px; }
.btn-lg{ padding:13px 22px; font-size:15px; border-radius:12px; }
.btn-block{ width:100%; }

/* ---------- Cards & grids ---------- */
.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.card-head h3{ font-size:15.5px; }
.card-head .hint{ font-size:12px; color:var(--ink-muted); }
.note-card{ background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:16px 18px; font-size:13px; color:var(--ink-secondary); line-height:1.6; }
.note-card b{ color:var(--ink); }

.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-5-3{ grid-template-columns: 1.6fr 1fr; }
@media (max-width: 1180px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} .grid-5-3{grid-template-columns:1fr;} }
@media (max-width: 640px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} }
.stack{ display:flex; flex-direction:column; gap:16px; }

/* ---------- Stat tiles ---------- */
.stat-tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); }
.stat-tile .label{ font-size:12.5px; color:var(--ink-secondary); font-weight:600; display:flex; align-items:center; gap:7px; }
.stat-tile .value{ font-size:26px; font-weight:800; margin-top:8px; color:var(--ink); }
.stat-tile .delta{ font-size:12px; margin-top:6px; font-weight:700; }
.stat-tile .delta.up{ color:var(--good); }
.stat-tile .delta.down{ color:var(--critical); }
.stat-tile .delta.flat{ color:var(--ink-muted); }
.stat-icon{ width:34px;height:34px;border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; }
.badge .dot{ width:7px;height:7px;border-radius:50%; }
.badge.good{ background:var(--good-bg); color:#186016; } .badge.good .dot{ background:var(--good); }
.badge.warning{ background:var(--warning-bg); color:#7a4c00; } .badge.warning .dot{ background:var(--warning); }
.badge.serious{ background:var(--serious-bg); color:#8a3a1a; } .badge.serious .dot{ background:var(--serious); }
.badge.critical{ background:var(--critical-bg); color:#7d1e1d; } .badge.critical .dot{ background:var(--critical); }
.badge.neutral{ background:var(--surface-2); color:var(--ink-secondary); } .badge.neutral .dot{ background:var(--ink-muted); }

/* ---------- Tables ---------- */
.table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted); font-weight:700; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.table td{ padding:11px 10px; font-size:13.5px; border-bottom:1px solid var(--border); color: var(--ink); }
.table tr:last-child td{ border-bottom:none; }
.table td.num, .table th.num{ font-variant-numeric: tabular-nums; text-align:right; }
.table-wrap{ overflow-x:auto; }

/* ---------- Segmented control ---------- */
.segmented{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px; }
.segmented button{ border:none; background:transparent; padding:7px 14px; font-size:12.5px; font-weight:700; color:var(--ink-secondary); border-radius:8px; }
.segmented button.active{ background:var(--surface); color:var(--brand-dark); box-shadow: var(--shadow); }

/* ---------- Progress / meter ---------- */
.meter{ height:9px; border-radius:999px; background:var(--surface-2); overflow:hidden; border:1px solid var(--border); }
.meter > div{ height:100%; border-radius:999px; }

/* ---------- Forms ---------- */
label{ font-size:12.5px; font-weight:700; color:var(--ink-secondary); display:block; margin-bottom:5px; }
input, select, textarea{
  width:100%; padding:9px 11px; border-radius:10px; border:1px solid var(--border-strong);
  background:var(--surface); font-size:13.5px; color:var(--ink); font-family:inherit;
}
input:focus, select:focus, textarea:focus{ outline:2px solid var(--brand-light); border-color:var(--brand); }
.field{ margin-bottom:14px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .field-row{grid-template-columns:1fr;} }
.form-error{ background:var(--critical-bg); color:#7d1e1d; border-radius:10px; padding:10px 12px; font-size:12.5px; font-weight:600; margin-bottom:14px; display:none; }
.form-error.show{ display:block; }
.form-ok{ background:var(--good-bg); color:#186016; border-radius:10px; padding:10px 12px; font-size:12.5px; font-weight:600; margin-bottom:14px; display:none; }
.form-ok.show{ display:block; }

/* ---------- Misc ---------- */
.divider{ height:1px; background:var(--border); margin:16px 0; }
.muted{ color: var(--ink-muted); }
.small{ font-size:12px; }
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{ background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--ink-secondary); }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.avatar{ width:40px;height:40px;border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.person-row{ display:flex; align-items:center; gap:12px; }
.hidden{ display:none !important; }
.toast{
  position: fixed; bottom: 22px; right: 22px; background: var(--ink); color:#fff9f0;
  padding: 12px 18px; border-radius: 12px; font-size: 13.5px; font-weight:600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25); z-index: 999; opacity:0; transform: translateY(10px);
  transition: all .25s ease; pointer-events:none; max-width: 90vw;
}
.toast.show{ opacity:1; transform: translateY(0); }

/* ---------- Charts ---------- */
.chart-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.chart-legend .item{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-secondary); }
.chart-legend .sw{ width:10px;height:10px;border-radius:3px; }
.chart-svg{ width:100%; height:auto; display:block; }
.chart-svg text{ font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* ---------- Kids ---------- */
.kid-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:18px; box-shadow:var(--shadow); }
.kid-header{ display:flex; align-items:center; gap:14px; }
.kid-avatar{ width:54px;height:54px;border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; }
.points-big{ font-size:28px; font-weight:800; color:var(--brand-dark); }
.task-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.task-row:last-child{ border-bottom:none; }
.task-row .left{ display:flex; align-items:center; gap:10px; }
.check{ width:19px;height:19px;border-radius:6px; border:2px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; cursor:pointer; }
.check.done{ background: var(--good); border-color:var(--good); color:#fff; }
.task-row.done .task-name{ text-decoration: line-through; color:var(--ink-muted); }
.pts-tag{ font-size:11.5px; font-weight:800; color: var(--brand-dark); background:var(--brand-wash); padding:2px 8px; border-radius:999px; }
.reward-card{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--surface-2); display:flex; flex-direction:column; gap:8px; }
.reward-card .cost{ font-weight:800; color:var(--brand-dark); font-size:13px; }

/* ---------- Security ---------- */
.guard-card{ border:1px solid var(--border); border-radius:14px; padding:14px; background:var(--surface); display:flex; gap:12px; align-items:flex-start; }
.guard-avatar{ width:46px;height:46px;border-radius:50%; background:var(--brand-wash); color:var(--brand-dark); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0; }
.stars{ color:#c98500; font-size:12.5px; font-weight:700; }
.panic-btn{
  width:100%; background: linear-gradient(180deg,#e34948,#c4302f); color:#fff; border:none; border-radius:14px;
  padding: 16px; font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow: 0 4px 14px rgba(196,48,47,0.35);
}
.panic-btn:hover{ filter: brightness(1.05); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius:10px; }

/* ==========================================================================
   BRAND MARK
   ========================================================================== */
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,#7a3418,#c1592f);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px;
  box-shadow:0 4px 10px rgba(122,52,24,.28); flex:0 0 auto;
}
.brand-name{ font-family:'Baloo 2','Inter',sans-serif; font-size:23px; font-weight:800; color:var(--brand-dark); line-height:1.05; }
.brand-sub{ font-size:12px; color:var(--ink-secondary); }

/* ==========================================================================
   PUBLIC SITE (landing page)
   ========================================================================== */
.site-nav{ position:sticky; top:0; z-index:50; background:rgba(248,241,231,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.site-nav-inner{ max-width:1180px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:14px; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{ padding:9px 14px; border-radius:10px; font-weight:600; font-size:15px; color:var(--ink-secondary); }
.nav-links a:hover, .nav-links a.active{ background:var(--surface); color:var(--brand-dark); }
.nav-cta{ display:flex; align-items:center; gap:10px; margin-left:auto; }  /* Create account + Log in, right-aligned */
.nav-cta .btn{ padding:9px 15px; font-size:13.5px; border-radius:11px; }  /* header buttons, Sehat Mentor size */
.nav-toggle{ display:none; border:none; background:var(--surface); border-radius:10px; padding:9px 12px; font-size:17px; box-shadow:var(--shadow); margin-left:auto; }
.nav-login-mobile{ display:none; }   /* mobile only: login button left of the ☰ menu */
.nav-auth-link{ display:none; }
@media(max-width:900px){
  .nav-toggle{ display:block; margin-left:8px; }
  .nav-login-mobile{ display:inline-flex; margin-left:auto; }
  .nav-cta{ display:none; }
  .nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--surface); padding:12px; gap:2px; box-shadow:var(--lift); border-bottom:1px solid var(--border); display:none; }
  .nav-links.open{ display:flex; }
  .nav-auth-link{ display:block; margin-top:2px; }
  .nav-auth-link.register{ background:var(--brand); color:#fff; text-align:center; font-weight:700; padding:12px; border-radius:10px; margin-top:8px; }
}
@media(max-width:560px){
  .site-nav-inner{ gap:10px; padding:12px 16px; }
  .site-nav .brand-sub{ display:none; }        /* save width on small screens */
  .site-nav .brand-mark{ width:34px; height:34px; font-size:18px; }
}
.wrap{ max-width:1180px; margin:0 auto; padding:0 22px; }
.section-pad{ padding:72px 0; }
.eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); margin-bottom:10px; }
.section-title{ font-size:33px; color:var(--brand-dark); margin-bottom:10px; line-height:1.2; }
.section-lead{ font-size:15.5px; color:var(--ink-secondary); max-width:620px; line-height:1.6; }
.center{ text-align:center; }
.center .section-lead{ margin-left:auto; margin-right:auto; }

.hero{ padding:44px 0 10px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; }
@media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; text-align:center; } }
.hero h1{ font-size:clamp(30px,4.6vw,48px); line-height:1.12; color:var(--brand-dark); margin-bottom:16px; }
.hero p.lead{ font-size:17px; line-height:1.6; color:var(--ink-secondary); margin-bottom:26px; max-width:520px; }
@media(max-width:900px){ .hero p.lead{ margin-left:auto; margin-right:auto; } }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media(max-width:900px){ .hero-actions{ justify-content:center; } }
.hero-art{ background:linear-gradient(135deg,#7a3418,#c1592f 60%,#eda100); border-radius:26px; padding:26px; box-shadow:var(--lift); }
.hero-art .mini-card{ background:var(--surface); border-radius:14px; padding:14px 16px; margin-bottom:12px; box-shadow:0 6px 16px rgba(0,0,0,.12); }
.hero-art .mini-card:last-child{ margin-bottom:0; }

/* ---------- hero carousel ---------- */
.carousel{ position:relative; border-radius:26px; box-shadow:var(--lift); background:#5f2712; }
.slides{ position:relative; height:min(500px,68vh); min-height:400px; overflow:hidden; border-radius:26px; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:20px; padding:46px 52px; }
.slide.active{ opacity:1; }
.slide-copy{ position:relative; z-index:2; max-width:540px; color:#fff; }
.slide-tag{ display:inline-block; background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.28); padding:5px 13px; border-radius:999px; font-size:11.5px; font-weight:700; letter-spacing:.03em; margin-bottom:16px; }
.slide-title{ font-weight:800; font-size:clamp(28px,4.4vw,46px); line-height:1.1; margin-bottom:14px; color:#fff; }
.slide-text{ font-size:16px; line-height:1.6; color:rgba(255,255,255,.9); margin-bottom:24px; }
.slide-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.slide-art{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }
.slide-art .art-emoji{ font-size:150px; line-height:1; filter:drop-shadow(0 18px 34px rgba(0,0,0,.28)); }
.slide-1{ background:linear-gradient(125deg,#5f2712 0%,#7a3418 45%,#c1592f 100%); }
.slide-2{ background:linear-gradient(125deg,#8c4e12 0%,#c67a22 48%,#eda100 100%); }
.slide-3{ background:linear-gradient(125deg,#0f5132 0%,#1baf7a 100%); }
.slide-4{ background:linear-gradient(125deg,#1e4560 0%,#2a78d6 100%); }
.slide::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:radial-gradient(520px 320px at 82% 22%, rgba(255,255,255,.20), transparent 70%),
            radial-gradient(420px 280px at 12% 88%, rgba(0,0,0,.30), transparent 70%); }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.9); color:var(--brand-dark); font-size:22px; font-weight:800; box-shadow:0 6px 18px rgba(0,0,0,.18); display:flex; align-items:center; justify-content:center; }
.carousel-btn:hover{ background:#fff; }
.carousel-btn svg{ width:20px; height:20px; display:block; }
.carousel-prev{ left:18px; } .carousel-next{ right:18px; }
.carousel-dots{ position:absolute; bottom:20px; left:52px; z-index:6; display:flex; gap:8px; }
.carousel-dots button{ width:9px; height:9px; padding:0; border:none; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.45); transition:width .25s ease, background .25s ease; }
.carousel-dots button.active{ width:28px; background:#fff; }
@media(max-width:900px){
  .slide{ grid-template-columns:1fr; padding:32px 24px; align-content:center; text-align:center; }
  .slide-copy{ margin:0 auto; }
  .slide-actions{ justify-content:center; }
  .slide-art{ display:none; }
  .slides{ height:auto; min-height:410px; }
  .carousel-dots{ left:50%; transform:translateX(-50%); }
  .carousel-btn{ width:36px; height:36px; }
  .carousel-prev{ left:8px; } .carousel-next{ right:8px; }
}

.stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:34px; }
@media(max-width:760px){ .stats-strip{ grid-template-columns:repeat(2,1fr); } }
.stats-strip .tile{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); text-align:center; }
.stats-strip .n{ font-weight:800; font-size:27px; color:var(--brand-dark); }
.stats-strip .l{ font-size:12px; color:var(--ink-secondary); font-weight:600; }

.feature{ background:var(--surface); border:1.5px solid transparent; border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s; }
.feature:hover{ transform:translateY(-4px); box-shadow:var(--lift); border-color:var(--border-strong); }
.feature-ico{ width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:23px; margin-bottom:14px; }
.feature h3{ font-size:18px; color:var(--brand-dark); margin-bottom:8px; }
.feature p{ font-size:13.5px; color:var(--ink-secondary); line-height:1.6; }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media(max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 20px; box-shadow:var(--shadow); }
.step-n{ width:32px; height:32px; border-radius:10px; background:var(--brand-wash); color:var(--brand-dark); font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.step h4{ font-size:16px; margin-bottom:6px; color:var(--brand-dark); }
.step p{ font-size:13px; color:var(--ink-secondary); line-height:1.55; }

/* role cards on landing */
.role-card{ border-radius:20px; padding:26px 24px; color:#fff; box-shadow:var(--lift); display:flex; flex-direction:column; }
.role-card.r-customer{ background:linear-gradient(135deg,#7a3418,#c1592f); }
.role-card.r-guard{ background:linear-gradient(135deg,#1e4560,#2a78d6); }
.role-card.r-admin{ background:linear-gradient(135deg,#3b325b,#6b5b95); }
.role-card.r-kids{ background:linear-gradient(135deg,#8c4e12,#eda100); }
.role-card.r-health{ background:linear-gradient(135deg,#0f5132,#1baf7a); }
.role-card h3{ font-size:22px; margin-bottom:8px; }
.role-card p{ font-size:13.5px; color:rgba(255,255,255,.92); line-height:1.6; margin-bottom:16px; }
.role-card .role-list{ margin-bottom:20px; }
.role-card .role-list li{ font-size:13px; padding:6px 0 6px 24px; position:relative; color:rgba(255,255,255,.94); }
.role-card .role-list li::before{ content:"✓"; position:absolute; left:0; font-weight:800; }
.role-card .btn{ align-self:flex-start; margin-top:auto; }

/* pricing */
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px){ .plan-grid{ grid-template-columns:1fr; } }
.plan-card{ background:var(--surface); border:2px solid var(--border); border-radius:20px; padding:28px 22px; box-shadow:var(--shadow); text-align:center; position:relative; }
.plan-card.best{ border-color:var(--brand); transform:scale(1.03); }
.best-badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff; font-size:10.5px; font-weight:700; padding:4px 14px; border-radius:999px; }
.plan-name{ font-size:15px; font-weight:700; color:var(--ink-secondary); margin-bottom:6px; }
.plan-price{ font-size:34px; font-weight:800; color:var(--brand-dark); }
.plan-per{ font-size:12.5px; color:var(--ink-secondary); margin-bottom:16px; }
.plan-feats{ font-size:13px; color:var(--ink-secondary); margin-bottom:20px; }
.plan-feats li{ padding:6px 0; border-bottom:1px dashed var(--border); }
.plan-feats li:last-child{ border-bottom:none; }

.quote-card{ background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:24px; box-shadow:var(--shadow); }
.quote-card p{ font-size:14px; line-height:1.65; color:var(--ink); margin-bottom:16px; }
.quote-who{ display:flex; align-items:center; gap:10px; }
.quote-who .n{ font-weight:700; font-size:13.5px; }
.quote-who .r{ font-size:12px; color:var(--ink-secondary); }

.cta-band{ background:linear-gradient(135deg,#7a3418,#c1592f); border-radius:24px; padding:50px 44px; color:#fff; text-align:center; box-shadow:var(--lift); }
.cta-band h2{ font-size:31px; margin-bottom:12px; }
.cta-band p{ font-size:15px; color:rgba(255,255,255,.92); max-width:560px; margin:0 auto 26px; }
.cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.site-footer{ background:var(--bg); border-top:1px solid var(--border); padding:48px 0 26px; margin-top:70px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; }
@media(max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h5{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-secondary); margin:0 0 12px; }
.footer-grid a{ display:block; font-size:13.5px; color:var(--ink-secondary); padding:5px 0; }
.footer-grid a:hover{ color:var(--brand); }
.footer-bottom{ margin-top:30px; padding-top:18px; border-top:1px solid var(--border); font-size:12.5px; color:var(--ink-secondary); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ==========================================================================
   AUTH PAGES
   ========================================================================== */
.auth-page{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
@media(max-width:920px){ .auth-page{ grid-template-columns:1fr; } .auth-aside{ display:none; } }
.auth-aside{ background:linear-gradient(140deg,#5f2712,#7a3418 55%,#c1592f); color:#fff; padding:52px 48px; display:flex; flex-direction:column; justify-content:space-between; }
.auth-aside h2{ font-size:31px; line-height:1.2; margin-bottom:14px; }
.auth-aside p{ color:rgba(255,255,255,.88); font-size:14.5px; line-height:1.65; max-width:400px; }
.auth-aside .role-list{ margin-top:26px; }
.auth-aside .role-list li{ font-size:13.5px; padding:7px 0 7px 26px; position:relative; color:rgba(255,255,255,.94); }
.auth-aside .role-list li::before{ content:"✓"; position:absolute; left:0; font-weight:800; }
.auth-main{ display:flex; align-items:center; justify-content:center; padding:44px 24px; }
.auth-card{ width:100%; max-width:430px; }
.auth-card h1{ font-size:27px; color:var(--brand-dark); margin-bottom:6px; }
.auth-card .sub{ font-size:14px; color:var(--ink-secondary); margin-bottom:22px; }
.action-link{ color:var(--brand); font-weight:700; font-size:12.5px; cursor:pointer; }
.action-link:hover{ text-decoration:underline; }

.role-toggle{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:20px; }
@media(max-width:420px){ .role-toggle{ grid-template-columns:1fr 1fr; } }
.role-opt{ border:2px solid var(--border); background:var(--surface); border-radius:14px; padding:12px 10px; cursor:pointer; text-align:center; transition:.15s; }
.role-opt .ri{ font-size:20px; }
.role-opt .rn{ font-weight:700; font-size:12.5px; margin-top:3px; }
.role-opt.selected{ border-color:var(--brand); background:var(--brand-wash); }
.password-wrap{ position:relative; }
.password-wrap input{ padding-right:44px; }
.password-eye{ position:absolute; right:10px; top:31px; border:none; background:transparent; cursor:pointer; font-size:15px; opacity:.55; width:auto; padding:4px; }
.password-eye:hover{ opacity:.9; }
.auth-switch{ text-align:center; font-size:13px; color:var(--ink-secondary); margin-top:18px; }
.auth-switch a{ color:var(--brand); font-weight:700; }
.demo-box{ background:var(--surface-2); border:1.5px dashed var(--border-strong); border-radius:14px; padding:14px 16px; font-size:12.5px; color:var(--ink-secondary); margin-bottom:20px; line-height:1.7; }
.demo-box b{ color:var(--brand-dark); }
.demo-box code{ background:var(--brand-wash); padding:1px 6px; border-radius:5px; font-size:12px; color:var(--brand-dark); }

/* ==========================================================================
   PORTAL SHELL (all roles)
   ========================================================================== */
.app{ display:flex; min-height:100vh; }
.sidebar{
  width: var(--sidebar-w); flex-shrink: 0;
  background: linear-gradient(180deg, #7a3418 0%, #5f2712 100%);
  color: #fbeee0; padding: 20px 14px;
  position: fixed; top:0; left:0; bottom:0; overflow-y:auto;
  transition: transform .25s ease; z-index: 80; display:flex; flex-direction:column;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding: 4px 8px 18px; }
.sidebar-brand .brand-mark{ background:rgba(255,255,255,.16); box-shadow:none; }
.sidebar-brand .bn{ font-size:18px; font-weight:800; color:#fff; }
.sidebar-brand .bs{ font-size:11px; color:#e8c7ac; }
.side-section{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#e0b393; padding:14px 12px 6px; }
.nav-item{
  display:flex; align-items:center; gap:11px; padding: 11px 13px; border-radius: 11px; margin-bottom:2px;
  color: #f3d9c4; font-size: 14px; font-weight: 600; background: transparent; border: none; width:100%; text-align:left; cursor:pointer;
}
.nav-item .ni{ font-size: 16px; width:20px; text-align:center; }
.nav-item:hover{ background: rgba(255,255,255,0.09); color:#fff; }
.nav-item.active{ background: #fbeee0; color: var(--brand-dark); }
.nav-item .badge{ margin-left:auto; background:var(--brand); color:#fff; font-size:10.5px; padding:2px 8px; }
.nav-item.active .badge{ background:var(--brand); color:#fff; }
.sidebar-foot{ margin-top:auto; padding-top: 16px; }
.sidebar-foot .note-card{ background:rgba(255,255,255,.10); color:#f3d9c4; border:1px solid rgba(255,255,255,.18); font-size:12px; padding:13px; }
.sidebar-foot .note-card b{ color:#fff; }

.portal-main{ margin-left: var(--sidebar-w); flex: 1; min-width: 0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 28px; background:rgba(255,250,243,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40;
}
.topbar-title{ font-size:19px; font-weight:800; color:var(--brand-dark); }
.topbar-sub{ font-size:12.5px; color:var(--ink-secondary); }
.topbar-right{ display:flex; align-items:center; gap:10px; }
.icon-btn{ border:1px solid var(--border); background:var(--surface); width:38px; height:38px; border-radius:11px; font-size:16px; position:relative; }
.icon-btn .dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--brand); }
.menu-toggle{ display:none; border:1px solid var(--border); background:var(--surface); border-radius:10px; padding:8px 11px; font-size:17px; }
.user-chip{ display:flex; align-items:center; gap:9px; cursor:pointer; padding:5px 12px 5px 6px; border-radius:999px; border:1px solid var(--border); background:var(--surface); }
.user-chip .av{ width:28px;height:28px;border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.user-chip .un{ font-size:13px; font-weight:700; line-height:1.15; }
.user-chip .ur{ font-size:11px; color:var(--ink-secondary); }
.user-menu{ position:absolute; top:62px; right:28px; width:230px; background:var(--surface); border-radius:14px; box-shadow:var(--lift); border:1px solid var(--border); padding:8px; display:none; z-index:90; }
.user-menu.open{ display:block; }
.user-menu a{ display:block; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--ink-secondary); }
.user-menu a:hover{ background:var(--surface-2); color:var(--brand-dark); }
.user-menu .sep{ height:1px; background:var(--border); margin:6px 4px; }
.user-menu .danger{ color:var(--critical); }

.page-body{ padding:24px 30px 60px; max-width:1220px; width:100%; }
.page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h2{ font-size:23px; color:var(--brand-dark); }
.page-head .lead{ font-size:13.5px; color:var(--ink-secondary); max-width:600px; margin-top:4px; }

.scrim{ position:fixed; inset:0; background:rgba(44,32,19,.4); z-index:70; display:none; }
.scrim.open{ display:block; }

@media (max-width: 1000px){
  .sidebar{ transform: translateX(-100%); box-shadow:var(--lift); }
  .sidebar.open{ transform: translateX(0); }
  .portal-main{ margin-left:0; }
  .menu-toggle{ display:inline-flex; }
  .page-body{ padding: 20px 16px 50px; }
  .topbar{ padding:14px 16px; }
  .user-menu{ right:16px; }
}
@media (max-width: 560px){ .user-chip .um{ display:none; } }

/* profile bits */
.profile-head{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:6px; }
.profile-avatar{ width:76px; height:76px; border-radius:22px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:30px; color:#fff; background:linear-gradient(135deg,#7a3418,#c1592f); box-shadow:0 8px 20px rgba(122,52,24,.25); }
.profile-name{ font-weight:800; font-size:24px; color:var(--brand-dark); }
.kv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.kv{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.kv .k{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-secondary); }
.kv .v{ font-size:14.5px; font-weight:700; color:var(--ink); margin-top:3px; }

/* ---------- scan / upload & extract ---------- */
.capture-box{ border:2px dashed var(--border-strong); border-radius:16px; padding:26px 18px; text-align:center; background:var(--surface-2); }
.capture-icon{ font-size:32px; margin-bottom:8px; }
.capture-box .cap-text{ font-size:13px; color:var(--ink-secondary); margin-bottom:14px; }
.choose-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.chosen-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; padding:11px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; }
.chosen-row .fname{ font-weight:600; font-size:13px; color:var(--ink-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; display:flex; align-items:center; gap:8px; }
.scan-progress{ display:flex; align-items:center; gap:11px; justify-content:center; padding:20px; color:var(--ink-secondary); font-weight:600; font-size:13.5px; }
.spinner{ width:19px; height:19px; border-radius:50%; border:2.5px solid var(--border); border-top-color:var(--brand); animation:spin .8s linear infinite; flex:0 0 auto; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.extract-head{ display:flex; align-items:center; gap:10px; margin:18px 0 10px; flex-wrap:wrap; }
.extract-head h4{ font-size:14px; color:var(--brand-dark); }
.mock-note{ font-size:11.5px; color:var(--ink-muted); margin-top:12px; text-align:center; line-height:1.5; }
.extract-table input, .extract-table select{ padding:7px 9px; font-size:12.5px; }
.extract-table td{ padding:7px 6px; vertical-align:middle; }
.extract-table th{ padding:6px; }
/* uploaded bill shown in full (never cropped) */
.bill-preview{ display:block; width:100%; max-height:300px; object-fit:contain; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; margin-bottom:14px; }
.bill-pdf{ display:flex; align-items:center; gap:10px; padding:14px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; margin-bottom:14px; font-weight:600; color:var(--ink-secondary); }
.bill-pdf .doc{ font-size:24px; }

/* ---------- usual (tap-to-log) rows ---------- */
.usual-row{ display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--border); border-radius:12px; background:var(--surface); cursor:pointer; transition:.14s; margin-bottom:8px; }
.usual-row:hover{ border-color:var(--brand); background:var(--surface-2); transform:translateY(-1px); }
.usual-row .u-ico{ width:38px; height:38px; border-radius:10px; background:var(--brand-wash); display:flex; align-items:center; justify-content:center; font-size:19px; flex:0 0 auto; }
.usual-row .u-name{ font-weight:700; font-size:13.5px; }
.usual-row .u-sub{ font-size:11.5px; color:var(--ink-muted); }
.usual-row .u-amt{ margin-left:auto; font-weight:800; font-size:13.5px; color:var(--brand-dark); white-space:nowrap; }

/* tabs */
.tabs{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:3px; margin-bottom:18px; flex-wrap:wrap; }
.tab-btn{ border:none; background:transparent; padding:8px 16px; font-size:12.5px; font-weight:700; color:var(--ink-secondary); border-radius:8px; }
.tab-btn.active{ background:var(--brand); color:#fff; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeIn .22s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

/* ==========================================================================
   MOBILE REFINEMENTS
   Kill horizontal overflow (the usual "mobile is broken" cause) and make the
   scan / log flows comfortable on a phone.
   ========================================================================== */
/* clip (not hidden) so it never interferes with the sticky nav / topbar */
html { overflow-x: clip; }
img, svg, table, video { max-width: 100%; }
.table-wrap { -webkit-overflow-scrolling: touch; }

@media (max-width: 640px){
  /* ---- public site ---- */
  .wrap{ padding:0 16px; }
  .section-pad{ padding:44px 0; }
  .hero{ padding:24px 0 6px; }
  .hero h1{ font-size:29px; }
  .hero p.lead{ font-size:15px; }
  .section-title{ font-size:25px; }
  .section-lead{ font-size:14.5px; }
  .cta-band{ padding:32px 20px; border-radius:20px; }
  .cta-band h2{ font-size:24px; }
  .stats-strip{ gap:10px; }
  .stats-strip .n{ font-size:22px; }
  .footer-grid{ gap:20px; }

  /* ---- portal shell ---- */
  .page-body{ padding:16px 13px 42px; }
  .page-head{ gap:10px; }
  .page-head h2{ font-size:20px; }
  .topbar{ padding:12px 13px; }
  .topbar-title{ font-size:17px; }
  .card{ padding:15px 14px; }
  .card-head h3{ font-size:14.5px; }
  .stat-tile{ padding:14px 15px; }
  .stat-tile .value{ font-size:22px; }
  .profile-avatar{ width:60px; height:60px; font-size:24px; }
  .profile-name{ font-size:20px; }

  /* ---- tabs (3 must fit) ---- */
  .tabs{ width:100%; }
  .tab-btn{ padding:8px 10px; font-size:11.5px; flex:1; text-align:center; }

  /* ---- scan: full-width stacked source buttons ---- */
  .capture-box{ padding:22px 14px; }
  .choose-row{ flex-direction:column; }
  .choose-row .btn{ width:100%; }
  .chosen-row{ flex-wrap:wrap; }

  /* ---- scan review table: readable & horizontally scrollable ---- */
  .extract-table{ min-width:540px; }
  .extract-table input, .extract-table select{ min-width:82px; }

  /* ---- forms ---- */
  .field-row{ grid-template-columns:1fr; }
  input, select, textarea{ font-size:16px; }   /* 16px stops iOS auto-zoom on focus */
}

@media (max-width: 380px){
  .btn-lg{ padding:12px 16px; font-size:14px; }
  .stats-strip{ grid-template-columns:1fr 1fr; }
  .brand-name{ font-size:18px; }
}