:root {
  color-scheme: light;
  --ink: #19332e;
  --muted: #52655e;
  --green: #155e49;
  --dark: #104439;
  --line: #d6e0d7;
  --paper: #f5f7f2;
  --pale: #e6efe4;
  --amber: #82561a;
  font-family: "Malgun Gothic","Apple SD Gothic Neo","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  overflow-wrap: anywhere;
}
* { box-sizing: border-box }
body { margin: 0 }
[hidden] { display: none !important }
button, input, select, textarea { font: inherit }
button, a { -webkit-tap-highlight-color: transparent }
a { color: var(--green); text-underline-offset: .2em }
button { cursor: pointer }
button:disabled { cursor: default; opacity: .52 }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #b97913; outline-offset: 3px }
button, a, label { touch-action: manipulation }
input:not([type=checkbox]), select, textarea { display: block; width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #a6bab0; border-radius: 6px; color: var(--ink); background: white; min-width: 0 }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--green); margin: 0 }
input:invalid:not(:placeholder-shown):not(:focus) { box-shadow: none }
textarea { resize: vertical; min-height: 92px }
.wrap { max-width: 1300px; padding: 0 clamp(16px,4vw,52px); margin: auto }
h1,h2,h3,h4,p,dl,dd { margin: 0 }
h1,h2,h3,h4 { letter-spacing: -.045em; line-height: 1.3; word-break: keep-all }
h2 { font-size: clamp(25px,3vw,34px) }
h3 { font-size: 19px }
h4 { font-size: 16px }
section p + p, .panel p + p, .info p + p, .detail-section p + p { margin-top: .65rem }
.skip-link { position: fixed; top: -90px; left: 12px; background: white; padding: 9px 15px; z-index: 10 }
.skip-link:focus { top: 8px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.top { border-bottom: 1px solid var(--line); background: #fff }
.top-inner, .top-actions, .brand { display: flex; align-items: center }
.top-inner { min-height: 64px; justify-content: space-between; gap: 10px }
.top-actions { gap: 14px; font-size: 13px; flex-wrap: wrap; justify-content: end }
.brand { color: var(--ink); text-decoration: none; gap: 9px; font-size: 22px; font-weight: 800; letter-spacing: -.04em; flex-shrink: 0 }
.brand small { font-size: 16px; font-weight: 650 }
.connection { color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 7px }
.connection::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9b9271; flex-shrink: 0 }
.connection.ok::before { background: #348461 }
.connection.error::before { background: #aa5233 }
.masthead { margin-top: 24px; display: grid; grid-template-columns: 1fr 30%; align-items: stretch; border: 1px solid #bcccbd; background: #e9efe6; border-radius: 12px; overflow: hidden }
.mast-copy { padding: clamp(25px,4vw,48px); align-self: center }
.eyebrow,.diagram-head { font: 700 10px/1.4 ui-monospace,Consolas,monospace; letter-spacing: .14em; color: var(--green) }
.line { display: inline-block; vertical-align: middle; height: 2px; width: 28px; margin-right: 10px; background: #57926d }
h1 { margin: 10px 0; font-size: clamp(31px,4.4vw,56px); letter-spacing: -.065em }
.mast-copy > p:last-child { color: #3e5950; max-width: 46em }
.schematic { background-color: #154a40; background-image: linear-gradient(#ffffff0c 1px, transparent 1px),linear-gradient(90deg,#ffffff0c 1px, transparent 1px); background-size: 20px 20px; padding: 22px; display: flex; flex-direction: column; justify-content: center; color: #ddf3d6 }
.diagram-head { display: flex; justify-content: space-between; color: #cce7ce; border-bottom: 1px solid #a1bfac59; padding-bottom: 8px; margin-bottom: 22px }
.equipment { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; text-align: center }
.equipment > div { display: grid; justify-items: center; gap: 5px; min-width: 0 }
.equipment b { border-top: 1px dashed #a1bfac; flex: 1; margin-top: 16px }
.equipment small { font-size: 11px; letter-spacing: .09em }
.unit { display: block; width: 37px; height: 29px; border: 2px solid #b3d7ab; position: relative }
.unit.mix { clip-path: polygon(0 0,100% 0,100% 45%,65% 100%,35% 100%,0 45%); background: repeating-linear-gradient(135deg,#afcfaa 0 2px,transparent 3px 6px) }
.unit.kiln { border-radius: 18px; width: 53px; background: repeating-linear-gradient(90deg, transparent 0 9px,#b3d7ab 10px 11px); transform: rotate(-7deg) }
.unit.finish { width: 32px; background: repeating-linear-gradient(0deg,transparent 0 6px,#b3d7ab 7px 8px) }
.meta { display: flex; gap: 8px 18px; padding: 13px 1px 8px; color: var(--muted); flex-wrap: wrap; font-size: 13px }
.meta strong { color: var(--ink) }
.nav { display: flex; align-items: stretch; flex-wrap: wrap; border-bottom: 1px solid #a7b9ab; margin-top: 15px; gap: 0 6px }
.nav a { padding: 12px 14px; text-decoration: none; color: var(--muted); font-weight: 650; white-space: nowrap; border-bottom: 3px solid transparent }
.nav a[aria-current="page"] { border-bottom-color: var(--green); color: var(--dark); background: #e7eee5 }
.nav a:hover { background: #e9eee7 }
.nav span, .count, .badge { display: inline-block; border-radius: 4px; padding: 2px 7px; background: var(--pale); color: var(--dark); font-size: 12px; font-weight: 650; vertical-align: middle }
.view { min-height: 48vh; padding: 28px 0 46px }
.heading,.controls,.filter-heading,.card-top,.card-foot,.dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.heading { flex-wrap: wrap; margin-bottom: 16px }
.heading .eyebrow { margin-bottom: 5px }
.heading.compact { margin-top: 30px }
.result-count,.muted,.intro { color: var(--muted) }
.intro { margin: -4px 0 20px; max-width: 66em }
.result-count { font-size: 14px }
.subhead { margin: 29px 0 12px }
.explore-layout { display: grid; grid-template-columns: minmax(200px,245px) minmax(0,1fr); gap: 20px; align-items: start }
.filters,.panel,.record,.map-card,.company,.audit,.empty,.info { border: 1px solid var(--line); border-radius: 9px; background: white }
.filters,.panel,.info { padding: 19px }
.filters { position: sticky; top: 12px }
.filter-heading { margin-bottom: 13px }
.filter-toggle { display: none }
label,.field-label { color: #385147; font-weight: 650; font-size: 13px }
.filters label { display: block; margin: 8px 0 3px }
.primary,.secondary,.link,.record-title { border: 0; font-weight: 650 }
.primary,.secondary, a.button { border-radius: 6px; min-height: 40px; padding: 8px 14px; font-size: 14px }
.primary { color: #fff; background: var(--green); border: 1px solid var(--green) }
.primary:hover:not(:disabled) { background: #104b3c }
.secondary, a.button { border: 1px solid #acbfb1; color: var(--dark); background: #fff }
.secondary:hover:not(:disabled), a.button:hover { background: var(--pale) }
a.button { display: inline-flex; align-items: center; font-weight: 650; text-decoration: none }
.link, .record-title { background: transparent; color: var(--green); text-align: left; padding: 0 }
.link { font-size: 13px; min-height: 38px }
.link:hover,.record-title:hover { text-decoration: underline; text-underline-offset: .17em }
.controls { margin-bottom: 12px; flex-wrap: wrap }
.controls .muted { font-size: 13px }
.controls > div { display: flex; gap: 7px; align-items: center }
.controls select { width: auto }
.record,.map-card,.company,.audit { padding: 16px 20px; margin-bottom: 11px; min-width: 0 }
.record { box-shadow: 0 1px 2px #142d1d08 }
.record-title { font-size: clamp(18px,2vw,23px); font-weight: 700; color: var(--ink); line-height: 1.45; letter-spacing: -.04em; margin: 4px 0 7px }
.card-top,.card-foot,.stamp { font-size: 13px; color: var(--muted) }
.card-top { align-items: start }
.check { display: flex; align-items: center; gap: 5px; flex-shrink: 0; cursor: pointer; padding: 4px }
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 9px }
.badge.alt { color: #5b4524; background: #f4ecd9 }
.badge.plain { color: var(--muted); background: #f1f3ef }
.metric { border-left: 3px solid #75a378; padding: 6px 10px; background: #f2f6f0; margin-top: 11px; font-size: 14px }
.metric strong { font-size: 12px; margin-right: 8px; color: var(--green) }
.card-foot { margin-top: 9px; gap: 14px }
.card-foot button { flex-shrink: 0 }
.map-grid,.company-grid,.ops-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,290px),1fr)); gap: 13px }
.map-card,.company,.ops-grid .panel { margin: 0 }
.map-card h3,.company h3 { margin: 4px 0 8px }
dl { display: grid; gap: 7px; margin: 12px 0 }
dt { color: var(--muted); font-size: 12px; font-weight: 700 }
dd { font-size: 14px; margin-bottom: 4px }
.scroll-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; background: white }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px }
th,td { border-bottom: 1px solid var(--line); padding: 10px 12px; vertical-align: top }
thead th { color: var(--muted); font-weight: 650; background: #ebf1e9 }
tr:last-child td,tbody tr:last-child th { border-bottom: none }
.compare th:not(:first-child),.compare td { min-width: 210px; width: 26% }
.compare tbody th { background: #f0f4ed; min-width: 112px }
.empty,.info { color: var(--muted); padding: 17px }
.empty { border-style: dashed; margin: 5px 0 }
.info { background: #eef3e9; margin: 18px 0 }
.info h3,.panel h3 { margin-bottom: 10px; color: var(--ink) }
.info p,.panel p,.map-card p,.audit p { font-size: 14px }
.calc-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,1fr); gap: 15px; align-items: stretch }
.calc-inputs { padding: 0; overflow: hidden }
.calc-inputs th,.calc-inputs td { vertical-align: middle }
.calc-inputs tbody th { width: 42% }
.calc-inputs input { font-variant-numeric: tabular-nums }
.calc-output { padding: clamp(19px,3vw,32px); color: #eff7ec; background: var(--dark); border-radius: 9px }
.calc-output .eyebrow { color: #bddcae }
.calc-output .capacity { font-size: clamp(33px,4vw,53px); font-weight: 750; letter-spacing: -.05em; line-height: 1.2; margin: 12px 0 }
.capacity small { font-size: 17px }
.calc-output .rule { border-top: 1px solid #7ca590; margin: 16px 0 }
.formula { font-weight: 700; color: var(--dark) }
.actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 13px }
.audit p,.audit small { margin-top: 5px }
.audit a { display: inline-block; margin-top: 6px }
details { margin: 11px 0; padding: 9px 13px; border: 1px solid var(--line); border-radius: 6px; background: white }
summary { font-weight: 650; cursor: pointer; color: var(--green) }
details ul { padding-left: 20px }
.backup { margin-top: 24px }
.backup form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 17px }
.backup input { width: auto; max-width: 100% }
.alert { border: 1px solid #dab37a; background: #fcf2df; color: #603c11; padding: 13px 17px; margin: 14px 0; border-radius: 7px }
.alert p,.alert .actions { font-size: 14px }
dialog { border: 1px solid #9db5a6; border-radius: 12px; width: min(740px,calc(100% - 24px)); max-height: 90vh; padding: 0 24px 22px; color: var(--ink); overflow: auto; overflow-wrap: anywhere; box-shadow: 0 24px 90px #102b2540 }
dialog::backdrop { background: #0c251ec2 }
body:has(dialog[open]) { overflow: hidden }
.dialog-top { position: sticky; top: 0; z-index: 1; padding: 12px 0; background: #fff; border-bottom: 1px solid var(--line); margin-bottom: 14px }
dialog h2 { font-size: 25px; margin: 8px 0 13px }
.detail-section { margin-top: 17px }
.detail-section h3 { margin-bottom: 6px; font-size: 17px }
.detail-section p,.source-row p { font-size: 14px }
.source-row { border-top: 1px solid var(--line); padding: 12px 0 }
.source-row a { font-weight: 700 }
.fields { display: grid; gap: 10px; margin-top: 15px }
.fields label { display: grid; gap: 3px }
.note-text { white-space: pre-wrap }
.toast { position: fixed; z-index: 5; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 10px 17px; border-radius: 8px; background: #102f27; color: #fff; max-width: min(90vw,640px); box-shadow: 0 3px 16px #0003; font-size: 14px }
.dialog-status { color: #684108; font-size: 14px; margin-top: 9px }
footer.wrap { border-top: 1px solid var(--line); padding-top: 17px; padding-bottom: 25px; color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; flex-wrap: wrap }
@media (max-width: 760px) {
  .masthead { grid-template-columns: 1fr }
  .schematic { display: none }
  .nav { gap: 0; margin-top: 8px }
  .nav a { flex: 1 1 30%; text-align: center; font-size: 14px; padding: 8px 3px }
  .explore-layout,.calc-layout { grid-template-columns: 1fr }
  .filters { position: static; padding: 13px 15px }
  .filter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 10px }
  .filter-toggle { display: block; margin-top: 10px }
  .filter-toggle[aria-expanded="false"] + .filter-grid { display: none }
  .filter-heading { margin-bottom: 0 }
  .view { padding-top: 22px }
  .top-actions { font-size: 12px; gap: 6px }
}
@media (max-width: 430px) {
  .masthead { margin-top: 14px }
  .mast-copy { padding: 21px 16px }
  .mast-copy > p:last-child,.intro { font-size: 14px }
  .brand small { font-size: 13px }
  .brand img { width: 29px; height: 29px }
  .connection { max-width: 160px; line-height: 1.35 }
  .record,.company,.map-card { padding: 13px }
  .calc-inputs td,.calc-inputs th { padding: 7px 5px }
  .calc-inputs input { padding: 6px 4px }
  dialog { padding: 0 14px 16px }
}

body:not(.ready)>:not(#gate){display:none!important}body.ready>#gate,#logout,#save-scenario{display:none!important}#gate{margin:8vh auto;padding:2rem}
#gate{max-width:46rem;margin:8vh auto}#unlock-form{display:grid;gap:.65rem;margin:1.5rem 0}#gate details{margin:1rem 0}#gate input{max-width:100%}