/* UGF Grow Tracker */
:root{
  --leaf:#14432c; --green:#1f7a4d; --green-2:#2e9a63; --mint:#e4f2e8; --sage:#f3f6f1;
  --water:#2b8fd6; --water-bg:#e3f1fc; --sun:#d99a00; --sun-bg:#fff4d6; --red:#cf3d3d; --red-bg:#fde8e6;
  --ink:#1d2a22; --muted:#64746a; --line:#dfe6dd; --card:#fff; --radius:14px;
  --shadow:0 1px 2px rgba(20,67,44,.06),0 4px 14px rgba(20,67,44,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:var(--sage);font-size:16px;line-height:1.45}
body.app{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
a{color:var(--green)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;color:var(--leaf)}
h1{font-size:1.6rem;font-weight:800} h2{font-size:1.2rem;font-weight:800} h3{font-size:1.02rem;font-weight:700}
p{margin:0 0 .8em}
small,.small{font-size:.85rem} .muted{color:var(--muted)}
img{max-width:100%}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--leaf);color:#fff}
.brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:1.15rem;font-weight:600;white-space:nowrap}
.brand b{font-weight:800;color:#9be3b6}
.topnav{display:none;gap:4px;flex:1}
.topnav a{color:#d5ead9;text-decoration:none;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.95rem}
.topnav a.on,.topnav a:hover{background:rgba(255,255,255,.12);color:#fff}
.topnav .admin-link{margin-left:auto;background:#f7d774;color:var(--leaf)}
.me{margin-left:auto;display:flex;text-decoration:none}
.avatar{border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;flex:none}
.avatar.initial{background:var(--water);color:#fff;font-weight:800}

/* bottom tabs (phones) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;color:var(--muted);text-decoration:none;font-size:.72rem;font-weight:700}
.tabbar a.on{color:var(--green)}
@media (min-width:860px){
  .topnav{display:flex} .me{margin-left:0} .tabbar{display:none} body.app{padding-bottom:0}
}

.wrap{max-width:1100px;margin:0 auto;padding:18px 16px 32px}
.pagehead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.pagehead h1{margin:0}
.crumbs{font-size:.88rem;margin-bottom:6px}
.crumbs a{text-decoration:none}

/* cards + grids */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.card > h2:first-child,.card > h3:first-child{margin-top:0}
.grid{display:grid;gap:16px}
@media(min-width:700px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:1.6rem;font-weight:800;color:var(--leaf);line-height:1.1}
.stat span{font-size:.82rem;color:var(--muted);font-weight:700}
.stat.alert b{color:var(--sun)} .stat.bad b{color:var(--red)}

.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.stack > * + *{margin-top:10px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--leaf);padding:10px 16px;border-radius:10px;font:inherit;font-weight:800;font-size:.95rem;text-decoration:none;cursor:pointer;min-height:44px}
.btn:hover{border-color:var(--green)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:var(--leaf)}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.danger:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:transparent;color:var(--green)}
.btn.small{padding:6px 11px;min-height:34px;font-size:.85rem;border-radius:8px}
.btn.block{width:100%}
.linkbtn{background:none;border:0;color:var(--green);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0}

/* forms */
label{display:block;font-weight:700;font-size:.92rem;margin-bottom:12px;color:var(--leaf)}
label small{font-weight:600;color:var(--muted)}
input,select,textarea{display:block;width:100%;margin-top:5px;padding:10px 12px;border:1px solid #cfd8cd;border-radius:10px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-2);outline-offset:0;border-color:transparent}
textarea{min-height:80px;resize:vertical}
label.check{display:flex;gap:10px;align-items:center;font-weight:600}
label.check input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--green)}
.fields{display:grid;gap:0 14px}
@media(min-width:600px){.fields.two{grid-template-columns:1fr 1fr}.fields.three{grid-template-columns:1fr 1fr 1fr}.fields.four{grid-template-columns:repeat(4,1fr)}}
.inline{display:flex;gap:8px}
.inline > *{flex:1}
fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 14px 2px;margin:0 0 14px}
legend{font-weight:800;color:var(--leaf);padding:0 6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.chips label{margin:0}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:7px 13px;border-radius:999px;border:1px solid #cfd8cd;background:#fff;font-weight:700;font-size:.9rem;cursor:pointer}
.chips input:checked + span{background:var(--mint);border-color:var(--green);color:var(--leaf)}
.chips input:focus-visible + span{outline:2px solid var(--green-2)}
.hidden{display:none!important}

/* flash + notices */
.flash{padding:12px 14px;border-radius:10px;margin-bottom:14px;font-weight:700;background:var(--mint);color:var(--leaf)}
.flash.error{background:var(--red-bg);color:#8d2222}
.flash.warn{background:var(--sun-bg);color:#7a5600}
dialog.notice{border:0;border-radius:18px;padding:0;max-width:380px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(0,0,0,.25)}
dialog::backdrop{background:rgba(20,40,30,.45)}
.notice-body{padding:24px;text-align:center}
.notice-icon{font-size:2.4rem}
.notice-body p{font-weight:700;color:var(--leaf)}

/* badges + alerts */
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.76rem;font-weight:800;background:#eef2ec;color:var(--muted);white-space:nowrap}
.badge.green{background:var(--mint);color:var(--green)} .badge.blue{background:var(--water-bg);color:#1d6fae}
.badge.yellow{background:var(--sun-bg);color:#8a6200} .badge.red{background:var(--red-bg);color:#a12b2b}
.alerts{list-style:none;margin:0;padding:0}
.alerts li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.alerts li:first-child{border-top:0}
.dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none;background:#b7c3b9}
.dot.due{background:var(--red)} .dot.warn{background:var(--sun)} .dot.info{background:var(--water)}
.alerts a{font-weight:800;text-decoration:none}
.warnbox{border-left:4px solid var(--sun);background:var(--sun-bg);padding:10px 12px;border-radius:8px;margin-bottom:8px;font-weight:600;font-size:.93rem}
.warnbox.due{border-color:var(--red);background:var(--red-bg)}
.empty{text-align:center;padding:30px 16px;color:var(--muted)}
.empty .big{font-size:2.6rem}

/* water condition button */
.water{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;text-decoration:none;font-weight:800;font-size:.9rem;min-height:44px;color:#fff}
.water small{display:block;font-weight:600;font-size:.75rem;opacity:.9}
.water.blue{background:var(--water)} .water.yellow{background:#e8ad00;color:#3d2c00} .water.red{background:var(--red)}

/* system cards */
.syscard{display:block}
.syscard .code{font-weight:800;color:#fff;background:var(--leaf);border-radius:8px;padding:2px 8px;font-size:.85rem;margin-right:6px}
.sys-meta{color:var(--muted);font-size:.88rem;margin-bottom:10px}
.measure{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0}
.measure > div{background:var(--sage);border-radius:10px;padding:10px}
.measure b{display:block;font-size:1.25rem;font-weight:800;color:var(--leaf)}
.measure span{font-size:.78rem;color:var(--muted);font-weight:700}
.measure .target{font-size:.8rem;color:var(--muted)}
.measure .in b{color:var(--green)} .measure .low b,.measure .high b{color:var(--red)}
.types{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}

/* port + tray grids */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.slot{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:80px;padding:8px;border-radius:12px;border:2px dashed #c9d6cb;background:#fbfcfa;text-decoration:none;color:var(--muted);font-size:.8rem;font-weight:700}
.slot .n{font-size:.75rem;font-weight:800;color:#9aa89e}
.slot.full{border-style:solid;border-color:#bfe0cb;background:var(--mint);color:var(--leaf)}
.slot.full .nm{font-weight:800;font-size:.88rem;line-height:1.15}
.slot.due{border-color:var(--red);background:var(--red-bg)} .slot.warn{border-color:#e8c460;background:var(--sun-bg)}
.slot.pick{cursor:pointer}
.slot.pick input{position:absolute;opacity:0}
.slot.pick:has(input:checked){border-style:solid;border-color:var(--green);background:#d3ecdc;color:var(--leaf)}
.slot.pick.checked{border-style:solid;border-color:var(--green);background:#d3ecdc;color:var(--leaf)}
.slot .plus{font-size:1.4rem;color:#b3c2b6;line-height:1}
.traycard .head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.traycode{font-weight:800;font-size:1.05rem;color:var(--leaf)}
.guide{font-size:.85rem;color:var(--muted);background:var(--sage);padding:8px 10px;border-radius:8px;margin:8px 0 12px}
.steps{display:flex;gap:6px;margin:6px 0}
.steps span{flex:1;height:6px;border-radius:3px;background:#dfe6dd}
.steps span.on{background:var(--green-2)}

/* tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}

/* timeline */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;justify-content:space-between;gap:10px;padding:9px 0 9px 22px;border-left:2px solid var(--line);margin-left:6px;position:relative}
.timeline li::before{content:"";position:absolute;left:-7px;top:13px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #b7c3b9}
.timeline li.done::before{background:var(--green-2);border-color:var(--green-2)}
.timeline li.now::before{background:var(--sun);border-color:var(--sun)}
.timeline li b{font-weight:700}

/* danger zone */
.danger-zone{border:1px solid #f1c3bf;background:#fff8f7;border-radius:12px;padding:14px}
.danger-zone label{color:#8d2222}

/* auth pages */
body.bare{background:linear-gradient(170deg,#14432c 0,#1f7a4d 45%,var(--sage) 45.1%)}
.auth{max-width:420px;margin:0 auto;padding:28px 0}
.auth-brand{text-align:center;color:#fff;margin-bottom:18px}
.auth-brand h1{color:#fff;margin:10px 0 4px;font-weight:600}
.auth-brand h1 b{color:#9be3b6;font-weight:800}
.auth-brand p{color:#cfe8d7;margin:0}
.auth-card{padding:22px}
.auth-links{text-align:center;margin:12px 0 0}
.auth-switch{text-align:center;color:var(--muted);margin-top:14px}
.code-input{font-size:1.8rem;letter-spacing:.4em;text-align:center;font-weight:800}

/* plans */
.plans{display:grid;gap:14px}
@media(min-width:700px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{text-align:center}
.plan .price{font-size:2rem;font-weight:800;color:var(--leaf)}
.plan .price small{font-size:.9rem;color:var(--muted)}

/* profile */
.profile-head{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.profile-head .avatar{box-shadow:0 0 0 4px #fff,var(--shadow)}

/* admin */
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.admin-tabs a{padding:7px 14px;border-radius:999px;background:#fff;text-decoration:none;font-weight:800;font-size:.9rem;box-shadow:var(--shadow)}
.admin-tabs a.on{background:var(--leaf);color:#fff}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.toggle-row:first-of-type{border-top:0}
.searchbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.searchbar input,.searchbar select{margin:0;flex:1;min-width:140px}
.toggle-row .btn{white-space:nowrap}

/* Bluem + logo */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.brand picture{display:flex}
.brand .bluem{height:36px;width:auto;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.logo-badge{width:min(260px,70vw);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.auth-brand .bluem{height:110px;width:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25))}
.empty .bluem{height:150px;width:auto;margin-bottom:6px}
.bluem-says{display:flex;align-items:flex-end;gap:12px;margin:0 0 16px}
.bluem-says .bluem{height:96px;width:auto;flex:none}
.bluem-says .bubble{position:relative;background:#fff;border-radius:16px 16px 16px 4px;padding:12px 16px;box-shadow:var(--shadow);font-weight:600;color:var(--ink);margin-bottom:14px}
.bluem-says .bubble b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--water)}
.bluem-says .bubble::before{content:"";position:absolute;left:-8px;bottom:0;border:8px solid transparent;border-right-color:#fff;border-bottom-color:#fff}
body.bare{background:linear-gradient(170deg,#14432c 0,#1f7a4d 50%,var(--sage) 50.1%)}
picture{flex:none;display:inline-flex}
.bluem{width:auto!important;max-width:none}
body.bare{min-height:100vh;background-color:var(--sage);background-repeat:no-repeat}

/* install to home screen */
.install-card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(120deg,#e3f1fc,#e4f2e8)}
.install-card.hidden{display:none}
.install-card .bluem{height:64px}
.install-card .grow1{flex:1;min-width:180px}
.install-card .grow1 b{display:block;color:var(--leaf)}
.install-steps{text-align:left;margin:12px 0}
.install-steps p{margin:0 0 10px}
.kbd{display:inline-block;min-width:22px;padding:0 6px;border:1px solid var(--line);border-radius:6px;background:var(--sage);text-align:center;font-weight:800}
dialog.notice .bluem{height:90px}
.install-steps p{font-weight:600;color:var(--ink)}

.spam-tip{margin-top:16px;padding:14px;border-radius:12px;background:var(--sun-bg);border-left:4px solid var(--sun);font-size:.9rem}
.spam-tip > b:first-child{display:block;color:#7a5600;margin-bottom:4px}
.spam-tip p{margin:0 0 8px}
.spam-tip ul{margin:0 0 8px;padding-left:18px}
.spam-tip li{margin-bottom:5px}

.ds-text{font-weight:600!important;color:var(--ink)!important;text-align:left;font-size:.95rem}
dialog.notice .stack .btn{margin:0}