/* Deep-forest theme (1.25.10): understory greens, lichen text, cloudberry amber as the one light through the canopy. */
:root {
  --bg: #000000; --panel: #111111; --panel2: #1a1a1a; --line: #2b2b2b; --line2: #434343;
  --text: #ffffff; --muted: #a7a7a7; --dim: #7d7d7d;
  --amber: #76b900; --teal: #4cc3a6; --red: #e5534b; --blue: #5aa9e6; --violet: #a685e2; --green: #7cc16b;
  --map-bg: #111e17;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.8%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.8%20%200%200%200%200%20.9%20%200%200%200%200%20.7%20%200%200%200%20.5%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.45 var(--sans); }
button, select, input { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* ---------- top bar ---------- */
.top { height: 54px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #000000, #000000); position: relative; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--amber); }
.brand .eye { width: 40px; height: 24px; }
.brand b { display: block; font: 700 21px/1.05 var(--serif); letter-spacing: .01em; color: var(--text); }
.brand span { display: block; font-size: 11px; color: var(--muted); }
.site-name { padding-left: 14px; border-left: 1px solid var(--line); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spacer { flex: 1; }
.ctl { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11.5px; }
select, input[type=number], input[type=date], input[type=text] {
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 6px; padding: 5px 8px; color: var(--text); }
.badge { font: 600 12px var(--mono); padding: 5px 9px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--line2); white-space: nowrap; }

/* ---------- layout ---------- */
.tabs { position: fixed; top: 54px; left: 0; bottom: 0; width: 148px; border-right: 1px solid var(--line); padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; }
.tabs button { flex-shrink: 0; display: flex; align-items: center; gap: 9px; text-align: left; padding: 9px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer; }
.tabs button i { font-style: normal; width: 16px; text-align: center; color: var(--dim); }
.tabs button:hover { background: var(--panel); color: var(--text); }
.tabs button.on { background: var(--panel2); color: var(--text); box-shadow: inset 2px 0 0 var(--amber); }
.tabs button.on i { color: var(--amber); }
main { position: fixed; top: 54px; left: 148px; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 400px; }
.stage { position: relative; overflow: hidden; }
.mapwrap { position: absolute; inset: 0; }
.mapwrap canvas { display: block; cursor: grab; touch-action: none; }
.panel { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; padding: 16px 16px 40px; }

/* ---------- map chrome ---------- */
.legend { position: absolute; right: 12px; bottom: 26px; background: rgba(10, 16, 14, .88); border: 1px solid var(--line2);
  border-radius: 8px; padding: 9px 11px; font-size: 11.5px; max-width: 290px; backdrop-filter: blur(4px); }
.legend:empty { display: none; }
.legend h4 { margin: 0 0 5px; font-size: 12px; color: var(--muted); font-family: var(--serif); font-weight: 600; }
.legend .row { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
.legend .sw { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.ramp { height: 9px; border-radius: 3px; margin: 4px 0 2px; }
.ends { display: flex; justify-content: space-between; color: var(--muted); font-size: 10.5px; }
.tip { position: absolute; pointer-events: none; background: rgba(10, 16, 14, .95); border: 1px solid var(--line2); border-radius: 7px;
  padding: 7px 9px; font-size: 11.5px; max-width: 260px; z-index: 5; }
.tip b { color: var(--amber); }
.hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--amber); color: #1a1205;
  font-weight: 600; padding: 7px 14px; border-radius: 20px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.busy { position: absolute; top: 12px; right: 12px; background: rgba(10,16,14,.9); border: 1px solid var(--line2); padding: 6px 12px;
  border-radius: 20px; display: flex; gap: 8px; align-items: center; }
.busy span { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--amber); border-right-color: transparent; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.gl-help { position: absolute; right: 12px; bottom: 12px; color: var(--muted); font-size: 11px; background: rgba(10,16,14,.8); padding: 4px 9px; border-radius: 6px; }

/* ---------- panel content ---------- */
.panel h2 { margin: 0 0 4px; font: 700 21px/1.2 var(--serif); letter-spacing: .005em; }
.panel .lead { margin: 0 0 14px; color: var(--muted); }
.panel h3 { margin: 20px 0 8px; font: 600 14px/1.3 var(--serif); color: #c4d1b4; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
.kpi .v { font: 600 20px/1.15 var(--mono); }
.kpi .l { color: var(--muted); font-size: 11px; margin-top: 2px; }
.kpi.warn .v { color: var(--amber); } .kpi.bad .v { color: var(--red); } .kpi.good .v { color: var(--teal); }
.card { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; margin: 8px 0; }
.card .t { font-weight: 600; margin-bottom: 3px; }
.card p { margin: 0; color: var(--muted); }
.phase { display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: start; }
.phase .tag { font: 600 11px var(--mono); color: var(--amber); padding-top: 2px; }
.btn { background: var(--amber); color: #1b1305; border: 0; border-radius: 7px; padding: 7px 12px; font-weight: 600; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line2); }
.btn:disabled { opacity: .45; cursor: default; }
.btn + .btn { margin-left: 6px; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line2); background: transparent; color: var(--muted); padding: 5px 10px; border-radius: 16px; cursor: pointer; font-size: 12px; }
.chip.on { background: var(--panel2); color: var(--text); border-color: var(--amber); }
.formrow { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.formrow label { width: 120px; color: var(--muted); font-size: 12px; flex: none; }
.formrow input[type=range] { flex: 1; accent-color: var(--amber); }
.formrow output { font: 600 12px var(--mono); width: 56px; text-align: right; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: 11.5px; padding: 5px 4px; border-bottom: 1px solid var(--line2); }
td { padding: 5px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--panel2); }
.num { text-align: right; font-family: var(--mono); }
.bar { display: grid; grid-template-columns: 1fr 70px; gap: 8px; align-items: center; margin: 4px 0; font-size: 12px; }
.bar .track { height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.bar .fill { height: 100%; border-radius: 4px; }
.bar .num { color: var(--muted); }
.note { color: var(--muted); font-size: 11.5px; margin-top: 8px; }
.callout { border-left: 3px solid var(--amber); background: rgba(118,185,0,.07); padding: 9px 11px; border-radius: 0 8px 8px 0; margin: 10px 0; }
.callout.teal { border-color: var(--teal); background: rgba(76,195,166,.07); }
.callout.red { border-color: var(--red); background: rgba(229,83,75,.08); }
.pill { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.p-high { background: rgba(229,83,75,.2); color: #ff8f88; } .p-med { background: rgba(118,185,0,.2); color: #f5c46f; } .p-low { background: rgba(76,195,166,.18); color: #7fe0c6; }
canvas.spark { width: 100%; height: 46px; display: block; }
.cmp { display: grid; grid-template-columns: 110px 1fr 60px; gap: 8px; align-items: center; margin: 5px 0; font-size: 12px; }
.cmp .track { height: 14px; background: var(--line); border-radius: 4px; overflow: hidden; }
.cmp .fill { height: 100%; }

@media (max-width: 1100px) {
  main { grid-template-columns: 1fr 340px; }
  .tabs { width: 56px; } .tabs button { font-size: 0; justify-content: center; } .tabs button i { font-size: 15px; }
  main { left: 56px; }
  .site-name, .ctl:last-child { display: none; }
}
@media (max-width: 760px) {
  main { grid-template-columns: 1fr; grid-template-rows: 55vh auto; overflow-y: auto; }
  .stage { position: relative; height: 55vh; }
  .top .badge { display: none; }
}

.panel a:not(.btn) { color: var(--amber); text-decoration: none; } .panel a:not(.btn):hover { text-decoration: underline; }
#m3legend h4 { margin: 0 0 5px; font-size: 12px; color: var(--muted); font-family: var(--serif); }
#m3legend .row { display: flex; align-items: center; gap: 7px; margin: 3px 0; } #m3legend .sw { width: 13px; height: 13px; border-radius: 3px; }

.lightbox { position: absolute; inset: 0; background: rgba(5,9,8,.82); display: flex; align-items: center; justify-content: center; z-index: 20; padding: 20px; }
.lb-inner { background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; padding: 10px; max-width: 100%; }
.lb-inner img { display: block; max-width: min(900px, 100%); width: 100%; border-radius: 6px; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.lb-bar span:first-child { color: var(--muted); font-size: 12px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gallery figure { margin: 0; cursor: pointer; background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.gallery figure:hover { border-color: var(--amber); }
.gallery img { width: 100%; display: block; aspect-ratio: 640/420; object-fit: cover; }
.gallery figcaption { padding: 5px 7px; font-size: 11px; color: var(--muted); line-height: 1.3; }
.inv td.num { font-family: var(--mono); }
.joblog { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: 11px/1.5 var(--mono); max-height: 180px; overflow: auto; white-space: pre-wrap; }

/* ---- upload, tree hazards, emergency plan */
.tabs button.upl { color: var(--amber); }
.drop { border: 2px dashed var(--line2); border-radius: 11px; padding: 18px 14px; text-align: center; color: var(--muted); background: var(--panel2); transition: .15s; }
.drop.on { border-color: var(--amber); background: rgba(118,185,0,.08); color: var(--text); }
.drop .big { font-size: 28px; color: var(--amber); line-height: 1; margin-bottom: 6px; }
.drop b { color: var(--text); }
.drop .sub { margin-top: 6px; }
.lnk { color: var(--amber); cursor: pointer; text-decoration: underline; }
.sub { color: var(--muted); font-size: 11px; }
.upf { margin: 7px 0; }
.upf .n { display: flex; align-items: center; gap: 6px; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.upf .k { font: 600 10px var(--mono); padding: 1px 5px; border-radius: 4px; background: var(--panel2); border: 1px solid var(--line2); }
.upf .k.scan { color: var(--amber); } .upf .k.image { color: var(--teal); }
.upf .x { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; }
.bar2 { height: 4px; background: var(--line); border-radius: 2px; margin-top: 3px; overflow: hidden; }
.bar2 div { height: 100%; background: var(--amber); }
.upf.uploaded .bar2 div { background: var(--teal); } .upf.error .bar2 div { background: var(--red); }
.log { font: 11px var(--mono); color: var(--muted); margin: 10px 0; max-height: 160px; overflow-y: auto; }
.log:empty { display: none; }
.lvl { font: 600 10.5px var(--mono); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.lvl.low { background: rgba(76,195,166,.15); color: var(--teal); }
.lvl.medium { background: rgba(118,185,0,.15); color: var(--amber); }
.lvl.high { background: rgba(229,83,75,.18); color: var(--red); }
.callout.rec { border-color: var(--amber); color: var(--text); font-weight: 500; }
table.plan tr.best td { background: rgba(118,185,0,.07); }
tr.click { cursor: pointer; } tr.click:hover td { background: rgba(255,255,255,.04); }
svg.curve { width: 100%; height: auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; }
svg.curve text { font: 9.5px var(--mono); fill: var(--muted); }

.btn.upbtn { padding: 8px 14px; font-size: 13px; box-shadow: 0 0 0 3px rgba(118,185,0,.18); white-space: nowrap; }
.brand small { font: 600 10px var(--mono); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.dropall { position: fixed; inset: 0; z-index: 99; background: rgba(8,12,10,.82); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.dropall > div { border: 3px dashed var(--amber); border-radius: 18px; padding: 40px 60px; text-align: center; font-size: 22px; color: var(--text); line-height: 1.5; }
.dropall small { font-size: 12px; color: var(--muted); }
.callout.upcall { border-color: var(--teal); background: rgba(76,195,166,.07); }

/* ---- 2D / 3D switch */
.dimsw { position: absolute; top: 12px; left: 12px; z-index: 5; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 340px; }
.dimsw .seg { display: inline-flex; background: rgba(10,16,14,.9); border: 1px solid var(--line2); border-radius: 9px; padding: 3px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.dimsw .seg button { border: 0; background: transparent; color: var(--muted); font: 700 13px var(--mono); padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.dimsw .seg button.on { background: var(--amber); color: #1b1305; }
.dimsw .m3 { background: rgba(10,16,14,.9); border: 1px solid var(--line2); border-radius: 9px; padding: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.dimsw .m3 .chip { font-size: 11px; padding: 4px 8px; }
.dimsw .m3leg { width: 100%; margin-top: 4px; font-size: 11px; }
.dimsw .m3leg h4 { margin: 0 0 4px; font-size: 11.5px; color: var(--muted); font-family: var(--serif); }
.dimsw .m3leg .row { display: flex; align-items: center; gap: 6px; margin: 2px 0; } .dimsw .m3leg .sw { width: 11px; height: 11px; border-radius: 3px; }

.log .working { display: flex; align-items: center; gap: 8px; color: var(--text); margin-top: 4px; }
.spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--amber); border-right-color: transparent; animation: sp .7s linear infinite; display: inline-block; }

img.phimg { width: 100%; border-radius: 8px; border: 1px solid var(--line2); margin: 6px 0 10px; display: block; }

.badge.newbadge { cursor: pointer; color: #ffb35c; border-color: #ff9628; background: rgba(255,150,40,.12); font-family: var(--sans); font-weight: 700; }
.badge.newbadge:hover { background: rgba(255,150,40,.22); }

/* ---- damage in euros */
.money { margin: 4px 0 10px; }
.money .mbig { font: 700 34px/1.1 var(--mono); color: var(--red); }
.mrow { display: grid; grid-template-columns: 150px 1fr 70px; align-items: center; gap: 8px; margin: 5px 0; font-size: 12px; }
.mrow .mlab { color: var(--text); }
.mrow .mbar { height: 9px; background: var(--line); border-radius: 4px; overflow: hidden; display: block; }
.mrow .mbar span { display: block; height: 100%; border-radius: 4px; }
.mrow .mval { text-align: right; font-family: var(--mono); }
details.costs { margin: 10px 0; }
details.costs summary { cursor: pointer; color: var(--amber); font-weight: 600; }

/* Logging */
ul.warn { margin: 8px 0 10px; padding-left: 18px; color: var(--amber); }
ul.warn li { margin: 3px 0; }
#tabs button.lgtab i { color: #f2b544; }
ol.steps { margin: 8px 0; padding-left: 20px; } ol.steps li { margin: 5px 0; line-height: 1.45; }

/* tree card: locate a tree + crew navigation */
.treecard { position: fixed; left: 168px; bottom: 16px; width: 390px; max-width: calc(100vw - 32px); max-height: 70vh; overflow: auto; z-index: 60;
  background: rgba(14,20,18,.97); border: 1px solid #28ffff55; border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 13px; }
.treecard.hidden { display: none; }
.tc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.tc-x { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
.tc-row { margin: 4px 0; line-height: 1.4; }
.tc-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tc-btns .btn { padding: 6px 10px; font-size: 12.5px; text-decoration: none; }
.btn.wa { background: #25d366; color: #062b14; border-color: #25d366; }
.crewbtn { margin: 6px 0 10px; }
ol.tc-list { margin: 6px 0; padding-left: 22px; max-height: 180px; overflow: auto; } ol.tc-list li { margin: 2px 0; }
@media (max-width: 760px) { .treecard { left: 16px; right: 16px; width: auto; } }
#tabs button.grtab i { color: #ffd23f; }

/* many tabs: tighter menu on short screens (it also scrolls) */
@media (max-height: 900px) { .tabs { gap: 0; padding: 6px 8px; } .tabs button { padding: 6px 10px; } }
/* tree card: key numbers */
.tfacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin: 8px 0; }
.tfacts .tf { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; padding: 4px 7px; line-height: 1.2; }
.tfacts .tf b { display: block; font-size: 14px; }
.tfacts .tf b small { font-weight: 400; opacity: .7; font-size: 11px; }
.tfacts .tf span { font-size: 11px; opacity: .65; }
table.libt tr.sel td { background: rgba(255,210,63,.08); }
table.libt td { vertical-align: top; }

/* ---- Simple mode (v1.21): a handful of tabs and header controls; "All features" shows everything ---- */
body.simple #tabs button.adv, body.simple .top .ctl, body.simple .top .badge:not(.newbadge) { display: none; }
body.simple .tabs { gap: 4px; }
body.simple .tabs button { padding: 11px 10px; font-size: 13.5px; }
.tabs button.modesw { margin-top: auto; justify-content: center; border: 1px dashed var(--line2); color: var(--muted); font-size: 12px; }
.guide { background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: 12px; margin-bottom: 14px; }
.guide h3 { margin: 0 0 8px; font-size: 14px; }
.gcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gcards button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 10px; border-radius: 8px;
  border: 1px solid var(--line2); background: var(--panel); color: var(--text); cursor: pointer; }
.gcards button:hover { border-color: var(--amber); }
.gcards i { font-style: normal; color: var(--amber); font-size: 16px; }
.gcards span { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.cf { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); margin: 6px 0; }
.cf input { background: var(--bg); border: 1px solid var(--line2); color: var(--text); border-radius: 6px; padding: 7px 9px; font-size: 13px; }

/* real mode (no demo estate) + first-run welcome */
body.real #updemo, body.real #pfAdd, body.real #hpDemo, body.real #upudemo, body.real #fcDemo, body.real #hpXml { display: none; }
.welcome { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.welcome > div { max-width: 520px; }
.welcome h1 { font-size: 26px; margin: 0 0 8px; }
.welcome p, .welcome li { color: var(--muted); line-height: 1.5; }
.welcome ol { padding-left: 20px; margin: 14px 0 20px; }
body.empty .guide .gcards button[data-go="logging"], body.empty .guide .gcards button[data-go="grid"], body.empty .guide .gcards button[data-go="hazards"], body.empty .guide .gcards button[data-go="stand"] { display: none; }
body.empty.ovw #panel > :not(.guide) { display: none; }


/* ================= deep forest layer (1.25.10) =================
   Depth, not decoration: two rows of spruce behind the header, a trunk line with a lit node for the open tab,
   a little grain on the side surfaces. Colours come from the :root tokens, JS-drawn map colours are unchanged. */
.top > * { position: relative; z-index: 1; }
.top::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22210%22%20height%3D%2222%22%20viewBox%3D%220%200%20210%2022%22%3E%3Cpolygon%20points%3D%2218.2%2C9.9%2019.0%2C12.1%2018.7%2C12.1%2019.9%2C15.2%2019.1%2C15.2%2020.7%2C18.2%2019.6%2C18.2%2021.5%2C22.0%2014.9%2C22.0%2016.8%2C18.2%2015.7%2C18.2%2017.3%2C15.2%2016.6%2C15.2%2017.8%2C12.1%2017.4%2C12.1%22%20fill%3D%22%23050c08%22/%3E%3Cpolygon%20points%3D%22106.3%2C6.3%20107.2%2C9.3%20106.8%2C9.3%20108.2%2C13.2%20107.3%2C13.2%20109.2%2C17.1%20107.9%2C17.1%20110.2%2C22.0%20102.3%2C22.0%20104.6%2C17.1%20103.3%2C17.1%20105.2%2C13.2%20104.3%2C13.2%20105.7%2C9.3%20105.3%2C9.3%22%20fill%3D%22%23050c08%22/%3E%3Cpolygon%20points%3D%22127.2%2C10.9%20128.0%2C13.0%20127.7%2C13.0%20128.8%2C15.8%20128.1%2C15.8%20129.6%2C18.5%20128.5%2C18.5%20130.3%2C22.0%20124.1%2C22.0%20125.9%2C18.5%20124.9%2C18.5%20126.4%2C15.8%20125.7%2C15.8%20126.8%2C13.0%20126.5%2C13.0%22%20fill%3D%22%23050c08%22/%3E%3Cpolygon%20points%3D%22141.1%2C0.8%20142.3%2C4.8%20141.7%2C4.8%20143.6%2C10.1%20142.4%2C10.1%20144.8%2C15.4%20143.1%2C15.4%20146.1%2C22.0%20136.0%2C22.0%20139.0%2C15.4%20137.3%2C15.4%20139.7%2C10.1%20138.5%2C10.1%20140.4%2C4.8%20139.8%2C4.8%22%20fill%3D%22%23050c08%22/%3E%3Cpolygon%20points%3D%22153.7%2C1.6%20154.9%2C5.4%20154.4%2C5.4%20156.1%2C10.5%20155.0%2C10.5%20157.4%2C15.6%20155.7%2C15.6%20158.6%2C22.0%20148.8%2C22.0%20151.7%2C15.6%20150.0%2C15.6%20152.4%2C10.5%20151.3%2C10.5%20153.0%2C5.4%20152.5%2C5.4%22%20fill%3D%22%23050c08%22/%3E%3Cpolygon%20points%3D%22179.5%2C5.4%20180.5%2C8.5%20180.0%2C8.5%20181.6%2C12.7%20180.6%2C12.7%20182.6%2C16.8%20181.2%2C16.8%20183.6%2C22.0%20175.3%2C22.0%20177.8%2C16.8%20176.4%2C16.8%20178.3%2C12.7%20177.4%2C12.7%20178.9%2C8.5%20178.4%2C8.5%22%20fill%3D%22%23050c08%22/%3E%3Cpolygon%20points%3D%22184.8%2C8.4%20185.7%2C10.9%20185.3%2C10.9%20186.6%2C14.3%20185.8%2C14.3%20187.5%2C17.7%20186.3%2C17.7%20188.4%2C22.0%20181.2%2C22.0%20183.3%2C17.7%20182.1%2C17.7%20183.8%2C14.3%20183.0%2C14.3%20184.3%2C10.9%20183.9%2C10.9%22%20fill%3D%22%23050c08%22/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22300%22%20height%3D%2230%22%20viewBox%3D%220%200%20300%2030%22%3E%3Cpolygon%20points%3D%2220.0%2C11.6%2021.1%2C15.0%2020.6%2C15.0%2022.2%2C19.6%2021.2%2C19.6%2023.3%2C24.2%2021.8%2C24.2%2024.5%2C30.0%2015.5%2C30.0%2018.1%2C24.2%2016.6%2C24.2%2018.7%2C19.6%2017.7%2C19.6%2019.3%2C15.0%2018.8%2C15.0%22%20fill%3D%22%23183225%22/%3E%3Cpolygon%20points%3D%2230.9%2C13.2%2032.0%2C16.4%2031.5%2C16.4%2033.0%2C20.6%2032.1%2C20.6%2034.1%2C24.8%2032.7%2C24.8%2035.1%2C30.0%2026.8%2C30.0%2029.2%2C24.8%2027.8%2C24.8%2029.8%2C20.6%2028.9%2C20.6%2030.4%2C16.4%2029.9%2C16.4%22%20fill%3D%22%23183225%22/%3E%3Cpolygon%20points%3D%2246.5%2C14.3%2047.5%2C17.2%2047.0%2C17.2%2048.5%2C21.2%2047.6%2C21.2%2049.5%2C25.1%2048.1%2C25.1%2050.5%2C30.0%2042.5%2C30.0%2044.8%2C25.1%2043.5%2C25.1%2045.4%2C21.2%2044.5%2C21.2%2045.9%2C17.2%2045.5%2C17.2%22%20fill%3D%22%23183225%22/%3E%3Cpolygon%20points%3D%2266.6%2C12.6%2067.7%2C15.8%2067.2%2C15.8%2068.7%2C20.2%2067.8%2C20.2%2069.8%2C24.6%2068.4%2C24.6%2070.9%2C30.0%2062.3%2C30.0%2064.8%2C24.6%2063.3%2C24.6%2065.4%2C20.2%2064.4%2C20.2%2066.0%2C15.8%2065.5%2C15.8%22%20fill%3D%22%23183225%22/%3E%3Cpolygon%20points%3D%2270.8%2C1.2%2072.4%2C6.6%2071.7%2C6.6%2074.1%2C13.8%2072.6%2C13.8%2075.7%2C21.0%2073.5%2C21.0%2077.3%2C30.0%2064.3%2C30.0%2068.1%2C21.0%2066.0%2C21.0%2069.0%2C13.8%2067.6%2C13.8%2069.9%2C6.6%2069.2%2C6.6%22%20fill%3D%22%23183225%22/%3E%3Cpolygon%20points%3D%22118.8%2C2.7%20120.4%2C7.8%20119.7%2C7.8%20121.9%2C14.7%20120.5%2C14.7%20123.5%2C21.5%20121.4%2C21.5%20125.0%2C30.0%20112.6%2C30.0%20116.3%2C21.5%20114.2%2C21.5%20117.1%2C14.7%20115.7%2C14.7%20118.0%2C7.8%20117.3%2C7.8%22%20fill%3D%22%23183225%22/%3E%3Cpolygon%20points%3D%22120.5%2C3.1%20122.0%2C8.1%20121.3%2C8.1%20123.5%2C14.9%20122.2%2C14.9%20125.1%2C21.6%20123.0%2C21.6%20126.6%2C30.0%20114.4%2C30.0%20118.0%2C21.6%20115.9%2C21.6%20118.8%2C14.9%20117.4%2C14.9%20119.6%2C8.1%20118.9%2C8.1%22%20fill%3D%22%23183225%22/%3E%3Cpolygon%20points%3D%22161.0%2C3.2%20162.5%2C8.2%20161.8%2C8.2%20164.1%2C14.9%20162.7%2C14.9%20165.6%2C21.6%20163.5%2C21.6%20167.1%2C30.0%20154.9%2C30.0%20158.5%2C21.6%20156.4%2C21.6%20159.3%2C14.9%20158.0%2C14.9%20160.2%2C8.2%20159.5%2C8.2%22%20fill%3D%22%23183225%22/%3E%3Cpolygon%20points%3D%22229.5%2C12.9%20230.6%2C16.1%20230.1%2C16.1%20231.7%2C20.4%20230.7%2C20.4%20232.7%2C24.7%20231.3%2C24.7%20233.8%2C30.0%20225.3%2C30.0%20227.8%2C24.7%20226.4%2C24.7%20228.4%2C20.4%20227.4%2C20.4%20229.0%2C16.1%20228.5%2C16.1%22%20fill%3D%22%23183225%22/%3E%3Cpolygon%20points%3D%22240.1%2C11.0%20241.3%2C14.6%20240.8%2C14.6%20242.4%2C19.3%20241.4%2C19.3%20243.6%2C24.1%20242.0%2C24.1%20244.7%2C30.0%20235.5%2C30.0%20238.2%2C24.1%20236.7%2C24.1%20238.9%2C19.3%20237.8%2C19.3%20239.5%2C14.6%20239.0%2C14.6%22%20fill%3D%22%23183225%22/%3E%3Cpolygon%20points%3D%22275.4%2C6.0%20276.8%2C10.5%20276.2%2C10.5%20278.2%2C16.5%20276.9%2C16.5%20279.6%2C22.5%20277.7%2C22.5%20281.0%2C30.0%20269.8%2C30.0%20273.1%2C22.5%20271.2%2C22.5%20273.9%2C16.5%20272.6%2C16.5%20274.6%2C10.5%20274.0%2C10.5%22%20fill%3D%22%23183225%22/%3E%3C/svg%3E"), radial-gradient(60% 140% at 8% 0%, rgba(118,185,0,.13), transparent 70%);
  background-repeat: repeat-x, repeat-x, no-repeat; background-position: 40px 100%, 0 100%, 0 0; background-size: 210px 22px, 300px 30px, auto; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--amber), var(--line2) 30%, var(--line)); opacity: .7; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .top::before { animation: canopy 1.6s ease-out both; }
  @keyframes canopy { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.brand .eye { filter: drop-shadow(0 0 6px rgba(118,185,0,.35)); }
.site-name { font-family: var(--serif); font-style: italic; }
.badge, select, input[type=number], input[type=date], input[type=text] { background: rgba(19,36,27,.85); border-color: var(--line2); }

/* side rail: a trunk line, each tab a node, the open one lit */
.tabs { background: var(--bg) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.8%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.8%20%200%200%200%200%20.9%20%200%200%200%200%20.7%20%200%200%200%20.5%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); background-blend-mode: soft-light; padding: 12px 8px 24px; }
.tabs button { position: relative; padding: 7px 10px 7px 9px; border-radius: 6px; line-height: 1.25; }
.tabs button::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: var(--line2); z-index: 0; }
.tabs button:first-child::before { top: 50%; } .tabs button:last-child::before { bottom: 50%; }
.tabs button i { position: relative; z-index: 1; width: 22px; height: 22px; line-height: 20px; border-radius: 50%; flex: none;
  background: var(--bg); border: 1px solid var(--line2); color: var(--dim); font-size: 11px; }
.tabs button:hover { background: rgba(19,36,27,.7); }
.tabs button:hover i { border-color: var(--dim); color: var(--text); }
.tabs button.on { background: linear-gradient(90deg, rgba(118,185,0,.14), transparent 85%); box-shadow: none; color: var(--text); font-weight: 600; }
.tabs button.on i { border-color: var(--amber); color: var(--amber); background: #1a1708; box-shadow: 0 0 10px rgba(118,185,0,.45); }
.tabs button.upl i { border-color: rgba(118,185,0,.5); }
body.simple .tabs button { padding-top: 9px; padding-bottom: 9px; }

/* panel: serif headings, grain, quieter cards */
.panel { background: var(--panel) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.8%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%20.8%20%200%200%200%200%20.9%20%200%200%200%200%20.7%20%200%200%200%20.5%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E"); background-blend-mode: soft-light; border-left-color: var(--line2); }
.panel .lead { font-family: var(--serif); font-size: 14px; line-height: 1.55; color: #aebda8; max-width: 62ch; }
.kpi, .card, .joblog { background: linear-gradient(180deg, rgba(31,54,41,.55), rgba(19,36,27,.8)); border-color: var(--line); border-radius: 7px; }
.kpi .v { font-family: var(--serif); font-weight: 700; font-size: 23px; }
.card .t { font-family: var(--serif); font-size: 14px; }
.callout { border-radius: 0 6px 6px 0; background: linear-gradient(90deg, rgba(118,185,0,.11), rgba(118,185,0,.03)); }
.callout.teal { background: linear-gradient(90deg, rgba(76,195,166,.11), rgba(76,195,166,.03)); }
.callout.red { background: linear-gradient(90deg, rgba(229,83,75,.13), rgba(229,83,75,.03)); }
.btn { border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 2px 10px rgba(118,185,0,.18); }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn.ghost { box-shadow: none; }
.chip { border-radius: 14px; } .chip:hover { color: var(--text); border-color: var(--dim); }
.legend, .tip, .busy, .gl-help { background: rgba(7,15,11,.9); border-color: var(--line2); }
.hint { background: var(--amber); }
.drop { background: repeating-linear-gradient(135deg, rgba(31,54,41,.35) 0 10px, rgba(19,36,27,.35) 10px 20px); border-color: var(--line2); }
.bar .track, .cmp .track { background: #0a150f; }
th { color: #a9bba5; }
td { border-bottom-color: rgba(43,70,54,.55); }
tr.click:hover td { background: rgba(31,54,41,.6); }

/* accessibility floor */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
::selection { background: rgba(118,185,0,.35); }
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 5px; } ::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1100px) { .tabs button::before { left: 27px; } .tabs button { padding-left: 9px; } }

@media (max-width: 1100px) { body.simple .tabs button { font-size: 0; justify-content: center; padding: 6px 0; } body.simple .tabs button i { font-size: 11px; } }
@media (max-width: 760px) { .brand span { display: none; } .brand b { font-size: 19px; } }
.brand { flex: none; } .brand span, .brand b { white-space: nowrap; } .site-name { min-width: 0; flex: 0 1 auto; }
@media (max-width: 1700px) { .brand span { display: none; } .brand b { font-size: 22px; } }
.top { gap: 10px; }

/* ================= big and friendly (1.25.10) =================
   Larger type, 44 px touch targets and rounder shapes for tablets, gloves and sunlight. Dark forest by default,
   cloudberry light with html[data-theme=light] (switch in the header, remembered per browser). */
:root { --accent-text: #76b900; --r: 12px; }
html, body { font-size: 15px; line-height: 1.5; }
.top { height: 60px; padding: 0 18px; }
.tabs { top: 60px; width: 196px; padding: 14px 10px 28px; gap: 3px; }
main { top: 60px; left: 196px; grid-template-columns: 1fr 420px; }
.brand b { font-size: 25px; }
.brand .eye { width: 44px; height: 27px; }
.tabs button, body.simple .tabs button { padding: 10px 12px 10px 10px; font-size: 15px; border-radius: var(--r); min-height: 44px; }
.tabs button i { width: 28px; height: 28px; line-height: 26px; font-size: 14px; }
.tabs button::before { left: 23px; }
.btn, .chip, select, input[type=number], input[type=date], input[type=text], .badge { min-height: 40px; padding: 8px 14px; font-size: 14.5px; border-radius: var(--r); }
.badge { display: inline-flex; align-items: center; }
.chip { border-radius: 22px; }
.btn { font-size: 15px; }
.kpi, .card, .joblog, .callout { border-radius: 14px; }
.kpi { padding: 14px 16px; } .card { padding: 14px 16px; }
.kpi .v { font-size: 30px; } .kpi .l { font-size: 12.5px; }
.panel { padding: 22px 22px 56px; }
.panel h2 { font-size: 27px; } .panel h3 { font-size: 16px; margin-top: 24px; }
.panel .lead { font-size: 15.5px; }
td, th { padding: 8px 6px; font-size: 13.5px; } th { font-size: 12.5px; }
.legend, .tip { font-size: 13px; border-radius: 12px; }
.dimsw .seg button, .seg button { min-height: 40px; padding: 8px 16px; font-size: 14.5px; }
.formrow label { font-size: 13.5px; width: 130px; }
.formrow input[type=range] { height: 28px; }
#themeBtn { min-width: 44px; padding: 8px 12px; font-size: 17px; line-height: 1; cursor: pointer; background: transparent; border: 1px solid var(--line2); color: var(--text); border-radius: var(--r); }
#themeBtn:hover { border-color: var(--amber); }
@media (max-width: 1100px) {
  .tabs { width: 68px; } main { left: 68px; grid-template-columns: 1fr 360px; }
  .tabs button, body.simple .tabs button { padding: 8px 0; justify-content: center; font-size: 0; }
  .tabs button i { font-size: 14px; }
}
@media (max-width: 760px) {
  .top { height: 56px; padding: 0 12px; } .tabs { top: 56px; } main { top: 56px; grid-template-columns: 1fr; }
  .panel { padding: 18px 16px 48px; } .panel h2 { font-size: 24px; }
}

/* cloudberry light */
html[data-theme="light"] { color-scheme: light; --accent-text: #3f6b00;
  --bg: #f5f8ee; --panel: #ffffff; --panel2: #eaf1dc; --line: #d5e1bd; --line2: #b3c98a;
  --text: #1a2410; --muted: #4d5c3a; --dim: #75855e; --amber: #5b8f00; --grain: none; }
html[data-theme="light"] .top { background: linear-gradient(180deg, #e9f4cf, #f5f8ee); }
html[data-theme="light"] .top::before { background-image: radial-gradient(60% 140% at 8% 0%, rgba(91,143,0,.22), transparent 70%); animation: none; }
html[data-theme="light"] .tabs, html[data-theme="light"] .panel { background: var(--panel); background-image: none; }
html[data-theme="light"] .tabs { background: var(--bg); }
html[data-theme="light"] .tabs button i { background: #ffffff; }
html[data-theme="light"] .tabs button.on { background: linear-gradient(90deg, rgba(91,143,0,.16), transparent 85%); }
html[data-theme="light"] .tabs button.on i { background: #e3f2c4; box-shadow: none; }
html[data-theme="light"] .kpi, html[data-theme="light"] .card, html[data-theme="light"] .joblog { background: #fff; border-left: 4px solid var(--amber); }
html[data-theme="light"] .badge, html[data-theme="light"] select, html[data-theme="light"] input[type=number], html[data-theme="light"] input[type=date], html[data-theme="light"] input[type=text] { background: #fff; }
html[data-theme="light"] .btn, html[data-theme="light"] .hint { color: #201400; box-shadow: none; }
html[data-theme="light"] .panel h3 { color: #5c4a12; } html[data-theme="light"] .panel .lead { color: #5d5236; }
html[data-theme="light"] .panel a:not(.btn), html[data-theme="light"] .lnk { color: var(--accent-text); }
html[data-theme="light"] .legend, html[data-theme="light"] .tip, html[data-theme="light"] .busy, html[data-theme="light"] .gl-help, html[data-theme="light"] .lb-inner { background: rgba(255,253,246,.95); color: var(--text); }
html[data-theme="light"] .callout { background: rgba(91,143,0,.1); }
html[data-theme="light"] .bar .track, html[data-theme="light"] .cmp .track { background: #eadfc0; }
html[data-theme="light"] td { border-bottom-color: #eadfc0; } html[data-theme="light"] th { color: #6d6244; }
html[data-theme="light"] .brand b { color: var(--text); } html[data-theme="light"] .site-name { color: var(--muted); }
html[data-theme="light"] .drop { background: #fbf3dd; }
html[data-theme="light"] .p-high { color: #a3261c; } html[data-theme="light"] .p-med { color: #8a5200; } html[data-theme="light"] .p-low { color: #1b6b55; }
.legend .sw, #m3legend .sw { box-shadow: inset 0 0 0 1px rgba(0,0,0,.28); }
@media (max-width: 1700px) { .top .ctl { font-size: 0; gap: 0; } .top .ctl select { font-size: 14px; } .top .badge { padding: 8px 10px; font-size: 12.5px; } }
html[data-theme="light"] .newbadge { color: var(--accent-text); background: #fff7e6; border-color: var(--amber); }
html[data-theme="light"] .dimsw .seg { background: rgba(255,253,246,.96); border-color: var(--line2); }
html[data-theme="light"] .dimsw .seg button, html[data-theme="light"] .seg button { color: var(--muted); }
html[data-theme="light"] .dimsw .seg button.on, html[data-theme="light"] .seg button.on { color: #201400; }
html[data-theme="light"] .chip { color: var(--muted); } html[data-theme="light"] .chip.on { color: var(--text); background: #e3f2c4; }
html[data-theme="light"] .btn.ghost { color: var(--text); border-color: var(--line2); }
.top .btn, .top .badge, .top .ghost { white-space: nowrap; }
@media (max-width: 1700px) { .top select { max-width: 160px; } .site-name { display: none; } }
@media (max-width: 1560px) { #gustBadge { display: none; } }
@media (max-width: 760px) {
  .brand .eye, .brand small, #leafBtn + .btn .ico { display: none; }
  .brand b { font-size: 22px; } .top { gap: 6px; }
  .top .btn, .top .ghost, #themeBtn { padding: 6px 10px; min-height: 40px; font-size: 13px; }
}

/* plain-language lists (1.25.10) */
.tc-why { margin: 6px 0 8px; padding: 8px 10px; border-left: 3px solid var(--amber); background: rgba(118,185,0,.1); border-radius: 0 8px 8px 0; font-size: 14px; line-height: 1.45; }
.tc-more { margin: 8px 0; } .tc-more > summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
.when { display: inline-block; padding: 2px 9px; border-radius: 12px; font-weight: 600; font-size: 12.5px; white-space: nowrap; color: #14110a; }
.simplelist { display: grid; gap: 8px; margin: 8px 0 12px; }
.simplelist .it { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); }
.simplelist .it .dot { width: 14px; height: 14px; border-radius: 50%; }
.simplelist .it b { font-size: 15px; } .simplelist .it .sub { display: block; }
table.adv .adv { display: none; } table.adv.show .adv { display: table-cell; }
tr.click:focus-visible td { outline: 2px solid var(--amber); outline-offset: -2px; }
.kpi > b { font: 700 28px var(--serif); margin-right: 8px; }

/* v1.25.10 final check: nothing may push the side panel wider than itself */
#panel select,#panel input:not([type=checkbox]):not([type=radio]),#panel textarea{max-width:100%;min-width:0;box-sizing:border-box;text-overflow:ellipsis}
#panel table.libt{display:block;max-width:100%;overflow-x:auto}
@media(max-width:1250px){#panel table{display:block;max-width:100%;overflow-x:auto}#panel svg{max-width:100%}}
@media(max-width:1250px){#panel .kpi,#panel .kpis>*{min-width:0}#panel .kpi>b{overflow-wrap:anywhere}}

/* ===== v1.25.11 "Horus black-and-green" look: black, one signature green, square edges, bold type, leaves in the background ===== */
:root { --r: 2px; --serif: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --leaf: #76b900; }
.top::before, .top::after { display: none; }
.top { border-bottom: 3px solid var(--amber); }
.brand b { font-family: Arial, Helvetica, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.tabs { background-image: none; }
.tabs button, .tabs button i { border-radius: 0 !important; }
.tabs button.on { box-shadow: inset 3px 0 0 var(--amber); }
.btn, .chip, select, input, .badge, .kpi, .card, .callout, .tc { border-radius: 2px !important; }
#upTop, .btn.primary, .btn.go { background: var(--amber) !important; color: #000 !important; border-color: var(--amber) !important; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
#panel h1, #panel h2, #panel h3 { font-family: Arial, Helvetica, sans-serif !important; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
#panel h2:first-child { font-size: 26px; line-height: 1.1; border-left: 5px solid var(--amber); padding-left: 12px; }
.kpi { border-top: 3px solid var(--amber); }
.kpi > b { font-family: Arial, Helvetica, sans-serif; font-weight: 800; }
/* leaves live behind the panels (leaves.js); panels in the dark theme are a little see-through so they show */
#leaves { z-index: 0; }
html:not([data-theme="light"]) body { background: #000; }
html:not([data-theme="light"]) main { background: transparent; }
html:not([data-theme="light"]) #panel { background: rgba(0,0,0,.34); }
html:not([data-theme="light"]) .tabs { background: rgba(0,0,0,.3); }
html:not([data-theme="light"]) .top { background: rgba(0,0,0,.6); }
html:not([data-theme="light"]) .kpi, html:not([data-theme="light"]) .card, html:not([data-theme="light"]) .callout, html:not([data-theme="light"]) .tc { background: rgba(14,14,14,.5); }
html[data-theme="light"] #leaves { display: none; }
html[data-theme="light"] .top { border-bottom-color: var(--amber); }
#leafBtn { min-width: 44px; padding: 8px 12px; font-size: 17px; line-height: 1; cursor: pointer; background: transparent; border: 1px solid var(--line2); color: var(--text); border-radius: var(--r); min-height: 40px; }
#leafBtn:hover { border-color: var(--amber); }
@media (max-width: 760px) { #leafBtn { padding: 6px 10px; } }
/* header room for the leaf button (1.25.11) */
@media (max-width: 1250px) { #fwiBadge { display: none; } }
@media (max-width: 980px) { .top .ctl { display: none; } }
@media (max-width: 760px) { .top .badge, .top .newbadge { display: none; } .top { overflow: hidden; } }
@media (max-width: 520px) { #upTop { font-size: 0 !important; padding: 6px 14px; } #upTop::before { content: "⇪"; font-size: 20px; } .brand b { font-size: 19px; } }