/* ─── THE LAB.SG Design System ─── */
/* Palette: Ink (#1a1a1a), Sage (#7a9e87), Stone (#f5f3ef), Mist (#e8e4de), Chalk (#ffffff) */

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

:root {
  --ink:      #1a1a1a;
  --ink-soft: #3d3d3a;
  --ink-mute: #7a7874;
  --sage:     #7a9e87;
  --sage-lt:  #e8f0eb;
  --stone:    #f5f3ef;
  --mist:     #e8e4de;
  --chalk:    #ffffff;
  --red-lt:   #faece7;
  --red-dk:   #993c1d;
  --blue-lt:  #e6f1fb;
  --blue-dk:  #185fa5;
  --amber-lt: #faeeda;
  --amber-dk: #854f0b;
  --nir-lt:   #eaf3de;
  --nir-dk:   #3b6d11;
  --danger:   #c0392b;
  --radius:   12px;
  --radius-sm: 8px;
  --nav-h:    64px;
  --top-h:    56px;
  --font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

html, body { height: 100%; font-family: var(--font); background: var(--stone); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ── SPLASH ── */
#splash { position: fixed; inset: 0; background: var(--ink); display: flex; align-items: center; justify-content: center; z-index: 999; transition: opacity 0.5s ease; }
.splash-inner { text-align: center; }
.splash-logo { font-size: 22px; font-weight: 500; color: var(--chalk); letter-spacing: 0.18em; margin-bottom: 4px; }
.splash-tag { font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.2em; margin-bottom: 40px; }
.splash-loader { width: 120px; height: 2px; background: rgba(255,255,255,0.15); border-radius: 2px; overflow: hidden; margin: 0 auto; }
.loader-bar { height: 100%; width: 0; background: var(--sage); border-radius: 2px; animation: load 1.8s ease-out forwards; }
@keyframes load { 0%{width:0} 60%{width:70%} 100%{width:100%} }

/* ── UTILS ── */
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; background: var(--stone); z-index: 100; }

/* ── AUTH ── */
.auth-wrap { max-width: 400px; margin: 0 auto; padding: 60px 24px 40px; }
.auth-logo { font-size: 20px; font-weight: 500; letter-spacing: 0.18em; color: var(--ink); margin-bottom: 4px; }
.auth-tag { font-size: 10px; color: var(--ink-mute); letter-spacing: 0.2em; margin-bottom: 40px; }
.tab-row { display: flex; gap: 0; border: 1px solid var(--mist); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 28px; }
.tab-btn { flex: 1; padding: 10px; background: transparent; border: none; font-size: 14px; color: var(--ink-mute); cursor: pointer; font-family: var(--font); }
.tab-btn.active { background: var(--ink); color: var(--chalk); }
.auth-form { display: flex; flex-direction: column; gap: 0; }
.field-group { margin-bottom: 16px; }
.field-group label { display: block; font-size: 12px; color: var(--ink-mute); letter-spacing: 0.06em; margin-bottom: 6px; }
.field-group input, .field-group select, .field-group textarea {
  width: 100%; padding: 12px 14px; background: var(--chalk); border: 1px solid var(--mist);
  border-radius: var(--radius-sm); font-size: 15px; color: var(--ink); font-family: var(--font);
  transition: border-color 0.15s; appearance: none;
}
.field-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%237a7874' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}
.field-group select:required:invalid { color: var(--ink-mute); }
.field-group select.select-required { border: 1.5px solid var(--sage); background-color: var(--sage-lt); }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { outline: none; border-color: var(--sage); }
.field-group textarea { resize: vertical; min-height: 80px; }
.form-error { background: #fdecea; border: 1px solid #f5c6c2; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; color: var(--danger); margin-bottom: 12px; }

/* ── BUTTONS ── */
.btn-primary { width: 100%; padding: 14px; background: var(--ink); color: var(--chalk); border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; cursor: pointer; font-family: var(--font); transition: opacity 0.15s; margin-bottom: 10px; }
.btn-primary:hover { opacity: 0.85; }
.btn-primary:active { opacity: 0.7; transform: scale(0.99); }
.btn-ghost { width: 100%; padding: 12px; background: transparent; color: var(--ink-mute); border: none; font-size: 13px; cursor: pointer; font-family: var(--font); }
.btn-ghost:hover { color: var(--ink); }
.btn-outline { padding: 11px 20px; background: transparent; border: 1px solid var(--mist); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink); cursor: pointer; font-family: var(--font); }
.btn-outline:hover { border-color: var(--ink); }
.btn-outline-white { padding: 10px 18px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35); border-radius: var(--radius-sm); font-size: 14px; color: var(--chalk); cursor: pointer; font-family: var(--font); display: inline-block; }
.btn-outline-white:hover { background: rgba(255,255,255,0.25); }
.btn-sage { width: 100%; padding: 14px; background: var(--sage); color: var(--chalk); border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 500; cursor: pointer; font-family: var(--font); transition: opacity 0.15s; margin-bottom: 10px; }
.btn-sage:hover { opacity: 0.88; }
.btn-danger { width: 100%; padding: 12px; background: transparent; border: 1px solid #f5c6c2; border-radius: var(--radius-sm); font-size: 14px; color: var(--danger); cursor: pointer; font-family: var(--font); }

/* ── APP LAYOUT ── */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.topbar { height: var(--top-h); background: var(--chalk); border-bottom: 1px solid var(--mist); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; flex-shrink: 0; }
.topbar-brand { font-size: 14px; font-weight: 500; letter-spacing: 0.16em; color: var(--ink); }
.topbar-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--chalk); border: none; font-size: 11px; font-weight: 500; cursor: pointer; font-family: var(--font); letter-spacing: 0.05em; }
main#page-container { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.bottom-nav { height: var(--nav-h); background: var(--chalk); border-top: 1px solid var(--mist); display: flex; align-items: stretch; flex-shrink: 0; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: transparent; border: none; cursor: pointer; font-family: var(--font); color: var(--ink-mute); transition: color 0.15s; padding: 0; }
.nav-item.active { color: var(--ink); }
.nav-icon { font-size: 18px; line-height: 1; }
.nav-label { font-size: 10px; letter-spacing: 0.04em; }

/* ── PAGES ── */
.page { padding: 20px 20px calc(var(--nav-h) + 20px); display: none; }
.page.active { display: block; }
.page-header { margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.page-sub { font-size: 14px; color: var(--ink-mute); }
.section-title { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-mute); margin: 24px 0 12px; }

/* ── HOME PAGE ── */
.home-greeting { font-size: 26px; font-weight: 500; color: var(--ink); margin-top: 4px; margin-bottom: 4px; }
.home-sub { font-size: 14px; color: var(--ink-mute); margin-bottom: 20px; }
.today-card { background: var(--ink); border-radius: var(--radius); padding: 20px; margin-bottom: 0; }
.today-label { font-size: 10px; letter-spacing: 0.12em; color: rgba(255,255,255,0.5); margin-bottom: 8px; }
.today-protocol { font-size: 15px; color: var(--chalk); line-height: 1.5; margin-bottom: 16px; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-card { background: var(--chalk); border: 1px solid var(--mist); border-radius: var(--radius); padding: 18px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; cursor: pointer; text-align: left; transition: border-color 0.15s; font-family: var(--font); }
.quick-card:hover { border-color: var(--sage); }
.quick-icon { font-size: 20px; color: var(--sage); }
.quick-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.wave-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wave-card { border-radius: var(--radius); padding: 14px; }
.wave-red { background: var(--red-lt); }
.wave-blue { background: var(--blue-lt); }
.wave-amber { background: var(--amber-lt); }
.wave-nir { background: var(--nir-lt); }
.wave-nm { font-size: 18px; font-weight: 500; margin-bottom: 2px; }
.wave-red .wave-nm { color: var(--red-dk); }
.wave-blue .wave-nm { color: var(--blue-dk); }
.wave-amber .wave-nm { color: var(--amber-dk); }
.wave-nir .wave-nm { color: var(--nir-dk); }
.wave-name { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.wave-use { font-size: 11px; color: var(--ink-mute); line-height: 1.4; }

/* ── ASSESSMENT ── */
.assess-progress { height: 3px; background: var(--mist); border-radius: 2px; margin-bottom: 24px; }
.assess-progress-fill { height: 100%; background: var(--sage); border-radius: 2px; transition: width 0.4s ease; }
.assess-qlabel { font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute); margin-bottom: 8px; }
.assess-qtext { font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--ink); margin-bottom: 20px; }
.assess-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.assess-opt { background: var(--chalk); border: 1px solid var(--mist); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; text-align: left; transition: border-color 0.15s; font-family: var(--font); width: 100%; }
.assess-opt:hover { border-color: var(--sage); }
.assess-opt.selected { border: 2px solid var(--ink); }
.assess-opt-top { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.assess-opt-emoji { font-size: 16px; }
.assess-opt-label { font-size: 15px; font-weight: 500; color: var(--ink); }
.assess-opt-sub { font-size: 12px; color: var(--ink-mute); padding-left: 26px; }
.assess-nav { display: flex; justify-content: space-between; gap: 12px; }
.assess-nav .btn-outline { flex: 1; }
.assess-nav .btn-primary { flex: 2; margin-bottom: 0; }

/* ── RESULTS ── */
.results-name { font-size: 22px; font-weight: 500; margin-bottom: 4px; }
.results-sub { font-size: 14px; color: var(--ink-mute); margin-bottom: 24px; }
.protocol-card { background: var(--chalk); border: 1px solid var(--mist); border-radius: var(--radius); padding: 16px; margin-bottom: 10px; }
.protocol-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wave-badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
.badge-red { background: var(--red-lt); color: var(--red-dk); }
.badge-blue { background: var(--blue-lt); color: var(--blue-dk); }
.badge-amber { background: var(--amber-lt); color: var(--amber-dk); }
.badge-nir { background: var(--nir-lt); color: var(--nir-dk); }
.badge-sage { background: var(--sage-lt); color: var(--sage); }
.protocol-wname { font-size: 15px; font-weight: 500; }
.protocol-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--stone); }
.protocol-row:last-child { border-bottom: none; }
.protocol-row span:first-child { color: var(--ink-mute); }
.protocol-row span:last-child { font-weight: 500; }
.tip-card { background: var(--sage-lt); border-radius: var(--radius); padding: 16px; margin-top: 16px; }
.tip-title { font-size: 12px; letter-spacing: 0.08em; color: var(--sage); font-weight: 500; margin-bottom: 8px; }
.tip-text { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.tip-text p { margin-bottom: 6px; }
.tip-text p:last-child { margin-bottom: 0; }

/* ── TRACKER ── */
.week-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.week-cell { background: var(--chalk); border: 1px solid var(--mist); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.15s; }
.week-cell:hover { border-color: var(--sage); }
.week-cell.done { background: var(--ink); border-color: var(--ink); }
.week-cell.done .week-num, .week-cell.done .week-check { color: var(--chalk); }
.week-num { font-size: 11px; color: var(--ink-mute); margin-bottom: 4px; }
.week-check { font-size: 16px; color: var(--mist); }
.week-cell.done .week-check { color: var(--chalk); }
.milestone-list { margin-top: 4px; }
.milestone-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mist); }
.milestone-item:last-child { border-bottom: none; }
.milestone-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mist); margin-top: 5px; flex-shrink: 0; }
.milestone-item.reached .milestone-dot { background: var(--sage); }
.milestone-week-label { font-size: 11px; color: var(--ink-mute); margin-bottom: 2px; }
.milestone-text { font-size: 13px; color: var(--ink); }
.stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.stat-card { background: var(--chalk); border: 1px solid var(--mist); border-radius: var(--radius-sm); padding: 14px 12px; text-align: center; }
.stat-val { font-size: 22px; font-weight: 500; color: var(--ink); }
.stat-label { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }

/* ── MANUAL ── */
.manual-toc { background: var(--chalk); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--mist); margin-bottom: 16px; }
.toc-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--stone); cursor: pointer; transition: background 0.12s; }
.toc-item:last-child { border-bottom: none; }
.toc-item:hover { background: var(--stone); }
.toc-num { font-size: 12px; color: var(--ink-mute); width: 20px; }
.toc-name { font-size: 14px; color: var(--ink); font-weight: 500; flex: 1; }
.toc-arrow { color: var(--ink-mute); font-size: 12px; }
.manual-section { background: var(--chalk); border-radius: var(--radius); border: 1px solid var(--mist); overflow: hidden; margin-bottom: 12px; }
.manual-section-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; }
.manual-section-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.manual-section-body { padding: 0 16px 16px; display: none; border-top: 1px solid var(--stone); padding-top: 12px; }
.manual-section-body.open { display: block; }
.manual-section-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 10px; }
.manual-section-body p:last-child { margin-bottom: 0; }
.manual-step { display: flex; gap: 12px; margin-bottom: 14px; }
.manual-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--chalk); font-size: 11px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.manual-step-text { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.manual-step-text strong { color: var(--ink); }
.warn-box { background: var(--amber-lt); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 12px; }
.warn-box p { font-size: 13px; color: var(--amber-dk); line-height: 1.5; margin: 0; }
.warn-box strong { color: var(--ink); }
.spec-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--stone); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table td { padding: 8px 0; vertical-align: top; }
.spec-table td:first-child { color: var(--ink-mute); width: 45%; }
.spec-table td:last-child { color: var(--ink); font-weight: 500; }

/* ── WARRANTY ── */
.warranty-status { border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.warranty-active { background: var(--sage-lt); border: 1px solid var(--sage); }
.warranty-inactive { background: var(--mist); border: 1px solid var(--mist); }
.warranty-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 10px; }
.badge-active { background: var(--sage); color: var(--chalk); }
.badge-pending { background: var(--amber-lt); color: var(--amber-dk); }
.warranty-product { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.warranty-details { font-size: 13px; color: var(--ink-mute); }
.warranty-row { display: flex; justify-content: space-between; font-size: 13px; padding: 10px 0; border-bottom: 1px solid var(--mist); }
.warranty-row:last-child { border-bottom: none; }
.warranty-row span:first-child { color: var(--ink-mute); }
.warranty-row span:last-child { font-weight: 500; }
.warranty-form { background: var(--chalk); border-radius: var(--radius); border: 1px solid var(--mist); padding: 20px; }
.warranty-form h3 { font-size: 16px; font-weight: 500; margin-bottom: 16px; }
.coverage-list { margin-top: 4px; }
.coverage-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--stone); font-size: 13px; }
.coverage-item:last-child { border-bottom: none; }
.coverage-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.coverage-text { color: var(--ink-soft); line-height: 1.5; }
.coverage-text strong { color: var(--ink); display: block; margin-bottom: 1px; }

/* ── PROFILE ── */
.profile-card { background: var(--chalk); border-radius: var(--radius); border: 1px solid var(--mist); padding: 20px; margin-bottom: 12px; }
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--chalk); font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.profile-name { font-size: 18px; font-weight: 500; margin-bottom: 2px; }
.profile-email { font-size: 13px; color: var(--ink-mute); }
.profile-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--stone); font-size: 14px; }
.profile-row:last-child { border-bottom: none; }
.profile-row-label { color: var(--ink-mute); }
.profile-row-val { font-weight: 500; }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 48px 24px; }
.empty-icon { font-size: 36px; color: var(--mist); margin-bottom: 16px; }
.empty-title { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.empty-sub { font-size: 13px; color: var(--ink-mute); margin-bottom: 24px; line-height: 1.6; }

/* ── TOAST ── */
.toast { position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--chalk); padding: 12px 20px; border-radius: 20px; font-size: 13px; font-weight: 500; z-index: 999; white-space: nowrap; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.toast.show { opacity: 1; }

/* ── DIVIDER ── */
.divider { height: 1px; background: var(--mist); margin: 20px 0; }

/* ── SAFE AREA ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .page { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px); }
}

/* ── RESPONSIVE ── */
@media (max-width: 375px) {
  .wave-nm { font-size: 15px; }
  .home-greeting { font-size: 22px; }
  .stat-val { font-size: 18px; }
}

/* ── SIGN OUT BUTTON ── */
.topbar-signout {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--mist);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
  font-family: var(--font);
  letter-spacing: 0.03em;
  transition: all 0.15s;
}
.topbar-signout:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ── SIGN OUT BUTTON ── */
.topbar-signout { padding:5px 12px;background:transparent;border:1px solid var(--mist);border-radius:var(--radius-sm);font-size:12px;color:var(--ink-mute);cursor:pointer;font-family:var(--font);transition:all 0.15s; }
.topbar-signout:hover { border-color:var(--ink);color:var(--ink); }

/* ── DISCLAIMER BOX ── */
.disclaimer-box { background:var(--stone);border:1px solid var(--mist);border-radius:var(--radius-sm);padding:12px 14px;margin-top:20px; }
.disclaimer-box p { font-size:11px;color:var(--ink-mute);line-height:1.6; }

/* ── WEEK 4 CHECK-IN ── */
.checkin-card { background:var(--sage-lt);border:1px solid var(--sage);border-radius:var(--radius);padding:18px;margin-bottom:16px; }
.checkin-title { font-size:14px;font-weight:500;color:var(--ink);margin-bottom:6px; }
.checkin-sub { font-size:13px;color:var(--ink-soft);margin-bottom:12px;line-height:1.5; }
.checkin-options { display:flex;flex-direction:column;gap:8px; }
.checkin-btn { background:var(--chalk);border:1px solid var(--mist);border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;font-family:var(--font);transition:border-color 0.15s; }
.checkin-btn:hover { border-color:var(--sage); }
.star-row { display:flex;gap:8px;margin:8px 0; }
.star-btn { background:none;border:none;font-size:28px;cursor:pointer;color:var(--amber-dk);padding:4px;transition:transform 0.1s; }
.star-btn:hover { transform:scale(1.2); }

/* ── AVATAR GEAR BADGE ── */
.avatar-gear {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  background: var(--sage);
  color: var(--chalk);
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--chalk);
  line-height: 1;
}