:root {
  --ink: #122f3e;
  --ink-soft: #48616d;
  --navy: #0d2938;
  --teal: #009c91;
  --teal-soft: #e6f7f4;
  --blue: #2f6fed;
  --line: #dce5e9;
  --surface: #ffffff;
  --canvas: #f2f6f7;
  --amber: #e9a52b;
  --shell-nav-width: 218px;
  --topbar-height: 66px;
  --page-gutter: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
html { scroll-padding-top: calc(var(--topbar-height) + 12px); }
* { box-sizing: border-box; }
body { margin: 0; min-width: 1120px; background: var(--canvas); }
button, input { font: inherit; }
.app-shell { display: grid; grid-template-columns: var(--shell-nav-width) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 17px 12px; background: var(--navy); color: white; display: flex; flex-direction: column; }
.brand { display: flex; gap: 10px; align-items: center; padding: 0 7px 18px; color: white; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid #59d4c9; color: #59d4c9; font-weight: 800; border-radius: 9px; }
.brand strong, .brand small { display: block; }
.brand strong { letter-spacing: .16em; font-size: 14px; }
.brand small { margin-top: 3px; color: #9eb3bc; font-size: 10px; }
nav { display: grid; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #b8c8cf; text-decoration: none; font-size: 13px; font-weight: 650; }
.nav-item:hover { background: #173b4d; color: white; }
.nav-item.active { background: #1b4658; color: white; box-shadow: inset 3px 0 #34c6b8; }
.nav-item svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }
.environment-card { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding: 14px; background: #09222f; border: 1px solid #254657; border-radius: 9px; }
.environment-card strong, .environment-card small { display: block; }
.environment-card strong { font-size: 12px; }
.environment-card small { color: #89a2ad; font-size: 10px; margin-top: 4px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #36c98c; box-shadow: 0 0 0 3px rgb(54 201 140 / 13%); flex: 0 0 auto; }
main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 100; height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--page-gutter); background: rgb(255 255 255 / 96%); border-bottom: 1px solid var(--line); box-shadow: 0 3px 12px rgb(13 41 56 / 7%); backdrop-filter: blur(8px); }
.topbar h1 { margin: 3px 0 0; font-size: 20px; font-weight: 680; }
.eyebrow { color: #708792; font-size: 10px; letter-spacing: .14em; font-weight: 800; }
.eyebrow.teal { color: var(--teal); }
.topbar-actions { display: flex; gap: 14px; align-items: center; }
.source-pill { display: flex; gap: 8px; align-items: center; padding: 8px 11px; border: 1px solid var(--line); border-radius: 99px; font-size: 11px; color: var(--ink-soft); }
.avatar { border: 0; width: 36px; height: 36px; border-radius: 50%; color: white; background: var(--ink); font-size: 11px; font-weight: 800; }
.content { padding: 20px var(--page-gutter) 38px; max-width: 1760px; margin: 0 auto; }
.hero-panel { display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: center; padding: 24px 28px; color: white; background: linear-gradient(120deg, #11384a, #0b6065); border-radius: 11px; box-shadow: 0 10px 24px rgb(17 56 74 / 14%); }
.hero-panel h2 { max-width: 750px; font-size: 29px; line-height: 1.2; margin: 9px 0 10px; }
.hero-panel p { max-width: 790px; margin: 0; color: #c3dadd; line-height: 1.6; font-size: 14px; }
.hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.hero-actions > span { color: #9fc4c7; font-size: 10px; }
.hero-cta { display: inline-flex; align-items: center; padding: 11px 15px; border-radius: 7px; color: #08383b; background: #69e0d1; text-decoration: none; font-size: 12px; font-weight: 800; box-shadow: 0 7px 18px rgb(0 0 0 / 18%); }
.hero-cta:hover { background: #8ce9de; transform: translateY(-1px); }
.hero-metric { padding-left: 28px; border-left: 1px solid rgb(255 255 255 / 25%); }
.hero-metric strong, .hero-metric span, .hero-metric small { display: block; }
.hero-metric strong { font-size: 35px; color: #65e1d2; }
.hero-metric span { font-size: 13px; font-weight: 700; }
.hero-metric small { color: #a8c3c8; margin-top: 6px; }
.section-heading, .panel-heading { display: flex; align-items: center; justify-content: space-between; }
.section-heading { margin: 24px 0 12px; }
.section-heading h2, .panel h2 { margin: 5px 0 0; font-size: 18px; }
.release-gate, .shield, .module-status { padding: 7px 10px; border-radius: 6px; font-size: 11px; font-weight: 750; background: var(--teal-soft); color: #087f76; }
.module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.module-card { min-height: 214px; padding: 18px; background: white; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; transition: .18s ease; }
.module-card:hover { transform: translateY(-3px); border-color: #9dccca; box-shadow: 0 10px 25px rgb(17 56 74 / 10%); }
.module-card-top { display: flex; align-items: center; justify-content: space-between; }
.module-number { font-size: 12px; font-weight: 800; color: #93a4ab; }
.module-icon, .large-module-icon { display: grid; place-items: center; border-radius: 9px; color: var(--teal); background: var(--teal-soft); }
.module-icon { width: 39px; height: 39px; }
.module-icon svg { width: 21px; fill: currentColor; }
.module-card h3 { margin: 22px 0 8px; font-size: 16px; }
.module-card p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.module-footer { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #78909a; }
.module-footer strong { color: var(--teal); font-size: 11px; }
.two-column { display: grid; grid-template-columns: 1.25fr .75fr; gap: 15px; margin-top: 15px; }
.panel { padding: 18px 20px; background: white; border: 1px solid var(--line); border-radius: 10px; }
.baseline-panel { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 15px; }
.baseline-metrics { display: grid; grid-template-columns: repeat(5, minmax(92px, 1fr)); gap: 8px; }
.baseline-metrics div { min-width: 100px; padding: 11px 12px; background: #f3f8f8; border-radius: 7px; }
.baseline-metrics strong, .baseline-metrics span { display: block; }
.baseline-metrics strong { color: var(--teal); font-size: 18px; }
.baseline-metrics span { margin-top: 3px; color: var(--ink-soft); font-size: 9px; }
.rule-list { list-style: none; padding: 0; margin: 19px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; }
.rule-list li { display: flex; gap: 9px; color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.rule-list li span { color: var(--teal); font-weight: 900; }
.lifecycle { display: flex; gap: 4px; margin-top: 22px; }
.life-step { flex: 1; position: relative; text-align: center; }
.life-step:not(:last-child)::after { content: ""; position: absolute; top: 10px; left: 65%; width: 70%; border-top: 1px solid #b9c9cf; }
.life-step span { position: relative; z-index: 1; display: grid; place-items: center; width: 21px; height: 21px; margin: 0 auto 8px; border-radius: 50%; color: white; background: var(--teal); font-size: 9px; }
.life-step strong { font-size: 9px; color: var(--ink-soft); }
.note { color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.sources-panel { margin-top: 15px; }
.muted { color: #80939c; font-size: 11px; }
.table-wrap { overflow: hidden; margin: 14px -20px -18px; border-radius: 0 0 10px 10px; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { color: #71858e; background: #f6f9fa; text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
th, td { padding: 9px 16px; border-top: 1px solid var(--line); }
td:first-child { font-weight: 700; }
.source-state { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; }
.source-state.available { background: #32bd83; }.source-state.missing { background: #d95c5c; }
.tag { color: #54707c; background: #edf3f5; padding: 4px 7px; border-radius: 4px; }
.back-link { display: inline-block; margin-bottom: 18px; color: var(--teal); text-decoration: none; font-size: 12px; font-weight: 700; }
.module-hero { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 20px; padding: 28px 30px; margin-bottom: 15px; background: white; border: 1px solid var(--line); border-radius: 11px; }
.module-hero h2 { font-size: 25px; margin: 5px 0 6px; }.module-hero p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.large-module-icon { width: 64px; height: 64px; }.large-module-icon svg { width: 31px; fill: currentColor; }
.responsibility-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.responsibility-grid article { padding: 17px; background: #f7fafb; border: 1px solid #e3eaed; border-radius: 8px; }
.responsibility-grid article > span svg { width: 18px; fill: var(--teal); }
.responsibility-grid h3 { font-size: 12px; margin: 12px 0 6px; }.responsibility-grid p { font-size: 10px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.record-list { margin-top: 15px; }.record-list div { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); font-size: 10px; }.record-list span { color: var(--ink-soft); }
.primary-button { display: inline-flex; margin-top: 12px; border: 0; border-radius: 6px; padding: 9px 12px; color: white; background: #8ca0a9; font-size: 11px; font-weight: 750; text-decoration: none; }
.primary-button.active { margin: 0; padding: 12px 16px; color: #063e3a; background: #69e0d1; }
.primary-button.secondary { color: white; background: var(--teal); }
.review-entry { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 15px; padding: 24px 26px; color: white; background: linear-gradient(120deg, #11384a, #0b6065); border-radius: 11px; }
.review-entry h2 { margin: 6px 0; font-size: 20px; }.review-entry p { max-width: 800px; margin: 0; color: #c3dadd; font-size: 12px; line-height: 1.6; }
.template-access-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 15px; margin-top: 15px; }.template-access-grid .review-entry { margin-top: 0; flex-direction: column; align-items: flex-start; }.viewer-entry { background: linear-gradient(120deg, #11384a, #087c76); box-shadow: 0 9px 24px rgb(17 56 74 / 13%); }.rules-entry { background: linear-gradient(120deg, #24536a, #173f52); }.template-access-grid .primary-button.active { margin-top: 18px; }
.viewer-launch-hero { display: grid; grid-template-columns: 1fr 260px; gap: 36px; align-items: center; padding: 36px 40px; color: white; background: linear-gradient(120deg, #10374a, #087c76); border-radius: 13px; box-shadow: 0 12px 30px rgb(17 56 74 / 15%); }.viewer-launch-hero h2 { margin: 8px 0 10px; font-size: 29px; }.viewer-launch-hero p { max-width: 780px; margin: 0; color: #c8dfe0; font-size: 13px; line-height: 1.65; }.viewer-launch-button { display: inline-flex; margin-top: 22px; padding: 13px 18px; color: #063e3a; background: #69e0d1; border-radius: 7px; text-decoration: none; font-size: 13px; font-weight: 850; box-shadow: 0 8px 20px rgb(0 0 0 / 18%); }.viewer-launch-button:hover { background: #91ece2; transform: translateY(-1px); }.viewer-file-card { padding: 25px; color: var(--ink); background: white; border-radius: 11px; box-shadow: 0 10px 28px rgb(0 0 0 / 18%); }.viewer-file-card span, .viewer-file-card strong, .viewer-file-card small, .viewer-file-card b { display: block; }.viewer-file-card span { color: #78909a; font-size: 9px; font-weight: 800; letter-spacing: .1em; }.viewer-file-card strong { margin-top: 14px; color: var(--teal); font-size: 22px; }.viewer-file-card small { margin-top: 5px; color: var(--ink-soft); font-size: 10px; }.viewer-file-card b { margin-top: 20px; padding-top: 12px; color: #24536a; border-top: 1px solid var(--line); font-size: 11px; }
.viewer-steps { display: grid; grid-template-columns: .65fr 1.35fr; gap: 30px; align-items: center; margin-top: 15px; }.viewer-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }.viewer-steps li { display: flex; gap: 10px; align-items: center; padding: 13px; background: #f2f8f8; border: 1px solid #d7e8e7; border-radius: 8px; }.viewer-steps li span { display: grid; place-items: center; flex: 0 0 24px; height: 24px; color: white; background: var(--teal); border-radius: 50%; font-size: 10px; font-weight: 800; }.viewer-steps li strong { font-size: 10px; line-height: 1.4; }.viewer-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }.viewer-choice-grid article { display: flex; gap: 17px; padding: 22px; background: white; border: 1px solid var(--line); border-radius: 10px; }.viewer-choice-icon { display: grid; place-items: center; flex: 0 0 48px; height: 48px; color: white; background: #18844f; border-radius: 8px; font-weight: 900; }.viewer-choice-icon.rules { background: #2f6f88; }.viewer-choice-grid h3 { margin: 2px 0 6px; font-size: 14px; }.viewer-choice-grid p { margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }.viewer-choice-grid a { display: inline-block; margin-top: 11px; color: var(--teal); font-size: 10px; font-weight: 800; text-decoration: none; }.viewer-note { margin-bottom: 0; }.viewer-inline-link { margin-top: 14px; }
.internal-viewer-hero { margin-bottom: 16px; }.part-template-workspace { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }.part-template-catalogue, .part-template-layout { background: white; border: 1px solid var(--line); border-radius: 11px; }.part-template-catalogue { position: sticky; top: 99px; padding: 19px; }.part-template-catalogue h3 { margin: 5px 0 15px; font-size: 16px; }.part-template-card { display: grid; grid-template-columns: 62px 1fr; gap: 3px 9px; margin-top: 7px; padding: 11px; color: var(--ink); background: #f7fafb; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; }.part-template-card:hover { border-color: #82c9c4; }.part-template-card.selected { background: var(--teal-soft); border-color: #62c9c0; box-shadow: inset 3px 0 var(--teal); }.part-template-card span { grid-row: 1 / 3; align-self: center; color: var(--teal); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; font-weight: 800; }.part-template-card strong { font-size: 10px; }.part-template-card small { color: #6e858e; font-size: 8px; }.part-template-title { display: flex; justify-content: space-between; gap: 20px; padding: 23px 25px; border-bottom: 1px solid var(--line); }.part-template-title h2 { margin: 5px 0; font-size: 22px; }.part-template-title p { margin: 0; color: var(--ink-soft); font-size: 10px; }.part-template-title > div:last-child { min-width: 100px; padding-left: 20px; border-left: 1px solid var(--line); }.part-template-title > div:last-child strong, .part-template-title > div:last-child span, .part-template-title > div:last-child small { display: block; }.part-template-title > div:last-child strong { color: var(--teal); font-size: 23px; }.part-template-title > div:last-child span { font-size: 9px; font-weight: 800; }.part-template-title > div:last-child small { margin-top: 5px; color: #728790; font-size: 8px; text-transform: capitalize; }.field-group-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px 25px; background: #f6f9fa; border-bottom: 1px solid var(--line); }.field-group-grid article { padding: 10px; background: white; border: 1px solid var(--line); border-radius: 6px; }.field-group-grid span, .field-group-grid strong { display: block; }.field-group-grid span { color: var(--teal); font-size: 8px; font-weight: 850; text-transform: uppercase; }.field-group-grid strong { margin-top: 5px; color: #4c6670; font-size: 8px; line-height: 1.45; }.part-layout-table { max-height: 590px; overflow: auto; }.part-layout-table table { min-width: 1120px; }.part-layout-table th { position: sticky; top: 0; z-index: 1; color: white; background: #24536a; }.part-layout-table th, .part-layout-table td { padding: 10px 12px; }.part-layout-table td { vertical-align: top; font-size: 9px; }.part-layout-table td:first-child strong, .part-layout-table td:first-child small { display: block; }.part-layout-table td:first-child small { margin-top: 3px; color: var(--ink-soft); font-weight: 400; }.part-layout-table th:first-child { width: 18%; }.part-layout-table th:last-child { width: 20%; }.part-template-workspace + .identity-strip { margin-top: 16px; border-radius: 9px; }
.onlyoffice-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 12px; padding: 18px 22px; color: white; background: linear-gradient(120deg, #12384b, #176d63); border-radius: 10px; }.onlyoffice-heading h2 { margin: 5px 0; font-size: 22px; }.onlyoffice-heading p { margin: 0; color: #c6dcdf; font-size: 10px; }.onlyoffice-heading > div:last-child { text-align: right; }.onlyoffice-heading small { display: block; margin-top: 7px; color: #c6dcdf; font-size: 8px; }.onlyoffice-workspace { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 12px; min-height: 760px; }.onlyoffice-workspace > aside { padding: 18px; background: white; border: 1px solid var(--line); border-radius: 9px; }.onlyoffice-workspace > aside h3 { margin: 6px 0 12px; font-size: 13px; }.onlyoffice-sheet-link { display: grid; grid-template-columns: 58px 1fr; gap: 8px; align-items: center; margin-top: 6px; padding: 9px; color: var(--ink); background: #f6f9fa; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }.onlyoffice-sheet-link span { color: var(--teal); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; font-weight: 800; }.onlyoffice-sheet-link strong { font-size: 9px; }.onlyoffice-sheet-link.selected { background: var(--teal-soft); border-color: #62c9c0; }.onlyoffice-editor-panel { position: relative; min-width: 0; height: 760px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 9px; }.onlyoffice-editor-panel #onlyoffice-editor { width: 100%; height: 100%; }.onlyoffice-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 8px; padding: 30px; color: #58717b; background: white; font-size: 11px; text-align: center; }.onlyoffice-loading strong, .onlyoffice-loading span { display: block; }
.review-banner { display: grid; grid-template-columns: 1fr 190px; gap: 28px; align-items: center; margin-bottom: 16px; padding: 26px 30px; background: white; border: 1px solid #9dccca; border-left: 5px solid var(--teal); border-radius: 11px; }
.review-banner h2 { margin: 6px 0; font-size: 24px; }.review-banner p { max-width: 760px; margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.review-banner > div:last-child { padding-left: 24px; border-left: 1px solid var(--line); }.review-banner > div:last-child strong, .review-banner > div:last-child span, .review-banner > div:last-child small { display: block; }.review-banner > div:last-child strong { color: var(--teal); font-size: 28px; }.review-banner > div:last-child span { font-size: 12px; font-weight: 750; }.review-banner > div:last-child small { margin-top: 7px; color: var(--ink-soft); font-size: 9px; }
.template-workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.template-browser, .template-detail { background: white; border: 1px solid var(--line); border-radius: 11px; }
.template-browser { position: sticky; top: 99px; padding: 20px; }.template-browser h3 { margin: 5px 0 16px; font-size: 17px; }
.template-list-item { display: block; margin-top: 8px; padding: 13px; color: var(--ink); text-decoration: none; background: #f7fafb; border: 1px solid var(--line); border-radius: 8px; }.template-list-item:hover { border-color: #82c9c4; }.template-list-item.selected { background: var(--teal-soft); border-color: #62c9c0; box-shadow: inset 3px 0 var(--teal); }.template-list-item span, .template-list-item strong, .template-list-item small { display: block; }.template-list-item span { color: #6f858f; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }.template-list-item strong { margin-top: 5px; font-size: 11px; }.template-list-item small { margin-top: 6px; color: var(--ink-soft); font-size: 9px; line-height: 1.45; }
.review-checklist { display: grid; gap: 7px; margin-top: 20px; padding: 14px; background: #fff8e9; border: 1px solid #f0d699; border-radius: 8px; }.review-checklist strong { margin-bottom: 3px; font-size: 10px; }.review-checklist span { color: #6f654e; font-size: 9px; }
.template-detail { overflow: hidden; }.review-title { display: flex; justify-content: space-between; gap: 20px; padding: 24px 26px; border-bottom: 1px solid var(--line); }.review-title h2 { margin: 5px 0 6px; font-size: 23px; }.review-title p { margin: 0; color: var(--ink-soft); font-size: 11px; }.review-badges { display: flex; align-items: flex-start; gap: 6px; }.review-badges span, .review-badges strong { padding: 6px 8px; border-radius: 5px; font-size: 9px; text-transform: capitalize; }.review-badges span { color: #647b85; background: #eef3f5; }.review-badges strong { color: #087f76; background: var(--teal-soft); }
.review-metrics { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 18px 26px; background: #f7fafb; border-bottom: 1px solid var(--line); }.review-metrics div { padding: 12px; background: white; border: 1px solid var(--line); border-radius: 7px; }.review-metrics span, .review-metrics strong { display: block; }.review-metrics span { color: #708792; font-size: 8px; }.review-metrics strong { margin-top: 4px; font-size: 16px; }
.pack-lock { display: grid; grid-template-columns: minmax(290px, .9fr) 1.1fr; gap: 20px; align-items: center; padding: 20px 26px; color: #59430e; background: #fff8e9; border-bottom: 1px solid #efd18e; }.pack-lock h3 { margin: 5px 0 6px; font-size: 16px; }.pack-lock p { margin: 0; color: #756536; font-size: 10px; line-height: 1.55; }.pack-lock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }.pack-lock-grid span { padding: 10px; color: #76590f; background: #ffedbd; border: 1px solid #e6c465; border-radius: 7px; font-size: 8px; }.pack-lock-grid strong { display: block; margin-bottom: 3px; color: #8a6200; font-size: 9px; text-transform: uppercase; }.pack-lock-grid .allowed { color: #276b55; background: #e4f4ed; border-color: #9acdbb; }.pack-lock-grid .allowed strong { color: #087f76; }
.review-two-column { display: grid; grid-template-columns: 1fr 1fr; }.review-two-column .review-section:first-child { border-right: 1px solid var(--line); }
.review-section { padding: 21px 26px; border-bottom: 1px solid var(--line); }.review-section h3 { margin: 5px 0 14px; font-size: 16px; }
.depth-stack { display: grid; grid-template-columns: minmax(180px, 1fr) 48px 68px; height: 78px; margin-top: 17px; overflow: hidden; border: 1px solid #9fb4bd; border-radius: 7px; }.depth-stack div { display: grid; place-items: center; align-content: center; border-right: 1px solid rgb(255 255 255 / 65%); }.depth-stack strong, .depth-stack span { display: block; }.depth-stack strong { font-size: 18px; }.depth-stack span { margin-top: 2px; font-size: 8px; }.carcase-depth { color: white; background: #24536a; }.hinge-depth { color: #734e00; background: #f6cf73; }.decor-depth { color: white; background: var(--teal); }
.review-caption { margin: 8px 0 0; color: var(--ink-soft); font-size: 9px; }.spec-list { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 10px; line-height: 1.75; }
.toe-kick-pattern { position: relative; width: 190px; height: 150px; margin: 18px auto; background: #eef5f6; border: 2px solid #8aa6af; border-radius: 8px; }
.toe-kick-pattern i { position: absolute; width: 16px; height: 16px; background: white; border: 4px solid var(--teal); border-radius: 50%; transform: translate(-50%, -50%); }
.toe-kick-pattern i:nth-child(1) { left: 48px; top: 43px; }.toe-kick-pattern i:nth-child(2) { left: 112px; top: 43px; }.toe-kick-pattern i:nth-child(3) { left: 48px; top: 107px; }.toe-kick-pattern i:nth-child(4) { left: 112px; top: 107px; }
.toe-kick-pattern span, .toe-kick-pattern b { position: absolute; color: #56727c; font-size: 9px; }.toe-kick-pattern span { left: 61px; top: 24px; }.toe-kick-pattern b { left: 122px; top: 72px; transform: rotate(90deg); }
.candidate-note { display: grid; gap: 4px; margin-top: 15px; padding: 12px; color: #6e5522; background: #fff5db; border: 1px solid #e8c66f; border-radius: 7px; font-size: 10px; }.candidate-note span { line-height: 1.5; }
.bom-entry { background: linear-gradient(120deg, #12384b, #176d63); }.bom-summary { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 16px; }.bom-summary div { padding: 14px; background: white; border: 1px solid var(--line); border-radius: 8px; }.bom-summary span, .bom-summary strong { display: block; }.bom-summary span { color: #708792; font-size: 8px; }.bom-summary strong { margin-top: 4px; color: var(--teal); font-size: 18px; }
.bom-process { margin-bottom: 16px; }.bom-process-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }.bom-process-step { display: flex; gap: 9px; align-items: flex-start; padding: 12px; background: #f6f9fa; border: 1px solid var(--line); border-radius: 7px; }.bom-process-step > span { display: grid; place-items: center; flex: 0 0 22px; height: 22px; color: white; background: var(--teal); border-radius: 50%; font-size: 9px; font-weight: 800; }.bom-process-step strong, .bom-process-step small { display: block; }.bom-process-step strong { font-size: 9px; line-height: 1.4; }.bom-process-step small { margin-top: 5px; color: var(--ink-soft); font-size: 8px; line-height: 1.4; }
.bom-blockers { margin-bottom: 16px; }.bom-table a { color: #086f69; text-decoration: none; }.bom-table .selected-row { background: #eaf7f5; }.issue-text { color: #a23b32; font-weight: 700; }.validation-badge { display: inline-block; padding: 3px 6px; color: #34505a; background: #e8eef0; border-radius: 4px; font-size: 8px; font-weight: 800; text-transform: uppercase; }.validation-badge.pass, .validation-badge.resolved, .validation-badge.available, .validation-badge.expected { color: #267042; background: #e2f0d9; }.validation-badge.fail, .validation-badge.missing, .validation-badge.blocking { color: #9b332c; background: #f9dfdc; }.validation-badge.required, .validation-badge.review { color: #74591e; background: #fff2cc; }
.bom-selected { margin-top: 16px; background: white; border: 1px solid var(--line); }.bom-detail-grid { margin-top: 0; background: white; border: 1px solid var(--line); border-top: 0; }.validation-list { display: grid; gap: 8px; }.validation-list article { padding: 10px; background: #f7fafb; border: 1px solid var(--line); border-radius: 6px; }.validation-list article div { display: flex; gap: 8px; align-items: center; }.validation-list article strong { font-size: 9px; }.validation-list article p { margin: 6px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }.path-code { display: block; margin-top: 12px; padding: 10px; overflow-wrap: anywhere; color: #36545f; background: #eef4f5; border-radius: 6px; font-size: 9px; }.part-manifest { margin-top: 16px; background: white; border: 1px solid var(--line); }.part-manifest td small { display: block; margin-top: 3px; color: var(--ink-soft); }
.cabinet-build-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; padding: 20px 24px; background: white; border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 10px; }.cabinet-build-toolbar > div:first-child { flex: 1; max-width: 660px; }.cabinet-build-toolbar label, .cabinet-build-toolbar small { display: block; }.cabinet-build-toolbar label { margin-bottom: 7px; color: #657e88; font-size: 9px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }.cabinet-build-toolbar select { width: 100%; padding: 11px 38px 11px 12px; color: var(--ink); background: #f7fafb; border: 1px solid #a9bdc4; border-radius: 6px; font-size: 13px; font-weight: 750; }.cabinet-build-toolbar small { margin-top: 6px; color: var(--ink-soft); font-size: 9px; }.cabinet-build-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }.cabinet-build-actions .primary-button { margin-top: 0; }.secondary-action { padding: 8px 11px; color: #48636e; background: white; border: 1px solid #b7c8ce; border-radius: 6px; font: inherit; font-size: 10px; font-weight: 750; text-decoration: none; cursor: pointer; }.draft-state, .source-state-label { display: block; width: 100%; color: #6b818a; font-size: 8px; text-align: right; }.draft-state { color: #8a661d; }.cabinet-build-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 28px; color: white; background: linear-gradient(120deg, #11384b, #176d63); border-radius: 11px 11px 0 0; }.cabinet-build-heading h2 { margin: 6px 0; font-size: 26px; }.cabinet-build-heading p { margin: 0; color: #c9dcdf; font-size: 11px; }.build-status-stack { min-width: 170px; padding-left: 22px; border-left: 1px solid rgb(255 255 255 / 24%); }.build-status-stack strong, .build-status-stack small { display: block; }.build-status-stack strong { margin-top: 10px; font-size: 12px; }.build-status-stack small { margin-top: 4px; color: #bdd3d6; font-size: 8px; }.cabinet-spec-strip { display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 16px; background: white; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; }.cabinet-spec-strip > div { min-width: 0; padding: 14px 17px; border-right: 1px solid var(--line); }.cabinet-spec-strip > div:last-child { border-right: 0; }.cabinet-spec-strip span, .cabinet-spec-strip strong { display: block; }.cabinet-spec-strip span { color: #708792; font-size: 8px; }.cabinet-spec-strip strong { margin-top: 4px; overflow-wrap: anywhere; color: var(--teal); font-size: 15px; }.draft-boundary { display: flex; gap: 18px; margin-bottom: 12px; padding: 13px 17px; color: #704f0e; background: #fff4d6; border: 1px solid #e7c465; border-radius: 7px; font-size: 9px; line-height: 1.5; }.draft-boundary strong { flex: 0 0 auto; }.bom-jump-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }.bom-jump-links button { padding: 11px 14px; color: #146e69; background: #eaf6f5; border: 1px solid #badbd8; border-radius: 7px; font-size: 10px; font-weight: 800; cursor: pointer; }.bom-jump-links button:hover { background: #d9efed; }.cabinet-bom-section { margin-top: 12px; scroll-margin-top: 98px; background: white; border: 1px solid var(--line); border-radius: 9px; }.cabinet-bom-section .table-wrap { max-height: 460px; overflow: auto; }.cabinet-bom-section th { position: sticky; top: 0; z-index: 1; }.cabinet-bom-section td small { display: block; margin-top: 3px; color: var(--ink-soft); }.bom-quantity-input { width: 62px; padding: 6px 7px; color: var(--ink); background: #fffdf6; border: 1px solid #d6b85c; border-radius: 5px; font: inherit; font-weight: 800; }.draft-quantity { display: inline-block; min-width: 28px; padding: 3px 6px; color: #7d5b11; background: #fff0bd; border-radius: 4px; }.locked-quantity { color: #526b75; white-space: nowrap; }.cabinet-evidence-grid { margin-top: 12px; }.cabinet-evidence-grid + .identity-strip { margin-top: 12px; border-radius: 9px; }
.decision-grid, .machining-grid { display: grid; gap: 10px; }.decision-grid { grid-template-columns: 1fr 1fr; }.machining-grid { grid-template-columns: repeat(4, 1fr); margin-top: 15px; }.decision-grid article, .machining-grid article { padding: 14px; background: #f7fafb; border: 1px solid var(--line); border-radius: 8px; }.decision-grid strong, .decision-grid span { display: block; }.decision-grid strong { font-size: 11px; }.decision-grid span { margin-top: 9px; color: var(--teal); font-size: 14px; font-weight: 800; }.decision-grid p, .machining-grid p { margin: 6px 0 0; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }.machining-grid strong { font-size: 10px; }
.identity-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 26px; background: #edf6f5; }.identity-strip p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; }.identity-strip > span { color: #6c828c; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }
.definition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 22px 26px; }.definition-card { min-width: 0; padding: 15px; background: #f7fafb; border: 1px solid var(--line); border-radius: 8px; }.definition-card h3 { margin: 5px 0 10px; font-size: 13px; }.definition-card pre { max-height: 240px; overflow: auto; margin: 0; color: #36515e; font-size: 9px; line-height: 1.5; white-space: pre-wrap; }
.terminology-review { padding-bottom: 0; }.terminology-review .table-wrap { max-height: 680px; overflow: auto; }.terminology-review th:nth-child(1) { width: 20%; }.terminology-review th:nth-child(2) { width: 52%; }
.rules-hero { border-color: #9dccca; }
.start-panel { display: flex; align-items: center; justify-content: space-between; gap: 30px; border-left: 4px solid var(--teal); }
.start-panel p { max-width: 750px; margin: 8px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.start-sequence { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.start-sequence span { padding: 9px 10px; border-radius: 6px; color: #087f76; background: var(--teal-soft); font-size: 10px; font-weight: 750; }
.start-sequence b { color: #8aa0a8; }
.range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.range-card { padding: 21px; background: white; border: 1px solid var(--line); border-top: 4px solid #708792; border-radius: 10px; }
.range-card.traditional { border-top-color: var(--teal); }
.range-card.j-pull { border-top-color: var(--blue); }
.range-card.gola { border-top-color: var(--amber); }
.range-card-heading { display: flex; align-items: center; justify-content: space-between; }
.range-card-heading span { font-size: 17px; font-weight: 800; }
.range-card-heading strong { padding: 5px 7px; border-radius: 5px; background: #eef3f5; color: #637985; font-size: 9px; text-transform: uppercase; }
.range-card h3 { margin: 18px 0 6px; font-size: 11px; text-transform: capitalize; }
.range-card p { min-height: 38px; margin: 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.range-card dl { margin: 15px 0 0; }
.range-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 9px; }
.range-card dt { color: #71858e; }
.range-card dd { margin: 0; text-align: right; text-transform: capitalize; font-weight: 700; }
.rules-columns { grid-template-columns: 1fr 1fr; }
.precedence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.precedence-step { min-height: 65px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #f7fafb; }
.precedence-step span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: white; background: var(--teal); font-size: 9px; }
.precedence-step strong { display: block; margin-top: 8px; font-size: 9px; }
.sizing-card { margin-top: 12px; padding: 13px 15px; border-left: 3px solid var(--blue); background: #f7fafb; }
.sizing-card strong { text-transform: capitalize; font-size: 12px; }
.sizing-card p { margin: 5px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.5; }
.loading, .error-panel { padding: 40px; background: white; border: 1px solid var(--line); border-radius: 10px; }.error-panel span { display: block; margin-top: 7px; color: #a33; }
.work-centre-hero { border-color: #74aaa7; }.work-centre-principle { display: flex; align-items: center; justify-content: space-between; gap: 28px; border-left: 4px solid var(--teal); }.work-centre-principle p { max-width: 720px; margin: 7px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }.work-centre-principle code { color: #086f69; font-weight: 800; }.binding-example { display: grid; grid-template-columns: auto auto; gap: 5px 10px; min-width: 245px; padding: 14px; background: #eef7f6; border: 1px solid #abd2cf; border-radius: 8px; }.binding-example span { color: #6d848d; font-size: 8px; text-transform: uppercase; }.binding-example strong { color: #0a7770; font-size: 10px; }.binding-example b { grid-column: 1 / -1; color: #7d979f; }
.work-centre-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.work-centre-card { min-width: 0; padding: 17px; background: white; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 9px; }.work-centre-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; }.work-centre-heading > span { color: #56747f; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 8px; }.work-centre-card h3 { margin: 9px 0 7px; font-size: 13px; }.work-centre-card > strong, .work-centre-card > small { display: block; }.work-centre-card > strong { color: var(--teal); font-size: 16px; }.work-centre-card > small { margin-top: 3px; color: #71868f; font-size: 8px; }.work-centre-card h4 { margin: 13px 0 5px; color: #4d6872; font-size: 8px; text-transform: uppercase; }.work-centre-card ul { margin: 0; padding-left: 16px; color: var(--ink-soft); font-size: 9px; line-height: 1.55; }
.flow-grid { display: grid; gap: 12px; }.flow-card { display: grid; grid-template-columns: 0.8fr 2fr; gap: 20px; padding: 19px; background: white; border: 1px solid var(--line); border-radius: 9px; }.flow-card h3 { margin: 5px 0; font-size: 14px; }.flow-card p { margin: 0; color: var(--ink-soft); font-size: 9px; line-height: 1.5; }.flow-route { display: flex; align-items: center; justify-content: center; gap: 7px; }.flow-route > span { min-width: 105px; padding: 10px 8px; text-align: center; background: #edf6f5; border: 1px solid #c3dfdd; border-radius: 7px; }.flow-route > span.optional { background: #fff5db; border-color: #e8c66f; }.flow-route strong, .flow-route small { display: block; }.flow-route strong { font-size: 9px; }.flow-route small { margin-top: 4px; color: #6d828b; font-size: 7px; }.flow-route b { color: #8aa0a8; }.flow-guidance { grid-column: 1 / -1; display: flex; gap: 8px; }.flow-guidance span { padding: 5px 8px; color: #526e78; background: #f3f7f8; border-radius: 4px; font-size: 8px; }.routing-rules { margin-top: 16px; }.routing-rules th:first-child { width: 7%; }.routing-rules th:nth-child(2) { width: 25%; }.depth-warning { margin: 16px 0; }
@media (max-width: 1200px) { .work-centre-grid { grid-template-columns: repeat(2, 1fr); }.flow-card { grid-template-columns: 1fr; }.flow-route { flex-wrap: wrap; }.flow-guidance { grid-column: auto; flex-wrap: wrap; }.work-centre-principle { align-items: flex-start; flex-direction: column; } }
@media (max-width: 1200px) { .module-grid { grid-template-columns: repeat(2, 1fr); }.responsibility-grid { grid-template-columns: repeat(2, 1fr); }.start-panel, .review-entry { align-items: flex-start; flex-direction: column; }.range-grid { grid-template-columns: 1fr; }.review-metrics { grid-template-columns: repeat(3, 1fr); }.machining-grid { grid-template-columns: 1fr 1fr; }.bom-summary { grid-template-columns: repeat(4, 1fr); }.bom-process-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .cabinet-build-toolbar, .cabinet-build-heading { align-items: stretch; flex-direction: column; }.cabinet-build-actions { justify-content: flex-start; }.draft-state, .source-state-label { text-align: left; }.build-status-stack { padding: 14px 0 0; border-top: 1px solid rgb(255 255 255 / 24%); border-left: 0; }.cabinet-spec-strip { grid-template-columns: repeat(3, 1fr); }.bom-jump-links { grid-template-columns: 1fr; } }

.asset-test-toolbar { margin-bottom: 16px; }
.asset-test-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 24px; color: white; background: linear-gradient(110deg, #0d2c3a, #106965); border-radius: 10px 10px 0 0; }
.asset-test-heading h2 { margin: 5px 0; font-size: 22px; }
.asset-test-heading p { margin: 0; color: #c5dfdf; font-size: 10px; }
.asset-test-grid { display: grid; grid-template-columns: minmax(520px, 1.45fr) minmax(360px, .85fr); gap: 14px; margin-top: 14px; }
.dxf-viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: white; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 9px 9px; }
.asset-mode-tabs, .view-preset-buttons, .layer-controls { display: flex; align-items: center; gap: 5px; }
.asset-mode-tabs button, .view-preset-buttons button { padding: 7px 9px; color: #48646f; background: #f1f5f6; border: 1px solid #d1dfe2; border-radius: 5px; cursor: pointer; font-size: 8px; font-weight: 800; }
.asset-mode-tabs button.active, .view-preset-buttons button.active { color: white; background: #0a8279; border-color: #0a8279; }
.view-preset-buttons.disabled, .layer-controls.disabled { opacity: .35; pointer-events: none; }
.layer-controls label { color: #526b75; font-size: 8px; font-weight: 700; white-space: nowrap; }
.viewer-interaction-help { color: #607983; font-size: 8px; font-weight: 700; white-space: nowrap; }
.dxf-inspection-grid { grid-template-columns: minmax(620px, 1.6fr) minmax(420px, 1fr); }
.dxf-inspection-sidebar { display: grid; align-content: start; gap: 14px; min-width: 0; }
.part-picker-panel > label { display: block; margin-bottom: 6px; color: #607983; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.part-picker-panel > select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #b9ced2; border-radius: 6px; background: white; font-size: 10px; }
.part-inspection-heading { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 8px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.part-inspection-heading strong { font-size: 11px; }.part-inspection-heading span { color: #64808a; font-size: 9px; }
.machine-reference-list { margin: 0 0 12px; }.machine-reference-list div { display: grid; grid-template-columns: 95px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid #eef3f4; font-size: 8px; }.machine-reference-list dt { color: #789098; }.machine-reference-list dd { margin: 0; overflow-wrap: anywhere; color: #294954; font-weight: 700; }
.machining-detail-table { max-height: 260px; overflow: auto; }.machining-detail-table table { min-width: 650px; }.machining-detail-table th, .machining-detail-table td { padding: 6px 7px; font-size: 7px; white-space: nowrap; }
.machine-json-detail { margin-top: 10px; border: 1px solid #d8e4e6; border-radius: 6px; }.machine-json-detail summary { padding: 9px 10px; cursor: pointer; color: #176e69; font-size: 8px; font-weight: 800; }.machine-json-detail pre { max-height: 330px; overflow: auto; margin: 0; padding: 10px; color: #314d57; background: #f4f8f9; border-top: 1px solid #d8e4e6; font-size: 7px; line-height: 1.5; white-space: pre-wrap; }
.asset-viewer-panel { position: relative; min-height: 610px; overflow: hidden; background: #eef4f5; border: 1px solid var(--line); border-radius: 10px; }
#glb-test-canvas { display: block; width: 100%; height: 610px; cursor: grab; touch-action: none; }
#dxf-test-canvas { display: block; width: 100%; height: 610px; cursor: grab; touch-action: none; }
#dxf-test-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.cabinet-viewer-inspection-tooltip { position: absolute; z-index: 8; display: flex; flex-direction: column; width: min(260px, calc(100% - 16px)); gap: 2px; padding: 8px 10px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 5px; color: white; background: rgb(17 27 37 / 94%); box-shadow: 0 5px 18px rgb(0 0 0 / 24%); font-size: 10px; line-height: 1.35; pointer-events: none; }
.cabinet-viewer-inspection-tooltip[hidden] { display: none; }
#dxf-test-canvas[hidden], #glb-test-canvas[hidden] { display: none; }
#glb-test-canvas:active { cursor: grabbing; }
.asset-load-state { position: absolute; right: 12px; bottom: 12px; padding: 7px 10px; color: #315864; background: rgb(255 255 255 / 88%); border: 1px solid #c5dadd; border-radius: 6px; font-size: 9px; }
.asset-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0; }
.asset-metrics article { padding: 12px; background: #f1f7f7; border: 1px solid #d1e2e3; border-radius: 7px; }
.asset-metrics span, .asset-metrics strong, .asset-metrics small { display: block; }
.asset-metrics span { color: #6c8189; font-size: 8px; text-transform: uppercase; }
.asset-metrics strong { margin-top: 5px; color: #0a6f69; font-size: 12px; }
.asset-metrics small { margin-top: 3px; color: #779097; font-size: 8px; }
@media (max-width: 1200px) { .asset-test-grid { grid-template-columns: 1fr; }.asset-viewer-panel, #glb-test-canvas, #dxf-test-canvas { min-height: 500px; height: 500px; }.dxf-viewer-controls { align-items: flex-start; flex-direction: column; }.view-preset-buttons { flex-wrap: wrap; } }

.template-file-detail { padding: 28px 25px; }
.template-file-detail p { max-width: 760px; margin: 0 0 20px; color: var(--ink-soft); font-size: 11px; line-height: 1.65; }
.onlyoffice-editor-panel { height: max(720px, calc(100vh - 220px)); }

body.template-viewer-mode { min-width: 900px; overflow: hidden; }
.template-viewer-mode .app-shell { display: block; width: 100vw; height: 100vh; min-height: 0; }
.template-viewer-mode .sidebar, .template-viewer-mode .topbar { display: none; }
.template-viewer-mode main, .template-viewer-mode .content { width: 100%; height: 100%; min-height: 0; }
.template-viewer-mode .content { max-width: none; margin: 0; padding: 0; }
.template-viewer-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100vw; height: 100vh; background: white; }
.template-viewer-shell .template-command-ribbon { flex-wrap: wrap; min-height: 62px; }
.template-viewer-shell .template-command { white-space: nowrap; text-decoration: none; }
.template-viewer-shell .template-command[hidden] { display: none; }
.template-edit-dialog { width: min(520px, 90vw); padding: 24px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.template-edit-dialog::backdrop { background: rgb(10 30 40 / 55%); }
.template-edit-dialog label { display: block; margin-top: 14px; }
.template-edit-dialog input { display: block; width: 100%; padding: 10px; margin-top: 6px; border: 1px solid var(--line); border-radius: 6px; }
.template-edit-dialog [role=alert] { color: #9c2929; }
.template-command-ribbon { position: relative; z-index: 50; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 14px; color: white; background: linear-gradient(100deg, #0d2938, #0b615f); border-bottom: 1px solid #1f7774; box-shadow: 0 2px 9px rgb(7 39 52 / 24%); }
.template-viewer-brand { display: flex; align-items: center; gap: 9px; min-width: 225px; color: white; text-decoration: none; }
.template-viewer-brand .brand-mark { width: 36px; height: 36px; }
.template-viewer-brand strong, .template-viewer-brand small { display: block; }
.template-viewer-brand strong { font-size: 12px; letter-spacing: .14em; }
.template-viewer-brand small { margin-top: 2px; color: #afd0d0; font-size: 8px; }
.template-lookup { display: grid; grid-template-columns: auto minmax(260px, 430px); align-items: center; gap: 8px; flex: 1 1 480px; max-width: 590px; }
.template-lookup label { color: #b9d7d8; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.template-lookup input { width: 100%; height: 38px; padding: 0 62px 0 13px; color: var(--ink); background: white; border: 1px solid #89bdb9; border-radius: 6px; outline: none; font-size: 11px; }
.template-lookup input:focus { border-color: #62e0d3; box-shadow: 0 0 0 3px rgb(98 224 211 / 16%); }
.template-lookup-field { position: relative; min-width: 0; }
.template-directory-toggle { position: absolute; top: 5px; right: 5px; height: 28px; padding: 0 9px; color: #0b716b; background: #e3f5f3; border: 0; border-radius: 5px; cursor: pointer; font-size: 9px; font-weight: 850; }
.template-directory-toggle:hover { background: #c9efeb; }
.template-results { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 420px; overflow-y: auto; padding: 6px; background: white; border: 1px solid #8db8b7; border-radius: 7px; box-shadow: 0 14px 34px rgb(7 39 52 / 25%); }
.template-results[hidden], .template-result[hidden] { display: none; }
.template-directory-group[hidden] { display: none; }
.template-directory-group h4 { margin: 0; padding: 8px 11px; font-size: 11px; color: var(--teal); background: var(--teal-soft); }
.template-results.empty::after { display: block; padding: 13px; color: #6d828b; content: "No matching templates"; font-size: 10px; }
.template-result { display: grid; grid-template-columns: 62px 1fr auto; gap: 4px 10px; align-items: center; width: 100%; padding: 10px 11px; color: var(--ink); background: white; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.template-result:last-child { border-bottom: 0; }
.template-result:hover, .template-result:focus { background: var(--teal-soft); outline: none; }
.template-result span { grid-row: 1 / 3; color: var(--teal); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; font-weight: 850; }
.template-result strong { font-size: 10px; }
.template-result small { color: #6d828b; font-size: 8px; }
.template-command { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; color: white; background: #275162; border: 1px solid #507483; border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 800; }
.template-command:hover { background: #326779; }
.template-command.primary { color: #063e3a; background: #69e0d1; border-color: #69e0d1; }
.template-command.exit { background: #173847; }
.template-command:disabled { cursor: wait; opacity: .5; }
.template-command span { font-size: 15px; line-height: 1; }
.template-current { min-width: 220px; margin-left: auto; text-align: right; }
.template-current strong, .template-current small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.template-current strong { font-size: 10px; }
.template-current small { margin-top: 4px; color: #a9cecf; font-size: 8px; }
.template-viewer-shell .onlyoffice-editor-panel.fullscreen { width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 0; }
.template-viewer-shell .onlyoffice-loading { min-height: 0; }
@media (max-width: 1180px) { .template-current { display: none; }.template-viewer-brand { min-width: 195px; }.template-lookup { grid-template-columns: minmax(240px, 1fr); }.template-lookup label { display: none; } }

/* 3D asset inspection is a dedicated, viewport-sized workspace. */
body.asset-workspace-mode { min-width: 900px; overflow: hidden; }
.asset-workspace-mode .app-shell { display: block; width: 100vw; height: 100vh; min-height: 0; }
.asset-workspace-mode .topbar { display: none; }
.asset-workspace-mode main, .asset-workspace-mode .content { width: 100%; height: 100%; min-height: 0; }
.asset-workspace-mode .content { max-width: none; margin: 0; padding: 0; }
.asset-workspace-mode .sidebar { position: fixed; z-index: 220; inset: 0 auto 0 0; width: var(--shell-nav-width); transform: translateX(-100%); box-shadow: 10px 0 30px rgb(4 27 38 / 28%); transition: transform .2s ease; }
.asset-workspace-mode.asset-nav-open .sidebar { transform: translateX(0); }
.asset-nav-backdrop { position: fixed; z-index: 210; inset: 0; display: none; background: rgb(8 30 41 / 45%); border: 0; }
.asset-nav-open .asset-nav-backdrop { display: block; }
.asset-workspace-shell { display: grid; grid-template-rows: 62px 44px minmax(0, 1fr); width: 100vw; height: 100vh; background: #eaf0f2; }
.asset-command-ribbon { position: relative; z-index: 50; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 14px; color: white; background: linear-gradient(100deg, #0d2938, #0b615f); border-bottom: 1px solid #1f7774; box-shadow: 0 2px 9px rgb(7 39 52 / 24%); }
.asset-menu-toggle { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; color: white; background: #173f50; border: 1px solid #4b7482; border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 800; }
.asset-menu-toggle:hover, .asset-menu-toggle[aria-expanded="true"] { background: #245c6d; }
.asset-menu-toggle span { color: #64ded2; font-size: 16px; }
.asset-brand { min-width: 195px; }
.asset-cabinet-picker { display: grid; grid-template-columns: auto minmax(210px, 360px); align-items: center; gap: 8px; flex: 1 1 420px; max-width: 520px; }
.asset-cabinet-picker label { color: #b9d7d8; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.asset-cabinet-picker select { width: 100%; height: 38px; padding: 0 10px; color: var(--ink); background: white; border: 1px solid #89bdb9; border-radius: 6px; font-size: 10px; }
.asset-selected-sku { grid-column: 2; font-size: 11px; color: #d7f6f1; overflow-wrap: anywhere; }
.asset-cabinet-picker [hidden], #asset-variable-views[hidden] { display: none; }
.sku-search-picker { position: relative; grid-column: 1 / -1; width: 100%; }
.sku-search-picker input { width: 100%; padding: 10px 12px; border: 1px solid #89bdb9; border-radius: 6px; font-size: 13px; }
#asset-sku-results { position: absolute; z-index: 60; top: 100%; width: 100%; max-height: 55vh; overflow-y: auto; padding: 4px; background: white; border: 1px solid #89bdb9; box-shadow: 0 5px 15px #1234; }
#asset-sku-results button { display: block; width: 100%; padding: 9px 10px; text-align: left; color: var(--ink); background: white; border: 0; cursor: pointer; font-size: 13px; }
#asset-sku-results button:hover, #asset-sku-results button.active { background: var(--teal-soft); }
.sku-picker-status { display: block; color: #e0f4f2; font-size: 11px; }
.asset-cabinet-picker { row-gap: 3px; }
.asset-workspace-shell { grid-template-rows: auto 44px minmax(0, 1fr); }
.asset-list-sku { margin: 9px 0; padding: 8px; background: var(--teal-soft); color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.variable-part-row { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; }
.variable-part-row > input { margin: 5px; }
.variable-part-row .dxf-part-item { width: 100%; }
.variable-part-row.part-hidden .dxf-part-item { opacity: .45; }
.asset-command-ribbon .asset-mode-tabs button { height: 38px; padding-inline: 12px; background: #21495a; border-color: #507483; color: #d2e2e6; }
.asset-command-ribbon .asset-mode-tabs button.active { color: #063e3a; background: #69e0d1; border-color: #69e0d1; }
.asset-ribbon-actions { display: flex; gap: 7px; margin-left: auto; }
.asset-ribbon-actions .template-command { text-decoration: none; white-space: nowrap; }
.asset-sub-ribbon { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 5px 14px; background: white; border-bottom: 1px solid var(--line); box-shadow: 0 2px 7px rgb(13 41 56 / 7%); }
.asset-sub-ribbon > div:first-child { display: flex; align-items: center; gap: 8px; min-width: 175px; }
.asset-sub-ribbon > div:first-child > strong { font-size: 11px; }
.asset-sub-ribbon .validation-badge { padding: 4px 7px; font-size: 7px; }
.asset-sub-ribbon .viewer-interaction-help { margin-left: auto; }
.asset-part-visibility-controls { display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.asset-part-visibility-controls label { display:flex; align-items:center; gap:5px; color:#385762; font-size:9px; font-weight:750; white-space:nowrap; }
.asset-part-visibility-controls input { accent-color:#087f78; }
.asset-visibility-action { min-height:28px; padding:4px 9px; color:#075f5b; background:#e8f6f4; border:1px solid #add7d2; border-radius:5px; cursor:pointer; font-size:9px; font-weight:800; white-space:nowrap; }
.asset-visibility-action:hover { background:#d8efec; }
.asset-part-visibility-controls [hidden] { display:none; }
.asset-workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 10px; min-height: 0; padding: 10px; }
.asset-workspace-grid.bot-view-active { grid-template-columns: minmax(0,1fr); }
.asset-workspace-shell:has(.bot-view-active) { grid-template-rows:auto minmax(0,1fr); }
.asset-workspace-shell .asset-workspace-grid.bot-view-active .dxf-inspection-sidebar { display:none; }
.bot-view { box-sizing:border-box; display:flex; flex-direction:column; gap:6px; height:100%; overflow:auto; padding:14px; background:#f7f9fb; }
.bot-view > :not(.bot-view-image-stage) { flex-shrink:0; }
.bot-view[hidden], .asset-sub-ribbon[hidden] { display:none; }
.bot-view:fullscreen { width:100vw; height:100vh; }
.bot-view-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.bot-view button, .bot-view select { padding:7px 10px; }
.bot-view-provenance { font-size:13px; color:#526b78; }
.bot-view-thumbnails { display:flex; gap:8px; overflow-x:auto; padding:10px 0; }
.bot-view-thumbnails button { flex:0 0 115px; background:white; border:1px solid #cbd9de; border-radius:6px; }
.bot-view-thumbnails button[aria-pressed="true"] { border:2px solid #087f80; background:#e4f6f3; }
.bot-view-thumbnails img { display:block; width:90px; height:78px; object-fit:contain; margin:auto; }
.bot-view-thumbnails span { font-size:12px; }
.bot-view-image-stage { flex:1; min-height:160px; overflow:auto; border:1px solid #cbd9de; background:white; }
.bot-view-image-stage img { display:block; width:100%; max-width:100%; max-height:100%; height:100%; object-fit:contain; }
.asset-workspace-grid .asset-viewer-panel { min-height: 0; height: 100%; border-radius: 7px; }
.asset-workspace-grid #glb-test-canvas, .asset-workspace-grid #dxf-test-canvas { width: 100%; height: 100%; min-height: 0; }
.asset-workspace-grid .dxf-inspection-sidebar { grid-template-rows: minmax(0, 1fr) auto; gap: 10px; min-height: 0; }
.asset-workspace-grid .dxf-inspection-sidebar:has(.cart-image-controls) { display: flex; flex-direction: column; overflow-y: auto; }
.asset-workspace-grid .dxf-inspection-sidebar:has(.cart-image-controls) > * { flex-shrink: 0; }
.cart-image-controls { background: white; border: 1px solid var(--line); border-radius: 7px; }
.part-picker-panel { min-height: 0; overflow: hidden; padding: 14px; background: white; border: 1px solid var(--line); border-radius: 7px; }
.part-panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.part-panel-heading h2 { margin: 3px 0 0; font-size: 15px; }
.part-count { padding: 5px 8px; color: #087f76; background: var(--teal-soft); border-radius: 99px; font-size: 8px; font-weight: 800; }
.dxf-part-list { max-height: min(42vh, 390px); overflow-y: auto; border: 1px solid #dbe5e8; border-radius: 6px; }
.dxf-part-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) 25px; gap: 9px; align-items: center; width: 100%; min-height: 46px; padding: 7px 9px; color: var(--ink); background: white; border: 0; border-bottom: 1px solid #e6edef; cursor: pointer; text-align: left; }
.dxf-part-item:last-child { border-bottom: 0; }
.dxf-part-item:hover { background: #f3f8f8; }
.dxf-part-item.active { background: #e5f6f4; box-shadow: inset 3px 0 var(--teal); }
.dxf-part-item > span:nth-child(2), .dxf-part-item strong, .dxf-part-item small { display: block; min-width: 0; }
.dxf-part-item strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.dxf-part-item small { margin-top: 3px; color: #6b838d; font-size: 7px; }
.dxf-part-item b { display: grid; place-items: center; min-width: 23px; height: 23px; color: #476570; background: #edf3f4; border-radius: 50%; font-size: 7px; }
.part-role-mark { width: 7px; height: 29px; background: #43a5d5; border-radius: 4px; }
.part-role-mark[data-role="Back"] { background: #ee8d49; }
.part-role-mark[data-role="Bottom"], .part-role-mark[data-role="Solid top"] { background: #36af78; }
.part-role-mark[data-role="Decor front"] { background: #8e69cf; }
.part-summary { margin-top: 10px; padding: 10px; background: #f6f9fa; border: 1px solid #e0e9eb; border-radius: 6px; }
.part-summary .part-inspection-heading { margin: 0 0 8px; }
.part-dimension-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 8px; margin-bottom: 8px; padding: 8px; background: white; border-radius: 5px; }
.part-dimension-strip strong { color: #0b7770; font-size: 12px; }
.part-dimension-strip span { grid-row: 2; color: #748b94; font-size: 7px; }
.part-summary .machine-reference-list { margin-bottom: 0; }
.design-profile-panel { max-height: 38vh; overflow: auto; background: white; border: 1px solid var(--line); border-radius: 7px; }
.design-profile-panel > summary { padding: 11px 14px; color: #176e69; cursor: pointer; font-size: 9px; font-weight: 800; }
.design-profile-content { padding: 0 14px 14px; }
.design-profile-content h3 { margin: 2px 0 8px; font-size: 10px; }
.design-profile-content .asset-metrics { margin: 8px 0; }
@media (max-width: 1280px) {
  .asset-workspace-shell { grid-template-rows:auto auto minmax(0,1fr); }
  .asset-command-ribbon { flex-wrap:wrap; }
  .asset-ribbon-actions { flex-wrap:wrap; }
  .asset-brand { display: none; }
  .asset-cabinet-picker { max-width: 420px; }
  .asset-sub-ribbon .viewer-interaction-help { display: none; }
  .asset-sub-ribbon { flex-wrap:wrap; gap:6px 10px; }
  .asset-part-visibility-controls { margin-left:auto; }
  .asset-sub-ribbon .layer-controls { flex-wrap:wrap; }
}

/* Compact 100% browser-density contract. Preserve type legibility while
   recovering space from navigation, page gutters and oversized containers. */
.environment-card { padding: 10px; }
.module-hero { grid-template-columns: 58px 1fr auto; gap: 16px; padding: 20px 22px; margin-bottom: 12px; }
.large-module-icon { width: 52px; height: 52px; }
.module-hero h2 { font-size: 22px; }
.review-banner { gap: 20px; margin-bottom: 12px; padding: 19px 22px; }
.review-banner h2 { font-size: 21px; }
.review-metrics { padding: 13px 20px; }
.review-metrics div { padding: 9px; }
.review-section { padding: 16px 20px; }
.identity-strip { padding: 13px 20px; }
.definition-grid { padding: 16px 20px; }
.range-card, .work-centre-card { padding: 16px; }
.part-template-workspace { grid-template-columns: 235px minmax(0, 1fr); gap: 12px; }
.template-workspace { grid-template-columns: 260px minmax(0, 1fr); gap: 12px; }
.part-template-catalogue, .template-browser { top: calc(var(--topbar-height) + 12px); padding: 15px; }
.part-template-title { padding: 17px 20px; }
.field-group-grid { padding: 12px 20px; }
.cabinet-build-toolbar { gap: 18px; margin-bottom: 12px; padding: 14px 18px; }
.cabinet-build-toolbar select { padding-top: 9px; padding-bottom: 9px; }
.cabinet-build-heading { gap: 18px; padding: 19px 22px; }
.cabinet-build-heading h2 { font-size: 23px; }
.cabinet-spec-strip { margin-bottom: 12px; }
.cabinet-spec-strip > div { padding: 10px 13px; }
.cabinet-bom-section { scroll-margin-top: calc(var(--topbar-height) + 12px); }
.asset-test-heading { padding: 17px 20px; }
.template-command-ribbon { position: sticky; top: 0; }

/* The spreadsheet viewer owns the whole viewport; its command ribbon is the
   locked header and the general shell density must not reduce editor space. */
.template-viewer-mode .content { max-width: none; margin: 0; padding: 0; }

@media (max-width: 1280px) {
  :root { --shell-nav-width: 200px; --page-gutter: 16px; }
  .sidebar { padding-inline: 9px; }
  .nav-item { gap: 8px; padding-inline: 9px; font-size: 12px; }
  .source-pill { display: none; }
}

/* Packing sequence workspace */
.packing-toolbar { align-items: center; }
.packing-totals { min-width: 130px; padding-left: 22px; border-left: 1px solid var(--line); }
.packing-totals strong, .packing-totals span { display: block; }
.packing-totals strong { color: var(--teal); font-size: 28px; }
.packing-totals span { color: var(--ink-soft); font-size: 9px; }
.packing-heading { border-radius: 11px 11px 0 0; }
.packing-boundary { margin-bottom: 14px; border: 1px solid #c7dfdd; border-top: 0; border-radius: 0 0 9px 9px; }
.packing-sequence { display: grid; gap: 12px; }
.packing-slot-card { display: grid; grid-template-columns: 64px minmax(280px, .85fr) minmax(360px, 1.15fr); min-height: 230px; overflow: hidden; background: white; border: 1px solid var(--line); border-radius: 9px; }
.packing-step { display: grid; place-content: center; align-content: start; gap: 4px; padding-top: 22px; color: white; text-align: center; background: #176d63; }
.packing-step span { font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.packing-step strong { font-size: 25px; }
.packing-image { min-height: 230px; display: grid; place-items: center; padding: 12px; background: #eaf0f2; border-right: 1px solid var(--line); }
.packing-image img { display: block; max-width: 100%; max-height: 360px; object-fit: contain; }
.packing-image-missing { display: grid; justify-items: center; gap: 8px; max-width: 320px; padding: 26px; color: #6c5a30; text-align: center; background: #fff7e5; border: 1px dashed #d6b660; border-radius: 8px; }
.packing-image-missing strong { font-size: 12px; }
.packing-image-missing span { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; }
.packing-image-missing small { color: #826f43; font-size: 9px; line-height: 1.5; }
.packing-slot-detail { padding: 23px 25px; }
.packing-slot-detail h3 { margin: 7px 0 8px; font-size: 17px; }
.packing-slot-detail > p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.packing-slot-detail dl { margin: 18px 0 0; }
.packing-slot-detail dl div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 9px; }
.packing-slot-detail dt { color: #71858e; }
.packing-slot-detail dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.variable-workspace { display:grid; grid-template-columns:minmax(250px, 320px) minmax(0, 1fr); gap:20px; margin:20px 0; align-items:start; }
.variable-hero { grid-template-columns:minmax(0,1fr) auto; }
.variable-hero .primary-button, .variable-workspace .primary-button, .variable-dialog .primary-button { background:var(--teal); color:white; }
.variable-workspace .primary-button:disabled, .variable-dialog .primary-button:disabled { background:#8ca0a9; cursor:wait; }
.variable-list { max-height:760px; overflow:auto; }
.variable-layout {display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,3fr);gap:24px;margin-top:20px;}
#managed-detail {min-width:0;}
#managed-checkout input {display:block;width:100%;padding:10px;margin:10px 0;border:1px solid var(--line);border-radius:6px;}
#managed-changes td {overflow-wrap:anywhere;max-width:420px;}
@media(max-width:900px){.variable-layout{grid-template-columns:1fr;}}
.variable-list > label { display:block; font-size:12px; margin:12px 0 6px; }
.variable-list input, .variable-list select, .variable-fields input, .variable-fields select, #variable-form td input, #variable-form td select { width:100%; padding:10px; border:1px solid var(--line); border-radius:6px; background:white; color:var(--ink); font:inherit; box-sizing:border-box; }
.variable-record { display:flex; flex-direction:column; gap:5px; padding:13px 9px; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.variable-record:hover, .variable-record.selected { background:#e7f3f1; }
.variable-record strong { font-size:12px; }
.variable-record span, .variable-record small { font-size:11px; }
.variable-record small { color:#795928; }
.variable-assignment { margin:12px 0 20px; padding:14px 16px; border:1px solid var(--line); border-radius:6px; background:#f1f8f7; overflow-wrap:anywhere; }
.variable-assignment p { margin:6px 0; }
.variable-assigned-mappings { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:12px; }
.variable-assigned-mappings .variable-record { border:1px solid var(--line); border-radius:6px; }
.variable-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin:20px 0; }
.variable-fields label { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.variable-actions { display:flex; flex-wrap:wrap; gap:15px; align-items:center; margin:22px 0; }
.variable-actions button, .variable-actions select, .variable-dialog button, .variable-workspace button { cursor:pointer; padding:9px 14px; border:1px solid var(--line); border-radius:6px; }
.variable-dialog { width:min(1120px,94vw); max-height:94vh; padding:24px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:#fff; }
.variable-dialog::backdrop { background:rgba(15,35,48,.6); }
.variable-dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.variable-dialog h2 { font-size:21px; }
.variable-dialog pre { max-height:250px; overflow:auto; background:#f4f7f9; padding:12px; font-size:11px; }
.variable-dialog details { margin:18px 0; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
#variable-message { font-size:13px; color:#815b21; overflow-wrap:anywhere; }
@media(max-width:900px) { .variable-workspace {grid-template-columns:1fr;} .variable-list {max-height:300px;} .variable-fields {grid-template-columns:1fr;} }
@media (max-width: 900px) {
  .packing-slot-card { grid-template-columns: 54px 1fr; }
  .packing-slot-detail { grid-column: 1 / -1; }
  .packing-totals { padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}

[hidden]{display:none!important}

.asset-workspace-grid .dxf-inspection-sidebar:has(.diagnostic-build-notice){display:flex;flex-direction:column;overflow-y:auto}
.diagnostic-build-notice{padding:12px;border:1px solid #d9b76c;border-radius:6px;background:#fff7e6;color:#664b14;font-size:12px;flex-shrink:0}
.diagnostic-build-notice ul{padding-left:18px;max-height:180px;overflow:auto}
/* Shared asynchronous activity: centred in the viewport while work runs. */
#amosys-activity{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;z-index:100000;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 48px);padding:15px 20px;border:1px solid #b8dedb;border-radius:12px;background:#fff;color:#123c49;box-shadow:0 8px 30px #123c4926;font:600 14px system-ui;pointer-events:none}
#amosys-activity[hidden]{display:none}
#amosys-activity:has(.amosys-waiting[hidden]){display:none}
.template-viewer-shell{height:100dvh}
.template-viewer-shell:fullscreen{width:100vw;height:100dvh;background:white}
.template-view-tools{display:flex;align-items:center;gap:8px}
.template-pane-menu{position:relative}
.template-pane-menu summary{list-style:none}
.template-pane-menu summary::-webkit-details-marker{display:none}
.template-pane-options{position:absolute;right:0;top:calc(100% + 8px);width:300px;max-width:85vw;padding:14px;background:white;color:#17394a;border:1px solid #afc6d1;border-radius:8px;box-shadow:0 8px 24px #1234;font-size:13px}
.template-pane-options label{display:flex;align-items:center;gap:8px}
.template-pane-options input{width:80px;padding:6px}
.template-pane-options button{margin:10px 6px 0 0;padding:7px;cursor:pointer}
.template-pane-options p{line-height:1.4}
.template-viewer-shell .template-command-ribbon{min-height:48px;gap:7px;padding:6px 10px}
.template-viewer-shell .template-viewer-brand{min-width:0}
.template-viewer-shell .template-viewer-brand small{display:none}
.template-viewer-shell .template-lookup{flex:1;min-width:180px;max-width:360px;grid-template-columns:1fr}
.template-viewer-shell .template-lookup label{display:none}
.template-viewer-shell .template-current{min-width:0;flex-basis:100%;text-align:left}
.template-viewer-shell .template-current strong{display:none}
.template-viewer-shell .template-current small{font-size:11px;margin:0}
@media(max-width:1280px){.template-viewer-shell .template-viewer-brand{display:none}.template-viewer-shell .template-current{display:block}.template-viewer-shell .template-command{padding:0 9px}}

/* Keep the home link visible while expanded navigation folders scroll. */
@media(min-width:601px){
 .sidebar{height:100dvh;min-height:0;overflow:hidden}
 .sidebar>.brand,.sidebar>.environment-card{flex-shrink:0}
 .sidebar #primary-navigation{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;align-content:start;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#587786 transparent;padding-bottom:12px}
 .sidebar #primary-navigation>a[href="#overview"]{position:sticky;top:0;z-index:2;background:var(--navy)}
 .sidebar #primary-navigation>a[href="#overview"].active{background:#1b4658}
}