:root{
  --bg:#f2efe6; --surface:#d8cfb8; --card:#f8f6f0;
  --text:#1f2420; --text-muted:#5d5749; --text-faint:#7c7466;
  --border:rgba(31,36,32,.16);
  --shadow-sm:0 1px 2px rgba(31,36,32,.14); --shadow-md:0 4px 14px rgba(31,36,32,.16); --shadow-lg:0 14px 34px rgba(31,36,32,.20);
  --accent-100:#f1f5e4;--accent-200:#e2ebc9;--accent-300:#cbdda4;--accent-400:#b3cb7c;--accent-500:#8fae4f;--accent-600:#77943c;--accent-700:#5d762d;--accent-800:#445720;--accent-900:#2d3a17;
  --accent2-100:#eceee8;--accent2-200:#d8dcd2;--accent2-300:#b8bfae;--accent2-400:#929c85;--accent2-500:#6f7a61;--accent2-600:#57624b;--accent2-700:#414a37;--accent2-800:#2e3527;--accent2-900:#1f2420;
  --neutral-100:#f8f6f0;--neutral-200:#f2efe6;--neutral-300:#d8cfb8;--neutral-400:#bfb59c;--neutral-500:#9d947e;--neutral-600:#7c7466;--neutral-700:#5d5749;--neutral-800:#403c33;--neutral-900:#1f2420;
  --gold:#cdae54;--gold-soft:#efe6c7;--gold-strong:#6b5a1e;
  --danger:#a75640;--danger-soft:#f0dcd4;--danger-strong:#7a3423;
  --scrim:rgba(31,36,32,.5);
  --font-head:"Caprasimo",Georgia,serif; --font-body:"Figtree",-apple-system,BlinkMacSystemFont,sans-serif;
  --content-w:440px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15190f; --surface:#20261a; --card:#262d1e;
    --text:#eef1e4; --text-muted:#b7c0a8; --text-faint:#8a9480;
    --border:rgba(238,241,228,.14);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 14px 34px rgba(0,0,0,.5);
    --accent-100:#1c2416;--accent-200:#24301b;--accent-300:#334420;--accent-400:#4c6530;--accent-500:#7fa34d;--accent-600:#9dc169;--accent-700:#bcdb8f;--accent-800:#d9edb8;--accent-900:#eef7dc;
    --accent2-100:#1c1f18;--accent2-200:#242820;--accent2-300:#31362a;--accent2-400:#454b3a;--accent2-500:#7c8770;--accent2-600:#9aa48c;--accent2-700:#b8c0ab;--accent2-800:#d6dccb;--accent2-900:#eef0e7;
    --neutral-100:#20241b;--neutral-200:#282c22;--neutral-300:#3a4030;--neutral-400:#565c48;--neutral-500:#7c8169;--neutral-600:#9fa38c;--neutral-700:#bcc0aa;--neutral-800:#dcdfd0;--neutral-900:#f5f6ef;
    --gold:#e0c473;--gold-soft:#3a3216;--gold-strong:#f0dea3;
    --danger:#e0916f;--danger-soft:#3a241c;--danger-strong:#f0b39a;
    --scrim:rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#15190f; --surface:#20261a; --card:#262d1e;
  --text:#eef1e4; --text-muted:#b7c0a8; --text-faint:#8a9480;
  --border:rgba(238,241,228,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 14px 34px rgba(0,0,0,.5);
  --accent-100:#1c2416;--accent-200:#24301b;--accent-300:#334420;--accent-400:#4c6530;--accent-500:#7fa34d;--accent-600:#9dc169;--accent-700:#bcdb8f;--accent-800:#d9edb8;--accent-900:#eef7dc;
  --accent2-100:#1c1f18;--accent2-200:#242820;--accent2-300:#31362a;--accent2-400:#454b3a;--accent2-500:#7c8770;--accent2-600:#9aa48c;--accent2-700:#b8c0ab;--accent2-800:#d6dccb;--accent2-900:#eef0e7;
  --neutral-100:#20241b;--neutral-200:#282c22;--neutral-300:#3a4030;--neutral-400:#565c48;--neutral-500:#7c8169;--neutral-600:#9fa38c;--neutral-700:#bcc0aa;--neutral-800:#dcdfd0;--neutral-900:#f5f6ef;
  --gold:#e0c473;--gold-soft:#3a3216;--gold-strong:#f0dea3;
  --danger:#e0916f;--danger-soft:#3a241c;--danger-strong:#f0b39a;
  --scrim:rgba(0,0,0,.6);
}

*{box-sizing:border-box}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important} }
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:400; line-height:1.1; margin:0; text-wrap:balance; }
a{ color:inherit; }
button{ font-family:inherit; color:inherit; }
input,select,textarea{ font-family:inherit; color:inherit; }
svg{ display:block; flex:none; }
::selection{ background:var(--accent-200); }

/* ---------- primitives ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-weight:400; font-size:15px;
  border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  min-height:46px; padding:0 20px; text-decoration:none; color:var(--text);
  background:var(--card);
}
.btn-block{ width:100%; }
.btn-primary{ background:var(--accent-500); color:#fff; }
.btn-primary:hover{ background:var(--accent-600); }
.btn-secondary{ background:var(--surface); border-color:transparent; }
.btn-secondary:hover{ filter:brightness(0.96); }
.btn-outline{ background:transparent; border-color:var(--border); }
.btn-danger{ background:var(--danger-soft); color:var(--danger-strong); }
.btn-danger:hover{ filter:brightness(0.96); }
.btn-sm{ min-height:36px; padding:0 14px; font-size:13px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.iconbtn{ width:38px; height:38px; border-radius:50%; background:var(--surface); display:grid; place-items:center; border:0; cursor:pointer; color:var(--text); flex:none; }
.tag{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; }
.tag-accent{ background:var(--accent-100); color:var(--accent-800); }
.tag-accent2{ background:var(--accent2-200); color:var(--accent2-800); }
.tag-gold{ background:var(--gold-soft); color:var(--gold-strong); }
.tag-danger{ background:var(--danger-soft); color:var(--danger-strong); }
.tag-neutral{ background:var(--neutral-200); color:var(--neutral-800); }
.dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.card{ background:var(--card); border-radius:26px; padding:16px; }
.seg{ display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; flex-wrap:wrap; }
.seg-opt{ padding:8px 14px; font-size:13px; cursor:pointer; }
.seg-opt.active{ background:var(--accent-500); color:#fff; }
.input, textarea.input{
  width:100%; min-height:48px; padding:12px 16px; font:inherit; font-size:15px;
  color:var(--text); background:var(--surface); border:1px solid transparent; border-radius:20px;
}
.input:focus-visible{ outline:2px solid var(--accent-500); }
.progress{ flex:1; display:flex; gap:5px; }
.progress span{ flex:1; height:6px; border-radius:999px; background:var(--neutral-300); }
.progress span.on{ background:var(--accent-500); }
.kicker{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); }
.subtl{ font-size:12.5px; color:var(--text-muted); }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field label{ font-size:12px; font-weight:700; color:var(--text-muted); }
.checkgrid{ display:flex; flex-wrap:wrap; gap:8px; }
.checkgrid label{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:var(--surface); font-size:12.5px; cursor:pointer; }
.checkgrid input{ accent-color:var(--accent-600); }

/* ---------- app shell ---------- */
#app{ min-height:100vh; }
.phone{ max-width:var(--content-w); margin:0 auto; min-height:calc(100vh - 61px); background:var(--bg); padding-bottom:84px; position:relative; transition:max-width .15s; }
.phone.no-tabs{ padding-bottom:0; }
.topbar{ display:flex; align-items:center; gap:12px; padding:16px 18px 6px; }
.brandmark{ font-family:var(--font-head); font-size:19px; display:flex; align-items:center; gap:8px; }
.brandmark svg{ color:var(--accent-600); }
.langpills{ display:flex; gap:2px; padding:3px; border-radius:999px; background:var(--surface); }
.langpills span{ padding:4px 9px; border-radius:999px; font-size:11px; font-weight:700; cursor:pointer; }
.langpills span.active{ background:var(--accent-500); color:#fff; }

/* ---------- persistent app header (brand + role nav) ---------- */
.apphdr{ position:sticky; top:0; z-index:40; background:var(--card); border-bottom:1px solid var(--border); }
.apphdr-inner{ max-width:1280px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:12px 20px; flex-wrap:wrap; }
.apphdr .brandmark{ font-size:20px; }
.apphdr-right{ display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; }
.rolepills{ display:flex; gap:2px; padding:3px; border-radius:999px; background:var(--surface); }
.rolepills a{ padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:none; color:inherit; }
.rolepills a.active{ background:var(--accent-500); color:#fff; }
@media (max-width:520px){ .apphdr-inner{ padding:10px 14px; gap:8px; } .apphdr .brandmark span{ display:none; } }

.bottomtabs{
  position:fixed; left:0; right:0; bottom:0; max-width:var(--content-w); margin:0 auto;
  display:flex; background:var(--card); border-top:1px solid var(--border); padding:8px 6px 12px; box-shadow:var(--shadow-md);
  transition:max-width .15s;
}
.tabitem{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-faint); background:none; border:0; cursor:pointer; padding:6px 2px; }
.tabitem.active{ color:var(--accent-600); }
.tabitem span{ font-size:10px; font-weight:700; }

.toast{ position:fixed; left:50%; bottom:100px; transform:translateX(-50%); background:var(--accent-800); color:#fff; padding:11px 18px; border-radius:999px; font-size:13px; box-shadow:var(--shadow-md); z-index:50; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* ---------- landing ---------- */
.hero-illust{ position:relative; margin:18px 18px 0; height:190px; border-radius:30px; overflow:hidden; background:linear-gradient(165deg,var(--accent-200),var(--accent-400)); display:grid; place-items:center; }
.hero-illust .badge{ position:absolute; left:14px; top:14px; display:flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.85); font-size:11px; font-weight:700; color:#2d3a17; }
.stat-row{ display:flex; gap:8px; padding:18px; }
.stat-chip{ flex:1; padding:12px 10px; border-radius:20px; background:var(--surface); text-align:center; }
.stat-chip b{ display:block; font-family:var(--font-head); font-size:19px; font-weight:400; }
.stat-chip span{ font-size:10.5px; color:var(--text-muted); }

/* ---------- home ---------- */
.avatar{ width:44px; height:44px; border-radius:50%; background:var(--accent2-300); display:grid; place-items:center; font-family:var(--font-head); font-size:17px; color:var(--accent2-900); flex:none; }
.actionrow{ display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius:26px; text-decoration:none; color:inherit; background:var(--card); box-shadow:var(--shadow-sm); margin-bottom:10px; cursor:pointer; border:0; width:100%; text-align:left; font:inherit; }
.actionrow.primary{ background:var(--accent-200); }
.actionrow .ic{ width:54px; height:54px; border-radius:50%; background:var(--bg); display:grid; place-items:center; flex:none; color:var(--accent-700); }
.actionrow .tt{ font-family:var(--font-head); font-size:18px; display:block; }
.actionrow .ss{ font-size:12px; color:var(--text-muted); display:block; }
.section-h{ display:flex; align-items:baseline; gap:8px; margin:6px 0 10px; }
.section-h h4{ font-size:16px; }
.section-h a{ margin-left:auto; font-size:12px; color:var(--accent-700); text-decoration:none; }
.croprow{ display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; }
.croptile{ flex:1; min-width:76px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius:20px; background:var(--card); box-shadow:var(--shadow-sm); cursor:pointer; border:0; font:inherit; color:inherit; }
.croptile.add{ border:1.5px dashed var(--neutral-400); background:transparent; color:var(--text-muted); justify-content:center; }
.cropdot{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.advicerow{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:22px; background:var(--card); box-shadow:var(--shadow-sm); margin-bottom:8px; text-decoration:none; color:inherit; cursor:pointer; border:0; width:100%; text-align:left; font:inherit; }
.advicerow .ic{ width:40px; height:40px; border-radius:50%; background:var(--accent2-200); display:grid; place-items:center; flex:none; color:var(--accent2-800); }

/* ---------- wizard ---------- */
.h-tag{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px 8px 8px; border-radius:999px; background:var(--accent2-200); width:fit-content; margin:0 18px 12px; }
.h-tag .ic{ width:26px; height:26px; border-radius:50%; background:var(--bg); display:grid; place-items:center; }
.prompt-row{ display:flex; align-items:center; gap:9px; margin:0 18px 14px; }
.prompt-row .ic{ width:34px; height:34px; border-radius:50%; background:var(--accent-500); color:#fff; display:grid; place-items:center; flex:none; }
.grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:0 18px 18px; }
.tile{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px; border-radius:24px; background:var(--card); box-shadow:var(--shadow-sm); cursor:pointer; border:2.5px solid transparent; font:inherit; color:inherit; text-align:center; }
.tile.on{ background:var(--accent2-200); border-color:var(--accent2-600); }
.tile.dash{ border:2px dashed var(--neutral-400); background:transparent; color:var(--text-muted); justify-content:center; }
.tile .check{ position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background:var(--accent2-700); color:#fff; display:grid; place-items:center; }
.tile .glyph{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; }
.tile span.lbl{ font-size:13.5px; font-weight:600; }
.qa-list{ display:flex; flex-direction:column; gap:10px; padding:0 18px 18px; }
.qa-opt{ display:flex; align-items:center; gap:14px; padding:15px 16px; border-radius:24px; background:var(--surface); cursor:pointer; border:2.5px solid transparent; font:inherit; color:inherit; text-align:left; width:100%; }
.qa-opt.on{ background:var(--accent2-200); border-color:var(--accent2-600); }
.qa-opt .b{ width:30px; height:30px; border-radius:50%; flex:none; }
.qa-opt .t{ font-family:var(--font-head); font-size:18px; }
.qa-opt .sub{ margin-left:auto; font-size:11.5px; color:var(--text-muted); }
.footer-btn{ padding:0 18px 22px; }
.footer-btn .btn{ min-height:54px; font-size:16px; }

/* ---------- analyzing ---------- */
/* Fixed (non-theme-reactive) dark surface — intentionally always dark regardless of
   light/dark mode, so it must NOT use the --accent2-900 token, which flips to a light
   color in dark mode and would make this background and its light text both go pale
   (the "invisible sidebar/analyzing text" bug). */
.analyzing{ background:#1f2420; color:#f1f5e4; min-height:calc(100vh - 61px); padding:30px 24px 24px; display:flex; flex-direction:column; }
.analyzing p.rw{ color:#cbdda4; font-size:13px; margin:0 0 26px; }
.pipe-step{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:24px; background:rgba(240,250,225,.12); margin-bottom:14px; opacity:.5; }
.pipe-step.active{ opacity:1; animation:pulse 1.4s ease-in-out infinite; }
.pipe-step.done{ opacity:1; }
.pipe-step .ic{ width:40px; height:40px; border-radius:50%; background:#f1f5e4; color:#5d762d; display:grid; place-items:center; flex:none; }
.pipe-step .t{ font-size:15px; font-weight:600; }
.pipe-step .ok{ margin-left:auto; color:#b3cb7c; }
@keyframes pulse{ 0%,100%{opacity:.55} 50%{opacity:1} }
.dots{ display:flex; gap:8px; justify-content:center; margin-top:24px; }
.dots span{ width:9px; height:9px; border-radius:50%; background:#b3cb7c; animation:pulse 1.1s ease-in-out infinite; }
.dots span:nth-child(2){ animation-delay:.2s } .dots span:nth-child(3){ animation-delay:.4s }

/* ---------- result / safety ---------- */
.res-hero{ padding:22px 18px 20px; }
.res-hero .row{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.res-hero .main{ display:flex; align-items:center; gap:16px; }
.res-hero .glyph{ width:72px; height:72px; border-radius:50%; background:var(--bg); display:grid; place-items:center; flex:none; }
.res-hero h2{ font-size:25px; margin-bottom:2px; }
.why-item{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:20px; background:var(--surface); margin-bottom:8px; }
.why-item .dot{ margin-top:4px; }
.step-item{ display:flex; gap:14px; align-items:flex-start; padding:15px; border-radius:24px; background:var(--surface); margin-bottom:10px; }
.step-item.first{ background:var(--accent2-200); }
.step-item .n{ width:34px; height:34px; border-radius:50%; background:var(--neutral-800); color:var(--bg); display:grid; place-items:center; font-family:var(--font-head); font-size:16px; flex:none; }
.step-item.first .n{ background:var(--accent2-700); color:#fff; }
.step-item .tt{ display:block; font-weight:700; font-size:14.5px; margin-bottom:2px; }
.step-item .ss{ display:block; font-size:12.5px; color:var(--text-muted); }
.safety-box{ margin:18px 18px 0; padding:14px 16px; border-radius:22px; border:1.5px solid var(--accent-300); background:var(--accent-100); }
.safety-box .h{ display:flex; align-items:center; gap:8px; margin-bottom:6px; font-weight:700; font-size:13.5px; color:var(--accent-800); }
.safety-box p{ margin:0; font-size:12.5px; line-height:1.45; color:var(--accent-800); }
.source-line{ display:flex; align-items:center; gap:8px; padding:0 18px 20px; font-size:11px; color:var(--text-faint); }
.considered{ margin:20px 18px 0; padding:16px; border-radius:24px; background:var(--neutral-100); }
.considered .row2{ display:flex; align-items:center; gap:10px; font-size:13.5px; padding:4px 0; }
.mini-r{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:18px; background:var(--bg); margin-bottom:8px; }
.mini-r .nm{ font-weight:600; font-size:13px; } .mini-r .lc{ font-size:11px; color:var(--text-muted); }

/* ---------- verify ---------- */
.searchbar{ display:flex; align-items:center; gap:10px; padding:6px 8px 6px 16px; border-radius:999px; background:var(--surface); margin:0 18px 14px; }
.searchbar input{ flex:1; border:0; background:none; font:inherit; font-size:15px; color:var(--text); outline:none; }
.prow{ display:flex; align-items:center; gap:13px; padding:14px; border-radius:24px; background:var(--card); box-shadow:var(--shadow-sm); margin-bottom:10px; cursor:pointer; border:0; width:calc(100% - 36px); text-align:left; font:inherit; color:inherit; margin-left:18px; margin-right:18px; }
.prow .ic{ width:48px; height:48px; border-radius:16px; background:var(--neutral-300); display:grid; place-items:center; color:var(--text-muted); flex:none; }
.prow .nm{ font-family:var(--font-head); font-size:16px; }
.prow .ss{ font-size:11.5px; color:var(--text-muted); }
.pdetail-hero{ padding:18px; background:var(--accent2-200); }
.kv2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.kv2 div{ padding:13px 14px; border-radius:20px; background:var(--surface); }
.kv2 .k{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin-bottom:3px; }
.kv2 .v{ font-size:14px; font-weight:700; }

/* ---------- staff shell (agronomist + admin) ---------- */
.staffwrap{ display:flex; min-height:calc(100vh - 61px); }
/* Same fixed-dark-surface reasoning as .analyzing above — this is the bug the sidebar
   text was disappearing into: var(--accent2-900) flips light in dark mode. */
.staffnav{ width:230px; flex:none; padding:20px 14px; background:#1f2420; color:#e2ebc9; display:flex; flex-direction:column; gap:18px; min-height:calc(100vh - 61px); }
.staffnav-list{ display:flex; flex-direction:column; gap:2px; }
.staffnav-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:14px; font-size:13.5px; opacity:.8; background:none; border:0; color:inherit; text-align:left; cursor:pointer; font-family:inherit; text-decoration:none; }
.staffnav-item.active{ background:rgba(240,250,225,.16); opacity:1; font-weight:700; }
.staffnav-group{ margin:10px 12px 2px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.5; }
.staffnav-item.inert{ cursor:default; opacity:.55; }
.staff-user{ margin-top:auto; display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:16px; background:rgba(240,250,225,.1); }
.staffmain{ flex:1; padding:26px 30px; min-width:0; }
.staffhead{ display:flex; align-items:center; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.statgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; }
.statcard{ padding:18px; border-radius:24px; background:var(--surface); }
.statcard .k{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px; }
.statcard .v{ font-family:var(--font-head); font-size:32px; }
.statcard .d{ font-size:12px; color:var(--accent2-700); margin-top:4px; }
.panelgrid{ display:grid; grid-template-columns:1.55fr 1fr; gap:16px; margin-bottom:16px; }
.chartcard{ padding:20px; border-radius:26px; background:var(--surface); }
.bars{ display:flex; align-items:flex-end; gap:7px; height:160px; }
.bars span{ flex:1; display:block; border-radius:8px 8px 3px 3px; background:var(--accent2-400); }
.donut{ width:112px; height:112px; border-radius:50%; display:grid; place-items:center; flex:none; }
.donut i{ width:70px; height:70px; border-radius:50%; background:var(--surface); display:grid; place-items:center; text-align:center; font-style:normal; font-family:var(--font-head); font-size:17px; }
.legend{ display:flex; flex-direction:column; gap:8px; font-size:12.5px; }
.legend span{ display:flex; align-items:center; gap:8px; }
.simple-table{ width:100%; border-collapse:collapse; font-size:13px; }
.simple-table th{ text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); padding:6px 8px; border-bottom:1px solid var(--border); }
.simple-table td{ padding:8px; border-bottom:1px solid var(--border); }
.twocol{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.queuecol{ width:300px; flex:none; padding:20px 16px; background:var(--card); border-right:1px solid var(--border); }
.qcase{ padding:13px; border-radius:20px; background:var(--bg); margin-bottom:9px; cursor:pointer; border:2px solid transparent; }
.qcase.active{ border-color:var(--accent-500); }
.qcase .top{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.qcase .top b{ font-size:13.5px; }
.qcase .meta{ font-size:11.5px; color:var(--text-muted); }
.aibar{ display:block; height:8px; border-radius:999px; margin-top:4px; }
.confirmrow{ display:flex; align-items:center; gap:10px; padding:16px 20px; border-radius:24px; background:var(--accent2-200); flex-wrap:wrap; }

/* ---------- admin CRUD ---------- */
.crudhead{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.datarow{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:20px; background:var(--card); margin-bottom:8px; flex-wrap:wrap; }
.datarow .main{ flex:1; min-width:160px; }
.datarow .main b{ font-family:var(--font-head); font-size:15px; font-weight:400; }
.datarow .main span{ display:block; font-size:12px; color:var(--text-muted); }
.formcard{ padding:20px; border-radius:26px; background:var(--surface); margin-bottom:18px; }
.formcard .formgrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
@media (max-width:640px){ .formcard .formgrid{ grid-template-columns:1fr; } }

/* ---------- auth ---------- */
.authwrap{
  min-height:calc(100vh - 61px); display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    linear-gradient(180deg, rgba(20,26,20,.55), rgba(20,26,20,.72)),
    url('assets/farmer-bg.jpg') center/cover no-repeat;
}
.authcard{ width:100%; max-width:400px; padding:30px 26px; border-radius:28px; background:var(--card); box-shadow:var(--shadow-lg); }
.authcard h2{ font-size:24px; margin-bottom:6px; }
.autherr{ background:var(--danger-soft); color:var(--danger-strong); padding:10px 14px; border-radius:16px; font-size:13px; margin-bottom:14px; }
.authswitch{ text-align:center; font-size:13px; color:var(--text-muted); margin-top:16px; }
.authswitch a{ color:var(--accent-700); font-weight:700; text-decoration:none; cursor:pointer; }
.logoutbtn{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--text-muted); background:none; border:0; cursor:pointer; padding:4px 6px; }

.empty-state{ margin:24px 18px; padding:30px 20px; border-radius:30px; background:var(--neutral-100); text-align:center; }
.footer-note{ display:flex; gap:8px; align-items:flex-start; padding:20px 18px 90px; font-size:11.5px; color:var(--text-faint); }

/* ---------- responsive: widen the farmer content column on larger screens ---------- */
@media (min-width:640px){
  :root{ --content-w:600px; }
  .grid2{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1000px){
  :root{ --content-w:760px; }
  .grid2{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- mobile side drawer (admin / agronomist sidebar) ---------- */
.navtoggle{ display:none; width:38px; height:38px; border-radius:50%; background:var(--surface); align-items:center; justify-content:center; border:0; cursor:pointer; color:var(--text); flex:none; }
.navscrim{ display:none; }
.staffnav-close{ display:none; }
@media (max-width:900px){
  .staffnav-close{ display:flex; justify-content:flex-end; margin-bottom:4px; }
  .staffnav-close button{ background:rgba(240,250,225,.12); color:inherit; }
  .statgrid{ grid-template-columns:repeat(2,1fr); }
  .panelgrid, .twocol{ grid-template-columns:1fr; }
  .staffwrap{ flex-direction:column; }
  .navtoggle{ display:inline-flex; }
  .staffnav{
    position:fixed; top:61px; left:0; bottom:0; z-index:60; width:78vw; max-width:290px;
    flex-direction:column; align-items:stretch; flex-wrap:nowrap;
    transform:translateX(-100%); transition:transform .22s ease; overflow-y:auto;
    box-shadow:var(--shadow-lg); min-height:0;
  }
  .staffnav.open{ transform:translateX(0); }
  .staffnav-list{ flex-direction:column; flex-wrap:nowrap; }
  .staff-user{ margin-top:auto; margin-left:0; }
  .navscrim{
    display:block; position:fixed; top:61px; left:0; right:0; bottom:0; background:var(--scrim);
    z-index:55; opacity:0; pointer-events:none; transition:opacity .2s;
  }
  .navscrim.show{ opacity:1; pointer-events:auto; }
  .queuecol{ width:100%; border-right:0; border-bottom:1px solid var(--border); }
}
@media (max-width:480px){
  .staffmain{ padding:18px 14px; }
  .formcard{ padding:16px; }
}
@media (max-width:420px){
  .statgrid{ grid-template-columns:1fr; }
  .kv2{ grid-template-columns:1fr; }
  .rolepills a{ padding:6px 10px; font-size:11.5px; }
  .authcard{ padding:24px 18px; }
}