:root {
  --dlc-ink: #13283b;
  --dlc-muted: #617184;
  --dlc-border: #dce4ed;
  --dlc-surface: #ffffff;
  --dlc-soft: #f4f7fb;
  --dlc-blue: #265d95;
  --dlc-blue-deep: #173d68;
  --dlc-accent: #0d8d81;
  --dlc-shadow: 0 18px 45px rgba(20, 47, 76, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.dlc-body {
  margin: 0;
  color: var(--dlc-ink);
  background: #f6f8fb;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.dlc-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.dlc-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid rgba(19, 40, 59, .09); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.dlc-header-row { display: flex; align-items: center; justify-content: space-between; min-height: 70px; gap: 18px; }
.dlc-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--dlc-ink); font-weight: 760; letter-spacing: -.02em; text-decoration: none; }
.dlc-brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #fff; background: var(--dlc-blue); font-size: 18px; }
.dlc-brand small { display: block; margin-top: -2px; color: var(--dlc-muted); font-size: .68rem; font-weight: 550; letter-spacing: .01em; }
.dlc-header-links { display: flex; gap: 22px; color: var(--dlc-muted); font-size: .9rem; }
.dlc-header-links a { text-decoration: none; }
.dlc-header-links a:hover { color: var(--dlc-blue); }
.dlc-hero { padding: 76px 0 48px; background: radial-gradient(circle at 87% 5%, rgba(38, 93, 149, .14), transparent 30%), linear-gradient(180deg, #fff 0%, #f8fbff 100%); border-bottom: 1px solid #e8eef5; }
.dlc-eyebrow, .dlc-card-kicker { margin: 0 0 9px; color: var(--dlc-blue); font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.dlc-hero h1 { max-width: 820px; margin: 0; font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -.055em; }
.dlc-hero p:not(.dlc-eyebrow) { max-width: 710px; margin: 20px 0 0; color: var(--dlc-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.dlc-tool-section { padding: 38px 0 62px; }
.dlc-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); align-items: start; gap: 24px; }
.dlc-card { border: 1px solid var(--dlc-border); border-radius: 20px; background: var(--dlc-surface); box-shadow: var(--dlc-shadow); }
.dlc-assembly-card { overflow: hidden; }
.dlc-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 26px 28px 20px; border-bottom: 1px solid #e8edf2; }
.dlc-card-heading h2, .dlc-summary-card h2, .dlc-note-card h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.025em; }
.dlc-card-heading p { max-width: 650px; margin: 7px 0 0; color: var(--dlc-muted); font-size: .92rem; }
.dlc-unit-switch { display: inline-flex; flex: 0 0 auto; padding: 4px; border: 1px solid #d7e1ed; border-radius: 10px; background: var(--dlc-soft); }
.dlc-unit-switch button { padding: 7px 10px; border: 0; border-radius: 7px; color: var(--dlc-muted); background: transparent; font-size: .8rem; font-weight: 700; }
.dlc-unit-switch button.is-active { color: var(--dlc-blue-deep); background: #fff; box-shadow: 0 1px 3px rgba(15, 43, 72, .15); }
.dlc-context-row { display: grid; grid-template-columns: 1.5fr .72fr; gap: 15px; padding: 20px 28px; background: #fcfdff; border-bottom: 1px solid #e8edf2; }
.dlc-context-field { display: grid; gap: 7px; color: var(--dlc-ink); font-size: .82rem; font-weight: 760; }
.dlc-context-field em { color: var(--dlc-muted); font-style: normal; font-weight: 500; }
.dlc-context-field input, .dlc-layer-table input, .dlc-layer-table select { width: 100%; min-height: 40px; border: 1px solid #ced9e5; border-radius: 8px; outline: 0; color: var(--dlc-ink); background: #fff; padding: 8px 10px; font-size: .88rem; transition: border-color .15s ease, box-shadow .15s ease; }
.dlc-context-field input:focus, .dlc-layer-table input:focus, .dlc-layer-table select:focus { border-color: #6a9ccd; box-shadow: 0 0 0 3px rgba(38,93,149,.12); }
.dlc-input-unit { display: flex; align-items: stretch; }
.dlc-input-unit input { border-radius: 8px 0 0 8px; }
.dlc-input-unit b { display: grid; min-width: 42px; place-items: center; border: 1px solid #ced9e5; border-left: 0; border-radius: 0 8px 8px 0; color: var(--dlc-muted); background: #f3f6f9; font-size: .78rem; }
.dlc-hidden { display: none !important; }
.dlc-quick-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 28px; border-bottom: 1px solid #e8edf2; background: #f9fbfd; }
.dlc-quick-add span { margin-right: 2px; color: var(--dlc-muted); font-size: .83rem; font-weight: 700; }
.dlc-quick-add button { border: 1px solid #d5e0eb; border-radius: 999px; color: var(--dlc-blue-deep); background: #fff; padding: 6px 10px; font-size: .78rem; font-weight: 760; }
.dlc-quick-add button:hover { border-color: #8fb3d6; background: #eff6fd; }
.dlc-layer-table-wrap { overflow-x: auto; }
.dlc-layer-table { width: 100%; min-width: 800px; border-collapse: collapse; }
.dlc-layer-table th { padding: 13px 12px; border-bottom: 1px solid #dfe7ee; color: #718195; background: #fbfcfe; font-size: .69rem; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.dlc-layer-table th:first-child, .dlc-layer-table td:first-child { padding-left: 28px; }
.dlc-layer-table th:last-child, .dlc-layer-table td:last-child { padding-right: 24px; text-align: right; }
.dlc-layer-table td { padding: 11px 12px; vertical-align: top; border-bottom: 1px solid #ebeff4; }
.dlc-layer-table tbody tr:last-child td { border-bottom: 0; }
.dlc-layer-name { min-width: 138px; font-weight: 650; }
.dlc-layer-material { min-width: 148px; }
.dlc-layer-measure { min-width: 105px; }
.dlc-row-helper { display: block; margin-top: 5px; color: #7a899a; font-size: .7rem; line-height: 1.25; }
.dlc-load-value { display: block; min-width: 105px; padding-top: 10px; color: var(--dlc-blue-deep); font-size: .88rem; font-weight: 800; white-space: nowrap; }
.dlc-layer-row.is-direct { background: linear-gradient(90deg, rgba(13,141,129,.045), transparent 50%); }
.dlc-row-actions { display: inline-flex; justify-content: flex-end; gap: 3px; }
.dlc-icon-button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid transparent; border-radius: 7px; color: #687a8c; background: transparent; font-size: 1rem; }
.dlc-icon-button:hover { border-color: #d9e2eb; color: var(--dlc-blue); background: #f4f8fc; }
.dlc-icon-button[disabled] { cursor: not-allowed; opacity: .35; }
.dlc-icon-button.delete:hover { border-color: #f0caca; color: #af3434; background: #fff4f4; }
.dlc-layer-actions { display: flex; justify-content: space-between; gap: 14px; padding: 22px 28px 26px; border-top: 1px solid #e8edf2; }
.dlc-secondary-button, .dlc-primary-button { min-height: 43px; border-radius: 9px; padding: 0 16px; font-size: .88rem; font-weight: 760; }
.dlc-secondary-button { border: 1px solid #c9d8e8; color: var(--dlc-blue-deep); background: #fff; }
.dlc-secondary-button:hover { background: #f2f7fc; }
.dlc-primary-button { border: 1px solid var(--dlc-blue); color: #fff; background: var(--dlc-blue); box-shadow: 0 8px 16px rgba(38,93,149,.18); }
.dlc-primary-button:hover { background: var(--dlc-blue-deep); }
.dlc-summary-column { display: grid; gap: 18px; position: sticky; top: 91px; }
.dlc-summary-card { padding: 27px; background: linear-gradient(145deg, #fff 0%, #eef6ff 100%); }
.dlc-summary-card h2 { font-size: 1.32rem; }
.dlc-total-load { margin: 21px 0 14px; padding-bottom: 20px; border-bottom: 1px solid rgba(38,93,149,.15); }
.dlc-total-load strong { display: block; color: var(--dlc-blue-deep); font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1; letter-spacing: -.05em; }
.dlc-total-load span { display: block; margin-top: 9px; color: #53718e; font-size: .87rem; font-weight: 700; }
.dlc-summary-text { margin: 0 0 17px; color: var(--dlc-muted); font-size: .9rem; }
.dlc-summary-breakdown { margin: 0; }
.dlc-summary-breakdown div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(38,93,149,.11); }
.dlc-summary-breakdown dt { color: var(--dlc-muted); font-size: .82rem; }
.dlc-summary-breakdown dd { margin: 0; color: var(--dlc-ink); font-size: .87rem; font-weight: 800; text-align: right; }
.dlc-note-card { padding: 23px 25px; box-shadow: none; background: #fffdf8; border-color: #efe0bb; }
.dlc-note-card h2 { font-size: 1rem; }
.dlc-note-card p { margin: 9px 0 0; color: #6f6651; font-size: .85rem; }
.dlc-details-section { padding: 56px 0 64px; border-top: 1px solid #e4ebf2; background: #fff; }
.dlc-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.dlc-info-grid h2 { margin: 0; font-size: 1.18rem; line-height: 1.2; letter-spacing: -.025em; }
.dlc-info-grid p:not(.dlc-eyebrow) { margin: 10px 0 0; color: var(--dlc-muted); font-size: .92rem; }
.dlc-footer { padding: 28px 0; color: #b8c5d0; background: #13283b; }
.dlc-footer .dlc-shell { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.dlc-footer p { max-width: 700px; margin: 0; font-size: .82rem; }
.dlc-footer a { flex: 0 0 auto; color: #fff; font-size: .86rem; font-weight: 750; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 960px) { .dlc-layout { grid-template-columns: 1fr; } .dlc-summary-column { position: static; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr); } }
@media (max-width: 700px) { .dlc-shell { width: min(100% - 28px, 1180px); } .dlc-header-row { min-height: 62px; } .dlc-header-links { display: none; } .dlc-hero { padding: 52px 0 35px; } .dlc-card-heading { flex-direction: column; padding: 21px 19px 17px; } .dlc-context-row { grid-template-columns: 1fr; padding: 16px 19px; } .dlc-quick-add { padding: 13px 19px; } .dlc-layer-table th:first-child, .dlc-layer-table td:first-child { padding-left: 19px; } .dlc-layer-actions { flex-direction: column-reverse; padding: 18px 19px 21px; } .dlc-primary-button, .dlc-secondary-button { width: 100%; } .dlc-summary-column { grid-template-columns: 1fr; } .dlc-summary-card, .dlc-note-card { padding: 22px 20px; } .dlc-info-grid { grid-template-columns: 1fr; gap: 28px; } .dlc-footer .dlc-shell { flex-direction: column; align-items: flex-start; } }