:root{
  --bg:#0d1117; --panel:#161b22; --edge:#30363d; --ink:#e6edf3; --muted:#9198a1;
  --accent:#3fb950; --accent2:#58a6ff; --warn:#d29922;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6f8fa; --panel:#fff; --edge:#d0d7de; --ink:#1f2328; --muted:#59636e;
    --accent:#1a7f37; --accent2:#0969da; --warn:#9a6700; }
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
header{padding:18px 22px 6px}
h1{margin:0;font-size:22px}
.tag{margin:4px 0 0;color:var(--muted)}
.tabs{display:flex;gap:4px;padding:8px 18px 0;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.tab{background:none;border:0;color:var(--muted);padding:9px 14px;cursor:pointer;border-radius:8px 8px 0 0;font-size:14px}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);background:var(--panel);border:1px solid var(--edge);border-bottom-color:var(--panel);margin-bottom:-1px}
main{padding:18px 22px;max-width:1100px}
.panel{display:none}
.panel.active{display:block}
.controls{display:flex;gap:16px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px;margin-bottom:14px}
.ctl{display:flex;flex-direction:column;gap:5px;min-width:150px}
.ctl label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
select,input[type=number],input[type=file]{background:var(--bg);color:var(--ink);border:1px solid var(--edge);border-radius:8px;padding:7px 8px;font-size:13px;max-width:230px}
button{font-size:14px;border-radius:8px;padding:8px 14px;cursor:pointer;border:1px solid var(--edge);background:var(--panel);color:var(--ink)}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.ghost{background:transparent}
.btnlink{display:inline-block;text-decoration:none}
.hint{font-size:12px;color:var(--muted)}
.stage{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
@media (max-width:840px){.stage{grid-template-columns:1fr}}
.canvaswrap{position:relative;background:var(--panel);border:1px solid var(--edge);border-radius:12px;overflow:auto;min-height:280px}
.canvaswrap.small{min-height:220px}
.canvaswrap canvas{display:block;max-width:100%}
#overlay,#lblOverlay{position:absolute;top:0;left:0}
.results{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px}
.results h3{margin:0 0 10px}
#traits{width:100%;border-collapse:collapse}
#traits td{padding:6px 4px;border-bottom:1px solid var(--edge)}
#traits td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.editrow{margin-top:12px;display:flex;flex-direction:column;gap:3px}
.regionbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--edge)}
.regionbar .hint{flex-basis:100%;margin-top:2px}
.reportbar{margin-top:18px;padding-top:14px;border-top:1px solid var(--edge)}
#roiResults .datatable{font-size:12px}
#plantResults .datatable{font-size:12px}
.scrolly{max-height:220px;overflow:auto;border:1px solid var(--edge);border-radius:8px}
.scrolly .datatable{margin-top:0}
.scrolly th{position:sticky;top:0}
.method{font-size:12px;color:var(--muted);margin-top:12px}
.datatable{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.datatable th,.datatable td{border:1px solid var(--edge);padding:6px 8px;text-align:left}
.datatable th{background:var(--panel)}
.steps{line-height:1.7} .steps>li{margin-bottom:18px}
.tab[data-tab] {white-space:nowrap}
.tablink{text-decoration:none;margin-left:auto}
.row.tight{display:flex;gap:6px}
.mini{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;text-transform:none;letter-spacing:0}
optgroup{color:var(--muted)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px;text-align:center}
.statval{font-size:24px;font-weight:700}
.statlbl{font-size:12px;color:var(--muted);margin-top:2px}
.chartrow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:760px){.chartrow{grid-template-columns:1fr}}
.chartbox{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px}
.chartbox h3{margin:0 0 8px;font-size:14px}
.datatable img{display:block}
.datatable tbody tr:hover{background:var(--panel)}
.cloudbox{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.cloudbox summary{cursor:pointer;font-weight:600}
.cloudform{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0}
.cloudform .mini{flex-direction:column;align-items:flex-start;gap:3px}
.datatable tbody tr{cursor:pointer}
.detailbox{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px;margin-top:16px}
.traitgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:8px}
.trait{background:var(--bg);border:1px solid var(--edge);border-radius:8px;padding:8px 10px}
.tval{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.tlbl{font-size:11px;color:var(--muted);margin-top:2px}
.detailmain{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.detailimg{background:var(--bg);border:1px solid var(--edge);border-radius:8px;padding:8px;text-align:center}
.detailimg svg{max-width:100%;height:auto}
.grouptag{background:var(--accent2);color:#fff;border-radius:10px;padding:1px 8px;font-size:11px;white-space:nowrap}
.minisketch svg{vertical-align:middle}
#tbl th:first-child,#tbl td:first-child{width:24px;text-align:center}