/* Growth Check app — SAKI SE forest green, champagne gold, warm ivory */
:root {
  --forest: #0f4535; --forest-deep: #0a2e24; --night: #071f19; --soft: #e4ece7;
  --gold: #c6a56b; --gold-bright: #d8bd86; --gold-ink: #86672e;
  --ivory: #f8f7f2; --stone: #efede5; --paper: #fff; --ink: #17201c; --muted: #5e6862; --faint: #8b948f; --line: #e3e0d5; --mist: #a9bdb4;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ivory); color: var(--ink); font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--forest); }
.boot { display: grid; place-items: center; min-height: 100vh; font: 600 1.4rem "DM Serif Display", Georgia, serif; color: var(--forest); }

/* frame */
.top { position: sticky; top: 0; z-index: 5; background: var(--night); color: var(--ivory); padding: calc(12px + var(--safe-t)) 18px 14px; }
.top .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 640px; margin: 0 auto; }
.top small { color: var(--gold); letter-spacing: .14em; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.top h1 { margin: 2px 0 0; font-size: 1.25rem; line-height: 1.25; font-weight: 650; }
.top .who { font-size: 13px; color: var(--mist); }
.icon-btn { background: transparent; border: 1px solid #24493d; color: var(--ivory); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; }
main { max-width: 640px; margin: 0 auto; padding: 16px 16px calc(96px + var(--safe-b)); }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; background: var(--paper); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + var(--safe-b)); }
.tabs .row { display: flex; justify-content: space-around; max-width: 640px; margin: 0 auto; }
.tabs button { flex: 1; background: none; border: 0; padding: 6px 2px; font-size: 11.5px; font-weight: 600; color: var(--faint); display: grid; justify-items: center; gap: 2px; min-height: 52px; }
.tabs button svg { width: 22px; height: 22px; }
.tabs button[aria-current="page"] { color: var(--forest); }

/* pieces */
h2 { font-size: 1.05rem; color: var(--forest); margin: 22px 0 8px; }
h2:first-child { margin-top: 4px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px; margin: 10px 0; }
.card.dark { background: var(--night); color: var(--ivory); border-color: var(--night); }
.card.gold { background: #f3ebdc; border-color: #e6d6b5; }
.big { font: 600 1.35rem/1.3 Inter, sans-serif; color: var(--forest); margin: 0; }
.dark .big { color: var(--ivory); }
.serif { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }
.muted { color: var(--muted); font-size: 14px; }
.dark .muted { color: var(--mist); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kv > div { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.kv small { display: block; color: var(--muted); font-size: 12px; }
.kv b { font-size: 15px; }
.chip { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
.chip.ahead { background: var(--forest); color: #fff; } .chip.on { background: var(--soft); color: var(--forest); } .chip.behind { background: #f3e6c9; color: var(--gold-ink); } .chip.none { background: var(--stone); color: var(--muted); }
.curve { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); }
.curve:last-child { border: 0; }
ul.dots { margin: 6px 0 0; padding: 0; list-style: none; }
ul.dots li { display: flex; gap: 10px; padding: 3px 0; color: var(--muted); font-size: 14.5px; }
ul.dots li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-top: 9px; flex: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px; text-align: left; display: grid; gap: 4px; }
.tile b { font-size: 15px; } .tile span { font-size: 13px; color: var(--muted); }
.msg { white-space: pre-wrap; font-size: 14.5px; line-height: 1.6; }

/* forms */
label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
label i { font-weight: 400; color: var(--muted); font-style: normal; }
input[type=text], input[type=tel], input[type=password], select, textarea { width: 100%; font-size: 16px; padding: 12px 14px; border: 1px solid #cfc8b6; border-radius: 12px; background: var(--paper); }
textarea { min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.btn { display: block; width: 100%; border: 0; border-radius: 14px; padding: 15px; font-size: 16.5px; font-weight: 700; background: var(--forest); color: #fff; margin-top: 16px; text-align: center; text-decoration: none; }
.btn.gold { background: var(--gold); color: var(--night); }
.btn.line { background: var(--paper); color: var(--forest); border: 1px solid #cfc8b6; }
.btn.small { display: inline-block; width: auto; padding: 9px 14px; font-size: 14px; margin: 8px 8px 0 0; border-radius: 12px; }
.btn:disabled { opacity: .5; }
.pick { display: block; border: 2px dashed #c9c2b0; border-radius: 16px; padding: 20px; text-align: center; background: var(--paper); font-weight: 700; color: var(--forest); margin-top: 10px; }
.pick input { display: none; }
.note { font-size: 13.5px; color: var(--muted); }
.alert { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; }
.alert.ok { background: #eaf6ef; border: 1px solid #9fd2b4; } .alert.bad { background: #fbeeea; border: 1px solid #e3b2a6; }
.cnt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cnt input { width: 90px !important; text-align: right; }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .thumbs img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.chk { display: flex; gap: 10px; align-items: center; font-weight: 600; margin-top: 12px; } .chk input { width: 20px; height: 20px; }
.link { word-break: break-all; font-size: 13px; background: var(--stone); padding: 10px; border-radius: 10px; }
.sample { background: var(--gold); color: var(--night); font-size: 12px; font-weight: 700; text-align: center; padding: 6px; }

/* welcome */
.hero { background: linear-gradient(180deg, rgba(7,31,25,.55) 0%, rgba(7,31,25,.88) 55%, var(--night) 100%), url("welcome.jpg") center 30% / cover no-repeat, var(--night); color: var(--ivory); padding: calc(150px + var(--safe-t)) 22px 30px; }
.hero .in { max-width: 640px; margin: 0 auto; }
.hero small { color: var(--gold); letter-spacing: .16em; font-size: 11px; font-weight: 700; }
.hero h1 { font: 400 2.3rem/1.08 "DM Serif Display", Georgia, serif; margin: 10px 0 12px; }
.hero h1 em { color: var(--gold-bright); }
.hero p { color: var(--mist); margin: 0; }
.install { display: none; }
.install.show { display: block; }

/* photos */
.banner { margin: 0 0 14px; border-radius: 18px; overflow: hidden; background: var(--stone); position: relative; }
.banner img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.banner figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 11px; color: #fff; font-size: 13.5px; font-weight: 600; background: linear-gradient(transparent, rgba(7,31,25,.85)); }
.team { display: grid; gap: 12px; }
.person { display: flex; align-items: center; gap: 12px; }
.person img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--gold); }
.person b { display: block; font-size: 15px; } .person span { font-size: 13px; color: var(--muted); }

/* v1.6 trends (My numbers; the Team app uses the same) */
.tr-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px 14px 14px; margin: 12px 0; }
.tr-h { margin: 0; font-size: 1rem; font-weight: 700; color: var(--forest); }
.tr-line { margin: 6px 0 10px; font-size: 15px; line-height: 1.45; padding-left: 12px; border-left: 3px solid var(--line); }
.tr-line.tr-good { border-color: #1f7a4d; } .tr-line.tr-watch { border-color: #c6a56b; } .tr-line.tr-bad { border-color: #a33a2a; } .tr-line.tr-none { color: var(--muted); }
.tr-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.tr-key { display: inline-flex; align-items: center; gap: 6px; }
.tr-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.tr-sw.line { height: 3px; border-radius: 2px; width: 16px; }
.tr-sw.dash { height: 0; width: 16px; border-top: 2px dashed var(--c); background: none; border-radius: 0; }
.tr-chart { margin: 0 -4px; touch-action: manipulation; }
.tr-svg { display: block; width: 100%; height: auto; cursor: pointer; }
.tr-read { margin: 4px 0 0; font-size: 12.5px; color: var(--faint); min-height: 2.9em; line-height: 1.45; }
.tr-read.on { color: var(--ink); }
.tr-table { margin-top: 6px; font-size: 13px; } .tr-table summary { cursor: pointer; color: var(--forest); font-weight: 600; }
.tr-foot { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 6px 2px 0; }
.tr-spark { display: inline-flex; vertical-align: middle; }