.tool-index-hero .inner-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(360px, .82fr); }
.tool-index-hero h1 span { display: block; color: var(--inner-accent); }

.tool-status-board { border-top: 3px solid var(--inner-ink); background: var(--inner-surface); }
.tool-status-board > div {
  display: grid;
  min-height: 48px;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 0 12px;
  border-bottom: 1px solid var(--inner-line);
  font-size: 13px;
}
.tool-status-board dt { color: var(--inner-faint); }
.tool-status-board dd { margin: 0; color: var(--inner-ink); }
.tool-status-board span { color: var(--inner-green); font-size: 12px; font-weight: 700; }

.tool-register { border-top: 3px solid var(--inner-ink); }
.tool-register-row {
  position: relative;
  display: grid;
  min-height: 138px;
  grid-template-columns: 76px minmax(210px, .7fr) minmax(300px, 1fr) 110px;
  align-items: center;
  gap: 28px;
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--inner-line-strong);
  color: var(--inner-ink);
  transition: padding 240ms var(--inner-ease), background 180ms ease;
}
.tool-register-row:hover { padding-left: 16px; background: var(--inner-surface); }
.tool-register-no { color: var(--inner-accent); font-size: 12px; letter-spacing: .08em; }
.tool-register-row small { display: block; margin-bottom: 7px; color: var(--inner-faint); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.tool-register-row h2 { margin: 0; font-size: 25px; font-weight: 640; letter-spacing: -.03em; }
.tool-register-row p { margin: 0; color: var(--inner-muted); font-size: 14px; line-height: 1.7; }
.tool-register-state { justify-self: end; padding: 5px 8px; border: 1px solid var(--inner-line); color: var(--inner-green); background: var(--inner-surface); font-size: 11px; font-weight: 700; }
.tool-register-row:hover .tool-register-state { border-color: var(--inner-green); }

.tool-principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(245, 242, 233, .25); border-left: 1px solid rgba(245, 242, 233, .25); }
.tool-principles article { min-height: 210px; padding: 28px; border-right: 1px solid rgba(245, 242, 233, .25); border-bottom: 1px solid rgba(245, 242, 233, .25); }
.tool-principles small { color: #d6ad92; font-size: 11px; letter-spacing: .1em; }
.tool-principles h3 { margin: 32px 0 12px; color: #f5f2e9; font-size: 20px; font-weight: 620; }
.tool-principles p { margin: 0; color: rgba(245, 242, 233, .68); font-size: 14px; }

.workbench-hero { min-height: 246px; }
.workbench-hero .inner-hero-grid { min-height: 246px; padding-block: 52px 42px; }

.workbench-shell {
  display: grid;
  min-height: 630px;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  border-top: 3px solid var(--inner-ink);
  border-right: 1px solid var(--inner-line-strong);
  border-bottom: 1px solid var(--inner-line-strong);
  border-left: 1px solid var(--inner-line-strong);
  background: var(--inner-surface);
}
.workbench-controls { padding: 26px; border-right: 1px solid var(--inner-line-strong); background: var(--inner-paper-2); }
.workbench-controls h2,
.workbench-output h2 { margin: 0 0 8px; font-size: 22px; font-weight: 640; letter-spacing: -.02em; }
.workbench-controls > p,
.workbench-output > p { margin-bottom: 24px; color: var(--inner-muted); font-size: 13px; }
.workbench-field { display: grid; gap: 7px; margin-bottom: 18px; }
.workbench-field label { color: var(--inner-ink); font-size: 13px; font-weight: 620; }
.workbench-field small { color: var(--inner-faint); font-size: 11px; }
.workbench-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.workbench-output { min-width: 0; padding: 26px; }
.workbench-output-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.workbench-output-head > span { color: var(--inner-faint); font-size: 11px; letter-spacing: .1em; }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--inner-line-strong); border-left: 1px solid var(--inner-line-strong); }
.metric-box { min-height: 118px; padding: 18px; border-right: 1px solid var(--inner-line-strong); border-bottom: 1px solid var(--inner-line-strong); }
.metric-box small { color: var(--inner-faint); font-size: 11px; }
.metric-box strong { display: block; margin-top: 20px; color: var(--inner-ink); font-size: 26px; font-weight: 620; font-variant-numeric: tabular-nums; }
.metric-box em { color: var(--inner-muted); font-size: 12px; font-style: normal; }

.spatial-canvas-wrap { position: relative; height: 330px; margin-top: 22px; border: 1px solid var(--inner-line-strong); background: var(--inner-paper); }
.spatial-canvas-wrap canvas { width: 100%; height: 100%; }
.spatial-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; color: var(--inner-muted); font-size: 14px; text-align: center; pointer-events: none; }
.spatial-canvas-wrap.has-data .spatial-empty { display: none; }
.coordinate-table-wrap { margin-top: 22px; max-height: 260px; overflow: auto; }
.coordinate-table { width: 100%; border-collapse: collapse; }
.coordinate-table th,
.coordinate-table td { padding: 10px 8px; border-bottom: 1px solid var(--inner-line); text-align: left; font-size: 12px; font-variant-numeric: tabular-nums; }
.coordinate-table th { position: sticky; top: 0; color: var(--inner-faint); background: var(--inner-surface); }
.coordinate-table td { color: var(--inner-muted); }

.calc-selector { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 3px solid var(--inner-ink); border-left: 1px solid var(--inner-line-strong); }
.calc-selector a { min-height: 220px; padding: 24px; border-right: 1px solid var(--inner-line-strong); border-bottom: 1px solid var(--inner-line-strong); background: var(--inner-surface); }
.calc-selector small { color: var(--inner-accent); font-size: 11px; letter-spacing: .1em; }
.calc-selector h3 { margin: 40px 0 12px; font-size: 22px; font-weight: 640; }
.calc-selector p { color: var(--inner-muted); font-size: 13px; }
.calc-selector b { display: block; margin-top: 22px; font-size: 13px; }
.calc-selector a:hover { color: var(--inner-surface); background: var(--inner-green); }
.calc-selector a:hover :is(p, small) { color: rgba(255,255,255,.72); }

.converter-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; border-top: 3px solid var(--inner-ink); border-right: 1px solid var(--inner-line-strong); border-bottom: 1px solid var(--inner-line-strong); border-left: 1px solid var(--inner-line-strong); background: var(--inner-surface); }
.converter-modes { border-right: 1px solid var(--inner-line-strong); background: var(--inner-paper-2); }
.converter-modes button { display: flex; width: 100%; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 14px; border: 0; border-bottom: 1px solid var(--inner-line); color: var(--inner-muted); background: transparent; font-size: 13px; cursor: pointer; }
.converter-modes button[aria-pressed="true"] { color: var(--inner-ink); background: var(--inner-surface); box-shadow: inset 3px 0 var(--inner-accent); }
.converter-form { padding: 28px; }
.converter-form-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; margin-top: 18px; }
.converter-result { padding: 28px; border-left: 1px solid var(--inner-line-strong); background: var(--inner-green); color: #fff; }
.converter-result small { color: rgba(255,255,255,.68); font-size: 11px; letter-spacing: .1em; }
.converter-result strong { display: block; margin: 68px 0 8px; font-size: 42px; font-weight: 620; line-height: 1; word-break: break-all; }
.converter-result span { color: rgba(255,255,255,.7); font-size: 13px; }
.converter-result p { margin-top: 28px; color: rgba(255,255,255,.64); font-size: 12px; }

html[data-theme="dark"] .tool-status-board,
html[data-theme="dark"] .workbench-shell,
html[data-theme="dark"] .converter-grid { background: var(--inner-surface); }

@media (max-width: 980px) {
  .tool-register-row { grid-template-columns: 58px minmax(190px, .7fr) 1fr; }
  .tool-register-state { grid-column: 3; justify-self: start; }
  .workbench-shell { grid-template-columns: 340px minmax(0, 1fr); }
  .converter-grid { grid-template-columns: 190px 1fr; }
  .converter-result { grid-column: 1 / -1; border-top: 1px solid var(--inner-line-strong); border-left: 0; }
  .converter-result strong { margin-top: 24px; }
}

@media (max-width: 760px) {
  .tool-index-hero .inner-hero-grid { grid-template-columns: 1fr; }
  .tool-register-row { grid-template-columns: 44px 1fr; gap: 12px; padding-block: 24px; }
  .tool-register-row > p,
  .tool-register-state { grid-column: 2; }
  .tool-principles { grid-template-columns: 1fr; }
  .workbench-shell { grid-template-columns: 1fr; }
  .workbench-controls { border-right: 0; border-bottom: 1px solid var(--inner-line-strong); }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .calc-selector { grid-template-columns: 1fr; }
  .converter-grid { grid-template-columns: 1fr; }
  .converter-modes { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--inner-line-strong); scrollbar-width: none; }
  .converter-modes::-webkit-scrollbar { display: none; }
  .converter-modes button { min-width: 150px; border-right: 1px solid var(--inner-line); }
  .converter-modes button[aria-pressed="true"] { box-shadow: inset 0 -3px var(--inner-accent); }
}