:root {
  color-scheme: dark;
  --bg: #0a0f18;
  --panel: #101827;
  --panel-2: #141e2f;
  --line: #263247;
  --line-soft: #1b2638;
  --text: #edf3fb;
  --muted: #8795aa;
  --dim: #59677c;
  --cyan: #43d3df;
  --cyan-soft: rgba(67, 211, 223, .12);
  --green: #67d99a;
  --blue: #5ba7ff;
  --red: #ff6969;
  --yellow: #ffd45e;
  --orange: #ff9e64;
  --radius: 14px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: "Segoe UI", Arial, sans-serif; }
/* Статичные элементы интерфейса не показывают текстовый курсор после клика. */
body { user-select: none; caret-color: transparent; }
input, textarea, select, [contenteditable="true"] { user-select: text; caret-color: auto; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, label:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }

.topbar {
  height: 66px;
  display: grid;
  grid-template-columns: 245px auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: #0c131f;
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 11px; font-size: 15px; letter-spacing: .11em; }
.brand strong { color: var(--cyan); }
.brand-mark { width: 28px; height: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; transform: skew(-9deg); }
.brand-mark i { border: 1px solid var(--cyan); background: rgba(67, 211, 223, .08); }
.brand-mark i:nth-child(2) { transform: translateY(4px); }
.brand-mark i:nth-child(3) { transform: translateY(8px); }
.privacy-note { justify-self: center; color: var(--muted); font-size: 13px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 7px; box-shadow: 0 0 0 4px rgba(103, 217, 154, .12); }
.top-actions { display: flex; gap: 9px; }
.module-tabs { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #090f18; }
.module-tabs button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 650; }
.module-tabs button:hover { color: var(--text); }
.module-tabs button.active { background: #243149; color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.22); }

.button { border: 1px solid var(--line); border-radius: 9px; min-height: 38px; padding: 0 15px; cursor: pointer; font-weight: 650; transition: .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); border-color: #3a4c69; }
.button:disabled { opacity: .38; cursor: not-allowed; }
.button.primary { background: var(--cyan); color: #061217; border-color: var(--cyan); }
.button.primary:hover { background: #6be1e9; }
.button.ghost { background: #121c2b; }
.button.secondary { background: var(--cyan-soft); color: var(--cyan); border-color: rgba(67, 211, 223, .35); }

.workspace { min-height: calc(100vh - 66px); display: grid; grid-template-columns: 292px minmax(610px, 1fr) 330px; }
.left-rail, .right-rail { background: #0d1522; }
.left-rail { border-right: 1px solid var(--line); }
.right-rail { border-left: 1px solid var(--line); }
.scroll-panel { height: calc(100vh - 66px); overflow-y: auto; position: sticky; top: 66px; scrollbar-width: thin; scrollbar-color: #33425a transparent; }
.panel-section { padding: 22px 18px; border-bottom: 1px solid var(--line-soft); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 15px; }
.section-heading.compact { margin-bottom: 13px; }
.section-heading h2, .results-head h2, .dialog-head h2 { margin: 3px 0 0; font-size: 17px; font-weight: 680; letter-spacing: -.01em; }
.eyebrow { color: var(--cyan); text-transform: uppercase; font-size: 10px; font-weight: 750; letter-spacing: .13em; }
.counter { min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--panel-2); color: var(--muted); font-size: 12px; font-weight: 700; }

.file-input-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.drop-zone { border: 1px dashed #34445d; background: #111b2a; border-radius: 12px; min-height: 148px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; padding: 17px; transition: .2s ease; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--cyan); background: var(--cyan-soft); }
.drop-zone:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.upload-button { min-height: 34px; margin-top: 12px; padding: 0 14px; }
.upload-icon { width: 34px; height: 34px; border: 1px solid #3c516e; border-radius: 9px; display: grid; place-items: center; font-size: 20px; color: var(--cyan); margin-bottom: 10px; }
.drop-zone strong { font-size: 13px; }
.drop-zone span:not(.upload-icon) { color: var(--muted); font-size: 12px; margin-top: 4px; }
.drop-zone small { color: var(--dim); font-size: 10px; margin-top: 10px; }
.file-list { display: grid; gap: 7px; margin-top: 10px; }
.file-item { display: grid; grid-template-columns: 30px 1fr 25px; align-items: center; gap: 8px; padding: 8px 7px; border: 1px solid var(--line-soft); border-radius: 9px; background: #111a29; }
.file-item.active { border-color: rgba(67, 211, 223, .55); background: var(--cyan-soft); }
.file-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; color: var(--cyan); background: #17263a; font-size: 9px; font-weight: 800; }
.file-text { min-width: 0; cursor: pointer; }
.file-text strong, .file-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-text strong { font-size: 11px; }
.file-text small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.remove-file { border: 0; background: transparent; color: var(--dim); font-size: 17px; cursor: pointer; border-radius: 5px; }
.remove-file:hover { color: var(--red); background: rgba(255, 105, 105, .1); }

.field-label { display: block; color: var(--muted); font-size: 11px; margin-bottom: 7px; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: #0b121e; border: 1px solid var(--line-soft); border-radius: 9px; margin-bottom: 14px; }
.segmented label { cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { min-height: 30px; display: grid; place-items: center; color: var(--muted); border-radius: 6px; font-size: 10px; }
.segmented input:checked + span { color: var(--text); background: #243149; box-shadow: 0 2px 7px rgba(0, 0, 0, .2); }
.tariff-group { grid-template-columns: 1fr 1fr; }
.form-grid { display: grid; gap: 10px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.form-field { min-width: 0; }
.form-field.full { display: block; margin-bottom: 10px; }
.form-field > span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.form-field input, .form-field select, select { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 7px; background: #111a28; color: var(--text); padding: 0 9px; font-size: 12px; }
.form-field input:hover, .form-field select:hover { border-color: #3a4c69; }
.form-field input:focus, .form-field select:focus { border-color: var(--cyan); outline: 0; box-shadow: 0 0 0 3px rgba(67, 211, 223, .08); }
.hidden { display: none !important; }
.text-button { border: 0; background: transparent; color: var(--cyan); font-size: 10px; cursor: pointer; padding: 5px; }
.layer-list { display: grid; gap: 7px; }
.empty-list { color: var(--dim); font-size: 11px; line-height: 1.5; }
.layer-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; cursor: pointer; }
.layer-row input { accent-color: var(--cyan); }
.layer-row b { color: var(--dim); font-size: 10px; font-weight: 600; }

.main-stage { padding: 18px; min-width: 0; overflow: hidden; }
.viewer-card, .results-card { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.viewer-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 14px 11px 17px; border-bottom: 1px solid var(--line); }
.viewer-head h1 { max-width: 480px; margin: 3px 0 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-head-actions { display: flex; align-items: center; gap: 10px; }
.status-pill { border: 1px solid var(--line); border-radius: 999px; background: #111a28; min-height: 30px; padding: 0 10px; font-size: 10px; font-weight: 700; cursor: pointer; }
.status-pill.ok { color: var(--green); border-color: rgba(103, 217, 154, .35); background: rgba(103, 217, 154, .08); }
.status-pill.warning { color: var(--yellow); border-color: rgba(255, 212, 94, .35); background: rgba(255, 212, 94, .08); }
.status-pill.review, .status-pill.error { color: var(--red); border-color: rgba(255, 105, 105, .35); background: rgba(255, 105, 105, .08); }
.status-pill.neutral { color: var(--muted); }
.tool-group { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tool-group button { min-width: 32px; height: 30px; border: 0; border-right: 1px solid var(--line); background: #111a28; color: var(--muted); cursor: pointer; font-size: 12px; }
.tool-group button:last-child { border-right: 0; }
.tool-group button:hover { color: var(--text); background: #1b2638; }

.cad-shell { height: min(49vh, 570px); min-height: 400px; position: relative; overflow: hidden; background: #0b121d; }
#cadView { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#cadView.panning { cursor: grabbing; }
.cad-ruler { position: absolute; z-index: 4; display: block; pointer-events: none; }
.cad-ruler-horizontal { top: 0; left: 42px; width: calc(100% - 42px); height: 32px; }
.cad-ruler-vertical { top: 32px; left: 0; width: 42px; height: calc(100% - 32px); }
.cad-ruler-corner {
  position: absolute; z-index: 5; top: 0; left: 0; width: 42px; height: 32px;
  display: grid; place-items: center; border-right: 1px solid rgba(60, 60, 67, .18);
  border-bottom: 1px solid rgba(60, 60, 67, .18); background: rgba(248, 247, 245, .94);
  color: var(--muted); font-size: 11px; font-weight: 650; pointer-events: none;
}
.geometry-path { fill: none; stroke: var(--green); stroke-width: 1.7; vector-effect: non-scaling-stroke; cursor: pointer; transition: stroke .12s ease; }
.geometry-path.hole { stroke: var(--blue); }
.geometry-path.island { stroke: #a58cff; }
.geometry-path.open { stroke: var(--red); stroke-dasharray: 6 4; cursor: default; }
.geometry-path.selected { stroke: var(--yellow); stroke-width: 3; filter: drop-shadow(0 0 4px rgba(255, 212, 94, .45)); }
.empty-view { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.empty-view.hidden { display: none; }
.empty-symbol { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid #334159; border-radius: 16px; color: var(--cyan); font-size: 34px; margin-bottom: 13px; background: rgba(17, 27, 42, .78); }
.empty-view strong { font-size: 14px; }
.empty-view span { color: var(--muted); font-size: 11px; margin-top: 6px; }
.viewer-legend { position: static; display: flex; gap: 13px; margin-left: auto; padding: 7px 10px; border: 1px solid rgba(47, 63, 88, .8); background: rgba(10, 15, 24, .82); backdrop-filter: blur(8px); border-radius: 8px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.viewer-legend span { display: flex; align-items: center; gap: 5px; }
.viewer-legend i { width: 13px; height: 2px; display: inline-block; }
.legend-outer { background: var(--green); }.legend-hole { background: var(--blue); }.legend-error { background: var(--red); }.legend-selected { background: var(--yellow); }

.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.metric-card { min-width: 0; padding: 14px 15px; border: 1px solid var(--line); background: var(--panel); border-radius: 11px; }
.metric-card > span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 7px; }
.metric-card strong { display: block; font-size: 19px; font-weight: 690; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-card small { display: block; color: var(--dim); font-size: 9px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-card.accent-card { border-color: rgba(67, 211, 223, .3); background: linear-gradient(145deg, rgba(67, 211, 223, .09), rgba(16, 24, 39, .9)); }

.results-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 17px 12px; border-bottom: 1px solid var(--line); }
.selection-note { color: var(--dim); font-size: 10px; }
.table-wrap { max-height: 260px; overflow: auto; scrollbar-width: thin; scrollbar-color: #33425a transparent; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { position: sticky; top: 0; z-index: 2; background: #131d2c; color: var(--muted); font-weight: 600; text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--line); }
td { padding: 9px 11px; border-bottom: 1px solid var(--line-soft); color: #c9d3e1; }
tbody tr:not(:has(.empty-cell)) { cursor: pointer; }
tbody tr:not(:has(.empty-cell)):hover, tbody tr.selected-row { background: rgba(67, 211, 223, .07); }
.empty-cell { text-align: center; color: var(--dim); padding: 25px; }
.type-chip { display: inline-flex; align-items: center; gap: 6px; }
.type-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.type-chip.hole i { background: var(--blue); }.type-chip.island i { background: #a58cff; }

.live-tag { color: var(--muted); background: #111c2c; border: 1px solid var(--line); border-radius: 999px; padding: 5px 7px; font-size: 9px; }
.profile-badge { color: var(--cyan); background: var(--cyan-soft); border: 1px solid rgba(67,211,223,.3); border-radius: 999px; padding: 5px 7px; font-size: 9px; }
.top-gap { margin-top: 10px; }
.field-hint { margin: 9px 0 0; color: var(--dim); font-size: 9px; line-height: 1.45; }
.check-row { display: flex; align-items: flex-start; gap: 7px; margin: 13px 0 10px; color: var(--muted); font-size: 10px; line-height: 1.35; cursor: pointer; }
.check-row input { accent-color: var(--cyan); }
.full-button { width: 100%; margin-top: 4px; }
.cost-card { margin: 14px; border: 1px solid rgba(67, 211, 223, .26); border-radius: 13px; padding: 17px; background: #111d2c; box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.cost-head { display: flex; align-items: baseline; justify-content: space-between; color: var(--muted); font-size: 10px; }
.cost-head small { color: var(--dim); }
.cost-card > strong { display: block; font-size: 29px; margin: 7px 0 14px; letter-spacing: -.03em; color: var(--cyan); }
.cost-lines { display: grid; gap: 7px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cost-lines div, .unit-price { display: flex; justify-content: space-between; gap: 15px; font-size: 10px; }
.cost-lines span { color: var(--muted); }
.cost-lines span small { display: block; margin-top: 2px; color: var(--dim); font-size: .82em; line-height: 1.25; }
.cost-lines b { flex: 0 0 auto; font-weight: 600; }
.unit-price { align-items: baseline; padding-top: 12px; }
.unit-price span { color: var(--muted); }.unit-price strong { font-size: 15px; }
.cost-note { color: var(--dim); font-size: 9px; line-height: 1.45; margin: 12px 0 0; }
.scope-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--muted); font-size: 10px; line-height: 1.45; }
.export-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.diagnostic-link { margin-top: 9px; width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: transparent; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.diagnostic-link span { color: var(--text); font-size: 11px; }.diagnostic-link b { color: var(--muted); font-size: 9px; }
.diagnostic-link:not(:disabled):hover { border-color: var(--red); }.diagnostic-link:disabled { opacity: .4; cursor: not-allowed; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); padding: 11px 15px; border: 1px solid var(--line); border-radius: 9px; background: #172234; box-shadow: var(--shadow); color: var(--text); font-size: 12px; opacity: 0; pointer-events: none; transition: .2s ease; z-index: 50; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: rgba(255, 105, 105, .55); color: #ffd3d3; }
dialog { width: min(700px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 40px)); color: var(--text); background: #101827; border: 1px solid var(--line); border-radius: 14px; padding: 0; box-shadow: 0 30px 90px rgba(0, 0, 0, .65); }
dialog::backdrop { background: rgba(2, 7, 13, .74); backdrop-filter: blur(4px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.dialog-head button { border: 0; background: transparent; color: var(--muted); font-size: 25px; cursor: pointer; }
.diagnostics-content { padding: 18px 19px; overflow-y: auto; max-height: 580px; }
.diagnostic-file { margin-bottom: 17px; }
.diagnostic-file h3 { margin: 0 0 8px; font-size: 13px; }
.diagnostic-file p { margin: 7px 0; padding: 8px 10px; border-left: 2px solid var(--yellow); background: rgba(255, 212, 94, .055); color: #c7d0dd; font-size: 11px; line-height: 1.5; }
.diagnostic-file p.error { border-color: var(--red); background: rgba(255, 105, 105, .055); }
.diagnostic-file small { color: var(--muted); }

.profile-stage { display: flex; flex-direction: column; }
.profile-viewer-card { flex: 0 0 auto; }
.profile-visual { height: min(42vh, 460px); min-height: 350px; position: relative; background-color: #0b121d; background-image: linear-gradient(#162237 1px, transparent 1px), linear-gradient(90deg, #162237 1px, transparent 1px); background-size: 28px 28px; overflow: hidden; }
.profile-visual svg { display: block; width: 100%; height: calc(100% - 38px); }
.profile-axis { position: absolute; left: 8%; right: 8%; bottom: 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; color: var(--muted); font-size: 9px; }
.profile-axis i { display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--cyan), #2c6a78); box-shadow: 0 0 12px rgba(67,211,223,.24); }
.profile-metrics { margin-top: 12px; }
.profile-results { min-height: 250px; }
.profile-breakdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.breakdown-group { padding: 15px 17px; border-right: 1px solid var(--line-soft); }
.breakdown-group:last-child { border-right: 0; }
.breakdown-group h3 { margin: 0 0 11px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .11em; }
.breakdown-group dl { margin: 0; display: grid; gap: 8px; }
.breakdown-group dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; }
.breakdown-group dt { color: var(--muted); }
.breakdown-group dd { margin: 0; font-weight: 650; text-align: right; }
.profile-warning-list { padding: 12px 17px 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.profile-warning-list p { margin: 0; padding-left: 13px; position: relative; color: var(--muted); font-size: 10px; line-height: 1.45; }
.profile-warning-list p::before { content: ''; position: absolute; left: 0; top: .52em; width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); }
.profile-warning-list p.error { color: #ffc3c3; }
.profile-warning-list p.error::before { background: var(--red); }
.profile-cost-card { margin-top: 14px; }
.profile-export { margin-top: 13px; width: 100%; }

@media (max-width: 1380px) {
  .workspace { grid-template-columns: 260px minmax(560px, 1fr) 300px; }
  .metric-card strong { font-size: 17px; }
  .privacy-note { display: none; }
  .topbar { grid-template-columns: 230px auto 1fr auto; }
}

@media (max-width: 1120px) {
  .topbar { grid-template-columns: auto 1fr auto; }
  .privacy-note { display: none; }
  .module-tabs { justify-self: center; }
  .workspace { grid-template-columns: 250px 1fr; }
  .right-rail { grid-column: 1 / -1; height: auto; position: static; border-left: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .right-rail .panel-section { border-right: 1px solid var(--line-soft); }
  .right-rail .export-section { grid-column: 3; }
  .cost-card { margin: 18px; }
}

@media (max-width: 760px) {
  .topbar { height: auto; min-height: 62px; grid-template-columns: 1fr auto; padding: 10px 13px; }
  .module-tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .module-tabs button { flex: 1; }
  .top-actions .ghost { display: none; }
  .workspace { display: block; }
  .scroll-panel { height: auto; position: static; overflow: visible; }
  .left-rail { border-right: 0; }
  .main-stage { padding: 10px; }
  .right-rail { display: block; }
  .cad-shell { height: 380px; min-height: 320px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .viewer-head { align-items: flex-start; }
  .viewer-head-actions { flex-direction: column; align-items: flex-end; }
  .viewer-legend { gap: 7px; flex-wrap: wrap; right: 12px; }
  .profile-breakdown-grid { grid-template-columns: 1fr; }
  .breakdown-group { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}

/* iOS-inspired visual system: larger type, calmer surfaces, clearer controls. */
:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --panel: rgba(255, 255, 255, .92);
  --panel-2: #f2f2f7;
  --line: rgba(60, 60, 67, .16);
  --line-soft: rgba(60, 60, 67, .10);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --dim: #8e8e93;
  --cyan: #007aff;
  --cyan-soft: rgba(0, 122, 255, .10);
  --green: #34c759;
  --blue: #0a84ff;
  --red: #ff3b30;
  --yellow: #ff9f0a;
  --orange: #ff9500;
  --radius: 20px;
  --shadow: 0 10px 34px rgba(0, 0, 0, .07);
}

html, body {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select { min-height: 44px; }
button:focus-visible, input:focus-visible, select:focus-visible, label:has(input:focus-visible) {
  outline: 3px solid rgba(0, 122, 255, .28);
  outline-offset: 2px;
}

.topbar {
  height: 78px;
  grid-template-columns: 260px 1fr auto;
  padding: 0 28px;
  gap: 24px;
  border-bottom-color: var(--line-soft);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.brand { gap: 12px; font-size: 17px; letter-spacing: .06em; font-weight: 600; }
.brand strong { color: var(--cyan); }
.brand-mark { width: 32px; height: 32px; gap: 4px; }
.brand-mark i { border: 1.5px solid var(--cyan); background: var(--cyan-soft); }
.privacy-note { justify-self: end; color: var(--muted); font-size: 14px; }
.status-dot { width: 8px; height: 8px; background: var(--green); box-shadow: 0 0 0 4px rgba(52, 199, 89, .12); }

.module-tabs {
  gap: 2px;
  padding: 4px;
  border-color: transparent;
  border-radius: 12px;
  background: rgba(118, 118, 128, .12);
}
.module-tabs button {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.module-tabs button.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}

.button {
  min-height: 44px;
  padding: 0 20px;
  border-color: var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  transition: transform .22s cubic-bezier(.25, .1, .25, 1), box-shadow .22s ease, background .22s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(60, 60, 67, .24); box-shadow: 0 5px 16px rgba(0, 0, 0, .08); }
.button.primary { background: var(--cyan); color: #fff; border-color: var(--cyan); box-shadow: 0 6px 16px rgba(0, 122, 255, .20); }
.button.primary:hover { background: #1685ff; }
.button.ghost { background: rgba(255, 255, 255, .82); }
.button.secondary { background: var(--cyan-soft); color: var(--cyan); border-color: rgba(0, 122, 255, .18); }

.workspace { min-height: calc(100vh - 78px); grid-template-columns: 330px minmax(640px, 1fr) 370px; gap: 16px; padding: 16px; }
.left-rail, .right-rail {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.left-rail { border-right: 1px solid var(--line-soft); }
.right-rail { border-left: 1px solid var(--line-soft); }
.scroll-panel { height: calc(100vh - 110px); top: 94px; scrollbar-color: rgba(60, 60, 67, .20) transparent; }
.panel-section { padding: 26px 22px; border-bottom-color: var(--line-soft); }
.section-heading { gap: 16px; margin-bottom: 20px; }
.section-heading.compact { margin-bottom: 17px; }
.section-heading h2, .results-head h2, .dialog-head h2 { margin-top: 4px; font-size: 21px; font-weight: 650; letter-spacing: -.025em; }
.eyebrow { color: var(--cyan); font-size: 11px; font-weight: 750; letter-spacing: .10em; }
.counter { min-width: 32px; height: 32px; border-radius: 10px; background: var(--panel-2); color: var(--muted); font-size: 14px; }

.source-section-heading { display: block; }
.source-heading-content { width: 100%; min-width: 0; }
.source-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.source-title-row h2 { min-width: 0; margin: 0; }
.source-title-row .counter { flex: 0 0 auto; }

.drop-zone {
  min-height: 0;
  padding: 10px;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  border-color: rgba(0, 122, 255, .30);
  border-radius: 18px;
  background: rgba(0, 122, 255, .045);
}
.drop-zone:hover, .drop-zone.dragging { border-color: var(--cyan); background: rgba(0, 122, 255, .09); }
.drop-zone-prompt { display: flex; align-items: center; gap: 8px; }
.upload-icon { width: 32px; height: 32px; flex: 0 0 32px; border-color: rgba(0, 122, 255, .20); border-radius: 10px; font-size: 20px; color: var(--cyan); background: #fff; margin: 0; }
.drop-zone-copy { display: grid; gap: 0; min-width: 0; }
.drop-zone .drop-zone-copy strong { font-size: 13px; line-height: 1.15; }
.drop-zone .drop-zone-subtitle { color: var(--muted); font-size: 11px; line-height: 1.2; margin: 0; }
.drop-zone .upload-button { width: 100%; min-height: 44px; margin-top: 8px; }
.drop-zone .drop-zone-limits { color: var(--dim); font-size: 10px; line-height: 1.25; margin-top: 5px; text-align: center; }
.filename-example { display: grid; gap: 1px; margin-top: 7px; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(255, 255, 255, .58); }
.drop-zone .filename-example-label,
.drop-zone .filename-example-name,
.drop-zone .thickness-filename-hint { font-size: 13px; line-height: 1.35; }
.drop-zone .filename-example-label { color: var(--muted); margin: 0; }
.drop-zone .filename-example-name { color: var(--text); overflow-wrap: normal; word-break: normal; white-space: nowrap; }
.drop-zone .thickness-filename-hint { display: grid; max-width: none; gap: 1px; color: var(--dim); margin: 2px 0 0; }
.drop-zone .filename-example-label,
.drop-zone .thickness-filename-hint > span { white-space: nowrap; }
.drop-zone .thickness-filename-hint > span { color: inherit; font-size: inherit; line-height: inherit; margin: 0; }
.drop-zone .thickness-filename-hint strong { color: var(--text); font-size: inherit; font-weight: 750; }
.file-list { gap: 9px; margin-top: 13px; }
.file-item { grid-template-columns: 38px 1fr 32px; gap: 10px; padding: 10px; border-color: var(--line-soft); border-radius: 13px; background: #fff; }
.file-item.active { border-color: rgba(0, 122, 255, .38); background: var(--cyan-soft); }
.file-icon { width: 36px; height: 36px; border-radius: 10px; color: var(--cyan); background: var(--cyan-soft); font-size: 10px; }
.file-text strong { font-size: 14px; }
.file-text small { font-size: 12px; margin-top: 3px; }
.remove-file { font-size: 20px; border-radius: 8px; }

.field-label { color: var(--muted); font-size: 14px; margin-bottom: 9px; }
.segmented { gap: 3px; padding: 4px; margin-bottom: 18px; border-color: transparent; border-radius: 12px; background: rgba(118, 118, 128, .12); }
.segmented span { min-height: 38px; border-radius: 9px; color: var(--muted); font-size: 13px; font-weight: 550; }
.segmented input:checked + span { color: var(--text); background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .10); }
.form-grid { gap: 14px; }
.form-field.full { margin-bottom: 14px; }
.form-field > span { color: var(--muted); font-size: 13px; margin-bottom: 7px; }
.form-field input, .form-field select, select {
  height: 46px;
  padding: 0 13px;
  border-color: var(--line);
  border-radius: 12px;
  background: rgba(118, 118, 128, .08);
  color: var(--text);
  font-size: 15px;
}
.form-field input:hover, .form-field select:hover { border-color: rgba(60, 60, 67, .28); }
.form-field input:focus, .form-field select:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0, 122, 255, .10); }
.text-button { color: var(--cyan); font-size: 13px; padding: 7px; }
.layer-list { gap: 10px; }
.empty-list { color: var(--dim); font-size: 14px; line-height: 1.55; }
.layer-row { grid-template-columns: 22px 1fr auto; gap: 10px; color: var(--muted); font-size: 14px; }
.layer-row input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--cyan); }
.layer-row b { color: var(--dim); font-size: 12px; }

.main-stage { padding: 0; }
.viewer-card, .results-card { border-color: var(--line-soft); background: var(--panel); border-radius: 22px; box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.viewer-head { min-height: 76px; padding: 15px 19px 15px 22px; border-bottom-color: var(--line-soft); }
.viewer-head h1 { max-width: 560px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.status-pill { min-height: 36px; padding: 0 13px; border-color: var(--line); border-radius: 999px; background: rgba(118, 118, 128, .08); font-size: 12px; }
.status-pill.ok { color: #1b8d3d; border-color: rgba(52, 199, 89, .24); background: rgba(52, 199, 89, .10); }
.status-pill.warning { color: #9a5d00; border-color: rgba(255, 159, 10, .25); background: rgba(255, 159, 10, .10); }
.status-pill.review, .status-pill.error { color: var(--red); border-color: rgba(255, 59, 48, .22); background: rgba(255, 59, 48, .08); }
.tool-group { border-color: var(--line); border-radius: 11px; }
.tool-group button { min-width: 40px; height: 36px; border-right-color: var(--line); background: rgba(118, 118, 128, .07); color: var(--muted); font-size: 15px; }
.tool-group button:hover { color: var(--text); background: rgba(118, 118, 128, .13); }

.cad-shell { height: min(50vh, 600px); min-height: 430px; background: #f8faff; }
.grid-background { opacity: .7; }
#smallGrid path { stroke: #dbe3ee; stroke-width: .25; }
#grid > path { stroke: #c7d1df; stroke-width: .45; }
.geometry-path { stroke: var(--green); stroke-width: 3.2; }
.geometry-path.hole { stroke: var(--blue); }
.geometry-path.island { stroke: #af52de; }
.geometry-path.open { stroke: var(--red); }
.geometry-path.selected {
  stroke: var(--orange);
  stroke-width: 4.5;
  filter: drop-shadow(0 0 5px rgba(255, 149, 0, .38));
}
.legend-selected { background: var(--orange); }
.empty-symbol { width: 68px; height: 68px; border-color: var(--line); border-radius: 20px; color: var(--cyan); font-size: 38px; background: rgba(255, 255, 255, .88); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.empty-view strong { font-size: 17px; }
.empty-view span { color: var(--muted); font-size: 14px; margin-top: 7px; }
.viewer-legend { gap: 16px; padding: 9px 13px; border-color: var(--line); background: rgba(255, 255, 255, .82); color: var(--muted); border-radius: 12px; font-size: 12px; backdrop-filter: blur(18px); }
.viewer-legend i { width: 16px; height: 3px; border-radius: 3px; }

.metric-grid { gap: 12px; margin: 16px 0; }
.metric-card { padding: 18px; border-color: var(--line-soft); background: var(--panel); border-radius: 16px; box-shadow: 0 5px 18px rgba(0,0,0,.045); }
.metric-card > span { color: var(--muted); font-size: 13px; margin-bottom: 9px; }
.metric-card strong { font-size: 24px; font-weight: 680; letter-spacing: -.025em; }
.metric-card small { color: var(--dim); font-size: 12px; margin-top: 7px; }
.metric-card.accent-card { border-color: rgba(0, 122, 255, .18); background: linear-gradient(145deg, rgba(0, 122, 255, .09), rgba(255, 255, 255, .96)); }

.results-head { padding: 18px 22px 16px; border-bottom-color: var(--line-soft); }
.selection-note { color: var(--dim); font-size: 13px; }
.table-wrap { max-height: 300px; scrollbar-color: rgba(60, 60, 67, .20) transparent; }
table { font-size: 14px; }
th { background: rgba(242, 242, 247, .94); color: var(--muted); padding: 12px 14px; border-bottom-color: var(--line); }
td { padding: 12px 14px; border-bottom-color: var(--line-soft); color: #3a3a3c; }
tbody tr:not(:has(.empty-cell)):hover, tbody tr.selected-row { background: rgba(0, 122, 255, .06); }
.empty-cell { color: var(--dim); padding: 30px; }
.type-chip i { width: 9px; height: 9px; }

.live-tag, .profile-badge { padding: 6px 10px; font-size: 11px; }
.live-tag { color: var(--muted); background: rgba(118, 118, 128, .08); border-color: var(--line); }
.profile-badge { color: var(--cyan); background: var(--cyan-soft); border-color: rgba(0, 122, 255, .18); }
.field-hint { margin-top: 11px; color: var(--dim); font-size: 12px; line-height: 1.5; }
.check-row { gap: 9px; margin: 16px 0 13px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.check-row input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--cyan); }
.cost-card { margin: 18px; padding: 21px; border-color: rgba(0, 122, 255, .18); border-radius: 18px; background: linear-gradient(160deg, rgba(0,122,255,.07), rgba(255,255,255,.92)); box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.cost-head { color: var(--muted); font-size: 13px; }
.cost-head small { color: var(--dim); }
.cost-card > strong { font-size: 36px; margin: 9px 0 18px; color: var(--cyan); }
.cost-lines { gap: 10px; padding: 14px 0; border-color: var(--line); }
.cost-lines div, .unit-price { font-size: 13px; }
.unit-price { padding-top: 15px; }
.unit-price strong { font-size: 19px; }
.cost-note, .scope-note { color: var(--dim); font-size: 12px; line-height: 1.5; }
.scope-note { border-top-color: var(--line-soft); }
.export-buttons { gap: 9px; }
.diagnostic-link { min-height: 44px; padding: 0 13px; border-color: var(--line); border-radius: 12px; }
.diagnostic-link span { color: var(--text); font-size: 14px; }
.diagnostic-link b { color: var(--muted); font-size: 11px; }

.toast { bottom: 28px; padding: 13px 18px; border-color: var(--line); border-radius: 14px; background: rgba(255,255,255,.94); font-size: 14px; backdrop-filter: blur(18px); }
dialog { color: var(--text); background: rgba(255,255,255,.96); border-color: var(--line); border-radius: 22px; box-shadow: 0 30px 90px rgba(0,0,0,.20); }
dialog::backdrop { background: rgba(0,0,0,.28); backdrop-filter: blur(7px); }
.dialog-head { padding: 20px 23px; border-bottom-color: var(--line); }
.diagnostics-content { padding: 22px 23px; }
.diagnostic-file h3 { font-size: 16px; }
.diagnostic-file p { padding: 10px 12px; border-left-color: var(--yellow); background: rgba(255,159,10,.07); color: #3a3a3c; font-size: 14px; }

.admin-button { justify-self: end; min-height: 42px; padding-inline: 18px; white-space: nowrap; }
.tariff-source { margin: -3px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.tariff-source.missing { color: var(--cyan); }
.form-field input.missing-price { color: var(--cyan); border-color: rgba(0,122,255,.3); background: rgba(0,122,255,.07); }
.pricing-dialog { width: min(980px, calc(100vw - 32px)); }
.pricing-content { padding: 20px 23px 22px; }
.pricing-process-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 12px; background: rgba(118,118,128,.12); }
.pricing-process-tabs button { min-height: 40px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 650; }
.pricing-process-tabs button.active { color: var(--text); background: var(--panel); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.pricing-discounts { display: grid; grid-template-columns: minmax(190px, 1.35fr) repeat(4, minmax(110px, 1fr)); align-items: end; gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid rgba(52,199,89,.24); border-radius: 14px; background: rgba(52,199,89,.055); }
.pricing-discounts > div { align-self: center; }
.pricing-discounts strong, .pricing-discounts small { display: block; }
.pricing-discounts strong { font-size: 14px; }
.pricing-discounts small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.pricing-discounts label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.pricing-discounts input { width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--panel); }
.pricing-add-row { display: grid; grid-template-columns: .8fr 1fr 1fr auto; align-items: end; gap: 10px; margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(118,118,128,.055); }
.pricing-add-row.metal-mode { grid-template-columns: .8fr 1fr auto; }
.pricing-add-row label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.pricing-add-row input { width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--panel); }
.pricing-add-row .button { min-height: 40px; }
.pricing-table-wrap { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.pricing-table { min-width: 590px; }
.pricing-table th, .pricing-table td { padding: 9px 12px; }
.pricing-table th:first-child, .pricing-table td:first-child { width: 150px; }
.pricing-table th:not(:first-child) { text-align: center; }
.pricing-table td:nth-child(2) { border-left: 1px solid var(--line-soft); }
.pricing-table input { width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: rgba(118,118,128,.08); }
.pricing-table th:last-child, .pricing-table td:last-child { width: 62px; padding-inline: 8px; text-align: center; }
.pricing-delete-row { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 10px; color: #d92d20; background: var(--panel); cursor: pointer; font-size: 20px; line-height: 1; }
.pricing-empty td { padding: 28px 14px; color: var(--muted); text-align: center; }
.pricing-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; }
.material-toggle { display: flex; align-items: center; gap: 10px; margin: 13px 0 2px; color: var(--text); font-size: 14px; font-weight: 650; cursor: pointer; }
.material-toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--cyan); }
.missing-price-text { color: #007aff !important; font-weight: 650; }
.discount-line b { color: #248a3d; }

@media (max-width: 760px) {
  .pricing-discounts { grid-template-columns: 1fr; }
}

.invoice-open-button { margin-top: 4px; }
.invoice-section-note { margin: 9px 0 17px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.export-caption { display: block; margin-bottom: 7px; }
.invoice-dialog { width: min(610px, calc(100vw - 28px)); max-height: min(810px, calc(100vh - 28px)); }
.invoice-content { display: grid; gap: 16px; padding: 18px 22px 22px; }
.invoice-seller-strip { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; padding: 14px 16px; border: 1px solid rgba(245, 102, 0, .20); border-radius: 14px; background: var(--cyan-soft); }
.invoice-seller-strip span { grid-column: 1 / -1; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.invoice-seller-strip strong { min-width: 0; font-size: 15px; line-height: 1.3; }
.invoice-seller-strip small { align-self: center; color: var(--cyan); font-weight: 750; white-space: nowrap; }
.invoice-lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.invoice-lookup-row .button { min-width: 142px; }
.invoice-company-card { display: grid; gap: 4px; padding: 15px 16px; border: 1px solid rgba(52, 199, 89, .28); border-radius: 14px; background: rgba(52, 199, 89, .07); }
.invoice-company-card > span { color: #25813c; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.invoice-company-card strong { font-size: 15px; line-height: 1.35; }
.invoice-company-card p, .invoice-company-card small { margin: 0; color: var(--muted); line-height: 1.42; }
.invoice-company-card p { font-size: 13px; }
.invoice-company-card small { font-size: 12px; }
.invoice-totals-preview { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: rgba(118, 118, 128, .08); }
.invoice-totals-preview > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 13px; }
.invoice-totals-preview b { color: var(--text); }
.invoice-totals-preview .invoice-total-line { margin-top: 3px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--text); }
.invoice-total-line strong { color: var(--cyan); font-size: 22px; }
.invoice-delivery-note, .invoice-status { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.invoice-status:empty { display: none; }
.invoice-status.error { color: #c92a2a; }
.invoice-status.success { color: #25813c; }

.profile-visual { height: min(44vh, 500px); min-height: 380px; background-color: #f8faff; background-image: linear-gradient(rgba(60,60,67,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(60,60,67,.07) 1px, transparent 1px); background-size: 32px 32px; }
.profile-axis { color: var(--muted); font-size: 12px; }
.profile-axis i { background: linear-gradient(90deg, var(--cyan), #64d2ff); box-shadow: 0 0 12px rgba(0,122,255,.18); }
.profile-results { min-height: 280px; }
.breakdown-group { padding: 19px 21px; border-right-color: var(--line-soft); }
.breakdown-group h3 { margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.breakdown-group dl { gap: 11px; }
.breakdown-group dl div { gap: 14px; font-size: 13px; }
.profile-warning-list { padding: 15px 21px 18px; border-top-color: var(--line); gap: 8px; }
.profile-warning-list p { padding-left: 15px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.profile-warning-list p::before { width: 6px; height: 6px; }

/* Compact sheet-calculation workspace. */
.workspace { grid-template-columns: 260px minmax(820px, 1fr) 330px; }
.file-actions { display: grid; grid-template-columns: .82fr 1.45fr; gap: 10px; margin-top: 14px; }
.file-actions .button { min-height: 46px; padding-inline: 14px; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; min-height: 520px; }
.editor-layout .cad-shell { height: 100%; min-height: 520px; border-right: 1px solid var(--line-soft); }
.contour-editor { min-width: 0; background: rgba(255,255,255,.72); display: flex; flex-direction: column; }
.contour-editor .results-head { min-height: 78px; padding: 15px 16px; }
.contour-editor .selection-note { max-width: 145px; text-align: right; }
.contour-table-wrap { max-height: none; flex: 1; overflow: auto; }
.contour-table-compact { min-width: 100%; font-size: 12px; }
.contour-table-compact th, .contour-table-compact td { padding: 10px 9px; white-space: nowrap; }
.contour-table-compact th:first-child, .contour-table-compact td:first-child { width: 42px; }
.contour-table-compact .type-chip { font-size: 11px; }
.order-lines-card { margin-top: 16px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); }
.order-lines-wrap { max-height: 270px; overflow: auto; }
.order-lines-table { width: 100%; min-width: 0; table-layout: fixed; }
.order-lines-table th, .order-lines-table td { text-align: center; }
.order-lines-table th:nth-child(2), .order-lines-table td:nth-child(2) { text-align: left; }
.order-lines-table .order-col-number { width: 4%; }
.order-lines-table .order-col-detail { width: 25%; }
.order-lines-table .order-col-quantity { width: 9%; }
.order-lines-table .order-col-thickness { width: 10%; }
.order-lines-table .order-col-contours { width: 8%; }
.order-lines-table .order-col-length { width: 11%; }
.order-lines-table .order-col-mass { width: 10%; }
.order-lines-table .order-col-unit-price { width: 11%; }
.order-lines-table .order-col-total { width: 12%; }
.order-lines-table.has-material .order-col-detail { width: 21%; }
.order-lines-table.has-material .order-col-quantity { width: 8%; }
.order-lines-table.has-material .order-col-thickness { width: 9%; }
.order-lines-table.has-material .order-col-length,
.order-lines-table.has-material .order-col-mass,
.order-lines-table.has-material .order-col-material,
.order-lines-table.has-material .order-col-unit-price,
.order-lines-table.has-material .order-col-total { width: 10%; }
.order-head-main,
.order-head-unit { display: block; }
.order-head-unit { margin-top: 2px; color: var(--dim); font-weight: 600; }
.order-sort-button { width: 100%; height: 13px; min-height: 13px; margin-top: 3px; padding: 0; border: 1px solid rgba(118,118,128,.28); border-radius: 4px; background: rgba(118,118,128,.05); color: var(--dim); cursor: pointer; display: flex; align-items: center; justify-content: center; font: inherit; text-align: center; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.order-sort-button:hover { border-color: rgba(118,118,128,.52); background: rgba(118,118,128,.12); color: var(--text); }
.order-sort-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.order-sort-button.active { border-color: rgba(245,102,0,.42); background: rgba(245,102,0,.1); color: var(--cyan); }
.order-sort-button.active .order-head-unit { color: currentColor; }
.order-sort-indicator { color: currentColor; font-size: 7px; letter-spacing: -1px; line-height: 1; }
.order-sort-button.active .order-sort-indicator { color: currentColor; }
.detail-name-cell { min-width: 0; color: var(--text); font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; white-space: normal; word-break: break-word; }
.line-item-input { width: 100%; min-width: 0; min-height: 38px; padding: 7px 5px; border: 1px solid var(--line); border-radius: 9px; background: rgba(118,118,128,.08); color: var(--text); text-align: center; font: inherit; }
.line-item-input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,122,255,.1); }
.line-total-cell { color: var(--cyan); font-weight: 750; }
.contour-count-cell { color: var(--cyan); font-weight: 750; text-align: center; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000;
    --panel: rgba(28, 28, 30, .94);
    --panel-2: #2c2c2e;
    --line: rgba(255, 255, 255, .14);
    --line-soft: rgba(255, 255, 255, .08);
    --text: #f5f5f7;
    --muted: #aeaeb2;
    --dim: #8e8e93;
    --cyan: #0a84ff;
    --cyan-soft: rgba(10, 132, 255, .16);
    --shadow: 0 12px 40px rgba(0,0,0,.35);
  }
  .topbar { background: rgba(28,28,30,.82); box-shadow: none; }
  .module-tabs button.active, .segmented input:checked + span { background: #3a3a3c; }
  .button.ghost, .upload-icon, .file-item { background: rgba(44,44,46,.92); }
  .form-field input, .form-field select, select, .tool-group button, .pricing-search input, .pricing-table input { background: rgba(118,118,128,.18); }
  .cad-shell, .profile-visual { background-color: #111318; }
  .empty-symbol, .viewer-legend { background: rgba(28,28,30,.86); }
  .metric-card.accent-card, .cost-card { background: linear-gradient(145deg, rgba(10,132,255,.13), rgba(28,28,30,.96)); }
  th { background: rgba(44,44,46,.96); }
  td, .diagnostic-file p { color: #e5e5ea; }
  .toast, dialog { background: rgba(28,28,30,.96); }
}

@media (max-width: 1500px) {
  .workspace { grid-template-columns: 230px minmax(690px, 1fr) 300px; gap: 12px; padding: 12px; }
  .editor-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .metric-card strong { font-size: 21px; }
  .topbar { grid-template-columns: 240px 1fr auto; padding: 0 20px; }
}

@media (max-width: 1120px) {
  .workspace { grid-template-columns: 280px 1fr; }
  .right-rail { border: 1px solid var(--line-soft); }
}

@media (max-width: 950px) {
  .editor-layout { grid-template-columns: 1fr; }
  .editor-layout .cad-shell { min-height: 430px; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .contour-editor { max-height: 330px; }
}

@media (max-width: 760px) {
  .topbar { min-height: 72px; padding: 12px 16px; }
  .brand span:last-child { font-size: 14px; }
  .admin-button { min-height: 40px; padding-inline: 14px; }
  .pricing-content { padding: 16px; }
  .pricing-add-row { grid-template-columns: 1fr; }
  .pricing-add-row .button { width: 100%; }
  .pricing-footer { align-items: stretch; flex-direction: column-reverse; }
  .pricing-footer .button { width: 100%; }
  .invoice-lookup-row { grid-template-columns: 1fr; }
  .invoice-lookup-row .button { width: 100%; }
  .workspace { padding: 0; }
  .left-rail, .right-rail, .viewer-card, .results-card, .order-lines-card { border-radius: 0; border-left: 0; border-right: 0; }
  .main-stage { padding: 12px 0; }
  .panel-section { padding: 24px 18px; }
  .cad-shell { height: 410px; min-height: 340px; }
  .metric-grid { padding: 0 12px; }
  .profile-breakdown-grid { grid-template-columns: 1fr; }
}

/* DETAL.CENTER brand system: warm metal, graphite and safety orange. */
:root {
  --bg: #f3f1ee;
  --panel: rgba(255, 255, 255, .95);
  --panel-2: #efede9;
  --line: rgba(35, 31, 28, .16);
  --line-soft: rgba(35, 31, 28, .09);
  --text: #1c1917;
  --muted: #6f6963;
  --dim: #918982;
  --cyan: #f56600;
  --cyan-soft: rgba(245, 102, 0, .105);
  --orange: #f56600;
  --blue: #0a78d1;
  --radius: 18px;
  --shadow: 0 14px 38px rgba(42, 32, 24, .08);
}

html, body {
  background:
    radial-gradient(circle at 13% 0%, rgba(245, 102, 0, .075), transparent 25rem),
    var(--bg);
  color: var(--text);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
label:has(input:focus-visible) {
  outline-color: rgba(245, 102, 0, .36);
}

.topbar {
  height: 86px;
  grid-template-columns: 290px 1fr auto;
  padding: 0 28px;
  border-bottom: 2px solid rgba(245, 102, 0, .78);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 28px rgba(42, 32, 24, .065);
}

.brand { min-width: 0; gap: 0; padding-inline: 5px; letter-spacing: normal; }
.brand-logo {
  display: block;
  width: auto;
  height: 62px;
  max-width: min(365px, 100%);
  object-fit: contain;
  object-position: left center;
}
.brand-emblem {
  position: relative;
  display: block;
  flex: 0 0 70px;
  width: 70px;
  height: 41px;
  overflow: hidden;
}
.brand-emblem img {
  position: absolute;
  width: 94px;
  height: auto;
  max-width: none;
  left: -12px;
  top: -6px;
}
.brand-wording {
  display: grid;
  height: 41px;
  align-content: space-between;
  gap: 0;
  white-space: nowrap;
}
.brand-name {
  color: #171717;
  font-size: 22px;
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.035em;
}
.brand-name b { font-weight: 900; }
.brand-name strong { color: var(--orange); font-weight: 900; }
.brand-tagline {
  color: #5f5954;
  font-size: 7.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .105em;
  text-align: center;
  text-transform: uppercase;
}
.brand-product {
  padding-left: 12px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.topbar-center {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 5px;
}
.workflow-line {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .015em;
}
.workflow-line span { display: inline-flex; align-items: center; gap: 6px; }
.workflow-line b {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--cyan);
  color: #fff;
  font-size: 10px;
}
.workflow-line i { color: var(--dim); font-style: normal; }
.privacy-note {
  justify-self: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}
.admin-button {
  color: #fff;
  border-color: #24201d;
  background: #24201d;
  box-shadow: 0 7px 18px rgba(35, 31, 28, .14);
}
.admin-button:hover:not(:disabled) { border-color: var(--cyan); background: var(--cyan); }

.workspace { min-height: calc(100vh - 86px); }
.scroll-panel { height: calc(100vh - 118px); top: 102px; }
.left-rail, .right-rail, .viewer-card, .results-card, .order-lines-card {
  border-color: rgba(35, 31, 28, .10);
  box-shadow: var(--shadow);
}
.panel-section { border-bottom-color: var(--line-soft); }
.eyebrow, .text-button, .line-total-cell, .contour-count-cell { color: var(--cyan); }
.counter { background: #24201d; color: #fff; }

.button.primary {
  border-color: var(--cyan);
  background: linear-gradient(180deg, #ff791e, #f56600);
  color: #fff;
  box-shadow: 0 7px 18px rgba(245, 102, 0, .22);
}
.button.primary:hover { background: #ff7615; }
.button.secondary {
  border-color: rgba(245, 102, 0, .25);
  background: var(--cyan-soft);
  color: #cf5200;
}
.button.ghost { border-color: var(--line); }

.drop-zone {
  border-color: rgba(245, 102, 0, .34);
  background: linear-gradient(145deg, rgba(245, 102, 0, .085), rgba(255, 255, 255, .72));
}
.drop-zone:hover, .drop-zone.dragging { border-color: var(--cyan); background: rgba(245, 102, 0, .115); }
.upload-icon { border-color: rgba(245, 102, 0, .24); color: var(--cyan); box-shadow: 0 7px 18px rgba(245, 102, 0, .10); }
.file-item.active { border-color: rgba(245, 102, 0, .38); background: var(--cyan-soft); }
.file-icon { color: #cf5200; background: var(--cyan-soft); }

.segmented input:checked + span,
.module-tabs button.active,
.pricing-process-tabs button.active {
  box-shadow: 0 3px 11px rgba(42, 32, 24, .10), inset 0 -2px var(--cyan);
}
.layer-row input, .check-row input { accent-color: var(--cyan); }
.form-field input:focus, .form-field select:focus,
.line-item-input:focus, .pricing-search input:focus, .pricing-table input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(245, 102, 0, .11);
}

.cad-shell { background: #f8f7f5; }
#smallGrid path { stroke: #e4e0db; }
#grid > path { stroke: #d1cbc4; }
.geometry-path.selected { stroke: var(--orange); filter: drop-shadow(0 0 5px rgba(245, 102, 0, .40)); }
.empty-symbol { color: var(--cyan); border-color: rgba(245, 102, 0, .18); box-shadow: 0 10px 28px rgba(42, 32, 24, .08); }
.viewer-legend { box-shadow: 0 8px 20px rgba(42, 32, 24, .08); }

.metric-card { box-shadow: 0 7px 22px rgba(42, 32, 24, .055); }
.metric-card.accent-card,
.cost-card {
  border-color: rgba(245, 102, 0, .22);
  background: linear-gradient(145deg, rgba(245, 102, 0, .105), rgba(255, 255, 255, .97));
}
.cost-card > strong { color: var(--cyan); }
th { background: rgba(239, 237, 233, .96); }
tbody tr:not(:has(.empty-cell)):hover,
tbody tr.selected-row { background: rgba(245, 102, 0, .065); }

.pricing-note { color: #62574f; background: rgba(245, 102, 0, .075); }
.pricing-note a { color: #bd4b00; font-weight: 650; }
.tariff-source.missing { color: #007aff; }
.form-field input.missing-price,
.pricing-table input.missing-price {
  color: #007aff;
  border-color: rgba(0, 122, 255, .30);
  background: rgba(0, 122, 255, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12100f;
    --panel: rgba(31, 28, 26, .95);
    --panel-2: #2b2724;
    --line: rgba(255, 255, 255, .14);
    --line-soft: rgba(255, 255, 255, .08);
    --text: #f7f4f1;
    --muted: #b9b0a9;
    --dim: #918982;
    --cyan: #ff7417;
    --cyan-soft: rgba(255, 116, 23, .16);
    --shadow: 0 14px 42px rgba(0, 0, 0, .34);
  }
  html, body { background: radial-gradient(circle at 13% 0%, rgba(255, 116, 23, .10), transparent 25rem), var(--bg); }
  .topbar { background: rgba(24, 21, 19, .91); }
  .privacy-note { background: transparent; }
  .admin-button { color: #1b1714; border-color: var(--cyan); background: var(--cyan); }
  .drop-zone { background: linear-gradient(145deg, rgba(255, 116, 23, .14), rgba(31, 28, 26, .80)); }
  .cad-shell { background: #161515; }
  .cad-ruler-corner { border-color: rgba(255,255,255,.15); background: rgba(22,21,21,.94); }
  .metric-card.accent-card, .cost-card { background: linear-gradient(145deg, rgba(255, 116, 23, .15), rgba(31, 28, 26, .96)); }
  .pricing-note { color: var(--muted); background: rgba(255, 116, 23, .11); }
  .pricing-note a { color: #ff9a57; }
}

@media (max-width: 1500px) {
  .topbar { grid-template-columns: 255px 1fr auto; }
  .brand-logo { height: 60px; max-width: 350px; }
  .brand-emblem { flex-basis: 64px; width: 64px; height: 38px; }
  .brand-emblem img { width: 86px; left: -12px; top: -5px; }
  .brand-wording { height: 38px; }
  .brand-name { font-size: 20px; }
  .brand-tagline { font-size: 7px; }
  .brand-product { font-size: 10px; }
  .workflow-line { gap: 6px; }
}

@media (max-width: 760px) {
  .topbar { min-height: 78px; grid-template-columns: 1fr auto; padding: 8px 14px; }
  .brand { gap: 8px; }
  .brand-logo { height: 54px; max-width: min(230px, calc(100vw - 155px)); }
  .brand-emblem { flex-basis: 58px; width: 58px; height: 34px; }
  .brand-emblem img { width: 78px; left: -11px; top: -5px; }
  .brand-wording { height: 34px; }
  .brand-name { font-size: 17px; }
  .brand-tagline { display: block; font-size: 5.5px; }
  .brand-product { display: none; }
  .topbar-center { display: none; }
  .admin-button { min-height: 42px; padding-inline: 13px; }
}

/* Compact calculation layout requested for the production workspace. */
.topbar {
  height: 72px;
  grid-template-columns: minmax(180px, 1fr) auto;
  padding: 0 24px;
}
.brand-emblem { flex-basis: 64px; width: 64px; height: 38px; }
.brand-emblem img { width: 86px; left: -12px; top: -5px; }
.brand-wording { height: 38px; }
.brand-name { font-size: 20px; }
.button.admin-button {
  min-width: 138px;
  color: #fff;
  border-color: #24201d;
  background: #24201d;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.workspace { min-height: calc(100vh - 72px); }
.scroll-panel { height: calc(100vh - 96px); top: 84px; }

.main-stage { min-height: 0; }
.split-workspace {
  --top-pane: 50%;
  display: grid;
  grid-template-rows: minmax(0, var(--top-pane)) 14px minmax(0, 1fr);
  height: calc(100vh - 96px);
  min-height: 640px;
}
.split-pane { min-height: 0; }
.split-pane-top {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 64px;
  gap: 10px;
  overflow: hidden;
}
.viewer-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
.viewer-card > .viewer-head {
  min-height: 62px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.viewer-card > .viewer-head .status-pill { min-height: 32px; padding-inline: 11px; }
.viewer-card > .viewer-head .tool-group button { min-width: 34px; height: 32px; }
.viewer-card > .viewer-head #fitView { min-width: 52px; padding-inline: 7px; font-size: 12px; }
.editor-layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.editor-layout .cad-shell { height: 100%; min-height: 0; }
.viewer-legend { gap: 12px; padding: 7px 10px; }
.contour-editor { min-height: 0; }
.contour-editor .results-head { min-height: 58px; padding: 10px 14px; }
.contour-editor .results-head h2 { font-size: 18px; }
.contour-layers {
  flex: 0 0 auto;
  max-height: 38%;
  padding: 10px 14px 12px;
  overflow: auto;
  border-top: 1px solid var(--line-soft);
  background: rgba(245, 102, 0, .035);
}
.contour-layers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.contour-layers-head strong { font-size: 13px; }
.contour-layers .layer-list { gap: 6px; }
.contour-layers .layer-row { font-size: 13px; }
.contour-table-wrap { min-height: 110px; }

.metric-grid { height: 64px; margin: 0; gap: 10px; }
.metric-card {
  display: flex;
  min-height: 0;
  padding: 7px 14px;
  justify-content: center;
  flex-direction: column;
}
.metric-card > span { margin-bottom: 3px; font-size: 14px; font-weight: 600; }
.metric-card strong { font-size: 21px; }
.metric-card small { display: none; }

.workspace-splitter {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 14px;
  cursor: row-resize;
  touch-action: none;
  outline: none;
}
.workspace-splitter::before {
  content: "";
  position: absolute;
  inset: 5px 0;
  border-radius: 999px;
  background: rgba(35, 31, 28, .08);
}
.workspace-splitter span {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 5px;
  border-radius: 999px;
  background: #6f6963;
  box-shadow: 0 0 0 5px var(--bg);
}
.workspace-splitter:hover span,
.workspace-splitter:focus-visible span { background: var(--cyan); }
.workspace-splitter.dragging span { width: 96px; background: var(--cyan); }

.order-lines-card {
  display: flex;
  min-height: 0;
  margin-top: 0;
  flex-direction: column;
  overflow: hidden;
}
.order-lines-card .results-head { flex: 0 0 auto; padding: 12px 18px 10px; }
.order-lines-card .results-head h2 { font-size: 18px; }
.order-search { width: min(260px, 36%); align-self: center; }
.order-search input {
  width: 100%;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
  font: inherit;
  font-size: 14px;
  outline: none;
}
.order-search input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(245, 102, 0, .14);
}
.order-search input::placeholder { color: var(--muted); }
.order-lines-wrap { max-height: none; min-height: 0; flex: 1; overflow: auto; }
.order-lines-table { width: 100%; min-width: 0; }
.order-lines-table th,
.order-lines-table td { padding: 9px 6px; }
.order-lines-table th { padding: 8px 5px; line-height: 1.15; white-space: normal; }
.order-lines-table tbody tr:not(:has(.empty-cell)) { cursor: pointer; }
.order-lines-table tbody tr.selected-row { box-shadow: inset 4px 0 var(--cyan); }
.order-lines-table tbody tr:focus-visible {
  outline: 3px solid rgba(245, 102, 0, .28);
  outline-offset: -3px;
}

@media (prefers-color-scheme: dark) {
  .button.admin-button { color: #1b1714; border-color: var(--cyan); background: var(--cyan); }
  .contour-layers { background: rgba(255, 116, 23, .07); }
  .workspace-splitter::before { background: rgba(255, 255, 255, .08); }
  .workspace-splitter span { background: #b9b0a9; }
}

@media (max-width: 1120px) {
  .split-workspace { height: auto; min-height: 0; display: block; }
  .split-pane-top { display: block; overflow: visible; }
  .viewer-card { min-height: 540px; }
  .editor-layout .cad-shell { min-height: 430px; }
  .metric-grid { height: auto; margin: 12px 0; }
  .workspace-splitter { display: none; }
  .order-lines-card { min-height: 360px; margin-top: 12px; }
  .order-search { width: min(260px, 42%); }
}

@media (max-width: 760px) {
  .order-lines-table { min-width: 760px; }
  .topbar { min-height: 68px; height: 68px; grid-template-columns: 1fr auto; padding: 6px 12px; }
  .brand-logo { height: 54px; max-width: min(230px, calc(100vw - 155px)); }
  .brand-emblem { flex-basis: 55px; width: 55px; height: 33px; }
  .brand-emblem img { width: 75px; left: -10px; top: -5px; }
  .brand-wording { height: 33px; }
  .brand-name { font-size: 16px; }
  .brand-tagline { font-size: 5px; }
  .admin-button { min-width: 0; min-height: 40px; padding-inline: 12px; }
  .viewer-card { min-height: 0; }
  .metric-card > span { font-size: 13px; }
}

/* Compact calculation and inline invoice in the right rail. */
.calculator-section { padding: 18px 16px 15px; }
.calculator-section .section-heading.compact { margin-bottom: 12px; }
.calculator-section .section-heading h2 { font-size: 19px; }
.calculator-section .form-field { gap: 6px; }
.calculator-section .form-field select { min-height: 42px; }
.calculator-section .material-toggle { margin-top: 10px; font-size: 13px; }
.cost-card { margin: 12px 14px; padding: 15px 16px; border-radius: 16px; }
.cost-card > strong { margin: 6px 0 12px; font-size: 31px; }
.cost-lines { gap: 7px; padding: 10px 0 0; border-bottom: 0; }
.cost-lines div { align-items: baseline; font-size: 12px; }

.invoice-inline-section { padding: 18px 14px 20px; }
.invoice-inline-section .section-heading.compact { margin-bottom: 12px; }
.invoice-inline-section .section-heading h2 { font-size: 19px; }
.invoice-content-inline { gap: 11px; padding: 0; }
.invoice-content-inline .invoice-seller-strip { gap: 2px 8px; padding: 10px 11px; border-radius: 12px; }
.invoice-content-inline .invoice-seller-strip strong { font-size: 12px; }
.invoice-content-inline .invoice-seller-strip small { font-size: 11px; }
.invoice-content-inline .form-field { gap: 5px; }
.invoice-content-inline .form-field > span { font-size: 11px; }
.invoice-content-inline .form-field input { min-width: 0; min-height: 40px; padding: 8px 10px; }
.invoice-content-inline .invoice-lookup-row { grid-template-columns: minmax(112px, 14ch) minmax(105px, 1fr); gap: 7px; }
.invoice-content-inline .invoice-lookup-row .button { min-width: 105px; min-height: 40px; padding-inline: 12px; }
.invoice-content-inline .invoice-company-card { gap: 3px; padding: 10px 11px; border-radius: 12px; }
.invoice-content-inline .invoice-company-card strong { font-size: 12px; }
.invoice-content-inline .invoice-company-card p,
.invoice-content-inline .invoice-company-card small { font-size: 10px; }
.invoice-content-inline .invoice-totals-preview { gap: 5px; padding: 10px 11px; border-radius: 12px; }
.invoice-content-inline .invoice-totals-preview > div { font-size: 11px; }
.invoice-content-inline .invoice-totals-preview .invoice-total-line { padding-top: 7px; }
.invoice-content-inline .invoice-total-line strong { font-size: 19px; }
.invoice-content-inline #createInvoice { min-height: 44px; padding-inline: 12px; font-size: 13px; }
.invoice-content-inline .invoice-status { font-size: 10px; line-height: 1.35; }

@media (max-width: 760px) {
  .invoice-content-inline .invoice-lookup-row { grid-template-columns: 1fr; }
  .invoice-content-inline .invoice-lookup-row .button { width: 100%; }
}

/* Let the file list and order table define the document height. */
@media (min-width: 1121px) {
  .workspace { align-items: start; }
  .workspace > .scroll-panel {
    position: static;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }
  .main-stage { overflow: visible; }
  .split-workspace {
    display: flex;
    height: auto;
    min-height: 0;
    flex-direction: column;
  }
  .split-pane-top {
    display: grid;
    grid-template-rows: minmax(330px, 36vh) 64px;
    flex: 0 0 auto;
    overflow: visible;
  }
  .viewer-card { min-height: 330px; }
  .workspace-splitter { display: none; }
  .order-lines-card { min-height: 0; margin-top: 12px; }
  .order-lines-wrap { max-height: none; overflow-x: auto; overflow-y: visible; }
  .order-lines-table th { position: static; }
}

/* Four-size typography system: caption, body, title and total. */
:root {
  --type-caption: 12px;
  --type-body: 14px;
  --type-title: 18px;
  --type-total: 28px;
}

html,
body,
button,
input,
select,
textarea {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", sans-serif;
}

body * {
  font-size: var(--type-body) !important;
}

body :is(
  small,
  .eyebrow,
  .privacy-note,
  .status-pill,
  .filename-example-label,
  .drop-zone-subtitle,
  .drop-zone-limits,
  .drop-zone small,
  .file-text small,
  .field-label,
  .field-hint,
  .form-field > span,
  .layer-row b,
  .metric-card > span,
  .metric-card small,
  .selection-note,
  th,
  .live-tag,
  .profile-badge,
  .cost-lines,
  .cost-note,
  .scope-note,
  .invoice-delivery-note,
  .invoice-status,
  .admin-history-head small,
  .admin-history-table td small,
  .history-badge,
  .admin-view-tabs button span
) {
  font-size: var(--type-caption) !important;
  line-height: 1.35 !important;
}

body :is(
  h1,
  h2,
  h3,
  .section-heading h2,
  .results-head h2,
  .dialog-head h2,
  .viewer-head h1,
  .empty-view strong,
  .metric-card strong,
  .cost-head,
  .cost-head span,
  .admin-history-head strong,
  .remove-file,
  .tool-group button
) {
  font-size: var(--type-title) !important;
  line-height: 1.25 !important;
}

body :is(
  .header-contact,
  .cost-card > strong,
  .invoice-total-line strong,
  .empty-symbol,
  .upload-icon,
  #closePricing,
  #closeDiagnostics
) {
  font-size: var(--type-total) !important;
  line-height: 1.1 !important;
}

body,
button,
input,
select,
textarea,
td {
  font-size: var(--type-body) !important;
  line-height: 1.45;
}

.cost-card,
.metric-card,
.invoice-seller-strip,
.invoice-company-card,
.file-item,
.admin-history-table-wrap {
  font-variant-numeric: tabular-nums;
}

/* Admin history and the compact readability adjustments requested for production. */
.drop-zone .filename-example-label { font-size: 14px; }
.drop-zone .filename-example-name,
.drop-zone .thickness-filename-hint { font-size: 15px; line-height: 1.42; }
.cost-head { color: var(--text); font-size: 15px; font-weight: 750; }
.cost-lines span small {
  margin-top: 3px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 750;
}
.invoice-seller-strip,
.invoice-content-inline .invoice-seller-strip {
  border-color: rgba(52, 199, 89, .35);
  background: rgba(52, 199, 89, .10);
}
.invoice-seller-strip small { color: #25813c; }
.button,
.button.primary,
.button.secondary,
.button.ghost,
.button.admin-button {
  border-color: #f56600;
  background: linear-gradient(180deg, #ff791e, #f56600);
  color: #fff;
  box-shadow: 0 7px 18px rgba(245, 102, 0, .20);
}
.button:hover:not(:disabled),
.button.primary:hover:not(:disabled),
.button.secondary:hover:not(:disabled),
.button.ghost:hover:not(:disabled),
.button.admin-button:hover:not(:disabled) {
  border-color: #ff7615;
  background: #ff7615;
  color: #fff;
}
.button:disabled { border-color: rgba(245, 102, 0, .30); background: rgba(245, 102, 0, .18); color: #9c6a49; box-shadow: none; }
.viewer-card > .viewer-head .tool-group button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  font-size: 14px !important;
}
.viewer-card > .viewer-head .tool-group #fitView {
  width: 44px;
  min-width: 44px;
  height: 30px;
  min-height: 30px;
  padding-inline: 4px;
  font-size: 11px !important;
}
.invoice-inn-callout { color: #b64700; font-size: 14px !important; font-weight: 400; }
@keyframes button-attention-shimmer {
  0%, 100% { background-position: 130% 0; box-shadow: 0 7px 18px rgba(245, 102, 0, .22); }
  50% { background-position: -30% 0; box-shadow: 0 9px 24px rgba(245, 102, 0, .40); }
}
@keyframes recognition-pulse {
  0%, 100% { box-shadow: var(--shadow); background-color: var(--panel); }
  50% { box-shadow: 0 0 0 4px rgba(245, 102, 0, .22), 0 16px 40px rgba(245, 102, 0, .20); background-color: rgba(255, 244, 235, .98); }
}
.left-rail.recognizing {
  animation: recognition-pulse 1.15s ease-in-out infinite;
}
.button.attention-shimmer {
  border-color: #f56600;
  background-image: linear-gradient(110deg, #f56600 0%, #ff7615 34%, #ffd3b5 49%, #ff7615 64%, #f56600 100%);
  background-size: 240% 100%;
  color: #fff;
  animation: button-attention-shimmer 2.1s ease-in-out infinite;
}
.button.attention-shimmer:disabled { opacity: .74; color: #fff; box-shadow: 0 7px 18px rgba(245, 102, 0, .18); }
@media (prefers-reduced-motion: reduce) {
  .button.attention-shimmer { animation: none; background: #f56600; }
  .left-rail.recognizing { animation: none; box-shadow: 0 0 0 4px rgba(245, 102, 0, .22); }
}

.pricing-dialog { width: min(1180px, calc(100vw - 32px)); }
.admin-view-tabs {
  display: flex;
  gap: 7px;
  padding: 13px 23px 0;
  border-bottom: 1px solid var(--line-soft);
}
.admin-view-tabs button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.admin-view-tabs button span {
  display: inline-grid;
  min-width: 22px;
  min-height: 22px;
  margin-left: 5px;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(118, 118, 128, .12);
  font-size: 11px;
}
.admin-view-tabs button.active {
  color: var(--text);
  border-color: var(--line-soft);
  border-bottom-color: var(--panel);
  background: var(--panel);
}
.admin-view-tabs button.active span { color: #fff; background: var(--cyan); }
.admin-history-content { padding: 18px 23px 23px; }
.admin-settings-content { display: grid; gap: 16px; padding: 18px 23px 23px; }
.admin-settings-content[hidden] { display: none; }
.admin-settings-field { display: grid; gap: 7px; max-width: 520px; color: var(--muted); font-size: 12px; }
.admin-settings-field input { min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--panel); font: inherit; font-size: 14px; }
.admin-settings-field input:focus { border-color: var(--cyan); outline: 3px solid rgba(245, 102, 0, .12); }
.admin-settings-note, .admin-settings-status { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.admin-settings-status.success { color: #25813c; }
.admin-settings-status.error { color: #c92a2a; }
.admin-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
}
.admin-history-head > div { display: grid; gap: 3px; }
.admin-history-head strong { font-size: 17px; }
.admin-history-head small { color: var(--muted); font-size: 12px; }
.admin-history-table-wrap {
  max-height: 58vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.admin-history-table { width: 100%; min-width: 1040px; border-collapse: collapse; }
.admin-history-table th,
.admin-history-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  font-size: 12px;
}
.admin-history-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  color: var(--muted);
  background: var(--panel);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.admin-history-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.admin-history-table tbody tr:hover { background: rgba(245, 102, 0, .035); }
.admin-history-table .history-date { white-space: nowrap; }
.admin-history-table .history-money { font-weight: 750; white-space: nowrap; }
.history-badge {
  display: inline-flex;
  width: max-content;
  margin: 0 4px 4px 0;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}
.history-badge.calculated { color: #237a3b; background: rgba(52, 199, 89, .13); }
.history-badge.review { color: #936314; background: rgba(255, 184, 0, .15); }
.history-badge.error { color: #b42318; background: rgba(220, 53, 69, .11); }
.history-delivery { min-width: 138px; }

@media (max-width: 760px) {
  .admin-view-tabs { padding-inline: 12px; overflow-x: auto; }
  .admin-history-content { padding: 14px 12px 18px; }
  .admin-history-head { align-items: flex-start; }
}

@media (prefers-color-scheme: dark) {
  .invoice-seller-strip,
  .invoice-content-inline .invoice-seller-strip { background: rgba(52, 199, 89, .14); }
  .invoice-seller-strip small { color: #81e49c; }
  .admin-view-tabs button.active { border-bottom-color: rgba(31, 28, 26, .96); }
  .admin-history-table tbody tr:hover { background: rgba(255, 116, 23, .07); }
}

/* One spacing rhythm for the main workspace and its primary sections. */
:root {
  --workspace-edge: 16px;
  --section-edge: 16px;
}

.topbar {
  grid-template-columns: minmax(180px, 1fr) auto auto;
  padding-inline: var(--workspace-edge);
}
.header-contacts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.header-contact {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, .72);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.header-contact:hover,
.header-contact:focus-visible {
  border-color: rgba(245, 102, 0, .42);
  color: #cf5200;
  background: rgba(245, 102, 0, .07);
}
@media (prefers-color-scheme: dark) {
  .header-contact { background: rgba(44, 44, 46, .82); }
  .header-contact:hover,
  .header-contact:focus-visible { color: #ff9a57; background: rgba(255, 116, 23, .12); }
}
.workspace {
  gap: var(--workspace-edge);
  padding: var(--workspace-edge);
}
.panel-section,
.calculator-section,
.invoice-inline-section { padding-inline: var(--section-edge); }
.cost-card { margin-inline: var(--section-edge); }
.viewer-head,
.results-head,
.contour-editor .results-head,
.contour-layers,
.order-lines-card .results-head { padding-inline: var(--section-edge); }

/* Keep the first step title closer to the top edge without tightening its content. */
#sourceStep { padding-top: 14px; }

@media (max-width: 760px) {
  :root {
    --workspace-edge: 12px;
    --section-edge: 12px;
  }
  .order-lines-card .results-head { align-items: stretch; flex-direction: column; }
  .order-search { width: 100%; }
  .topbar { height: auto; grid-template-columns: 1fr auto; padding-block: 8px; }
  .header-contacts {
    grid-column: 1 / -1;
    flex-direction: column;
    justify-content: stretch;
    gap: 8px;
  }
  .header-contact { width: 100%; min-width: 0; justify-content: center; padding-inline: 8px; }
}

/* Stacked layouts use the document scrollbar instead of trapping rail content. */
@media (max-width: 1120px) {
  .workspace > .scroll-panel {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
  }
}

/* Use the full mobile header width for the wide DETAL.CENTER lockup. */
@media (max-width: 760px) {
  .topbar {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 10px;
  }
  .brand {
    grid-column: 1;
    width: 100%;
    justify-content: center;
    padding-inline: 0;
  }
  .brand-logo {
    width: min(100%, 520px);
    height: auto;
    max-width: none;
  }
  .header-contacts { grid-column: 1; }
  .admin-button { grid-column: 1; justify-self: end; }
}

/* Completed workflow stages use a calm light-green confirmation state. */
:root {
  --stage-complete-bg: #edf9f0;
  --stage-complete-border: rgba(52, 199, 89, .42);
  --stage-complete-text: #237a3b;
  --stage-complete-shadow: 0 8px 24px rgba(52, 199, 89, .10);
}

.stage-complete {
  border-color: var(--stage-complete-border) !important;
  background: linear-gradient(145deg, var(--stage-complete-bg), rgba(255, 255, 255, .97)) !important;
  box-shadow: var(--stage-complete-shadow) !important;
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.panel-section.stage-complete {
  box-shadow: inset 4px 0 var(--green), var(--stage-complete-shadow) !important;
}

.metric-card.stage-complete strong,
.cost-card.stage-complete > strong {
  color: var(--stage-complete-text);
}

.stage-complete-label {
  display: block;
  margin: 1px -5px;
  padding: 7px 8px;
  border: 1px solid var(--stage-complete-border);
  border-radius: 9px;
  color: var(--stage-complete-text);
  background: var(--stage-complete-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --stage-complete-bg: rgba(52, 199, 89, .15);
    --stage-complete-border: rgba(74, 222, 128, .42);
    --stage-complete-text: #81e49c;
    --stage-complete-shadow: 0 8px 26px rgba(0, 0, 0, .18);
  }
  .stage-complete {
    background: linear-gradient(145deg, var(--stage-complete-bg), rgba(31, 28, 26, .97)) !important;
  }
}