/* main.css — HydroHome KH app pages. Mobile first (test at 375px). Colours are the existing brand palette. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono&family=Noto+Sans+Khmer:wght@400;600&display=swap');
:root{--gd:#1a3d2b;--gm:#2d6a4f;--gl:#52b788;--gp:#d8f3dc;--gold:#c9a84c;--cream:#f9f6f0;--td:#1a1a1a;--tm:#4a4a4a;--tmut:#777;
  --red:#c93a39;--redp:#fdecec;--amber:#9a5f0e;--amberp:#fff6e5;--border:#e8e4da;--shadow:0 2px 12px rgba(0,0,0,.06);--r:14px}
*{box-sizing:border-box;margin:0}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--cream);color:var(--td);font-size:15px;line-height:1.55}
body.kh{font-family:'Noto Sans Khmer','DM Sans',sans-serif;line-height:1.9}   /* Khmer needs taller lines or stacked vowels clip */
[hidden]{display:none!important}
.wrap{max-width:760px;margin:0 auto;padding:16px}.wrap.narrow{max-width:420px;padding-top:48px}
.mono{font-family:'DM Mono',monospace}.muted{color:var(--tmut)}.small{font-size:13px}
h1{font-size:20px;margin-bottom:8px}h2,summary{font-size:16px;font-weight:600;margin-bottom:12px}summary{cursor:pointer;margin:0}details[open] summary{margin-bottom:12px}
.topbar{background:var(--gd);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;position:sticky;top:0;z-index:5}
.brand{font-weight:600}.brand.big{font-size:22px;text-align:center;margin-bottom:20px;color:var(--gd)}
.topbar-actions{display:flex;gap:6px}.lang-float{position:absolute;top:12px;right:12px;color:var(--gd)!important;border-color:var(--border)!important}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.headline{border-radius:var(--r);padding:18px;margin-bottom:8px;border:1px solid var(--border);background:#fff}
.headline-title{font-size:19px;font-weight:600}.headline-body{margin-top:2px}
.headline.ok{background:var(--gp);border-color:var(--gl);color:var(--gd)}.headline.warn{background:var(--amberp);border-color:#e6c27a;color:var(--amber)}
.headline.alert{background:var(--redp);border-color:#f0a9a8;color:var(--red)}.headline.offline{background:#eee;border-color:#ccc;color:#555}
.statusline{font-size:13px;color:var(--tmut);margin:0 4px 14px;display:flex;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;background:#aaa;display:inline-block}.dot.on{background:var(--gl)}.dot.off{background:var(--red)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}@media(min-width:600px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:12px;border-left-width:5px}
.tile.ok{border-left-color:var(--gl)}.tile.warn{border-left-color:#e0a030;background:var(--amberp)}.tile.alert{border-left-color:var(--red);background:var(--redp)}.tile.fault{border-left-color:#999;background:#f3f3f3}
.tile-name{font-size:12px;color:var(--tmut)}.tile-value{font-size:22px;font-weight:600;font-family:'DM Mono',monospace}.tile-msg{font-size:13px}
.ctl-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--border);flex-wrap:wrap}.ctl-row:first-of-type{border-top:0}
.ctl-name{font-weight:500}.ctl-state{font-size:13px;color:var(--tmut)}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fafafa}
.seg-btn{border:0;background:transparent;padding:9px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--tm);min-height:40px}
.seg-btn.active{background:var(--gm);color:#fff}.seg-btn:disabled{opacity:.35;cursor:not-allowed}
.login-page .seg{display:flex;margin-bottom:14px}.login-page .seg-btn{flex:1}
.field{display:block;margin-bottom:12px}.field span{display:block;font-size:13px;color:var(--tm);margin-bottom:4px}
.input{width:100%;padding:11px 12px;border:1.5px solid #ddd;border-radius:10px;font:inherit;background:#fff}.input:focus{outline:2px solid var(--gl);border-color:var(--gl)}
.small-input{width:auto;max-width:120px;padding:7px 8px;font-size:13px}
button{font:inherit}.btn-primary,.btn-secondary{display:block;width:100%;padding:12px;border-radius:10px;border:0;font-weight:600;cursor:pointer;margin-top:8px;min-height:44px}
.btn-primary{background:var(--gm);color:#fff}.btn-secondary{background:#fff;color:var(--gd);border:1.5px solid var(--gl)}
.btn-primary:disabled,.btn-secondary:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer;font-size:13px}
.card .btn-ghost,.dialog .btn-ghost{color:var(--tm);border-color:var(--border)}
.btn-link{background:none;border:0;color:var(--gm);text-decoration:underline;cursor:pointer;margin-top:10px;width:100%}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.btn-row>.btn-primary,.btn-row>.btn-secondary{flex:1;min-width:140px}.btn-col{display:flex;flex-direction:column}
.notice{background:var(--amberp);color:var(--amber);border-radius:10px;padding:10px 12px;font-size:13px;margin:8px 0}
.error{background:var(--redp);color:var(--red);border-radius:10px;padding:10px 12px;font-size:13px;margin:8px 0}
.today{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.today-item{background:var(--cream);border-radius:10px;padding:8px 10px;font-size:13px;flex:1;min-width:120px;display:flex;justify-content:space-between;gap:8px}
.events{list-style:none;padding:0}.events li{padding:8px 0;border-top:1px solid var(--border);font-size:14px;display:flex;gap:10px}.events li:first-child{border-top:0}
.evt-time{color:var(--tmut);font-size:12px;min-width:96px}
.dialog{border:0;border-radius:var(--r);padding:20px;max-width:360px;width:calc(100% - 32px)}.dialog::backdrop{background:rgba(0,0,0,.45)}.dialog h3{margin-bottom:8px}.dialog p{margin-bottom:14px;color:var(--tm)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--gd);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;max-width:90%}
.toast.show{opacity:1;transform:translate(-50%,0)}
.center-note{text-align:center;padding:60px 0;color:var(--tmut)}.spinner{width:28px;height:28px;border:3px solid var(--gp);border-top-color:var(--gm);border-radius:50%;margin:0 auto 12px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.badge{font-size:11px;background:#ddd;color:#333;border-radius:6px;padding:2px 6px;margin-left:6px}.badge.ok{background:var(--gp);color:var(--gd)}
.unit{border-top:1px solid var(--border);padding:10px 0;display:flex;flex-direction:column;gap:8px}.unit:first-child{border-top:0}
.codeblock{background:#1e1e1e;color:#d8f3dc;padding:12px;border-radius:10px;font-size:12px;overflow-x:auto;margin-top:12px;white-space:pre-wrap;word-break:break-all}

/* ── v2.1: tabs, stats, farm grid, guide, chart, manual readings ─────────────────────────── */
.tabs{display:flex;gap:2px;background:var(--gd);padding:0 8px;overflow-x:auto;position:sticky;top:46px;z-index:4;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:transparent;border:0;color:#cfe3d6;padding:10px 12px;font-size:14px;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;min-height:42px}
.tab.active{color:#fff;border-bottom-color:var(--gold);font-weight:600}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}.card-head h1,.card-head h2{margin:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:12px 8px;text-align:center}
.stat-num{font-family:'DM Mono',monospace;font-size:20px;font-weight:600;color:var(--gd)}.stat-label{font-size:11px;color:var(--tmut);line-height:1.3}
.tile.stale{opacity:.45}.tile-src{font-size:11px;color:var(--tmut);margin-top:4px}
.btn-mini{border:1px solid var(--gl);background:#fff;color:var(--gd);border-radius:8px;padding:5px 9px;font-size:12px;cursor:pointer;margin-top:6px;min-height:30px}
.chart{min-height:60px}.chart-svg{width:100%;height:auto;display:block}.chart-line{stroke:var(--gm);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}.chart-lbl{font-size:11px;fill:var(--tmut);font-family:'DM Mono',monospace}
.level h2{margin-bottom:8px}.pipe{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px dashed var(--border)}.pipe:first-of-type{border-top:0}
.pipe-label{font-size:11px;color:var(--tmut);min-width:24px;font-family:'DM Mono',monospace}
.holes{display:flex;gap:5px;flex-wrap:wrap;flex:1}
.hole{width:34px;height:34px;border-radius:50%;border:1.5px dashed #c9c4b6;background:#faf8f3;color:#b5b0a2;font-size:15px;cursor:pointer;padding:0;line-height:1}
.hole.planted{border:2px solid var(--gl);background:var(--gp);font-size:17px}.hole.ready{border-color:var(--gold);background:#fff4d6;box-shadow:0 0 0 3px rgba(201,168,76,.25)}
.bar{height:8px;background:#eee;border-radius:99px;overflow:hidden;margin:8px 0 12px}.bar-fill{height:100%;background:var(--gl);border-radius:99px}
.dialog.wide{max-width:440px}.check{display:flex;gap:8px;align-items:center;margin:4px 0 12px;font-size:14px}.check input{width:18px;height:18px}
.wrapseg{display:flex;flex-wrap:wrap;margin-bottom:12px}.wrapseg .seg-btn{flex:1 0 auto}
.crop-list{display:grid;gap:8px}@media(min-width:600px){.crop-list{grid-template-columns:1fr 1fr}}
.crop-card{display:flex;gap:12px;align-items:center;text-align:left;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer;font:inherit;width:100%}
.crop-emoji{font-size:30px}.crop-name{font-weight:600}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}.chip{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--cream);border:1px solid var(--border);color:var(--tm)}
.chip.easy{background:var(--gp);border-color:var(--gl);color:var(--gd)}.chip.med{background:var(--amberp);border-color:#e6c27a;color:var(--amber)}.chip.hard{background:var(--redp);border-color:#f0a9a8;color:var(--red)}
.steps,.checklist{list-style:none;padding:0;margin:8px 0}.step{padding:8px 10px;border-radius:10px;margin-bottom:6px;font-size:14px;background:var(--cream)}
.step.warn{background:var(--amberp)}.step.tip{background:#eef6ff}.checklist li{padding:4px 0;font-size:14px}
.btn-link.left{text-align:left;width:auto;margin:0 0 8px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.four{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media(min-width:600px){.four{grid-template-columns:repeat(4,1fr)}}
.events li .grow{flex:1}

/* v2.2: racks, selection, sharing */
.unit-picker{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:4px 6px;font-size:13px;max-width:9rem}
.unit-picker option{color:#000}
.small-btn{padding:6px 12px;font-size:13px;width:auto;min-height:34px}
.select-bar{position:sticky;top:90px;z-index:3;display:flex;gap:8px;align-items:center;background:var(--gp);border:1px solid var(--gl);border-radius:var(--r);padding:8px 10px;margin-bottom:10px}
.level{border-top:1px solid var(--border);padding-top:6px;margin-top:6px}.level:first-of-type{border-top:0;margin-top:0}
.level-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.level-name{font-weight:600;font-size:14px}
button.pipe-label{background:var(--cream);border:1px solid var(--border);border-radius:6px;cursor:pointer;padding:6px 4px;min-width:30px;min-height:30px}
.hole.picked{outline:3px solid #2f6fdb;outline-offset:1px}
.rack-rows{display:grid;gap:6px;margin:8px 0}
.rack-row{display:grid;grid-template-columns:1fr 4.5rem 4.5rem 4.5rem 2.2rem;gap:6px;align-items:center}
.rack-row.head span{font-size:11px}

/* ── 3D farm ── */
.farm3d{position:relative;height:380px;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#f3f7f1 0%,#e9e3d4 100%);touch-action:none;cursor:grab}
.farm3d:active{cursor:grabbing}.farm3d canvas{display:block;width:100%!important;height:100%!important}
@media(max-width:600px){.farm3d{height:300px}}
.chips3d{display:flex;gap:6px;flex-wrap:wrap}.chip3d{font-size:12px;padding:3px 9px;border-radius:99px;border:1px solid var(--border);background:#fff;white-space:nowrap}
.chip3d.on{background:var(--gp);border-color:var(--gl);color:var(--gd)}.chip3d.off{color:var(--tmut)}
.tip3d{position:absolute;pointer-events:none;background:rgba(27,58,43,.92);color:#fff;font-size:12px;padding:5px 9px;border-radius:8px;white-space:nowrap;z-index:2}

/* ── Plant doctor ── */
#guideMode{margin-bottom:12px}#doctorBox .doc-live{border-left:4px solid var(--gl)}
.doc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media(min-width:600px){.doc-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:900px){.doc-grid{grid-template-columns:repeat(4,1fr)}}
.doc-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:8px;cursor:pointer;font:inherit;text-align:center}.doc-card.ok{border-color:var(--gl);background:var(--gp)}
.doc-pic{width:100%;max-width:120px;margin:0 auto}.doc-pic svg{width:100%;height:auto;display:block;border-radius:10px}.doc-pic.big{max-width:160px}
.doc-name{font-size:13px;font-weight:600;margin-top:6px;line-height:1.3}
.doc-compare{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:10px 0}.doc-compare figure{margin:0;text-align:center}.doc-compare figcaption{font-size:12px;color:var(--tmut);margin-top:4px}
.doc-list{padding-left:20px;margin:6px 0 12px}.doc-list li{margin-bottom:6px;line-height:1.45}
.tile .why{margin-left:0}

/* ── Community ── */
#view-community .seg{margin-bottom:12px}.composer textarea{resize:vertical;min-height:70px}.composer .two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.post-head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;margin-bottom:6px}.badge-unit{font-size:12px;color:var(--gd);background:var(--gp);padding:1px 7px;border-radius:99px}
.post-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0}.post-photo{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;border-radius:10px;margin:6px 0;background:var(--border);cursor:zoom-in}
.post-actions{display:flex;gap:6px;flex-wrap:wrap}.post-actions .on{background:var(--gp);border-color:var(--gl)}
.comments{margin-top:8px;border-top:1px solid var(--border);padding-top:8px}.comment{font-size:14px;margin-bottom:6px;overflow-wrap:anywhere}.comment-add{display:flex;gap:6px}
.table-wrap{overflow-x:auto}.board{width:100%;border-collapse:collapse;font-size:14px}.board th,.board td{padding:7px 6px;border-bottom:1px solid var(--border);text-align:left}.board tr.me{background:var(--gp)}
.check{display:flex;gap:8px;align-items:center;margin:8px 0}.ok-text{color:var(--gd)}.follow{border-top:1px solid var(--border);padding-top:8px;margin-top:8px}
#tabs{overflow-x:auto;scrollbar-width:none}#tabs::-webkit-scrollbar{display:none}

/* ── Today ── */
.today-list{list-style:none;margin:0;padding:0}.task{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}.task:last-child{border-bottom:0}
.task-icon{font-size:20px;width:26px;text-align:center;flex:none}.task.urgent{background:linear-gradient(90deg,rgba(214,69,69,.10),transparent);border-radius:8px;padding-left:6px}
.task.urgent .grow{font-weight:600}.task.soon .grow{color:var(--tmut)}.task.done-all .grow{color:var(--gd)}

/* ── Market ── */
.listing .price,.card .price{font-weight:700;color:var(--gd);margin-left:auto}.verified-card{background:var(--gp);border:1px solid var(--gl);border-radius:10px;padding:8px 10px;margin:8px 0;font-size:14px}
.reserve-row{display:grid;grid-template-columns:120px 1fr auto;gap:8px;align-items:end}@media(max-width:600px){.reserve-row{grid-template-columns:1fr}}
.sell-row{display:flex;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}.card.warn{border-left:4px solid #d64545}
#view-market .two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}

.price-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-bottom:10px}

/* ── Achievements ── */
.xp-bar{height:8px;background:var(--border);border-radius:99px;overflow:hidden;margin:6px 0}.xp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gl),var(--gd));border-radius:99px;transition:width .6s}
.lvl-row{display:flex;gap:12px;align-items:center}.lvl-icon{font-size:34px}.streak{font-weight:700;font-size:18px;color:#d9642b;white-space:nowrap}.next-hint{margin-top:6px}
.ach-head{display:flex;gap:16px;align-items:center}.lvl-big{font-size:64px;line-height:1}.streak-line{margin-top:6px;font-weight:600;color:#d9642b}
.challenge{padding:10px 0;border-bottom:1px solid var(--border)}.challenge:last-child{border-bottom:0}.challenge.done strong{color:var(--gd)}.ch-top{display:flex;justify-content:space-between;gap:8px}.ch-xp{font-weight:700;color:var(--gd);white-space:nowrap}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.badge-tile{font:inherit;cursor:pointer;background:#fff;border:2px solid var(--border);border-radius:14px;padding:10px 6px;text-align:center}
.badge-icon{font-size:34px;line-height:1.2}.badge-name{font-weight:600;font-size:13px;margin-top:4px}
.badge-tile.locked{filter:grayscale(1);opacity:.55}.badge-tile.bronze{border-color:#c98b52;background:linear-gradient(180deg,#fff,#f8ede2)}
.badge-tile.silver{border-color:#9aa6b2;background:linear-gradient(180deg,#fff,#eef1f4)}.badge-tile.gold{border-color:#e0b43a;background:linear-gradient(180deg,#fff,#fbf3d6);box-shadow:0 0 0 3px rgba(224,180,58,.18)}
.celebrate{position:fixed;inset:0;background:rgba(15,30,22,.55);display:grid;place-items:center;z-index:50;padding:20px}
.celebrate-box{background:#fff;border-radius:18px;padding:24px;max-width:340px;width:100%;text-align:center;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.cel-item{margin-bottom:14px}.cel-icon{font-size:64px;line-height:1.1}.cel-title{font-weight:700;font-size:18px;color:var(--gd)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti i{position:absolute;top:-10px;left:calc(var(--i) * 5.5%);width:8px;height:14px;border-radius:2px;
  background:hsl(calc(var(--i) * 40),80%,60%);animation:fall calc(1.6s + var(--i) * .08s) ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(calc(var(--i) * 80deg))}}
@media (prefers-reduced-motion: reduce){.confetti{display:none}.celebrate-box{animation:none}}
.lvl-row .grow,.ach-head .grow{flex:1;min-width:0}.ach-head h2{margin:0}

/* ── Nursery & supplies ── */
#farmMode{margin:4px 0 12px}.nur-track{display:flex;gap:4px;margin:8px 0}.nur-step{flex:1;text-align:center;font-size:12px;padding:4px 2px;border-radius:6px;background:var(--border);color:var(--tmut)}
.nur-step.on{background:var(--gp);color:var(--gd);font-weight:600}.nur-card.ready{border-left:4px solid var(--gl)}.nur-card.overdue{border-left:4px solid #d64545}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.ok-card{border-left:4px solid var(--gl)}
.inv-list{display:flex;flex-direction:column}.inv-row{display:flex;gap:6px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}.inv-row:last-child{border-bottom:0}
.inv-qty{font-weight:700;white-space:nowrap;min-width:80px;text-align:right}.inv-qty.low{color:#c0392b}.inv-row.low{background:linear-gradient(90deg,rgba(214,69,69,.07),transparent)}
#suppliesBox .two,#nurseryBox .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ── Unit setup, water, suggestions, onboarding ── */
.suggest{border:1px solid var(--gl);background:var(--gp);border-radius:10px;padding:10px 12px;margin:10px 0}
.onboard-card{border-left:4px solid var(--gd)}.onb{list-style:none;padding:0;margin:8px 0}.onb li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0}
.onb li.ok span{color:var(--tmut)}.onb li.next span{font-weight:700}ul.plain{list-style:none;padding:0;margin:6px 0}
#unitSetupCard h3{margin:16px 0 6px}#unitSetupCard .two,#unitSetupCard .three{display:grid;gap:8px}#unitSetupCard .two{grid-template-columns:1fr 1fr}#unitSetupCard .three{grid-template-columns:repeat(3,1fr)}

.terms-box{text-align:left;max-width:460px}.terms-box h2{margin-top:0}.danger{color:#c0392b;border-color:#c0392b}.btn-primary.danger{background:#c0392b;color:#fff}

table.fleet{width:100%;border-collapse:collapse;font-size:13px}table.fleet td,table.fleet th{padding:6px 5px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}table.fleet tr.off{background:rgba(214,69,69,.06)}

.rack-row{grid-template-columns:minmax(6rem,1fr) 8.5rem 4.5rem 4.5rem 4.5rem auto!important}@media(max-width:600px){.rack-row{grid-template-columns:1fr 1fr!important}}

.support-code{border:2px dashed var(--gd);border-radius:12px;padding:14px;text-align:center;margin:10px 0}.code-big{font:700 38px/1.1 ui-monospace,Consolas,monospace;letter-spacing:6px;color:var(--gd);margin:6px 0}

.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:8px;margin-top:8px}

/* ── Support mode (admin acting for a grower) ── */
.support-bar{position:sticky;top:0;z-index:60;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#d9642b;color:#fff;font-weight:600;padding:8px 14px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
.support-bar button{font:inherit;font-size:13px;background:#fff;color:#8a3a12;border:0;border-radius:6px;padding:5px 10px;cursor:pointer}
.support-view .support-bar{background:#8a6a1f}
body.support-mode #tabs .tab[data-view="community"],body.support-mode #tabs .tab[data-view="market"],
body.support-mode #supportCard,body.support-mode #yourDataCard,body.support-mode .tg-card,body.support-mode #onboardCard,body.support-mode #signOutBtn{display:none!important}

.wx-now{margin:4px 0 8px;font-weight:600}

.loc-box{margin:4px 0 12px;padding:8px 10px;border:1px dashed var(--border);border-radius:10px}.loc-box .btn-row{margin:6px 0}