:root { --bg:#f6f7f4; --card:#fff; --ink:#1d2419; --muted:#667061; --line:#dde2d6;
  --green:#2f6b2a; --green-ink:#fff; --warn:#9a3b12; --warn-bg:#fdeee6; --ok-bg:#e9f4e5; }
@media (prefers-color-scheme: dark) { :root { --bg:#141712; --card:#1d211b; --ink:#e7ebe3; --muted:#9aa393;
  --line:#30362c; --green:#6fb563; --green-ink:#10200d; --warn:#ffab85; --warn-bg:#3a2016; --ok-bg:#1f3019; } }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink); }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
h1 { font-size: 22px; margin: 8px 0 4px; } h2 { font-size: 18px; margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0; }
button, .btn { font: inherit; border-radius: 10px; border:1px solid var(--line); background:var(--card); color:var(--ink); padding:10px 14px; cursor:pointer; }
button.big { width:100%; padding:16px; font-size:18px; font-weight:600; margin-top:8px; }
button.primary { background:var(--green); color:var(--green-ink); border-color:var(--green); }
button:disabled { opacity:.45; cursor:not-allowed; }
input, select { font: inherit; width:100%; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--ink); }
.login main { max-width: 360px; padding-top: 12vh; }
.login input { margin: 12px 0 4px; font-size: 20px; }
.err { color: var(--warn); min-height: 1.4em; }
.warn { background:var(--warn-bg); color:var(--warn); border-radius:8px; padding:10px 12px; margin:8px 0; font-size:14px; }
.ok { background:var(--ok-bg); border-radius:8px; padding:10px 12px; margin:8px 0; font-size:14px; }
.row { display:flex; gap:8px; align-items:center; }
.row > * { flex:1; }
table { width:100%; border-collapse:collapse; font-size:14px; }
td, th { text-align:left; padding:6px 4px; border-bottom:1px solid var(--line); vertical-align:top; }
.hi { font-weight:700; }
.tabs { display:flex; gap:6px; margin:8px 0; } .tabs button { flex:1; } .tabs button.on { background:var(--green); color:var(--green-ink); }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
label.f { display:block; font-size:13px; color:var(--muted); }
label.f input, label.f select { margin-top:3px; color:var(--ink); }
nav { display:flex; justify-content:space-between; align-items:center; }
nav a { color: var(--muted); font-size: 14px; }
.hidden { display:none !important; }
.pill { display:inline-block; font-size:12px; padding:1px 8px; border-radius:999px; background:var(--ok-bg); }
.pill.bad { background:var(--warn-bg); color:var(--warn); }

/* sticker preview on the Herb names screen: real mm size, enlarged 3x */
@font-face { font-family: "NSDeva"; font-weight: 700; src: url(/static/fonts/NotoSansDevanagari-Bold.woff2) format("woff2"); }
@font-face { font-family: "RCond"; font-weight: 700; src: url(/static/fonts/RobotoCondensed-Bold.woff2) format("woff2"); }
.pv { background: #cfe3a4; border-radius: 6px; padding: 10px; display: flex; justify-content: center; overflow: hidden; }
.pvIn { zoom: 3; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; outline: 0.2mm dashed #888; }
.pvIn .stk { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.15mm; }
.pvIn .fit { white-space: nowrap; line-height: 1.08; font-weight: 700; max-width: 100%; }
.pvIn .hi { font-family: "NSDeva", sans-serif; } .pvIn .bo { font-family: "RCond", "NSDeva", sans-serif; letter-spacing: .02em; }
.pvIn .sk { font-family: "RCond", sans-serif; letter-spacing: .06em; }
.mainnav { margin: 4px 0 8px; flex-wrap: wrap; }
.mainnav button { flex: 1 1 auto; padding: 10px 10px; }
.inboxRow.fresh { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.inboxRow .row { align-items: flex-start; }
.qno { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
       background:var(--green); color:var(--green-ink); font-size:13px; font-weight:700; margin-right:6px; }
.pill.kind { background: var(--line); color: var(--ink); margin-left: 4px; }
button.small { padding: 3px 10px; font-size: 13px; margin-left: 6px; }
details summary { cursor: pointer; margin-top: 8px; }

/* measurement diagram on the Settings screen */
.dim { margin: 6px 0 10px; }
.dim svg { width: 100%; height: auto; display: block; --paper: #ffffff; }
.dim .paper { fill: var(--paper); }
.dim .edge { stroke: var(--ink); stroke-width: 2; }
.dim .stkr { fill: #e3efd2; stroke: #6b8f4e; stroke-width: 1.2; }
.dim .num { font: 700 11px system-ui, sans-serif; fill: #3d5a2a; }
.dim .smp { font: 700 15px "NSDeva", sans-serif; fill: #1d2419; }
.dim .dl { stroke: #b4461c; stroke-width: 1.4; }
.dim .tick { stroke: #b4461c; stroke-width: 1; }
.dim .ahd { fill: #b4461c; }
.dim .tag { font: 600 12px system-ui, sans-serif; fill: #1d2419; }
.dim .let { font-weight: 800; fill: #b4461c; }
.dim .cap { font: 11px system-ui, sans-serif; fill: #667061; }
@media (prefers-color-scheme: dark) {
  .dim svg { --paper: #f4f5f1; }   /* keep the "paper" light so it reads as paper */
}
.steps { padding-left: 20px; font-size: 14px; } .steps li { margin: 6px 0; } .steps ul { padding-left: 16px; }
code { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 13px; word-break: break-all; }