:root { color-scheme: light; --line: #d7dde5; --muted: #64748b; --bg: #f6f7f9; --ink: #18202c; --accent: #1f7668; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--ink); }
header { background: #ffffff; border-bottom: 1px solid var(--line); }
.wrap { width: min(1360px, calc(100% - 32px)); margin: 0 auto; }
.top { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.brand-logo { display: block; width: auto; height: 34px; }
.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
nav { display: flex; flex-wrap: wrap; gap: 10px; }
nav a, .button { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; border-radius: 6px; font-weight: 500; }
nav a:hover, .button:hover { border-color: var(--accent); color: var(--accent); }
.action-menu, .user-menu { position: relative; }
.action-menu summary, .user-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font-weight: 500; }
.action-menu summary::-webkit-details-marker, .user-menu summary::-webkit-details-marker { display: none; }
.action-menu summary::after, .user-menu summary::after { content: "⌄"; color: var(--muted); font-size: 14px; }
.action-menu[open] summary, .user-menu[open] summary { border-color: var(--accent); color: var(--accent); }
.dropdown { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); }
.dropdown a, .dropdown button { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 6px; background: #fff; color: var(--ink); text-align: left; text-decoration: none; font: inherit; font-weight: 500; cursor: pointer; }
.dropdown a:hover, .dropdown button:hover { background: #eef6f4; color: var(--accent); }
.dropdown form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
form.inline-form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
main { padding: 24px 0 48px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: -8px 0 14px; color: #7c8da3; font-size: 12px; font-weight: 500; line-height: 1.4; }
.breadcrumbs__item { display: inline-flex; align-items: center; min-width: 0; }
.breadcrumbs__separator { margin: 0 6px; color: #94a3b8; }
.breadcrumbs__link { color: var(--muted); text-decoration: none; }
.breadcrumbs__link:hover { color: #475569; text-decoration: underline; text-underline-offset: 2px; }
.breadcrumbs__current { color: #7c8da3; }
h1 { margin: 0 0 18px; font-size: 28px; letter-spacing: 0; }
h2 { margin: 28px 0 12px; font-size: 20px; letter-spacing: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.page-head .actions { margin: 0; justify-content: flex-end; }
.page-title { margin: 0; }
.filters { display: grid; grid-template-columns: minmax(220px, 380px) minmax(130px, 170px) minmax(130px, 170px) minmax(96px, 120px) auto; gap: 7px; align-items: end; justify-content: start; max-width: none; margin: 0 0 12px; padding: 8px 10px; border-color: #dfe5ec; background: #fbfcfd; }
.stock-filters { grid-template-columns: minmax(220px, 340px) minmax(120px, 150px) minmax(130px, 160px) minmax(96px, 120px) minmax(130px, 155px) auto; }
.filters label { margin-bottom: 3px; color: #718096; font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.filters .button { justify-content: center; gap: 6px; min-height: 32px; padding: 0 9px; font-size: 13px; white-space: nowrap; }
.filters input, .filters select { min-height: 32px; padding: 5px 8px; font-size: 13px; }
.filters__clear .app-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.filter-count { margin: 0 0 9px; color: var(--muted); font-size: 13px; }
.stock-attention { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #dfe5ec; border-radius: 8px; background: #fbfcfd; }
.stock-attention__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.stock-attention__eyebrow { display: block; margin-bottom: 2px; color: #7c8da3; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.stock-attention h2 { margin: 0; color: #334155; font-size: 15px; font-weight: 650; letter-spacing: 0; }
.stock-attention__count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border: 1px solid #d7dde5; border-radius: 999px; background: #fff; color: #64748b; font-size: 12px; font-weight: 650; }
.stock-attention__sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stock-attention__section { min-width: 0; padding: 8px; border: 1px solid #e6ebf1; border-radius: 7px; background: #fff; }
.stock-attention__section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.stock-attention__section-head h3 { display: flex; align-items: center; gap: 4px; margin: 0; color: #334155; font-size: 13px; font-weight: 650; letter-spacing: 0; }
.stock-attention__section-head > div > span { display: block; margin-top: 1px; color: #7c8da3; font-size: 11px; line-height: 1.2; }
.stock-attention__section-head > strong { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 11px; font-weight: 650; }
.stock-attention__section--purchase .stock-attention__section-head > strong { background: #fff7ed; color: #b45309; }
.stock-attention__section--project .stock-attention__section-head > strong { background: #eef8f5; color: var(--accent); }
.stock-attention__list { display: grid; gap: 6px; }
.stock-attention__item { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; min-width: 0; padding: 7px 8px; border: 1px solid #e3e8ef; border-radius: 7px; background: #fff; color: var(--ink); text-decoration: none; }
.stock-attention__item:hover { border-color: #b9d8d2; background: #f7fbfa; }
.stock-attention__item strong { overflow: hidden; color: #1f2937; font-size: 13px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.stock-attention__item span:last-child { grid-column: 2; overflow: hidden; color: #64748b; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.stock-attention__tag { align-self: start; min-width: 70px; padding-top: 1px; color: #7c8da3; font-size: 10px; font-weight: 750; letter-spacing: .04em; line-height: 1.25; text-transform: uppercase; }
.stock-attention__item--stock .stock-attention__tag { color: #b45309; }
.stock-attention__item--reservation .stock-attention__tag { color: #6b7280; }
.stock-attention__item--project .stock-attention__tag { color: var(--accent); }
.stock-attention__empty { margin: 0; padding: 7px 8px; color: #9aa6b5; font-size: 12px; }
@media (max-width: 980px) { .stock-attention__sections { grid-template-columns: 1fr; } }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 18px; }
.detail-grid .detail-item.is-primary { border-color: #b7dfd6; background: #f4fbf9; }
.detail-item { background: #fff; border: 1px solid var(--line); padding: 12px; }
.detail-item span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; }
.detail-item strong { font-size: 20px; font-weight: 600; }
.autocomplete { position: relative; }
.autocomplete-list { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14); }
.autocomplete-list.is-open { display: block; }
.autocomplete-option { display: block; width: 100%; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 0; background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.autocomplete-option:hover { background: #eef6f4; color: var(--accent); }
.autocomplete-option span { display: block; color: var(--muted); font-size: 12px; }
.autocomplete-input-wrap { position: relative; display: block; width: 100%; }
.autocomplete--clearable input[data-autocomplete-text] { padding-right: 36px; }
.autocomplete-clear-button { position: absolute; right: 7px; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-height: 0; padding: 0; border: 1px solid #f0b9b3; border-radius: 999px; background: #fff4f2; color: #b42318; cursor: pointer; transform: translateY(-50%); }
.autocomplete-clear-button[hidden] { display: none; }
.autocomplete-clear-button:hover, .autocomplete-clear-button:focus { border-color: #b42318; background: #fee4e2; color: #8f1f17; }
.autocomplete-clear-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.new-material-fields { margin: 0 0 14px; }
.new-material-fields.is-hidden { display: none; }
.table-wrap { overflow-x: auto; }
.stock-table { min-width: 760px; table-layout: fixed; font-size: 13px; }
.stock-table th, .stock-table td { padding: 6px 10px; vertical-align: middle; line-height: 1.18; }
.stock-table th { font-size: 11px; line-height: 1.1; }
.stock-col-material { width: 34%; }
.stock-col-category { width: 15%; }
.stock-col-locations { width: 34%; }
.stock-col-quantity { width: 17%; }
.stock-table tbody tr { transition: background-color .14s ease, box-shadow .14s ease; }
.stock-table tbody tr:hover td { background: #f3faf8; }
.stock-table tbody tr:hover .stock-material-link { color: var(--accent); }
.stock-table td:first-child { font-weight: 500; }
.stock-cell-material, .stock-cell-category, .stock-cell-locations { min-width: 0; }
.stock-material-link { display: block; max-width: 100%; overflow: hidden; color: var(--ink); text-decoration: none; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.stock-material-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.stock-filter-link { display: block; max-width: 100%; overflow: hidden; color: #334155; text-decoration: none; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.stock-filter-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.stock-table .quantity { white-space: nowrap; font-variant-numeric: tabular-nums; }
.stock-cell-quantity { overflow: visible; }
.stock-quantity-value { display: inline-block; vertical-align: middle; }
.stock-reservation-alert { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 6px; border: 1px solid #fed7aa; border-radius: 999px; background: #fff7ed; color: #b45309; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; cursor: help; }
.stock-reservation-alert::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 40; width: max-content; max-width: 220px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14); color: #334155; font-size: 12px; font-weight: 600; line-height: 1.2; opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(2px); transition: opacity .12s ease, transform .12s ease, visibility .12s ease; visibility: hidden; }
.stock-reservation-alert::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); z-index: 41; width: 8px; height: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; opacity: 0; pointer-events: none; transform: translateX(-50%) rotate(45deg); transition: opacity .12s ease, visibility .12s ease; visibility: hidden; }
.stock-reservation-alert:hover::after, .stock-reservation-alert:focus::after, .stock-reservation-alert:hover::before, .stock-reservation-alert:focus::before { opacity: 1; visibility: visible; }
.stock-reservation-alert:hover::after, .stock-reservation-alert:focus::after { transform: translateX(-50%) translateY(0); }

.stock-location-list { display: flex; flex-wrap: wrap; gap: 2px 7px; align-items: center; min-width: 0; }
.stock-location-chip, .stock-location-muted { color: #64748b; font-size: 11.5px; font-weight: 500; line-height: 1.15; }
.stock-location-chip { display: inline-block; max-width: 118px; overflow: hidden; text-decoration: none; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; }
.stock-location-chip:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.stock-table .reservation-badge, .stock-table .status-badge { min-height: 18px; padding: 0 6px; font-size: 11px; }
.reservation-badge, .reservation-chip { border-color: #f0c36f; background: #fff8e7; color: #9a5b00; }
.reservation-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid #f0c36f; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; }
.reservation-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 230px; }
.reservation-actions form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.reservation-actions button { min-height: 31px; padding: 0 9px; font-size: 12px; }
.status-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.status-badge.ok { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); }
.status-badge.warn { border-color: #f0c36f; background: #fff8e7; color: #9a5b00; }
.status-badge.info { border-color: #bfd7f5; background: #eef6ff; color: #1d4f8f; }
.status-badge.empty { border-color: #e4a8a2; background: #fff5f4; color: #b42318; }

.status-badge.status-badge--muted { border-color: var(--line); background: var(--surface-muted, #f8fafc); color: var(--muted); }
.material-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.movement-summary { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: #fff; color: #334155; }
.messages { margin: 0 0 16px; padding: 0; list-style: none; }
.messages li { padding: 10px 12px; border: 1px solid var(--line); background: #fff; border-left: 4px solid var(--accent); margin-bottom: 8px; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #eef2f6; font-size: 13px; text-transform: uppercase; color: #334155; }
tr:last-child td { border-bottom: 0; }
form { max-width: 760px; background: #fff; border: 1px solid var(--line); padding: 16px; }
form p { margin: 0 0 14px; }
label { display: block; margin-bottom: 5px; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; font: inherit; }
input[type="checkbox"] { width: auto; min-height: auto; }
button { min-height: 38px; padding: 0 14px; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 6px; font-weight: 700; cursor: pointer; }
.movement-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(15, 23, 42, 0.38); }
.movement-modal[hidden] { display: none; }
.movement-modal__dialog { width: min(620px, 100%); max-height: min(86vh, 820px); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24); }
.movement-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.movement-modal__head h2 { margin: 0; font-size: 18px; }
.app-modal--receive .movement-modal__head h2 { color: #475569; font-size: 17px; font-weight: 600; }
.movement-modal__body { max-height: calc(min(86vh, 820px) - 58px); overflow-y: auto; padding: 16px; }
.movement-modal__body form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.movement-modal__close, .movement-modal .button { border-color: var(--line); background: #fff; color: var(--ink); }
.movement-modal__close:hover, .movement-modal .button:hover { border-color: var(--accent); color: var(--accent); }
.modal-form-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.modal-error { margin: 0; color: #b42318; }
.return-stock-form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; display: grid; gap: 9px; font-size: 13px; }
.return-stock-form p { margin: 0; }
.return-stock-form label { margin-bottom: 4px; color: #334155; font-size: 12px; font-weight: 750; line-height: 1.2; }
.return-stock-form input:not([type="radio"]):not([type="hidden"]), .return-stock-form select, .return-stock-form textarea { width: 100%; min-height: 34px; padding: 6px 9px; border: 1px solid #d7dde5; border-radius: 6px; font: inherit; font-size: 13px; }
.return-stock-intro { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fbfcfd; color: #334155; }
.return-stock-intro strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.return-stock-intro span { flex: 0 0 auto; color: var(--accent); font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.return-stock-errors { padding: 9px 10px; border: 1px solid #fecaca; border-radius: 7px; background: #fff5f5; color: #991b1b; font-size: 13px; }
.return-stock-errors ul { margin: 0; padding-left: 18px; }
.return-stock-summary { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 6px; margin: 0; }
.return-stock-summary div { min-width: 0; padding: 7px 9px; border: 1px solid #e1e7ef; border-radius: 6px; background: #fff; }
.return-stock-summary dt { margin: 0 0 2px; color: #64748b; font-size: 9px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.return-stock-summary dd { margin: 0; overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.return-mode-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border: 1px solid #dfe6ee; border-radius: 8px; background: #f8fafc; }
.return-mode-choice__item { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 34px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 6px; background: transparent; color: #475569; cursor: pointer; }
.return-mode-choice__item input[type="radio"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.return-mode-choice__item span { position: absolute; inset: 0; z-index: 2; display: flex; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; padding: 0 9px; border-radius: 6px; color: inherit; pointer-events: none; }
.return-mode-choice__item strong { overflow: hidden; color: inherit; font-size: 13px; font-weight: 850; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.return-mode-choice__item small { overflow: hidden; color: #64748b; font-size: 9.5px; font-weight: 850; letter-spacing: .035em; line-height: 1.1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.return-mode-choice__item input[type="radio"]:checked + span { background: #fff; color: var(--accent); box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }
.return-mode-choice__item input[type="radio"]:checked + span small { color: #2f7d71; }
.return-mode-choice__item input[type="radio"]:focus-visible + span { outline: 2px solid rgba(31, 118, 104, .24); outline-offset: 1px; }
.return-stock-grid { display: grid; grid-template-columns: minmax(130px, .45fr) minmax(220px, 1fr); gap: 8px; align-items: start; }
.return-stock-grid--three { grid-template-columns: minmax(115px, .7fr) minmax(155px, 1fr) minmax(110px, .65fr); }
.return-stock-quantity { min-width: 0; }
.return-stock-limit { display: block; margin-top: 4px; color: #64748b; font-size: 11.5px; font-weight: 700; }
.return-mode-panel { display: grid; gap: 8px; padding: 9px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fbfcfd; }
.return-mode-panel[hidden] { display: none; }
.return-mode-panel > strong { color: var(--ink); font-size: 13px; line-height: 1.2; }
.return-mode-panel > .muted { margin-top: -2px; font-size: 12px; line-height: 1.3; }
.return-mode-panel .autocomplete > .muted { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.25; }

.return-stock-warning { margin: 0; padding: 7px 9px; border: 1px solid #f0d49b; border-radius: 6px; background: #fff8e8; color: #7a4d0b; font-size: 12px; font-weight: 700; line-height: 1.3; }
.movement-line-role { display: inline-flex; align-items: center; min-height: 18px; margin-left: 5px; padding: 0 6px; border: 1px solid #dbe5ee; border-radius: 999px; background: #f8fafc; color: #64748b; font-size: 10.5px; font-weight: 800; line-height: 1; white-space: nowrap; }
.return-stock-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 0; padding-top: 2px; }
.return-stock-actions button { min-height: 34px; padding: 0 12px; font-size: 13px; }
.return-stock-actions button[type="submit"] { min-width: 136px; }
.return-stock-form .field-label-with-help { margin-bottom: 4px; }
.return-stock-form .field-help { width: 15px; height: 15px; min-height: 15px; padding: 0; }
@media (max-width: 640px) {
  .return-stock-intro { align-items: flex-start; flex-direction: column; gap: 4px; }
  .return-stock-intro strong, .return-stock-intro span { white-space: normal; }
  .return-stock-summary, .return-stock-grid, .return-stock-grid--three, .return-mode-choice { grid-template-columns: 1fr; }
  .return-stock-summary dd { white-space: normal; }
  .return-mode-choice__item span { flex-wrap: wrap; }
}
.quantity-stepper { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 14px; }
.quantity-stepper__field { width: min(170px, 100%); }
.quantity-stepper__buttons { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; }
.quantity-stepper__buttons button { min-height: 32px; padding: 0 9px; border-color: var(--line); background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }
.quantity-stepper__buttons button:hover { border-color: var(--accent); color: var(--accent); }
.muted { color: var(--muted); }

.correction-page { width: min(720px, 100%); }
.correction-form { display: grid; gap: 12px; width: 100%; max-width: 720px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 13px; }
.movement-modal__body .correction-form { padding: 0; border: 0; border-radius: 0; }
.correction-form__intro { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--info-border); border-radius: 7px; background: color-mix(in srgb, var(--info-bg) 76%, var(--surface)); }
.correction-form__intro strong { color: var(--heading); font-size: 13.5px; line-height: 1.25; }
.correction-form__intro span { color: var(--muted-strong); font-size: 12px; line-height: 1.4; }
.correction-form__errors { padding: 9px 10px; border: 1px solid var(--bad-border); border-radius: 7px; background: var(--bad-bg); color: var(--bad); font-weight: 650; line-height: 1.35; }
.correction-form__errors .errorlist, .correction-form .errorlist { margin: 0; padding-left: 18px; color: var(--bad); font-size: 12px; }
.correction-form__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(180px, .75fr); gap: 10px; align-items: start; }
.correction-field { min-width: 0; }
.correction-field label { margin: 0 0 4px; color: var(--heading); font-size: 12px; font-weight: 750; line-height: 1.2; }
.correction-field input:not([type="hidden"]), .correction-field select, .correction-field textarea { width: 100%; min-height: 36px; padding: 7px 9px; border-color: var(--input-border); border-radius: 6px; background: var(--input-bg); color: var(--input-text); font-size: 13px; }
.correction-field textarea { min-height: 64px; resize: vertical; }
.correction-field__help { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.correction-stock { padding: 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-soft); }
.correction-stock[hidden], .correction-preview[hidden] { display: none; }
.correction-stock__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.correction-stock__heading > span { color: var(--heading); font-size: 12px; font-weight: 750; }
.correction-stock__heading small { color: var(--muted); font-size: 11px; font-weight: 650; }
.correction-stock__values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.correction-stock__values > div { min-width: 0; padding: 7px 9px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--surface); }
.correction-stock__values span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .035em; line-height: 1.15; text-transform: uppercase; }
.correction-stock__values strong { display: flex; align-items: baseline; gap: 4px; overflow-wrap: anywhere; color: var(--heading); font-size: 16px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.correction-stock__values strong span { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; }
.correction-stock__values strong small { color: var(--muted); font-size: 11px; font-weight: 650; }
.correction-field--actual { width: min(280px, 100%); }
.correction-quantity-input { display: flex; align-items: stretch; }
.correction-field .correction-quantity-input input { min-width: 0; border-radius: 6px 0 0 6px; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.correction-quantity-input > span { display: inline-flex; align-items: center; min-width: 56px; padding: 0 10px; border: 1px solid var(--input-border); border-left: 0; border-radius: 0 6px 6px 0; background: var(--surface-muted); color: var(--muted-strong); font-weight: 750; white-space: nowrap; }
.correction-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-soft); }
.correction-preview__eyebrow { color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .045em; line-height: 1.2; text-transform: uppercase; }
.correction-preview > strong { color: var(--heading); font-size: 13.5px; line-height: 1.3; }
.correction-preview > span:not(.correction-preview__eyebrow) { color: var(--muted-strong); font-size: 11.5px; line-height: 1.35; }
.correction-preview__change { grid-column: 2; grid-row: 1 / span 3; display: flex; align-items: center; align-self: center; gap: 8px; }
.correction-preview__change span { min-width: 66px; padding: 7px 8px; border: 1px solid currentColor; border-radius: 6px; background: color-mix(in srgb, currentColor 7%, var(--surface)); text-align: center; }
.correction-preview__change b { font-size: 15px; font-variant-numeric: tabular-nums; }
.correction-preview__change small { font-size: 10px; }
.correction-preview__change i { color: var(--muted); font-size: 16px; font-style: normal; }
.correction-preview.is-increase { border-color: var(--success-border); background: color-mix(in srgb, var(--success-bg) 78%, var(--surface)); color: var(--success); }
.correction-preview.is-decrease { border-color: var(--info-border); background: color-mix(in srgb, var(--info-bg) 78%, var(--surface)); color: var(--info); }
.correction-preview.is-warning { border-color: var(--warn-border); background: color-mix(in srgb, var(--warn-bg) 78%, var(--surface)); color: var(--warn); }
.correction-preview.is-error { border-color: var(--bad-border); background: color-mix(in srgb, var(--bad-bg) 78%, var(--surface)); color: var(--bad); }
.correction-form__details { border-top: 1px solid var(--border-subtle); }
.correction-form__details > summary { padding: 9px 0 0; color: var(--muted-strong); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.correction-form__details[open] > summary { margin-bottom: 8px; }
.correction-form__details .correction-field { width: min(240px, 100%); }
.correction-form__actions { margin-top: 0; padding-top: 2px; }
.correction-form__actions button, .correction-form__actions .button { min-height: 36px; font-size: 13px; }
.correction-form__actions button[type="submit"] { min-width: 190px; }
.correction-form__actions button:disabled { border-color: var(--line); background: var(--surface-muted); color: var(--muted); cursor: not-allowed; opacity: .9; }
@media (max-width: 640px) {
  .correction-form__grid { grid-template-columns: 1fr; }
  .correction-stock__values { grid-template-columns: 1fr; }
  .correction-preview { grid-template-columns: 1fr; }
  .correction-preview__change { grid-column: 1; grid-row: auto; margin-top: 6px; }
  .correction-form__actions { flex-direction: column-reverse; }
  .correction-form__actions button, .correction-form__actions .button { justify-content: center; width: 100%; }
}

.material-detail-page { display: grid; gap: 16px; }
.material-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 14px; align-items: start; }
.material-layout__main, .material-layout__side { display: grid; gap: 14px; }
.material-stock-card, .material-action-card, .material-section-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
.material-stock-card { padding: 16px; border-color: #bcdcd5; background: linear-gradient(180deg, #fbfefd 0%, #ffffff 76%); }
.material-action-card, .material-section-card { padding: 13px 14px; }
.material-summary-card { min-height: 0; }
.material-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.material-summary-title h1 { margin: 0; max-width: 760px; font-size: 28px; line-height: 1.18; }
.material-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.material-card-head h2, .material-section-title h2 { margin: 0; font-size: 18px; line-height: 1.25; }
.material-eyebrow { display: block; margin-bottom: 4px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.material-summary-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 10px 0 0; border-top: 1px solid #d9e7e3; }
.material-summary-total span { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.material-summary-total strong { color: var(--ink); font-size: 28px; font-weight: 750; line-height: 1.12; overflow-wrap: anywhere; }
.material-chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.material-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid #d9e1ea; border-radius: 999px; background: #fbfcfd; color: #475569; font-size: 12px; font-weight: 650; text-decoration: none; }
.material-chip-link:hover, .material-filter-link:hover, .material-project-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.material-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.material-action-button { justify-content: flex-start; gap: 8px; min-height: 38px; }
.material-action-button svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.material-last-card { padding: 12px 14px; }
.material-last-summary { margin: 0; color: #334155; font-size: 14px; font-weight: 500; line-height: 1.45; }
.material-filter-link, .material-project-link { color: #334155; font-weight: 650; text-decoration: none; }
.material-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.material-section-title__main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.material-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; border: 1px solid #cfe4df; background: #eefaf7; color: var(--accent); }
.material-section-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.material-section-total { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 650; white-space: nowrap; }
.material-history-action { min-height: 32px; padding: 0 10px; border-color: #d9e1ea; background: #fff; color: #334155; font-size: 13px; font-weight: 650; }
.material-table-wrap { overflow-x: auto; }
.material-section-card table { border-radius: 7px; overflow: hidden; border-color: #dfe6ee; }
.material-section-card th { background: #f1f5f8; color: #334155; }
.material-section-card td { background: #fff; }
.material-empty-state { padding: 18px 12px; color: var(--muted); text-align: center; background: #fbfcfd; border: 1px dashed #cfd8e3; border-radius: 7px; }
.fleet-list { display: grid; gap: 7px; }
.fleet-card { display: grid; grid-template-columns: minmax(250px, 1.35fr) minmax(260px, 1fr) minmax(300px, 1.15fr); gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 8px 10px; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04); }
.fleet-card-main { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 9px; align-items: center; color: var(--ink); text-decoration: none; min-width: 0; }
.fleet-card-title { display: grid; gap: 3px; min-width: 0; }
.fleet-card-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 1.2; }
.fleet-card-title small { color: var(--muted); font-size: 12px; font-weight: 700; }
.fleet-card-details { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; }
.fleet-card-detail { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: transparent; }
.fleet-card-detail small, .fleet-card-deadline small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.fleet-card-detail strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; font-size: 12px; }
.fleet-card-deadlines { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; margin: 0; }
.fleet-card-deadline { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fleet-card-deadline .fleet-deadline { justify-content: center; width: auto; min-height: 22px; padding: 0 7px; font-size: 11px; }
.fleet-card-warning { grid-column: 1 / -1; margin: 0 0 0 59px; color: #9a5b00; font-size: 12px; font-weight: 650; }
.fleet-thumb { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 36px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; color: var(--muted); font-size: 11px; }
.fleet-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fleet-deadline { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }
.fleet-deadline.ok { color: var(--accent); background: #eefaf7; border-color: #b7dfd6; }
.fleet-deadline.warn { color: #9a5b00; background: #fff8e7; border-color: #f0c36f; }
.fleet-deadline.expired { color: #b42318; background: #fff5f4; border-color: #e4a8a2; }
.fleet-deadline.empty { color: var(--muted); background: #f8fafc; border-color: #e2e8f0; }
.fleet-vehicle-card { padding: 14px; }
.fleet-vehicle-summary { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: center; }
.fleet-photo-large { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; color: var(--muted); font-weight: 650; }
.fleet-photo-large img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fleet-vehicle-main .material-summary-head { margin-bottom: 8px; }
.fleet-action-grid { grid-template-columns: 1fr; }
.fleet-notes-grid { display: grid; gap: 12px; }
.fleet-notes-grid p { margin: 0; color: #334155; }
.fleet-row-actions { white-space: nowrap; }
.fleet-row-actions a { color: #334155; text-decoration: none; font-weight: 650; margin-right: 10px; }
.fleet-row-actions a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.app-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.app-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  gap: 14px;
}
.app-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.app-brand__logo {
  display: block;
  width: auto;
  height: 34px;
}
.app-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.app-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #334155;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.app-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.app-tab.is-active {
  border-color: #b7dfd6;
  background: #eefaf7;
  color: var(--accent);
}
.app-icon {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.app-user-menu {
  position: relative;
}
.app-user-menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}
.app-user-menu summary::-webkit-details-marker {
  display: none;
}
.app-user-menu summary::after {
  content: "⌄";
  color: var(--muted);
  font-size: 14px;
}
.app-user-menu[open] summary {
  border-color: var(--accent);
  color: var(--accent);
}
.app-user-menu .dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
.app-user-menu .dropdown a,
.app-user-menu .dropdown button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}
.app-user-menu .dropdown a:hover,
.app-user-menu .dropdown button:hover {
  background: #eef6f4;
  color: var(--accent);
}
.app-user-menu .dropdown form {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
@media (max-width: 760px) {
  .app-header__inner {
    align-items: stretch;
    flex-direction: column;
    padding: 12px 0;
  }
  .app-header__right {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
  }
  .app-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .app-tab {
    justify-content: center;
  }
  .app-user-menu {
    align-self: flex-end;
  }
}
@media (min-width: 761px) and (max-width: 1500px) {
  .app-header__inner { gap: 8px; }
  .app-header__right { gap: 6px; min-width: 0; }
  .app-switcher { gap: 6px; min-width: 0; }
  .app-tab { gap: 4px; padding: 0 7px; }
  .app-user-menu summary { padding: 0 8px; }
}
.login-panel {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 420px);
  gap: 24px;
  align-items: center;
  width: min(920px, 100%);
  margin: 24px auto 0;
}
.login-panel__intro {
  padding: 8px 0 8px 16px;
  border-left: 4px solid var(--accent);
}
.login-panel__logo {
  display: block;
  width: auto;
  height: 40px;
  margin-bottom: 24px;
}
.login-panel__kicker {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.login-panel h1 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.18;
}
.login-panel__copy {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
.login-card {
  display: grid;
  gap: 13px;
  max-width: none;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.login-card button {
  width: 100%;
}
.login-field {
  display: grid;
  gap: 5px;
}
.login-field label {
  margin: 0;
  color: #334155;
  font-size: 13px;
  font-weight: 650;
}
.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
}
.login-remember input {
  margin: 0;
}
.login-errors {
  color: var(--bad);
  font-size: 13px;
  line-height: 1.4;
}
.login-errors ul {
  margin: 0;
  padding-left: 18px;
}
@media (max-width: 760px) {
  .login-panel {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 12px;
  }
  .login-panel__intro {
    padding-left: 12px;
  }
  .login-panel h1 {
    font-size: 25px;
  }
}

.module-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 9px; }
.module-tabs a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #334155; text-decoration: none; font-size: 14px; font-weight: 500; }
.module-tabs a.active { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); }
.equipment-filters { gap: 6px; align-items: end; justify-content: start; margin-bottom: 6px; padding: 7px 8px; }
.equipment-filters--durable { grid-template-columns: minmax(280px, 320px) minmax(132px, 150px) minmax(150px, 170px) minmax(132px, 150px) max-content max-content; }
.equipment-filters--consumable { grid-template-columns: minmax(260px, 300px) minmax(126px, 140px) minmax(140px, 160px) minmax(132px, 150px) max-content; }
.movement-filters { grid-template-columns: minmax(230px, 1fr) minmax(130px, 170px) minmax(170px, 230px) minmax(170px, 230px) minmax(140px, 190px) minmax(140px, 190px) auto; gap: 6px; margin-bottom: 6px; padding: 7px 8px; }
.movement-filters label { margin-bottom: 2px; font-size: 10px; }
.movement-filters input, .movement-filters select { min-height: 31px; padding: 5px 8px; font-size: 13px; }
.equipment-filters label { margin-bottom: 2px; font-size: 10px; }
.equipment-filters input, .equipment-filters select { min-height: 31px; padding: 5px 8px; font-size: 13px; }
.equipment-clear-button { justify-self: start; width: max-content; min-height: 31px; padding: 0 9px; font-size: 13px; }
.equipment-retired-field { align-self: end; min-width: 0; }
.equipment-filters .equipment-retired-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; width: 100%; min-height: 31px; height: 31px; margin: 0; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.equipment-filters .equipment-retired-toggle .toggle-field__label { display: inline-flex; align-items: center; color: #475569; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.equipment-filters .equipment-retired-toggle .toggle-switch { width: 38px; height: 22px; margin: 0; }
.equipment-filters .equipment-retired-toggle .toggle-switch input[type="checkbox"] { width: 38px; height: 22px; min-height: 0; padding: 0; }
.equipment-filters .equipment-retired-toggle .toggle-switch__track { width: 38px; height: 22px; }
.equipment-filters .equipment-retired-toggle .toggle-switch__track::after { width: 16px; height: 16px; }
.equipment-filters .equipment-retired-toggle .toggle-switch input[type="checkbox"]:checked + .toggle-switch__track::after { transform: translateX(16px); }
.employee-contract-type-field { grid-column: span 2; align-self: end; min-width: 0; }
.employee-contract-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 560px; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.employee-contract-switch__option { position: relative; display: block; min-width: 0; margin: 0; cursor: pointer; }
.employee-contract-switch__input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.employee-contract-switch__option span { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 6px; color: #64748b; font-size: 14px; font-weight: 700; line-height: 1.1; text-align: center; white-space: nowrap; }
.employee-contract-switch__input:checked + span { background: #fff; color: #1f2937; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.employee-contract-switch__input:focus-visible + span { outline: 2px solid rgba(32, 129, 109, .2); outline-offset: 1px; }
@media (max-width: 900px) { .employee-contract-type-field { grid-column: auto; } .employee-contract-switch { max-width: none; } }
.employee-active-toggle-field .toggle-field__label, .employee-worktime-toggle-field .toggle-field__label { display: inline-flex; align-items: center; gap: 6px; }
.employee-active-toggle-field .field-help, .employee-worktime-toggle-field .field-help { flex: 0 0 auto; }
.equipment-table { font-size: 14px; }
.equipment-table th, .equipment-table td { padding: 7px 9px; line-height: 1.18; }
.equipment-table th { font-size: 11px; letter-spacing: 0; }
.equipment-table .status-badge { min-height: 19px; padding: 0 6px; font-size: 11px; }
.equipment-thumb { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 34px; border: 1px solid var(--line); border-radius: 6px; background: #f8fafc; color: var(--muted); font-size: 10px; overflow: hidden; }
.equipment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.equipment-name { color: var(--ink); text-decoration: none; font-weight: 650; line-height: 1.14; }
.equipment-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.equipment-detail-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 16px; align-items: start; }
.equipment-photo-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px; }
.equipment-photo-card img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 6px; background: #f8fafc; }
.quick-issue { max-width: none; margin: 0 0 10px; padding: 12px; }
.quick-issue h2 { margin: 0 0 9px; font-size: 16px; }
.quick-issue-grid { display: grid; grid-template-columns: minmax(180px, 1fr) 120px minmax(170px, 220px) minmax(180px, 1fr) auto; gap: 8px; align-items: end; }
.quick-issue-grid input, .quick-issue-grid select, .quick-issue-grid textarea { min-height: 32px; padding: 5px 8px; font-size: 13px; }
.quick-issue-grid textarea { height: 32px; resize: vertical; }
.compact-form { max-width: none; }
.form-section { margin: 0 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.form-section h2 { margin: 0 0 12px; font-size: 16px; }
.form-grid-compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-grid-compact .field-full { grid-column: 1 / -1; }
.consumable-form-grid { grid-template-columns: minmax(170px, 1.15fr) minmax(150px, 1fr) minmax(130px, .82fr) minmax(150px, 1fr); }
.consumable-active-toggle-field { align-self: end; min-height: 42px; }
.consumable-active-toggle-field .toggle-field__label { display: inline-flex; align-items: center; gap: 6px; }
.consumable-active-toggle-field .field-help { flex: 0 0 auto; }
.compact-form label { color: #475569; font-weight: 500; }
.field-label-with-help { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.field-label-with-help label { margin: 0; }
.field-help { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 15px; height: 15px; min-height: 15px; padding: 0; border: 0; border-radius: 999px; background: #64748b; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; cursor: help; }
.field-help > span[aria-hidden="true"] { display: block; width: 100%; line-height: 15px; text-align: center; transform: translateY(-.5px); }
.field-help:hover, .field-help:focus { background: #475569; color: #fff; outline: none; }
.field-help:focus-visible { box-shadow: 0 0 0 3px rgba(35, 125, 105, .16); }
.field-help__bubble { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 30; width: min(285px, 82vw); padding: 9px 10px; border-radius: 7px; background: #1f2a30; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.35; text-align: left; text-transform: none; letter-spacing: 0; box-shadow: 0 10px 24px rgba(15, 23, 42, .22); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .12s ease, transform .12s ease, visibility .12s ease; }
.field-help__bubble::after { content: ""; position: absolute; left: 50%; top: 100%; width: 9px; height: 9px; background: #1f2a30; transform: translate(-50%, -5px) rotate(45deg); }
.field-help:hover .field-help__bubble, .field-help:focus .field-help__bubble, .field-help:focus-visible .field-help__bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.checkbox-line:focus-within .field-help__bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.movement-modal .field-help__bubble, .app-modal .field-help__bubble { position: fixed; left: 50%; right: auto; bottom: 18px; top: auto; width: min(520px, calc(100vw - 36px)); transform: translate(-50%, 8px); z-index: 140; }
.movement-modal .field-help__bubble::after, .app-modal .field-help__bubble::after { display: none; }
.movement-modal .field-help:hover .field-help__bubble, .movement-modal .field-help:focus .field-help__bubble, .movement-modal .field-help:focus-visible .field-help__bubble, .app-modal .field-help:hover .field-help__bubble, .app-modal .field-help:focus .field-help__bubble, .app-modal .field-help:focus-visible .field-help__bubble { transform: translate(-50%, 0); }
.action-help { margin-left: auto; pointer-events: none; }
.action-help .field-help__bubble { left: auto; right: 0; transform: translate(0, 4px); }
.action-help .field-help__bubble::after { left: auto; right: 7px; transform: translate(0, -5px) rotate(45deg); }
.material-action-button:hover .action-help .field-help__bubble, .material-action-button:focus .action-help .field-help__bubble, .material-action-button:focus-visible .action-help .field-help__bubble { opacity: 1; visibility: visible; transform: translate(0, 0); }
.employee-table { font-size: 14px; }
.employee-table th, .employee-table td { padding: 8px 10px; vertical-align: middle; line-height: 1.18; }
.employee-table th { font-size: 11px; letter-spacing: 0; }
.employee-table .status-badge { min-height: 20px; padding: 0 7px; font-size: 11px; }
.employee-table .employee-number-cell { width: 42px; color: #64748b; font-size: 12px; font-weight: 750; text-align: center; white-space: nowrap; }
.employee-status-stack { display: flex; flex-wrap: wrap; gap: 5px; max-width: 300px; }

.employee-worktime-entry-button { align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 14px; border-color: #126b5f; border-radius: 7px; background: #147968; color: #fff; font-size: 14px; font-weight: 850; line-height: 1; box-shadow: 0 7px 15px rgba(20, 121, 104, .16); }
.employee-worktime-entry-button:hover, .employee-worktime-entry-button:focus { border-color: #0f5f54; background: #106b5d; color: #fff; }
.employee-worktime-entry-button .app-icon { flex: 0 0 auto; width: 15px; height: 15px; margin-right: 0; color: #fff; stroke: currentColor; stroke-width: 2; }
.employee-worktime-entry-button span { line-height: 1; white-space: nowrap; }

.employee-page-actions { gap: 8px; }
.employee-page-actions .button { min-height: 30px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.employee-page-actions .material-action-button { box-shadow: none; }
.employee-page-actions .button .app-icon { width: 14px; height: 14px; margin-right: 0; }
.employee-page-actions .employee-worktime-entry-button { gap: 6px; min-height: 30px; padding: 0 11px; font-size: 12px; font-weight: 760; box-shadow: 0 4px 10px rgba(20, 121, 104, .10); }

.employee-position-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.employee-position-stack > span:first-child { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-rank { display: inline-flex; align-items: center; gap: 3px; min-height: 8px; }
.employee-rank__bar { display: block; width: 18px; height: 3px; border-radius: 999px; background: #20816d; }
.employee-rank--orange .employee-rank__bar { background: #d97706; }
.employee-rank--burgundy .employee-rank__bar { background: #8f1d2c; }
.employee-table .employee-position-stack { max-width: 210px; }
.employee-fact-panel { margin: -4px 0 12px; padding: 14px 16px; border: 1px solid #dfe8ef; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035); }
.employee-fact-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 12px; border-bottom: 1px solid #edf2f7; }
.employee-fact-panel__identity { min-width: 0; }
.employee-fact-panel__identity h2 { margin: 0 0 4px; color: var(--ink); font-size: 22px; line-height: 1.15; }
.employee-fact-panel__identity p { display: flex; flex-wrap: wrap; gap: 7px 11px; margin: 0; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.35; }
.employee-fact-panel__identity p span + span::before { content: "·"; margin-right: 11px; color: #c2ccd6; font-weight: 800; }
.employee-fact-panel__rank { flex: 0 0 auto; margin-top: 2px; }
.employee-fact-panel__status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; padding: 12px 0 0; }
.employee-fact-line { min-width: 0; padding: 8px 9px; border-left: 3px solid #d8e2eb; border-radius: 7px; background: #fbfcfd; }
.employee-fact-line span { display: block; margin-bottom: 3px; color: #64748b; font-size: 10px; font-weight: 780; letter-spacing: .035em; text-transform: uppercase; }
.employee-fact-line strong { display: block; color: #17232b; font-size: 14px; font-weight: 760; line-height: 1.25; }
.employee-fact-line small { display: block; margin-top: 2px; color: #64748b; font-size: 12px; font-weight: 600; line-height: 1.25; }
.employee-fact-line--ok { border-left-color: #5fb49f; background: #f6fcfa; }
.employee-fact-line--warn { border-left-color: #e4a83a; background: #fffaf0; }
.employee-fact-line--urgent, .employee-fact-line--empty { border-left-color: #e2857b; background: #fff7f6; }
.employee-fact-line--absence, .employee-fact-line--hours { border-left-color: #7aa7d9; background: #f7fbff; }
.employee-fact-line--leave { border-left-color: #5fb49f; background: #f6fcfa; }
.employee-fact-panel__details { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 12px; }
.employee-fact-panel__details div { min-width: 150px; }
.employee-fact-panel__details span { display: block; color: #7a8797; font-size: 10px; font-weight: 780; letter-spacing: .035em; text-transform: uppercase; }
.employee-fact-panel__details strong { display: block; margin-top: 2px; color: #334155; font-size: 13px; font-weight: 650; line-height: 1.3; }
.employee-fact-panel__details a { color: inherit; text-decoration: none; }
.employee-fact-panel__details a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.employee-attention-card .material-section-title { margin-bottom: 10px; }
.employee-attention-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.employee-attention-item { display: block; min-width: 0; padding: 10px 11px; border: 1px solid #dfe8ef; border-left: 3px solid #cbd5e1; border-radius: 8px; background: #fbfcfd; color: inherit; text-decoration: none; }
.employee-attention-item:hover { border-color: #bdd6d0; background: #f5fbf9; }
.employee-attention-item span { display: block; color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.employee-attention-item strong { display: block; margin-top: 4px; color: #17232b; font-size: 14px; font-weight: 750; line-height: 1.25; }
.employee-attention-item--warn { border-left-color: #e4a83a; }
.employee-attention-item--urgent, .employee-attention-item--empty { border-left-color: #d96f62; }
.employee-attention-item--info { border-left-color: #7aa7d9; }
.employee-empty-state { margin: 0; padding: 18px 14px; color: #64748b; font-size: 14px; font-weight: 600; text-align: left; }
.employee-empty-state--with-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.employee-light-table { border-color: #edf2f7; }
.employee-light-table th { background: #f8fafc; color: #52637a; font-size: 11px; }
.employee-light-table td { border-top-color: #edf2f7; }
@media (max-width: 760px) { .employee-fact-panel__head, .employee-empty-state--with-action { align-items: flex-start; flex-direction: column; } .employee-fact-panel__status-grid, .employee-attention-list { grid-template-columns: 1fr; } }
.employee-basic-grid .employee-position-stack { display: flex; }
.employee-position-stack--portal { align-items: center; }
.employee-position-stack--portal .muted { margin: 0; }
.employee-rank-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 9px 10px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfcfd; color: #64748b; font-size: 12px; font-weight: 700; }
.employee-rank-preview .employee-rank__bar { width: 22px; height: 4px; }
.detail-item .employee-rank, .detail-item .employee-rank__bar { margin-bottom: 0; text-transform: none; }
.employee-deadline-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: -4px 0 12px; }
.employee-deadline-card { position: relative; min-height: 68px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.employee-deadline-card span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.employee-deadline-card strong { display: block; color: var(--ink); font-size: 17px; line-height: 1.12; white-space: nowrap; }
.employee-deadline-card small { display: block; margin-top: 3px; color: #52637a; font-size: 12px; font-weight: 650; }
.employee-deadline-card em { position: absolute; top: 8px; right: 9px; display: inline-flex; align-items: center; min-height: 19px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 750; line-height: 1; }
.employee-deadline-card--ok { border-color: #cfe4df; background: #fbfefd; }
.employee-deadline-card--ok em { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); }
.employee-deadline-card--warn { border-color: #f0c36f; background: #fffaf0; }
.employee-deadline-card--warn em { border-color: #f0c36f; background: #fff3cd; color: #9a5b00; }
.employee-deadline-card--urgent { border-color: #efaaa3; background: #fff6f5; }
.employee-deadline-card--urgent em { border-color: #e4a8a2; background: #fff0ef; color: #b42318; }
.employee-deadline-card--empty { background: #fbfcfd; }
.employee-deadline-card--empty em { background: #f8fafc; color: #64748b; }
.employee-deadline-card--absence { border-color: #bfd7f5; background: #f6fbff; }
.employee-deadline-card--absence em { border-color: #bfd7f5; background: #eef6ff; color: #1d4f8f; }
.tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #f1f5f8; color: #64748b; font-size: 11px; font-weight: 750; }
.module-tabs a.active .tab-count { background: #d9f1eb; color: var(--accent); }
.employee-basic-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 12px; }
.employee-basic-grid .detail-item { padding: 9px 10px; }
.employee-basic-grid .detail-item strong { font-size: 17px; }
.employee-summary-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 0; }
.employee-summary-grid .detail-item { padding: 9px 10px; }
.employee-summary-grid .detail-item span { font-size: 11px; }
.employee-summary-grid .detail-item strong { font-size: 20px; }
.employee-admin-actions { margin: -4px 0 10px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfcfd; }
.employee-admin-actions summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 12px; color: #475569; cursor: pointer; font-size: 13px; font-weight: 750; list-style: none; }
.employee-admin-actions summary::-webkit-details-marker { display: none; }
.employee-admin-actions summary:hover { color: var(--accent); background: #f4faf8; }
.employee-admin-actions__chevron { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .12s ease; }
.employee-admin-actions[open] .employee-admin-actions__chevron { transform: rotate(225deg); }
.employee-admin-actions__body { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 12px; }
.employee-status-inactive { color: #b42318; }
.button-danger { border-color: #efc7c2; background: #fff6f5; color: #a3352b; }
.button-danger:hover { border-color: #b42318; color: #b42318; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.danger-panel { max-width: 760px; border: 1px solid #efc7c2; border-left: 4px solid #b42318; border-radius: 8px; background: #fff; padding: 16px; }
.danger-panel h1 { margin-bottom: 8px; color: #922018; }
.danger-warning { margin: 0 0 14px; color: #4a2730; line-height: 1.5; }
.confirm-box { margin: 14px 0; padding: 12px; border: 1px solid #f0d2ce; border-radius: 7px; background: #fff8f7; }
.confirm-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 650; }
.confirm-inline input { margin: 0; }
.blocked-delete-note { margin: 12px 0; padding: 10px 12px; border: 1px solid #f0d49b; border-radius: 7px; background: #fff8e8; color: #8a5c13; }

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.pagination__link, .pagination__status { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.pagination__link:hover { border-color: var(--accent); color: var(--accent); }
.pagination__link.is-disabled { color: var(--muted); opacity: .6; }
.pagination__status { color: var(--muted); font-weight: 500; }

@media (max-width: 900px) { .equipment-detail-layout, .quick-issue-grid, .form-grid-compact, .consumable-form-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .filters, .equipment-filters, .movement-filters { grid-template-columns: 1fr 1fr; } .material-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .top, .material-summary-head, .material-card-head, .material-section-title { align-items: flex-start; flex-direction: column; } .top { padding: 12px 0; } .header-actions { align-items: flex-start; flex-direction: column-reverse; width: 100%; margin-left: 0; } .action-menu, .user-menu { align-self: flex-end; } .page-head { align-items: flex-start; flex-direction: column; } .page-head .actions { justify-content: flex-start; } .filters, .equipment-filters, .movement-filters { grid-template-columns: 1fr; } .wrap { width: min(100% - 20px, 1180px); } table { font-size: 14px; } th, td { padding: 8px; } .material-summary-title h1 { font-size: 25px; } .material-action-grid { grid-template-columns: 1fr; } .material-section-total, .material-history-action { margin-left: 0; } }


.document-filters { grid-template-columns: minmax(240px, 1fr) minmax(145px, 190px) minmax(120px, 160px) minmax(130px, 170px) minmax(150px, 190px) minmax(130px, 170px) auto; gap: 7px; margin-bottom: 8px; padding: 8px 9px; }
.document-filters label { margin-bottom: 2px; font-size: 10px; }
.document-filters input, .document-filters select { min-height: 32px; padding: 5px 8px; font-size: 13px; }
.document-alert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.document-side-panel { min-height: 0; padding: 8px 10px; border: 1px solid #e3e9ef; border-radius: 8px; background: color-mix(in srgb, var(--surface, #fff) 88%, #f8fafc); opacity: .82; }
.document-side-panel--quiet { min-height: 0; padding: 8px 10px; border-color: #e3e9ef; background: color-mix(in srgb, var(--surface, #fff) 88%, #f8fafc); opacity: .82; }
.document-side-panel h2 { margin: 0 0 4px; color: #56667a; font-size: 12px; font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.document-side-panel--quiet h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: #56667a; font-size: 12px; font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.document-side-panel--quiet h2 span { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 999px; background: #eef4f8; color: #66788c; font-size: 11px; font-weight: 850; }
.document-side-panel p { margin: 0; color: #66788c; font-size: 12.5px; line-height: 1.35; }
.document-side-panel a { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid #edf2f7; color: #354456; text-decoration: none; font-size: 12.5px; line-height: 1.25; }
.document-side-panel--quiet a { padding: 4px 0; border-top-color: #edf2f7; color: #354456; font-size: 12.5px; line-height: 1.25; }
.document-side-panel a:first-of-type { border-top: 0; }
.document-side-panel a:hover { color: var(--accent); }
.document-side-panel span { color: var(--muted); white-space: nowrap; }
.document-table { font-size: 14px; }
.document-table th, .document-table td { padding: 8px 10px; }
.document-modal-form .form-section { margin-bottom: 10px; padding: 12px; }
.document-modal-form .form-section h2 { margin-bottom: 10px; font-size: 15px; }
.document-form-grid { gap: 10px; }
.document-dropzone-field { position: relative; display: grid; gap: 7px; }
.document-dropzone-field .field-label-with-help { margin-bottom: 0; }
.document-dropzone { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 78px; padding: 12px 13px; border: 1px dashed #bfd0df; border-radius: 8px; background: #fbfdff; color: var(--ink); cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.document-dropzone:hover, .document-dropzone-field.is-dragging .document-dropzone, .is-document-dropzone-dragging .document-dropzone { border-color: var(--accent); background: #f0fdfa; box-shadow: 0 0 0 3px rgba(15, 118, 110, .08); }
.document-dropzone__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #d9e6ef; border-radius: 8px; background: #fff; color: var(--accent); }
.document-dropzone__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.document-dropzone__copy { min-width: 0; display: grid; gap: 3px; }
.document-dropzone__title { color: #17232b; font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.document-dropzone__hint { color: var(--muted); font-size: 12px; line-height: 1.25; }
.document-dropzone__selection { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-height: 28px; }
.document-dropzone__file { display: inline-flex; align-items: center; max-width: 100%; min-height: 26px; padding: 3px 8px; overflow: hidden; border: 1px solid #dfe7ef; border-radius: 999px; background: #fff; color: #53657a; font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.document-dropzone-field.has-file .document-dropzone__file { border-color: #b9dfd7; background: #f4faf8; color: var(--accent); }
.document-dropzone__clear { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border: 1px solid #d9e1ea; border-radius: 999px; background: #fff; color: #53657a; font-size: 11.5px; font-weight: 750; cursor: pointer; }
.document-dropzone__clear:hover { border-color: #efc7c2; color: #a3352b; background: #fff6f5; }
.document-dropzone__clear[hidden] { display: none; }
.document-dropzone__message { margin: 0; color: #8a5c13; font-size: 12px; font-weight: 650; }
.document-dropzone-field input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; opacity: 0; clip: rect(0, 0, 0, 0); }
.document-dropzone-field .errorlist { margin: 0; }
.document-preview-card iframe { width: 100%; height: min(680px, 70vh); border: 1px solid var(--line); border-radius: 7px; background: #fff; }
@media (max-width: 1040px) { .document-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .document-alert-grid, .document-filters { grid-template-columns: 1fr; } }

.app-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(15, 23, 42, 0.38); }
.app-modal[hidden] { display: none; }
.app-modal__dialog { width: min(680px, 100%); max-height: min(88vh, 860px); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24); }
.app-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.app-modal__head h2 { margin: 0; font-size: 18px; }
.app-modal__body { max-height: calc(min(88vh, 860px) - 58px); overflow-y: auto; padding: 16px; }
.app-modal--invoice .app-modal__dialog { width: min(980px, calc(100vw - 24px)); }
.app-modal--task .app-modal__dialog { width: min(980px, calc(100vw - 24px)); }
.app-modal--task .app-modal__body { padding: 12px; }
.app-modal--receive .app-modal__dialog { width: min(1120px, calc(100vw - 24px)); }
.app-modal--receive .app-modal__body { padding: 14px; }
.app-modal--invoice .app-modal__head { display: none; }
.app-modal--invoice .app-modal__body { max-height: min(88vh, 860px); padding: 14px; }
.app-modal__body form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.app-modal__close, .app-modal .button { border-color: var(--line); background: #fff; color: var(--ink); }
.app-modal__close:hover, .app-modal .button:hover { border-color: var(--accent); color: var(--accent); }
.app-modal-form .form-section { margin-bottom: 10px; padding: 12px; }
.app-modal-form .form-section h2 { margin-bottom: 10px; font-size: 15px; }
.app-modal-grid { gap: 10px; }
.app-modal-info { margin: 0 0 10px; padding: 12px; }
.app-modal-info .detail-grid { margin-bottom: 0; }

@media (max-width: 760px) {
  .fleet-list { gap: 10px; }
  .fleet-card { display: block; padding: 11px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05); }
  .fleet-card-main { grid-template-columns: 58px minmax(0, 1fr); }
  .fleet-card-main .status-badge { grid-column: 2; justify-self: start; }
  .fleet-card-details { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .fleet-card-detail { gap: 3px; padding: 8px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; }
  .fleet-card-extra { display: none; }
  .fleet-card-deadlines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
  .fleet-card-deadline { display: grid; gap: 4px; }
  .fleet-card-deadline .fleet-deadline { width: 100%; min-height: 24px; padding: 0 5px; }
  .fleet-card-warning { margin: 9px 0 0; }
  .fleet-thumb { width: 58px; height: 42px; }
  .fleet-vehicle-summary { grid-template-columns: 1fr; }
  .fleet-photo-large { max-width: 240px; }
}

.consumable-detail-page { display: grid; gap: 14px; }
.consumable-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 2px; }
.consumable-head h1 { margin: 0; font-size: 28px; line-height: 1.18; }
.consumable-head__main { min-width: 0; }
.consumable-head__actions { margin: 0; justify-content: flex-end; }
.consumable-summary-panel { display: grid; gap: 8px; }
.consumable-summary-main-grid { display: grid; grid-template-columns: minmax(250px, 1.35fr) minmax(145px, .75fr) minmax(145px, .75fr) minmax(150px, .72fr); gap: 8px; align-items: stretch; }
.consumable-summary-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; min-height: 58px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 5px 16px rgba(15, 23, 42, 0.03); }
.consumable-summary-card--main { min-height: 60px; }
.consumable-summary-card--stock { border-color: #c9e6df; background: #f4faf8; }
.consumable-summary-card svg { width: 17px; height: 17px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: #7c8da3; }
.consumable-summary-card span { display: block; margin-bottom: 2px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.consumable-summary-card strong { display: block; min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 13.5px; font-weight: 650; line-height: 1.25; }
.consumable-summary-card--main strong { font-size: 15px; }
.consumable-summary-card--stock svg, .consumable-summary-card--stock strong { color: var(--accent); }
.consumable-summary-card a { color: inherit; text-decoration: none; }
.consumable-summary-card a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.consumable-compact-facts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; padding: 7px 8px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fff; }
.consumable-compact-fact { display: inline-flex; align-items: center; min-width: 0; min-height: 28px; gap: 6px; padding: 3px 8px; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; color: #334155; }
.consumable-compact-fact dt { margin: 0; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; white-space: nowrap; }
.consumable-compact-fact dd { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-size: 12.5px; font-weight: 650; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.consumable-compact-fact--surplus, .consumable-compact-fact--ok { border-color: #c9e6df; background: #f4faf8; }
.consumable-compact-fact--surplus dd, .consumable-compact-fact--ok dd { color: var(--accent); }
.consumable-compact-fact--warn { border-color: #f0d79c; background: #fffaf0; }
.consumable-compact-fact--warn dd { color: #8a5c13; }
.consumable-compact-fact--empty, .consumable-compact-fact--shortage { border-color: #efc7c2; background: #fff6f5; }
.consumable-compact-fact--empty dd, .consumable-compact-fact--shortage dd { color: #b42318; }
.consumable-compact-fact--inactive { border-color: #d9e1ea; background: #f8fafc; }
.consumable-compact-fact--inactive dd { color: var(--muted); }
.consumable-operation-form { max-width: none; padding: 13px 14px; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
.consumable-operation-form .form-section h2, .consumable-form-head h2 { margin: 0; }
.consumable-operation-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 11px; }
.consumable-operation-tile { min-width: 0; padding: 8px 9px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfcfd; }
.consumable-operation-tile strong { display: block; margin-bottom: 3px; color: #17232b; font-size: 12px; font-weight: 800; line-height: 1.2; }
.consumable-operation-tile span { display: block; color: #64748b; font-size: 11px; font-weight: 550; line-height: 1.32; }
.consumable-operation-grid { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(110px, .55fr) minmax(190px, 1fr) minmax(190px, 1fr) minmax(120px, .6fr); gap: 10px; align-items: start; }
.consumable-operation-grid p { margin: 0; }
.consumable-operation-grid .field-full { grid-column: 1 / -1; }
.consumable-comment-field textarea { min-height: 44px; }
.consumable-comment-details { margin-top: 2px; }
.consumable-comment-details summary { width: fit-content; cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 700; list-style: none; }
.consumable-comment-details summary::-webkit-details-marker { display: none; }
.consumable-comment-details[open] .consumable-comment-field { margin-top: 8px; }
.consumable-form-actions { margin: 0; align-self: start; padding-top: 25px; }
.consumable-submit-field button { width: 100%; min-height: 38px; }
.consumable-empty-balance { margin: 0; color: #64748b; font-size: 14px; }
.consumable-empty-balance strong { color: #475569; }
.consumable-balance-card table td:first-child { font-weight: 550; }
.employee-consumable-table { font-size: 13px; }
.employee-consumable-table th { padding: 7px 9px; color: #718096; font-size: 10px; font-weight: 760; letter-spacing: .035em; background: #fbfcfd; }
.employee-consumable-table td { padding: 8px 9px; color: #475569; }
.employee-consumable-table td:first-child { color: #334155; font-weight: 520; }
.employee-consumable-table .quantity { color: #334155; font-size: 12.5px; font-weight: 680; }
.employee-consumable-table .table-action-button { min-height: 26px; padding: 0 8px; font-size: 12px; font-weight: 650; }
.consumable-settlement-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.consumable-settlement-actions .table-action-button { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; text-decoration: none; white-space: nowrap; }
.consumable-quick-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.consumable-quick-summary__item { min-width: 0; padding: 8px 9px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfcfd; }
.consumable-quick-summary__item span { display: block; margin-bottom: 3px; color: #64748b; font-size: 10px; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.consumable-quick-summary__item strong { display: block; min-width: 0; overflow: hidden; color: #17232b; font-size: 13px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .consumable-quick-summary { grid-template-columns: 1fr; } }
.consumable-notes-inline { padding: 10px 12px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fff; color: #334155; font-size: 14px; }
.consumable-notes-inline span { color: var(--muted); font-weight: 750; }
@media (max-width: 1100px) { .consumable-summary-main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .consumable-head { display: grid; }
  .consumable-head__actions { justify-content: flex-start; }
  .consumable-summary-main-grid, .consumable-operation-grid, .consumable-operation-guide { grid-template-columns: 1fr; }
  .consumable-form-actions { padding-top: 0; }
}


.dashboard-page { display: flex; flex-direction: column; gap: 8px; }
.dashboard-page-head { margin: 0 0 -4px; }
.dashboard-page-head .material-kicker { margin-bottom: 0; }
.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 6px 14px rgba(15, 23, 42, .04); }
.dashboard-hero__main { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dashboard-status-dot { width: 12px; height: 12px; border-radius: 999px; background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .12); flex: 0 0 auto; }
.dashboard-eyebrow { margin: 0 0 2px; color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-hero h2 { margin: 0; font-size: 17px; line-height: 1.08; color: #16232b; }
.dashboard-hero p { margin: 2px 0 0; color: #475569; font-size: 12px; line-height: 1.25; }
.dashboard-hero__metrics { display: grid; grid-template-columns: repeat(2, minmax(66px, 1fr)); gap: 6px; min-width: 150px; }
.dashboard-hero__metrics div { display: flex; flex-direction: column; justify-content: center; min-height: 40px; padding: 6px 9px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; }
.dashboard-hero__metrics span { color: #111827; font-size: 16px; font-weight: 750; line-height: 1; }
.dashboard-hero__metrics small { margin-top: 3px; color: #64748b; font-size: 10px; }
.dashboard-hero--warn { border-color: #f4c979; background: #fffbeb; }
.dashboard-hero--warn .dashboard-status-dot { background: #d97706; box-shadow: 0 0 0 4px rgba(217, 119, 6, .14); }
.dashboard-hero--urgent { border-color: #f0a6a6; background: #fff5f5; }
.dashboard-hero--urgent .dashboard-status-dot { background: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .13); }
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 10px; align-items: start; }
.dashboard-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dashboard-panel, .dashboard-deadlines { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .04); }
.dashboard-panel { padding: 9px; }
.dashboard-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.dashboard-panel__title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dashboard-panel__title h2, .dashboard-side-head h2 { margin: 0; color: #17232b; font-size: 15px; line-height: 1.2; }
.dashboard-panel__title p { margin: 2px 0 0; color: #64748b; font-size: 12px; }
.dashboard-panel__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: #eefaf7; color: var(--accent); flex: 0 0 auto; }
.dashboard-panel__icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-panel__link { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border: 1px solid #d7e0e8; border-radius: 6px; color: #334155; font-size: 12px; text-decoration: none; background: #fff; }
.dashboard-panel__count { display: flex; align-items: baseline; gap: 7px; margin: 10px 0 8px; }
.dashboard-panel__count strong { color: #16232b; font-size: 28px; line-height: 1; }
.dashboard-panel__count span { color: #64748b; font-size: 13px; }
.dashboard-alert-list, .dashboard-deadline-list { display: flex; flex-direction: column; gap: 5px; }
.dashboard-alert, .dashboard-deadline { display: flex; gap: 7px; padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 7px; color: inherit; text-decoration: none; background: #fbfdff; }
.dashboard-alert:hover, .dashboard-deadline:hover, .dashboard-panel__link:hover { border-color: #b9d9d2; background: #f3fbf8; }
.dashboard-alert__marker { width: 7px; height: 7px; margin-top: 5px; border-radius: 999px; background: #d97706; flex: 0 0 auto; }
.dashboard-alert--urgent .dashboard-alert__marker, .dashboard-deadline--urgent .dashboard-deadline__date { background: #dc2626; color: #fff; }
.dashboard-alert__body, .dashboard-deadline__text { display: flex; flex-direction: column; min-width: 0; }
.dashboard-alert strong, .dashboard-deadline strong { color: #1f2937; font-size: 12.5px; line-height: 1.2; }
.dashboard-alert small, .dashboard-deadline small { margin-top: 1px; color: #64748b; font-size: 11px; line-height: 1.22; }
.dashboard-panel--ok .dashboard-panel__icon { background: #eefaf7; color: #15803d; }
.dashboard-panel--warn .dashboard-panel__icon { background: #fff7ed; color: #d97706; }
.dashboard-panel--urgent .dashboard-panel__icon { background: #fff1f2; color: #dc2626; }
.dashboard-empty { margin: 0; padding: 8px 0; color: #64748b; font-size: 13px; }
.dashboard-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dashboard-deadlines { padding: 10px; }
.dashboard-side-head { margin-bottom: 7px; }
.dashboard-deadline { align-items: center; }
.dashboard-deadline__date { display: inline-flex; align-items: center; justify-content: center; width: 82px; min-height: 30px; border-radius: 6px; background: #f59e0b; color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.dashboard-task-alerts { padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .035); }
.dashboard-task-alerts__head { margin-bottom: 8px; }
.dashboard-task-alerts__head h2 { font-size: 15px; font-weight: 720; }
.dashboard-task-alert-list { display: grid; gap: 6px; }
.dashboard-task-alert { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fbfdff; color: inherit; text-decoration: none; }
.dashboard-task-alert:hover { border-color: #b9d9d2; background: #f3fbf8; }
.dashboard-task-alert__dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 999px; background: #f59e0b; flex: 0 0 auto; }
.dashboard-task-alert--urgent .dashboard-task-alert__dot { background: #dc2626; }
.dashboard-task-alert.has-unread-task .dashboard-task-alert__dot { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }
.dashboard-task-alert__body { display: grid; gap: 2px; min-width: 0; }
.dashboard-task-alert__body strong { overflow: hidden; color: #1f2937; font-size: 13px; font-weight: 720; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-task-alert__body small { color: #64748b; font-size: 11px; font-weight: 520; line-height: 1.25; }
.dashboard-task-alerts__all { display: inline-flex; margin-top: 8px; color: #0f766e; font-size: 12px; font-weight: 650; text-decoration: none; }
.dashboard-task-alerts__all:hover { color: #0f5f58; text-decoration: underline; }
.dashboard-main-empty { grid-column: 1 / -1; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #64748b; font-size: 13px; }
.dashboard-activity-card { margin-top: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .04); }
.dashboard-activity-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.dashboard-activity-card__head h2 { margin: 0; color: #17232b; font-size: 15px; line-height: 1.2; }
.dashboard-activity-card__title-icon { background: #eef6ff; color: #2563eb; }
.dashboard-activity-list { display: grid; gap: 4px; max-height: 390px; padding-right: 2px; overflow-y: auto; scrollbar-gutter: stable; }
.dashboard-activity-row { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 7px; align-items: start; padding: 6px 7px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fbfdff; color: inherit; text-decoration: none; }
.dashboard-activity-row:hover { border-color: #b9d9d2; background: #f3fbf8; }
.dashboard-activity-row--static { cursor: default; }
.dashboard-activity-row--static:hover { border-color: #e2e8f0; background: #fbfdff; }
.dashboard-activity-row__icon { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 7px; background: #eef6ff; color: #2563eb; }
.dashboard-activity-row__icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-activity-row__icon--stock, .dashboard-activity-row__icon--equipment { background: #eefaf7; color: #0f766e; }
.dashboard-activity-row__icon--tasks, .dashboard-activity-row__icon--work_time { background: #fff7ed; color: #c25f0a; }
.dashboard-activity-row__icon--finance { background: #f4f0ff; color: #6d3fc0; }
.dashboard-activity-row__icon--employee_private { background: #fff1f2; color: #be3455; }
.dashboard-activity-row__icon--documents, .dashboard-activity-row__icon--project_mail { background: #eef6ff; color: #2563eb; }
.dashboard-activity-row__body { display: grid; gap: 2px; min-width: 0; }
.dashboard-activity-row__body strong { color: #1f2937; font-size: 12.5px; font-weight: 680; line-height: 1.25; overflow-wrap: anywhere; }
.dashboard-activity-row__body small { display: flex; flex-wrap: wrap; gap: 3px; color: #64748b; font-size: 10.5px; line-height: 1.2; }
@media (max-width: 1040px) { .dashboard-layout { grid-template-columns: 1fr; } .dashboard-side { position: static; } }
@media (max-width: 760px) { .dashboard-hero { flex-direction: column; } .dashboard-hero__metrics, .dashboard-section-grid { grid-template-columns: 1fr; } .dashboard-hero__metrics { min-width: 0; } .dashboard-activity-list { max-height: 360px; } }


.user-admin-note { margin-bottom: 12px; }
.user-admin-note p { margin: 0 0 8px; color: #475569; line-height: 1.45; }
.user-admin-note p:last-child { margin-bottom: 0; }
.user-chip-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.user-chip-list--large { gap: 7px; }
.user-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border: 1px solid #d7e0e8; border-radius: 999px; background: #fff; color: #334155; font-size: 12px; font-weight: 650; white-space: nowrap; }
.user-chip--soft { border-color: #dbe7e4; background: #f4faf8; color: #286b5f; }
.user-role-form { max-width: none; }
.role-choice-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-top: 8px; }
.role-choice-list div { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 10px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fff; }
.role-choice-list label { margin: 0; color: #334155; font-weight: 600; }
.role-choice-list input { width: auto; min-height: 0; }


.user-list-toolbar { justify-content: flex-end; margin-bottom: 8px; }
.user-access-hero .user-access-subtitle { margin: 6px 0 0; color: #64748b; font-size: 14px; }
.user-access-table td { vertical-align: middle; }
.user-row-actions { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.user-row-actions a { display: inline-flex; align-items: center; min-height: 25px; padding: 0 7px; border: 1px solid #d7e0e8; border-radius: 999px; background: #fff; color: #334155; font-size: 12px; font-weight: 650; text-decoration: none; }
.user-row-actions a:hover { border-color: #b7dfd6; background: #f4faf8; color: var(--accent); text-decoration: none; }
.user-role-badge { display: inline-flex; align-items: center; min-height: 23px; padding: 0 8px; border: 1px solid #b7dfd6; border-radius: 999px; background: #eefaf7; color: var(--accent); font-size: 12px; font-weight: 750; white-space: nowrap; }
.user-role-badge--technical { border-color: #f0c36f; background: #fff8e7; color: #9a5b00; }
.activity-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 999px; background: #94a3b8; }
.activity-dot--online { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, .12); }
.activity-dot--recent { background: #d97706; box-shadow: 0 0 0 4px rgba(217, 119, 6, .12); }
.permission-matrix { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.permission-module { border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfdff; padding: 11px; }
.permission-module h3 { margin: 0 0 8px; color: #17232b; font-size: 15px; }
.permission-module ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.permission-module li { display: flex; align-items: center; gap: 7px; color: #94a3b8; font-size: 13px; }
.permission-module li span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: #f1f5f9; color: #94a3b8; font-weight: 800; }
.permission-module li.is-allowed { color: #334155; }
.permission-module li.is-allowed span { background: #eefaf7; color: var(--accent); }

.user-employee-badge { display: inline-flex; align-items: center; max-width: 180px; min-height: 22px; padding: 0 8px; border: 1px solid #b7dfd6; border-radius: 999px; background: #eefaf7; color: #286b5f; font-size: 12px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.user-employee-badge:hover { border-color: #8fcfc1; background: #e5f7f2; color: var(--accent); text-decoration: none; }
.user-employee-badge--missing { border-color: #ead7d2; background: #fff7f5; color: #a64030; }
.user-employee-card .material-section-title { align-items: center; }
.user-employee-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; margin-top: 8px; }
.user-employee-summary__item { min-width: 0; min-height: 58px; padding: 9px 10px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfdff; }
.user-employee-summary__item.is-primary { border-color: #c9e6df; background: #f4faf8; }
.user-employee-summary span { display: block; margin-bottom: 4px; color: #64748b; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .02em; }
.user-employee-summary strong { display: block; min-width: 0; color: #17232b; font-size: 14px; font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-employee-summary strong a { color: inherit; text-decoration: none; }
.user-employee-summary strong a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.user-employee-summary em { color: #94a3b8; font-style: normal; font-weight: 500; }
.inline-post-action { margin-top: 10px; }
.inline-post-action button { min-height: 34px; padding: 7px 11px; }
.user-employee-unlink { display: flex; justify-content: flex-start; margin-top: 8px; }
.user-employee-unlink button { min-height: 31px; padding: 6px 10px; font-size: 12px; }
.detail-item { min-width: 0; }
.detail-item strong { display: block; min-width: 0; overflow-wrap: anywhere; }
.detail-item--truncate strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.danger-zone { border-color: #efc7c2; background: #fffafa; }
.danger-zone p { margin: 0 0 10px; color: #475569; }
.role-card-list { display: grid; gap: 8px; margin-top: 10px; }
.role-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 11px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fff; cursor: pointer; }
.role-card:hover, .role-card.is-selected { border-color: #b7dfd6; background: #f4faf8; }
.role-card input { width: auto; min-height: 0; margin-top: 3px; }
.role-card strong, .role-card small, .role-card em { display: block; }
.role-card strong { color: #17232b; font-size: 15px; }
.role-card small { margin-top: 3px; color: #475569; font-size: 13px; line-height: 1.35; }
.role-card em { margin-top: 4px; color: #64748b; font-size: 12px; font-style: normal; }
.role-card--muted { background: #f8fafc; }
.app-modal--drawer { place-items: stretch end; padding: 0; background: rgba(15, 23, 42, .34); }
.app-modal--drawer .app-modal__dialog { width: min(480px, 100%); height: 100vh; max-height: none; border-radius: 8px 0 0 8px; }
.app-modal--drawer .app-modal__body { max-height: calc(100vh - 58px); }
@media (max-width: 980px) { .user-employee-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .permission-matrix { grid-template-columns: 1fr; } .user-employee-summary { grid-template-columns: 1fr; } .user-row-actions { flex-wrap: wrap; white-space: normal; } .app-modal--drawer .app-modal__dialog { width: 100%; border-radius: 0; } }

.ksef-dashboard { display: grid; gap: 10px; }
.ksef-command-card { padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 20px rgba(15, 23, 42, .04); overflow: hidden; }
.ksef-command-card--warn { border-color: color-mix(in srgb, #f59e0b 55%, var(--line)); background: color-mix(in srgb, #f59e0b 5%, var(--surface)); }
.ksef-command-card--warn > summary { background: color-mix(in srgb, #f59e0b 5%, var(--surface-soft)); }
.ksef-command-card--warn > summary:hover, .ksef-command-card--warn > summary:focus { background: color-mix(in srgb, #f59e0b 9%, var(--surface-soft)); }
.ksef-command-body { display: grid; gap: 11px; }
.ksef-command-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 0; }
.ksef-command-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ksef-command-title h1 { margin: 0; color: #17232b; font-size: 24px; line-height: 1.08; letter-spacing: 0; }
.ksef-command-action { display: flex; justify-content: flex-end; flex: 0 0 auto; }
.ksef-command-action form { margin: 0; }
.ksef-hero-action { min-height: 36px; gap: 8px; white-space: nowrap; }
.ksef-hero-action:disabled { border-color: #cbd5e1; background: #e2e8f0; color: #64748b; cursor: not-allowed; }
.ksef-metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(116px, 1fr)); gap: 8px; }
.ksef-metric { min-width: 0; min-height: 58px; padding: 9px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.ksef-metric span { display: block; margin-bottom: 5px; color: #64748b; font-size: 11px; font-weight: 750; line-height: 1.15; text-transform: uppercase; }
.ksef-metric strong { display: block; min-width: 0; color: #17232b; font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ksef-metric--wide { grid-column: span 2; }
.ksef-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid #dfe6ee; border-radius: 8px; background: #f8fafc; color: #334155; }
.ksef-alert--warn { border-color: #f0c36f; background: #fff8e7; color: #7a4b00; }
.ksef-alert--error { border-color: #efc7c2; background: #fff6f5; color: #b42318; }
.ksef-alert__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; border: 1px solid currentColor; font-size: 12px; font-weight: 800; line-height: 1; }
.ksef-alert strong, .ksef-alert span { display: block; line-height: 1.35; }
.ksef-alert strong { color: #17232b; font-size: 13px; }
.ksef-alert span { margin-top: 1px; font-size: 13px; }
.ksef-inline-feedback { margin: 8px 0 0; padding: 8px 10px; border: 1px solid #b7dfd6; border-radius: 7px; background: #eefaf7; color: #0f766e; font-size: 12px; font-weight: 750; line-height: 1.35; }
.ksef-inline-feedback.is-error { border-color: #efc7c2; background: #fff6f5; color: #b42318; }
:root[data-theme="dark"] .ksef-inline-feedback { border-color: #285f56; background: #132d29; color: #8dd8c9; }
:root[data-theme="dark"] .ksef-inline-feedback.is-error { border-color: #713b38; background: #321d1c; color: #f2aaa3; }
.ksef-accordion { padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 8px 20px rgba(15, 23, 42, .035); overflow: hidden; }
.ksef-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 50px; padding: 10px 14px; list-style: none; color: var(--ink); cursor: pointer; background: var(--surface-soft); transition: background .12s ease, border-color .12s ease; }
.ksef-accordion > summary::-webkit-details-marker, .ksef-inner-help > summary::-webkit-details-marker { display: none; }
.ksef-accordion > summary:hover, .ksef-accordion > summary:focus { background: color-mix(in srgb, var(--accent) 5%, var(--surface-soft)); outline: none; }
.ksef-accordion__title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ksef-accordion__title strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.2; }
.ksef-accordion__title small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.25; }
.ksef-accordion__chevron { position: relative; flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.ksef-accordion__chevron::after { content: ""; position: absolute; left: 8px; top: 7px; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .12s ease, top .12s ease; }
.ksef-accordion[open] > summary .ksef-accordion__chevron::after, .ksef-inner-help[open] > summary .ksef-accordion__chevron::after { top: 9px; transform: rotate(225deg); }
.ksef-accordion__body { padding: 14px; border-top: 1px solid var(--line); }
.ksef-config-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
.ksef-config-grid div { min-width: 0; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.ksef-config-grid dt { margin-bottom: 6px; color: #64748b; font-size: 11px; font-weight: 750; line-height: 1.15; text-transform: uppercase; }
.ksef-config-grid dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin: 0; color: #17232b; font-size: 13px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.ksef-config-grid dd > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ksef-config-divider { height: 1px; margin: 14px 0; background: #dfe6ee; }
.ksef-config-form-head { margin-bottom: 10px; }
.ksef-config-form-head h2 { margin: 0; color: #17232b; font-size: 17px; line-height: 1.2; }
.ksef-config-form-head p { margin: 4px 0 0; color: #64748b; font-size: 13px; line-height: 1.35; }
.ksef-card-note { margin: 9px 0 0; color: #64748b; font-size: 13px; line-height: 1.4; }
.ksef-config-form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.ksef-form-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(170px, .7fr) minmax(150px, .55fr); gap: 11px; align-items: start; }
.ksef-token-field { grid-column: 1 / -1; }
.ksef-config-form label { display: block; margin-bottom: 5px; color: #475569; font-size: 12px; font-weight: 700; }
.ksef-config-form input { min-height: 37px; }
.ksef-config-form small { display: block; margin-top: 5px; color: #64748b; font-size: 12px; line-height: 1.35; }
.ksef-config-form .errorlist { margin: 5px 0 0; padding: 0; list-style: none; color: #b42318; font-size: 12px; }
.ksef-clear-token { display: inline-flex; align-items: center; gap: 7px; grid-column: 1 / -1; min-height: 28px; margin: 0; color: #334155; font-size: 13px; font-weight: 650; }
.ksef-clear-token input { width: auto; min-height: 0; }
.ksef-clear-token span { line-height: 1.3; }
.ksef-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ksef-form-actions button, .ksef-form-actions .button { min-height: 34px; }
.ksef-inner-help { margin-top: 14px; border: 1px solid #dbe5ee; border-radius: 8px; background: #fff; }
.ksef-inner-help > summary { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 9px 11px; list-style: none; color: #17232b; font-size: 14px; font-weight: 750; cursor: pointer; background: #f8fafc; }
.ksef-inner-help > summary:hover, .ksef-inner-help > summary:focus { background: #f1f6fa; outline: none; }
.ksef-steps { margin: 0; padding: 0 14px 12px 34px; color: #334155; font-size: 13px; line-height: 1.48; }
.ksef-steps li + li { margin-top: 7px; }
.ksef-panel { padding: 13px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, .035); }
.ksef-invoice-panel { padding-top: 12px; }
.ksef-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ksef-list-head h2 { margin: 0; color: #17232b; font-size: 18px; line-height: 1.2; }
.ksef-list-head p { margin: 3px 0 0; color: #64748b; font-size: 13px; }
.ksef-quick-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ksef-quick-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid #dfe6ee; border-radius: 999px; background: #fff; color: #334155; font-size: 13px; font-weight: 650; text-decoration: none; }
.ksef-quick-filter:hover, .ksef-quick-filter.is-active { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); }
.ksef-quick-filter.has-unseen { border-color: #f2aaa3; background: #fff3f1; color: #b42318; }
.ksef-quick-filter.has-unseen:hover, .ksef-quick-filter.has-unseen.is-active { border-color: #f08a82; background: #ffe7e3; color: #b42318; }
.ksef-unseen-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: #d92d20; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; }
.ksef-filters { grid-template-columns: minmax(280px, 1fr) minmax(118px, 150px) minmax(128px, 155px) minmax(128px, 155px) auto; gap: 7px; margin-bottom: 11px; padding: 9px; }
.ksef-clear-button { min-height: 33px; padding: 0 10px; font-size: 13px; }
.ksef-counterparty { display: grid; gap: 3px; min-width: 0; }
.ksef-counterparty-name { color: #17232b; font-size: 13px; font-weight: 600; line-height: 1.25; }
.ksef-counterparty--unseen .ksef-counterparty-name { color: #b42318; font-weight: 800; }
.ksef-counterparty-link { width: fit-content; max-width: 100%; border-radius: 6px; color: inherit; text-decoration: none; }
.ksef-counterparty-link:hover .ksef-counterparty-name { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ksef-project-form { min-width: 130px; max-width: 190px; margin: 0; padding: 0; border: 0; background: transparent; }
.ksef-project-select { min-height: 28px; padding: 3px 24px 3px 7px; border-color: #dfe6ee; background-color: #fbfdff; color: #475569; font-size: 11px; font-weight: 600; }
.ksef-project-select--empty { border-color: #edf2f7; background-color: #fbfdff; color: #94a3b8; font-weight: 500; }
.ksef-project-select--assigned { border-color: #9fd8ca; background-color: #ecfdf8; color: #0f766e; }
.ksef-status-form { min-width: 116px; max-width: 150px; margin: 0; padding: 0; border: 0; background: transparent; }
.ksef-status-select { min-height: 28px; padding: 3px 24px 3px 7px; border-color: #dfe6ee; background-color: #fbfdff; color: #475569; font-size: 11px; font-weight: 700; }
.ksef-status-select--new, .ksef-status-badge--new { border-color: #edf2f7; background-color: #fbfdff; color: #94a3b8; font-weight: 500; }
.ksef-status-select--checked, .ksef-status-badge--checked { border-color: #b7dfd6; background-color: #eefaf7; color: #0f766e; }
.ksef-status-select--booked, .ksef-status-badge--booked { border-color: #b7dfd6; background-color: #ecfdf8; color: #0f766e; }
.ksef-status-select--ignored, .ksef-status-badge--ignored { border-color: #dbe5ee; background-color: #f1f5f9; color: #64748b; }
.ksef-status-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border: 1px solid #dbe5ee; border-radius: 999px; font-size: 11px; font-weight: 750; line-height: 1; white-space: nowrap; }
.ksef-type-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.ksef-invoice-type-badge { display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; border: 1px solid #dbe5ee; border-radius: 999px; background: #f8fafc; color: #64748b; font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; }
.ksef-issue-date { color: #475569; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.ksef-paid-form { display: inline-flex; justify-content: center; width: 24px; min-width: 24px; margin: 0; padding: 0; border: 0; background: transparent; }
.ksef-paid-check { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; cursor: pointer; }
.ksef-paid-check:hover { background: #f8fafc; }
.ksef-paid-checkbox { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ksef-paid-checkbox-ui { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border: 1.5px solid #ef4444; border-radius: 2px; background: #ffecec; box-sizing: border-box; transition: border-color .12s ease, background .12s ease, box-shadow .12s ease; }
.ksef-paid-checkbox:focus-visible + .ksef-paid-checkbox-ui { box-shadow: 0 0 0 3px rgba(15, 118, 110, .16); }
.ksef-paid-checkbox:checked + .ksef-paid-checkbox-ui { border-color: #2f9e44; background: #42b44d; }
.ksef-paid-checkbox:checked + .ksef-paid-checkbox-ui::after { content: ""; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.ksef-paid-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border: 1px solid #dbe5ee; border-radius: 999px; font-size: 11px; font-weight: 750; line-height: 1; white-space: nowrap; }
.ksef-paid-badge--yes { border-color: #b7dfd6; background: #eefaf7; color: #0f766e; }
.ksef-paid-badge--no { border-color: #dbe5ee; background: #f8fafc; color: #64748b; }
.ksef-project-form.is-saving select, .ksef-status-form.is-saving select, .ksef-paid-form.is-saving { opacity: .55; pointer-events: none; }
.ksef-project-form.is-saved select, .ksef-status-form.is-saved select, .ksef-paid-form.is-saved .ksef-paid-checkbox-ui { box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }
.ksef-project-form.is-error select, .ksef-status-form.is-error select, .ksef-paid-form.is-error .ksef-paid-checkbox-ui { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .12); }
.ksef-invoice-number { display: inline-block; max-width: 180px; color: #64748b; font-size: 11.5px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }

.ksef-lines-cell { white-space: nowrap; }
.ksef-lines-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 0 7px; border: 1px solid #dbe5ee; border-radius: 999px; font-size: 11px; font-weight: 750; line-height: 1; white-space: nowrap; }
.ksef-lines-badge--ok { border-color: #b7dfd6; background: #eefaf7; color: #0f766e; }
.ksef-lines-badge--missing { border-color: #dbe5ee; background: #f8fafc; color: #64748b; }
.ksef-lines-badge--error { border-color: #efc7c2; background: #fff6f5; color: #b42318; }
.ksef-table .num { text-align: right; white-space: nowrap; }

.ksef-warehouse-cell { white-space: nowrap; }
.ksef-warehouse-queue-hint { display: block; margin-top: 4px; color: var(--danger, #b42318); font-size: 10.5px; font-weight: 750; line-height: 1.1; }
.ksef-warehouse-queue-message { margin-top: 8px; }
.ksef-warehouse-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 0 7px; border: 1px solid var(--border-subtle, #dfe6ee); border-radius: 999px; background: var(--surface-muted, #f8fafc); color: var(--muted-strong, #475569); font-size: 11px; font-weight: 750; line-height: 1; white-space: nowrap; }
.ksef-warehouse-badge--needs_decision, .ksef-warehouse-badge--no_lines { border-color: var(--warn-border, #f0c36f); background: var(--warn-bg, #fff8e7); color: var(--warn, #b7791f); }
.ksef-warehouse-badge--partial { border-color: var(--info-border, #bfd7f5); background: var(--info-bg, #eef6ff); color: var(--info, #1d4f8f); }
.ksef-warehouse-badge--received { border-color: var(--success-border, #b7dfd6); background: var(--success-bg, #eefaf7); color: var(--success, #1f7668); }
.ksef-warehouse-badge--skipped { border-color: var(--border-subtle, #dfe6ee); background: var(--surface-muted, #f8fafc); color: var(--muted, #64748b); }
.ksef-warehouse-status-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ksef-warehouse-status-text, .ksef-warehouse-receipt-note { margin: 0; color: var(--muted, #64748b); font-size: 12px; line-height: 1.35; }
.ksef-warehouse-status-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.ksef-warehouse-receipt-modal { display: grid; gap: 10px; }
.ksef-warehouse-receipt-form { display: grid; gap: 10px; margin: 0; }
.ksef-warehouse-receipt-wrap { max-height: min(62vh, 640px); overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.ksef-warehouse-receipt-list { display: grid; gap: 8px; }
.ksef-warehouse-receipt-row { display: grid; gap: 9px; padding: 10px; border: 1px solid var(--border-subtle, #dfe6ee); border-radius: 8px; background: var(--panel, #fff); }
.ksef-warehouse-receipt-row.is-receive { border-color: rgba(15, 118, 110, .28); background: var(--success-bg, #eefaf7); }
.ksef-warehouse-receipt-row.is-skip { border-color: rgba(180, 83, 9, .28); background: var(--warn-bg, #fff8e7); }
.ksef-warehouse-receipt-row.is-decided { opacity: .72; background: var(--surface-muted, #f8fafc); }
.ksef-warehouse-receipt-row__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 180px); gap: 10px; align-items: start; }
.ksef-warehouse-source-cell strong { display: block; color: var(--ink, #18202c); font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.ksef-warehouse-source-cell small { display: block; margin-top: 3px; color: var(--muted, #64748b); font-size: 11px; line-height: 1.25; }
.ksef-warehouse-decision-cell label, .ksef-warehouse-field { display: grid; gap: 4px; min-width: 0; margin: 0; }
.ksef-warehouse-decision-cell span, .ksef-warehouse-field > span { color: var(--muted, #64748b); font-size: 10px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.ksef-warehouse-receipt-row select, .ksef-warehouse-receipt-row input { width: 100%; min-height: 30px; margin: 0; font-size: 12px; }
.ksef-warehouse-field small { color: var(--muted, #64748b); font-size: 10.5px; font-weight: 600; line-height: 1.25; }
.ksef-warehouse-receive-fields { display: grid; grid-template-columns: minmax(180px, 1.45fr) minmax(150px, 1fr) minmax(130px, .9fr) minmax(86px, .55fr) minmax(98px, .65fr) minmax(104px, .65fr); gap: 7px; align-items: start; }
.ksef-warehouse-skip-fields { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.2fr); gap: 7px; align-items: start; }
.ksef-warehouse-field--material { min-width: 220px; }
.ksef-warehouse-field--note { min-width: 220px; }
.ksef-warehouse-receive-fields[hidden], .ksef-warehouse-skip-fields[hidden] { display: none !important; }
@media (max-width: 1060px) { .ksef-warehouse-receive-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ksef-warehouse-status-head { align-items: flex-start; flex-direction: column; } .ksef-warehouse-receipt-row__head, .ksef-warehouse-receive-fields, .ksef-warehouse-skip-fields { grid-template-columns: 1fr; } }
.ksef-empty { display: grid; gap: 5px; padding: 28px 12px; text-align: center; }
.ksef-empty strong { color: #17232b; font-size: 15px; }
.ksef-empty span { color: #64748b; }

.ksef-invoice-modal { display: grid; gap: 10px; }
.ksef-invoice-modal__hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 13px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfdff; }
.ksef-invoice-modal__eyebrow { display: block; margin-bottom: 4px; color: #64748b; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.ksef-invoice-modal__hero h3 { margin: 0; color: #17232b; font-size: 21px; line-height: 1.15; overflow-wrap: anywhere; }
.ksef-invoice-modal__hero p { margin: 5px 0 0; color: #475569; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.ksef-invoice-modal__details { display: grid; gap: 8px; padding: 10px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfdff; }
.ksef-invoice-modal__details-head h4 { margin: 0; color: #17232b; font-size: 14px; line-height: 1.2; }
.ksef-invoice-modal__amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; }
.ksef-invoice-modal__amounts div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; padding: 7px 10px; border: 0; border-right: 1px solid #e2e8f0; background: #fff; }
.ksef-invoice-modal__amounts div:last-child { border-right: 0; }
.ksef-invoice-modal__grid div { min-width: 0; padding: 8px 9px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; }
.ksef-invoice-modal__amounts .is-primary { background: #eefaf7; }
.ksef-invoice-modal__amounts > div > span, .ksef-invoice-modal__grid dt { display: block; margin-bottom: 4px; color: #64748b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.ksef-invoice-modal__amounts > div > span { flex: 0 0 auto; margin-bottom: 0; }
.ksef-invoice-modal__amounts strong { display: inline-flex; align-items: baseline; justify-content: flex-end; flex: 0 0 auto; min-width: max-content; color: #17232b; font-size: 13px; line-height: 1.15; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.ksef-invoice-modal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; }
.ksef-invoice-modal__grid dd { margin: 0; color: #17232b; font-size: 12px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.ksef-invoice-modal__grid small { display: block; margin-top: 2px; color: #64748b; font-size: 11px; font-weight: 600; }
.ksef-invoice-modal__grid .breakable { overflow-wrap: anywhere; }
.ksef-invoice-modal__note { padding: 9px 11px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfdff; color: #64748b; font-size: 12px; line-height: 1.35; }
.ksef-invoice-modal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ksef-invoice-modal__download { border-color: #0f766e !important; background: #0f766e !important; color: #fff !important; }
.ksef-invoice-modal__download:hover { background: #0b5f59 !important; color: #fff !important; }
@media (max-width: 640px) { .ksef-invoice-modal__hero, .ksef-invoice-modal__grid, .ksef-invoice-modal__amounts { grid-template-columns: 1fr; } .ksef-invoice-modal__hero { display: grid; } .ksef-invoice-modal__amounts div { border-right: 0; border-bottom: 1px solid #e2e8f0; } .ksef-invoice-modal__amounts div:last-child { border-bottom: 0; } }


.ksef-technical-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ksef-technical-status div { min-width: 0; padding: 9px 10px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfdff; }
.ksef-technical-status span { display: block; margin-bottom: 4px; color: #64748b; font-size: 10px; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.ksef-technical-status strong { display: block; color: #17232b; font-size: 13px; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; }
.ksef-technical-status small { display: block; margin-top: 3px; color: #64748b; font-size: 11px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.ksef-diagnostics-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.ksef-diagnostics-grid h3 { margin: 0 0 8px; color: #17232b; font-size: 14px; line-height: 1.25; }
.ksef-diagnostics-table-wrap { max-height: 260px; overflow: auto; border: 1px solid #dfe6ee; border-radius: 8px; }
.ksef-diagnostics-table { min-width: 620px; }
.ksef-diagnostics-table th, .ksef-diagnostics-table td { padding: 8px 9px; font-size: 12px; vertical-align: top; }
@media (max-width: 1120px) { .ksef-metrics-grid, .ksef-technical-status { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ksef-metric--wide { grid-column: span 2; } .ksef-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ksef-diagnostics-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .ksef-command-top, .ksef-list-head { align-items: flex-start; flex-direction: column; } .ksef-command-action, .ksef-command-action form, .ksef-hero-action { width: 100%; justify-content: center; } .ksef-filters { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .ksef-metrics-grid, .ksef-technical-status, .ksef-config-grid, .ksef-filters, .ksef-form-grid { grid-template-columns: 1fr; } .ksef-metric--wide { grid-column: auto; } .ksef-accordion > summary { align-items: flex-start; flex-direction: column; } .ksef-accordion__title { align-items: flex-start; } }




.company-card { display: flex; flex-direction: column; min-width: 0; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; box-shadow: none; }
.company-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.company-card__head h2 { margin: 1px 0 0; color: #334155; font-size: 15px; line-height: 1.2; }
.company-card__edit { display: inline-flex; align-items: center; min-height: 25px; padding: 0 7px; border: 1px solid #d7e0e8; border-radius: 6px; background: #fff; color: #475569; font-size: 11px; font-weight: 650; text-decoration: none; }
.company-card__edit:hover { border-color: #b7dfd6; background: #f4faf8; color: var(--accent); text-decoration: none; }
.company-card__address { margin: 0 0 6px; color: #64748b; font-size: 11px; line-height: 1.3; }
.company-card__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: auto 0 0; }
.company-card__details div { min-width: 0; padding: 5px 6px; border: 1px solid #e6ebf1; border-radius: 6px; background: #fafbfc; }
.company-card__details dt { margin-bottom: 2px; color: #7c8da3; font-size: 8px; font-weight: 750; line-height: 1.1; text-transform: uppercase; }
.company-card__details dd { margin: 0; color: #334155; font-size: 11px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; user-select: text; }
.company-card__wide { grid-column: 1 / -1; }
.company-profile-form { max-width: none; }
.company-profile-form .form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 1040px) { .company-card__details { grid-template-columns: repeat(3, minmax(0, 1fr)); } .company-card__wide { grid-column: span 2; } }
@media (max-width: 760px) { .company-card__head { flex-direction: column; } .company-card__details { grid-template-columns: 1fr; } .company-card__wide { grid-column: auto; } }

.access-debug-panel { width: min(1360px, calc(100% - 32px)); margin: 28px auto 18px; color: #1f2937; font-size: 12px; }
.access-debug-panel details { border: 1px solid #cbd5e1; background: #f8fafc; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.access-debug-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; cursor: pointer; font-weight: 700; color: #334155; }
.access-debug-panel summary strong { font-size: 12px; color: #0f766e; }
.access-debug-panel__body { border-top: 1px solid #d8e1ec; padding: 12px; }
.access-debug-panel__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 12px; }
.access-debug-panel__meta div { border: 1px solid #dbe4ee; background: #fff; border-radius: 6px; padding: 8px; min-width: 0; }
.access-debug-panel__meta span { display: block; color: #64748b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.access-debug-panel__meta strong { display: block; margin-top: 3px; overflow-wrap: anywhere; color: #111827; }
.access-debug-panel h2 { margin: 12px 0 7px; font-size: 12px; text-transform: uppercase; color: #475569; }
.access-debug-panel__scroll { overflow-x: auto; border: 1px solid #dbe4ee; border-radius: 6px; background: #fff; }
.access-debug-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.access-debug-table th, .access-debug-table td { padding: 7px 8px; border-bottom: 1px solid #e5edf5; text-align: left; vertical-align: top; }
.access-debug-table th { background: #eef3f8; color: #334155; font-size: 10px; text-transform: uppercase; white-space: nowrap; }
.access-debug-table td { color: #253044; }
.access-debug-table tr:last-child td { border-bottom: 0; }
.access-debug-table--matrix th:nth-child(n+3):not(:last-child), .access-debug-table--matrix td:nth-child(n+3):not(:last-child) { text-align: center; }
.access-debug-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; border-radius: 999px; padding: 2px 7px; font-size: 10px; font-weight: 800; }
.access-debug-badge--yes { background: #dcfce7; color: #166534; }
.access-debug-badge--no { background: #fee2e2; color: #991b1b; }
@media (max-width: 760px) { .access-debug-panel { width: calc(100% - 18px); margin: 18px auto 12px; } .access-debug-panel summary { align-items: flex-start; flex-direction: column; } .access-debug-table { min-width: 720px; } }


.ksef-invoice-lines { display: grid; gap: 10px; padding: 12px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fff; }
.ksef-invoice-lines__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ksef-invoice-lines__head h4 { margin: 0; color: #17232b; font-size: 15px; line-height: 1.2; }
.ksef-invoice-lines__head p { margin: 3px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.ksef-invoice-lines__status { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border: 1px solid #dbe5ee; border-radius: 999px; background: #f8fafc; color: #475569; font-size: 11px; font-weight: 750; white-space: nowrap; }
.ksef-invoice-modal__message { padding: 9px 10px; border-radius: 7px; font-size: 13px; line-height: 1.35; }
.ksef-invoice-modal__message--ok { border: 1px solid #b7dfd6; background: #eefaf7; color: #0f766e; }
.ksef-invoice-modal__message--error { border: 1px solid #efc7c2; background: #fff6f5; color: #b42318; }
.ksef-invoice-lines__table-wrap { max-height: 300px; overflow-x: hidden; overflow-y: auto; border: 1px solid #dfe6ee; border-radius: 8px; }
.ksef-invoice-lines table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.ksef-invoice-lines th, .ksef-invoice-lines td { padding: 7px 6px; border-bottom: 1px solid #e5edf5; text-align: left; vertical-align: top; font-size: 11px; }
.ksef-invoice-lines th { background: #f1f5f8; color: #334155; font-size: 10px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.ksef-invoice-lines .ksef-line-lp { width: 34px; }
.ksef-invoice-lines .ksef-line-quantity { width: 66px; }
.ksef-invoice-lines .ksef-line-unit { width: 44px; }
.ksef-invoice-lines .ksef-line-unit-price { width: 104px; }
.ksef-invoice-lines .ksef-line-net { width: 94px; }
.ksef-invoice-lines .ksef-line-vat { width: 46px; }
.ksef-invoice-lines .ksef-line-gross { width: 94px; }
.ksef-invoice-lines td.ksef-line-name { overflow-wrap: anywhere; word-break: break-word; }
.ksef-invoice-lines tr:last-child td { border-bottom: 0; }
.ksef-invoice-lines .num { text-align: right; white-space: nowrap; }
.ksef-copy-cell { position: relative; border-radius: 5px; cursor: copy; transition: background-color .16s ease, color .16s ease, box-shadow .16s ease; }
.ksef-copy-cell:hover, .ksef-copy-cell:focus-visible { background: #fff7f5; color: #b42318; outline: none; box-shadow: inset 0 0 0 1px #f2b8b2; }
.ksef-copy-cell[data-ksef-copy-value=""] { cursor: default; }
.ksef-copy-cell[data-ksef-copy-value=""]:hover, .ksef-copy-cell[data-ksef-copy-value=""]:focus-visible { background: inherit; color: inherit; box-shadow: none; }
.ksef-copy-cell.is-copied { animation: ksefCopyPulse .72s ease; color: #b42318; }
.ksef-copy-cell.is-copied::after { content: "Skopiowano"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 2px 6px; border-radius: 999px; background: #b42318; color: #fff; font-size: 9px; font-weight: 800; line-height: 1.3; pointer-events: none; }
@keyframes ksefCopyPulse { 0% { background: #fff; box-shadow: inset 0 0 0 1px transparent; } 35% { background: #fff0ef; box-shadow: inset 0 0 0 1px #ea8077; } 100% { background: transparent; box-shadow: inset 0 0 0 1px transparent; } }
.ksef-invoice-lines__empty { padding: 14px 12px; border: 1px dashed #cfd8e3; border-radius: 8px; background: #fbfcfd; color: #64748b; font-size: 13px; text-align: center; }
.ksef-invoice-lines__actions { display: flex; justify-content: flex-end; }
.ksef-invoice-lines-form { margin: 0; padding: 0; border: 0; background: transparent; }
.ksef-invoice-modal__download:disabled { border-color: #d7e0e8 !important; background: #e9eef4 !important; color: #64748b !important; cursor: not-allowed; }
@media (max-width: 640px) { .ksef-invoice-lines__head { flex-direction: column; } .ksef-invoice-lines__actions { justify-content: stretch; } .ksef-invoice-lines__actions .button { width: 100%; } }

.ksef-money { display: inline-grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: baseline; justify-content: end; gap: 1px; width: max-content; max-width: none; font-variant-numeric: tabular-nums; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.ksef-money__main { color: #17232b; font-weight: 700; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.ksef-money__cents { color: #8a98aa; font-size: .82em; font-weight: 650; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.ksef-money__currency { margin-left: 3px; color: #64748b; font-size: .78em; font-weight: 700; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; }
.ksef-money-cell { text-align: right; white-space: nowrap; }
.ksef-money-inline { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 3px; color: #475569; font-size: 12px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ksef-money-inline__currency { color: #94a3b8; font-size: 10px; font-weight: 600; line-height: 1; }
.ksef-invoice-modal__amounts .ksef-money { display: inline-flex; align-items: baseline; flex-wrap: nowrap; justify-content: end; white-space: nowrap; }
.ksef-invoice-modal__amounts .ksef-money__main { font-size: 13px; }
.ksef-invoice-modal__amounts .ksef-money__cents { font-size: 11px; }
.ksef-invoice-modal__amounts .ksef-money__currency { font-size: 10px; }
.ksef-invoice-modal__amounts .ksef-money__main, .ksef-invoice-modal__amounts .ksef-money__cents, .ksef-invoice-modal__amounts .ksef-money__currency { display: inline; margin: 0; text-transform: none; }

.settings-page { display: grid; gap: 12px; }
.settings-page-head { margin-bottom: 0; }
.settings-section-nav { position: sticky; top: 8px; z-index: 15; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid #d7dde5; border-radius: 8px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); box-shadow: 0 8px 18px rgba(15, 23, 42, .04); }
.settings-section-nav a { display: inline-flex; flex-direction: column; justify-content: center; min-width: 126px; min-height: 42px; padding: 6px 10px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fbfcfd; color: #334155; text-decoration: none; }
.settings-section-nav a:hover, .settings-section-nav a:focus-visible { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); }
.settings-section-nav a.is-active { border-color: #87cfc1; background: #e4f6f1; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(31, 118, 104, .12); }
.settings-section-nav a.is-active small { color: #1f7668; }
.settings-section-nav span { font-size: 13px; font-weight: 750; line-height: 1.15; }
.settings-section-nav small { margin-top: 2px; color: #64748b; font-size: 11px; font-weight: 650; line-height: 1.15; }
.settings-group { display: grid; gap: 10px; scroll-margin-top: 78px; }
.settings-group + .settings-group { margin-top: 6px; }
.settings-group-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 3px 2px 0; }
.settings-group-head h2 { margin: 0; color: #18202c; font-size: 20px; line-height: 1.2; }
.settings-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 10px; align-items: stretch; }
.settings-overview-grid--account { grid-template-columns: minmax(0, 1fr); }
.settings-panel { border: 1px solid #d7dde5; border-radius: 8px; background: #fff; }
.settings-account-panel, .settings-admin-card { padding: 12px 14px; }
.settings-panel-head { margin-bottom: 8px; }
.settings-panel-head h2, .settings-section-head h2 { margin: 0; font-size: 17px; line-height: 1.2; }
.settings-account-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.settings-account-list div { min-width: 0; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fbfcfd; }
.settings-account-list dt { margin: 0 0 3px; color: #64748b; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.settings-account-list dd { margin: 0; color: #18202c; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.settings-admin-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.settings-admin-card .settings-panel-head { margin: 0; }
.settings-admin-card p { grid-column: 1; margin: 0; font-size: 13px; line-height: 1.35; }
.settings-technical-link { grid-column: 2; grid-row: 1 / span 2; min-height: 32px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
.settings-location-card { margin-top: 2px; overflow: hidden; }
.settings-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #dfe6ee; background: #fbfcfd; }
.settings-primary-action { min-height: 32px; gap: 7px; padding: 0 10px; border-color: #b7dfd6; background: #eefaf7; color: var(--accent); font-size: 13px; font-weight: 750; }
.settings-location-table { border: 0; }
.settings-location-table th { padding: 8px 10px; background: #f1f5f8; font-size: 11px; }
.settings-location-table td { padding: 8px 10px; vertical-align: middle; }
.settings-location-name { color: #18202c; font-weight: 750; line-height: 1.25; }
.settings-location-main { display: flex; align-items: center; gap: 9px; min-width: 0; }
.settings-order-controls { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.settings-order-controls form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.settings-order-button { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; min-height: 25px; padding: 0; border: 1px solid #d7e0e8; border-radius: 6px; background: #fff; color: #64748b; }
.settings-order-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.settings-order-button:hover:not(:disabled) { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); }
.settings-order-button:disabled { opacity: .35; cursor: not-allowed; }
.settings-usage-total { color: #334155; font-size: 13px; font-weight: 700; white-space: nowrap; }
.settings-usage-total.is-empty { color: #94a3b8; font-weight: 650; }
.settings-location-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; color: #64748b; font-size: 12px; }
.settings-location-meta code { padding: 1px 5px; border: 1px solid #dfe6ee; border-radius: 999px; background: #f8fafc; color: #475569; font-size: 11px; }
.settings-usage-list { display: flex; flex-wrap: wrap; gap: 4px; max-width: 430px; }
.settings-usage-list span, .settings-delete-counts span { display: inline-flex; align-items: center; min-height: 21px; padding: 0 6px; border: 1px solid #d7e0e8; border-radius: 999px; background: #f8fafc; color: #475569; font-size: 11px; font-weight: 650; white-space: nowrap; }
.settings-row-actions { display: flex; flex-wrap: nowrap; gap: 5px; align-items: center; justify-content: flex-end; }
.settings-row-actions form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.settings-action-button { min-height: 30px; padding: 0 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.settings-action-danger { border-color: #efc7c2; background: #fff; color: #a3352b; }
.settings-delete-counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.settings-location-form { max-width: 760px; }
.confirm-check { display: flex; gap: 8px; align-items: center; margin: 14px 0; font-weight: 700; }
.settings-location-service { margin-top: 12px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fbfcfd; }
.settings-location-service__head { margin-bottom: 8px; }
.settings-location-service__head h2 { margin: 0; font-size: 15px; line-height: 1.25; }
.settings-location-service form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.settings-danger-details { margin-top: 8px; border-top: 1px solid #e2e8f0; padding-top: 8px; }
.settings-danger-details summary { display: inline-flex; align-items: center; min-height: 28px; color: #a3352b; font-size: 12px; font-weight: 750; cursor: pointer; }
.settings-danger-details p { margin: 6px 0 8px; font-size: 13px; line-height: 1.4; }
.settings-location-fields { grid-template-columns: minmax(0, 1fr); align-items: end; }
.settings-location-fields .field-wide { grid-column: 1 / -1; }
.toggle-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 39px; box-sizing: border-box; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fbfcfd; }
.toggle-field > div { min-width: 0; }
.toggle-field__label { display: block; color: #334155; font-size: 13px; font-weight: 750; line-height: 1.2; }
.toggle-field__hint { display: block; margin-top: 2px; color: #64748b; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.toggle-switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 42px; height: 24px; margin-left: auto; cursor: pointer; }
.toggle-switch input[type="checkbox"] { position: absolute; inset: 0; width: 42px; height: 24px; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.toggle-switch__track { display: block; width: 42px; height: 24px; border-radius: 999px; background: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06); transition: background .16s ease, box-shadow .16s ease; }
.toggle-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28); transition: transform .16s ease; }
.toggle-switch input[type="checkbox"]:checked + .toggle-switch__track { background: var(--accent); }
.toggle-switch input[type="checkbox"]:checked + .toggle-switch__track::after { transform: translateX(18px); }
.toggle-switch input[type="checkbox"]:focus-visible + .toggle-switch__track { box-shadow: 0 0 0 3px rgba(31, 118, 104, .22); }
.toggle-field-danger { align-items: flex-start; border-color: #f0d2ce; background: #fffafa; color: #7f1d1d; font-size: 13px; font-weight: 700; line-height: 1.35; }
.toggle-field-danger .toggle-switch input[type="checkbox"]:checked + .toggle-switch__track { background: #b42318; }
@media (max-width: 900px) { .settings-section-nav { position: static; } .settings-section-nav a { flex: 1 1 160px; } .settings-overview-grid { grid-template-columns: 1fr; } .settings-admin-card { grid-template-columns: 1fr; } .settings-technical-link { grid-column: auto; grid-row: auto; justify-self: start; } }
@media (max-width: 760px) { .settings-section-nav { display: grid; grid-template-columns: 1fr 1fr; } .settings-section-nav a { min-width: 0; } .settings-account-list { grid-template-columns: 1fr; } .settings-section-head { align-items: flex-start; flex-direction: column; } .settings-row-actions { flex-wrap: wrap; justify-content: flex-start; } .settings-row-actions .button, .settings-row-actions button { justify-content: center; } }

.steel-editor-head { align-items: center; }
.steel-editor-head .material-kicker { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; }
.steel-editor-state { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: 1px solid #cfe4df; border-radius: 6px; background: #eefaf7; color: var(--accent); font-size: 13px; }
.steel-editor-state span { color: #475569; font-weight: 650; }
.steel-editor-state strong { font-weight: 750; }
.steel-editor-shell { display: grid; gap: 8px; }
.steel-editor-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .04); }
.steel-editor-topbar h2 { margin: 0; color: #17232b; font-size: 18px; line-height: 1.12; }
.steel-workspace-switcher { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin-left: auto; }
.steel-workspace-switcher > span { flex: none; color: #64748b; font-size: 11px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.steel-editor { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.steel-workspace-tabs { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .04); }
.steel-workspace-tabs--inline { flex-wrap: nowrap; gap: 4px; padding: 3px; border-color: #dbe5ef; box-shadow: none; }
.steel-workspace-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid transparent; border-radius: 6px; background: #fff; color: #475569; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.steel-workspace-tabs--inline .steel-workspace-tab { min-height: 30px; padding: 0 9px; font-size: 12px; white-space: nowrap; }
.steel-workspace-tab svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.steel-workspace-tab:hover, .steel-workspace-tab.is-active { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); }
.steel-workspace[hidden] { display: none; }
.steel-workbench, .steel-sidebar-section { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .04); }
.steel-workbench { min-width: 0; padding: 13px; }
.steel-sidebar { display: flex; flex-direction: column; gap: 8px; }
.steel-sidebar-section { padding: 10px; }
.steel-sidebar-switcher { display: grid; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .04); }
.steel-sidebar-switcher-head { display: flex; align-items: center; min-height: 14px; }
.steel-sidebar-switcher-head .dashboard-eyebrow { font-size: 10px; line-height: 1; }
.steel-sidebar-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.steel-sidebar-tab { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 42px; padding: 5px 3px; border: 1px solid transparent; border-radius: 6px; background: #fff; color: #475569; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.steel-sidebar-tab svg, .steel-tool-button svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.steel-sidebar-tab:hover, .steel-sidebar-tab.is-active { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); }
.steel-sidebar-panel[hidden] { display: none; }
.steel-panel-head--subsection { margin: 12px 0 8px; padding-top: 10px; border-top: 1px solid #e2e8f0; }
.steel-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.steel-panel-head--toolbar { margin-bottom: 8px; }
.steel-panel-head h2 { margin: 0; color: #17232b; font-size: 16px; line-height: 1.18; }
.steel-title-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.steel-title-edit-button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #64748b; cursor: pointer; }
.steel-title-edit-button:hover { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); }
.steel-title-edit-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.steel-title-edit input { width: min(360px, 70vw); height: 32px; padding: 0 9px; border: 1px solid #b7c5d4; border-radius: 6px; color: #17232b; font: inherit; font-size: 16px; font-weight: 800; }
.steel-model-stats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.steel-model-stats span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border: 1px solid #d9e1ea; border-radius: 999px; background: #fbfcfd; color: #475569; font-size: 12px; font-weight: 700; }
.steel-editor-status { min-height: 18px; margin: -2px 0 7px; color: #1f7668; font-size: 12px; font-weight: 800; }
.steel-editor-status.is-error { color: #b42318; }
.steel-modebar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 10px; }
.steel-tool-button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 10px; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.steel-tool-button:hover, .steel-tool-button.is-active { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); }
.steel-tool-button:disabled { opacity: .45; cursor: not-allowed; }
.steel-zoom-controls { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px; border: 1px solid #d9e1ea; border-radius: 7px; background: #fbfcfd; }
.steel-zoom-button { width: 32px; padding: 0; }
.steel-zoom-reset { min-width: 52px; padding: 0 8px; }
.steel-zoom-label { min-width: 46px; color: #334155; font-size: 12px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.steel-tool-button--danger:hover { border-color: #efaaa3; background: #fff5f4; color: #b42318; }
.steel-canvas-shell { position: relative; min-height: 680px; overflow: hidden; border: 1px solid #d9e1ea; border-radius: 8px; background: #f8fafc; touch-action: none; }
.steel-preview { display: block; width: 100%; height: 680px; cursor: grab; user-select: none; }
.steel-preview:active { cursor: grabbing; }
.steel-editor-shell[data-steel-mode="measure"] .steel-preview { cursor: grab; }
.steel-editor-shell[data-steel-mode="measure"] .steel-preview:active { cursor: grabbing; }
.steel-editor-shell[data-steel-workspace-current="dimensions"] .steel-dimensions-preview { cursor: crosshair; }
.steel-editor-shell[data-steel-mode="pan"] .steel-preview { cursor: grab; }
.steel-editor-shell[data-steel-mode="pan"] .steel-preview:active { cursor: grabbing; }
.steel-canvas-label { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border: 1px solid #d9e1ea; border-radius: 6px; background: rgba(255, 255, 255, .92); color: #475569; font-size: 12px; font-weight: 700; pointer-events: none; }
.steel-context-menu { position: absolute; z-index: 12; display: grid; min-width: 172px; padding: 5px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; box-shadow: 0 14px 30px rgba(15, 23, 42, .18); }
.steel-context-menu[hidden] { display: none; }
.steel-context-menu__item { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 32px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: #17232b; font: inherit; font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; }
.steel-context-menu__icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.steel-context-menu__item:hover, .steel-context-menu__item:focus { background: #eefaf7; color: var(--accent); outline: none; }
.steel-context-menu__item.is-danger { color: #b42318; }
.steel-context-menu__item.is-danger:hover, .steel-context-menu__item.is-danger:focus { background: #fff5f4; color: #b42318; }
.steel-context-menu.is-form { min-width: 306px; padding: 9px; }
.steel-context-form { display: grid; gap: 8px; }
.steel-context-form__title { color: #17232b; font-size: 13px; font-weight: 900; }
.steel-context-form__field { display: grid; gap: 4px; color: #475569; font-size: 11px; font-weight: 850; }
.steel-context-form__field input, .steel-context-form__field select { width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #17232b; font: inherit; font-size: 13px; font-weight: 800; }
.steel-context-form__field input:focus, .steel-context-form__field select:focus { border-color: #1f7668; outline: none; box-shadow: 0 0 0 3px rgba(31, 118, 104, .14); }
.steel-context-form__basic { display: grid; gap: 8px; }
.steel-context-form__basic[hidden] { display: none; }
.steel-context-length-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.steel-context-length-step { min-height: 28px; padding: 0 5px; border: 1px solid currentColor; border-radius: 6px; background: #fff; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.steel-context-length-step.is-plus { color: #14715f; background: #eefaf7; }
.steel-context-length-step.is-minus { color: #b42318; background: #fff5f4; }
.steel-context-length-step:hover, .steel-context-length-step:focus { outline: none; box-shadow: 0 0 0 3px rgba(15, 23, 42, .1); }
.steel-context-form__field--choices { gap: 6px; }
.steel-context-form__field--choices[hidden] { display: none; }
.steel-context-form__choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.steel-context-choice { display: grid; place-items: center; gap: 2px; min-height: 54px; padding: 4px 3px; border: 1px solid #d9e1ea; border-radius: 7px; background: #fff; color: #334155; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.steel-context-choice:hover, .steel-context-choice:focus { border-color: #b7dfd6; background: #eefaf7; color: var(--accent); outline: none; }
.steel-context-choice.is-selected { border-color: #1f7668; background: #e7f7f3; color: #145f54; box-shadow: inset 0 0 0 1px #1f7668; }
.steel-context-choice__icon { width: 44px; height: 28px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.steel-context-choice__axis { stroke-width: 2.3; }
.steel-context-choice__tube { fill: #f8fafc; stroke: #94a3b8; stroke-width: 1.4; }
.steel-context-choice__cut { stroke-width: 2.4; }
.steel-context-choice__cut--blue { stroke: #2563eb; }
.steel-context-choice__cut--red { stroke: #dc2626; }
.steel-context-form__cuts { display: grid; gap: 8px; padding: 8px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fbfdff; }
.steel-context-form__cuts[hidden] { display: none; }
.steel-context-preview { display: grid; place-items: center; min-height: 76px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 800; overflow: hidden; }
.steel-context-preview[hidden] { display: none; }
.steel-context-preview__svg { width: 100%; height: 76px; }
.steel-context-preview__profile { fill: #1f7668; stroke: #145f54; stroke-width: 1.4; }
.steel-context-preview__axis { stroke: #0f172a; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.steel-context-preview__cut { stroke-width: 3; }
.steel-context-preview__cut--blue { stroke: #2563eb; }
.steel-context-preview__cut--red { stroke: #dc2626; }
.steel-context-form__origin { margin: 0; padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 750; }
.steel-context-form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.steel-start-choice-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.steel-start-choice { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 48px; text-align: left; }
.steel-start-choice__icon { width: 54px; height: 34px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.steel-start-choice__shape { stroke-width: 3.2; }
.steel-start-choice__ghost { stroke-width: 2; stroke-dasharray: 5 4; opacity: .42; }
.steel-start-choice__axis { stroke-width: 2; opacity: .7; }
.steel-history-list { display: grid; gap: 7px; margin-top: 8px; }
.steel-history-empty { padding: 10px; border: 1px dashed #cbd5e1; border-radius: 7px; color: #64748b; font-size: 12px; font-weight: 700; text-align: center; }
.steel-history-item { display: grid; gap: 2px; padding: 8px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fbfdff; }
.steel-history-item strong { color: #17232b; font-size: 12px; font-weight: 850; }
.steel-history-item span { color: #64748b; font-size: 11px; font-weight: 750; }
.steel-frame-type-grid--context { margin: 0; }
.steel-context-form__button { min-height: 32px; padding: 0 10px; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #334155; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.steel-context-form__button.is-primary { border-color: #1f7668; background: #1f7668; color: #fff; }
.steel-context-form__button:disabled { opacity: .45; cursor: not-allowed; }
.steel-context-form__button:hover, .steel-context-form__button:focus { outline: none; box-shadow: 0 0 0 3px rgba(15, 23, 42, .1); }
.steel-move-dialog { position: absolute; left: 50%; top: 50%; z-index: 13; display: grid; gap: 9px; width: min(260px, calc(100% - 28px)); padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; box-shadow: 0 16px 34px rgba(15, 23, 42, .2); transform: translate(-50%, -50%); }
.steel-move-dialog[hidden] { display: none; }
.steel-move-dialog label { display: grid; gap: 5px; color: #334155; font-size: 12px; font-weight: 850; }
.steel-move-dialog input { width: 100%; min-height: 34px; padding: 5px 8px; border: 1px solid #d9e1ea; border-radius: 6px; color: #17232b; font: inherit; font-size: 14px; font-weight: 800; }
.steel-move-dialog input:focus { border-color: #1f7668; outline: none; box-shadow: 0 0 0 3px rgba(31, 118, 104, .14); }
.steel-move-dialog__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.steel-move-step { min-height: 30px; padding: 0 6px; border: 1px solid currentColor; border-radius: 6px; background: #fff; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.steel-move-step.is-plus { color: #14715f; background: #eefaf7; }
.steel-move-step.is-minus { color: #b42318; background: #fff5f4; }
.steel-move-step:hover, .steel-move-step:focus { outline: none; box-shadow: 0 0 0 3px rgba(15, 23, 42, .1); }
.steel-move-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.steel-grid-line { stroke: #e2e8f0; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.steel-axis-line { stroke: #b7c4d3; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.steel-member-body { fill: #1f7668; stroke: #155e54; stroke-width: 1.6; cursor: move; vector-effect: non-scaling-stroke; }
.steel-member-body:hover, .steel-member-body.is-selected { fill: #d97706; stroke: #a85a00; }
.steel-member-body:active { cursor: move; }
.steel-member-hit-line { stroke: transparent; stroke-width: 20; cursor: move; pointer-events: stroke; vector-effect: non-scaling-stroke; }
.steel-member-label { fill: #17232b; font-size: 120px; font-weight: 480; paint-order: stroke; stroke: #fff; stroke-width: 16px; stroke-linejoin: round; cursor: text; pointer-events: auto; }
.steel-cut-label { fill: #92400e; font-size: 100px; font-weight: 500; paint-order: stroke; stroke: #fff; stroke-width: 14px; stroke-linejoin: round; pointer-events: none; }
.steel-cut-label--blue { fill: #1d4ed8; }
.steel-cut-label--red { fill: #dc2626; }
.steel-angle-label { fill: #7c2d12; font-size: 115px; font-weight: 500; paint-order: stroke; stroke: #fff; stroke-width: 16px; stroke-linejoin: round; pointer-events: none; }
.steel-cut-edge { stroke: #0f342f; stroke-width: 2.8; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-cut-edge--blue.is-selected { stroke: #1d4ed8; stroke-width: 3.4; }
.steel-cut-edge--red.is-selected { stroke: #dc2626; stroke-width: 3.4; }
.steel-node { fill: #fff; stroke: #1f7668; stroke-width: 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-endpoint-handle-stem { stroke: #d97706; stroke-width: 1.4; stroke-dasharray: 8 7; opacity: .65; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-endpoint-handle { fill: #ffffff; stroke: #d97706; stroke-width: 2.2; cursor: crosshair; vector-effect: non-scaling-stroke; }
.steel-endpoint-handle:hover, .steel-endpoint-handle.is-selected { fill: #fff8e7; stroke: #b45309; stroke-width: 2.8; }
.steel-move-control { cursor: pointer; }
.steel-move-control__circle { fill: #fff; stroke: #1f7668; stroke-width: 3.4; filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .18)); vector-effect: non-scaling-stroke; }
.steel-move-control__icon { fill: none; stroke: #1f7668; stroke-width: 3.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-move-control:hover .steel-move-control__circle { fill: #eefaf7; stroke: #16695d; }
.steel-move-control:hover .steel-move-control__icon { stroke: #16695d; }
.steel-axis-snap-hint, .steel-axis-snap-arrow, .steel-wall-snap-hint, .steel-wall-snap-connector { stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-axis-snap-hint { stroke-width: 2.4; stroke-dasharray: 20 14; }
.steel-axis-snap-arrow { fill: none; stroke-width: 2.4; stroke-linejoin: round; }
.steel-axis-snap-hint.is-preview, .steel-axis-snap-arrow.is-preview { stroke: #dc2626; opacity: .58; }
.steel-axis-snap-hint.is-active, .steel-axis-snap-arrow.is-active { stroke: #b91c1c; opacity: .95; }
.steel-wall-snap-hint { stroke-width: 3; stroke-dasharray: 18 14; }
.steel-wall-snap-connector { stroke-width: 2; stroke-dasharray: 12 10; }
.steel-wall-snap-hint.is-preview, .steel-wall-snap-connector.is-preview { stroke: #dc2626; opacity: .55; }
.steel-wall-snap-hint.is-active, .steel-wall-snap-connector.is-active { stroke: #b91c1c; opacity: .9; }
.steel-parallel-distance-line { stroke: #1d4ed8; stroke-width: 2.2; stroke-dasharray: 12 10; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-parallel-distance-arrow { fill: none; stroke: #1d4ed8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-parallel-distance-label { fill: #1d4ed8; font-size: 105px; font-weight: 500; paint-order: stroke; stroke: #fff; stroke-width: 18px; stroke-linejoin: round; pointer-events: none; }
.steel-measure-line-hit { stroke: transparent; stroke-width: 28; vector-effect: non-scaling-stroke; cursor: grab; pointer-events: stroke; }
.steel-measure-line-hit:active { cursor: grabbing; }
.steel-measure-line { stroke: #2563eb; stroke-width: 3; stroke-dasharray: 10 8; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-measure-arrow { fill: none; stroke: #2563eb; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-measure-point { fill: #eff6ff; stroke: #2563eb; stroke-width: 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-measure-handle { fill: #ffffff; stroke: #2563eb; stroke-width: 3.2; vector-effect: non-scaling-stroke; cursor: grab; pointer-events: auto; }
.steel-measure-handle:hover { fill: #dbeafe; stroke: #1d4ed8; }
.steel-measure-handle:active { cursor: grabbing; }
.steel-measure-label { fill: #1d4ed8; font-size: 120px; font-weight: 500; paint-order: stroke; stroke: #fff; stroke-width: 20px; stroke-linejoin: round; pointer-events: none; }
.steel-measure-edge { opacity: 0; stroke: #2563eb; stroke-width: 26; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-measure-edge-selected { stroke: #2563eb; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 16 10; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-dimensions-view { min-width: 0; }
.steel-dimensions-workbench { padding: 13px; }
.steel-dimensions-shell { min-height: 720px; }
.steel-dimensions-preview { height: 720px; }
.steel-dimensions-note { position: absolute; left: 14px; top: 14px; z-index: 2; max-width: min(460px, calc(100% - 28px)); padding: 9px 11px; border: 1px solid #bfdbfe; border-radius: 7px; background: rgba(239, 246, 255, .96); color: #1e3a8a; font-size: 12px; font-weight: 750; line-height: 1.35; pointer-events: none; }
.steel-dimensions-note[hidden] { display: none; }
.steel-dimensions-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: stretch; margin: 0 0 8px; padding: 8px; border: 1px solid #d9e1ea; border-radius: 7px; background: #fff; }
.steel-dimensions-list__head { display: grid; align-content: center; gap: 2px; min-width: 116px; padding-right: 8px; border-right: 1px solid #edf2f7; color: #64748b; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.steel-dimensions-list__head strong { color: #17232b; font-size: 16px; font-weight: 900; letter-spacing: 0; line-height: 1; }
.steel-dimensions-list__rows { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.steel-dimensions-list__empty { align-self: center; color: #64748b; font-size: 11px; font-weight: 720; }
.steel-dimensions-list__row { display: inline-grid; grid-template-columns: minmax(92px, auto) auto; gap: 3px; align-items: stretch; min-width: 0; }
.steel-dimensions-list__select { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; min-width: 0; padding: 5px 8px; border: 1px solid #d9e1ea; border-radius: 6px 0 0 6px; background: #f8fafc; color: #17232b; cursor: pointer; font: inherit; text-align: left; }
.steel-dimensions-list__row.is-selected .steel-dimensions-list__select { border-color: #2563eb; background: #eff6ff; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .14); }
.steel-dimensions-list__number { color: #64748b; font-size: 10px; font-weight: 900; letter-spacing: .03em; }
.steel-dimensions-list__value { color: #17232b; font-size: 12px; font-weight: 900; white-space: nowrap; }
.steel-dimensions-list__delete { min-height: 31px; padding: 5px 8px; border: 1px solid #fecaca; border-radius: 0 6px 6px 0; background: #fff7f7; color: #b91c1c; cursor: pointer; font: inherit; font-size: 10px; font-weight: 850; }
.steel-dimensions-list__delete:hover { border-color: #ef4444; background: #fee2e2; color: #991b1b; }
.steel-dimensions-profile { fill: #dbe8e5; stroke: #1f7668; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-dimension-line { stroke: #1d4ed8; stroke-width: 2.4; stroke-dasharray: 12 8; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-dimension-line.is-selected { stroke: #0f4fc5; stroke-width: 3; }
.steel-dimension-extension { stroke: #93c5fd; stroke-width: 1.5; stroke-dasharray: 8 8; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-dimension-angle-side { stroke: #93c5fd; stroke-width: 1.45; stroke-dasharray: 8 8; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-dimension-angle-arc { fill: none; stroke: #1d4ed8; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-dimension-angle-arc.is-selected { stroke: #0f4fc5; stroke-width: 3; }
.steel-dimension-arrow { fill: none; stroke: #1d4ed8; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-dimension-label { fill: #1d4ed8; font-size: 112px; font-weight: 480; paint-order: stroke; stroke: #fff; stroke-width: 18px; stroke-linejoin: round; pointer-events: none; }
.steel-dimension-label[data-steel-dimension-id] { cursor: grab; pointer-events: auto; }
.steel-dimension-line[data-steel-dimension-id], .steel-dimension-extension[data-steel-dimension-id], .steel-dimension-angle-side[data-steel-dimension-id], .steel-dimension-angle-arc[data-steel-dimension-id], .steel-dimension-arrow[data-steel-dimension-id] { cursor: grab; pointer-events: stroke; }
.steel-dimension-label.is-selected { fill: #0f4fc5; }
.steel-dimension-hit, .steel-dimension-angle-hit { stroke: transparent; stroke-width: 34; cursor: grab; pointer-events: stroke; vector-effect: non-scaling-stroke; fill: none; }
.steel-dimension-hit:active { cursor: grabbing; }
.steel-dimensions-member-number { fill: #111827; font-size: 88px; font-weight: 640; paint-order: stroke; stroke: #fff; stroke-width: 13px; stroke-linejoin: round; pointer-events: none; }
.steel-dimensions-member-length { fill: #334155; font-size: 88px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 15px; stroke-linejoin: round; pointer-events: none; }
.steel-editor-shell[data-steel-mode="measure"] .steel-measure-edge, .steel-editor-shell[data-steel-workspace-current="dimensions"] .steel-measure-edge { cursor: crosshair; pointer-events: stroke; }
.steel-editor-shell[data-steel-mode="measure"] .steel-measure-edge:hover, .steel-editor-shell[data-steel-workspace-current="dimensions"] .steel-measure-edge:hover { opacity: .32; }
.steel-edge-point { opacity: 0; fill: #eff6ff; stroke: #2563eb; stroke-width: 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.steel-editor-shell[data-steel-mode="measure"] .steel-edge-point, .steel-editor-shell[data-steel-workspace-current="dimensions"] .steel-edge-point { opacity: .95; cursor: crosshair; pointer-events: auto; }
.steel-tool-section .button, .steel-full-button { justify-content: center; width: 100%; min-height: 36px; margin-top: 9px; }
.steel-frame-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 8px 0 10px; }
.steel-frame-type { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 42px; padding: 6px 8px; border: 1px solid #d8e1eb; border-radius: 8px; background: #fff; color: #334155; font-size: 12px; font-weight: 800; text-align: left; cursor: pointer; }
.steel-frame-type svg { width: 34px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
.steel-frame-type.is-active { border-color: #11816f; background: #e8f6f2; color: #0f766e; box-shadow: 0 0 0 1px rgba(17, 129, 111, 0.12); }
.steel-button-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.steel-button-grid .steel-tool-button { width: 100%; min-width: 0; padding: 0 8px; }
.steel-form-grid--spaced { margin-top: 9px; }
.steel-form-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.steel-form-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steel-form-grid--compact label:last-child:nth-child(odd) { grid-column: 1 / -1; }
.steel-form-grid label { color: #475569; font-size: 12px; font-weight: 750; }
.steel-form-grid input, .steel-form-grid select { min-height: 30px; margin-top: 3px; padding: 4px 7px; font-size: 13px; }
.steel-module-name-field { display: block; color: #475569; font-size: 12px; font-weight: 750; }
.steel-module-name-field input { width: 100%; min-height: 32px; margin-top: 4px; padding: 5px 8px; border: 1px solid #d9e1ea; border-radius: 6px; font: inherit; font-size: 13px; }
.steel-module-status { min-height: 17px; margin: 7px 0 0; color: #1f7668; font-size: 12px; font-weight: 750; }
.steel-module-status.is-error { color: #b42318; }
.steel-module-list { display: grid; gap: 7px; margin-top: 8px; }
.steel-module-empty { padding: 10px; border: 1px dashed #cbd5e1; border-radius: 7px; color: #64748b; font-size: 12px; font-weight: 700; text-align: center; }
.steel-module-preview { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; height: 46px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; overflow: hidden; }
.steel-module-preview-svg { display: block; width: 100%; height: 100%; }
.steel-module-preview-svg line, .steel-module-preview-svg path { fill: none; stroke: #1f7668; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.steel-module-project-create, .steel-module-save-box { display: grid; gap: 7px; padding: 8px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; }
.steel-module-project-list { display: grid; gap: 5px; margin: 8px 0; }
.steel-module-project-delete, .steel-module-delete { min-height: 31px; padding: 5px 8px; border: 1px solid #fecaca; border-radius: 6px; background: #fff7f7; color: #b42318; font: inherit; font-size: 11px; font-weight: 820; cursor: pointer; }
.steel-module-project-delete.is-confirming { border-color: #dc2626; background: #fee2e2; color: #991b1b; }
.steel-module-move-select, .steel-module-name-field select { width: 100%; min-height: 31px; padding: 4px 7px; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #17232b; font: inherit; font-size: 12px; font-weight: 760; }
.steel-profile-library { margin-top: 9px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fbfdff; }
.steel-profile-library summary { display: flex; align-items: center; min-height: 32px; padding: 0 9px; color: #334155; font-size: 12px; font-weight: 800; cursor: pointer; list-style: none; }
.steel-profile-library summary::-webkit-details-marker { display: none; }
.steel-profile-library summary::after { content: "+"; margin-left: auto; color: #64748b; font-weight: 900; }
.steel-profile-library[open] summary::after { content: "-"; }
.steel-profile-library .steel-profile-list { max-height: 178px; overflow: auto; padding: 0 8px 8px; }
.steel-profile-list { display: grid; gap: 8px; }
.steel-profile-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 7px 8px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fbfdff; }
.steel-profile-row strong { color: #17232b; font-size: 14px; }
.steel-profile-row span { color: #64748b; font-size: 12px; font-weight: 650; white-space: nowrap; }
.steel-profile-add { display: grid; gap: 7px; margin: 9px 8px 8px; padding-top: 9px; border-top: 1px solid #e2e8f0; }
.steel-profile-add > strong { color: #17232b; font-size: 13px; font-weight: 850; }

.steel-module-save-panel, .steel-module-project-create, .steel-profile-library { margin-top: 8px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fbfdff; }
.steel-module-save-panel summary, .steel-module-project-create summary, .steel-profile-library summary { display: flex; align-items: center; min-height: 32px; padding: 0 9px; color: #334155; font-size: 12px; font-weight: 850; cursor: pointer; list-style: none; }
.steel-module-save-panel summary::-webkit-details-marker, .steel-module-project-create summary::-webkit-details-marker, .steel-profile-library summary::-webkit-details-marker { display: none; }
.steel-module-save-panel summary::after, .steel-module-project-create summary::after, .steel-profile-library summary::after { content: "+"; margin-left: auto; color: #64748b; font-weight: 900; }
.steel-module-save-panel[open] summary::after, .steel-module-project-create[open] summary::after, .steel-profile-library[open] summary::after { content: "-"; }
.steel-module-save-panel .steel-module-save-box { gap: 7px; margin: 0; padding: 0 8px 8px; border: 0; border-radius: 0; background: transparent; }
.steel-module-project-create { padding: 0; }
.steel-module-project-create .steel-module-name-field, .steel-module-project-create .steel-full-button { margin: 0 8px 8px; }
.steel-module-filter { display: grid; gap: 3px; margin: 0; color: #475569; font-size: 11px; font-weight: 820; }
.steel-module-filter select { width: 100%; min-height: 31px; padding: 4px 7px; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #17232b; font: inherit; font-size: 12px; font-weight: 760; }
.steel-module-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; min-height: 41px; padding: 6px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fbfdff; }
.steel-module-row-info { display: grid; gap: 1px; min-width: 0; }
.steel-module-row-info strong { overflow: hidden; color: #17232b; font-size: 12px; font-weight: 860; text-overflow: ellipsis; white-space: nowrap; }
.steel-module-row-info span { overflow: hidden; color: #64748b; font-size: 10px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.steel-module-row-load { min-height: 30px; padding: 0 9px; white-space: nowrap; }
.steel-module-actions-menu { position: relative; }
.steel-module-actions-menu summary { display: grid; place-items: center; width: 31px; min-height: 30px; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #334155; font-size: 16px; font-weight: 900; cursor: pointer; list-style: none; }
.steel-module-actions-menu summary::-webkit-details-marker { display: none; }
.steel-module-actions-menu__body { position: absolute; right: 0; z-index: 12; display: grid; gap: 7px; width: 210px; margin-top: 5px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; box-shadow: 0 14px 30px rgba(15, 23, 42, .16); }
.steel-module-actions-menu__field { display: grid; gap: 3px; color: #475569; font-size: 10px; font-weight: 820; text-transform: uppercase; }
.steel-module-preview--menu { width: 100%; height: 64px; }
.steel-model-list { display: grid; gap: 8px; margin: 0; }
.steel-model-list div { min-width: 0; padding: 7px 8px; border: 1px solid #e2e8f0; border-radius: 7px; background: #f8fafc; }
.steel-model-list dt { margin-bottom: 4px; color: #64748b; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.steel-model-list dd { margin: 0; color: #17232b; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.steel-detail-input { width: 100%; min-height: 30px; margin: 0; padding: 4px 7px; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #17232b; font: inherit; font-size: 13px; font-weight: 750; }
.steel-detail-input:focus { border-color: #1f7668; outline: none; box-shadow: 0 0 0 3px rgba(31, 118, 104, .14); }
.steel-cut-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.steel-cut-pair-field { display: grid; gap: 3px; min-width: 0; }
.steel-cut-pair-label { font-size: 10px; font-weight: 850; line-height: 1; text-transform: uppercase; }
.steel-cut-pair-label--blue { color: #2563eb; }
.steel-cut-pair-label--red { color: #dc2626; }
.steel-cut-pair .steel-detail-input { min-height: 29px; padding-inline: 5px; font-size: 12px; }
.steel-selected-length-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; align-items: end; margin-top: 9px; padding-top: 9px; border-top: 1px solid #e2e8f0; }
.steel-selected-length-control[hidden] { display: none; }
.steel-selected-length-control label { color: #475569; font-size: 12px; font-weight: 750; }
.steel-selected-length-control input { width: 100%; min-height: 32px; margin-top: 3px; padding: 4px 7px; font: inherit; font-size: 13px; }
.steel-selected-length-control .steel-tool-button { min-height: 32px; white-space: nowrap; }
.steel-panel-note { margin: -2px 0 9px; color: #475569; font-size: 12px; font-weight: 650; line-height: 1.35; }
.steel-profile-dimension-note { margin: 0 0 9px; padding: 7px 8px; border: 1px solid #d9e1ea; border-radius: 7px; background: #f8fafc; color: #334155; }
.steel-bom-table-wrap { max-height: 360px; overflow: auto; border: 1px solid #dfe6ee; border-radius: 7px; }
.steel-bom-table { min-width: 100%; border: 0; border-collapse: collapse; font-size: 12px; }
.steel-bom-table th, .steel-bom-table td { padding: 7px 8px; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.steel-bom-table th { background: #f1f5f8; color: #475569; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.steel-bom-table tr:last-child td { border-bottom: 0; }
.steel-bom-table td { color: #17232b; font-weight: 700; }
.steel-3d-view { min-width: 0; }
.steel-3d-workbench { padding: 13px; }
.steel-3d-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: start; }
.steel-3d-toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.steel-3d-canvas-shell { position: relative; min-height: 720px; overflow: hidden; border: 1px solid #d9e1ea; border-radius: 8px; background: #f8fafc; touch-action: none; }
.steel-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.steel-3d-canvas:active { cursor: grabbing; }
.steel-3d-canvas canvas { display: block; width: 100%; height: 100%; outline: none; }
.steel-3d-gizmo-label { position: absolute; z-index: 4; max-width: 180px; padding: 4px 7px; border: 1px solid rgba(15, 23, 42, .18); border-radius: 6px; background: rgba(255, 255, 255, .94); color: #17232b; font-size: 11px; font-weight: 820; line-height: 1.15; pointer-events: none; transform: translate(-50%, -110%); box-shadow: 0 6px 16px rgba(15, 23, 42, .14); white-space: nowrap; }
.steel-3d-gizmo-label[hidden] { display: none; }
.steel-3d-empty { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 16px; color: #64748b; font-size: 14px; font-weight: 800; text-align: center; pointer-events: none; }
.steel-3d-empty[hidden] { display: none; }
.steel-3d-context-menu { position: absolute; z-index: 8; display: grid; gap: 7px; width: min(280px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: hidden; padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #17232b; box-shadow: 0 16px 38px rgba(15, 23, 42, .18); }
.steel-3d-context-menu[hidden] { display: none; }
.steel-3d-context-menu__action, .steel-3d-context-menu__module, .steel-3d-context-menu__back { display: grid; width: 100%; min-width: 0; min-height: 32px; padding: 6px 8px; border: 1px solid #d9e1ea; border-radius: 7px; background: #fff; color: #17232b; font: inherit; font-size: 12px; font-weight: 820; text-align: left; cursor: pointer; }
.steel-3d-context-menu__action:hover, .steel-3d-context-menu__module:hover, .steel-3d-context-menu__back:hover { border-color: #1f7668; background: #eefaf7; color: #116254; }
.steel-3d-context-menu__head { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.steel-3d-context-menu__head strong { overflow: hidden; font-size: 12px; font-weight: 860; text-overflow: ellipsis; white-space: nowrap; }
.steel-3d-context-menu__back { width: auto; min-height: 28px; padding: 4px 7px; color: #475569; font-size: 11px; }
.steel-3d-context-menu__form { display: grid; gap: 6px; }
.steel-3d-context-menu__field { display: grid; gap: 3px; color: #475569; font-size: 10px; font-weight: 820; text-transform: uppercase; }
.steel-3d-context-menu__field select, .steel-3d-context-menu__field input { width: 100%; min-width: 0; min-height: 30px; padding: 4px 7px; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #17232b; font: inherit; font-size: 12px; font-weight: 760; text-transform: none; }
.steel-3d-context-menu__list { display: grid; gap: 5px; max-height: 210px; overflow: auto; padding-right: 2px; }
.steel-3d-context-menu__module { gap: 2px; min-height: 40px; }
.steel-3d-context-menu__module strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steel-3d-context-menu__module span { overflow: hidden; color: #64748b; font-size: 10px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.steel-3d-context-menu__empty { padding: 7px; border: 1px dashed #d9e1ea; border-radius: 7px; background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 760; line-height: 1.3; }
.steel-3d-side { display: grid; gap: 8px; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .04); }
.steel-3d-side *, .steel-3d-side *::before, .steel-3d-side *::after { box-sizing: border-box; min-width: 0; }
.steel-3d-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid #edf2f7; }
.steel-3d-side-head h2 { margin: 1px 0 0; font-size: 16px; line-height: 1.1; }
.steel-3d-chip-stats { display: grid; grid-template-columns: repeat(2, minmax(48px, 1fr)); gap: 4px; margin: 0; }
.steel-3d-chip-stats div { min-width: 0; padding: 4px 6px; border: 1px solid #dfe6ee; border-radius: 6px; background: #f8fafc; text-align: center; }
.steel-3d-chip-stats dt { color: #64748b; font-size: 8px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.steel-3d-chip-stats dd { margin: 2px 0 0; color: #17232b; font-size: 12px; font-weight: 850; line-height: 1; }
.steel-3d-stats { gap: 6px; }
.steel-3d-side .steel-panel-note { margin: 0; padding-top: 2px; color: #64748b; font-size: 11px; line-height: 1.3; }
.steel-3d-side .steel-panel-note.is-error { color: #b42318; }
.steel-3d-panel-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 3px; border: 1px solid #dfe6ee; border-radius: 8px; background: #f8fafc; }
.steel-3d-panel-tab { min-height: 29px; border: 0; border-radius: 6px; background: transparent; color: #475569; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.steel-3d-panel-tab:hover, .steel-3d-panel-tab:focus { background: #eefaf7; color: #116254; outline: none; }
.steel-3d-panel-tab.is-active { background: #fff; color: #116254; box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }
.steel-3d-panel-section { display: grid; gap: 8px; min-width: 0; }
.steel-3d-panel-section[hidden] { display: none; }
.steel-3d-sheet-panel { display: grid; gap: 8px; padding: 9px; border: 1px solid #edf2f7; border-radius: 7px; background: #fbfdff; }
.steel-3d-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; }
.steel-3d-sheet-head h3 { margin: 0; color: #17232b; font-size: 13px; line-height: 1.15; }
.steel-3d-sheet-badge { max-width: 92px; overflow: hidden; padding: 3px 6px; border: 1px solid #b7dfd6; border-radius: 999px; background: #eefaf7; color: #116254; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.steel-3d-sheet-color-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: center; }
.steel-3d-sheet-color-preview { display: block; width: 24px; height: 24px; border: 1px solid #cbd5e1; border-radius: 6px; background: #30343a; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .32); }
.steel-3d-sheet-panel input[type="range"] { width: 100%; margin-top: 5px; accent-color: #1f7668; }
.steel-3d-sheet-panel .steel-tool-button.is-active { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }


.steel-3d-sheet-panel .steel-tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.steel-sheet-pick-button {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  justify-content: center;
}

.steel-sheet-pick-icon {
  border: 1.5px solid currentColor;
  border-radius: 3px;
  display: inline-block;
  flex: 0 0 auto;
  height: 14px;
  opacity: 0.8;
  position: relative;
  transform: skewX(-10deg);
  width: 18px;
}

.steel-sheet-pick-icon::after {
  background: currentColor;
  content: "";
  height: 1.5px;
  left: 3px;
  opacity: 0.45;
  position: absolute;
  right: 3px;
  top: 6px;
}

.steel-sheet-pick-button.is-picking .steel-sheet-pick-icon {
  border-radius: 999px;
  height: 16px;
  opacity: 1;
  transform: none;
  width: 16px;
}

.steel-sheet-pick-button.is-picking .steel-sheet-pick-icon::before,
.steel-sheet-pick-button.is-picking .steel-sheet-pick-icon::after {
  background: currentColor;
  content: "";
  left: 50%;
  opacity: 0.65;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.steel-sheet-pick-button.is-picking .steel-sheet-pick-icon::before {
  height: 10px;
  width: 1.5px;
}

.steel-sheet-pick-button.is-picking .steel-sheet-pick-icon::after {
  height: 1.5px;
  right: auto;
  width: 10px;
}
.steel-3d-sheet-surface { display: grid; gap: 3px; padding: 7px; border: 1px solid #dbeafe; border-radius: 7px; background: #f8fbff; color: #17232b; }
.steel-3d-sheet-surface strong { overflow: hidden; font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.steel-3d-sheet-surface span { color: #64748b; font-size: 10px; font-weight: 720; line-height: 1.25; }
.steel-3d-sheet-placements-wrap { display: grid; gap: 5px; }
.steel-3d-sheet-placements-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #64748b; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.steel-3d-sheet-placements-head strong { min-width: 22px; padding: 2px 6px; border: 1px solid #dbeafe; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 10px; text-align: center; }
.steel-3d-sheet-order { display: grid; gap: 6px; padding: 8px; border: 1px solid #bfdbfe; border-radius: 7px; background: #eff6ff; }
.steel-3d-sheet-order-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #1e3a8a; }
.steel-3d-sheet-order-head span { font-size: 9px; font-weight: 880; letter-spacing: .04em; text-transform: uppercase; }
.steel-3d-sheet-order-head strong { font-size: 14px; font-weight: 900; white-space: nowrap; }
.steel-3d-sheet-order-list { display: grid; gap: 4px; }
.steel-3d-sheet-order-row { display: grid; gap: 1px; padding: 6px 7px; border: 1px solid rgba(37, 99, 235, .16); border-radius: 6px; background: #fff; }
.steel-3d-sheet-order-row strong { color: #17232b; font-size: 12px; font-weight: 900; line-height: 1.15; }
.steel-3d-sheet-order-row span { overflow: hidden; color: #64748b; font-size: 9.5px; font-weight: 720; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.steel-3d-sheet-order-empty { padding: 7px; border: 1px dashed #bfdbfe; border-radius: 6px; background: rgba(255, 255, 255, .66); color: #64748b; font-size: 10px; font-weight: 760; text-align: center; }
.steel-3d-sheet-order small { color: #475569; font-size: 9px; font-weight: 720; line-height: 1.25; }
.steel-3d-sheet-order-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.steel-3d-sheet-order-actions button { min-height: 28px; padding: 4px 6px; border: 1px solid #bfdbfe; border-radius: 6px; background: #fff; color: #1d4ed8; font-size: 10px; font-weight: 850; cursor: pointer; }
.steel-3d-sheet-order-actions button:hover:not(:disabled) { border-color: #60a5fa; background: #dbeafe; color: #1e40af; }
.steel-3d-sheet-order-actions button:disabled { cursor: not-allowed; opacity: .45; }
.steel-3d-sheet-order-preview { width: 100%; min-height: 156px; max-height: 260px; resize: vertical; padding: 8px; border: 1px solid #bfdbfe; border-radius: 6px; background: #fff; color: #17232b; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; font-weight: 650; line-height: 1.45; white-space: pre; }
.steel-3d-sheet-placements-note { margin: -1px 0 2px; color: #64748b; font-size: 9.5px; font-weight: 680; line-height: 1.25; }
.steel-3d-sheet-placements { display: grid; gap: 5px; max-height: 176px; overflow: auto; }
.steel-3d-sheet-placement-empty { padding: 7px; border: 1px dashed #cbd5e1; border-radius: 7px; color: #64748b; font-size: 10px; font-weight: 740; text-align: center; }
.steel-3d-sheet-placement-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 5px; align-items: stretch; }
.steel-3d-sheet-placement-select { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; align-items: center; min-width: 0; padding: 6px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; color: #17232b; text-align: left; cursor: pointer; }
.steel-3d-sheet-placement-row.is-active .steel-3d-sheet-placement-select { border-color: #1f7668; background: #f0fdfa; box-shadow: inset 0 0 0 1px rgba(31, 118, 104, .18); }
.steel-3d-sheet-placement-row.is-hidden .steel-3d-sheet-placement-select { opacity: .62; }
.steel-3d-sheet-placement-row.is-hidden .steel-3d-sheet-placement-swatch { filter: grayscale(1); opacity: .55; }
.steel-3d-sheet-placement-visibility { display: inline-flex; align-items: center; justify-content: center; width: 30px; min-width: 30px; min-height: 30px; padding: 0; border: 1px solid #dbeafe; border-radius: 7px; background: #f8fbff; color: #1d4ed8; cursor: pointer; }
.steel-3d-sheet-placement-visibility:hover { border-color: #60a5fa; background: #eff6ff; color: #1e40af; }
.steel-3d-sheet-placement-visibility[aria-pressed="false"] { border-color: #e2e8f0; background: #f8fafc; color: #94a3b8; }
.steel-3d-sheet-placement-visibility svg { width: 16px; height: 16px; display: block; }
.steel-3d-sheet-placement-select:hover { border-color: #93c5fd; background: #f8fbff; }
.steel-3d-sheet-placement-swatch { width: 18px; height: 18px; border: 1px solid #cbd5e1; border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28); }
.steel-3d-sheet-placement-text { display: grid; gap: 2px; min-width: 0; }
.steel-3d-sheet-placement-text strong, .steel-3d-sheet-placement-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steel-3d-sheet-placement-text strong { font-size: 10.5px; font-weight: 850; }
.steel-3d-sheet-placement-text small { color: #64748b; font-size: 9px; font-weight: 720; }
.steel-3d-sheet-placement-delete { padding: 0 8px; border: 1px solid #fecaca; border-radius: 7px; background: #fff7f7; color: #b91c1c; font-size: 10px; font-weight: 850; cursor: pointer; }
.steel-3d-sheet-placement-delete:hover { border-color: #ef4444; background: #fee2e2; color: #991b1b; }
.steel-3d-sheet-layout, .steel-3d-sheet-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.steel-3d-sheet-layout div, .steel-3d-sheet-spec div { padding: 5px 6px; }
.steel-3d-sheet-layout dt, .steel-3d-sheet-spec dt { font-size: 8px; }
.steel-3d-sheet-layout dd, .steel-3d-sheet-spec dd { font-size: 11px; }
.steel-3d-sheet-layout dd { color: #1d4ed8; }
.steel-3d-sheet-production { margin-top: 1px; }
.steel-3d-sheet-production-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 7px; }
.steel-3d-sheet-production-list div { padding: 5px 6px; }
.steel-3d-sheet-production-list dt { font-size: 8px; }
.steel-3d-sheet-production-list dd { font-size: 11px; line-height: 1.2; }
.steel-3d-sheet-production-list div:nth-child(3), .steel-3d-sheet-production-list div:nth-child(4) { grid-column: 1 / -1; }
.steel-3d-scene-actions .steel-tool-button--danger.is-confirming { border-color: #dc2626; background: #fee2e2; color: #991b1b; }
.steel-3d-panel-block { display: grid; gap: 7px; min-width: 0; }
.steel-3d-panel-block .steel-panel-head--subsection { margin: 2px 0 0; padding-top: 6px; }
.steel-3d-quick-actions { display: grid; gap: 6px; }
.steel-3d-module-field { margin-top: 0; }
.steel-3d-module-field select { width: 100%; max-width: 100%; min-height: 30px; margin-top: 3px; padding: 4px 7px; overflow: hidden; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #17232b; font: inherit; font-size: 12px; font-weight: 760; text-overflow: ellipsis; }
.steel-3d-compact-details { min-width: 0; border: 1px solid #edf2f7; border-radius: 7px; background: #fbfdff; }
.steel-3d-compact-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 31px; padding: 0 8px; color: #334155; font-size: 11px; font-weight: 850; cursor: pointer; list-style: none; }
.steel-3d-compact-details summary::-webkit-details-marker { display: none; }
.steel-3d-compact-details summary::after { content: "+"; color: #64748b; font-size: 13px; font-weight: 850; }
.steel-3d-compact-details[open] summary { border-bottom: 1px solid #edf2f7; }
.steel-3d-compact-details[open] summary::after { content: "-"; }
.steel-3d-scene-form { display: grid; gap: 6px; padding: 7px; }
.steel-3d-scene-field input, .steel-3d-scene-field select { width: 100%; max-width: 100%; min-height: 30px; margin-top: 3px; padding: 4px 7px; overflow: hidden; border: 1px solid #d9e1ea; border-radius: 6px; background: #fff; color: #17232b; font: inherit; font-size: 12px; font-weight: 760; text-overflow: ellipsis; }
.steel-3d-scene-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.steel-3d-scene-actions--save { grid-template-columns: minmax(0, 1fr); }
.steel-3d-scene-actions--load { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steel-3d-scene-actions .steel-tool-button { min-height: 29px; padding: 0 5px; font-size: 11px; }
.steel-3d-instance-list { display: grid; gap: 5px; max-height: 150px; overflow: auto; padding: 7px; }
.steel-3d-instance { display: grid; gap: 2px; width: 100%; max-width: 100%; min-height: 38px; padding: 6px 7px; overflow: hidden; border: 1px solid #dfe6ee; border-radius: 7px; background: #fff; color: #17232b; font: inherit; text-align: left; cursor: pointer; }
.steel-3d-instance:hover, .steel-3d-instance.is-active { border-color: #1f7668; background: #eefaf7; color: #116254; }
.steel-3d-instance strong { overflow: hidden; font-size: 12px; font-weight: 820; text-overflow: ellipsis; white-space: nowrap; }
.steel-3d-instance span { color: #64748b; font-size: 10px; font-weight: 700; }
.steel-3d-technical-details .steel-model-list { padding: 7px; }
.steel-3d-selected-panel { padding: 7px; border: 1px solid #edf2f7; border-radius: 7px; background: #fbfdff; }
.steel-3d-selected-panel .steel-panel-head--subsection { margin: 0; padding: 0; }
.steel-3d-selected-panel h2 { max-width: 100%; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.steel-3d-selected-meta { margin: 0; color: #64748b; font-size: 10px; font-weight: 720; line-height: 1.25; }
.steel-3d-selected-actions { display: grid; grid-template-columns: 1fr; gap: 5px; }
.steel-3d-selected-actions .steel-tool-button { min-height: 29px; padding: 0 7px; font-size: 11px; }
.steel-3d-side .steel-full-button, .steel-3d-side .steel-tool-button { max-width: 100%; white-space: nowrap; }
.steel-production-view, .steel-dimensions-view, .steel-3d-view { min-width: 0; }
.steel-production-head { align-items: center; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .04); }
.steel-production-head .steel-panel-note { max-width: 560px; margin: 0; text-align: right; }
.steel-production-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.steel-production-download { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid #1f7668; border-radius: 7px; background: #fff; color: #1f7668; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; white-space: nowrap; }
.steel-production-download svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.steel-production-download:hover, .steel-production-download:focus { outline: none; background: #eefaf7; box-shadow: 0 0 0 3px rgba(31, 118, 104, .14); }
.steel-production-download:disabled { border-color: #cbd5e1; background: #f8fafc; color: #64748b; cursor: wait; opacity: .78; box-shadow: none; }
.steel-production-download[aria-busy="true"] svg { animation: steel-download-pulse 900ms ease-in-out infinite alternate; }
@keyframes steel-download-pulse { from { opacity: .45; } to { opacity: 1; } }
.steel-a4-pages { display: grid; gap: 18px; justify-items: center; }
.steel-a4-page { box-sizing: border-box; width: min(900px, 100%); margin: 0 auto; padding: 24px; aspect-ratio: 210 / 297; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; box-shadow: 0 18px 40px rgba(15, 23, 42, .12); color: #17232b; overflow: hidden; }
.steel-a4-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 10px; border-bottom: 2px solid #17232b; }
.steel-a4-header span, .steel-a4-section-head span { display: block; color: #64748b; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.steel-a4-header h2 { margin: 2px 0 0; font-size: 22px; line-height: 1.15; }
.steel-a4-meta { display: grid; gap: 7px; justify-items: end; min-width: 260px; }
.steel-production-generated { margin: 0; color: #64748b; font-size: 9px; font-weight: 650; text-align: right; }
.steel-a4-summary { display: grid; grid-template-columns: repeat(2, minmax(92px, 1fr)); gap: 6px; margin: 0; }
.steel-a4-summary div { padding: 6px 8px; border: 1px solid #d9e1ea; border-radius: 5px; background: #fff; }
.steel-a4-summary dt { margin: 0 0 2px; color: #64748b; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.steel-a4-summary dd { margin: 0; color: #17232b; font-size: 12px; font-weight: 800; white-space: nowrap; }

.steel-production-warning-banner {
  margin: 0 0 7px;
  padding: 6px 9px;
  border: 1px solid #f59e0b;
  border-radius: 5px;
  background: #fffbeb;
  color: #92400e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.steel-production-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 7px;
  padding: 6px 9px;
  border: 1px solid #dc2626;
  border-radius: 5px;
  background: #fef2f2;
  color: #7f1d1d;
}

.steel-production-status-banner strong {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.steel-production-status-banner span {
  color: #991b1b;
  font-size: 9px;
  font-weight: 750;
  line-height: 1.2;
  text-align: right;
}

body.is-steel-production-printing .steel-a4-pages svg text {
  paint-order: normal !important;
  stroke: none !important;
  text-shadow: none !important;
}

body.is-steel-production-printing .steel-a4-pages svg {
  text-rendering: optimizeLegibility;
}
.steel-a4-drawing-wrap { margin-top: 12px; border: 1px solid #d9e1ea; border-radius: 5px; background: #fff; }
.steel-a4-drawing-wrap--large { margin-top: 14px; }
.steel-production-preview { display: block; width: 100%; height: 540px; }
.steel-a4-page--assembly .steel-production-preview { height: 570px; }
.steel-production-preview .steel-dimension-line, .steel-production-preview .steel-dimension-extension, .steel-production-preview .steel-dimension-angle-side { stroke-width: 1.1; }
.steel-production-preview .steel-dimension-angle-arc { stroke-width: 1.2; }
.steel-production-preview .steel-dimension-arrow { stroke-width: .9; }
.steel-production-preview .steel-dimension-label { font-size: 11px; font-weight: 800; stroke-width: 4px; }
.steel-production-profile { fill: #dbe8e5; stroke: #1f7668; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.steel-production-profile.has-contact { fill: #fef3c7; stroke: #b45309; stroke-width: 1.8; }
.steel-production-number { fill: #111827; font-size: 10px; font-weight: 680; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.steel-production-length, .steel-production-dim-label { fill: #334155; font-size: 10px; font-weight: 750; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.steel-production-dim, .steel-production-dim-tick { stroke: #111827; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.steel-production-empty { fill: #64748b; font-size: 16px; font-weight: 800; }
.steel-a4-section { margin-top: 13px; }
.steel-a4-section--compact { margin-top: 11px; }
.steel-a4-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.steel-a4-section-head strong { font-size: 13px; }
.steel-production-table-wrap { max-height: 280px; }
.steel-production-table { font-size: 10px; }
.steel-production-table th { background: #fff; }
.steel-production-table td:nth-child(6), .steel-cutting-plan-table td:nth-child(3) { white-space: normal; line-height: 1.35; }
.steel-assembly-table { font-size: 11px; }
.steel-material-summary-wrap, .steel-cutting-plan-wrap { max-height: none; }
.steel-material-summary-table, .steel-cutting-plan-table, .steel-cutting-lines-table { font-size: 9.5px; }
.steel-cutting-plan-table td:nth-child(3) { min-width: 300px; }
.steel-a4-page--cutting .steel-a4-header { padding-bottom: 8px; }
.steel-a4-page--cutting .steel-a4-section { margin-top: 12px; }
.steel-a4-page--cutting .steel-a4-section-head { margin-bottom: 8px; }
.steel-a4-page--cutting .steel-a4-section-head strong { font-size: 12px; }
.steel-cut-profile-legend { margin: 4px 0 0; color: #334155; font-size: 9px; font-weight: 780; line-height: 1.25; text-align: right; }
.steel-a4-section--cut-profiles { min-height: 0; }
.steel-cut-profile-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.steel-cutting-empty { margin: 0; padding: 9px; border: 1px dashed #cbd5e1; border-radius: 5px; color: #64748b; font-size: 10px; font-weight: 750; text-align: center; }
.steel-cut-profile-card { display: grid; gap: 6px; min-width: 0; padding: 8px 9px 9px; border: 1.2px solid #111827; border-radius: 4px; background: #fff; color: #111827; break-inside: avoid; }
.steel-cut-profile-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid #d7e0e7; padding-bottom: 4px; }
.steel-cut-profile-head strong { color: #111827; font-size: 12px; font-weight: 880; letter-spacing: .02em; }
.steel-cut-profile-head span { color: #334155; font-size: 9.5px; font-weight: 760; text-align: right; }
.steel-cut-profile-svg { display: block; width: 100%; height: 150px; overflow: visible; shape-rendering: geometricPrecision; }
.steel-cut-profile-piece { fill: #e2f0ed; stroke: #0f342f; stroke-width: 1.35; vector-effect: non-scaling-stroke; }
.steel-cut-profile-cut-line { fill: none; stroke: #111827; stroke-width: 1.55; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.steel-cut-profile-cut-line.is-miter { stroke: #991b1b; stroke-width: 1.9; }
.steel-cut-profile-callout { stroke: #64748b; stroke-width: .8; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.steel-cut-profile-end-marker { fill: #111827; font-size: 11px; font-weight: 820; }
.steel-cut-profile-end-label { fill: #111827; font-size: 10px; font-weight: 760; }
.steel-cut-profile-dimension-line { stroke: #111827; stroke-width: .95; vector-effect: non-scaling-stroke; }
.steel-cut-profile-dimension-arrow { fill: #111827; }
.steel-cut-profile-length-label { fill: #111827; font-size: 12px; font-weight: 760; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.steel-cut-profile-meta { padding-top: 4px; border-top: 1px solid #e2e8f0; color: #111827; font-size: 9.2px; font-weight: 860; line-height: 1.2; text-align: center; }
.steel-cut-profile-warning { padding: 4px 5px; border: 1px solid #f59e0b; border-radius: 3px; background: #fffbeb; color: #92400e; font-size: 7.8px; font-weight: 900; line-height: 1.15; text-align: center; letter-spacing: .01em; }

.steel-a4-page--stock-cut .steel-a4-header { padding-bottom: 8px; }
.steel-a4-page--stock-cut .steel-a4-section { margin-top: 10px; }
.steel-a4-section-head--stock-cut { align-items: flex-start; }
.steel-a4-section-head--stock-cut strong { color: #111827; font-size: 12px; }
.steel-stock-cut-legend { display: flex; align-items: center; gap: 6px; margin: -3px 0 6px; color: #475569; font-size: 8.6px; font-weight: 780; line-height: 1.15; }
.steel-stock-cut-legend strong { font-weight: 880; }
.steel-stock-cut-legend-title { margin-right: 2px; }
.steel-stock-cut-legend-line { display: inline-flex; align-items: center; min-width: 0; }
.steel-stock-cut-legend-item { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.steel-stock-cut-legend-item > span { display: grid; gap: 0; }
.steel-stock-cut-legend-item small { color: #475569; font-size: 7.3px; font-weight: 760; line-height: 1; }
.steel-stock-cut-legend-icon { display: block; width: 30px; height: 16px; flex: 0 0 auto; }
.steel-stock-cut-legend-profile { fill: #dcefeb; stroke: #0f342f; stroke-width: 1.05; vector-effect: non-scaling-stroke; }
.steel-stock-cut-legend-cut { fill: none; stroke: #111827; stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.steel-stock-cut-legend-cut.is-miter { stroke: #7f1d1d; stroke-width: 1.45; }
.steel-stock-cut-visual-plan { display: grid; gap: 8px; }
.steel-stock-cut-group { display: grid; gap: 6px; break-inside: avoid; }
.steel-stock-cut-group + .steel-stock-cut-group { margin-top: 9px; padding-top: 8px; border-top: 1px solid #d7e0e7; }
.steel-stock-cut-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #111827; }
.steel-stock-cut-group-head strong { font-size: 12px; font-weight: 880; }
.steel-stock-cut-group-head span { color: #64748b; font-size: 8.6px; font-weight: 760; text-align: right; text-transform: uppercase; letter-spacing: .025em; }
.steel-stock-cut-bar-card { display: grid; gap: 4px; padding: 6px 8px 7px; border: 1px solid #111827; border-radius: 3px; background: #fff; break-inside: avoid; }
.steel-stock-cut-bar-card.is-oversized { border-color: #b91c1c; }
.steel-stock-cut-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.steel-stock-cut-bar-head strong { color: #111827; font-size: 11px; font-weight: 850; }
.steel-stock-cut-bar-head span { color: #94a3b8; font-size: 8.1px; font-weight: 650; text-align: right; }
.steel-stock-cut-svg { display: block; width: 100%; height: 80px; overflow: visible; shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
.steel-stock-cut-track { fill: #f8fafc; stroke: #cbd5e1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.steel-stock-cut-outline { fill: none; stroke: #111827; stroke-width: .9; vector-effect: non-scaling-stroke; }
.steel-stock-cut-element { fill: #dcefeb; stroke: #0f342f; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.steel-stock-cut-end-line { fill: none; stroke: #111827; stroke-width: 1.05; vector-effect: non-scaling-stroke; }
.steel-stock-cut-end-line.is-miter { stroke: #7f1d1d; stroke-width: 1.25; }
.steel-stock-cut-kerf { fill: #dc2626; stroke: #991b1b; stroke-width: .6; vector-effect: non-scaling-stroke; }
.steel-stock-cut-waste { fill: #e5e7eb; stroke: #64748b; stroke-width: .85; vector-effect: non-scaling-stroke; }
.steel-stock-cut-start { fill: #111827; font-size: 8.4px; font-weight: 850; }
.steel-stock-cut-order-dot { fill: #111827; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.steel-stock-cut-order-label { fill: #fff; font-size: 8.5px; font-weight: 920; }
.steel-stock-cut-end-label { fill: #111827; font-size: 9.2px; font-weight: 900; paint-order: stroke; stroke: #fff; stroke-width: 2px; stroke-linejoin: round; }
.steel-stock-cut-number { fill: #111827; font-size: 10.2px; font-weight: 900; paint-order: stroke; stroke: #dcefeb; stroke-width: 2px; stroke-linejoin: round; }
.steel-stock-cut-number--small { font-size: 8.2px; }
.steel-stock-cut-length { fill: #111827; font-size: 9.4px; font-weight: 820; paint-order: stroke; stroke: #dcefeb; stroke-width: 2px; stroke-linejoin: round; }
.steel-stock-cut-kerf-label { fill: #991b1b; font-size: 8px; font-weight: 850; paint-order: stroke; stroke: #fff; stroke-width: 2px; stroke-linejoin: round; }
.steel-stock-cut-waste-label { fill: #475569; font-size: 8.2px; font-weight: 780; paint-order: stroke; stroke: #e5e7eb; stroke-width: 2px; stroke-linejoin: round; }
.steel-stock-cut-setting-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 0 1px; color: #111827; font-size: 8.7px; font-weight: 780; line-height: 1.15; }
.steel-stock-cut-setting-list > strong { margin-right: 1px; color: #475569; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .035em; }
.steel-stock-cut-setting-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 5px; border: 1px solid #cbd5e1; border-radius: 4px; background: #f8fafc; white-space: nowrap; }
.steel-stock-cut-setting-chip b { color: #991b1b; font-weight: 930; }
.steel-stock-cut-setting-chip span { min-width: 0; overflow: hidden; color: #111827; font-weight: 820; text-overflow: ellipsis; }
.steel-stock-cut-warning { fill: #b91c1c; font-size: 10px; font-weight: 900; paint-order: stroke; stroke: #fff; stroke-width: 2px; stroke-linejoin: round; }
.steel-stock-cut-cut-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 5px 6px; padding-top: 4px; color: #111827; font-size: 9.2px; font-weight: 850; line-height: 1.18; }
.steel-stock-cut-cut-list > strong { grid-column: 1 / -1; color: #111827; font-size: 8.8px; font-weight: 900; text-transform: uppercase; letter-spacing: .035em; }
.steel-stock-cut-step { display: grid; grid-template-columns: 20px minmax(48px, 1fr) 50px 44px 44px; align-items: center; gap: 5px; min-width: 0; padding: 4px 6px; border: 1px solid #94a3b8; border-radius: 4px; background: #fff; white-space: nowrap; }
.steel-stock-cut-step-index { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #111827; color: #fff; font-size: 9px; font-weight: 920; line-height: 1; }
.steel-stock-cut-step-number { min-width: 0; overflow: hidden; color: #111827; font-weight: 900; text-overflow: ellipsis; }
.steel-stock-cut-step-length { color: #111827; font-weight: 820; }
.steel-stock-cut-step-cut { color: #991b1b; font-weight: 900; text-align: right; }
.steel-stock-cut-step-cut-label { color: #111827; font-weight: 900; }


@media (max-width: 1100px) { .steel-editor { grid-template-columns: 1fr; } .steel-sidebar { display: grid; grid-template-columns: 1fr; } .steel-3d-layout { grid-template-columns: 1fr; } .steel-3d-side { order: -1; } .steel-a4-page { padding: 18px; } }
@media (max-width: 760px) { .steel-editor-head, .steel-panel-head { align-items: flex-start; flex-direction: column; } .steel-editor-topbar { align-items: flex-start; flex-direction: column; } .steel-workspace-switcher { align-items: flex-start; flex-direction: column; width: 100%; margin-left: 0; } .steel-workspace-tabs--inline { width: 100%; flex-wrap: wrap; } .steel-sidebar { grid-template-columns: 1fr; } .steel-zoom-controls { width: 100%; margin-left: 0; justify-content: flex-end; } .steel-canvas-shell { min-height: 460px; } .steel-preview { height: 460px; } .steel-3d-toolbar { justify-content: flex-start; } .steel-3d-canvas-shell { min-height: 500px; } .steel-form-grid--compact { grid-template-columns: 1fr; } .steel-profile-row { align-items: flex-start; flex-direction: column; } .steel-profile-row span { white-space: normal; } .steel-workspace-tab { flex: 1 1 140px; } .steel-a4-page { aspect-ratio: auto; padding: 14px; } .steel-a4-header, .steel-a4-section-head { align-items: flex-start; flex-direction: column; } .steel-a4-summary { width: 100%; } .steel-production-preview { height: 320px; } .steel-dimensions-shell { min-height: 480px; } .steel-dimensions-preview { height: 480px; } .steel-production-head .steel-panel-note { text-align: left; } .steel-production-actions { align-items: flex-start; flex-direction: column; width: 100%; } }

@page {
  size: A4;
  margin: 0;
}

@media print {
  html.is-steel-production-printing,
  body.is-steel-production-printing { width: 210mm; min-width: 210mm; margin: 0 !important; background: #fff !important; }
  body.is-steel-production-printing { overflow: visible !important; }
  body.is-steel-production-printing * { visibility: hidden !important; }
  body.is-steel-production-printing .steel-a4-pages,
  body.is-steel-production-printing .steel-a4-pages * { visibility: visible !important; }
  body.is-steel-production-printing .steel-a4-pages { position: absolute; left: 0; top: 0; display: block; width: 210mm; margin: 0 !important; gap: 0; }
  body.is-steel-production-printing .steel-a4-page { box-sizing: border-box; width: 210mm; height: 297mm; min-height: 297mm; max-height: 297mm; margin: 0 !important; padding: 10mm; page-break-after: always; break-after: page; border: 0; border-radius: 0; box-shadow: none; background: #fff !important; color: #111827; overflow: hidden; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body.is-steel-production-printing .steel-a4-page:last-child { page-break-after: auto; break-after: auto; }
  body.is-steel-production-printing .steel-a4-page svg { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
  body.is-steel-production-printing .steel-a4-drawing-wrap,
  body.is-steel-production-printing .steel-a4-summary div,
  body.is-steel-production-printing .steel-production-table th { background: #fff !important; }
  body.is-steel-production-printing .steel-production-table-wrap { max-height: none; overflow: visible; }
}


.leave-request-actions {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.leave-request-actions form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.leave-request-actions input {
  min-width: 0;
  width: 140px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
}

.table-action-button {
  border: 1px solid #d9e1ea;
  border-radius: 6px;
  background: #fff;
  color: #334155;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.table-action-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.table-action-button.is-danger {
  border-color: #e4a8a2;
  color: #b42318;
}

.search-hit {
  background: #fff2a8;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}


.receive-stock-form { max-width: none; display: grid; gap: 12px; }
.receive-stock-form p { margin: 0; }
.receive-stock-form .field-label-with-help { margin-bottom: 4px; }
.receive-stock-form .field-label-with-help label, .receive-price-select span { color: #475569; font-size: 12px; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-transform: none; }
.receive-stock-form .field-help { width: 15px; height: 15px; min-height: 15px; padding: 0; }
.receive-stock-form input:not([type="hidden"]), .receive-stock-form select, .receive-stock-form textarea { min-height: 34px; padding: 6px 9px; border-color: #d8e0e8; border-radius: 6px; font-size: 13px; }
.receive-document-grid { display: grid; grid-template-columns: minmax(150px, 170px) minmax(210px, 220px) minmax(360px, 430px); gap: 10px; align-items: start; justify-content: start; }
.receive-document-grid > p, .receive-seller-lookup > p { display: grid; gap: 4px; }
.receive-document-grid .field-label-with-help { display: inline-flex; align-items: center; gap: 4px; min-height: 18px; margin-bottom: 0; white-space: nowrap; }
.receive-document-grid input { width: 100%; }
.receive-document-number { display: grid; gap: 4px; min-width: 0; }
.receive-document-number span { display: inline-flex; align-items: center; min-height: 18px; color: #64748b; font-size: 12px; font-weight: 550; line-height: 1.2; white-space: nowrap; }
.receive-document-number strong { display: flex; align-items: center; min-height: 34px; padding: 6px 9px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; color: #475569; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }

.receive-seller-lookup { display: grid; gap: 5px; min-width: 0; }
.receive-seller-lookup__row { display: grid; grid-template-columns: minmax(230px, 1fr) max-content; gap: 6px; align-items: center; }
.receive-seller-lookup__button { min-height: 34px; padding: 0 10px; border-color: #d7dde5; background: #fff; color: #334155; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-transform: none; }
.receive-seller-lookup__button:hover { border-color: var(--accent); color: var(--accent); }
.receive-seller-card { display: grid; gap: 2px; max-width: 430px; padding: 7px 9px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fff; color: #66758a; font-size: 11.5px; line-height: 1.25; }
.receive-seller-card[hidden] { display: none; }
.receive-seller-card strong { overflow: hidden; color: #243043; font-size: 12px; font-weight: 650; line-height: 1.22; text-overflow: ellipsis; }
.receive-seller-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receive-seller-card.is-ok { border-color: #d6e8e3; background: #fbfdfc; }
.receive-seller-card.is-error { border-color: #fecaca; background: #fff7f7; color: #991b1b; }
.receive-seller-card.is-error strong { color: #991b1b; }
.receive-lines-head { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: end; gap: 12px; }
.receive-lines-head h2 { margin: 0 0 3px; color: #64748b; font-size: 15px; font-weight: 600; line-height: 1.2; }
.receive-lines-head .muted { max-width: 520px; margin: 0; font-size: 12px; line-height: 1.35; }
.receive-lines-tools { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.receive-price-select { display: grid; gap: 4px; min-width: 138px; margin: 0; }
.receive-price-select select { width: 138px; min-height: 34px; padding: 5px 8px; border-color: #dde5ee; background-color: #fbfcfd; color: #64748b; font-weight: 500; }
.receive-line-add { gap: 6px; min-height: 34px; white-space: nowrap; }
.receive-line-add .app-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.receive-lines-table { width: 100%; min-width: 0; table-layout: fixed; }
.receive-lines-table th, .receive-lines-table td { padding: 5px 6px; vertical-align: top; }
.receive-lines-table th { background: #f1f5f8; color: #334155; font-size: 11px; }
.receive-lines-table th:nth-child(1) { width: 39%; }
.receive-lines-table th:nth-child(2) { width: 20%; }
.receive-lines-table th:nth-child(3) { width: 20%; }
.receive-lines-table th:nth-child(4) { width: 16%; }
.receive-lines-table th:nth-child(5) { width: 34px; }
.receive-lines-table--no-prices th:nth-child(1) { width: 44%; }
.receive-lines-table--no-prices th:nth-child(2) { width: 24%; }
.receive-lines-table--no-prices th:nth-child(3) { width: 26%; }
.receive-lines-table--no-prices th:nth-child(4) { width: 34px; }
.receive-line-autocomplete { margin: 0; }
.receive-new-material-fields { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(92px, .74fr); gap: 5px; margin-top: 5px; }
.receive-new-material-fields.is-hidden, .receive-new-material-fields[hidden] { display: none; }
.receive-lines-table input, .receive-lines-table select { min-height: 30px; padding: 4px 7px; font-size: 12.5px; }
.receive-quantity-cell { min-width: 0; }
.receive-quantity-group { display: grid; grid-template-columns: minmax(58px, 1fr) minmax(72px, 82px); gap: 5px; align-items: center; }
.receive-quantity-group input, .receive-quantity-group select { width: 100%; min-width: 0; }
.receive-quantity-group select.is-locked, .receive-quantity-group select:disabled { background-color: #f8fafc; color: #64748b; opacity: 1; }
.receive-line-remove { justify-content: center; width: 28px; min-height: 28px; padding: 0; border-color: #d7dde5; background: #fff; color: #64748b; font-size: 16px; line-height: 1; }
.receive-lines-table td:last-child { width: 34px; padding-right: 4px; text-align: center; }
.receive-line-remove:hover { border-color: #e4a8a2; color: #b42318; }

.stock-document-form { gap: 11px; }
.stock-document-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 240px)); }
.stock-document-lines-table th:nth-child(1) { width: 34%; }
.stock-document-lines-table th:nth-child(2) { width: 20%; }
.stock-document-lines-table th:nth-child(3) { width: 19%; }
.stock-document-lines-table th:nth-child(4) { width: 21%; }
.stock-document-lines-table th:nth-child(5) { width: 34px; }
.stock-document-lines-table--no-location th:nth-child(1) { width: 42%; }
.stock-document-lines-table--no-location th:nth-child(2) { width: 22%; }
.stock-document-lines-table--no-location th:nth-child(3) { width: 30%; }
.stock-document-lines-table--no-location th:nth-child(4) { width: 34px; }
.stock-document-lines-table input[name$="-note"] { width: 100%; }
.usable-section-lines-table { min-width: 1040px; }
.usable-section-lines-table th:nth-child(1) { width: 20%; }
.usable-section-lines-table th:nth-child(2) { width: 13%; }
.usable-section-lines-table th:nth-child(3) { width: 23%; }
.usable-section-lines-table th:nth-child(4) { width: 13%; }
.usable-section-lines-table th:nth-child(5) { width: 14%; }
.usable-section-lines-table th:nth-child(6) { width: 14%; }
.usable-section-lines-table th:nth-child(7) { width: 34px; }
.usable-section-lines-table td:last-child { width: 34px; padding-right: 4px; text-align: center; }
.usable-section-returned-cell .receive-new-material-fields { grid-template-columns: minmax(118px, 1fr) minmax(72px, .55fr); }
@media (max-width: 760px) {
  .receive-document-grid { grid-template-columns: 1fr; }
  .receive-seller-lookup__row { grid-template-columns: 1fr; }
  .receive-seller-lookup__button { justify-content: center; }
  .receive-lines-head { grid-template-columns: 1fr; align-items: stretch; }
  .receive-lines-tools { justify-content: space-between; }
  .receive-price-select { min-width: 0; }
  .receive-price-select select { width: 100%; }
  .receive-line-add { justify-content: center; }
  .receive-lines-wrap { overflow-x: auto; }
  .receive-lines-table { min-width: 720px; }
}


.warehouse-documents-table th:nth-child(2), .warehouse-documents-table td.warehouse-documents-date { white-space: nowrap; }
.warehouse-documents-table th:nth-child(1) { width: 16%; }
.warehouse-documents-table th:nth-child(2) { width: 105px; }
.warehouse-documents-table th:nth-child(3) { width: 72px; }
.warehouse-documents-table th:nth-child(4) { width: 24%; }
.warehouse-documents-table th:nth-child(5) { width: 92px; }
.warehouse-documents-table td:last-child { color: #475569; }
.warehouse-document-link { color: var(--ink); text-decoration: none; }
.warehouse-document-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.app-modal--document .app-modal__dialog { width: min(920px, calc(100vw - 24px)); }
.app-modal--document .app-modal__body { max-height: min(86vh, 820px); padding: 14px; }
.warehouse-document-preview { display: grid; gap: 12px; }
.warehouse-document-preview__summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfcfd; }
.warehouse-document-preview__title, .warehouse-document-preview__total { display: grid; gap: 3px; min-width: 0; }
.warehouse-document-preview__title span, .warehouse-document-preview__total span, .warehouse-document-preview__meta dt { color: #64748b; font-size: 10.5px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.warehouse-document-preview__title strong { overflow: hidden; color: var(--ink); font-size: 19px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-document-preview__total { text-align: right; }
.warehouse-document-preview__total strong { color: var(--accent); font-size: 19px; line-height: 1.2; white-space: nowrap; }
.warehouse-document-preview__meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.warehouse-document-preview__meta div { min-width: 0; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; }
.warehouse-document-preview__meta dt, .warehouse-document-preview__meta dd { margin: 0; }
.warehouse-document-preview__meta dd { overflow: hidden; color: #18202c; font-size: 13px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.warehouse-document-preview__comment { margin: 0; padding: 9px 10px; border-left: 3px solid #d8e6e2; background: #fbfcfd; color: #475569; font-size: 13px; line-height: 1.35; }
.warehouse-document-preview__lines { display: grid; gap: 8px; }
.warehouse-document-preview__lines-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.warehouse-document-preview__lines-head h3 { margin: 0; font-size: 15px; line-height: 1.2; }
.warehouse-document-preview__lines-head span { color: #64748b; font-size: 12px; font-weight: 700; }
.warehouse-document-preview__table { min-width: 760px; table-layout: fixed; }
.warehouse-document-preview__table th, .warehouse-document-preview__table td { padding: 8px 9px; vertical-align: middle; }
.warehouse-document-preview__table th { background: #f1f5f8; font-size: 11px; }
.warehouse-document-preview__table td { font-size: 13px; }
.warehouse-document-preview__table td:first-child { vertical-align: top; }
@media (max-width: 760px) {
  .warehouse-document-preview__summary { flex-direction: column; }
  .warehouse-document-preview__total { text-align: left; }
  .warehouse-document-preview__meta { grid-template-columns: 1fr; }
}


/* Installations */
.dashboard-installations { min-width: 0; max-width: 100%; margin: 0 0 2px; padding: 10px 12px; border: 1px solid #dbe3ed; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035); }
.dashboard-installations__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.dashboard-installations__actions { display: flex; align-items: center; gap: 8px; }
.dashboard-installations__head h2 { margin: 0; font-size: 16px; }
.dashboard-installations__table-wrap { min-width: 0; max-width: 100%; overflow: visible; }
.installations-table-wrap { overflow-x: auto; }
.dashboard-installations__table, .installations-table, .project-installations-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dashboard-installations__table { table-layout: fixed; }
.dashboard-installations__table th, .dashboard-installations__table td { padding: 6px 8px; border-bottom: 1px solid #dbe3ed; text-align: left; vertical-align: top; }
.installations-table th, .installations-table td, .project-installations-table th, .project-installations-table td { padding: 9px 10px; border-bottom: 1px solid #dbe3ed; text-align: left; vertical-align: top; }
.dashboard-installations__table th:nth-child(1), .dashboard-installations__table td:nth-child(1) { width: 82px; white-space: nowrap; }
.dashboard-installations__table th:nth-child(2), .dashboard-installations__table td:nth-child(2) { width: 22%; }
.dashboard-installations__table th:nth-child(4), .dashboard-installations__table td:nth-child(4) { width: 17%; }
.dashboard-installations__table th:nth-child(5), .dashboard-installations__table td:nth-child(5) { width: 12%; }
.dashboard-installations__table th:nth-child(6), .dashboard-installations__table td:nth-child(6) { width: 94px; }
.dashboard-installations__table th:nth-child(7), .dashboard-installations__table td:nth-child(7) { width: 132px; }
.dashboard-installations__table th, .installations-table th, .project-installations-table th { background: #eef3f8; color: #334155; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.dashboard-installations__table td, .installations-table td, .project-installations-table td { color: #182230; }
.dashboard-map-link { color: #0f766e; font-weight: 650; text-decoration: none; border-bottom: 1px solid rgba(15, 118, 110, 0.28); }
.dashboard-map-link:hover { color: #0f5f58; border-bottom-color: currentColor; }
.installation-row--risk { background: #fffaf0; }
.installation-status { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: 999px; border: 1px solid #cbd5e1; background: #f8fafc; color: #475569; font-weight: 650; white-space: nowrap; }
.installation-status--confirmed, .installation-status--completed { border-color: #9ed8ce; background: #eef8f5; color: #0f766e; }
.installation-status--in_progress { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.installation-status--problem { border-color: #fecaca; background: #fff1f2; color: #b91c1c; }
.installation-status--postponed { border-color: #fed7aa; background: #fff7ed; color: #b45309; }
.installation-calendar-panel { margin-bottom: 12px; }
.installation-calendar .employee-worktime-month-day { min-height: 78px; cursor: default; }
.installation-calendar .employee-worktime-month-day__total { font-size: 12px; }
.installation-calendar .employee-worktime-month-day__project { display: block; overflow: hidden; color: #17232b; font-size: 11px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.installation-calendar .employee-worktime-month-day__status { display: block; min-height: 16px; overflow: hidden; color: #64748b; font-size: 10.5px; font-weight: 800; line-height: 1.15; text-transform: lowercase; text-overflow: ellipsis; white-space: nowrap; }
.installation-calendar-legend { margin-top: -2px; }
.installation-calendar-tooltip__row { grid-template-columns: minmax(170px, 1fr); align-items: start; }
.installation-calendar-tooltip__row > span { color: #f8fafc; font-size: 12px; font-weight: 800; line-height: 1.25; }
.installation-calendar-tooltip__row strong { margin-top: 2px; color: #cbd5e1; font-size: 11px; font-weight: 650; white-space: normal; }
.installation-calendar-tooltip__row.is-ok { border-left-color: #2dd4bf; background: rgba(20, 184, 166, .16); }
.installation-calendar-tooltip__row.is-warning { border-left-color: #f59e0b; background: rgba(245, 158, 11, .18); }
.installation-calendar-tooltip__row.is-danger { border-left-color: #fb7185; background: rgba(244, 63, 94, .18); }
.installation-calendar-day.has-range { box-shadow: inset 0 -5px 0 rgba(15, 118, 110, .55); }
.installation-calendar-day.has-range.is-warning { box-shadow: inset 0 -5px 0 rgba(217, 119, 6, .58); }
.installation-calendar-day.has-range.is-danger { box-shadow: inset 0 -5px 0 rgba(185, 28, 28, .58); }
.installations-table { table-layout: fixed; }
.installations-table th:nth-child(1), .installations-table td:nth-child(1) { width: 92px; white-space: nowrap; }
.installations-table th:nth-child(2), .installations-table td:nth-child(2) { width: 24%; }
.installations-table th:nth-child(4), .installations-table td:nth-child(4) { width: 15%; }
.installations-table th:nth-child(5), .installations-table td:nth-child(5) { width: 13%; }
.installations-table th:nth-child(6), .installations-table td:nth-child(6) { width: 105px; }
.installations-table th:nth-child(7), .installations-table td:nth-child(7) { width: 146px; }
.installation-project-cell { min-width: 0; }
.installation-project-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.installation-project-main .installation-project-link { min-width: 0; font-weight: 820; overflow-wrap: anywhere; }
.installation-inline-edit { flex: 0 0 auto; min-height: 26px; padding: 4px 8px; font-size: 12px; opacity: 0; pointer-events: none; transform: translateX(-3px); transition: opacity .12s ease, transform .12s ease; }
.installation-list-row:hover .installation-inline-edit,
.installation-list-row:focus-within .installation-inline-edit { opacity: 1; pointer-events: auto; transform: translateX(0); }
.installation-controls { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; max-width: 100%; }
.installation-table-subline { display: block; margin-top: 3px; color: #64748b; font-size: 11px; font-weight: 750; line-height: 1.15; }
.dashboard-installations .installation-controls { display: grid; grid-template-columns: repeat(4, 20px); justify-content: end; gap: 4px; width: 100%; }
.installation-control { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 999px; border: 1px solid #cbd5e1; background: #f8fafc; color: #64748b; line-height: 1; cursor: help; }
.dashboard-installations .installation-control { width: 20px; height: 20px; flex-basis: 20px; }
.installation-control--ok { border-color: #9ed8ce; background: #eef8f5; color: #0f766e; }
.installation-control--warn { border-color: #facc15; background: #fffbeb; color: #a16207; }
.installation-control--urgent { border-color: #fecaca; background: #fff1f2; color: #b91c1c; }
.installation-control__icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; }
.installation-control svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.installation-control::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 100; width: max-content; max-width: 260px; padding: 7px 9px; border-radius: 7px; background: #0f172a; color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; white-space: normal; opacity: 0; pointer-events: none; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18); transition: opacity 120ms ease, transform 120ms ease; }
.installation-control::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px); z-index: 101; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0f172a; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.installation-control:hover::after, .installation-control:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(-2px); }
.installation-control:hover::before, .installation-control:focus-visible::before { opacity: 1; }
.dashboard-installations .installation-control::after { left: auto; right: 0; transform: translateY(0); }
.dashboard-installations .installation-control::before { left: auto; right: 5px; transform: none; }
.dashboard-installations .installation-control:hover::after, .dashboard-installations .installation-control:focus-visible::after { transform: translateY(-2px); }
@media (max-width: 760px) { .dashboard-installations { padding: 9px 8px; } .dashboard-installations__table-wrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; } .dashboard-installations__table { min-width: 720px; } }
.installation-risk { color: #9a3412; font-weight: 650; }
.installation-filters { align-items: end; }
.installation-form .form-section h2 { margin-bottom: 4px; }
.installation-section-note { margin: 0 0 12px; color: #64748b; font-size: 13px; line-height: 1.35; }
.installation-main-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.installation-main-grid--planning { grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(116px, .65fr)); }
.installation-main-grid .field-wide { grid-column: span 2; }
.installation-main-grid > p { display: grid; gap: 5px; min-width: 0; margin: 0; }
.installation-main-grid .field-full { grid-column: 1 / -1; }
.installation-choice-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 12px; align-items: start; }
.installation-choice-grid--stacked { grid-template-columns: 1fr; }
.installation-choice-grid > p { min-width: 0; margin: 0; }
.installation-text-grid { margin-bottom: 10px; }
.installation-risk-field { padding: 10px; border: 1px solid #f0d49b; border-radius: 8px; background: #fffaf0; }
.installation-risk-field label { color: #7a4d0b; font-weight: 800; }
.installation-risk-field textarea { border-color: #efdcb5; background: #fffdfa; }
.installation-risk-field textarea:focus { border-color: #d7962c; box-shadow: 0 0 0 3px rgba(217, 150, 44, .12); outline: none; }
.installation-notes-details { margin-top: 10px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfdff; }
.installation-notes-details summary { display: flex; align-items: center; min-height: 38px; padding: 0 12px; color: #334155; font-weight: 750; cursor: pointer; }
.installation-notes-details summary:hover { color: var(--accent); }
.installation-notes-details p { margin: 0; padding: 0 12px 12px; }
.installation-readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.installation-readiness-card { display: flex; align-items: center; gap: 10px; min-height: 68px; margin: 0; padding: 12px 13px; border: 1px solid #f0d49b; border-radius: 8px; background: #fff8e8; color: #7a4d0b; cursor: pointer; box-shadow: 0 1px 3px rgba(15, 23, 42, .03); }
.installation-readiness-card:hover { border-color: #e3bd6a; background: #fff4d8; }
.installation-readiness-card input[type="checkbox"] { width: 18px; min-height: 18px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.installation-readiness-card span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.installation-readiness-card strong { color: inherit; font-size: 15px; line-height: 1.15; }
.installation-readiness-card small { color: inherit; font-size: 12px; font-weight: 650; opacity: .76; }
.installation-readiness-card:has(input:checked) { border-color: #9ed8ce; background: #eef8f5; color: #0f766e; box-shadow: inset 0 0 0 1px #9ed8ce, 0 1px 4px rgba(15, 23, 42, .05); }
.installation-readiness-card:has(input:checked):hover { border-color: #65b8aa; background: #e5f7f2; }
.installation-choice-field { display: grid; gap: 8px; padding: 12px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfdff; }
.installation-choice-field > label { margin: 0; color: #334155; font-size: 14px; font-weight: 800; line-height: 1.2; }
.installation-choice-field > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 7px; max-height: 210px; padding: 8px; overflow-y: auto; border: 1px solid #d8e1ec; border-radius: 8px; background: #f8fafc; }
.installation-choice-field--crew > div { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); max-height: none; padding: 6px; }
.installation-choice-field > div > div { margin: 0; }
.installation-vehicle-driver-field { gap: 8px; }
.installation-vehicle-driver-list { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; border: 0; padding: 0; background: transparent; }
.installation-choice-field .installation-vehicle-driver-list { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: 260px; padding: 0; overflow-y: auto; border: 0; background: transparent; }
.installation-vehicle-driver-row { display: grid; grid-template-columns: minmax(170px, .45fr) minmax(320px, 1fr); gap: 8px; align-items: start; padding: 8px; border: 1px solid #dbe3ed; border-radius: 8px; background: #f8fafc; }
.installation-choice-field .installation-vehicle-driver-row { margin: 0; }
.installation-vehicle-driver-row.is-selected { border-color: #9ed8ce; background: #eef8f5; }
.installation-vehicle-assignment { display: grid; grid-template-columns: minmax(150px, .55fr) minmax(240px, 1fr); gap: 8px; min-width: 0; }
.installation-vehicle-assignment[hidden] { display: none; }
.installation-vehicle-driver-checkbox { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: #17232b; font-size: 13px; font-weight: 750; cursor: pointer; }
.installation-vehicle-driver-checkbox input { flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.installation-vehicle-driver-checkbox span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.installation-driver-select { display: grid; gap: 4px; min-width: 0; }
.installation-driver-select label, .installation-passenger-select > span { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.installation-driver-select select { width: 100%; min-height: 34px; font-size: 13px; }
.installation-driver-select select:disabled { opacity: .58; background: #eef2f7; }
.installation-passenger-select { min-width: 0; }
.installation-passenger-select > div { display: flex; flex-wrap: wrap; gap: 5px; max-height: 92px; overflow-y: auto; padding: 5px; border: 1px solid #d8e1ec; border-radius: 7px; background: #fff; }
.installation-passenger-select > div > div { margin: 0; }
.installation-passenger-select label { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; margin: 0; padding: 5px 7px; border: 1px solid #dfe6ee; border-radius: 999px; background: #f8fafc; color: #334155; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; }
.installation-passenger-select label:hover { border-color: #b7dfd6; background: #f1f7f5; color: var(--accent); }
.installation-passenger-select label:has(input:checked) { border-color: #1f7668; background: #e7f7f3; color: #145f54; }
.installation-passenger-select input[type="checkbox"] { width: 14px; min-height: 14px; margin: 0; accent-color: var(--accent); }
.installation-hotel-row { display: grid; grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
.installation-hotel-details-field { display: grid; gap: 5px; min-width: 0; margin: 0; }
.installation-hotel-details-field textarea { min-height: 72px; }
.installation-choice-field > div label { display: flex; align-items: center; gap: 8px; min-height: 38px; margin: 0; padding: 8px 10px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fff; color: #17232b; font-weight: 650; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .03); }
.installation-choice-field > div label:hover { border-color: #b7dfd6; background: #f1f7f5; color: var(--accent); }
.installation-choice-field input[type="checkbox"] { width: 16px; min-height: 16px; margin: 0; accent-color: var(--accent); }
.installation-choice-field > div label:has(input:checked) { border-color: #1f7668; background: #e7f7f3; color: #145f54; box-shadow: inset 0 0 0 1px #1f7668, 0 1px 4px rgba(15, 23, 42, .06); }
.installation-choice-field .muted { margin-top: 0; font-size: 12px; line-height: 1.3; }
.installation-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
.installation-form-actions .button, .installation-form-actions button { min-height: 40px; }
.installation-save-button { min-width: 150px; border-color: #126b5f; background: #147968; box-shadow: 0 8px 18px rgba(20, 121, 104, .16); }
.installation-save-button:hover, .installation-save-button:focus { border-color: #0f5f54; background: #106b5d; color: #fff; }
.project-installations-title { justify-content: flex-start; }
.project-installation-add { margin-left: auto; }
@media (max-width: 900px) { .dashboard-installations { padding: 10px; } .installations-table, .project-installations-table { min-width: 900px; } .dashboard-installations__table { table-layout: auto; } .dashboard-installations__table th:nth-child(n), .dashboard-installations__table td:nth-child(n) { width: auto; } .installation-choice-grid, .installation-main-grid--planning, .installation-vehicle-driver-row, .installation-vehicle-assignment, .installation-hotel-row { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .installation-main-grid, .installation-readiness-grid { grid-template-columns: 1fr; } .installation-main-grid .field-wide { grid-column: 1 / -1; } .installation-form-actions { align-items: stretch; flex-direction: column-reverse; } .installation-form-actions .button, .installation-form-actions button { justify-content: center; width: 100%; } }

/* Gmailbox */
.mailbox-workspace { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }

.mailbox-page-head { align-items: center; }
.mailbox-compose-trigger { min-height: 34px; padding: 0 12px; border-color: #b7dfd6; background: var(--accent); color: #fff; font-size: 13px; font-weight: 760; }
.mailbox-compose-trigger:hover { background: #14695f; }
.mailbox-compose-modal__dialog { width: min(720px, calc(100vw - 28px)); }
.mailbox-compose-form { display: grid; gap: 10px; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.mailbox-compose-form label { display: block; margin-bottom: 5px; color: #334155; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mailbox-compose-form input, .mailbox-compose-form select, .mailbox-compose-form textarea { width: 100%; }
.mailbox-compose-from { max-width: 360px; }
.mailbox-compose-recipients { display: grid; gap: 8px; }
.mailbox-compose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mailbox-compose-form textarea { min-height: 280px; font-size: 13px; line-height: 1.45; }
.mailbox-rich-source { display: none !important; }
.mailbox-rich-editor { overflow: hidden; border: 1px solid #d8e3ee; border-radius: 9px; background: #fff; }
.mailbox-rich-editor__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid #e8eff6; background: #f8fbfd; }
.mailbox-rich-editor__toolbar button, .mailbox-rich-editor__toolbar select { min-height: 28px; width: auto; padding: 0 8px; border: 1px solid #d8e3ee; border-radius: 7px; background: #fff; color: #263447; font-size: 12px; font-weight: 760; line-height: 1; }
.mailbox-rich-editor__toolbar button:hover, .mailbox-rich-editor__toolbar select:hover { border-color: #b7dfd6; color: #137466; }
.mailbox-rich-editor__surface { min-height: 220px; padding: 11px 12px; color: #172231; font-size: 13px; line-height: 1.5; outline: none; }
.mailbox-rich-editor__surface:focus { box-shadow: inset 0 0 0 1px #9ed8cc; }
.mailbox-rich-editor__surface p { margin: 0 0 9px; }
.mailbox-rich-editor__surface ul, .mailbox-rich-editor__surface ol { margin: 0 0 9px 20px; padding: 0; }
.mailbox-attachment-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; color: #64748b; font-size: 12px; }
.mailbox-attachment-field__button { display: inline-flex !important; align-items: center; min-height: 30px; margin: 0 !important; padding: 0 10px; border: 1px solid #d8e3ee; border-radius: 8px; background: #fff; color: #334155 !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; }
.mailbox-attachment-field__button:hover { border-color: #b7dfd6; color: #137466 !important; }
.mailbox-attachment-field__button input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.mailbox-attachment-field__names { overflow: hidden; min-width: 0; color: #64748b; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-compose-note { margin: 0; font-size: 12px; }
.mailbox-compose-actions { justify-content: flex-end; }
@media (max-width: 720px) { .mailbox-compose-grid { grid-template-columns: 1fr; } .mailbox-compose-from { max-width: none; } }
.mailbox-sidebar { padding: 14px; }
.mailbox-thread-panel { padding: 14px; }
.mailbox-sidebar-list { display: grid; gap: 8px; }
.mailbox-sidebar-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: 1px solid #dfe6ee; border-radius: 8px; color: inherit; text-decoration: none; background: #fbfdff; }
.mailbox-sidebar-item:hover { border-color: #b7dfd6; background: #f4fbf9; text-decoration: none; }
.mailbox-sidebar-item strong { display: block; font-size: 14px; line-height: 1.2; }
.mailbox-sidebar-item small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-empty-note { padding: 10px; border: 1px dashed #d7dde5; border-radius: 8px; background: #fbfdff; }
.mailbox-thread-table td { vertical-align: top; }
.mailbox-thread-row { cursor: pointer; }
.mailbox-thread-row:hover { background: #f8fbfd; }
.mailbox-thread-row:focus-visible { outline: 2px solid #9bd8cd; outline-offset: -2px; }
.mailbox-thread-row--unread { background: #f4fbff; }
.mailbox-thread-row--unread:hover { background: #eef9ff; }
.mailbox-thread-row--unread .mailbox-thread-subject { font-weight: 800; }
.mailbox-thread-project-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; margin: 0 0 4px; }
.mailbox-thread-subject-line { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; min-width: 0; }
.mailbox-thread-subject { min-width: 80px; color: var(--text); font-weight: 650; text-decoration: none; }
.mailbox-thread-subject:hover { color: var(--accent); text-decoration: underline; }
.mailbox-info-panel { padding: 14px; margin-bottom: 14px; }
.mailbox-reply-panel { margin-top: 12px; padding: 0; overflow: hidden; }
.mailbox-reply-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 10px 12px; list-style: none; cursor: pointer; }
.mailbox-reply-panel > summary::-webkit-details-marker { display: none; }
.mailbox-reply-panel > summary:hover { background: #f8fbfd; }
.mailbox-reply-summary__text { min-width: 0; }
.mailbox-reply-summary__text .material-eyebrow { margin: 0 0 2px; }
.mailbox-reply-summary__text strong { display: block; color: #172231; font-size: 14px; line-height: 1.25; }
.mailbox-reply-summary__text small { display: block; margin-top: 2px; color: #64748b; font-size: 12px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-reply-panel form { max-width: none; margin: 0; padding: 12px; border: 0; border-top: 1px solid #e7eef6; border-radius: 0; background: #fbfdff; }
.mailbox-reply-panel textarea { min-height: 216px; font-size: 13px; line-height: 1.45; }
.mailbox-reply-templates { display: block; margin: 0 0 10px; padding: 9px; border: 1px solid #dfe9f3; border-radius: 8px; background: #fff; }
.mailbox-reply-templates__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; }
.mailbox-reply-templates__head::-webkit-details-marker { display: none; }
.mailbox-reply-templates__head:hover { color: var(--accent); }
.mailbox-reply-templates[open] .mailbox-reply-templates__head { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #eef3f7; }
.mailbox-reply-templates__head span { color: #334155; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.mailbox-reply-templates__head small { color: #64748b; font-size: 12px; line-height: 1.3; text-align: right; }
.mailbox-reply-templates__buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.mailbox-template-button { min-height: 28px; padding: 0 9px; border-radius: 8px; font-size: 12px; line-height: 1; }
.mailbox-template-button.is-used { border-color: #9ed8cc; background: #ecfaf7; color: #137466; }

.mailbox-reply-templates__meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.mailbox-template-edit-trigger { min-height: 28px; padding: 0 9px; border-radius: 8px; font-size: 12px; white-space: nowrap; }
.mailbox-template-modal__dialog { width: min(620px, calc(100vw - 24px)); }
.mailbox-template-list { display: grid; gap: 8px; }
.mailbox-template-list-item { display: grid; gap: 4px; width: 100%; padding: 10px 12px; border: 1px solid #dfe8f1; border-radius: 8px; background: #fff; color: #172231; text-align: left; cursor: pointer; }
.mailbox-template-list-item:hover { border-color: #b7dfd6; background: #f4faf8; }
.mailbox-template-list-item strong { font-size: 14px; line-height: 1.25; }
.mailbox-template-list-item span { color: #64748b; font-size: 12px; line-height: 1.35; }
.mailbox-template-edit-form { display: grid; gap: 12px; }
.mailbox-template-edit-form label { display: grid; gap: 6px; color: #334155; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.mailbox-template-edit-form input, .mailbox-template-edit-form textarea { width: 100%; text-transform: none; letter-spacing: 0; }
.mailbox-template-edit-form textarea { min-height: 260px; font-size: 13px; line-height: 1.45; }
@media (max-width: 720px) { .mailbox-reply-templates__head, .mailbox-reply-templates__meta { align-items: flex-start; flex-direction: column; } }
.mailbox-send-confirmation { margin: 12px 0 0; padding: 9px 11px; border: 1px solid #b7dfd6; border-radius: 8px; background: #ecfaf7; color: #137466; font-size: 13px; font-weight: 720; }
.mailbox-draft-status { margin: 0 0 8px; padding: 7px 9px; border: 1px solid #dbe7f3; border-radius: 8px; background: #f8fbff; color: #52647c; font-size: 12px; line-height: 1.3; }
.mailbox-handling-status--draft { border-color: #dbe7f3; background: #f8fbff; color: #52647c; }

.mailbox-settings-head { align-items: flex-start; margin-bottom: 10px; }
.mailbox-settings-head .page-title { margin-bottom: 3px; }
.mailbox-settings-head p { margin: 0; max-width: 620px; font-size: 13px; line-height: 1.35; }
.mailbox-settings-layout { display: grid; gap: 10px; }
.mailbox-settings-create { max-width: 760px; overflow: hidden; }
.mailbox-settings-section-head { padding: 10px 13px; }
.mailbox-settings-create-form { max-width: 540px; grid-template-columns: 1fr; gap: 8px; padding: 12px 13px 14px; }
.mailbox-settings-create-form .field-wide { grid-column: 1 / -1; }
.mailbox-settings-create-form .form-actions { margin-top: 2px; }
.mailbox-settings-toggle { margin: 0; }
.mailbox-settings-head__actions { align-items: center; }
.mailbox-settings-add-button { background: var(--accent); border-color: #b7dfd6; color: #fff; }
.mailbox-settings-add-button:hover { background: #14695f; }
.mailbox-create-modal { width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 760px); overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24); }
.mailbox-create-modal::backdrop { background: rgba(15, 23, 42, 0.38); }
.mailbox-create-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.mailbox-create-modal__head h2 { margin: 2px 0 3px; color: #172231; font-size: 18px; line-height: 1.2; }
.mailbox-create-modal__head p { margin: 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.mailbox-create-modal .mailbox-settings-create-form { max-width: none; margin: 0; padding: 14px 16px 16px; border: 0; background: transparent; }
.mailbox-create-modal__actions { justify-content: flex-end; margin-top: 4px; }
.mailbox-settings-list-panel { overflow: hidden; }
.mailbox-settings-cards { display: grid; gap: 8px; padding: 10px 12px 12px; }
.mailbox-settings-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 11px 12px; border: 1px solid #dfe7f0; border-radius: 8px; background: #fff; }
.mailbox-settings-card:hover { border-color: #ccd9e6; background: #fbfdff; }
.mailbox-settings-card__main { min-width: 0; }
.mailbox-settings-card__titleline { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 4px; }
.mailbox-settings-card__titleline h3 { margin: 0; color: #172231; font-size: 15px; line-height: 1.2; }
.mailbox-settings-card__titleline h3 a { color: inherit; text-decoration: none; }
.mailbox-settings-card__titleline h3 a:hover { color: var(--accent); }
.mailbox-settings-card__meta { display: flex; flex-wrap: wrap; gap: 5px; color: #64748b; font-size: 12px; line-height: 1.25; }
.mailbox-settings-card__meta span { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; white-space: nowrap; }
.mailbox-settings-result { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.mailbox-settings-result .material-eyebrow { margin: 0; }
.mailbox-settings-note { margin: 7px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.mailbox-settings-note--warn { color: #8a4b04; }
.mailbox-settings-access-summary { margin-top: 10px; padding-top: 9px; border-top: 1px solid #edf2f7; }
.mailbox-settings-access-summary .material-eyebrow { margin: 0 0 5px; }
.mailbox-settings-access-summary__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mailbox-access-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 26px; padding: 4px 8px; border: 1px solid #cfe4f7; border-radius: 999px; background: #f7fbff; color: #28425f; font-size: 12px; line-height: 1.2; }
.mailbox-access-chip strong { font-size: 12px; font-weight: 760; white-space: nowrap; }
.mailbox-access-chip small { color: #64748b; font-size: 11px; white-space: nowrap; }
.mailbox-access-chip--empty { border-style: dashed; color: #64748b; }
.mailbox-settings-card__actions { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; justify-content: flex-end; max-width: 430px; }
.mailbox-settings-card__actions form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.mailbox-settings-card__actions .button,
.mailbox-settings-card__actions button { min-height: 30px; padding: 0 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.mailbox-settings-primary-action { border-color: #b7dfd6; background: var(--accent); color: #fff; }
.mailbox-settings-primary-action:hover { background: #14695f; }
.mailbox-settings-empty { padding: 14px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #fbfdff; }
.mailbox-settings-accordion { grid-column: 1 / -1; margin: 3px 0 0; border: 1px solid #dfe7f0; border-radius: 8px; background: #fbfdff; }
.mailbox-settings-accordion > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 10px; list-style: none; color: #172231; cursor: pointer; font-size: 14px; font-weight: 760; }
.mailbox-settings-accordion > summary::-webkit-details-marker { display: none; }
.mailbox-settings-accordion > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: rotate(-45deg); transition: transform .16s ease; }
.mailbox-settings-accordion[open] > summary::before { transform: rotate(45deg); }
.mailbox-settings-accordion > summary span:first-child { margin-right: auto; }
.mailbox-settings-accordion:hover { border-color: #ccd9e6; }
.mailbox-settings-accordion[open] { background: #fff; }
.mailbox-access-grid { padding: 11px; }
.mailbox-settings-access-table table { font-size: 12px; }
.mailbox-settings-access-table th,
.mailbox-settings-access-table td { padding: 6px 7px; }
.mailbox-access-form { margin-top: 8px; padding-top: 8px; }
.mailbox-access-form .checkbox-line { font-size: 12px; }
.mailbox-settings-technical { overflow: hidden; }
.mailbox-settings-technical__body { padding: 0 12px 12px; }
.mailbox-settings-tech-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.mailbox-settings-tech-grid > div { min-width: 0; padding: 8px 9px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fbfdff; }
.mailbox-settings-tech-grid span { display: block; margin-bottom: 3px; color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.mailbox-settings-tech-grid strong { display: block; color: #172231; font-size: 12px; line-height: 1.35; }
.mailbox-settings-tech-grid code { color: #334155; font-size: 11px; overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 980px) {
  .mailbox-settings-card { grid-template-columns: 1fr; }
  .mailbox-settings-card__actions { justify-content: flex-start; max-width: none; }
  .mailbox-settings-tech-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mailbox-settings-head { gap: 8px; }
  .mailbox-settings-create { max-width: none; }
  .mailbox-settings-card__meta span { white-space: normal; }
  .mailbox-settings-head__actions { width: 100%; justify-content: flex-start; }
  .mailbox-access-chip { border-radius: 8px; }
  .mailbox-access-chip strong,
  .mailbox-access-chip small { white-space: normal; }
}

.mailbox-access-details { margin: 8px 0; padding: 10px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfdff; }
.mailbox-settings-accordion.mailbox-access-details { margin-top: 6px; padding: 0; }
.mailbox-access-details summary { cursor: pointer; font-weight: 750; color: var(--text); }
.mailbox-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.mailbox-access-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf2f7; }
@media (max-width: 900px) {
  .mailbox-workspace { grid-template-columns: 1fr; }
  .mailbox-access-grid { grid-template-columns: 1fr; }
}
.mailbox-sidebar-item--active { border-color: #9bd8cd; background: #ecfaf7; box-shadow: inset 3px 0 0 var(--accent); }
.mailbox-workspace--loading { opacity: .72; pointer-events: none; }
.mailbox-thread-row--active { outline: 2px solid #9bd8cd; outline-offset: -2px; background: #ecfaf7; }
.mailbox-inline-thread { margin-top: 14px; padding-top: 14px; border-top: 1px solid #dfe6ee; }
.mailbox-message-list { display: grid; gap: 10px; margin-top: 12px; }
.mailbox-message-card { margin: 0; box-shadow: none; }
.mailbox-unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.mailbox-folder-list { display: grid; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4eaf1; }
.mailbox-folder-item { display: flex; align-items: center; min-height: 34px; padding: 7px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 650; }
.mailbox-folder-item:hover { background: #f4fbf9; color: var(--accent); text-decoration: none; }
.mailbox-folder-item--active { background: #ecfaf7; color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.mailbox-thread-reader { min-height: 420px; }

.mailbox-search-form { margin-bottom: 10px; padding: 11px 12px; border: 1px solid #dce6f0; border-radius: 8px; background: #fbfdff; }
.mailbox-search-shell { display: flex; gap: 8px; align-items: flex-end; }
.mailbox-search-query,
.mailbox-refresh-form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.mailbox-search-query { flex: 1 1 auto; min-width: 0; }
.mailbox-refresh-form { flex: 0 0 auto; }
.mailbox-refresh-button { min-height: 38px; }
.mailbox-search-form label { display: block; margin-bottom: 6px; color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.mailbox-search-row { display: flex; gap: 8px; align-items: center; }
.mailbox-search-row input[type="search"] { flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 11px; border: 1px solid #d4deea; border-radius: 8px; background: #fff; color: #172231; font-size: 13px; }
.mailbox-search-row input[type="search"]:focus { border-color: #8bc7bb; box-shadow: 0 0 0 3px rgba(20, 128, 112, .12); outline: none; }
.mailbox-thread-table { font-size: 13px; }
.mailbox-thread-table th { font-size: 12px; }
.mailbox-thread-table tbody tr:not(.mailbox-thread-row--unread) { color: #64748b; background: #fff; }
.mailbox-thread-table tbody tr.mailbox-thread-row:hover { background: #f8fbfd; }
.mailbox-thread-table tbody tr.mailbox-thread-row--unread:hover { background: #eef9ff; }
.mailbox-thread-table tbody tr:not(.mailbox-thread-row--unread) .mailbox-thread-subject { color: #334155; font-size: 13px; font-weight: 560; }
.mailbox-thread-table tbody tr:not(.mailbox-thread-row--unread) .muted { color: #8794a8; }
.mailbox-thread-table .muted { font-size: 12px; line-height: 1.35; }
.mailbox-thread-row--unread .mailbox-thread-subject { color: #111827; font-size: 13px; font-weight: 760; }
.mailbox-thread-table .status-badge.info { font-size: 11px; }
.mailbox-handling-status { display: inline-flex; align-items: center; min-height: 20px; margin-left: 6px; padding: 0 7px; border: 1px solid #d8e2ee; border-radius: 999px; background: #f8fafc; color: #64748b; font-size: 11px; font-weight: 760; line-height: 1; vertical-align: middle; white-space: nowrap; }
.mailbox-handling-status--new { border-color: #d8e2ee; background: #f8fafc; color: #64748b; }
.mailbox-handling-status--needs_reply { border-color: #f7c98b; background: #fff8eb; color: #9a5a05; }
.mailbox-handling-status--replied { border-color: #b7dfd6; background: #ecfaf7; color: #137466; }
.mailbox-handling-status--waiting_customer { border-color: #bfd7f7; background: #eff6ff; color: #245ea8; }
.mailbox-handling-status--closed { border-color: #d8dee8; background: #f1f5f9; color: #475569; }
.mailbox-thread-reader .settings-section-head h2 { font-size: 18px; line-height: 1.25; }
.mailbox-thread-reader .settings-section-head .muted { font-size: 12px; }
.mailbox-message-card .section-title-row h2 { font-size: 15px; line-height: 1.25; font-weight: 650; }
.mailbox-message-card p { font-size: 13px; line-height: 1.45; }
.mailbox-message-card p strong { font-size: 13px; font-weight: 650; }

.mailbox-conversation-list { gap: 8px; }
.mailbox-conversation-message { padding: 0; overflow: hidden; border-color: #dfe7f1; background: #fff; box-shadow: none; }
.mailbox-conversation-message[open] { border-color: #cbd8e7; background: #fff; }
.mailbox-conversation-message:not([open]) { border-color: #edf2f7; background: #fbfdff; }
.mailbox-conversation-message:not([open]):hover { border-color: #d8e4ef; background: #f8fbfd; }
.mailbox-conversation-message:not([open]) .mailbox-message-summary { grid-template-columns: 22px minmax(0, 1fr); align-items: center; padding: 7px 10px; }
.mailbox-conversation-message:not([open]) .mailbox-message-avatar { width: 20px; height: 20px; font-size: 9px; opacity: .68; }
.mailbox-conversation-message:not([open]) .mailbox-message-summary-line { line-height: 1.2; }
.mailbox-conversation-message:not([open]) .mailbox-message-sender { color: #44546a; font-size: 12px; font-weight: 610; }
.mailbox-conversation-message:not([open]) .mailbox-message-date-inline { color: #8b97aa; font-size: 11px; font-weight: 500; }
.mailbox-conversation-message:not([open]) .mailbox-message-preview { margin-top: 1px; color: #94a0b2; font-size: 11px; line-height: 1.25; }
.mailbox-conversation-message summary { list-style: none; }
.mailbox-conversation-message summary::-webkit-details-marker { display: none; }
.mailbox-message-summary { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; cursor: pointer; }
.mailbox-message-summary:hover { background: #f8fbfd; }
.mailbox-conversation-message[open] .mailbox-message-summary { background: #fbfdff; border-bottom: 1px solid #e8eef5; }
.mailbox-message-avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: 1px solid #cfe0ef; background: #f3f8fc; color: #5f7188; font-size: 12px; font-weight: 750; }
.mailbox-message-summary-main { min-width: 0; }
.mailbox-message-summary-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.mailbox-message-attachment-chip { display: inline-flex; align-items: center; gap: 3px; min-height: 18px; padding: 0 6px; border: 1px solid #cfe0ef; border-radius: 999px; background: #f5f9fd; color: #53647c; font-size: 10px; font-weight: 760; line-height: 1; vertical-align: middle; white-space: nowrap; }
.mailbox-conversation-message:not([open]) .mailbox-message-attachment-chip { min-height: 16px; padding: 0 5px; border-color: #d8e4ef; background: #fff; color: #6b7890; font-size: 10px; }
.mailbox-conversation-message[open] .mailbox-message-attachment-chip { border-color: #b8d9e8; background: #eef8fc; color: #2f5f75; }
.mailbox-message-sender { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #243044; font-size: 12px; font-weight: 680; }
.mailbox-message-direction { flex: 0 0 auto; color: #748198; font-size: 11px; font-weight: 650; }
.mailbox-message-date-inline { flex: 0 0 auto; color: #7c889b; font-size: 12px; font-weight: 520; white-space: nowrap; }
.mailbox-message-date { color: #748198; font-size: 12px; white-space: nowrap; }
.mailbox-message-preview { display: block; margin-top: 3px; overflow: hidden; color: #6b7890; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-message-attachment-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.mailbox-message-attachment-pill { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; min-height: 24px; padding: 0 8px; border: 1px solid #dce6f0; border-radius: 999px; background: #f8fbfd; color: #44546a; font-size: 11px; font-weight: 650; line-height: 1; vertical-align: middle; }
.mailbox-message-attachment-pill--clickable { cursor: pointer; }
.mailbox-message-attachment-pill--clickable:hover,
.mailbox-message-attachment-pill--clickable:focus { border-color: #b8d9e8; background: #eef8fc; color: #1f5f73; outline: none; }
.mailbox-message-attachment-pill--muted { color: #7c889b; background: #fbfdff; }
.mailbox-message-attachment-pill__icon { flex: 0 0 auto; color: #64748b; font-size: 11px; }
.mailbox-message-attachment-pill__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-message-attachment-pill__meta { flex: 0 0 auto; color: #94a3b8; font-size: 10px; font-weight: 700; }
.mailbox-message-attachment-more { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 10px; font-weight: 800; }
.mailbox-conversation-message:not([open]) .mailbox-message-attachment-strip { margin-top: 4px; gap: 4px; }
.mailbox-conversation-message:not([open]) .mailbox-message-attachment-pill { max-width: 210px; min-height: 20px; padding: 0 7px; font-size: 10px; }
.mailbox-conversation-message:not([open]) .mailbox-message-attachment-pill__meta { display: none; }
.mailbox-message-content { padding: 11px 12px 13px 52px; }
.mailbox-message-header-actions { display: flex; justify-content: flex-end; margin: -2px 0 6px; }
.mailbox-message-details,
.mailbox-quoted-details,
.mailbox-full-details { margin-top: 10px; }
.mailbox-message-details--top { margin: 0 0 6px; }
.mailbox-message-details--top[open] { width: 100%; }
.mailbox-message-details--top[open] > summary { margin-left: auto; }
.mailbox-message-details--top > summary { min-height: 24px; padding: 0 8px; font-size: 11px; font-weight: 700; }
.mailbox-message-details--top .mailbox-message-meta-grid { margin-top: 6px; }
.mailbox-message-details summary,
.mailbox-quoted-details summary,
.mailbox-full-details summary { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border: 1px solid #dce6f0; border-radius: 999px; background: #f8fbfd; color: #53647c; cursor: pointer; font-size: 12px; font-weight: 700; }
.mailbox-message-details summary:hover,
.mailbox-quoted-details summary:hover,
.mailbox-full-details summary:hover { border-color: #bfd2e5; background: #eef6fb; color: #334155; }
.mailbox-quoted-body { margin-top: 8px; padding: 10px 12px; border-left: 3px solid #d7e2ee; background: #f8fafc; color: #64748b; font-size: 12px; line-height: 1.45; white-space: normal; }
.mailbox-full-body { max-height: 320px; margin-top: 8px; padding: 10px 12px; overflow: auto; border: 1px solid #dce6f0; border-radius: 7px; background: #fbfdff; color: #53647c; font-size: 12px; line-height: 1.45; white-space: normal; }
.mailbox-message-meta-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(130px, .55fr) minmax(0, 1.1fr); gap: 8px; margin-top: 8px; }
.mailbox-message-meta-grid > div { min-width: 0; padding: 8px 9px; border: 1px solid #e4ebf3; border-radius: 7px; background: #fbfdff; }
.mailbox-message-meta-grid span { display: block; color: #6b7890; font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.mailbox-message-meta-grid strong { display: block; overflow: hidden; color: #1c2635; font-size: 12px; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-message-meta-grid small { display: block; overflow: hidden; margin-top: 2px; color: #6b7890; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-message-body { max-width: 980px; color: #172231; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.mailbox-message-body p { margin: 0; font-size: 13px; line-height: 1.5; }
.mailbox-message-body--html { max-width: 1040px; }
.mailbox-message-html { display: flow-root; color: #172231; font-size: 13px; line-height: 1.55; }
.mailbox-message-html p,
.mailbox-message-html div { margin: 0 0 9px; }
.mailbox-message-html p:last-child,
.mailbox-message-html div:last-child { margin-bottom: 0; }
.mailbox-message-html h1,
.mailbox-message-html h2,
.mailbox-message-html h3,
.mailbox-message-html h4 { margin: 12px 0 7px; color: #111827; font-weight: 750; line-height: 1.22; }
.mailbox-message-html h1 { font-size: 20px; }
.mailbox-message-html h2 { font-size: 18px; }
.mailbox-message-html h3 { font-size: 16px; }
.mailbox-message-html h4 { font-size: 14px; }
.mailbox-message-html ul,
.mailbox-message-html ol { margin: 8px 0 10px 20px; padding: 0; }
.mailbox-message-html li { margin: 3px 0; }
.mailbox-message-html a { color: #0f766e; font-weight: 650; text-decoration: none; }
.mailbox-message-html a:hover { text-decoration: underline; }
.mailbox-message-html table { width: auto; max-width: 100%; margin: 10px 0; border-collapse: collapse; border: 1px solid #dce6f0; background: #fff; font-size: 12px; }
.mailbox-message-html th,
.mailbox-message-html td { padding: 7px 9px; border: 1px solid #dce6f0; text-align: left; vertical-align: top; }
.mailbox-message-html th { background: #f8fafc; color: #334155; font-weight: 750; }
.mailbox-message-html strong,
.mailbox-message-html b { font-weight: 750; }
.mailbox-message-html em,
.mailbox-message-html i { font-style: italic; }
.mailbox-message-safe-note { margin: 8px 0 0; color: #64748b; font-size: 12px; line-height: 1.35; }
.mailbox-message-attachment-note { margin-top: 10px; padding: 7px 9px; border: 1px solid #d8e4f0; border-radius: 7px; background: #f7fafc; color: #53647c; font-size: 12px; }
.mailbox-message-attachments { display: grid; gap: 6px; margin-top: 10px; max-width: 720px; padding: 8px; border: 1px solid #dce6f0; border-radius: 8px; background: #fbfdff; }
.mailbox-message-attachments__title { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.mailbox-attachment-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 7px; border: 1px solid #edf2f7; border-radius: 7px; background: #fff; }
.mailbox-attachment-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: #eef6fb; color: #53647c; font-size: 12px; line-height: 1; }
.mailbox-attachment-main { display: grid; min-width: 0; flex: 1 1 auto; }
.mailbox-attachment-name { overflow: hidden; color: #243044; font-size: 12px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-attachment-meta { overflow: hidden; color: #7c889b; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-attachment-download,
.mailbox-attachment-open { flex: 0 0 auto; min-height: 28px; padding: 0 9px; font-size: 12px; font-weight: 700; }
.mailbox-attachment-open { color: #334155; }
.mailbox-attachment-unavailable { flex: 0 0 auto; color: #94a3b8; font-size: 11px; }
.mailbox-attachment-indicator { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 5px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 11px; vertical-align: middle; }
.mailbox-thread-date-value { display: block; }
.mailbox-thread-date-cell .mailbox-attachment-indicator { display: flex; margin: 4px 0 0 auto; }
.mailbox-attachment-modal__dialog { width: min(920px, calc(100vw - 36px)); max-height: calc(100vh - 36px); }
.mailbox-attachment-modal .app-modal__body { max-height: calc(100vh - 128px); overflow: auto; }
.mailbox-attachment-preview { display: grid; gap: 12px; }
.mailbox-attachment-preview__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 10px 12px; border: 1px solid #dce6f0; border-radius: 8px; background: #fbfdff; }
.mailbox-attachment-preview__title { min-width: 0; }
.mailbox-attachment-preview__title h2 { margin: 2px 0 0; overflow: hidden; color: #172231; font-size: 18px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-attachment-preview__title p { margin: 4px 0 0; color: #64748b; font-size: 12px; }
.mailbox-attachment-preview__download { flex: 0 0 auto; }
.mailbox-attachment-preview__canvas { min-height: 260px; border: 1px solid #dce6f0; border-radius: 8px; background: #f8fafc; overflow: hidden; }
.mailbox-attachment-preview__canvas--image { display: flex; align-items: center; justify-content: center; padding: 12px; }
.mailbox-attachment-preview__canvas--image img { display: block; max-width: 100%; max-height: 68vh; border-radius: 6px; object-fit: contain; }
.mailbox-attachment-preview__canvas--pdf iframe { display: block; width: 100%; height: min(70vh, 680px); border: 0; background: #fff; }
.mailbox-attachment-preview__text { max-height: 62vh; margin: 0; padding: 14px; overflow: auto; border: 1px solid #dce6f0; border-radius: 8px; background: #0f172a; color: #e2e8f0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.mailbox-attachment-preview__message { padding: 14px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; color: #53647c; font-size: 13px; line-height: 1.45; }
.mailbox-attachment-preview__message--error { border-color: #fecaca; background: #fff7f7; color: #b42318; }
@media (max-width: 900px) {
  .mailbox-message-summary { grid-template-columns: 28px minmax(0, 1fr); }
  .mailbox-message-date { grid-column: 2; }
  .mailbox-message-content { padding-left: 12px; }
  .mailbox-message-header-actions { justify-content: flex-start; }
  .mailbox-message-meta-grid { grid-template-columns: 1fr; }
}

.mailbox-thread-sender-cell { width: 210px; color: #475569; }
.mailbox-thread-sender { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; font-size: 13px; font-weight: 560; }
.mailbox-thread-count { color: #8491a4; font-size: 12px; font-weight: 650; }
.mailbox-thread-mailbox-cell { width: 150px; color: #66758a; font-size: 12px; }
.mailbox-thread-date-cell { width: 74px; text-align: right; color: #64748b; white-space: nowrap; font-size: 12px; font-weight: 650; }
.mailbox-thread-row--unread .mailbox-thread-sender { color: #111827; font-weight: 780; }
.mailbox-thread-row--unread .mailbox-thread-count,
.mailbox-thread-row--unread .mailbox-thread-date-cell { color: #334155; font-weight: 760; }

.mailbox-project-badge { display: inline-flex; align-items: center; max-width: 230px; padding: 3px 8px; border: 1px solid #b7dfd6; border-radius: 999px; background: #ecfaf7; color: #137466; font-size: 11px; font-weight: 760; line-height: 1.15; text-decoration: none; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-project-badge:hover { border-color: #8ecfc2; background: #ddf6f1; color: #0f5f54; text-decoration: none; }
.mailbox-project-badge--city { max-width: 150px; border-color: #d8e2ee; background: #fff; color: #64748b; }
.mailbox-project-badge--city:hover { border-color: #c5d2e2; background: #f8fafc; color: #475569; }
.mailbox-thread-table .mailbox-project-badge { margin-top: 0; }
.mailbox-thread-reader .mailbox-project-badge { transform: translateY(-2px); }

.mailbox-folder-eyebrow { margin-top: 8px; }
.mailbox-thread-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.mailbox-thread-actions form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.mailbox-action-button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; font-size: 12px; line-height: 1; white-space: nowrap; }
.mailbox-action-icon { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mailbox-thread-action-details { position: relative; display: inline-flex; }
.mailbox-thread-action-details > summary { list-style: none; cursor: pointer; }
.mailbox-thread-action-details > summary::-webkit-details-marker { display: none; }
.mailbox-thread-action-details[open] > summary { border-color: #abd9d0; background: #ecfaf7; color: var(--accent); }
.mailbox-delete-button { border-color: #efd2cf; color: #9f3a31; }
.mailbox-delete-button:hover { border-color: #e9aaa3; background: #fff7f6; color: #8f2e26; }
.mailbox-thread-row-delete { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-height: 24px; margin-left: 6px; padding: 0; border-color: transparent; color: #b77972; font-size: 16px; line-height: 1; vertical-align: middle; opacity: .62; }
.mailbox-thread-row-delete:hover { border-color: #efc7c2; background: #fff7f6; color: #9f3a31; opacity: 1; }
.mailbox-delete-modal__dialog { width: min(520px, calc(100vw - 36px)); }
.mailbox-delete-modal__text { margin: 0 0 8px; color: #172231; font-size: 15px; font-weight: 720; }
.mailbox-delete-modal__subject { margin: 0 0 10px; padding: 9px 10px; border: 1px solid #e4ebf3; border-radius: 7px; background: #f8fafc; color: #334155; font-size: 13px; line-height: 1.35; }
.mailbox-thread-action-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(430px, calc(100vw - 48px)); padding: 12px; border: 1px solid #d7e2ee; border-radius: 9px; background: #fff; box-shadow: 0 18px 38px rgba(15, 23, 42, .14); }
.mailbox-thread-action-popover .mailbox-access-form { margin: 0; padding: 0; border: 0; background: transparent; }
.mailbox-thread-action-popover .form-actions { margin-top: 8px; }
.mailbox-linked-projects { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: -2px 0 12px; padding: 8px 10px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfdff; color: #64748b; font-size: 12px; }
.mailbox-linked-projects > span:first-child { color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.mailbox-project-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 340px; min-height: 24px; padding: 0 7px; border: 1px solid #b7dfd6; border-radius: 999px; background: #ecfaf7; color: #137466; font-size: 12px; font-weight: 720; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-project-chip:hover { border-color: #8ecfc2; background: #ddf6f1; }
.mailbox-project-chip__link { min-width: 0; overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.mailbox-project-chip__link:hover { color: #0f5f54; text-decoration: none; }
.mailbox-project-chip form { max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.mailbox-project-chip button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-height: 18px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #137466; font-size: 14px; line-height: 1; }
.mailbox-project-chip button:hover { background: #d7f2ec; color: #0f5f54; }
.mailbox-sidebar-item small + small { color: #8491a4; font-size: 11px; }
@media (max-width: 760px) {
  .mailbox-search-shell { flex-direction: column; align-items: stretch; }
  .mailbox-refresh-form { width: 100%; }
  .mailbox-refresh-button { width: 100%; justify-content: center; }
  .mailbox-thread-actions { justify-content: flex-start; }
  .mailbox-thread-action-details { width: 100%; }
  .mailbox-thread-action-popover { position: static; width: 100%; margin-top: 8px; box-shadow: none; }
}
/* Mailbox compact navigation 2026-06-15 */
.mailbox-workspace { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: 12px; }
.mailbox-sidebar { padding: 10px 9px; }
.mailbox-sidebar .settings-section-head { margin-bottom: 7px; padding: 0 6px; }
.mailbox-sidebar .settings-section-head h2 { font-size: 15px; line-height: 1.2; }
.mailbox-sidebar-list { gap: 2px; }
.mailbox-sidebar-item { min-height: 38px; padding: 7px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; }
.mailbox-sidebar-item:hover { border-color: transparent; background: #f4fbf9; }
.mailbox-sidebar-item--active { border-color: transparent; background: #ecfaf7; box-shadow: inset 3px 0 0 var(--accent); }
.mailbox-sidebar-item strong { font-size: 13px; line-height: 1.15; }
.mailbox-sidebar-item small { margin-top: 2px; font-size: 11px; line-height: 1.15; }
.mailbox-unread-badge { min-width: 20px; height: 20px; padding: 0 6px; background: #dc2626; font-size: 11px; box-shadow: 0 2px 7px rgba(220, 38, 38, .22); }
.mailbox-folder-list { gap: 1px; margin-top: 10px; padding-top: 9px; }
.mailbox-folder-item { min-height: 30px; padding: 5px 8px; border-radius: 7px; font-size: 13px; }
.mailbox-folder-item--active { box-shadow: inset 3px 0 0 var(--accent); }
.mailbox-folder-eyebrow { margin-top: 7px; }
.mailbox-search-shell { align-items: flex-end; gap: 8px; }
.mailbox-search-shell .mailbox-compose-trigger { flex: 0 0 auto; min-height: 38px; white-space: nowrap; }
.mailbox-refresh-button { min-height: 38px; }
@media (max-width: 900px) {
  .mailbox-workspace { grid-template-columns: 1fr; }
  .mailbox-search-shell { align-items: stretch; flex-direction: column; }
  .mailbox-search-shell .mailbox-compose-trigger,
  .mailbox-refresh-form,
  .mailbox-refresh-button { width: 100%; justify-content: center; }
}

.employee-worktime-panel { margin-bottom: 10px; padding: 10px; border: 1px solid #f1f5f9; border-radius: 8px; background: #fff; }
.employee-worktime-panel--calendar { display: grid; gap: 12px; transition: opacity .16s ease, transform .16s ease; }
.employee-worktime-panel--calendar.is-loading { opacity: .58; transform: translateY(2px); pointer-events: none; }
.employee-worktime-panel--calendar.is-entering { animation: employeeWorktimeCalendarEnter .18s ease-out; }
@keyframes employeeWorktimeCalendarEnter { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.employee-worktime-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.employee-worktime-head h2 { margin: 0 0 3px; color: var(--ink); font-size: 24px; line-height: 1.1; }
.employee-worktime-rule { max-width: 860px; margin: 8px 0 0; color: #566783; font-size: 13px; line-height: 1.35; }
.employee-worktime-calendar { display: grid; gap: 8px; padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; }
.employee-worktime-calendar__head { display: flex; align-items: center; gap: 6px; }
.employee-worktime-calendar__head strong { flex: 1; color: #17232b; font-size: 17px; font-weight: 850; text-align: center; text-transform: none; }
.employee-worktime-calendar__head .button { min-height: 30px; padding: 5px 9px; font-size: 12px; }
.employee-worktime-month-button { display: inline-flex; align-items: center; gap: 4px; color: #334155; }
.employee-worktime-month-button .app-icon { width: 15px; height: 15px; stroke: currentColor; }
.employee-worktime-month-button--today { padding-inline: 11px; font-weight: 800; }
.employee-worktime-calendar-filter { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.employee-worktime-calendar-filter label { color: #66758d; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.employee-worktime-calendar-filter select { min-height: 30px; min-width: 220px; max-width: 280px; padding: 4px 28px 4px 8px; border: 1px solid #d4dee9; border-radius: 7px; background-color: #fff; color: #17232b; font-size: 13px; font-weight: 750; }
.employee-worktime-month__legend { display: flex; flex-wrap: wrap; gap: 4px 9px; color: #b2bdca; font-size: 9px; font-weight: 480; }
.employee-worktime-month__legend span { display: inline-flex; align-items: center; gap: 4px; opacity: .62; }
.employee-worktime-month__legend i { display: inline-block; width: 6px; height: 6px; border-radius: 999px; border: 1px solid currentColor; opacity: .42; }
.employee-worktime-month__legend .is-ok { background: #dff7ed; color: #4b9b82; }
.employee-worktime-month__legend .is-warning { background: #fff4cd; color: #c18b3f; }
.employee-worktime-month__legend .is-danger { background: #fee2e2; color: #d36b66; }
.employee-worktime-month__legend .is-holiday { background: #fce7f3; color: #d16b9c; }
.employee-worktime-month__legend .is-weekend { background: #eef2f7; color: #94a3b8; }
.employee-worktime-membership-note { margin: -2px 0 0; color: #8a98ab; font-size: 11px; font-weight: 600; }
.employee-worktime-month__weekdays, .employee-worktime-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.employee-worktime-month__weekdays span { color: #66758d; font-size: 10px; font-weight: 900; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.employee-worktime-month-day { position: relative; display: grid; align-content: space-between; gap: 3px; min-height: 68px; padding: 6px 7px; border: 1px solid #d7e1ec; border-radius: 8px; background: #fff; color: #334155; text-decoration: none; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.employee-worktime-month-day:hover,
.employee-worktime-month-day:focus,
.employee-worktime-month-day:focus-visible { z-index: 50; border-color: #9bb7d1; background: #f5f9fc; }
.employee-worktime-month-day__number { color: #66758d; font-size: 12px; font-weight: 760; line-height: 1; }
.employee-worktime-month-day strong { color: #17232b; font-size: 13px; font-weight: 720; line-height: 1.12; white-space: normal; overflow-wrap: anywhere; }
.employee-worktime-month-day small { color: #7a879a; font-size: 10px; font-weight: 560; line-height: 1.12; }
.employee-worktime-day-tooltip { position: absolute; left: 8px; top: calc(100% + 7px); z-index: 40; width: max-content; min-width: 230px; max-width: min(340px, 80vw); padding: 9px 10px; border: 1px solid rgba(23, 35, 43, .18); border-radius: 8px; background: #17232b; color: #f8fafc; box-shadow: 0 14px 32px rgba(15, 23, 42, .22); opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none; transition: opacity .1s ease, transform .1s ease, visibility 0s linear .1s; }
.employee-worktime-month__grid .employee-worktime-month-day:nth-child(7n) .employee-worktime-day-tooltip,
.employee-worktime-month__grid .employee-worktime-month-day:nth-child(7n - 1) .employee-worktime-day-tooltip { left: auto; right: 8px; }
.employee-worktime-month-day:hover .employee-worktime-day-tooltip,
.employee-worktime-month-day:focus .employee-worktime-day-tooltip,
.employee-worktime-month-day:focus-visible .employee-worktime-day-tooltip { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: .08s, .08s, 0s; }
.employee-worktime-day-tooltip__title { display: block; margin-bottom: 6px; color: #cbd5e1; font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.employee-worktime-day-tooltip__row { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 12px; align-items: baseline; margin-top: 4px; padding: 5px 7px; border-left: 3px solid rgba(203, 213, 225, .28); border-radius: 6px; background: rgba(248, 250, 252, .08); color: #f8fafc; font-size: 12px; line-height: 1.25; }
.employee-worktime-day-tooltip__row.is-standard-hours { border-left-color: #2dd4bf; background: rgba(20, 184, 166, .18); }
.employee-worktime-day-tooltip__row.is-under-hours { border-left-color: #f59e0b; background: rgba(245, 158, 11, .18); }
.employee-worktime-day-tooltip__row.is-overtime { border-left-color: #fb7185; background: rgba(244, 63, 94, .18); }
.employee-worktime-day-tooltip__row strong { color: #e2e8f0; font-size: 12px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.employee-worktime-month-day.is-outside { border-color: #e7eef6; background: #f8fafc; }
.employee-worktime-month-day.is-outside .employee-worktime-month-day__number,
.employee-worktime-month-day.is-outside strong,
.employee-worktime-month-day.is-outside small { opacity: .52; }
.employee-worktime-month-day.is-outside:hover .employee-worktime-month-day__number,
.employee-worktime-month-day.is-outside:hover strong,
.employee-worktime-month-day.is-outside:hover small,
.employee-worktime-month-day.is-outside:focus .employee-worktime-month-day__number,
.employee-worktime-month-day.is-outside:focus strong,
.employee-worktime-month-day.is-outside:focus small,
.employee-worktime-month-day.is-outside:focus-visible .employee-worktime-month-day__number,
.employee-worktime-month-day.is-outside:focus-visible strong,
.employee-worktime-month-day.is-outside:focus-visible small { opacity: 1; }
.employee-worktime-month-day.is-weekend { border-color: #ccd6e3; background: #f6f8fb; }
.employee-worktime-month-day.is-weekend .employee-worktime-month-day__number,
.employee-worktime-month-day.is-weekend strong,
.employee-worktime-month-day.is-weekend small { color: #64748b; }
.employee-worktime-month-day.is-today { border-color: #3b82f6; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .35); }
.employee-worktime-month-day.is-selected { border-color: #172554; background: #172554; box-shadow: none; }
.employee-worktime-month-day.is-selected .employee-worktime-month-day__number,
.employee-worktime-month-day.is-selected strong,
.employee-worktime-month-day.is-selected small { color: #fff; }
.employee-worktime-month-day.is-selected:hover { border-color: #1e3a8a; background: #1e3a8a; }
.employee-worktime-month-day.is-ok { border-color: #a7dfc8; background: #ecfdf5; }
.employee-worktime-month-day.is-ok strong, .employee-worktime-month-day.is-ok small { color: #0f766e; }
.employee-worktime-month-day.is-warning { border-color: #f8d68f; background: #fffbeb; }
.employee-worktime-month-day.is-warning strong, .employee-worktime-month-day.is-warning small { color: #9a5b0b; }
.employee-worktime-month-day.is-danger { border-color: #fecaca; background: #fff1f2; }
.employee-worktime-month-day.is-danger strong, .employee-worktime-month-day.is-danger small { color: #b42318; }
.employee-worktime-month-day.is-empty { border-color: #eef3f8; background: #fdfefe; color: #b3bfcd; }
.employee-worktime-month-day.is-empty:hover { border-color: #dce6f0; background: #fbfdff; }
.employee-worktime-month-day.is-empty .employee-worktime-month-day__number { color: #a8b6c6; }
.employee-worktime-month-day.is-empty strong { color: #d0d8e2; font-weight: 520; }
.employee-worktime-month-day.is-empty small { color: #aab7c7; font-weight: 480; }
.employee-worktime-month-day.is-holiday { border-color: #f9a8d4; background: #fdf2f8; }
.employee-worktime-month-day.is-holiday .employee-worktime-month-day__number,
.employee-worktime-month-day.is-holiday strong,
.employee-worktime-month-day.is-holiday small { color: #be185d; }
.employee-worktime-month-day .employee-worktime-day-tooltip__title { color: #cbd5e1; }
.employee-worktime-month-day .employee-worktime-day-tooltip__row { color: #f8fafc; }
.employee-worktime-month-day .employee-worktime-day-tooltip__row.is-standard-hours { border-left-color: #2dd4bf; background: rgba(20, 184, 166, .18); }
.employee-worktime-month-day .employee-worktime-day-tooltip__row.is-under-hours { border-left-color: #f59e0b; background: rgba(245, 158, 11, .18); }
.employee-worktime-month-day .employee-worktime-day-tooltip__row.is-overtime { border-left-color: #fb7185; background: rgba(244, 63, 94, .18); }

.employee-worktime-month-day.is-today {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .72), inset 0 0 0 1px rgba(255, 255, 255, .85);
}
.employee-worktime-month-day.is-selected {
  border-color: #172554;
  box-shadow: 0 0 0 2px #172554, inset 0 0 0 1px rgba(255, 255, 255, .88);
}
.employee-worktime-month-day.is-today.is-selected {
  border-color: #172554;
  box-shadow: 0 0 0 2px #172554, 0 0 0 5px rgba(37, 99, 235, .22), inset 0 0 0 1px rgba(255, 255, 255, .88);
}
.employee-worktime-month-day.is-selected .employee-worktime-month-day__number {
  color: #172554;
  font-weight: 900;
}
.employee-worktime-month-day .employee-worktime-day-tooltip__row strong { color: #e2e8f0; font-size: 12px; font-weight: 800; line-height: 1.25; }
.employee-worktime-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.employee-worktime-toolbar .material-action-button { min-height: 34px; padding: 7px 12px; }
.employee-worktime-bulk-approve-button { min-height: 40px; padding: 8px 15px; border-color: #126b5f; background: #147968; color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 8px 18px rgba(20, 121, 104, .16); }
.employee-worktime-bulk-approve-button:hover, .employee-worktime-bulk-approve-button:focus { border-color: #0f5f54; background: #106b5d; color: #fff; }
.employee-worktime-bulk-approve-button .app-icon { width: 16px; height: 16px; margin-right: 6px; color: #fff; stroke: currentColor; stroke-width: 2.4; }
.employee-worktime-bulk-form { display: inline-flex; align-items: center; gap: 9px; }
.employee-worktime-bulk-standard { display: grid; gap: 1px; color: #94a3b8; font-size: 10px; font-weight: 760; letter-spacing: .035em; text-transform: uppercase; }
.employee-worktime-bulk-standard strong { color: #126b5f; font-size: 13px; font-weight: 900; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.employee-worktime-date-actions, .employee-worktime-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.employee-worktime-date-actions .button, .employee-worktime-actions .button { min-height: 32px; padding: 6px 10px; font-size: 13px; }
.employee-worktime-filter { flex: 1 1 420px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; }
.employee-worktime-filter input[type="date"] { min-width: 150px; }
.employee-worktime-search-field { position: relative; flex: 1 1 320px; max-width: 430px; }
.employee-worktime-search-field .app-icon { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.employee-worktime-search-field input[type="search"] { width: 100%; min-height: 34px; padding: 6px 10px 6px 34px; border-color: transparent; border-radius: 8px; background: #f8fafc; font-size: 13px; }
.employee-worktime-search-field input[type="search"]::placeholder { color: #94a3b8; }
.employee-worktime-clear-search { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.employee-worktime-summary { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 10px 0 0; }
.employee-worktime-summary .detail-item { padding: 9px 10px; }
.employee-worktime-summary .detail-item strong { font-size: 18px; white-space: nowrap; }
.employee-worktime-form { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
.employee-worktime-ajax-status { position: fixed; top: 18px; left: 50%; z-index: 3200; width: max-content; max-width: min(520px, calc(100vw - 28px)); margin: 0; padding: 9px 13px; border: 1px solid #b7dfd6; border-radius: 10px; background: rgba(238, 250, 247, .98); color: #126b5f; font-size: 13px; font-weight: 800; line-height: 1.25; text-align: center; box-shadow: 0 12px 30px rgba(15, 23, 42, .14); transform: translateX(-50%); pointer-events: none; }
.employee-worktime-ajax-status.is-error { border-color: #fecaca; background: rgba(255, 241, 242, .98); color: #b42318; }
.employee-worktime-ajax-status[hidden] { display: none; }
.employee-worktime-scroll { width: 100%; overflow-x: auto; padding: 0 0 2px; }
.employee-worktime-table { width: 100%; min-width: 980px; border-color: #eef3f8; }
.employee-worktime-table th:nth-child(1) { width: 160px; }
.employee-worktime-table th:nth-child(3) { width: 160px; }
.employee-worktime-table th:nth-child(6) { width: 110px; }
.employee-worktime-table input, .employee-worktime-table select { min-height: 32px; padding: 5px 7px; border-color: #e4ebf2; font-size: 13px; }
.employee-worktime-table .employee-worktime-day-select { min-width: 132px; }
.employee-worktime-table .employee-worktime-status-empty { display: none; }
.employee-worktime-table input[type="time"] { width: 96px; }
.employee-worktime-table input[type="text"] { width: 190px; }
.employee-worktime-table td { vertical-align: middle; }
.employee-worktime-table .employee-position-stack { gap: 3px; max-width: 180px; }
.employee-worktime-table .employee-position-stack > span:first-child { color: #8a98ab; font-size: 11px; font-style: italic; font-weight: 440; line-height: 1.2; }
.employee-worktime-table .employee-rank { opacity: .42; transform: scaleX(.74); transform-origin: left center; }
.employee-worktime-result { color: #17232b; font-weight: 850; white-space: nowrap; }
.employee-worktime-table tr.is-approved { background: #ecfdf5; box-shadow: inset 4px 0 0 #16a078; }
.employee-worktime-table tr.is-approved td { border-color: #c8eadb; }
.employee-worktime-table tr.is-approved input, .employee-worktime-table tr.is-approved select { background: #f8fafc; color: #64748b; }
.employee-worktime-table tr.is-approved.is-editable-approved input, .employee-worktime-table tr.is-approved.is-editable-approved select { background: #fff; color: #17232b; }
.employee-worktime-table tr.is-under-hours { background: #fffbeb; box-shadow: inset 4px 0 0 #f59e0b; }
.employee-worktime-table tr.is-under-hours td { border-color: #f8d68f; }
.employee-worktime-table tr.is-overtime { background: #fff1f2; box-shadow: inset 4px 0 0 #e11d48; }
.employee-worktime-table tr.is-overtime td { border-color: #fecaca; }
.employee-worktime-table tr.is-standard-hours { background: #ecfdf5; box-shadow: inset 4px 0 0 #16a078; }
.employee-worktime-table tr.is-under-hours input, .employee-worktime-table tr.is-under-hours select, .employee-worktime-table tr.is-overtime input, .employee-worktime-table tr.is-overtime select { background: #fff; color: #334155; }
.employee-worktime-table .table-action-button { min-height: 28px; padding: 4px 8px; border-color: #e4ebf2; font-size: 12px; }
.employee-worktime-approve-button { border-color: #a7d7cc; background: #eefaf7; color: #126b5f; font-weight: 900; }
.employee-worktime-approve-button:hover { border-color: #1f7668; background: #dff4ef; }
.employee-worktime-action-stack { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 5px; white-space: nowrap; }
.employee-worktime-clear-button { border-color: #d6dee9; background: #fff; color: #64748b; font-weight: 800; }
.employee-worktime-clear-button:hover { border-color: #cbd5e1; background: #f8fafc; color: #334155; }
.employee-worktime-locked-label { color: #94a3b8; font-size: 12px; font-weight: 750; }
.employee-worktime-approved-label { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 8px; border: 1px solid #a7d7cc; border-radius: 999px; background: #e4f7f1; color: #106256; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.employee-worktime-approved-label.is-under-hours { border-color: #f2c56f; background: #fff7d6; color: #975a16; }
.employee-worktime-approved-label.is-overtime { border-color: #fecaca; background: #fee2e2; color: #b42318; }
.employee-worktime-approved-label.is-standard-hours { border-color: #a7d7cc; background: #e4f7f1; color: #106256; }

.employee-worktime-table { min-width: 900px; }
.employee-worktime-table th:nth-child(4) { width: 170px; }
.employee-worktime-table th:nth-child(5) { width: 100px; }
.employee-worktime-table th:nth-child(6) { width: 210px; }
.employee-worktime-table th:nth-child(7) { width: 190px; }
.employee-worktime-hours-cell { min-width: 160px; }
.employee-worktime-hours-control { display: inline-flex; align-items: center; gap: 8px; }
.employee-worktime-hours-range { min-width: 78px; color: #17232b; font-size: 13px; font-weight: 800; white-space: nowrap; }
.employee-worktime-hours-range--empty { color: #94a3b8; font-weight: 650; }
.employee-worktime-set-button { min-height: 27px; padding: 3px 8px; border-color: #edf2f7; background: transparent; color: #64748b; font-size: 12px; font-weight: 680; }
.employee-worktime-set-button:hover, .employee-worktime-set-button:focus { border-color: #b7dfd6; background: #f4fbf8; color: #126b5f; }
.employee-worktime-set-button:disabled { border-color: #e2e8f0; background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.app-modal--worktime-time .app-modal__dialog { width: min(620px, calc(100vw - 24px)); }
.app-modal--worktime-time .app-modal__body { padding: 16px; }
.employee-worktime-modal-eyebrow { display: block; margin-bottom: 4px; color: #126b5f; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.employee-worktime-time-modal__meta { margin: 4px 0 0; color: #64748b; font-size: 12px; font-weight: 650; }
.employee-worktime-time-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.employee-worktime-time-grid label { display: grid; gap: 6px; margin: 0; color: #64748b; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.employee-worktime-time-grid input[type="time"] { width: 100%; min-height: 46px; padding: 8px 10px; border: 1px solid #d7e1ec; border-radius: 8px; background: #fff; color: #17232b; font-size: 20px; font-weight: 850; }
.employee-worktime-time-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.employee-worktime-time-presets .table-action-button { min-height: 30px; padding: 5px 10px; border-color: #d7e1ec; background: #f8fafc; color: #475569; font-size: 12px; font-weight: 800; }
.employee-worktime-time-presets .table-action-button:hover { border-color: #9ecdc3; background: #eefaf7; color: #126b5f; }
.employee-worktime-time-preview { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 13px; border: 1px solid #dceee9; border-radius: 8px; background: #f2fbf8; }
.employee-worktime-time-preview span { color: #64748b; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.employee-worktime-time-preview strong { color: #126b5f; font-size: 24px; font-weight: 900; line-height: 1; }
.employee-worktime-time-note { margin: 9px 0 0; color: #7a879a; font-size: 12px; font-weight: 600; }
.employee-worktime-time-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.employee-worktime-time-actions .button { min-height: 34px; padding: 7px 12px; font-size: 13px; }
.app-modal--worktime-time .employee-worktime-time-actions .material-action-button { border-color: #126b5f; background: #147968; color: #fff; font-weight: 900; }
.app-modal--worktime-time .employee-worktime-time-actions .material-action-button:hover { border-color: #0f5f54; background: #106b5d; color: #fff; }
.app-modal--worktime-time .employee-worktime-time-actions .employee-worktime-approve-button { box-shadow: 0 7px 16px rgba(20, 121, 104, .16); }
@media (max-width: 640px) { .employee-worktime-time-grid { grid-template-columns: 1fr; } .employee-worktime-time-actions { justify-content: stretch; } .employee-worktime-time-actions .button { flex: 1 1 auto; } }
.app-modal--worktime-bulk .app-modal__dialog { width: min(720px, calc(100vw - 24px)); }
.app-modal--worktime-bulk .app-modal__body { padding: 16px; }
.employee-worktime-bulk-summary { margin: 4px 0 0; color: #475569; font-size: 13px; font-weight: 750; }
.employee-worktime-bulk-warning { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #f3d7a0; border-radius: 8px; background: #fff7e6; color: #8a5b05; font-size: 13px; font-weight: 750; }
.employee-worktime-bulk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.employee-worktime-bulk-section { min-height: 118px; padding: 11px; border: 1px solid #d9e4ef; border-radius: 8px; background: #fff; }
.employee-worktime-bulk-section h3 { margin: 0 0 8px; color: #334155; font-size: 12px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.employee-worktime-bulk-section ul { display: grid; gap: 6px; max-height: 170px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.employee-worktime-bulk-section li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #17232b; font-size: 13px; line-height: 1.25; }
.employee-worktime-bulk-section li strong { font-weight: 850; }
.employee-worktime-bulk-section li span { color: #64748b; font-size: 12px; font-weight: 700; text-align: right; }
.employee-worktime-bulk-section .employee-worktime-bulk-empty { color: #94a3b8; font-size: 12px; font-weight: 700; }
.employee-worktime-bulk-section.is-standard { border-color: #bbe6d8; background: #f4fbf8; }
.employee-worktime-bulk-section.is-attention { border-color: #f1d391; background: #fffaf0; }
.employee-worktime-bulk-section.is-approved,
.employee-worktime-bulk-section.is-skipped { background: #f8fafc; }
.employee-worktime-bulk-actions .material-action-button:disabled { border-color: #d7e1ec; background: #e8eef5; color: #7a879a; box-shadow: none; cursor: not-allowed; }
@media (max-width: 760px) { .employee-worktime-bulk-grid { grid-template-columns: 1fr; } }

.employee-worktime-history-card .form-actions { margin: 8px 0; }
.employee-worktime-history-table th, .employee-worktime-history-table td { white-space: nowrap; }
@media (max-width: 980px) { .employee-worktime-head { flex-direction: column; } .employee-worktime-calendar__head { flex-wrap: wrap; } .employee-worktime-calendar-filter { width: 100%; } .employee-worktime-calendar-filter select { flex: 1; min-width: 0; max-width: none; } .employee-worktime-calendar__head strong { order: -1; flex-basis: 100%; text-align: left; } .employee-worktime-month__weekdays, .employee-worktime-month__grid { gap: 4px; } .employee-worktime-month-day { min-height: 56px; padding: 5px; } .employee-worktime-month-day strong { font-size: 13px; } .employee-worktime-toolbar { align-items: stretch; } .employee-worktime-toolbar form { width: 100%; } .employee-worktime-form { overflow-x: auto; } }

.employee-compensation-card { display: grid; gap: 12px; }
.employee-compensation-title { align-items: flex-start; margin-bottom: 0; }
.employee-compensation-title .material-action-button { min-height: 34px; white-space: nowrap; }
.employee-compensation-confidential { margin: 2px 0 0; color: #7a8797; font-size: 12px; font-weight: 650; line-height: 1.3; }
.employee-compensation-current { display: grid; gap: 10px; padding: 12px; border: 1px solid #cfe4df; border-left: 3px solid var(--accent); border-radius: 8px; background: #f7fbfa; }
.employee-compensation-current__head { display: grid; gap: 2px; }
.employee-compensation-current__head span, .employee-compensation-facts span { color: #64748b; font-size: 10px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; }
.employee-compensation-current__head strong { color: #17232b; font-size: 16px; line-height: 1.25; }
.employee-compensation-current__head small { color: #64748b; font-size: 12px; font-weight: 650; }
.employee-compensation-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.employee-compensation-facts div { min-width: 0; padding: 8px 9px; border: 1px solid #dfe8ef; border-radius: 7px; background: #fff; }
.employee-compensation-facts strong { display: block; margin-top: 3px; color: #17232b; font-size: 13px; font-weight: 760; line-height: 1.3; overflow-wrap: anywhere; }
.employee-compensation-history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 4px; }
.employee-compensation-history-head h3 { margin: 0; color: #334155; font-size: 15px; font-weight: 750; }
.employee-compensation-history-head span { color: #7a8797; font-size: 12px; font-weight: 700; }
.employee-compensation-rates { display: grid; gap: 2px; min-width: 180px; color: #475569; font-size: 12px; line-height: 1.35; }
.employee-compensation-rates strong { color: var(--ink); font-weight: 750; }
.employee-compensation-table th, .employee-compensation-table td { vertical-align: middle; }
.employee-compensation-form-note { margin: -4px 0 12px; font-size: 13px; line-height: 1.4; }
.employee-compensation-form-section .field-full { grid-column: 1 / -1; }
.employee-compensation-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 10px; }
.employee-compensation-mode-card { margin: 0; padding: 10px; border: 1px solid #dfe8ef; border-radius: 8px; background: #f8fafc; }
.employee-compensation-mode-card label { font-size: 11px; letter-spacing: .035em; text-transform: uppercase; }
.employee-compensation-mode-card select { width: 100%; min-height: 36px; margin-top: 5px; }
.employee-compensation-mode-hint { margin: 0 0 10px; padding: 9px 10px; border: 1px solid #cfe4df; border-radius: 8px; background: #f5fbf8; color: #375f55; font-size: 12px; font-weight: 700; line-height: 1.4; }
.employee-compensation-guided-fields { display: grid; gap: 10px; }
.employee-compensation-field-group { padding: 10px; border: 1px solid #dfe8ef; border-radius: 8px; background: #fff; }
.employee-compensation-field-group.is-hidden { display: none; }
.employee-compensation-field-group h3 { margin: 0 0 4px; color: #243447; font-size: 13px; font-weight: 850; }
.employee-compensation-field-group > .muted { margin: 0 0 8px; font-size: 12px; line-height: 1.35; }
.employee-compensation-field-group .app-modal-grid { margin: 0; }
.employee-compensation-field-group--quiet { background: #fbfcfe; }
@media (max-width: 980px) { .employee-compensation-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .employee-compensation-title { align-items: flex-start; flex-direction: column; } .employee-compensation-title .material-action-button { width: 100%; justify-content: center; } .employee-compensation-facts { grid-template-columns: 1fr; } .employee-compensation-mode-grid { grid-template-columns: 1fr; } }

.employee-compensation-overview-head .page-subtitle { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.92rem; }
.employee-compensation-overview-panel,
.employee-compensation-overview-table-wrap { margin-bottom: 0.9rem; padding: 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.employee-compensation-overview-filter { display: flex; align-items: end; gap: 0.55rem; margin-bottom: 0.65rem; }
.employee-compensation-overview-filter label { display: grid; gap: 0.25rem; min-width: 240px; color: var(--muted); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.employee-compensation-overview-filter input { min-height: 2.35rem; }
.employee-compensation-overview-status-actions { margin-bottom: 0.75rem; }
.employee-compensation-overview-summary { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.55rem; }
.employee-compensation-overview-summary > div { padding: 0.65rem; border: 1px solid var(--border-subtle, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--surface) 93%, var(--background)); }
.employee-compensation-overview-summary span { display: block; color: var(--muted); font-size: 0.68rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.04em; }
.employee-compensation-overview-summary strong { display: block; margin-top: 0.15rem; color: var(--ink); font-size: 1.25rem; line-height: 1.1; }
.employee-compensation-overview-summary small { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.72rem; line-height: 1.25; }
.employee-compensation-overview-summary .is-attention { border-color: #f1d391; background: #fffaf0; }
.employee-compensation-overview-table th,
.employee-compensation-overview-table td { vertical-align: top; }
.employee-compensation-overview-table td { font-size: 0.84rem; }
.employee-compensation-overview-table td small { display: block; margin-top: 0.2rem; color: var(--muted); line-height: 1.3; }
.employee-compensation-overview-table tr.has-warning { background: #fffaf0; }
.employee-compensation-overview-line { display: block; line-height: 1.35; white-space: nowrap; }
.employee-compensation-overview-empty { color: var(--muted); }
.employee-compensation-overview-position { margin-top: 0.18rem; color: var(--muted); font-size: 0.78rem; line-height: 1.25; }
.employee-compensation-overview-entry-button { background: #f8fafc; }
@media (max-width: 1120px) { .employee-compensation-overview-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .employee-compensation-overview-table-wrap { overflow-x: auto; } .employee-compensation-overview-table { min-width: 1120px; } }
@media (max-width: 760px) { .employee-compensation-overview-filter { align-items: stretch; flex-direction: column; } .employee-compensation-overview-filter label { min-width: 0; } .employee-compensation-overview-summary { grid-template-columns: 1fr; } }


/* Monthly employee payroll */
.employee-payroll-head .page-subtitle {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.employee-payroll-panel,
.employee-payroll-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem;
  margin-bottom: 0.9rem;
}

.employee-payroll-month-form {
  display: flex;
  align-items: end;
  gap: 0.55rem;
  max-width: none;
  margin: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--background));
}

.employee-payroll-month-form label {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.employee-payroll-month-form input {
  min-height: 2.4rem;
}

.employee-payroll-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.6rem, 1fr));
  gap: 0.6rem;
}

.employee-payroll-summary > div {
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 8px;
  padding: 0.7rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--background));
}

.employee-payroll-summary span,
.employee-payroll-summary small,
.employee-payroll-table small,
.employee-payroll-position {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.employee-payroll-summary strong {
  display: block;
  margin: 0.12rem 0;
  font-size: 1.05rem;
}

.employee-payroll-money {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.employee-payroll-summary .is-attention {
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
  background: color-mix(in srgb, #f59e0b 9%, var(--surface));
}

.employee-payroll-summary .is-total {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.employee-payroll-table-wrap {
  overflow-x: auto;
}

.employee-payroll-table th,
.employee-payroll-table td {
  vertical-align: top;
}

.employee-payroll-table {
  min-width: 1160px;
  table-layout: fixed;
}

.employee-payroll-col--person { width: 13%; }
.employee-payroll-col--model { width: 13%; }
.employee-payroll-col--hours { width: 12%; }
.employee-payroll-col--adjustment { width: 12%; }
.employee-payroll-col--money { width: 9%; }
.employee-payroll-col--payout { width: 16%; }
.employee-payroll-col--cost { width: 11%; }
.employee-payroll-col--details { width: 14%; }

.employee-payroll-table th,
.employee-payroll-table td {
  padding: 0.62rem 0.55rem;
}

[data-theme="dark"] .employee-payroll-table th,
.theme-dark .employee-payroll-table th {
  background: color-mix(in srgb, var(--surface) 86%, var(--background));
  color: var(--ink);
}

.employee-payroll-money-head,
.employee-payroll-money-cell {
  text-align: right;
}

.employee-payroll-uop-head span {
  display: block;
  white-space: nowrap;
}

.employee-payroll-uop-head span + span {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 780;
}

.employee-payroll-money-cell strong {
  white-space: nowrap;
}

.employee-payroll-money-cell small {
  white-space: normal;
  overflow-wrap: anywhere;
}

.employee-payroll-cost-cell {
  overflow: hidden;
}

.employee-payroll-uop-cell {
  vertical-align: middle;
}

.employee-payroll-uop-values {
  display: grid;
  gap: 0.22rem;
  justify-items: end;
}

.employee-payroll-uop-values strong {
  display: block;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.18;
}

.employee-payroll-uop-values strong + strong {
  width: 100%;
  padding-top: 0.24rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, var(--muted));
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
}

.employee-payroll-model-cell strong,
.employee-payroll-model-cell small {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-payroll-table tr.has-warning {
  background: color-mix(in srgb, #f59e0b 7%, var(--surface));
}

.employee-payroll-table tr.is-employee-approved {
  background: color-mix(in srgb, #10b981 8%, var(--surface));
  box-shadow: inset 3px 0 0 color-mix(in srgb, #10b981 78%, var(--accent));
}

.employee-payroll-table tr.is-employee-approved td {
  border-top-color: color-mix(in srgb, #10b981 18%, var(--border));
}

.employee-payroll-approved-note {
  display: grid;
  gap: 0.08rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.34rem;
  padding: 0.24rem 0.4rem;
  border: 1px solid color-mix(in srgb, #10b981 32%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, #10b981 10%, var(--surface));
  color: var(--success, #047857);
}

.employee-payroll-approved-note span,
.employee-payroll-approved-note small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-payroll-approved-note span {
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.employee-payroll-approved-note small {
  color: color-mix(in srgb, var(--success, #047857) 76%, var(--muted));
  font-size: 0.66rem;
  font-weight: 740;
}

.employee-payroll-payout-cell {
  text-align: left;
}

.employee-payroll-payout {
  display: grid;
  gap: 0.22rem;
}

.employee-payroll-payout > div {
  display: grid;
  grid-template-columns: minmax(3.2rem, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.38rem;
}

.employee-payroll-payout span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 760;
}

.employee-payroll-payout strong {
  justify-self: end;
  color: var(--ink);
  font-size: 0.78rem;
}

.employee-payroll-payout__total {
  margin-top: 0.12rem;
  padding-top: 0.24rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 82%, var(--muted));
}

.employee-payroll-payout__total strong {
  color: var(--accent-strong, var(--accent));
  font-size: 0.9rem;
  font-weight: 860;
}

.employee-payroll-topbar {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.employee-payroll-period-status {
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 8px;
  padding: 0.48rem 0.7rem;
  min-width: 9rem;
}

.employee-payroll-period-status span,
.employee-payroll-period-status small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
}

.employee-payroll-period-status strong {
  display: block;
  font-size: 0.95rem;
}

.employee-payroll-period-status.is-approved {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.employee-payroll-status-form {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  max-width: none;
  margin: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--background));
}

.employee-payroll-head .actions .button,
.employee-payroll-month-form .button,
.employee-payroll-status-form .button {
  border-color: color-mix(in srgb, var(--border) 80%, var(--muted));
  background: color-mix(in srgb, var(--surface) 90%, var(--background));
  color: var(--ink);
  box-shadow: none;
}

.employee-payroll-status-form .button.is-active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.employee-payroll-lock-note {
  margin: 0 0 0.75rem;
  color: #9a3412;
  font-size: 0.86rem;
}

.employee-payroll-lock-note.is-info {
  color: var(--muted);
}

.employee-payroll-review {
  display: block;
  margin: 0 0 0.8rem;
  border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 7%, var(--surface));
  overflow: hidden;
}

.employee-payroll-review__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.64rem 0.72rem;
  cursor: pointer;
}

.employee-payroll-review__summary::-webkit-details-marker {
  display: none;
}

.employee-payroll-review__summary::after {
  content: "Rozwiń";
  flex: 0 0 auto;
  min-width: 4.4rem;
  color: var(--accent-strong, var(--accent));
  font-size: 0.74rem;
  font-weight: 800;
  text-align: right;
}

.employee-payroll-review[open] .employee-payroll-review__summary::after {
  content: "Zwiń";
}

.employee-payroll-review__summary span,
.employee-payroll-review__summary small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
}

.employee-payroll-review__summary strong {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.98rem;
}

.employee-payroll-review__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0 0.72rem 0.72rem;
  list-style: none;
}

.employee-payroll-review__list li {
  padding: 0.55rem 0.62rem;
  border: 1px solid var(--border-subtle, var(--border));
  border-left-width: 4px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--background));
}

.employee-payroll-review__list li.is-danger { border-left-color: #dc2626; }
.employee-payroll-review__list li.is-warning { border-left-color: #f59e0b; }
.employee-payroll-review__list li.is-info { border-left-color: var(--accent); }

.employee-payroll-review__list strong,
.employee-payroll-review__list span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.3;
}

.employee-payroll-review__list span {
  margin-top: 0.12rem;
  color: var(--muted);
}

.employee-payroll-used-config {
  color: var(--ink) !important;
  font-weight: 750;
}

.employee-payroll-late-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 0.12rem;
  padding: 0.08rem 0.36rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.25;
}

.employee-payroll-late-status.is-ok {
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: color-mix(in srgb, var(--success, #047857) 72%, var(--muted));
  font-size: 0.66rem;
  font-weight: 760;
}

.employee-payroll-late-status.is-warning {
  border-color: var(--warn-border, color-mix(in srgb, #f59e0b 34%, var(--border)));
  background: var(--warn-bg, color-mix(in srgb, #f59e0b 10%, var(--surface)));
  color: var(--warn, #92400e);
}

.employee-payroll-details-cell {
  min-width: 0;
}

.employee-payroll-control-stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.employee-payroll-basis-open {
  display: inline-grid;
  grid-template-columns: 0.95rem minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem;
  width: auto;
  min-width: 6.1rem;
  min-height: 1.62rem;
  padding: 0.16rem 0.34rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  appearance: none;
}

.employee-payroll-basis-open:hover,
.employee-payroll-basis-open:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  outline: none;
}

.employee-payroll-basis-open__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 999px;
  color: var(--accent-strong, var(--accent));
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.employee-payroll-basis-open__text {
  display: grid;
  gap: 0.06rem;
  min-width: 0;
}

.employee-payroll-basis-open__text strong,
.employee-payroll-basis-open__text small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-payroll-basis-open__text strong {
  color: var(--accent-strong, var(--accent));
  font-size: 0.68rem;
  font-weight: 850;
}

.employee-payroll-basis-open__text small {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 760;
}

.employee-payroll-basis-source[hidden] {
  display: none !important;
}

.employee-payroll-approval-form {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.18rem;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.employee-payroll-approval-form small {
  flex: 1 0 100%;
  max-width: 8rem;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-payroll-approval-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: auto;
  min-height: 1.62rem;
  padding: 0.16rem 0.42rem;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong, var(--accent));
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  appearance: none;
}

.employee-payroll-approval-button:hover,
.employee-payroll-approval-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  outline: none;
}

.employee-payroll-approval-button.is-approved {
  border-color: color-mix(in srgb, #10b981 42%, var(--border));
  background: color-mix(in srgb, #10b981 10%, var(--surface));
  color: var(--success, #047857);
}

.employee-payroll-approval-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.employee-payroll-approval-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 13%, transparent);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}


.employee-payroll-adjustment-summary {
  display: grid;
  gap: 0.45rem;
  min-width: 12rem;
}

.employee-payroll-adjustment-lines {
  display: grid;
  gap: 0.28rem;
}

.employee-payroll-adjustment-lines span {
  display: block;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.28;
}

.employee-payroll-adjustment-lines strong {
  font-weight: 800;
}

.employee-payroll-adjustment-lines small,
.employee-payroll-adjustment-locked {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
}

.employee-payroll-adjustment-empty {
  color: var(--muted) !important;
}

.employee-payroll-adjustment-open {
  justify-self: start;
}

.employee-payroll-table .table-action-button {
  min-height: 1.72rem;
  padding: 0.14rem 0.48rem;
  border-color: color-mix(in srgb, var(--border) 72%, var(--muted));
  background: color-mix(in srgb, var(--surface) 86%, var(--background));
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
}

.employee-payroll-table .table-action-button:hover,
.employee-payroll-table .table-action-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent-strong, var(--accent));
}


.employee-payroll-slip-pdf {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.employee-payroll-slip-pdf:hover,
.employee-payroll-slip-pdf:focus-visible {
  border-color: var(--accent-strong, var(--accent));
  background: var(--accent-strong, var(--accent));
  color: #fff;
}

.employee-payroll-adjustment-dialog {
  max-width: 620px;
}

.employee-payroll-adjustment-eyebrow {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.employee-payroll-adjustment-modal [data-payroll-adjustment-employee] {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.employee-payroll-adjustment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.employee-payroll-adjustment-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted, #f8fafc);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.employee-payroll-adjustment-form .field-full {
  grid-column: 1 / -1;
}

.employee-payroll-adjustment-form label {
  display: grid;
  gap: 0.22rem;
}

.employee-payroll-adjustment-form label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.employee-payroll-adjustment-form input {
  min-height: 2.35rem;
}

.employee-payroll-adjustment-actions {
  grid-column: 1 / -1;
}

.employee-payroll-slip-open {
  display: inline-flex;
  margin-top: 0;
}

.employee-payroll-control-stack .employee-payroll-slip-open {
  min-height: 1.62rem;
  padding: 0.14rem 0.42rem;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--accent-strong, var(--accent));
}

.employee-payroll-slip-dialog {
  max-width: min(1120px, calc(100vw - 2rem));
}

.employee-payroll-slip-card {
  display: grid;
  gap: 1rem;
}

.employee-payroll-slip-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.employee-payroll-slip-card__head span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.employee-payroll-slip-card__head strong {
  display: block;
  margin-top: 0.12rem;
  font-size: 1rem;
}

.employee-payroll-slip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
}

.employee-payroll-slip-grid > div {
  padding: 0.7rem;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--background));
}

.employee-payroll-slip-grid dt {
  margin: 0 0 0.18rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.employee-payroll-slip-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 750;
}

.employee-payroll-slip-grid__total {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface)) !important;
}

.employee-payroll-slip-grid__total dd {
  color: var(--accent-strong, var(--accent));
  font-size: 1.1rem;
}

.employee-payroll-slip-preview {
  overflow: hidden;
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 8px;
  background: #f8fafc;
}

.employee-payroll-slip-preview iframe {
  display: block;
  width: 100%;
  min-height: min(78vh, 860px);
  border: 0;
  background: #fff;
}

.employee-payroll-basis-dialog {
  width: min(980px, calc(100vw - 2rem));
  max-width: none;
}

.employee-payroll-basis-modal [data-payroll-basis-employee] {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.employee-payroll-basis-card {
  display: grid;
  gap: 0.85rem;
}

.employee-payroll-basis-card__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.employee-payroll-basis-card__meta div,
.employee-payroll-basis-card__content section {
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, var(--background));
}

.employee-payroll-basis-card__meta div {
  padding: 0.62rem 0.7rem;
}

.employee-payroll-basis-card__meta span,
.employee-payroll-basis-card__content h3 {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.employee-payroll-basis-card__meta strong {
  display: block;
  margin-top: 0.14rem;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 820;
}

.employee-payroll-basis-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.employee-payroll-basis-preview {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong, var(--accent));
}

.employee-payroll-basis-card__content {
  display: grid;
  gap: 0.75rem;
}

.employee-payroll-basis-card__content section {
  padding: 0.78rem 0.85rem;
}

.employee-payroll-basis-card__content h3 {
  margin: 0 0 0.5rem;
}

.employee-payroll-basis-list,
.employee-payroll-warning-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.employee-payroll-basis-list li,
.employee-payroll-warning-list li {
  padding: 0.5rem 0.58rem;
  border: 1px solid var(--border-subtle, var(--border));
  border-left: 3px solid color-mix(in srgb, var(--accent) 54%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 90%, var(--background));
  color: var(--ink);
  font-size: 0.86rem;
  line-height: 1.42;
  overflow-wrap: break-word;
}

.employee-payroll-warning-list li {
  border-left-color: #f59e0b;
  color: #9a3412;
}

.employee-payroll-late-list.is-ok li {
  border-left-color: var(--success, #10b981);
  background: var(--success-bg, color-mix(in srgb, #10b981 8%, var(--surface)));
  color: var(--success, #047857);
}

.employee-payroll-late-list.is-warning li {
  border-left-color: var(--warn, #f59e0b);
  background: var(--warn-bg, color-mix(in srgb, #f59e0b 9%, var(--surface)));
  color: var(--warn, #92400e);
}

.employee-payroll-official-list li {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.employee-payroll-total strong {
  color: var(--accent-strong, var(--accent));
}


.employee-payroll-entry-button {
  background: color-mix(in srgb, var(--surface) 82%, var(--accent));
}

@media (max-width: 1100px) {
  .employee-payroll-adjustment-form { grid-template-columns: 1fr; }
  .employee-payroll-summary,
  .employee-payroll-review__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .employee-payroll-review__summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .employee-payroll-review__summary::after {
    min-width: 0;
    text-align: left;
  }

  .employee-payroll-review__list {
    grid-template-columns: 1fr;
  }
}


.app-modal--equipment .app-modal__dialog { width: min(900px, calc(100vw - 24px)); }
.app-modal--equipment .app-modal__body { padding: 14px; }
.durable-equipment-wizard { display: grid; gap: 12px; }
.durable-equipment-wizard .form-section { margin: 0; }
.equipment-wizard-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 3px; border: 1px solid #dfe6ee; border-radius: 8px; background: #f8fafc; list-style: none; }
.equipment-wizard-steps li { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 8px; border-radius: 6px; color: #64748b; font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; }
.equipment-wizard-steps span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: #e2e8f0; color: #64748b; font-size: 11px; font-weight: 850; }
.equipment-wizard-steps li.is-active { background: #fff; color: var(--accent); box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
.equipment-wizard-steps li.is-active span, .equipment-wizard-steps li.is-complete span { background: var(--accent); color: #fff; }
.equipment-wizard-panel[hidden] { display: none; }
.durable-equipment-basic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.durable-equipment-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.durable-equipment-active-toggle-field { align-self: end; min-height: 42px; }
.durable-equipment-active-toggle-field .toggle-field__label { display: inline-flex; align-items: center; gap: 6px; }
.durable-equipment-active-toggle-field .field-help { flex: 0 0 auto; }
.durable-equipment-wizard [data-field-shell] { transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.durable-equipment-wizard [data-field-shell].is-complete input:not([type="hidden"]):not([type="file"]),
.durable-equipment-wizard [data-field-shell].is-complete select,
.durable-equipment-wizard [data-field-shell].is-complete textarea { border-color: #a9d9cd; background: #f5fbf9; box-shadow: 0 0 0 2px rgba(31, 118, 104, .06); }
.durable-equipment-wizard [data-field-shell].is-invalid-client input:not([type="hidden"]):not([type="file"]),
.durable-equipment-wizard [data-field-shell].is-invalid-client select,
.durable-equipment-wizard [data-field-shell].is-invalid-client textarea { border-color: #e4a8a2; background: #fff7f6; }
.durable-equipment-client-error { display: block; margin-top: 5px; color: #b42318; font-size: 12px; font-weight: 700; line-height: 1.25; }
.durable-equipment-details { border: 1px solid #e2e8f0; border-radius: 8px; background: #fbfcfd; }
.durable-equipment-details summary { min-height: 38px; padding: 0 11px; color: #334155; cursor: pointer; font-size: 13px; font-weight: 800; line-height: 38px; list-style: none; }
.durable-equipment-details summary::-webkit-details-marker { display: none; }
.durable-equipment-details summary::after { content: "⌄"; float: right; color: #64748b; }
.durable-equipment-details[open] summary { border-bottom: 1px solid #e2e8f0; }
.durable-equipment-details[open] summary::after { transform: rotate(180deg); }
.durable-equipment-details p { margin: 10px; }
.durable-equipment-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.durable-equipment-summary div { min-width: 0; padding: 9px 10px; border: 1px solid #dfe6ee; border-radius: 8px; background: #fbfcfd; }
.durable-equipment-summary span { display: block; margin-bottom: 3px; color: #64748b; font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.durable-equipment-summary strong { display: block; overflow: hidden; color: #17232b; font-size: 13px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.durable-equipment-wizard-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.durable-equipment-wizard-actions [data-wizard-prev] { margin-right: auto; }
.durable-equipment-wizard-actions button[type="submit"] { min-width: 128px; }
@media (max-width: 900px) { .durable-equipment-basic-grid, .durable-equipment-extra-grid, .durable-equipment-summary { grid-template-columns: 1fr; } .equipment-wizard-steps li { font-size: 11px; } }
.installation-section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.installation-section-title-row h2 { margin: 0 0 4px; }
.installation-readiness-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.installation-readiness-card--optional { border-color: #dbe3ed; background: #f8fafc; color: #475569; }
.installation-readiness-card--optional:hover { border-color: #cbd5e1; background: #f1f5f9; }
.installation-detail-page-head { align-items: flex-start; }
.installation-detail-title { display: grid; gap: 7px; min-width: 0; }
.installation-detail-title .page-title { font-size: 22px; line-height: 1.15; }
.installation-detail-project-pill { display: inline-flex; width: fit-content; max-width: min(640px, 100%); align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid #cce4de; border-radius: 999px; background: #f2fbf8; color: #0f766e; font-size: 13px; font-weight: 820; line-height: 1.15; text-decoration: none; }
.installation-detail-project-pill:hover { border-color: #98d2c5; background: #e6f7f2; color: #0f5f58; }
.installation-print-button { min-height: 38px; padding: 0 16px; border-color: #0f766e; background: #0f766e; color: #fff; font-weight: 900; box-shadow: 0 8px 18px rgba(15, 118, 110, .18); }
.installation-print-button:hover { border-color: #0b5f58; background: #0b5f58; color: #fff; }
.installation-detail-card { margin: 10px 0; padding: 12px; border: 1px solid #dbe3ed; border-radius: 8px; background: #fff; box-shadow: 0 5px 18px rgba(15, 23, 42, .035); }
.installation-summary-card { display: grid; gap: 12px; }
.installation-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.installation-summary-head h2 { margin: 2px 0 0; font-size: 16px; line-height: 1.16; }
.installation-summary-status { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: 360px; }
.installation-detail-grid { margin-bottom: 0; }
.installation-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.installation-summary-grid .detail-item { padding: 10px 11px; }
.installation-summary-grid .detail-item span { font-size: 10px; }
.installation-summary-grid .detail-item strong { font-size: 14px; line-height: 1.2; }
.installation-crew-brief-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.installation-crew-brief-grid .field-full { grid-column: 1 / -1; }
.installation-brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.installation-note-card--wide { grid-column: 1 / -1; }
.installation-detail-section-head { margin-bottom: 10px; }
.installation-attention-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.installation-checklist-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.installation-checklist-toggle { margin: 0 0 10px; }
.installation-checklist-toggle summary { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid #d7e1ec; border-radius: 7px; background: #fff; color: #334155; font-size: 13px; font-weight: 750; cursor: pointer; }
.installation-checklist-toggle summary:hover { border-color: #b7dfd6; background: #f5fbf8; color: #126b5f; }
.installation-checklist-toggle__show-attention { display: none; }
.installation-checklist-toggle[open] .installation-checklist-toggle__show-all { display: none; }
.installation-checklist-toggle[open] .installation-checklist-toggle__show-attention { display: inline; }
.installation-checklist-toggle[open] + .installation-attention-list { display: none; }
.installation-checklist-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; border: 1px solid #dbe3ed; border-radius: 8px; background: #fbfdff; }
.installation-checklist-item--ok { border-color: #b7dfd6; background: #f3fbf8; }
.installation-checklist-item--warn { border-color: #f0d49b; background: #fffaf0; }
.installation-checklist-item--urgent { border-color: #fecaca; background: #fff5f5; }
.installation-checklist-item strong { display: block; color: #17232b; font-size: 13px; line-height: 1.2; }
.installation-checklist-item span { display: block; margin-top: 2px; color: #64748b; font-size: 12px; line-height: 1.3; }
.installation-full-checklist { margin-top: 12px; }
.installation-full-checklist summary, .installation-notes-details summary { cursor: pointer; width: fit-content; color: #475569; font-size: 13px; font-weight: 800; }
.installation-full-checklist summary:hover, .installation-notes-details summary:hover { color: #0f766e; }
.installation-notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.installation-notes-grid--focused { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.installation-note-card { min-width: 0; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fbfdff; }
.installation-note-card--risk { border-color: #f0d49b; background: #fffaf0; }
.installation-note-card--muted { margin-top: 9px; background: #f8fafc; }
.installation-note-card span, .installation-notes-grid span { display: block; margin-bottom: 5px; color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.installation-note-card p, .installation-notes-grid p { margin: 0; color: #17232b; font-size: 13px; line-height: 1.45; }
.installation-print-missing { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border: 1px solid #fecaca; border-radius: 999px; background: #fee2e2; color: #991b1b; font-size: 12px; font-weight: 850; line-height: 1.1; letter-spacing: 0; text-transform: none; }
.installation-note-card .installation-print-missing, .installation-summary-grid .installation-print-missing { display: inline-flex; margin: 0; color: #991b1b; font-size: 12px; letter-spacing: 0; text-transform: none; }
.installation-print-only { display: none; }
.installation-control-settings { overflow: hidden; }
.installation-control-settings--installations { margin-top: 12px; }
.installation-control-settings .muted { margin: 10px 14px 12px; }
.installation-control-legend-name { display: inline-flex; align-items: center; gap: 8px; }
.installation-control-legend-table td { vertical-align: middle; }
.installation-project-link { color: #17232b; text-decoration: none; }
.installation-project-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { .installation-readiness-grid--wide, .installation-checklist-list, .installation-attention-list, .installation-notes-grid, .installation-notes-grid--focused, .installation-summary-grid, .installation-brief-grid, .installation-crew-brief-grid, .installation-vehicle-driver-row, .installation-vehicle-assignment { grid-template-columns: 1fr; } .installation-section-title-row, .installation-summary-head, .installation-detail-page-head { flex-direction: column; } .installation-summary-status { justify-content: flex-start; max-width: none; } }

@media print {
  body:not(.is-steel-production-printing) { background: #fff !important; color: #111827; font-size: 10pt; }
  body:not(.is-steel-production-printing) .app-header,
  body:not(.is-steel-production-printing) .breadcrumbs,
  body:not(.is-steel-production-printing) .messages,
  body:not(.is-steel-production-printing) .installation-detail-page-head .actions,
  body:not(.is-steel-production-printing) .installation-summary-status,
  body:not(.is-steel-production-printing) .installation-attention-card,
  body:not(.is-steel-production-printing) .installation-checklist-toggle,
  body:not(.is-steel-production-printing) .installation-notes-details summary,
  body:not(.is-steel-production-printing) .debug-permissions-panel,
  body:not(.is-steel-production-printing) .access-debug-panel { display: none !important; }
  @page { size: A4 portrait; margin: 8mm; }
  body:not(.is-steel-production-printing) .content,
  body:not(.is-steel-production-printing) .page-container { box-sizing: border-box; max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  body:not(.is-steel-production-printing) .installation-print-only { display: block !important; }
  body:not(.is-steel-production-printing) .installation-detail-page-head { display: block; margin: 0 0 5mm; padding: 0; }
  body:not(.is-steel-production-printing) .installation-detail-title { gap: 2mm; }
  body:not(.is-steel-production-printing) .installation-detail-title .page-title { margin: 0; font-size: 16pt; line-height: 1.12; }
  body:not(.is-steel-production-printing) .installation-detail-project-pill { min-height: 0; padding: 1mm 3mm; border-color: #cbd5e1; background: #fff; color: #0f172a; font-size: 9pt; }
  body:not(.is-steel-production-printing) .installation-detail-card { break-inside: avoid; box-shadow: none; border-color: #cbd5e1; margin: 0 0 3mm; padding: 3mm; border-radius: 2mm; }
  body:not(.is-steel-production-printing) .installation-summary-head,
  body:not(.is-steel-production-printing) .installation-detail-section-head { margin-bottom: 3mm; }
  body:not(.is-steel-production-printing) .installation-summary-head h2,
  body:not(.is-steel-production-printing) .installation-detail-section-head h2 { margin: 0; font-size: 12pt; line-height: 1.1; }
  body:not(.is-steel-production-printing) .material-eyebrow { font-size: 7pt; letter-spacing: .05em; }
  body:not(.is-steel-production-printing) .installation-summary-grid,
  body:not(.is-steel-production-printing) .installation-brief-grid,
  body:not(.is-steel-production-printing) .installation-notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5mm; }
  body:not(.is-steel-production-printing) .detail-item,
  body:not(.is-steel-production-printing) .installation-note-card { padding: 3mm; border-color: #d7dee8; border-radius: 2mm; background: #fff !important; }
  body:not(.is-steel-production-printing) .detail-item span,
  body:not(.is-steel-production-printing) .installation-note-card span { margin-bottom: 1mm; font-size: 7pt; }
  body:not(.is-steel-production-printing) .detail-item strong { font-size: 10pt; line-height: 1.2; }
  body:not(.is-steel-production-printing) .installation-note-card p { font-size: 8.8pt; line-height: 1.25; }
  body:not(.is-steel-production-printing) .installation-print-missing { min-height: 0; padding: .6mm 2mm; border-color: #fca5a5 !important; background: #fee2e2 !important; color: #991b1b !important; font-size: 8pt; }
  body:not(.is-steel-production-printing) .installation-control::after,
  body:not(.is-steel-production-printing) .installation-control::before { display: none !important; }
}

/* Management finance */
.app-menu-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.app-user-menu .dropdown a span,
.app-user-menu .dropdown button span {
  min-width: 0;
}
.management-finance-page {
  display: grid;
  gap: 14px;
}
.management-finance-page--overview {
  gap: 10px;
}
.management-finance-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  flex-wrap: wrap;
}
.management-finance-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.finance-quiet-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
}
.finance-quiet-link:hover,
.finance-quiet-link:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.management-finance-month-form {
  display: flex;
  align-items: end;
  gap: 8px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.management-finance-month-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.management-finance-month-form input,
.management-finance-month-form select {
  min-height: 34px;
  min-width: 160px;
}
.finance-chart-panel,
.finance-month-snapshot,
.finance-detail-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.finance-chart-panel--primary {
  padding: 12px 14px 14px;
}
.finance-month-snapshot {
  display: grid;
  gap: 10px;
  padding: 13px 14px;
}
.finance-month-snapshot .finance-section-head > strong {
  font-size: 14px;
}
.finance-month-snapshot__bars {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.finance-month-snapshot__bars .finance-month-chart__bar {
  grid-template-columns: 88px minmax(0, 1fr) minmax(124px, auto);
}
.finance-month-snapshot__cash {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.finance-month-snapshot__cash > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}
.finance-month-snapshot__cash strong {
  color: var(--heading);
  font-size: 12px;
  white-space: nowrap;
}
.finance-month-snapshot__cash em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.finance-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}
.finance-section-head h1,
.finance-section-head h2 {
  margin: 2px 0 0;
  color: var(--heading);
  font-size: 18px;
  line-height: 1.2;
}
.finance-section-subtitle {
  max-width: 640px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.finance-section-head--compact {
  align-items: center;
  margin-bottom: 9px;
}
.finance-section-head--compact h1,
.finance-section-head--compact h2 {
  font-size: 17px;
}
.finance-section-head > strong {
  color: var(--heading);
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}
.finance-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.finance-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}
.finance-chart-legend__item::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--success);
}
.finance-chart-legend__item--costs::before {
  background: var(--bad);
}
.finance-chart-legend__item--result::before {
  background: var(--accent);
}
.finance-donut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.finance-donut-panel {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.finance-donut-panel__body {
  display: grid;
  grid-template-columns: minmax(118px, 142px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.finance-donut {
  --donut-muted-slice: color-mix(in srgb, var(--surface-muted) 74%, transparent);
  position: relative;
  width: min(142px, 100%);
  aspect-ratio: 1;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--pie-chart, conic-gradient(var(--surface-muted) 0% 100%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--heading) 10%, transparent);
  transition: background .14s ease, box-shadow .14s ease;
}
.finance-donut.is-highlighted {
  background: var(--pie-highlight, var(--pie-chart, conic-gradient(var(--surface-muted) 0% 100%)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--heading) 14%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.finance-donut::after {
  content: "";
  position: absolute;
  inset: 25%;
  border: 1px solid var(--border-subtle);
  border-radius: inherit;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.finance-donut__center {
  position: absolute;
  inset: 31%;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  color: var(--heading);
  text-align: center;
  line-height: 1.05;
}
.finance-donut__center em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.finance-donut__center strong {
  max-width: 76px;
  color: var(--heading);
  font-size: 11px;
  font-weight: 850;
  overflow-wrap: anywhere;
}
.finance-donut-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}
.finance-donut-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
}
.finance-donut-row:hover,
.finance-donut-row:focus-visible,
.finance-donut-row.is-active-slice {
  z-index: 12;
  border-color: color-mix(in srgb, var(--slice-color) 62%, var(--accent-border));
  background: var(--surface-hover);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--slice-color) 18%, transparent);
}
.finance-donut-panel.is-slice-highlighted .finance-donut-row:not(.is-active-slice) {
  opacity: .48;
}
.finance-donut-panel.is-slice-highlighted .finance-donut-row {
  transition: opacity .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.finance-donut-row__label {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 7px;
  min-width: 0;
  color: var(--heading);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
}
.finance-donut-row__label i {
  grid-row: 1 / span 2;
  width: 9px;
  height: 9px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--slice-color);
}
.finance-donut-row__label em {
  grid-column: 2;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}
.finance-donut-row__share {
  min-width: 50px;
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}
.finance-donut-row > strong {
  min-width: 92px;
  color: var(--heading);
  font-size: 12px;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}
.finance-donut-row__amount-caption {
  display: block;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.05;
  text-transform: uppercase;
}
.finance-donut-row__breakdown {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 1px;
}
.finance-donut-row__breakdown span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--border-subtle);
  border-radius: 7px;
  background: var(--surface);
}
.finance-donut-row__breakdown em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.finance-donut-row__breakdown strong {
  color: var(--heading);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.finance-donut-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 12px;
  font-weight: 700;
}
.finance-donut-popover {
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(100% + 6px);
  z-index: 30;
  display: grid;
  gap: 7px;
  max-height: 250px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--dropdown-bg);
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease;
}
.finance-donut-row:hover .finance-donut-popover,
.finance-donut-row:focus-visible .finance-donut-popover,
.finance-donut-cash-note:hover .finance-donut-popover,
.finance-donut-cash-note:focus-visible .finance-donut-popover {
  opacity: 1;
  transform: translateY(0);
}
.finance-donut-popover__title {
  color: var(--heading);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
}
.finance-donut-popover__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
}
.finance-donut-popover__row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.finance-donut-popover__row strong {
  color: var(--heading);
  font-size: 12px;
  font-weight: 800;
}
.finance-donut-popover__row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
}
.finance-donut-popover__row b {
  color: var(--heading);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.finance-donut-cash-note {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 8px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
}
.finance-donut-cash-note:hover,
.finance-donut-cash-note:focus-visible {
  z-index: 12;
  border-color: var(--accent-border);
  background: var(--surface-hover);
  outline: none;
}
.finance-donut-cash-note span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.finance-donut-cash-note strong {
  color: var(--heading);
  white-space: nowrap;
}
.finance-donut-cash-note em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.finance-donut-grid--overview {
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  align-items: start;
}
.finance-donut-panel--overview {
  align-self: start;
  padding: 12px 14px;
}
.finance-donut-panel--overview .finance-donut-panel__body {
  grid-template-columns: minmax(138px, 158px) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.finance-donut-panel--overview .finance-donut {
  justify-self: center;
  width: min(154px, 100%);
}
.finance-donut-panel--overview .finance-donut__center {
  inset: 32%;
}
.finance-donut-panel--overview .finance-donut__center strong {
  max-width: 88px;
  font-size: 12px;
}
.finance-donut-panel--overview .finance-section-head > strong {
  font-size: 14px;
}
.finance-donut-panel--overview .finance-donut-list {
  gap: 2px;
  align-content: center;
}
.finance-donut-panel--overview .finance-donut-row {
  grid-template-columns: minmax(0, 1fr) minmax(86px, auto);
  gap: 1px 8px;
  padding: 6px 7px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
}
.finance-donut-panel--overview .finance-donut-row:hover,
.finance-donut-panel--overview .finance-donut-row:focus-visible,
.finance-donut-panel--overview .finance-donut-row.is-active-slice {
  background: var(--surface-soft);
}
.finance-donut-panel--overview .finance-donut-row__label {
  grid-column: 1;
  min-width: 0;
  gap: 1px 7px;
  font-size: 11px;
  line-height: 1.15;
}
.finance-donut-panel--overview .finance-donut-row__name {
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.finance-donut-panel--overview .finance-donut-row__label em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-donut-panel--overview .finance-donut-row__share {
  grid-column: 1;
  min-width: 0;
  font-size: 10px;
  text-align: left;
}
.finance-donut-panel--overview .finance-donut-row > strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 86px;
  font-size: 11px;
}
.finance-donut-grid--cost-detail {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.finance-donut-panel--cost-detail {
  padding: 12px;
}
.finance-donut-panel--cost-detail .finance-donut-panel__body {
  grid-template-columns: 1fr;
  gap: 11px;
}
.finance-donut-panel--cost-detail .finance-donut {
  justify-self: center;
  width: min(120px, 100%);
}
.finance-donut-panel--cost-detail .finance-section-head > strong {
  font-size: 14px;
}
.finance-overview-result-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-muted) 54%, var(--surface));
}
.finance-overview-result-strip > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}
.finance-overview-result-strip strong {
  color: var(--heading);
  white-space: nowrap;
}
.finance-overview-result-strip em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
}
.finance-summary-card {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.finance-summary-grid--compact .finance-summary-card {
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface-muted) 50%, var(--surface));
  box-shadow: none;
}
.finance-summary-card span,
.finance-section-note,
.finance-note,
.finance-overview-note {
  color: var(--muted);
}
.finance-summary-card span {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .035em;
}
.finance-summary-card strong {
  display: block;
  color: var(--heading);
  font-size: 18px;
  line-height: 1.1;
  white-space: nowrap;
}
.finance-summary-grid--compact .finance-summary-card strong {
  font-size: 16px;
}
.finance-summary-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}
.finance-summary-card--sales,
.finance-summary-card.is-positive {
  border-color: var(--success-border);
  background: color-mix(in srgb, var(--success-bg) 42%, var(--surface));
}
.finance-summary-grid--compact .finance-summary-card--sales {
  background: color-mix(in srgb, var(--success-bg) 26%, var(--surface));
}
.finance-summary-card.is-negative {
  border-color: var(--warn-border);
  background: color-mix(in srgb, var(--warn-bg) 58%, var(--surface));
}
.finance-month-chart {
  display: grid;
  gap: 7px;
}
.finance-month-chart__row {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-soft);
  color: inherit;
  text-decoration: none;
}
.finance-month-chart__row:hover {
  border-color: var(--accent-border);
  background: var(--surface-hover);
  text-decoration: none;
}
.finance-month-chart__label {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.finance-month-chart__label strong {
  color: var(--heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
}
.finance-month-chart__label em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
}
.finance-month-chart__bars {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.finance-month-chart__bar {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) minmax(112px, auto);
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.finance-month-chart__bar--profit .finance-month-chart__bar-name {
  color: var(--success);
}
.finance-month-chart__bar--loss .finance-month-chart__bar-name {
  color: var(--bad);
}
.finance-month-chart__bar-name {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.finance-month-chart__value {
  color: var(--heading);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}
.finance-month-chart__track {
  position: relative;
  display: block;
  height: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-subtle) 72%, var(--heading));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-muted) 82%, var(--heading));
}
.finance-month-chart__track::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  right: 0;
  width: 2px;
  background: var(--warn);
  opacity: .7;
}
.finance-month-chart__track--result {
  border-color: color-mix(in srgb, #facc15 46%, var(--border-subtle));
  background: color-mix(in srgb, var(--surface-muted) 74%, #fef3c7);
}
.finance-month-chart__track--result::after {
  display: none;
}
.finance-month-chart__fill {
  display: block;
  width: var(--bar-size, 0%);
  height: 100%;
  border-radius: inherit;
}
.finance-month-chart__fill--sales {
  background: var(--success);
}
.finance-month-chart__fill--profit {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 244, 190, .62);
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .48) 0 6%, transparent 16%),
    linear-gradient(112deg, #b7791f 0%, #f59e0b 22%, #fde68a 48%, #facc15 68%, #92400e 100%);
  background-size: 145% 155%, 210% 100%;
  box-shadow:
    inset 0 0 5px rgba(255, 248, 205, .48),
    0 0 0 1px rgba(251, 191, 36, .18),
    0 0 8px color-mix(in srgb, #facc15 28%, transparent);
  animation: finance-profit-diamond 9s ease-in-out infinite;
}
.finance-month-chart__fill--profit::after {
  content: "";
  position: absolute;
  top: -190%;
  bottom: -190%;
  left: -66%;
  width: 32%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  animation: finance-profit-sheen 7s ease-in-out infinite;
}
.finance-month-chart__fill--loss {
  background: var(--bad);
}
@keyframes finance-profit-diamond {
  0%, 100% { background-position: 0% 50%, 0% 50%; filter: saturate(1) brightness(1); }
  50% { background-position: 100% 50%, 100% 50%; filter: saturate(1.04) brightness(1.025); }
}
@keyframes finance-profit-sheen {
  0%, 34% { left: -66%; opacity: 0; }
  50% { opacity: .34; }
  76%, 100% { left: 118%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .finance-month-chart__fill--profit,
  .finance-month-chart__fill--profit::after {
    animation: none;
  }
}
.finance-cost-stack {
  display: flex;
  overflow: hidden;
  background: transparent;
}
.finance-cost-stack__segment {
  display: block;
  flex: 0 0 var(--segment-size, 0%);
  min-width: 0;
  height: 100%;
}
.finance-cost-stack__segment--invoices {
  background: var(--bad);
}
.finance-cost-stack__segment--employees {
  background: var(--warn);
}
.finance-cost-stack__segment--fixed-costs {
  background: color-mix(in srgb, var(--bad) 62%, var(--info));
}
.finance-cost-stack__segment--employee-cash {
  background: var(--info);
}
.finance-month-chart__row:hover .finance-month-chart__track,
.finance-month-chart__row:focus-visible .finance-month-chart__track {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-border) 22%, transparent);
}
.finance-month-chart__row:hover .finance-month-chart__fill--sales,
.finance-month-chart__row:focus-visible .finance-month-chart__fill--sales {
  background: var(--accent-strong);
}
.finance-month-chart__row:hover .finance-month-chart__fill--profit,
.finance-month-chart__row:focus-visible .finance-month-chart__fill--profit {
  box-shadow:
    inset 0 0 6px rgba(255, 248, 205, .58),
    0 0 0 1px rgba(251, 191, 36, .28),
    0 0 11px color-mix(in srgb, #facc15 36%, transparent);
}
.finance-month-chart__row:hover .finance-month-chart__fill--loss,
.finance-month-chart__row:focus-visible .finance-month-chart__fill--loss {
  background: color-mix(in srgb, var(--bad) 82%, var(--warn));
}
.finance-month-chart__row:hover .finance-cost-stack__segment--invoices,
.finance-month-chart__row:focus-visible .finance-cost-stack__segment--invoices {
  background: color-mix(in srgb, var(--bad) 82%, var(--warn));
}
.finance-month-chart__row:hover .finance-cost-stack__segment--employees,
.finance-month-chart__row:focus-visible .finance-cost-stack__segment--employees {
  background: color-mix(in srgb, var(--warn) 82%, var(--bad));
}
.finance-month-chart__row:hover .finance-cost-stack__segment--fixed-costs,
.finance-month-chart__row:focus-visible .finance-cost-stack__segment--fixed-costs {
  background: color-mix(in srgb, var(--bad) 72%, var(--info));
}
.finance-month-chart__row:hover .finance-cost-stack__segment--employee-cash,
.finance-month-chart__row:focus-visible .finance-cost-stack__segment--employee-cash {
  background: color-mix(in srgb, var(--info) 82%, var(--accent));
}
.finance-cost-breakdown {
  position: absolute;
  right: 12px;
  top: calc(100% - 4px);
  z-index: 20;
  display: grid;
  gap: 7px;
  width: min(340px, calc(100% - 24px));
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--dropdown-bg);
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .14s ease, transform .14s ease;
}
.finance-month-chart__row:hover .finance-cost-breakdown,
.finance-month-chart__row:focus-visible .finance-cost-breakdown {
  opacity: 1;
  transform: translateY(0);
}
.finance-cost-breakdown__title {
  color: var(--heading);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.15;
}
.finance-cost-breakdown__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.2;
}
.finance-cost-breakdown__row strong {
  color: var(--heading);
  font-size: 12px;
  white-space: nowrap;
}
.finance-cost-breakdown__row--muted {
  padding-top: 5px;
  border-top: 1px solid var(--border-subtle);
  color: var(--muted);
}
.finance-cost-breakdown__row--muted strong,
.finance-cost-breakdown__label em {
  color: var(--muted);
}
.finance-cost-breakdown__label {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}
.finance-cost-breakdown__label em {
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}
.finance-cost-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.finance-cost-dot--invoices {
  background: var(--bad);
}
.finance-cost-dot--employees {
  background: var(--warn);
}
.finance-cost-dot--fixed-costs {
  background: color-mix(in srgb, var(--bad) 62%, var(--info));
}
.finance-cost-dot--employee-cash {
  background: var(--info);
}
.finance-cost-dot--result {
  background: var(--accent);
}
.finance-cost-dot--materials {
  background: var(--info);
}
.finance-overview-note,
.finance-note,
.finance-section-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn-bg) 58%, var(--surface));
  font-size: 13px;
  line-height: 1.35;
}
.finance-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--table-bg);
}
.finance-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 13px;
}
.finance-table th,
.finance-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.finance-table th {
  background: var(--table-head-bg);
  color: var(--muted-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.finance-table td {
  background: var(--table-bg);
  color: var(--ink);
}
.finance-table tfoot td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: var(--table-head-bg);
  color: var(--heading);
  font-weight: 850;
}
.finance-table-summary-label {
  color: var(--muted-strong) !important;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.finance-table tr:last-child td {
  border-bottom: 0;
}
.finance-table tbody tr:hover td {
  background: var(--table-hover-bg);
}
.finance-table a {
  color: var(--accent-strong);
  font-weight: 700;
  text-decoration: none;
}
.finance-table a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.finance-table td span {
  color: var(--muted);
}
.finance-table-main {
  display: block;
  color: var(--heading);
  font-weight: 800;
  line-height: 1.25;
}
.finance-table-main + span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.25;
}
.finance-table-action {
  white-space: nowrap;
}
.finance-fixed-cost-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted-strong) !important;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.finance-fixed-cost-status--active {
  border-color: var(--success-border);
  background: color-mix(in srgb, var(--success-bg) 68%, var(--surface));
  color: var(--success-text) !important;
}
.finance-fixed-cost-status--inactive {
  opacity: .82;
}
.finance-table .num {
  text-align: right;
  white-space: nowrap;
}
.finance-warning-line {
  display: block;
  color: var(--warn) !important;
  font-size: 12px;
  line-height: 1.3;
}
.finance-warning-line + .finance-warning-line {
  margin-top: 3px;
}
@media (max-width: 980px) {
  .finance-donut-grid { grid-template-columns: 1fr; }
  .finance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-month-chart__row { grid-template-columns: 132px minmax(0, 1fr); }
  .finance-month-chart__bar { grid-template-columns: 68px minmax(0, 1fr) minmax(104px, auto); }
  .finance-month-snapshot__bars .finance-month-chart__bar { grid-template-columns: 76px minmax(0, 1fr) minmax(104px, auto); }
}
@media (max-width: 720px) {
  .management-finance-toolbar { align-items: stretch; justify-content: stretch; }
  .management-finance-actions { width: 100%; }
  .management-finance-actions .button { width: 100%; justify-content: center; }
  .management-finance-actions .finance-quiet-link { width: auto; }
  .management-finance-month-form { align-items: stretch; flex-direction: column; width: 100%; }
  .management-finance-month-form input, .management-finance-month-form select, .management-finance-month-form button { width: 100%; }
  .finance-section-head { align-items: flex-start; flex-direction: column; }
  .finance-chart-legend { justify-content: flex-start; }
  .finance-donut-panel__body { grid-template-columns: 1fr; }
  .finance-donut { justify-self: center; width: 132px; }
  .finance-donut-panel--overview .finance-donut-panel__body { grid-template-columns: 1fr; }
  .finance-donut-panel--overview .finance-donut { width: 144px; }
  .finance-donut-row { grid-template-columns: minmax(0, 1fr) auto; }
  .finance-donut-row > strong { grid-column: 2; }
  .finance-donut-panel--overview .finance-donut-row { grid-template-columns: minmax(0, 1fr) auto; }
  .finance-donut-panel--overview .finance-donut-row > strong { grid-column: 2; }
  .finance-donut-popover { display: none; }
  .finance-donut-cash-note { grid-template-columns: minmax(0, 1fr) auto; }
  .finance-donut-cash-note em { grid-column: 1 / -1; }
  .finance-summary-grid { grid-template-columns: 1fr; }
  .finance-month-chart__row { grid-template-columns: 1fr; }
  .finance-month-chart__bar { grid-template-columns: 62px minmax(0, 1fr); }
  .finance-month-snapshot__bars .finance-month-chart__bar { grid-template-columns: 70px minmax(0, 1fr); }
  .finance-month-chart__value { grid-column: 2; text-align: left; }
  .finance-month-snapshot__cash > span { width: 100%; }
  .finance-cost-breakdown { display: none; }
}

/* Tasks */
.tasks-page, .task-detail-page { display: grid; gap: 12px; }
.task-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.task-summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 8px; }
.task-summary-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--heading); text-decoration: none; box-shadow: var(--shadow-soft); }
.task-summary-item span { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.task-summary-item strong { color: var(--ink); font-size: 18px; line-height: 1; }
.task-summary-item:hover, .task-summary-item.is-active { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.task-summary-item--unread.has-unread { border-color: var(--bad-border); background: var(--bad-bg); }
.task-summary-item--unread.has-unread span, .task-summary-item--unread.has-unread strong { color: var(--bad); }
.task-now-panel { display: grid; grid-template-columns: minmax(170px, .22fr) minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--accent-border); border-radius: 8px; background: linear-gradient(135deg, var(--accent-soft), var(--surface)); box-shadow: var(--shadow-soft); }
.task-now-panel__head { display: grid; gap: 4px; }
.task-now-panel__head span { color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.task-now-panel__head strong { color: var(--ink); font-size: 18px; line-height: 1.15; }
.task-now-panel p { margin: 0; color: var(--muted); font-size: 13px; }
.task-now-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.task-now-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 42px; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--accent-border) 58%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.task-open-row { cursor: pointer; }
.task-open-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.task-now-item__body { display: grid; gap: 3px; min-width: 0; }
.task-now-item__body a { color: var(--ink); font-size: 14px; font-weight: 850; text-decoration: none; overflow-wrap: anywhere; }
.task-now-item__body a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.task-now-item__body span { color: var(--muted); font-size: 12px; font-weight: 650; line-height: 1.25; }
.task-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-list-toolbar .filter-count { margin: 0; }
.task-approved-toggle { min-height: 30px; padding: 0 9px; font-size: 13px; white-space: nowrap; }
.task-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--table-bg); box-shadow: var(--shadow-soft); }
.task-table { margin: 0; border: 0; }
.task-table th { background: var(--table-head-bg); color: var(--heading); }
.task-table th, .task-table td { padding: 10px 12px; }
.task-table td { background: var(--table-bg); vertical-align: middle; }
.task-table tr:hover td { background: var(--table-hover-bg); }
.task-table tr.is-overdue td { border-top-color: var(--bad-border); }
.task-table tr.has-unread-task td { background: color-mix(in srgb, var(--bad-bg) 42%, var(--table-bg)); }
.task-table tr.has-unread-task:hover td { background: color-mix(in srgb, var(--bad-bg) 58%, var(--table-hover-bg)); }
.task-title-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 750; text-decoration: none; }
.task-open-row:not(.has-unread-task) .task-unread-dot, .task-open-row:not(.has-unread-task) .task-unread-label { display: none; }
.task-unread-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px; background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 12%, transparent); }
.task-unread-label { display: inline-flex; align-items: center; min-height: 20px; margin-left: 7px; padding: 0 7px; border: 1px solid var(--bad-border); border-radius: 999px; background: var(--bad-bg); color: var(--bad); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .035em; }
.task-title-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.task-table-note { display: block; max-width: 520px; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-due { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.task-due--ok { border-color: var(--success-border); background: var(--success-bg); color: var(--success); }
.task-due--warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn); }
.task-due--expired { border-color: var(--bad-border); background: var(--bad-bg); color: var(--bad); }
.task-due--empty { border-color: var(--line); background: var(--surface-muted); color: var(--muted); }
.task-row-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; white-space: nowrap; }
.task-row-actions--compact { justify-content: flex-end; }
.task-row-actions form { margin: 0; padding: 0; border: 0; background: transparent; }
.task-row-actions a, .task-row-actions button { display: inline-flex; align-items: center; min-height: 24px; color: var(--accent); font: inherit; font-size: 13px; font-weight: 750; text-decoration: none; border: 0; background: transparent; padding: 0; cursor: pointer; }
.task-row-actions a:hover, .task-row-actions button:hover { text-decoration: underline; text-underline-offset: 3px; }
.task-row-actions .task-action-primary { min-height: 26px; padding: 0 9px; border: 1px solid var(--accent-border); border-radius: 7px; background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent); }
.task-row-actions .task-action-primary:hover { background: var(--accent-strong); text-decoration: none; }
.task-edit-card { max-width: 860px; }
.task-form { display: grid; gap: 14px; }
.task-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.task-field { display: grid; gap: 5px; }
.task-field--wide { grid-column: 1 / -1; }
.task-field label { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.task-field input, .task-field select, .task-field textarea, .task-comment-form textarea, .task-reopen-box textarea { width: 100%; }
.task-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.task-form-errors, .task-field .errorlist, .task-comment-form .errorlist, .task-reopen-box .errorlist { margin: 0; padding: 0; color: var(--bad); list-style: none; font-size: 12px; font-weight: 700; }
.task-detail-head { align-items: flex-start; }
.task-detail-head .status-badge { margin-bottom: 7px; }
.task-modal-statusline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.task-modal-title { flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: 22px; line-height: 1.15; overflow-wrap: anywhere; }
.task-modal-edit { margin-left: auto; color: var(--accent); font-size: 13px; font-weight: 650; text-decoration: none; }
.task-modal-edit:hover { text-decoration: underline; text-underline-offset: 3px; }
.task-detail-page--modal { gap: 10px; }
.task-detail-page--modal .material-section-title { margin-bottom: 0; }
.task-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.task-main-card, .task-comments-card { display: grid; gap: 10px; }
.task-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px 12px; padding-top: 2px; }
.task-meta-grid > div { min-width: 0; padding: 0; border: 0; background: transparent; }
.task-meta-grid span, .task-description > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }
.task-meta-grid strong { color: var(--muted-strong); font-size: 13px; font-weight: 520; line-height: 1.25; overflow-wrap: anywhere; }
.task-meta-status strong { display: block; }
.task-meta-status .status-badge { min-height: 20px; padding: 0 7px; font-size: 11px; font-weight: 650; }
.task-meta-created strong { color: var(--muted); font-size: 11px; font-weight: 500; }
.task-description { padding-top: 2px; }
.task-description--primary { padding: 2px 0 10px; border-bottom: 1px solid var(--line); }
.task-description--primary p { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.55; }
.task-description p { margin: 0; color: var(--ink); line-height: 1.5; }
.task-state-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-top: 0; }
.task-state-actions form { margin: 0; padding: 0; border: 0; background: transparent; }
.task-state-actions button { min-height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 700; box-shadow: none; }
.task-secondary-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 0; }
.task-reopen-box, .task-delete-box { flex: 0 1 420px; border: 0; border-radius: 8px; background: transparent; }
.task-reopen-box[open] { border: 1px solid var(--warn-border); background: color-mix(in srgb, var(--warn-bg) 54%, var(--surface)); }
.task-delete-box[open] { border: 1px solid var(--bad-border); background: color-mix(in srgb, var(--bad-bg) 54%, var(--surface)); }
.task-reopen-box summary, .task-delete-box summary { display: flex; align-items: center; justify-content: flex-end; min-height: 24px; padding: 0 4px; cursor: pointer; font-size: 12px; font-weight: 600; list-style: none; }
.task-reopen-box summary { color: var(--muted-strong); }
.task-delete-box summary { color: color-mix(in srgb, var(--bad) 72%, var(--muted)); }
.task-reopen-box[open] summary, .task-delete-box[open] summary { padding: 7px 9px 5px; }
.task-reopen-box[open] summary { color: var(--warn); }
.task-delete-box[open] summary { color: var(--bad); }
.task-reopen-box summary::-webkit-details-marker, .task-delete-box summary::-webkit-details-marker { display: none; }
.task-reopen-box form, .task-delete-box form { display: grid; gap: 8px; max-width: none; margin: 0; padding: 0 9px 9px; border: 0; background: transparent; }
.task-delete-box p { margin: 0; color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.task-delete-error { color: var(--bad) !important; font-weight: 800; }
.task-delete-confirm { display: flex; align-items: flex-start; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.35; }
.task-delete-confirm input { flex: 0 0 auto; margin-top: 2px; }
.task-reopen-box .button-danger, .task-delete-box .button-danger { justify-self: end; min-height: 28px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.task-comment-list { display: grid; gap: 8px; }
.task-comment { padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.task-comment--system, .task-comment--done, .task-comment--approved { border-color: var(--accent-border); background: var(--accent-soft); }
.task-comment--reopened { border-color: var(--warn-border); background: var(--warn-bg); }
.task-comment__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.task-comment__head strong { color: var(--ink); font-size: 13px; }
.task-comment__head span { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.task-comment__meta { display: inline-flex; align-items: center; gap: 7px; }
.task-read-receipt { display: inline-flex; align-items: center; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: -0.01em; }
.task-read-receipt--read { color: var(--accent); }
.task-read-receipt__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.task-comment p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.45; }
.task-comment-form { display: grid; gap: 8px; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
@media (max-width: 980px) { .task-summary-strip, .task-now-panel, .task-detail-layout, .task-meta-grid { grid-template-columns: 1fr; } .task-now-list li { grid-template-columns: 1fr; } .task-row-actions--compact { justify-content: flex-start; } .task-form-grid { grid-template-columns: 1fr; } }


.steel-product-generator {
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  margin: 0 0 16px;
  padding: 14px;
}

.steel-product-generator [hidden] {
  display: none !important;
}

.steel-product-generator__head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.steel-product-generator__head h2 {
  color: #172033;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 2px 0 0;
}

.steel-product-generator__head p,
.steel-product-generator__status {
  color: #64748b;
  font-size: 13px;
  margin: 0;
}

.steel-product-generator__status.is-error {
  color: #b91c1c;
  font-weight: 700;
}

.steel-product-generator__layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(320px, 420px) minmax(420px, 1fr);
}

.steel-product-generator__form,
.steel-product-generator__preview {
  min-width: 0;
}

.steel-product-generator__grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.steel-product-generator label,
.steel-product-generator__optional summary {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.steel-product-generator input,
.steel-product-generator select {
  background: #ffffff;
  border: 1px solid #d7e0ea;
  border-radius: 6px;
  color: #172033;
  display: block;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
  min-height: 34px;
  padding: 6px 8px;
  width: 100%;
}

.steel-generator-checkbox {
  align-items: center;
  border: 1px solid #d7e0ea;
  border-radius: 6px;
  display: flex;
  gap: 8px;
  margin-top: 18px;
  min-height: 34px;
  padding: 6px 8px;
}

.steel-generator-checkbox input {
  margin: 0;
  min-height: auto;
  width: auto;
}

.steel-product-generator__optional {
  border-top: 1px solid #e7edf4;
  margin-top: 10px;
  padding-top: 8px;
}

.steel-product-generator__optional summary {
  cursor: pointer;
  margin-bottom: 8px;
}

.steel-product-generator__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}

.steel-product-generator__actions button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
}

.steel-product-generator__preview {
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
}

.steel-product-generator__preview svg {
  background: #ffffff;
  border: 1px solid #e5edf5;
  border-radius: 6px;
  display: block;
  height: 340px;
  width: 100%;
}

.steel-product-generator-member {
  stroke: #217d6b;
  stroke-linecap: butt;
}

.steel-product-generator-guide {
  stroke-dasharray: 18 14;
  stroke-linecap: butt;
}

.steel-product-generator-guide-label,
.steel-product-generator-axis-label {
  fill: #172033;
  font-size: 74px;
  font-weight: 700;
  letter-spacing: 0;
}

.steel-product-generator__derived {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px 0 0;
}

.steel-product-generator__derived div {
  background: #ffffff;
  border: 1px solid #e1e8f0;
  border-radius: 6px;
  padding: 7px 8px;
}

.steel-product-generator__derived dt {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.steel-product-generator__derived dd {
  color: #172033;
  font-size: 13px;
  font-weight: 800;
  margin: 2px 0 0;
}

@media (max-width: 980px) {
  .steel-product-generator__layout {
    grid-template-columns: 1fr;
  }
}




.steel-product-picker {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.steel-product-picker-card {
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  color: #172033;
  cursor: pointer;
  display: grid;
  gap: 4px;
  min-height: 104px;
  padding: 12px;
  text-align: left;
}

.steel-product-picker-icon {
  align-items: center;
  background: #ecfdf5;
  border: 1px solid #b9e3d9;
  border-radius: 8px;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 48px;
}

.steel-product-picker-icon svg {
  height: 30px;
  width: 46px;
}

.steel-product-picker-icon path {
  fill: none;
  stroke: #1f7668;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
}

.steel-product-picker-card strong {
  font-size: 18px;
  line-height: 1.1;
}

.steel-product-picker-card small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.steel-product-picker-card.is-active,
.steel-product-picker-card:hover:not(:disabled),
.steel-product-picker-card:focus-visible:not(:disabled) {
  border-color: #1f7668;
  box-shadow: 0 0 0 3px rgba(31, 118, 104, 0.12);
  outline: none;
}

.steel-product-picker-card:disabled {
  background: #f8fafc;
  color: #64748b;
  cursor: not-allowed;
  opacity: 0.68;
}

.steel-product-picker-card:disabled .steel-product-picker-icon {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.steel-product-picker-card:disabled .steel-product-picker-icon path {
  stroke: #94a3b8;
}

.steel-product-configurator {
  display: grid;
  gap: 10px;
}

.steel-product-steps {
  align-items: center;
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 7px 8px;
}

.steel-product-steps button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  gap: 4px;
  min-height: 30px;
  padding: 0 8px;
  position: relative;
}

.steel-product-steps button:not(:last-child)::after {
  color: #94a3b8;
  content: "→";
  font-weight: 700;
  margin-left: 8px;
}

.steel-product-step-no {
  color: inherit;
  font-size: 12px;
  font-weight: 850;
  margin: 0;
}

.steel-product-steps button.is-complete {
  color: #1f7668;
}

.steel-product-steps button.is-active {
  background: #ecfdf5;
  border-color: #b9e3d9;
  color: #1f7668;
}

.steel-product-steps button.is-upcoming {
  color: #64748b;
}

.steel-product-steps button.is-disabled,
.steel-product-steps button:disabled {
  background: transparent;
  border-color: transparent;
  color: #a5b4c5;
  cursor: not-allowed;
}

.steel-product-steps button small {
  color: #94a3b8;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0;
  margin-left: 2px;
  text-transform: none;
}

.steel-product-steps button:hover,
.steel-product-steps button:focus-visible {
  border-color: #b9c7d8;
  outline: none;
}

.steel-product-muted {
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
  margin: 0;
}

[hidden].steel-product-configurator,
[hidden].steel-product-picker,
[hidden].steel-product-step-panel {
  display: none !important;
}

.steel-product-creator-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.steel-product-creator-head {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}

.steel-product-creator-head h1 {
  color: #172033;
  font-size: 26px;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 2px 0 0;
}

.steel-product-creator-layout {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
}

.steel-product-creator-form,
.steel-product-creator-preview {
  min-width: 0;
}

.steel-product-creator-card,
.steel-product-creator-preview {
  background: #ffffff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.steel-product-creator-card {
  margin-bottom: 7px;
  padding: 9px;
}

.steel-product-creator-card-head {
  margin-bottom: 6px;
}

.steel-product-creator-card-head h2,
.steel-product-creator-preview-head h2 {
  color: #172033;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.18;
  margin: 2px 0 0;
}

.steel-product-generator__grid--single {
  grid-template-columns: 1fr;
}

.steel-product-creator-form label {
  color: #475569;
  font-size: 11px;
  font-weight: 760;
}

.steel-product-creator-form input,
.steel-product-creator-form select {
  background: #ffffff;
  border: 1px solid #d7e0ea;
  border-radius: 6px;
  color: #172033;
  display: block;
  font: inherit;
  font-size: 13px;
  font-weight: 720;
  margin-top: 3px;
  min-height: 31px;
  padding: 5px 8px;
  width: 100%;
}

.steel-product-creator-optional summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  list-style: none;
}

.steel-product-creator-optional summary::-webkit-details-marker {
  display: none;
}

.steel-product-creator-optional summary::after {
  color: #64748b;
  content: "⌄";
  font-size: 13px;
  line-height: 1;
}

.steel-product-creator-optional[open] summary::after {
  transform: rotate(180deg);
}

.steel-product-creator-optional summary > span {
  min-width: 0;
}

.steel-product-creator-optional summary > small {
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.steel-product-wall-control {
  display: grid;
  gap: 6px;
  margin: 0 0 7px;
}

.steel-product-wall-switch {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.steel-product-wall-switch button {
  min-height: 30px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.steel-product-wall-switch button:hover,
.steel-product-wall-switch button.is-active {
  border-color: #8fcfc1;
  background: #e8f7f3;
  color: #0f766e;
}

.steel-product-wall-copy {
  justify-content: center;
  min-height: 32px;
  width: 100%;
}

.steel-product-wall-control small {
  min-height: 14px;
  color: #0f766e;
  font-size: 11px;
  font-weight: 700;
}


.steel-product-module-summary {
  border: 1px solid #dbe7ee;
  border-radius: 7px;
  background: #f8fbfd;
  color: #475569;
  display: grid;
  gap: 2px;
  font-size: 12px;
  line-height: 1.25;
  padding: 7px 9px;
}

.steel-product-module-summary strong {
  color: #172033;
  font-size: 12px;
  font-weight: 800;
}

.steel-product-preview-orientation {
  color: #64748b;
  display: block;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  margin-top: 2px;
}

.steel-product-preview-mode-switch {
  min-width: 250px;
}

.steel-product-preview-mode-switch[hidden] {
  display: none !important;
}

.steel-product-front-summary {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #dbe7ee;
  border-radius: 7px;
  background: #f8fbfd;
  color: #334155;
  font-size: 12px;
  line-height: 1.25;
}

.steel-product-front-summary strong {
  color: #172033;
  font-size: 13px;
  font-weight: 800;
}

.steel-product-door-settings {
  display: grid;
  gap: 7px;
}

.steel-product-door-toggle {
  margin: 0;
}

.steel-product-door-settings [data-steel-door-fields] {
  margin-top: 2px;
}

.steel-product-cladding-settings {
  display: grid;
  gap: 7px;
}

.steel-product-cladding-toggle {
  margin: 0;
}

.steel-product-cladding-settings input[type="range"] {
  min-height: 28px;
  padding-left: 0;
  padding-right: 0;
}

.steel-product-cladding-summary {
  background: #f8fbfd;
  border: 1px solid #dbe7ee;
  border-radius: 7px;
  color: #475569;
  display: grid;
  gap: 2px;
  font-size: 12px;
  line-height: 1.25;
  padding: 7px 9px;
}

.steel-product-cladding-summary strong {
  color: #172033;
  font-size: 12px;
  font-weight: 800;
}

.steel-product-cladding-summary small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.steel-product-summary-cladding {
  margin-top: 4px;
}

.steel-product-summary-cladding summary span {
  font-size: 13px;
}

.steel-product-summary-cladding .toggle-field__hint {
  max-width: 260px;
}

.steel-product-creator-actions {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  bottom: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
  padding: 7px;
  position: sticky;
  z-index: 4;
}

.steel-product-creator-actions button {
  justify-content: center;
  min-height: 32px;
  width: 100%;
}

.steel-product-creator-actions [data-steel-generator-action="open-editor"] {
  grid-column: 1 / -1;
}

.steel-product-creator-actions [hidden] {
  display: none !important;
}

.steel-tool-button--primary {
  background: #1f7668;
  border-color: #1f7668;
  color: #ffffff;
}

.steel-tool-button--secondary {
  background: #ffffff;
  color: #475569;
}

.steel-product-creator-preview {
  padding: 9px;
}

.steel-product-creator-preview-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
  min-width: 0;
}

.steel-product-creator-preview-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.steel-product-preview-zoom {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #d8e3ef;
  border-radius: 7px;
  color: #243247;
  display: inline-flex;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  justify-content: center;
  min-height: 32px;
  min-width: 54px;
  padding: 0 9px;
}

.steel-product-preview-help {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 210px;
  white-space: normal;
}

.steel-tool-button--icon {
  min-width: 34px;
  padding-left: 9px;
  padding-right: 9px;
}

.steel-product-creator-toggle {
  align-items: center;
  color: #475569;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  white-space: nowrap;
}

.steel-product-creator-toggle input {
  margin: 0;
}

.steel-product-creator-preview-canvas {
  background: #ffffff;
  border: 1px solid #e5edf5;
  border-radius: 8px;
  overflow: hidden;
}

.steel-product-creator-preview-canvas svg {
  cursor: grab;
  display: block;
  height: clamp(360px, calc(100vh - 250px), 650px);
  min-height: 0;
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
  width: 100%;
}

.steel-product-creator-shell[data-steel-product-current-step="summary"] .steel-product-creator-layout {
  display: block;
}

.steel-product-creator-shell[data-steel-product-current-step="production"] .steel-product-creator-layout {
  display: block;
}

.steel-product-creator-shell[data-steel-product-current-step="summary"] .steel-product-creator-form,
.steel-product-creator-shell[data-steel-product-current-step="summary"] .steel-product-creator-preview-head,
.steel-product-creator-shell[data-steel-product-current-step="summary"] .steel-product-generator__derived,
.steel-product-creator-shell[data-steel-product-current-step="production"] .steel-product-creator-form,
.steel-product-creator-shell[data-steel-product-current-step="production"] .steel-product-creator-preview-head,
.steel-product-creator-shell[data-steel-product-current-step="production"] .steel-product-creator-preview-canvas,
.steel-product-creator-shell[data-steel-product-current-step="production"] .steel-product-generator__derived {
  display: none !important;
}

.steel-product-creator-shell[data-steel-product-current-step="summary"] .steel-product-creator-preview,
.steel-product-creator-shell[data-steel-product-current-step="summary"] .steel-product-creator-preview-canvas {
  border-radius: 8px;
  min-height: clamp(620px, calc(100vh - 190px), 960px);
}

.steel-product-creator-shell[data-steel-product-current-step="summary"] .steel-product-assembly-view {
  min-height: clamp(620px, calc(100vh - 190px), 960px);
}

.steel-product-creator-shell[data-steel-product-current-step="production"] .steel-product-production-card-panel {
  margin: 0 0 18px;
}

.steel-product-creator-shell[data-steel-product-current-step="production"] .steel-garage-production-pages {
  display: grid;
}

.steel-product-creator-preview-canvas svg.is-panning {
  cursor: grabbing;
}

.steel-product-creator-preview-canvas svg.is-space-pan {
  cursor: grab;
}

body.steel-product-preview-is-panning {
  cursor: grabbing;
  user-select: none;
}

.steel-product-creator-preview-canvas svg path,
.steel-product-creator-preview-canvas svg line,
.steel-product-creator-preview-canvas svg rect,
.steel-product-creator-preview-canvas svg circle,
.steel-product-creator-preview-canvas svg polygon,
.steel-product-creator-preview-canvas svg polyline {
  vector-effect: non-scaling-stroke;
}

.steel-product-creator-preview-canvas [hidden] {
  display: none !important;
}

.steel-product-creator-preview-canvas .steel-product-generator-member {
  fill: #dff1ed;
  stroke: #155d50;
  stroke-linejoin: round;
  stroke-width: 2;
}

.steel-product-creator-preview-canvas .steel-product-generator-member.is-collision {
  fill: rgba(239, 68, 68, .32);
  filter: drop-shadow(0 0 7px rgba(220, 38, 38, .62));
  stroke: #dc2626;
  stroke-width: 6;
}

.steel-product-creator-preview-canvas .steel-product-generator-hole {
  fill: #ffffff;
  pointer-events: none;
  stroke: #f59e0b;
  stroke-width: 5;
}

.steel-product-creator-preview-canvas .steel-product-generator-hole.is-pending {
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, .42));
}

.steel-product-creator-preview-canvas .steel-product-generator-hole.is-invalid {
  fill: rgba(239, 68, 68, .24);
  filter: drop-shadow(0 0 6px rgba(220, 38, 38, .62));
  stroke: #dc2626;
}

.steel-product-creator-preview-canvas .steel-product-generator-hole-label-line {
  fill: none;
  pointer-events: none;
  stroke: #d97706;
  stroke-dasharray: 12 9;
  stroke-width: 3;
}

.steel-product-creator-preview-canvas .steel-product-generator-hole-label {
  fill: #78350f;
  font-size: 42px;
  font-weight: 900;
  paint-order: stroke;
  pointer-events: none;
  stroke: #fff7ed;
  stroke-linejoin: round;
  stroke-width: 11px;
}

.steel-product-creator-preview-canvas .steel-product-generator-cladding {
  fill: #5eead4;
  filter: drop-shadow(0 0 7px rgba(20, 184, 166, .22));
  pointer-events: none;
  stroke: #0f766e;
  stroke-width: 6;
}

.steel-product-creator-preview-canvas .steel-product-generator-cladding-line {
  opacity: .76;
  pointer-events: none;
  stroke: #064e3b;
  stroke-dasharray: 16 10;
  stroke-width: 5;
}

.steel-product-creator-preview-canvas .steel-product-generator-cladding-label {
  fill: #064e3b;
  font-size: 76px;
  font-weight: 820;
  letter-spacing: 0;
  pointer-events: none;
  text-anchor: middle;
}

.steel-product-creator-preview-canvas .steel-product-step-reference-generated {
  fill: rgba(37, 99, 235, 0.06);
  pointer-events: none;
  stroke: #2563eb;
  stroke-width: 3;
}

.steel-product-creator-preview-canvas .steel-product-step-reference-box {
  fill: rgba(34, 197, 94, 0.04);
  pointer-events: none;
  stroke: #dc2626;
  stroke-dasharray: 18 12;
  stroke-width: 4;
}

.steel-product-creator-preview-canvas .steel-product-step-reference-box.is-matched,
.steel-product-creator-preview-canvas .steel-product-step-reference-box.is-mirroredMatch {
  fill: rgba(34, 197, 94, 0.06);
  stroke: #16a34a;
}

.steel-product-creator-preview-canvas .steel-product-step-reference-box.is-deviation,
.steel-product-creator-preview-canvas .steel-product-step-reference-box.is-ambiguousMatch {
  fill: rgba(220, 38, 38, 0.08);
  stroke: #dc2626;
}

.steel-product-creator-preview-canvas .steel-product-step-reference-box.is-extra {
  fill: rgba(234, 88, 12, 0.08);
  stroke: #ea580c;
}

.steel-product-creator-preview-canvas .steel-product-step-reference-report {
  fill: #166534;
  font-size: 72px;
  font-weight: 780;
  letter-spacing: 0;
}


.steel-product-creator-preview-canvas .steel-product-module-box {
  fill: rgba(31, 118, 104, 0.08);
  stroke: #155d50;
  stroke-width: 5;
}

.steel-product-creator-preview-canvas .steel-product-module-box.is-module-2 {
  fill: rgba(37, 99, 235, 0.07);
  stroke: #2563eb;
}

.steel-product-creator-preview-canvas .steel-product-module-box.is-module-3 {
  fill: rgba(234, 88, 12, 0.07);
  stroke: #ea580c;
}

.steel-product-creator-preview-canvas .steel-product-module-joint {
  stroke: #dc2626;
  stroke-dasharray: 30 18;
  stroke-width: 8;
}

.steel-product-creator-preview-canvas .steel-product-module-label,
.steel-product-creator-preview-canvas .steel-product-module-axis-label {
  fill: #172033;
  font-size: 72px;
  font-weight: 760;
  letter-spacing: 0;
  text-anchor: middle;
}

.steel-product-creator-preview-canvas .steel-product-module-axis-label {
  fill: #991b1b;
  font-size: 58px;
  font-weight: 720;
}

.steel-product-creator-preview-canvas .steel-product-generator-opening {
  fill: rgba(37, 99, 235, 0.08);
  stroke: #2563eb;
  stroke-dasharray: 24 16;
  stroke-width: 5;
}

.steel-product-creator-preview-canvas .steel-product-generator-door-opening {
  fill: rgba(220, 38, 38, 0.07);
  stroke: #dc2626;
  stroke-dasharray: 18 12;
  stroke-width: 5;
}

.steel-product-creator-preview-canvas .steel-product-generator-door-label {
  fill: #991b1b;
  font-size: 64px;
  font-weight: 750;
  text-anchor: middle;
}

.steel-product-creator-preview-canvas .steel-product-generator-gate-zone {
  fill: rgba(37, 99, 235, 0.06);
  stroke: #2563eb;
  stroke-dasharray: 24 16;
  stroke-width: 5;
}

.steel-product-creator-preview-canvas .steel-product-generator-gate-label {
  fill: #1e3a8a;
  font-size: 92px;
  font-weight: 780;
  letter-spacing: 0;
  text-anchor: middle;
}

.steel-product-creator-preview-canvas .steel-product-generator-post-label {
  fill: #172033;
  font-size: 58px;
  font-weight: 720;
  letter-spacing: 0;
  text-anchor: middle;
}

.steel-product-field-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

.steel-product-creator-preview-canvas .steel-product-generator-guide {
  fill: none;
  stroke-dasharray: 18 14;
  stroke-linecap: butt;
  stroke-width: 7;
}

.steel-product-creator-preview-canvas .steel-product-generator-guide.is-front {
  stroke: #2563eb;
}

.steel-product-creator-preview-canvas .steel-product-generator-guide.is-join {
  stroke: #dc2626;
}

.steel-product-creator-preview-canvas .steel-product-generator-guide.is-rear {
  stroke: #64748b;
  opacity: .55;
}

.steel-product-creator-preview-canvas .steel-product-generator-guide-label,
.steel-product-creator-preview-canvas .steel-product-generator-axis-label,
.steel-product-creator-preview-canvas .steel-product-preview-dimension-label {
  fill: #172033;
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 0;
}

.steel-product-creator-preview-canvas .steel-product-dimension-plan-outer {
  fill: #f8fafc;
  stroke: #172033;
  stroke-width: 8;
}

.steel-product-creator-preview-canvas .steel-product-dimension-plan-body {
  fill: #e7f5f1;
  stroke: #1f7668;
  stroke-width: 6;
}

.steel-product-creator-preview-canvas .steel-product-dimension-plan-front {
  stroke: #2563eb;
  stroke-dasharray: 36 22;
  stroke-width: 8;
}

.steel-product-creator-preview-canvas .steel-product-dimension-plan-label,
.steel-product-creator-preview-canvas .steel-product-dimension-plan-title {
  fill: #172033;
  font-size: 126px;
  font-weight: 820;
  letter-spacing: 0;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .92);
  stroke-linejoin: round;
  stroke-width: 12px;
  text-anchor: middle;
}

.steel-product-creator-preview-canvas .steel-product-dimension-plan-title {
  font-size: 152px;
  font-weight: 860;
}

.steel-product-creator-preview-canvas .steel-product-dimension-plan-label.is-muted {
  fill: #475569;
  font-size: 106px;
}

.steel-product-creator-preview-canvas .steel-product-dimension-plan-label.is-vertical {
  dominant-baseline: middle;
  font-size: 104px;
  writing-mode: tb;
}

.steel-product-creator-preview-canvas .steel-product-roof-layout-outline {
  fill: #f8fafc;
  stroke: #94a3b8;
  stroke-width: 8;
}

.steel-product-creator-preview-canvas .steel-product-roof-layout-edge {
  stroke: #172033;
  stroke-width: 8;
}

.steel-product-creator-preview-canvas .steel-product-roof-support {
  stroke-width: 12;
}

.steel-product-creator-preview-canvas .steel-product-roof-support.is-side {
  stroke: #155d50;
}

.steel-product-creator-preview-canvas .steel-product-roof-support.is-truss {
  stroke: #2563eb;
  stroke-dasharray: 36 20;
}

.steel-product-creator-preview-canvas .steel-product-roof-support-dot {
  fill: #ffffff;
  stroke: #172033;
  stroke-width: 7;
}

.steel-product-creator-preview-canvas .steel-product-roof-support-label,
.steel-product-creator-preview-canvas .steel-product-roof-layout-axis,
.steel-product-creator-preview-canvas .steel-product-roof-layout-dim-label,
.steel-product-creator-preview-canvas .steel-product-roof-layout-small {
  fill: #172033;
  font-size: 76px;
  font-weight: 740;
  letter-spacing: 0;
  text-anchor: middle;
}

.steel-product-creator-preview-canvas .steel-product-roof-layout-small {
  fill: #64748b;
  font-size: 58px;
  font-weight: 680;
}

.steel-product-creator-preview-canvas .steel-product-roof-layout-dimension {
  stroke: #0f766e;
  stroke-width: 7;
  stroke-dasharray: 26 16;
}

.steel-product-creator-preview-canvas .steel-product-roof-section-ground {
  stroke: #94a3b8;
  stroke-width: 8;
}

.steel-product-creator-preview-canvas .steel-product-roof-section-side-top {
  stroke: #155d50;
  stroke-width: 10;
  stroke-dasharray: 34 18;
}

.steel-product-creator-preview-canvas .steel-product-roof-section-roof {
  stroke: #2563eb;
  stroke-width: 12;
}

.steel-product-creator-preview-canvas .steel-product-roof-section-wall,
.steel-product-creator-preview-canvas .steel-product-roof-section-rear {
  stroke: #172033;
  stroke-width: 9;
}

.steel-product-creator-preview-canvas .steel-product-roof-section-label {
  fill: #172033;
  font-size: 76px;
  font-weight: 740;
  letter-spacing: 0;
  text-anchor: middle;
}

.steel-product-creator-preview-canvas .steel-product-roof-dock {
  fill: rgba(20, 184, 166, .18);
  stroke: #0f766e;
  stroke-width: 7;
}

.steel-product-creator-preview-canvas .steel-product-roof-dock.is-guided {
  fill: rgba(37, 99, 235, .13);
  stroke: #2563eb;
  stroke-dasharray: 24 14;
}

.steel-product-creator-preview-canvas .steel-product-roof-dock-shelf {
  stroke: #111827;
  stroke-width: 12;
  stroke-linecap: round;
}

.steel-product-creator-preview-canvas .steel-product-roof-docking-truss {
  stroke: #0f766e;
  stroke-width: 14;
  stroke-linecap: round;
}

.steel-product-creator-preview-canvas .steel-product-roof-docking-arrow {
  stroke: #dc2626;
  stroke-width: 8;
  stroke-dasharray: 30 16;
}

.steel-product-creator-preview-canvas .steel-product-roof-dock-label,
.steel-product-creator-preview-canvas .steel-product-roof-docking-note,
.steel-product-creator-preview-canvas .steel-product-roof-docking-title {
  fill: #172033;
  font-size: 64px;
  font-weight: 720;
  letter-spacing: 0;
  text-anchor: middle;
}

.steel-product-creator-preview-canvas .steel-product-roof-docking-note {
  fill: #475569;
  font-size: 58px;
  font-weight: 660;
}


.steel-product-creator-preview-canvas .steel-product-roof-section-label.is-roof {
  fill: #1d4ed8;
}

.steel-product-creator-preview-canvas .steel-product-roof-section-label.is-vertical {
  dominant-baseline: middle;
  font-size: 64px;
  writing-mode: tb;
}

.steel-product-creator-preview-canvas .steel-product-preview-empty {
  fill: #64748b;
  font-size: 26px;
  font-weight: 700;
}

.steel-product-creator-preview-canvas .steel-product-preview-dimension {
  fill: none;
  stroke: #2563eb;
  stroke-dasharray: 28 18;
  stroke-width: 7;
}

.steel-product-creator-preview-canvas .steel-product-preview-dimension-label.is-vertical {
  dominant-baseline: middle;
}

.steel-product-generator__derived {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
}

.steel-product-summary-strip {
  background: #f8fafc;
  border: 1px solid #dbe7ee;
  border-radius: 7px;
  color: #172033;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.35;
  padding: 8px 10px;
}

.steel-product-summary-details {
  background: #ffffff;
  border: 1px solid #e1e8f0;
  border-radius: 7px;
  padding: 7px 9px;
}

.steel-product-summary-details summary {
  color: #475569;
  cursor: pointer;
  font-size: 12px;
  font-weight: 760;
  list-style: none;
}

.steel-product-summary-details summary::-webkit-details-marker {
  display: none;
}

.steel-product-summary-details dl {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 8px 0 0;
}

.steel-product-summary-details div {
  background: #f8fafc;
  border: 1px solid #e1e8f0;
  border-radius: 6px;
  padding: 6px 7px;
}

.steel-product-summary-details dt {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.steel-product-summary-details dd {
  color: #172033;
  font-size: 12px;
  font-weight: 780;
  margin: 2px 0 0;
}

.steel-product-production-card-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid #dbe7ee;
  border-radius: 8px;
  background: #f8fbfd;
}

.steel-product-production-card-panel[hidden] {
  display: none !important;
}

.steel-product-production-card-panel h3 {
  margin: 1px 0 3px;
  color: #172033;
  font-size: 15px;
  line-height: 1.15;
}

.steel-product-production-card-panel p {
  display: grid;
  gap: 2px;
  margin: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}

.steel-product-production-card-panel p strong {
  color: #172033;
  font-size: 12.5px;
  font-weight: 820;
}

.steel-product-production-card-panel p span,
.steel-product-production-card-panel p small {
  color: #64748b;
  font-size: 11px;
  font-weight: 650;
}

.steel-product-production-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.steel-product-production-card-actions .steel-tool-button {
  min-height: 34px;
  white-space: nowrap;
}

.steel-garage-production-pages {
  display: none;
  margin-top: 18px;
}

body.is-steel-production-printing .steel-garage-production-pages {
  display: grid;
}

.steel-garage-production-subtitle {
  margin: 5px 0 0;
  color: #475569;
  font-size: 10px;
  font-weight: 720;
  line-height: 1.25;
}


.steel-a4-page--garage-production-project .steel-production-status-banner {
  margin-bottom: 9px;
}

.steel-garage-production-project-cover {
  display: grid;
  min-height: 430px;
}

.steel-garage-production-project-view {
  display: grid;
  min-height: 430px;
  border: 1px solid #d7e0e7;
  border-radius: 6px;
  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
  overflow: hidden;
}

.steel-garage-production-project-svg {
  display: block;
  width: 100%;
  height: 430px;
}

.steel-garage-production-project-member {
  fill: rgba(20, 129, 111, .07);
  stroke: #0f766e;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.steel-garage-production-project-member--roof_truss,
.steel-garage-production-project-member--roof_purlin {
  fill: rgba(37, 99, 235, .06);
  stroke: #1d4ed8;
}

.steel-garage-production-project-member--front_wall {
  stroke: #14532d;
}

.steel-garage-production-project-label,
.steel-garage-production-project-slope-label {
  fill: #334155;
  font-size: 112px;
  font-weight: 900;
  letter-spacing: .04em;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 18px;
}

.steel-garage-production-project-slope {
  fill: none;
  stroke: #ea580c;
  stroke-width: 10;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.steel-garage-production-project-slope-label {
  fill: #c2410c;
  font-size: 86px;
}

.steel-garage-production-project-empty {
  align-items: center;
  color: #64748b;
  display: flex;
  font-size: 12px;
  font-weight: 760;
  justify-content: center;
}

.steel-garage-production-project-table {
  width: 100%;
  border-collapse: collapse;
}

.steel-garage-production-project-table th,
.steel-garage-production-project-table td {
  padding: 4px 6px;
  border: 1px solid #d7e0e7;
  color: #111827;
  font-size: 8.8px;
  line-height: 1.2;
}

.steel-garage-production-project-table th {
  background: #f8fafc;
  color: #334155;
  font-size: 7.8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.steel-garage-production-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.steel-garage-production-kpis div {
  padding: 7px 8px;
  border: 1px solid #d9e1ea;
  border-radius: 5px;
  background: #f8fafc;
}

.steel-garage-production-kpis span {
  display: block;
  margin-bottom: 2px;
  color: #64748b;
  font-size: 8.6px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.steel-garage-production-kpis strong {
  color: #111827;
  font-size: 14px;
  font-weight: 900;
}

.steel-garage-production-table-wrap {
  max-height: none;
  overflow: visible;
}

.steel-garage-production-profile-table,
.steel-garage-production-check-table,
.steel-garage-production-cut-table,
.steel-garage-production-stock-table {
  width: 100%;
  border-collapse: collapse;
}

.steel-garage-production-profile-table th,
.steel-garage-production-profile-table td,
.steel-garage-production-check-table th,
.steel-garage-production-check-table td,
.steel-garage-production-cut-table th,
.steel-garage-production-cut-table td,
.steel-garage-production-stock-table th,
.steel-garage-production-stock-table td {
  padding: 4px 5px;
  border: 1px solid #d7e0e7;
  color: #111827;
  font-size: 8.7px;
  line-height: 1.22;
  vertical-align: top;
}

.steel-garage-production-profile-table th,
.steel-garage-production-check-table th,
.steel-garage-production-cut-table th,
.steel-garage-production-stock-table th {
  background: #f8fafc;
  color: #334155;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.steel-garage-production-cut-table td:nth-child(7),
.steel-garage-production-cut-table td:nth-child(8),
.steel-garage-production-stock-table td:nth-child(3) {
  white-space: normal;
}

.steel-garage-production-stock-table td:nth-child(3) {
  font-size: 8.1px;
  line-height: 1.25;
}

.steel-garage-production-module-overview-table,
.steel-garage-production-module-table,
.steel-garage-production-module-cut-table,
.steel-garage-production-module-connection-table,
.steel-garage-production-module-fastener-table,
.steel-garage-production-fastening-table,
.steel-garage-production-fastener-summary-table,
.steel-garage-production-cladding-table {
  width: 100%;
  border-collapse: collapse;
}

.steel-garage-production-module-overview-table th,
.steel-garage-production-module-overview-table td,
.steel-garage-production-module-table th,
.steel-garage-production-module-table td,
.steel-garage-production-module-cut-table th,
.steel-garage-production-module-cut-table td,
.steel-garage-production-module-connection-table th,
.steel-garage-production-module-connection-table td,
.steel-garage-production-module-fastener-table th,
.steel-garage-production-module-fastener-table td,
.steel-garage-production-fastening-table th,
.steel-garage-production-fastening-table td,
.steel-garage-production-fastener-summary-table th,
.steel-garage-production-fastener-summary-table td,
.steel-garage-production-cladding-table th,
.steel-garage-production-cladding-table td {
  padding: 3.5px 4px;
  border: 1px solid #d7e0e7;
  color: #111827;
  font-size: 8px;
  line-height: 1.18;
  vertical-align: top;
}

.steel-garage-production-module-overview-table th,
.steel-garage-production-module-table th,
.steel-garage-production-module-cut-table th,
.steel-garage-production-module-connection-table th,
.steel-garage-production-module-fastener-table th,
.steel-garage-production-fastening-table th,
.steel-garage-production-fastener-summary-table th,
.steel-garage-production-cladding-table th {
  background: #f8fafc;
  color: #334155;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.steel-garage-production-module-stack {
  display: grid;
  gap: 8px;
}

.steel-garage-production-module-card {
  break-inside: avoid;
  padding: 8px;
  border: 1px solid #cbd7e3;
  border-radius: 6px;
  background: #fff;
}

.steel-garage-production-module-head {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.steel-garage-production-module-head span,
.steel-garage-production-module-head em {
  color: #64748b;
  font-size: 7.8px;
  font-style: normal;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.steel-garage-production-module-head strong {
  display: block;
  margin-top: 1px;
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
}

.steel-garage-production-module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.steel-garage-production-module-meta span {
  padding: 2px 5px;
  border: 1px solid #d7e0e7;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  font-size: 7.8px;
  font-weight: 760;
}

.steel-garage-production-module-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(155px, .55fr);
  gap: 7px;
  margin-bottom: 7px;
}

.steel-garage-production-module-drawing {
  min-height: 260px;
  border: 1px solid #d7e0e7;
  border-radius: 5px;
  background: #fbfdff;
  overflow: hidden;
}

.steel-garage-production-module-svg {
  display: block;
  width: 100%;
  height: 260px;
}

.steel-garage-production-module-member {
  fill: rgba(15, 118, 110, .88);
  stroke: #064e3b;
  stroke-width: 1.15;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.steel-garage-production-module-number {
  fill: #0f172a;
  font-size: 48px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 9px;
  text-anchor: middle;
  dominant-baseline: central;
}

.steel-garage-production-module-callout-line {
  fill: none;
  stroke: #64748b;
  stroke-width: 1.2;
  stroke-dasharray: 7 5;
  vector-effect: non-scaling-stroke;
}

.steel-garage-production-module-callout {
  fill: #0f172a;
  font-size: 56px;
  font-weight: 880;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 10px;
  stroke-linejoin: round;
  dominant-baseline: central;
}

.steel-garage-production-module-dim,
.steel-garage-production-module-base {
  fill: #334155;
  font-size: 42px;
  font-weight: 850;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 7px;
}

.steel-garage-production-module-dim--width {
  text-anchor: middle;
}

.steel-garage-production-module-dim--height {
  text-anchor: start;
  dominant-baseline: middle;
}

.steel-garage-production-module-base {
  fill: #92400e;
  font-size: 34px;
}

.steel-garage-production-module-rotation-note {
  fill: #475569;
  font-size: 34px;
  font-weight: 820;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 7px;
  text-anchor: end;
}

.steel-garage-production-internal-note {
  margin: 0;
  padding: 5px 6px;
  border: 1px solid #fde68a;
  border-radius: 4px;
  background: #fffbeb;
  color: #92400e;
  font-size: 7.6px;
  font-weight: 820;
  line-height: 1.25;
}

.steel-garage-production-module-empty {
  align-items: center;
  color: #64748b;
  display: flex;
  font-size: 9px;
  font-weight: 750;
  height: 118px;
  justify-content: center;
}

.steel-garage-production-module-side h4,
.steel-garage-production-module-grid h4 {
  margin: 0 0 4px;
  color: #334155;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.steel-garage-production-module-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: 7px;
}

.steel-garage-production-module-fasteners {
  margin-top: 7px;
}

.steel-garage-production-module-fastener-table td:nth-child(4),
.steel-garage-production-module-fastener-table td:nth-child(7),
.steel-garage-production-fastening-table td:nth-child(5),
.steel-garage-production-fastening-table td:nth-child(9) {
  white-space: normal;
}

.steel-garage-production-fastening-table td:nth-child(10),
.steel-garage-production-module-fastener-table td:nth-child(8),
.steel-garage-production-fastener-summary-table td:nth-child(4),
.steel-garage-production-stock-table td:nth-child(6) {
  color: #92400e;
  font-weight: 820;
}

.steel-garage-production-module-cut-table td:nth-child(7),
.steel-garage-production-module-connection-table td:nth-child(3),
.steel-garage-production-module-connection-table td:nth-child(4),
.steel-garage-production-module-overview-table td:nth-child(7),
.steel-garage-production-stock-table td:nth-child(3) {
  white-space: normal;
}

.steel-garage-production-fastening-diagram-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.steel-garage-production-fastening-diagram-card {
  border: 1px solid #d7e0e7;
  border-radius: 5px;
  background: #fbfdff;
  padding: 6px;
}

.steel-garage-production-fastening-diagram-head {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.steel-garage-production-fastening-diagram-head strong {
  color: #0f172a;
  font-size: 8.5px;
  font-weight: 900;
}

.steel-garage-production-fastening-diagram-head span,
.steel-garage-production-fastening-diagram-card p {
  color: #475569;
  font-size: 6.9px;
  font-weight: 740;
  line-height: 1.18;
  margin: 0;
}

.steel-garage-production-fastening-diagram-card p strong {
  color: #92400e;
}

.steel-garage-production-fastening-diagram-svg {
  display: block;
  height: 68px;
  width: 100%;
}

.steel-garage-production-fastening-diagram-axis {
  stroke: #0f766e;
  stroke-linecap: round;
  stroke-width: 12;
}

.steel-garage-production-fastening-diagram-edge {
  stroke: #0f172a;
  stroke-width: 4;
}

.steel-garage-production-fastening-diagram-hole {
  fill: #fff7ed;
  stroke: #f59e0b;
  stroke-width: 6;
}

.steel-garage-production-fastening-diagram-position,
.steel-garage-production-fastening-diagram-base,
.steel-garage-production-fastening-diagram-note {
  fill: #334155;
  font-size: 28px;
  font-weight: 850;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 6px;
}

.steel-garage-production-fastening-diagram-note {
  fill: #64748b;
  font-size: 24px;
}

.steel-garage-production-module-card--exemplar {
  padding: 6px;
}

.steel-garage-production-module-card--exemplar .steel-garage-production-module-head {
  margin-bottom: 4px;
}

.steel-garage-production-module-card--exemplar .steel-garage-production-module-meta {
  margin-bottom: 5px;
}

.steel-garage-production-module-card--exemplar .steel-garage-production-module-meta span {
  padding: 1.5px 4px;
  font-size: 7.1px;
}

.steel-garage-production-module-drawing--exemplar {
  min-height: 340px;
  margin-bottom: 5px;
}

.steel-garage-production-module-svg--exemplar {
  height: 340px;
}

.steel-garage-production-exemplar-window {
  fill: rgba(37, 99, 235, .08);
  stroke: #2563eb;
  stroke-dasharray: 16 10;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.steel-garage-production-exemplar-window-label,
.steel-garage-production-exemplar-dim-label,
.steel-garage-production-exemplar-base-label,
.steel-garage-production-exemplar-side-label,
.steel-garage-production-exemplar-diagonal-label {
  fill: #1f2937;
  font-size: 38px;
  font-weight: 850;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 8px;
  stroke-linejoin: round;
}

.steel-garage-production-exemplar-window-label {
  fill: #1d4ed8;
  font-size: 42px;
}

.steel-garage-production-exemplar-dim-label {
  fill: #334155;
  font-size: 34px;
  font-weight: 780;
}

.steel-garage-production-exemplar-dim-label.is-important,
.steel-garage-production-exemplar-base-label {
  fill: #0f766e;
  font-weight: 930;
}

.steel-garage-production-exemplar-dim-label.is-note {
  fill: #64748b;
  font-size: 31px;
}

.steel-garage-production-exemplar-side-label {
  fill: #475569;
  font-size: 36px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.steel-garage-production-exemplar-diagonal-label {
  fill: #b45309;
  font-size: 36px;
}

.steel-garage-production-exemplar-dim-line,
.steel-garage-production-exemplar-dim-tick,
.steel-garage-production-exemplar-extension {
  fill: none;
  stroke: #172033;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.steel-garage-production-exemplar-extension {
  stroke: #94a3b8;
  stroke-dasharray: 10 8;
  stroke-width: 2;
}

.steel-garage-production-exemplar-diagonal {
  fill: none;
  stroke: #f59e0b;
  stroke-dasharray: 16 12;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.steel-garage-production-exemplar-number-dot,
.steel-garage-production-exemplar-base-dot {
  fill: #fff;
  stroke: #0f766e;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.steel-garage-production-exemplar-base-dot {
  fill: #ecfdf5;
}

.steel-garage-production-exemplar-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(160px, .5fr);
  gap: 6px;
  margin-bottom: 5px;
}

.steel-garage-production-exemplar-grid h4,
.steel-garage-production-exemplar-cuts h4 {
  margin: 0 0 3px;
  color: #334155;
  font-size: 7.4px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.steel-garage-production-exemplar-dimension-table,
.steel-garage-production-exemplar-cut-table {
  width: 100%;
  border-collapse: collapse;
}

.steel-garage-production-exemplar-dimension-table th,
.steel-garage-production-exemplar-dimension-table td,
.steel-garage-production-exemplar-cut-table th,
.steel-garage-production-exemplar-cut-table td {
  padding: 2.5px 3px;
  border: 1px solid #d7e0e7;
  color: #111827;
  font-size: 6.9px;
  line-height: 1.13;
  vertical-align: top;
}

.steel-garage-production-exemplar-dimension-table th,
.steel-garage-production-exemplar-cut-table th {
  background: #f8fafc;
  color: #334155;
  font-size: 6.6px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.steel-garage-production-exemplar-cut-table td:nth-child(8),
.steel-garage-production-exemplar-dimension-table td:nth-child(2) {
  white-space: normal;
}

.steel-garage-production-exemplar-cut-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0;
  padding: 4px 6px;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  background: #fffbeb;
  color: #92400e;
  font-size: 7px;
  font-weight: 850;
  line-height: 1.15;
}

.steel-garage-production-exemplar-cut-warning strong {
  font-weight: 950;
  letter-spacing: .04em;
}

.steel-garage-production-exemplar-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 6px;
  margin-top: 5px;
}

.steel-garage-production-exemplar-notes p {
  margin: 0;
  padding: 4px 6px;
  border: 1px solid #fde68a;
  border-radius: 4px;
  background: #fffbeb;
  color: #92400e;
  font-size: 7px;
  font-weight: 790;
  line-height: 1.18;
}


.steel-product-assembly-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.steel-product-assembly-controls[hidden] {
  display: none !important;
}

.steel-product-assembly-controls .steel-product-wall-switch {
  min-width: 190px;
}

.steel-product-assembly-view {
  position: relative;
  min-height: clamp(430px, calc(100vh - 255px), 720px);
  background: #f8fafc;
  border-radius: 8px;
  overflow: hidden;
}

.steel-product-assembly-view[hidden] {
  display: none !important;
}

.steel-product-assembly-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.steel-product-assembly-canvas:active {
  cursor: grabbing;
}

.steel-product-assembly-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

.steel-product-assembly-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: 14px;
  font-weight: 750;
  text-align: center;
}

.steel-product-assembly-empty[hidden] {
  display: none !important;
}

.steel-product-assembly-overlay {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  display: grid;
  gap: 6px;
  max-width: min(340px, calc(100% - 20px));
  pointer-events: none;
}

.steel-product-assembly-overlay[hidden] {
  display: none !important;
}

.steel-product-assembly-overlay div {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(4px);
}

.steel-product-assembly-overlay div.is-opening {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.24);
}

.steel-product-assembly-overlay strong {
  color: #172033;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.steel-product-assembly-overlay span {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.steel-3d-opening-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.steel-3d-opening-overlay[hidden] {
  display: none !important;
}

.steel-3d-opening-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.steel-3d-opening-marker {
  opacity: calc(.46 * var(--steel-opening-view-opacity, 1));
}

.steel-3d-opening-face {
  fill: rgba(96, 165, 250, .10);
  stroke: rgba(37, 99, 235, .26);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.steel-3d-opening-marker.is-window .steel-3d-opening-face {
  fill: rgba(45, 212, 191, .11);
  stroke: rgba(13, 148, 136, .28);
}

.steel-3d-opening-marker.is-door .steel-3d-opening-face {
  fill: rgba(251, 191, 36, .10);
  stroke: rgba(217, 119, 6, .26);
}

.steel-3d-opening-text {
  fill: rgba(15, 23, 42, .58);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(255, 255, 255, .62);
  stroke-linejoin: round;
  stroke-width: 2px;
}

.steel-3d-opening-label {
  font-size: 9px;
  font-weight: 720;
  text-transform: uppercase;
}

.steel-3d-opening-dim {
  font-size: 10px;
  font-weight: 650;
}

.steel-3d-opening-marker.is-compact .steel-3d-opening-label {
  display: none;
}

.steel-3d-opening-marker.is-text-hidden .steel-3d-opening-text {
  opacity: 0;
}

.steel-product-assembly-list {
  display: grid;
  gap: 6px;
}

.steel-product-assembly-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #dbe7ee;
  border-radius: 7px;
  background: #f8fbfd;
}

.steel-product-assembly-row span {
  color: #475569;
  font-size: 12px;
  font-weight: 760;
}

.steel-product-assembly-row strong {
  color: #172033;
  font-size: 13px;
  font-weight: 850;
}

.steel-product-assembly-row span small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
}

.steel-product-assembly-row--ok {
  border-color: #b7eadf;
  background: #f0fdfa;
}

.steel-product-assembly-row--input_ready {
  border-color: #c8ddff;
  background: #f4f8ff;
}

.steel-product-assembly-row--needs_attention,
.steel-product-assembly-row--pending_confirmation {
  border-color: #f2d6a6;
  background: #fffaf0;
}

.steel-product-assembly-row--planned {
  border-color: #dbe7ee;
  background: #f8fbfd;
}

.steel-product-assembly-validation.is-error {
  border-color: #fecaca;
  background: #fff7f7;
}

.steel-product-assembly-validation-details {
  color: #334155;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  padding: 8px 0 0;
}

.steel-product-assembly-validation-details p {
  margin: 0;
}

.steel-product-assembly-validation-details ul {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 1180px) {
  .steel-product-creator-layout {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .steel-product-creator-layout {
    grid-template-columns: 1fr;
  }

  .steel-product-creator-preview-canvas svg {
    height: 520px;
  }
}

@media (max-width: 760px) {
  .steel-product-picker,
  .steel-product-summary-details dl {
    grid-template-columns: 1fr;
  }

  .steel-product-creator-preview-head {
    align-items: flex-start;
    flex-direction: column;
  }
}



.steel-product-dimensions-summary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.steel-product-dimensions-summary div {
  background: #f8fafc;
  border: 1px solid #e1e8f0;
  border-radius: 6px;
  padding: 8px;
}

.steel-product-dimensions-summary dt {
  color: #64748b;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.steel-product-dimensions-summary dd {
  color: #172033;
  font-size: 14px;
  font-weight: 850;
  margin: 2px 0 0;
}

@media (max-width: 760px) {
  .steel-product-dimensions-summary {
    grid-template-columns: 1fr;
  }
}

/* Kreator dark mode overrides */
:root[data-theme="dark"] .steel-product-generator,
:root[data-theme="dark"] .steel-product-picker-card,
:root[data-theme="dark"] .steel-product-steps,
:root[data-theme="dark"] .steel-product-creator-card,
:root[data-theme="dark"] .steel-product-creator-preview,
:root[data-theme="dark"] .steel-product-summary-details,
:root[data-theme="dark"] .steel-product-creator-actions {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
  color: var(--ink);
}

:root[data-theme="dark"] .steel-product-generator__head h2,
:root[data-theme="dark"] .steel-product-creator-head h1,
:root[data-theme="dark"] .steel-product-creator-card-head h2,
:root[data-theme="dark"] .steel-product-creator-preview-head h2,
:root[data-theme="dark"] .steel-product-picker-card strong,
:root[data-theme="dark"] .steel-product-module-summary strong,
:root[data-theme="dark"] .steel-product-front-summary strong,
:root[data-theme="dark"] .steel-product-summary-details dd,
:root[data-theme="dark"] .steel-product-dimensions-summary dd,
:root[data-theme="dark"] .steel-product-assembly-row strong {
  color: var(--ink);
}

:root[data-theme="dark"] .steel-product-generator__head p,
:root[data-theme="dark"] .steel-product-generator__status,
:root[data-theme="dark"] .steel-product-muted,
:root[data-theme="dark"] .steel-product-picker-card small,
:root[data-theme="dark"] .steel-product-preview-orientation,
:root[data-theme="dark"] .steel-product-creator-optional summary > small,
:root[data-theme="dark"] .steel-product-summary-details dt,
:root[data-theme="dark"] .steel-product-summary-details summary,
:root[data-theme="dark"] .steel-product-dimensions-summary dt,
:root[data-theme="dark"] .steel-product-assembly-row span {
  color: var(--muted);
}

:root[data-theme="dark"] .steel-product-generator label,
:root[data-theme="dark"] .steel-product-generator__optional summary,
:root[data-theme="dark"] .steel-product-creator-form label,
:root[data-theme="dark"] .steel-product-creator-toggle,
:root[data-theme="dark"] .steel-product-module-summary,
:root[data-theme="dark"] .steel-product-front-summary,
:root[data-theme="dark"] .steel-product-assembly-validation-details {
  color: var(--muted-strong);
}

:root[data-theme="dark"] .steel-product-generator input,
:root[data-theme="dark"] .steel-product-generator select,
:root[data-theme="dark"] .steel-product-creator-form input,
:root[data-theme="dark"] .steel-product-creator-form select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

:root[data-theme="dark"] .steel-product-generator input:focus,
:root[data-theme="dark"] .steel-product-generator select:focus,
:root[data-theme="dark"] .steel-product-creator-form input:focus,
:root[data-theme="dark"] .steel-product-creator-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
  outline: none;
}

:root[data-theme="dark"] .steel-product-picker-icon {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

:root[data-theme="dark"] .steel-product-picker-icon path {
  stroke: var(--accent);
}

:root[data-theme="dark"] .steel-product-picker-card.is-active,
:root[data-theme="dark"] .steel-product-picker-card:hover:not(:disabled),
:root[data-theme="dark"] .steel-product-picker-card:focus-visible:not(:disabled),
:root[data-theme="dark"] .steel-product-steps button.is-active,
:root[data-theme="dark"] .steel-product-wall-switch button.is-active,
:root[data-theme="dark"] .steel-product-wall-switch button:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

:root[data-theme="dark"] .steel-product-picker-card:disabled {
  background: var(--surface-soft);
  color: var(--muted);
  opacity: .62;
}

:root[data-theme="dark"] .steel-product-picker-card:disabled .steel-product-picker-icon,
:root[data-theme="dark"] .steel-product-wall-switch button,
:root[data-theme="dark"] .steel-tool-button--secondary,
:root[data-theme="dark"] .steel-product-generator__preview,
:root[data-theme="dark"] .steel-product-module-summary,
:root[data-theme="dark"] .steel-product-front-summary,
:root[data-theme="dark"] .steel-product-summary-strip,
:root[data-theme="dark"] .steel-product-summary-details div,
:root[data-theme="dark"] .steel-product-dimensions-summary div,
:root[data-theme="dark"] .steel-product-assembly-row {
  background: var(--surface-soft);
  border-color: var(--line);
  color: var(--ink);
}

:root[data-theme="dark"] .steel-product-assembly-row span small {
  color: var(--muted);
}

:root[data-theme="dark"] .steel-product-assembly-row--ok {
  border-color: color-mix(in srgb, var(--success) 40%, var(--line));
  background: color-mix(in srgb, var(--success) 12%, var(--surface-soft));
}

:root[data-theme="dark"] .steel-product-assembly-row--input_ready {
  border-color: color-mix(in srgb, var(--info) 35%, var(--line));
  background: color-mix(in srgb, var(--info) 10%, var(--surface-soft));
}

:root[data-theme="dark"] .steel-product-assembly-row--needs_attention,
:root[data-theme="dark"] .steel-product-assembly-row--pending_confirmation {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
  background: color-mix(in srgb, var(--warn) 12%, var(--surface-soft));
}

:root[data-theme="dark"] .steel-product-production-card-panel {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--ink);
}

:root[data-theme="dark"] .steel-product-production-card-panel h3,
:root[data-theme="dark"] .steel-product-production-card-panel p strong {
  color: var(--ink);
}

:root[data-theme="dark"] .steel-product-production-card-panel p,
:root[data-theme="dark"] .steel-product-production-card-panel p span,
:root[data-theme="dark"] .steel-product-production-card-panel p small {
  color: var(--muted);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas,
:root[data-theme="dark"] .steel-product-generator__preview svg,
:root[data-theme="dark"] .steel-product-creator-preview-canvas svg,

:root[data-theme="dark"] .offer-garage-stage--creator { background: linear-gradient(180deg, #111c29, #0f1722); }
:root[data-theme="dark"] .offer-visual-preview { background: transparent; }
:root[data-theme="dark"] .steel-product-assembly-view {
  background: #0f1724;
  border-color: var(--line);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-member {
  fill: rgba(83, 199, 181, .18);
  stroke: #75d7c7;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-member.is-collision {
  fill: rgba(248, 113, 113, .28);
  filter: drop-shadow(0 0 8px rgba(248, 113, 113, .72));
  stroke: #f87171;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-hole {
  fill: #111827;
  stroke: #fbbf24;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-hole.is-invalid {
  fill: rgba(248, 113, 113, .22);
  stroke: #f87171;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-hole-label-line {
  stroke: #fbbf24;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-hole-label {
  fill: #fef3c7;
  stroke: #111827;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-module-box {
  fill: rgba(83, 199, 181, .08);
  stroke: #75d7c7;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-module-box.is-module-2 {
  fill: rgba(147, 197, 253, .08);
  stroke: #93c5fd;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-module-box.is-module-3 {
  fill: rgba(251, 146, 60, .09);
  stroke: #fb923c;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-module-joint,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-guide.is-join {
  stroke: #f87171;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-opening,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-gate-zone {
  fill: rgba(147, 197, 253, .10);
  stroke: #93c5fd;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-door-opening {
  fill: rgba(248, 113, 113, .10);
  stroke: #f87171;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-guide.is-front,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-dimension-plan-front,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-preview-dimension {
  stroke: #93c5fd;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-guide.is-rear {
  stroke: var(--muted);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-dimension-plan-outer,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-layout-outline {
  fill: #111c2b;
  stroke: #7d8da3;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-dimension-plan-body {
  fill: rgba(83, 199, 181, .13);
  stroke: #75d7c7;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-layout-edge {
  stroke: var(--ink);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-support.is-side {
  stroke: #75d7c7;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-support.is-truss {
  stroke: #93c5fd;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-support-dot {
  fill: #0f1724;
  stroke: var(--ink);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-guide-label,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-axis-label,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-preview-dimension-label,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-dimension-plan-label,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-dimension-plan-title,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-support-label,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-layout-axis,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-layout-dim-label,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-post-label,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-preview-empty,
:root[data-theme="dark"] .steel-product-generator-guide-label,
:root[data-theme="dark"] .steel-product-generator-axis-label {
  fill: var(--ink);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-layout-small,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-dimension-plan-label.is-muted {
  fill: var(--muted);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-section-ground {
  stroke: #7d8da3;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-section-side-top {
  stroke: #75d7c7;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-section-roof {
  stroke: #93c5fd;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-section-wall,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-section-rear {
  stroke: var(--ink);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-dock {
  fill: rgba(83, 199, 181, .16);
  stroke: #75d7c7;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-dock.is-guided {
  fill: rgba(147, 197, 253, .13);
  stroke: #93c5fd;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-dock-shelf,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-docking-truss {
  stroke: #75d7c7;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-docking-arrow {
  stroke: #f87171;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-dock-label,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-docking-title {
  fill: var(--ink);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-docking-note {
  fill: var(--muted);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-section-label {
  fill: var(--ink);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-roof-section-label.is-roof {
  fill: #93c5fd;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-door-label,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-module-axis-label {
  fill: #fca5a5;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-gate-label {
  fill: #bfdbfe;
}

:root[data-theme="dark"] .steel-product-assembly-overlay div {
  background: rgba(24, 34, 48, .92);
  border-color: rgba(148, 163, 184, .36);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .30);
}

:root[data-theme="dark"] .steel-product-assembly-overlay strong {
  color: var(--ink);
}

:root[data-theme="dark"] .steel-product-assembly-overlay span {
  color: var(--muted-strong);
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-cladding {
  fill: #2dd4bf;
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, .22));
  stroke: #5eead4;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-cladding-line {
  stroke: #99f6e4;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-generator-cladding-label {
  fill: #ccfbf1;
}

:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-dimension-plan-label,
:root[data-theme="dark"] .steel-product-creator-preview-canvas .steel-product-dimension-plan-title {
  stroke: rgba(9, 16, 27, .94);
}

:root[data-theme="dark"] .steel-3d-opening-marker {
  opacity: calc(.40 * var(--steel-opening-view-opacity, 1));
}

:root[data-theme="dark"] .steel-3d-opening-face {
  fill: rgba(96, 165, 250, .075);
  stroke: rgba(147, 197, 253, .22);
}

:root[data-theme="dark"] .steel-3d-opening-marker.is-window .steel-3d-opening-face {
  fill: rgba(45, 212, 191, .08);
  stroke: rgba(94, 234, 212, .24);
}

:root[data-theme="dark"] .steel-3d-opening-marker.is-door .steel-3d-opening-face {
  fill: rgba(251, 191, 36, .08);
  stroke: rgba(251, 191, 36, .24);
}

:root[data-theme="dark"] .steel-3d-opening-text {
  fill: rgba(226, 232, 240, .56);
  stroke: rgba(9, 16, 27, .72);
}

:root[data-theme="dark"] .steel-product-assembly-validation.is-error {
  background: var(--bad-bg);
  border-color: var(--bad-border);
}

.equipment-history { margin: 0 0 8px; padding: 8px 10px; border: 1px solid #d9e2ec; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.equipment-history__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.equipment-history__head .material-kicker { margin: 0 0 1px; color: #475569; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.equipment-history__head h2 { margin: 0; color: #111827; font-size: 15px; font-weight: 800; line-height: 1.18; }
.equipment-history__count { flex: 0 0 auto; color: #64748b; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.equipment-history__top-action { display: flex; justify-content: flex-start; margin: 0 0 6px; }
.equipment-history__list, .equipment-history__scroll { border: 1px solid #d9e2ec; border-radius: 8px; overflow: hidden; background: #fff; }
.equipment-history__list[hidden], .equipment-history__scroll[hidden], .equipment-history__top-action[hidden] { display: none; }
.equipment-history__scroll { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.equipment-history-day { padding: 6px 10px 3px; color: #64748b; background: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.equipment-history-row { display: flex; align-items: center; justify-content: flex-start; min-height: 40px; padding: 6px 10px; gap: 8px; border-bottom: 1px solid #e5edf5; background: #fff; color: #111827; text-decoration: none; transition: background .16s ease, border-color .16s ease, opacity .16s ease; }
.equipment-history-row:last-child { border-bottom: 0; }
.equipment-history-row:hover { background: #f8fafc; }
.equipment-history-row:focus-visible { outline: 2px solid rgba(4, 120, 87, .34); outline-offset: -2px; }
.equipment-history-row__icon { flex: 0 0 26px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.equipment-history-row__icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.equipment-history-row__icon--created, .equipment-history-row__icon--issue, .equipment-history-row__icon--return { background: #ecfdf5; color: #047857; }
.equipment-history-row__icon--location, .equipment-history-row__icon--updated { background: #eff6ff; color: #1d4ed8; }
.equipment-history-row__icon--service, .equipment-history-row__icon--status, .equipment-history-row__icon--consumed { background: #fff7ed; color: #c2410c; }
.equipment-history-row__icon--disposal { background: #f8fafc; color: #64748b; }
.equipment-history-row__icon--assignment { background: #f5f3ff; color: #6d28d9; }
.equipment-history-action { flex: 0 0 auto; width: fit-content; display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border: 1px solid #d9e2ec; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.equipment-history-action--created { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.equipment-history-action--location, .equipment-history-action--updated { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.equipment-history-action--service, .equipment-history-action--status, .equipment-history-action--consumed { border-color: #fed7aa; background: #fff7ed; color: #c2410c; }
.equipment-history-action--disposal { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
.equipment-history-action--assignment { border-color: #ddd6fe; background: #f5f3ff; color: #6d28d9; }
.equipment-history-action--issue, .equipment-history-action--return { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.equipment-history:not(.is-expanded) .equipment-history__list { opacity: .58; transition: opacity .16s ease; }
.equipment-history:not(.is-expanded) .equipment-history__list:hover { opacity: .78; }
.equipment-history-row__title { flex: 0 1 auto; max-width: min(320px, 28vw); display: block; min-width: 0; color: #111827; font-size: 12.5px; font-weight: 760; line-height: 1.16; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipment-history-row__context, .equipment-history-row__actor, .equipment-history-row__time { display: block; min-width: 0; overflow: hidden; color: #64748b; font-size: 10.5px; font-weight: 580; line-height: 1.16; text-overflow: ellipsis; white-space: nowrap; }
.equipment-history-row__context { flex: 0 1 auto; max-width: min(560px, 42vw); color: #475569; font-weight: 610; }
.equipment-history-row__target { color: #334155; font-weight: 690; }
.equipment-history-row__actor { flex: 0 1 auto; max-width: min(260px, 20vw); text-align: left; }
.equipment-history-row__time { flex: 0 0 auto; min-width: 34px; color: #64748b; font-weight: 690; text-align: left; }
.equipment-history-row__detail { color: #64748b; font-weight: 520; }
.equipment-history__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #d9e2ec; border-radius: 8px; background: #fff; color: #047857; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease; }
.equipment-history__toggle--wide { width: 100%; min-height: 32px; margin-top: 6px; padding: 5px 9px; }
.equipment-history:not(.is-expanded) .equipment-history__toggle--wide { opacity: .52; }
.equipment-history:not(.is-expanded) .equipment-history__toggle--wide:hover { opacity: .78; }
.equipment-history__toggle--compact { min-height: 28px; padding: 4px 8px; }
.equipment-history__toggle:hover { border-color: #cbd5e1; background: #f8fafc; color: #047857; }
.equipment-history__toggle:focus { outline: none; }
.equipment-history__toggle:focus-visible { box-shadow: 0 0 0 3px rgba(4, 120, 87, .16); }
.equipment-history__toggle-icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.equipment-history__empty { margin: 0; padding: 5px 0 1px; color: #64748b; font-size: 12px; }
:root[data-theme="dark"] .equipment-history,
:root[data-theme="dark"] .equipment-history__list,
:root[data-theme="dark"] .equipment-history__scroll,
:root[data-theme="dark"] .equipment-history-day,
:root[data-theme="dark"] .equipment-history-row { background: #111827; border-color: #334155; color: #e5edf6; }
:root[data-theme="dark"] .equipment-history-row:hover,
:root[data-theme="dark"] .equipment-history__toggle:hover { background: #172033; }
:root[data-theme="dark"] .equipment-history-row__title,
:root[data-theme="dark"] .equipment-history-row__target { color: #e5edf6; }
:root[data-theme="dark"] .equipment-history-row__context,
:root[data-theme="dark"] .equipment-history-row__actor,
:root[data-theme="dark"] .equipment-history-row__time,
:root[data-theme="dark"] .equipment-history-row__detail,
:root[data-theme="dark"] .equipment-history-day { color: #a9b8cc; }
:root[data-theme="dark"] .equipment-history__toggle { background: #111827; border-color: #334155; color: #7dd3ae; }
@media (max-width: 760px) { .equipment-history { padding: 10px; } .equipment-history__head { align-items: flex-start; flex-direction: column; gap: 3px; } .equipment-history-row { align-items: flex-start; flex-wrap: wrap; gap: 6px 8px; min-height: 48px; padding: 7px 9px; } .equipment-history-action { align-self: start; } .equipment-history-row__title, .equipment-history-row__context, .equipment-history-row__actor, .equipment-history-row__time { flex-basis: calc(100% - 34px); max-width: none; text-align: left; white-space: normal; } }

.ksef-warehouse-no-pz-form {
  display: inline-flex;
  margin: 0;
}

.ksef-warehouse-no-pz-button {
  font-size: 0.82rem;
  padding: 0.42rem 0.64rem;
}

.ksef-warehouse-status-actions {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.ksef-warehouse-status-actions .ksef-warehouse-action-button,
.ksef-warehouse-status-actions .ksef-warehouse-no-pz-button {
  min-height: 30px;
  padding: 0.36rem 0.62rem;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.1;
}

.ksef-warehouse-status-actions .ksef-warehouse-no-pz-button {
  border-color: var(--border-subtle, #dfe6ee) !important;
  background: var(--panel, #fff) !important;
  color: var(--muted-strong, #475569) !important;
  font-weight: 650;
}

.ksef-warehouse-status-actions .ksef-warehouse-no-pz-button:hover {
  border-color: var(--warn-border, #f0c36f) !important;
  background: var(--warn-bg, #fff8e7) !important;
  color: var(--warn, #b7791f) !important;
}

[data-steel-product-current-step="summary"] [data-steel-hide-on-assembly],
[data-steel-product-current-step="stability"] [data-steel-hide-on-assembly] {
  display: none !important;
}

.telegram-settings-card { padding: 14px; }
.telegram-settings-grid, .telegram-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.telegram-settings-grid p, .telegram-rule-grid p { margin: 0; }
.telegram-settings-grid .field-full, .telegram-rule-grid .field-full { grid-column: 1 / -1; }
.telegram-settings-grid input[type="text"], .telegram-settings-grid input[type="password"], .telegram-rule-grid input[type="time"] { width: 100%; }
.telegram-token-state { display: block; margin-top: 4px; color: #64748b; font-size: 12px; line-height: 1.35; }
.telegram-secret-box { display: grid; gap: 7px; padding: 10px; border: 1px solid #d7dde5; border-radius: 8px; background: #fbfcfd; }
.telegram-secret-label { color: #475569; font-size: 12px; font-weight: 750; line-height: 1; }
.telegram-secret-mask { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; color: #334155; font-size: 15px; font-weight: 750; letter-spacing: .08em; }
.telegram-secret-mask .status-badge { letter-spacing: 0; }
.telegram-secret-edit summary { display: inline-flex; width: fit-content; cursor: pointer; color: #1f7668; font-size: 12px; font-weight: 750; line-height: 1.2; }
.telegram-secret-edit p { margin-top: 8px; }
.telegram-rule-head { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.telegram-settings-actions { justify-content: flex-end; margin-top: 14px; }
.telegram-log-card { margin-top: 12px; }
@media (max-width: 900px) { .telegram-settings-grid, .telegram-rule-grid { grid-template-columns: 1fr; } }

.employee-leave-balance-card { background: #fbfdfc; }
.employee-leave-balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.employee-leave-balance-grid > div { padding: 9px 10px; border: 1px solid #dbe7e2; border-radius: 7px; background: #fff; }
.employee-leave-balance-grid span { display: block; margin-bottom: 3px; color: #64748b; font-size: 10px; font-weight: 760; letter-spacing: .035em; text-transform: uppercase; }
.employee-leave-balance-grid strong { color: #17232b; font-size: 17px; font-weight: 780; }
.employee-leave-balance-note { margin: 10px 0 0; color: #64748b; font-size: 13px; font-weight: 600; }
.employee-leave-balance-note a { color: var(--accent); font-weight: 760; text-decoration: none; }
.employee-leave-balance-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.employee-leave-guidance { display: grid; gap: 4px; margin-top: 10px; padding: 10px 12px; border: 1px solid #dbe7e2; border-radius: 8px; background: #f8fbfa; color: #475569; font-size: 13px; line-height: 1.45; }
.employee-leave-guidance strong { color: #1f2937; font-size: 12px; font-weight: 780; letter-spacing: .025em; text-transform: uppercase; }
.employee-leave-guidance span { max-width: 980px; }
.employee-leave-balance-grid--compact { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
.employee-leave-details { margin-top: 10px; border: 1px solid #dbe7e2; border-radius: 8px; background: #fff; overflow: hidden; }
.employee-leave-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; color: #334155; cursor: pointer; font-size: 13px; font-weight: 760; list-style: none; }
.employee-leave-details summary::-webkit-details-marker { display: none; }
.employee-leave-details summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid #8aa0b5; border-bottom: 2px solid #8aa0b5; transform: rotate(45deg); transition: transform .16s ease; }
.employee-leave-details[open] summary::after { transform: rotate(-135deg); }
.employee-leave-details summary small { margin-left: auto; color: #64748b; font-size: 12px; font-weight: 650; }
.employee-leave-details .employee-light-table { margin: 0; border-width: 1px 0 0; border-radius: 0; }
.employee-leave-actions { justify-content: flex-start; gap: 8px; margin-top: 12px; }
.employee-absence-workday-preview { display: grid; gap: 3px; margin: 2px 0 0; padding: 10px 12px; border: 1px solid #dbe7e2; border-radius: 8px; background: #f8fbfa; color: #475569; line-height: 1.35; }
.employee-absence-workday-preview[hidden] { display: none; }
.employee-absence-workday-preview span { color: #64748b; font-size: 11px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.employee-absence-workday-preview strong { color: #126b5f; font-size: 13px; font-weight: 850; }
.employee-absence-workday-preview small { color: #64748b; font-size: 12px; font-weight: 650; }
.employee-absence-workday-preview.is-error { border-color: #fecaca; background: #fff7f7; }
.employee-absence-workday-preview.is-error strong { color: #b42318; }
@media (max-width: 760px) { .employee-leave-balance-grid--compact { grid-template-columns: 1fr 1fr; } .employee-leave-details summary { align-items: flex-start; flex-direction: column; } .employee-leave-details summary small { margin-left: 0; } }


/* Tutorial */
.tutorial-page { display: grid; gap: 14px; }
.tutorial-page a { text-decoration: none; }
.tutorial-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: stretch; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-soft); }
.tutorial-hero--visual { overflow: hidden; }
.tutorial-hero h1, .tutorial-module-hero h1 { margin: 0; color: var(--ink); font-size: 30px; line-height: 1.1; letter-spacing: 0; }
.tutorial-hero p, .tutorial-module-hero p { max-width: 780px; margin: 8px 0 0; color: var(--muted-strong); line-height: 1.5; }
.tutorial-hero-map { display: grid; gap: 8px; align-content: center; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: linear-gradient(135deg, var(--surface-soft), var(--surface)); }
.tutorial-map-node, .tutorial-map-branch span { display: flex; align-items: center; justify-content: center; min-height: 42px; border: 1px solid var(--accent-border); border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 850; }
.tutorial-map-node--main { min-height: 56px; color: var(--ink); background: var(--surface); }
.tutorial-map-branch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tutorial-map-branch span { min-height: 36px; font-size: 12px; }
.tutorial-overview-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr); gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.tutorial-overview-card h2 { margin: 0; color: var(--ink); font-size: 22px; }
.tutorial-overview-card p { margin: 7px 0 0; color: var(--muted-strong); line-height: 1.45; }
.tutorial-mini-flow { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; gap: 7px; align-items: center; }
.tutorial-mini-flow span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-soft); color: var(--ink); font-size: 13px; font-weight: 800; text-align: center; }
.tutorial-mini-flow strong { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-module-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tutorial-module-tile { display: grid; gap: 8px; min-height: 162px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-soft); color: var(--ink); transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.tutorial-module-tile:hover { transform: translateY(-1px); border-color: var(--accent-border); background: var(--surface-hover); }
.tutorial-module-tile strong { font-size: 16px; }
.tutorial-module-tile span:last-child { color: var(--muted-strong); font-size: 13px; line-height: 1.35; }
.tutorial-tile-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.tutorial-tile-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tutorial-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; align-items: start; }
.tutorial-side { position: sticky; top: 72px; display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-soft); }
.tutorial-side a { display: block; padding: 8px 10px; border-radius: 7px; color: var(--muted-strong); font-size: 13px; font-weight: 780; }
.tutorial-side a:hover, .tutorial-side a.is-active { background: var(--accent-soft); color: var(--accent); }
.tutorial-side__back { margin-bottom: 5px; border: 1px solid var(--border-subtle); background: var(--surface-soft); color: var(--ink) !important; }
.tutorial-module-content { display: grid; gap: 12px; }
.tutorial-module-hero, .tutorial-visual-card, .tutorial-section-grid > div { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-soft); }
.tutorial-module-hero { padding: 18px; }
.tutorial-visual-card { padding: 16px; overflow: hidden; }
.tutorial-section-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tutorial-section-title h2 { margin: 0; color: var(--ink); font-size: 18px; line-height: 1.2; }
.tutorial-section-title .material-kicker { margin: 0; }
.tutorial-visual-card--actions { padding-bottom: 14px; }
.tutorial-warehouse-actions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tutorial-action-card { display: grid; align-content: start; gap: 7px; min-height: 132px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); color: var(--ink); }
.tutorial-action-card strong { font-size: 14px; line-height: 1.2; }
.tutorial-action-card em { color: var(--muted-strong); font-size: 12px; line-height: 1.35; font-style: normal; }
.tutorial-action-icon { position: relative; display: inline-flex; width: 34px; height: 34px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.tutorial-action-icon::before, .tutorial-action-icon::after { content: ""; position: absolute; box-sizing: border-box; }
.tutorial-action-icon--search::before { left: 9px; top: 8px; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 999px; }
.tutorial-action-icon--search::after { left: 20px; top: 20px; width: 8px; height: 2px; background: currentColor; transform: rotate(45deg); border-radius: 999px; }
.tutorial-action-icon--in::before, .tutorial-action-icon--out::before { left: 8px; top: 10px; width: 18px; height: 14px; border: 2px solid currentColor; border-radius: 4px; }
.tutorial-action-icon--in::after { left: 14px; top: 4px; width: 8px; height: 12px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.tutorial-action-icon--out::after { left: 12px; top: 3px; width: 8px; height: 12px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(-45deg); }
.tutorial-action-icon--move::before { left: 7px; top: 15px; width: 20px; height: 3px; background: currentColor; border-radius: 999px; }
.tutorial-action-icon--move::after { right: 7px; top: 11px; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.tutorial-action-icon--return::before { left: 9px; top: 10px; width: 16px; height: 12px; border: 2px solid currentColor; border-left: 0; border-radius: 0 999px 999px 0; }
.tutorial-action-icon--return::after { left: 7px; top: 9px; width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.tutorial-action-icon--fix::before { left: 9px; top: 9px; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 999px; }
.tutorial-action-icon--fix::after { left: 15px; top: 5px; width: 4px; height: 24px; background: var(--surface-soft); transform: rotate(45deg); }
.tutorial-warehouse-lifecycle { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr; gap: 8px; align-items: center; }
.tutorial-warehouse-lifecycle div { min-height: 92px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); text-align: center; }
.tutorial-warehouse-lifecycle span { color: var(--accent); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-warehouse-lifecycle strong { color: var(--ink); font-size: 13px; line-height: 1.25; }
.tutorial-warehouse-lifecycle b { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-warehouse-row-map { display: grid; gap: 12px; }
.tutorial-warehouse-row-map__row { display: grid; grid-template-columns: 1.1fr .65fr .8fr 1fr; gap: 8px; }
.tutorial-warehouse-row-map__row div, .tutorial-warehouse-callouts div { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-warehouse-row-map__row div { display: grid; gap: 4px; padding: 12px; min-height: 90px; }
.tutorial-warehouse-row-map small { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-warehouse-row-map strong { color: var(--ink); font-size: 16px; }
.tutorial-warehouse-row-map span { color: var(--muted-strong); font-size: 12px; }
.tutorial-warehouse-callouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tutorial-warehouse-callouts div { padding: 10px; }
.tutorial-warehouse-callouts strong { display: block; margin-bottom: 4px; color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-warehouse-callouts span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-section-grid--warehouse { grid-template-columns: 1.2fr .8fr; }
.tutorial-warehouse-project-flow { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; gap: 8px; align-items: center; }
.tutorial-warehouse-project-flow span { min-height: 62px; display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 850; text-align: center; }
.tutorial-warehouse-project-flow b { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-rule-card { border-color: var(--warning-border, var(--accent-border)) !important; background: var(--warning-soft, var(--surface)) !important; }
.tutorial-rule-card p { margin: 0; color: var(--muted-strong); line-height: 1.45; }
.tutorial-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tutorial-section-grid > div { padding: 14px; }
.tutorial-section-grid h2 { margin: 0 0 10px; color: var(--ink); font-size: 18px; }
.tutorial-short { margin: 0; color: var(--muted-strong); line-height: 1.5; }
.tutorial-checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tutorial-checklist li { position: relative; padding-left: 20px; color: var(--muted-strong); line-height: 1.4; }
.tutorial-checklist li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.tutorial-screen { position: relative; display: grid; gap: 8px; min-height: 260px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-screen__bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tutorial-screen__bar span, .tutorial-screen__row { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.tutorial-screen__bar span { padding: 9px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.tutorial-screen__row { display: grid; grid-template-columns: 1.1fr .7fr .7fr; gap: 8px; align-items: center; padding: 12px; color: var(--ink); }
.tutorial-screen__row.is-highlighted { border-color: var(--accent-border); background: var(--accent-soft); }
.tutorial-screen__row span, .tutorial-screen__row em { color: var(--muted-strong); font-style: normal; font-size: 13px; }
.tutorial-hotspot { position: absolute; max-width: 210px; border: 1px solid var(--accent-border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-soft); color: var(--ink); }
.tutorial-hotspot summary { cursor: pointer; padding: 7px 9px; color: var(--accent); font-size: 12px; font-weight: 850; }
.tutorial-hotspot p { margin: 0; padding: 0 9px 9px; color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-hotspot--one { right: 18px; top: 90px; }
.tutorial-hotspot--two { right: 44px; bottom: 18px; }
.tutorial-flow { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr; gap: 8px; align-items: center; }
.tutorial-flow span { min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 8px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-soft); color: var(--ink); font-weight: 800; text-align: center; }
.tutorial-flow b { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-project-map { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.tutorial-project-map__center { grid-column: 1 / -1; min-height: 92px; display: grid; place-items: center; gap: 4px; border: 2px solid var(--accent); border-radius: 14px; background: var(--accent-soft); color: var(--accent); text-align: center; }
.tutorial-project-map__center strong { color: var(--accent); font-size: 24px; font-weight: 900; }
.tutorial-project-map__center span { color: var(--muted-strong); font-size: 13px; font-weight: 750; }
.tutorial-project-node { position: relative; min-height: 92px; display: grid; align-content: center; gap: 5px; padding: 14px 14px 14px 42px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-soft); }
.tutorial-project-node::before { content: ""; position: absolute; left: 14px; top: 18px; width: 16px; height: 16px; border: 2px solid var(--accent); border-radius: 6px; background: var(--accent-soft); }
.tutorial-project-node--client::before { border-radius: 999px; }
.tutorial-project-node--mail::before { border-radius: 4px; box-shadow: inset 0 -5px 0 var(--accent-soft); }
.tutorial-project-node--docs::before { border-radius: 3px; transform: rotate(2deg); }
.tutorial-project-node--warehouse::before { border-radius: 4px; box-shadow: inset 0 0 0 4px var(--surface-soft); }
.tutorial-project-node--trip::before { width: 18px; height: 12px; top: 20px; border-radius: 4px; }
.tutorial-project-node--status::before { border-radius: 999px; box-shadow: 0 0 0 4px var(--accent-soft); }
.tutorial-project-node strong { color: var(--ink); font-size: 14px; font-weight: 900; }
.tutorial-project-node span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-project-flow { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; gap: 8px; align-items: center; }
.tutorial-project-flow div { min-height: 104px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 12px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-soft); text-align: center; }
.tutorial-project-flow span { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 13px; font-weight: 900; }
.tutorial-project-flow strong { color: var(--ink); font-size: 13px; line-height: 1.25; }
.tutorial-project-flow b { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-project-snapshot { display: grid; grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr)); gap: 8px; }
.tutorial-project-snapshot > div { min-height: 94px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-project-snapshot__main { grid-row: span 2; border-color: var(--accent-border) !important; background: var(--accent-soft) !important; }
.tutorial-project-snapshot small { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-project-snapshot strong { color: var(--ink); font-size: 15px; line-height: 1.25; }
.tutorial-project-snapshot span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-section-grid--project { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutorial-project-source-card { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
.tutorial-rule-card--wide { padding: 16px; }
.tutorial-rule-card--wide h2 { margin: 0 0 8px; color: var(--ink); font-size: 18px; }
.tutorial-task-board, .tutorial-trip-card, .tutorial-mail-layout { display: grid; gap: 10px; }
.tutorial-task-board { grid-template-columns: repeat(3, 1fr); }
.tutorial-task-board div, .tutorial-trip-card div, .tutorial-mail-layout div, .tutorial-people-line span, .tutorial-doc-preview div { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); color: var(--ink); }
.tutorial-task-board div { min-height: 150px; padding: 12px; }
.tutorial-task-board strong, .tutorial-trip-card b { display: block; margin-bottom: 8px; color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tutorial-task-board span, .tutorial-trip-card span, .tutorial-mail-layout span { color: var(--muted-strong); font-size: 13px; }
.tutorial-task-anatomy { display: grid; grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr)); gap: 8px; }
.tutorial-task-anatomy > div { min-height: 94px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-task-anatomy__main { grid-row: span 2; border-color: var(--accent-border) !important; background: var(--accent-soft) !important; }
.tutorial-task-anatomy small, .tutorial-task-lanes strong { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-task-anatomy strong { color: var(--ink); font-size: 15px; line-height: 1.25; }
.tutorial-task-anatomy span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-task-flow { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; gap: 8px; align-items: center; }
.tutorial-task-flow div { min-height: 104px; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 12px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-soft); text-align: center; }
.tutorial-task-flow span { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 13px; font-weight: 900; }
.tutorial-task-flow strong { color: var(--ink); font-size: 13px; line-height: 1.25; }
.tutorial-task-flow em { color: var(--muted-strong); font-size: 12px; font-style: normal; line-height: 1.3; }
.tutorial-task-flow b { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-task-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tutorial-task-lanes div { min-height: 112px; display: grid; align-content: center; gap: 6px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-task-lanes strong { color: var(--accent); }
.tutorial-task-lanes span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-section-grid--tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutorial-task-source-card { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
.tutorial-equipment-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tutorial-equipment-type { position: relative; min-height: 148px; display: grid; align-content: center; gap: 8px; padding: 18px 18px 18px 58px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-soft); }
.tutorial-equipment-type::before { content: ""; position: absolute; left: 18px; top: 24px; width: 24px; height: 24px; border: 2px solid var(--accent); background: var(--accent-soft); }
.tutorial-equipment-type--fixed::before { border-radius: 7px; box-shadow: inset 0 -8px 0 var(--surface-soft); }
.tutorial-equipment-type--consumable::before { border-radius: 999px; box-shadow: 10px 8px 0 -4px var(--accent-soft), 10px 8px 0 -2px var(--accent); }
.tutorial-equipment-type strong { color: var(--ink); font-size: 18px; font-weight: 900; }
.tutorial-equipment-type span { color: var(--muted-strong); font-size: 13px; line-height: 1.35; }
.tutorial-equipment-type em { color: var(--accent); font-size: 12px; font-style: normal; font-weight: 850; line-height: 1.35; }
.tutorial-equipment-snapshot { display: grid; grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr)); gap: 8px; }
.tutorial-equipment-snapshot > div { min-height: 94px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-equipment-snapshot__main { grid-row: span 2; border-color: var(--accent-border) !important; background: var(--accent-soft) !important; }
.tutorial-equipment-snapshot small { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-equipment-snapshot strong { color: var(--ink); font-size: 15px; line-height: 1.25; }
.tutorial-equipment-snapshot span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-equipment-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tutorial-equipment-actions div { min-height: 104px; display: grid; align-content: center; gap: 6px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-equipment-actions strong { color: var(--accent); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-equipment-actions span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-equipment-flow { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; gap: 8px; align-items: center; }
.tutorial-equipment-flow div { min-height: 104px; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 12px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-soft); text-align: center; }
.tutorial-equipment-flow span { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 13px; font-weight: 900; }
.tutorial-equipment-flow strong { color: var(--ink); font-size: 13px; line-height: 1.25; }
.tutorial-equipment-flow b { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-section-grid--equipment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutorial-equipment-source-card { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
.tutorial-people-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tutorial-people-map__center { grid-column: 1 / -1; min-height: 94px; display: grid; place-items: center; gap: 4px; border: 2px solid var(--accent); border-radius: 14px; background: var(--accent-soft); text-align: center; }
.tutorial-people-map__center strong { color: var(--accent); font-size: 24px; font-weight: 900; }
.tutorial-people-map__center span { color: var(--muted-strong); font-size: 13px; font-weight: 750; }
.tutorial-people-node { position: relative; min-height: 104px; display: grid; align-content: center; gap: 5px; padding: 14px 14px 14px 46px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-soft); }
.tutorial-people-node::before { content: ""; position: absolute; left: 14px; top: 20px; width: 18px; height: 18px; border: 2px solid var(--accent); background: var(--accent-soft); }
.tutorial-people-node--presence::before { border-radius: 999px; box-shadow: inset 0 -6px 0 var(--surface-soft); }
.tutorial-people-node--leave::before { border-radius: 5px; box-shadow: inset 0 6px 0 var(--surface-soft); }
.tutorial-people-node--tasks::before { border-radius: 4px; transform: rotate(2deg); }
.tutorial-people-node--trips::before { width: 22px; height: 14px; top: 22px; border-radius: 5px; }
.tutorial-people-node--equipment::before { border-radius: 6px; box-shadow: inset 0 0 0 4px var(--surface-soft); }
.tutorial-people-node--calendar::before { border-radius: 5px; box-shadow: inset 0 5px 0 var(--accent); }
.tutorial-people-node strong { color: var(--ink); font-size: 14px; font-weight: 900; }
.tutorial-people-node span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-people-snapshot { display: grid; grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr)); gap: 8px; }
.tutorial-people-snapshot > div { min-height: 94px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-people-snapshot__main { grid-row: span 2; border-color: var(--accent-border) !important; background: var(--accent-soft) !important; }
.tutorial-people-snapshot small { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-people-snapshot strong { color: var(--ink); font-size: 15px; line-height: 1.25; }
.tutorial-people-snapshot span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-people-flow { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; gap: 8px; align-items: center; }
.tutorial-people-flow div { min-height: 104px; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 12px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-soft); text-align: center; }
.tutorial-people-flow span { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 13px; font-weight: 900; }
.tutorial-people-flow strong { color: var(--ink); font-size: 13px; line-height: 1.25; }
.tutorial-people-flow em { color: var(--muted-strong); font-size: 12px; font-style: normal; line-height: 1.3; }
.tutorial-people-flow b { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-people-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tutorial-people-links div { min-height: 112px; display: grid; align-content: center; gap: 6px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-people-links strong { color: var(--accent); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-people-links span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-section-grid--people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutorial-people-source-card { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
.tutorial-fleet-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tutorial-fleet-map__center { grid-column: 1 / -1; min-height: 94px; display: grid; place-items: center; gap: 4px; border: 2px solid var(--accent); border-radius: 14px; background: var(--accent-soft); text-align: center; }
.tutorial-fleet-map__center strong { color: var(--accent); font-size: 24px; font-weight: 900; }
.tutorial-fleet-map__center span { color: var(--muted-strong); font-size: 13px; font-weight: 750; }
.tutorial-fleet-node { position: relative; min-height: 104px; display: grid; align-content: center; gap: 5px; padding: 14px 14px 14px 46px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-soft); }
.tutorial-fleet-node::before { content: ""; position: absolute; left: 14px; top: 20px; width: 20px; height: 18px; border: 2px solid var(--accent); background: var(--accent-soft); }
.tutorial-fleet-node--insurance::before { border-radius: 4px; box-shadow: inset 0 5px 0 var(--surface-soft); }
.tutorial-fleet-node--inspection::before { border-radius: 999px; box-shadow: inset 0 -5px 0 var(--surface-soft); }
.tutorial-fleet-node--service::before { width: 22px; height: 8px; top: 25px; border-radius: 999px; transform: rotate(-38deg); }
.tutorial-fleet-node--trips::before { width: 24px; height: 14px; top: 22px; border-radius: 5px; }
.tutorial-fleet-node--driver::before { border-radius: 999px; box-shadow: 0 9px 0 -2px var(--accent-soft), 0 9px 0 0 var(--accent); }
.tutorial-fleet-node--status::before { border-radius: 6px; box-shadow: inset 0 0 0 5px var(--surface-soft); }
.tutorial-fleet-node strong { color: var(--ink); font-size: 14px; font-weight: 900; }
.tutorial-fleet-node span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-fleet-snapshot { display: grid; grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr)); gap: 8px; }
.tutorial-fleet-snapshot > div { min-height: 94px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-fleet-snapshot__main { grid-row: span 2; border-color: var(--accent-border) !important; background: var(--accent-soft) !important; }
.tutorial-fleet-snapshot small { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-fleet-snapshot strong { color: var(--ink); font-size: 15px; line-height: 1.25; }
.tutorial-fleet-snapshot span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-fleet-flow { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; gap: 8px; align-items: center; }
.tutorial-fleet-flow div { min-height: 104px; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 12px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-soft); text-align: center; }
.tutorial-fleet-flow span { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 13px; font-weight: 900; }
.tutorial-fleet-flow strong { color: var(--ink); font-size: 13px; line-height: 1.25; }
.tutorial-fleet-flow em { color: var(--muted-strong); font-size: 12px; font-style: normal; line-height: 1.3; }
.tutorial-fleet-flow b { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-fleet-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tutorial-fleet-links div { min-height: 112px; display: grid; align-content: center; gap: 6px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-fleet-links strong { color: var(--accent); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-fleet-links span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-section-grid--fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutorial-fleet-source-card { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
.tutorial-installation-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tutorial-installation-map__center { grid-column: 1 / -1; min-height: 94px; display: grid; place-items: center; gap: 4px; border: 2px solid var(--accent); border-radius: 14px; background: var(--accent-soft); text-align: center; }
.tutorial-installation-map__center strong { color: var(--accent); font-size: 24px; font-weight: 900; }
.tutorial-installation-map__center span { color: var(--muted-strong); font-size: 13px; font-weight: 750; }
.tutorial-installation-node { position: relative; min-height: 104px; display: grid; align-content: center; gap: 5px; padding: 14px 14px 14px 46px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-soft); }
.tutorial-installation-node::before { content: ""; position: absolute; left: 14px; top: 20px; width: 20px; height: 18px; border: 2px solid var(--accent); background: var(--accent-soft); }
.tutorial-installation-node--project::before { border-radius: 5px; box-shadow: inset 0 5px 0 var(--surface-soft); }
.tutorial-installation-node--date::before { border-radius: 6px; box-shadow: inset 0 6px 0 var(--accent); }
.tutorial-installation-node--place::before { width: 18px; height: 18px; border-radius: 999px 999px 999px 2px; transform: rotate(-45deg); }
.tutorial-installation-node--team::before { border-radius: 999px; box-shadow: 10px 2px 0 -4px var(--accent-soft), 10px 2px 0 -2px var(--accent); }
.tutorial-installation-node--vehicles::before { width: 24px; height: 14px; top: 22px; border-radius: 5px; }
.tutorial-installation-node--checks::before { border-radius: 6px; box-shadow: inset 0 0 0 5px var(--surface-soft); }
.tutorial-installation-node strong { color: var(--ink); font-size: 14px; font-weight: 900; }
.tutorial-installation-node span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-installation-snapshot { display: grid; grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr)); gap: 8px; }
.tutorial-installation-snapshot > div { min-height: 94px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-installation-snapshot__main { grid-row: span 2; border-color: var(--accent-border) !important; background: var(--accent-soft) !important; }
.tutorial-installation-snapshot small { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-installation-snapshot strong { color: var(--ink); font-size: 15px; line-height: 1.25; }
.tutorial-installation-snapshot span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-installation-flow { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; gap: 8px; align-items: center; }
.tutorial-installation-flow div { min-height: 104px; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 12px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-soft); text-align: center; }
.tutorial-installation-flow span { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 13px; font-weight: 900; }
.tutorial-installation-flow strong { color: var(--ink); font-size: 13px; line-height: 1.25; }
.tutorial-installation-flow em { color: var(--muted-strong); font-size: 12px; font-style: normal; line-height: 1.3; }
.tutorial-installation-flow b { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-installation-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tutorial-installation-links div { min-height: 112px; display: grid; align-content: center; gap: 6px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-installation-links strong { color: var(--accent); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-installation-links span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-section-grid--installation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutorial-installation-source-card { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
.tutorial-doc-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tutorial-doc-map__center { grid-column: 1 / -1; min-height: 94px; display: grid; place-items: center; gap: 4px; border: 2px solid var(--accent); border-radius: 14px; background: var(--accent-soft); text-align: center; }
.tutorial-doc-map__center strong { color: var(--accent); font-size: 24px; font-weight: 900; }
.tutorial-doc-map__center span { color: var(--muted-strong); font-size: 13px; font-weight: 750; }
.tutorial-doc-node { position: relative; min-height: 104px; display: grid; align-content: center; gap: 5px; padding: 14px 14px 14px 46px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-soft); }
.tutorial-doc-node::before { content: ""; position: absolute; left: 14px; top: 20px; width: 20px; height: 22px; border: 2px solid var(--accent); border-radius: 4px; background: var(--accent-soft); }
.tutorial-doc-node--name::before { box-shadow: inset 0 6px 0 var(--surface-soft); }
.tutorial-doc-node--type::before { border-radius: 5px; box-shadow: inset 0 0 0 5px var(--surface-soft); }
.tutorial-doc-node--source::before { border-radius: 4px; transform: rotate(2deg); }
.tutorial-doc-node--project::before { border-radius: 5px; box-shadow: inset 0 5px 0 var(--surface-soft); }
.tutorial-doc-node--visibility::before { border-radius: 999px; box-shadow: inset 0 -6px 0 var(--surface-soft); }
.tutorial-doc-node--preview::before { width: 22px; height: 14px; top: 22px; border-radius: 999px; }
.tutorial-doc-node strong { color: var(--ink); font-size: 14px; font-weight: 900; }
.tutorial-doc-node span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-doc-snapshot { display: grid; grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr)); gap: 8px; }
.tutorial-doc-snapshot > div { min-height: 94px; display: grid; align-content: center; gap: 4px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-doc-snapshot__main { grid-row: span 2; border-color: var(--accent-border) !important; background: var(--accent-soft) !important; }
.tutorial-doc-snapshot small { color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-doc-snapshot strong { color: var(--ink); font-size: 15px; line-height: 1.25; }
.tutorial-doc-snapshot span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-doc-flow { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; gap: 8px; align-items: center; }
.tutorial-doc-flow div { min-height: 104px; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 12px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-soft); text-align: center; }
.tutorial-doc-flow span { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: var(--surface); font-size: 13px; font-weight: 900; }
.tutorial-doc-flow strong { color: var(--ink); font-size: 13px; line-height: 1.25; }
.tutorial-doc-flow em { color: var(--muted-strong); font-size: 12px; font-style: normal; line-height: 1.3; }
.tutorial-doc-flow b { height: 2px; background: var(--accent); border-radius: 999px; }
.tutorial-doc-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.tutorial-doc-links div { min-height: 112px; display: grid; align-content: center; gap: 6px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-doc-links strong { color: var(--accent); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.tutorial-doc-links span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.tutorial-section-grid--documents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutorial-doc-source-card { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); }
.tutorial-people-line, .tutorial-fleet-road { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 180px; align-content: center; }
.tutorial-people-line span { display: flex; align-items: center; justify-content: center; min-height: 70px; font-weight: 850; }
.tutorial-fleet-road { grid-template-columns: 1fr 40px 1fr 40px 1fr; }
.tutorial-fleet-road span { display: flex; align-items: center; justify-content: center; min-height: 78px; border: 1px solid var(--accent-border); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 850; }
.tutorial-fleet-road strong { height: 3px; background: var(--accent); border-radius: 999px; }
.tutorial-trip-card { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tutorial-trip-card div { min-height: 120px; padding: 14px; }
.tutorial-doc-preview { display: grid; gap: 10px; grid-template-columns: 1fr .45fr 1fr; align-items: center; min-height: 210px; }
.tutorial-doc-preview div { padding: 16px; font-weight: 800; }
.tutorial-mail-layout { grid-template-columns: .7fr 1.2fr 1fr; min-height: 230px; }
.tutorial-mail-layout div { padding: 16px; font-weight: 850; }
.tutorial-steel-frame { position: relative; min-height: 250px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--surface-soft); }
.tutorial-steel-frame span { position: absolute; display: block; border-radius: 6px; background: var(--accent); opacity: .82; }
.tutorial-steel-frame span:nth-child(1) { left: 18%; top: 22%; width: 64%; height: 12px; }
.tutorial-steel-frame span:nth-child(2) { left: 18%; bottom: 22%; width: 64%; height: 12px; }
.tutorial-steel-frame span:nth-child(3) { left: 22%; top: 18%; width: 12px; height: 64%; }
.tutorial-steel-frame span:nth-child(4) { right: 22%; top: 18%; width: 12px; height: 64%; }
@media (max-width: 1180px) {
  .tutorial-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tutorial-trip-card, .tutorial-project-map, .tutorial-warehouse-actions, .tutorial-warehouse-callouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .tutorial-hero, .tutorial-overview-card, .tutorial-shell, .tutorial-section-grid { grid-template-columns: 1fr; }
  .tutorial-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tutorial-mini-flow, .tutorial-flow, .tutorial-fleet-road, .tutorial-warehouse-lifecycle, .tutorial-warehouse-project-flow, .tutorial-section-grid--warehouse, .tutorial-project-flow, .tutorial-section-grid--project, .tutorial-task-flow, .tutorial-section-grid--tasks, .tutorial-equipment-flow, .tutorial-section-grid--equipment, .tutorial-people-flow, .tutorial-section-grid--people, .tutorial-fleet-flow, .tutorial-section-grid--fleet, .tutorial-installation-flow, .tutorial-section-grid--installation, .tutorial-doc-flow, .tutorial-section-grid--documents { grid-template-columns: 1fr; }
  .tutorial-mini-flow strong, .tutorial-flow b, .tutorial-fleet-road strong, .tutorial-warehouse-lifecycle b, .tutorial-warehouse-project-flow b, .tutorial-project-flow b, .tutorial-task-flow b, .tutorial-equipment-flow b, .tutorial-people-flow b, .tutorial-fleet-flow b, .tutorial-installation-flow b, .tutorial-doc-flow b { width: 2px; height: 18px; justify-self: center; }
  .tutorial-mail-layout, .tutorial-task-board, .tutorial-doc-preview, .tutorial-equipment-actions, .tutorial-people-links, .tutorial-fleet-links, .tutorial-installation-links, .tutorial-doc-links { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .tutorial-module-grid { grid-template-columns: 1fr; }
  .tutorial-hero h1, .tutorial-module-hero h1 { font-size: 24px; }
  .tutorial-screen__bar, .tutorial-screen__row, .tutorial-trip-card, .tutorial-people-line, .tutorial-warehouse-actions, .tutorial-warehouse-row-map__row, .tutorial-warehouse-callouts, .tutorial-project-map, .tutorial-project-snapshot, .tutorial-task-anatomy, .tutorial-task-lanes, .tutorial-equipment-types, .tutorial-equipment-snapshot, .tutorial-people-map, .tutorial-people-snapshot, .tutorial-fleet-map, .tutorial-fleet-snapshot, .tutorial-installation-map, .tutorial-installation-snapshot, .tutorial-doc-map, .tutorial-doc-snapshot { grid-template-columns: 1fr; }
  .tutorial-hotspot { position: static; max-width: none; }
  .tutorial-project-snapshot__main, .tutorial-task-anatomy__main, .tutorial-equipment-snapshot__main, .tutorial-people-snapshot__main, .tutorial-fleet-snapshot__main, .tutorial-installation-snapshot__main, .tutorial-doc-snapshot__main { grid-row: auto; }
  .tutorial-side { grid-template-columns: 1fr; }
}


/* Internal garage offer configurator */
.offer-configurator { display: grid; gap: 18px; padding-bottom: 40px; }
.offer-configurator__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 10px 0 4px; }
.offer-configurator__head h1 { margin: 0; color: var(--ink); font-size: 34px; line-height: 1.05; }
.offer-configurator__head p { max-width: 760px; margin: 8px 0 0; color: var(--muted-strong); font-size: 15px; line-height: 1.45; }
.offer-configurator__layout { display: grid; grid-template-columns: minmax(260px, 360px) minmax(420px, 1fr) minmax(280px, 340px); gap: 14px; align-items: start; }
.offer-panel { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-soft); }
.offer-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.offer-panel__head span, .section-eyebrow { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.offer-panel__head strong { color: var(--accent); font-size: 13px; font-weight: 900; }
.offer-form { display: grid; gap: 12px; padding-bottom: 16px; }
.offer-form label { display: grid; gap: 6px; padding: 0 16px; color: var(--muted-strong); font-size: 12px; font-weight: 850; }
.offer-form input, .offer-form select { width: 100%; min-height: 42px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--ink); padding: 9px 11px; font: inherit; font-size: 15px; font-weight: 800; }
.offer-form input[readonly] { background: var(--surface-soft); color: var(--muted-strong); cursor: default; }
.offer-unit-field { display: grid; gap: 7px; padding: 0 16px; }
.offer-unit-field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; color: var(--muted-strong); font-size: 12px; font-weight: 850; }
.offer-unit-field__label small { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.offer-unit-field__control { position: relative; }
.offer-unit-field__control input { padding-right: 42px; }
.offer-unit-field__control span { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; font-weight: 900; pointer-events: none; }
.offer-unit-field__control input.is-empty { border-color: var(--warning-border); background: var(--warning-soft); }
.offer-unit-field__control input.is-invalid { border-color: var(--danger-border); background: var(--danger-soft); }
.offer-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.offer-stepper--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer-stepper button { min-height: 28px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--surface-soft); color: var(--muted-strong); font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.offer-stepper button:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-soft); }
.offer-field-note { margin: -4px 16px 0; color: var(--muted-strong); font-size: 11px; line-height: 1.35; }
.offer-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px; }
.offer-form__grid label { padding: 0; }
.offer-form__grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer-check { grid-template-columns: 18px 1fr !important; align-items: center; color: var(--ink) !important; font-size: 13px !important; line-height: 1.35; }
.offer-check input { min-height: 18px; width: 18px; padding: 0; }
.offer-form .button { margin: 4px 16px 0; }
.offer-preview { overflow: hidden; }
.offer-preview__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); }
.offer-preview__toolbar span { color: var(--ink); font-weight: 900; }
.offer-preview__toolbar div { display: flex; gap: 8px; }
.offer-preview__toolbar .button { min-height: 34px; padding: 7px 10px; font-size: 12px; }
.offer-garage-stage { min-height: 460px; display: grid; place-items: center; padding: 18px; background: linear-gradient(180deg, var(--surface-soft), var(--surface)); overflow: hidden; }
.offer-garage-stage--creator { display: block; min-height: 520px; padding: 0; background: linear-gradient(180deg, #dbeafe 0%, #eef6ff 54%, #e5e7eb 100%); }
.offer-visual-preview { position: relative; min-height: 520px; width: 100%; height: 520px; overflow: hidden; border-radius: 0; cursor: grab; touch-action: none; }
.offer-visual-preview:active { cursor: grabbing; }
.offer-visual-preview canvas { display: block; width: 100%; height: 100%; }
.offer-preview__hint { margin: 0; padding: 9px 14px; border-top: 1px solid var(--border-subtle); color: var(--muted-strong); font-size: 12px; font-weight: 700; background: var(--surface); }
.offer-garage-stage--creator .steel-3d-opening-overlay { pointer-events: none; }
.offer-garage-svg { --wall-color: #314155; --roof-color: #26313d; width: min(100%, 760px); height: auto; display: block; transition: transform .22s ease, width .18s ease; }
.offer-garage__ground { fill: rgba(15, 23, 42, .10); }
.offer-garage__wall { fill: var(--wall-color); stroke: color-mix(in srgb, var(--wall-color), #000 26%); stroke-width: 2.5; }
.offer-garage__wall--side { fill: color-mix(in srgb, var(--wall-color), #fff 9%); }
.offer-garage__wall-pattern { opacity: .36; }
.offer-garage__sheet-line { stroke: color-mix(in srgb, var(--wall-color), #fff 28%); stroke-width: 1; opacity: .72; }
.offer-garage__roof { fill: var(--roof-color); stroke: color-mix(in srgb, var(--roof-color), #000 28%); stroke-width: 2.5; }
.offer-garage__roof-pattern { opacity: .32; }
.offer-garage__roof-line { stroke: color-mix(in srgb, var(--roof-color), #fff 30%); stroke-width: 1.2; opacity: .72; }
.offer-garage__front-fascia, .offer-garage__blend { fill: color-mix(in srgb, var(--roof-color), #000 10%); stroke: color-mix(in srgb, var(--roof-color), #000 26%); stroke-width: 2; }
.offer-garage__front-post { fill: color-mix(in srgb, var(--wall-color), #000 16%); }
.offer-garage__gate, .offer-garage__door, .offer-garage__window { stroke-linejoin: round; }
.offer-garage__gate { fill: rgba(219, 234, 254, .38); stroke: rgba(226, 232, 240, .82); stroke-width: 2; }
.offer-garage__gate-lines { fill: none; stroke: rgba(71, 85, 105, .42); stroke-width: 1.3; }
.offer-garage__door { fill: rgba(20, 184, 166, .18); stroke: rgba(45, 212, 191, .70); stroke-width: 2; }
.offer-garage__window { fill: rgba(20, 184, 166, .14); stroke: rgba(45, 212, 191, .72); stroke-width: 2; }
.offer-garage--view-right { transform: scaleX(-1); }
.offer-garage--no-windows .offer-garage__window { display: none; }
.offer-garage--no-door .offer-garage__door { display: none; }
.offer-garage--one-gate .offer-garage__gate--right, .offer-garage--no-gates .offer-garage__gate, .offer-garage--no-gates .offer-garage__gate-lines { display: none; }
.offer-garage--one-gate .offer-garage__gate--left { transform: translateX(44px); }
.offer-preview__legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--border-subtle); color: var(--muted-strong); font-size: 12px; font-weight: 800; }
.offer-preview__legend span { display: inline-flex; align-items: center; gap: 6px; }
.offer-preview__legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.offer-summary { display: grid; gap: 14px; padding: 16px; }
.offer-price { display: grid; gap: 4px; }
.offer-price span { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.offer-price strong { color: var(--ink); font-size: 30px; line-height: 1.05; }
.offer-price em { color: var(--muted-strong); font-size: 12px; line-height: 1.35; font-style: normal; }
.offer-warning { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--warning-border); border-radius: 10px; background: var(--warning-soft); color: var(--warning-strong); }
.offer-warning strong { font-size: 13px; }
.offer-warning span { font-size: 12px; line-height: 1.35; }
.offer-dimensions { display: grid; gap: 8px; margin: 0; }
.offer-dimensions div { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--surface-soft); }
.offer-dimensions dt { color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.offer-dimensions dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 900; }
.offer-dimensions--plain { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; }
.offer-breakdown { display: grid; gap: 7px; }
.offer-breakdown div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); color: var(--muted-strong); font-size: 12px; }
.offer-breakdown span { display: grid; gap: 2px; }
.offer-breakdown em { color: var(--muted); font-size: 11px; font-style: normal; }
.offer-breakdown strong { color: var(--ink); font-size: 12px; white-space: nowrap; }
.offer-recent { padding-bottom: 12px; }
.offer-recent__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 16px; }
.offer-recent__list a { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--surface-soft); color: inherit; text-decoration: none; }
.offer-recent__list strong { color: var(--accent); font-size: 13px; }
.offer-recent__list span { color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.offer-detail__actions { display: flex; gap: 8px; }
.offer-detail__grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(360px, 1fr); gap: 14px; align-items: start; }
.offer-detail__link { padding: 0 0 16px; }
.offer-detail__link p { margin: 0 16px; padding: 12px; border-radius: 9px; background: var(--surface-soft); color: var(--ink); font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.offer-detail__link small { display: block; margin: 10px 16px 0; color: var(--muted-strong); font-size: 12px; line-height: 1.35; }
.offer-detail__bridge { grid-column: 1 / -1; }
.offer-bridge-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; }
.offer-bridge-columns h3 { margin: 0 0 8px; color: var(--ink); font-size: 13px; font-weight: 900; }
.offer-bridge-list { display: grid; gap: 6px; margin: 0; }
.offer-bridge-list div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--surface-soft); }
.offer-bridge-list dt { color: var(--muted); font-size: 12px; font-weight: 800; }
.offer-bridge-list dd { margin: 0; color: var(--ink); font-size: 12px; font-weight: 900; text-align: right; }
.offer-bridge-review { margin: 0 16px 16px; padding: 12px; border: 1px solid var(--warning-border); border-radius: 10px; background: var(--warning-soft); color: var(--warning-strong); }
.offer-bridge-review strong { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.offer-bridge-review ul, .steel-product-offer-bridge ul { margin: 0; padding-left: 18px; }
.offer-bridge-review li, .steel-product-offer-bridge li { margin: 3px 0; font-size: 12px; line-height: 1.35; }
@media (max-width: 1220px) {
  .offer-configurator__layout, .offer-detail__grid { grid-template-columns: 1fr; }
  .offer-bridge-columns { grid-template-columns: 1fr; }
  .offer-recent__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .offer-configurator__head { display: grid; }
  .offer-configurator__head h1 { font-size: 26px; }
  .offer-form__grid, .offer-form__grid--three, .offer-dimensions--plain, .offer-recent__list { grid-template-columns: 1fr; }
  .offer-garage-stage { min-height: 330px; }
  .offer-garage-stage--creator, .offer-visual-preview { min-height: 380px; height: 380px; }
  .offer-garage-svg { width: 92%; height: auto; }
}


.steel-product-offer-bridge { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--warning-border); border-radius: 10px; background: var(--warning-soft); color: var(--warning-strong); }
.steel-product-offer-bridge strong { color: inherit; font-size: 13px; font-weight: 900; }
.steel-product-offer-bridge span { color: inherit; font-size: 12px; line-height: 1.35; }