/* geofem.css — Geotrix FEM studio (v29); builds on the shared studio shell (cp-*) and jetty.css */
.gx-top .gx-brand b { color: var(--purple); font-weight: 800; letter-spacing: .02em; }
.gx-top .gx-brand { background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 14%, var(--surface)), var(--surface)); }
.gx-sp { flex: 1; }
.gx-stale { color: #a3341f !important; border-color: #e7b3a8 !important; }
.gx-fresh { color: #1b6b30 !important; border-color: #a9d8b5 !important; }
.gx-calcbtn { font-weight: 700; }
.gx-runbar { width: 160px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.gx-runbar i { display: block; height: 100%; background: linear-gradient(90deg, #3a86ff, #8338ec, #ff006e); transition: width .25s; }
.gx-main { gap: 16px; }

/* start */
.gx-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, #3a86ff 16%, var(--surface)) 0%, var(--surface) 55%), radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, #ff006e 12%, var(--surface)) 0%, transparent 60%); box-shadow: var(--shadow); }
.gx-hero h2 { margin: 0 0 6px; font: 800 clamp(1.7rem, 3.6vw, 2.5rem)/1.05 var(--font-display, inherit); letter-spacing: .01em; }
.gx-hero h2 em { font-style: normal; background: linear-gradient(90deg, #3a86ff, #8338ec 50%, #ff006e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gx-hero p { margin: 0; color: var(--muted, #555); line-height: 1.5; max-width: 70ch; }
.gx-kpis .cp-kpi { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.gx-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.gx-tpl { display: grid; gap: 4px; text-align: left; padding: 10px 12px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; transition: transform .12s, box-shadow .12s, border-color .12s; }
.gx-tpl:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); border-color: color-mix(in srgb, var(--purple) 50%, var(--line)); }
.gx-tpl.on { border-color: var(--purple); box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 35%, transparent); }
.gx-tpl svg { width: 100%; height: 66px; border-radius: 8px; }
.gx-tpl b { font-size: .98rem; } .gx-tpl span { font-size: .76rem; color: var(--muted, #666); line-height: 1.35; }
.gx-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; font-size: .9rem; }

/* soil */
.gx-soilrow { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; align-items: start; }
.gx-col { width: 150px; height: auto; }
.gx-mats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.gx-mat { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.gx-mathead { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 70%, #fff), color-mix(in srgb, var(--mc) 25%, #fff)); }
.gx-mathead input[type=color] { width: 34px; height: 28px; border: 1px solid rgba(0, 0, 0, .25); border-radius: 6px; padding: 0; background: none; }
.gx-mathead input[type=text] { flex: 1; font: 700 .92rem var(--font-body); border: 1px solid rgba(0, 0, 0, .15); border-radius: 7px; padding: 5px 8px; background: rgba(255, 255, 255, .78); color: #1d232a; }
.gx-matsel, .gx-matf { padding: 8px 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important; }
.gx-matsel { grid-template-columns: 1fr 1fr !important; padding-bottom: 0; }

/* geometry / mesh */
.gx-geomgrid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.gx-pars { display: grid; gap: 10px; }
.gx-sl input[type=range] { width: 100%; accent-color: var(--purple); }
.gx-sl b { float: right; font: 700 .78rem var(--font-mono); color: var(--purple); }
.gx-chk { padding: 2px 0; }
.gx-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-size { border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 7px 14px; border-radius: 999px; font: 600 .82rem var(--font-body); cursor: pointer; }
.gx-size.on { background: var(--purple); color: #fff; border-color: var(--purple); }

/* viewer */
.gx-view { position: relative; width: 100%; min-height: 260px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fbfaf7; }
.gx-view canvas { display: block; touch-action: none; cursor: crosshair; }
.gx-tip { position: absolute; pointer-events: none; z-index: 5; background: rgba(22, 27, 34, .92); color: #f3f4f6; font: 500 .74rem/1.4 var(--font-body); padding: 6px 9px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); max-width: 240px; }
.gx-tip b { color: #fff; font-size: .82rem; } .gx-tip small { color: #c3c8cf; } .gx-tip i { color: #ffd166; font-style: normal; }

/* phases */
.gx-phgrid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.gx-phleft, .gx-phright { display: grid; gap: 14px; min-width: 0; }
.gx-phlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.gx-phlist button { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; padding: 7px 10px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 .84rem var(--font-body); cursor: pointer; }
.gx-phlist button b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 9%, transparent); font: 700 .72rem var(--font-mono); }
.gx-phlist button small { display: block; color: var(--muted, #777); font-size: .72rem; }
.gx-phlist button[aria-current="step"] { border-color: var(--purple); box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 28%, transparent); }
.gx-phlist button[aria-current="step"] b { background: var(--purple); color: #fff; }
.gx-phlist i.ok { color: #1b6b30; font-style: normal; font-weight: 700; } .gx-phlist i.no { color: #b42318; font-style: normal; font-weight: 700; }
.gx-tg { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 6px 0; border-top: 1px dashed var(--line); }
.gx-tg:first-child { border-top: 0; }
.gx-tg > span { flex-basis: 100%; font: 700 .66rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2, #8338ec); }

/* calculate */
.gx-calcbig { display: flex; gap: 10px; align-items: center; margin: 4px 0 8px; }
.gx-go { font-size: 1rem !important; padding: 11px 22px !important; border-radius: 12px !important; background: linear-gradient(135deg, #3a86ff, #8338ec) !important; border: 0 !important; color: #fff !important; box-shadow: 0 6px 18px rgba(58, 134, 255, .35); }
.gx-go:disabled { opacity: .6; box-shadow: none; }
.gx-prows { display: grid; gap: 8px; }
.gx-prow { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.gx-pn { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); font: 700 .74rem var(--font-mono); }
.gx-prow b { font-size: .86rem; } .gx-prow small { display: block; color: var(--muted, #777); font-size: .72rem; }
.gx-bar { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; margin: 4px 0 2px; }
.gx-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: #9aa5b1; transition: width .3s; }
.gx-bar i.ok { background: linear-gradient(90deg, #2a9d8f, #52b788); } .gx-bar i.no { background: linear-gradient(90deg, #e63946, #f77f00); } .gx-bar i.run { background: linear-gradient(90deg, #3a86ff, #8338ec); }
.gx-pmsg { font-family: var(--font-mono); }
.gx-log { margin: 8px 0 0; padding: 10px; border-radius: 10px; background: #12161c; color: #c8f7c5; font: 500 .72rem/1.5 var(--font-mono); white-space: pre-wrap; max-height: 240px; overflow: auto; }

/* results */
.gx-res { display: grid; gap: 10px; }
.gx-rtop { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gx-rtop > select { font: 600 .84rem var(--font-body); padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 100%; }
.gx-phchips, .gx-qf { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.gx-phchips button, .gx-qf button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); min-width: 32px; padding: 5px 9px; border-radius: 999px; font: 700 .76rem var(--font-mono); cursor: pointer; }
.gx-qf button { font-family: var(--font-body); font-weight: 600; }
.gx-phchips button[aria-pressed="true"], .gx-qf button[aria-pressed="true"] { background: var(--purple); color: #fff; border-color: var(--purple); }
.gx-phchips .gx-play { font-family: var(--font-body); } .gx-phname { font-size: .82rem; color: var(--muted, #666); margin-left: 6px; }
.gx-big { min-height: 360px; }
.gx-ropts { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.gx-mini { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 6px; } .gx-mini span { margin: 0; } .gx-mini select, .gx-mini input { width: auto !important; }
.gx-tools { gap: 6px; }
.gx-xsec:empty { display: none; }
.gx-fig svg { display: block; width: 100%; height: auto; }
.gx-ring { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.gx-design { margin-top: 6px; }
.gx-rep { gap: 8px; }

@media (max-width: 980px) { .gx-geomgrid, .gx-phgrid, .gx-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .gx-soilrow { grid-template-columns: minmax(0, 1fr); } .gx-col { width: 120px; } .gx-tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gx-tpl svg { height: 50px; } }
.gx-chks { display: grid; gap: 6px; margin: 6px 0; }
.gx-chks .cp-chk { display: flex; gap: 8px; align-items: center; }
.gx-barw { max-width: 680px; }
.gx-barw svg { width: 100%; height: auto; display: block; }