html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #101723;
    color: #dbe7f3;
    color-scheme: dark;
}

.page[data-theme="light"] {
    --theme-app-bg: #d9d7f5;
    --theme-bg: #eef3f7;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f9fbfd;
    --theme-surface-muted: #f1f5f9;
    --theme-surface-raised: #ffffff;
    --theme-border: #d7e0ea;
    --theme-border-strong: #bfccda;
    --theme-text: #1d2731;
    --theme-heading: #1d2731;
    --theme-muted: #5c6c7d;
    --theme-soft-muted: #687789;
    --theme-table-head: #f1f5f9;
    --theme-table-hover: #f5fbff;
    --theme-table-selected: #dbeeff;
    --theme-input-bg: #ffffff;
    --theme-input-disabled: #eef3f7;
    --theme-primary: #1f5c9d;
    --theme-primary-strong: #184c84;
    --theme-primary-soft: #e7f1fb;
    --theme-checkbox-checked: #1f5c9d;
    --theme-checkbox-check: #ffffff;
    --theme-checkbox-empty: #ffffff;
    --theme-success-soft: #e9f6f4;
    --theme-success: #14675c;
    --theme-warning-soft: #fff3d9;
    --theme-warning: #8a5d00;
    --theme-danger-soft: #fff1f1;
    --theme-danger: #9b1f1f;
    --theme-sidebar: #244aa5;
    --theme-sidebar-hover: rgba(78, 137, 255, 0.32);
    --theme-sidebar-text: #e8f0ff;
    --theme-topbar: #1f5c9d;
    --theme-topbar-border: #184c84;
    background: var(--theme-app-bg);
    color: var(--theme-text);
    color-scheme: light;
}

.page[data-theme="dark"] {
    --theme-app-bg: #0b111b;
    --theme-bg: #101723;
    --theme-surface: #151f2d;
    --theme-surface-soft: #111a27;
    --theme-surface-muted: #1b2636;
    --theme-surface-raised: #1a2636;
    --theme-border: #2a384a;
    --theme-border-strong: #3a4c62;
    --theme-text: #dbe7f3;
    --theme-heading: #f5f9ff;
    --theme-muted: #9badc2;
    --theme-soft-muted: #7f91a8;
    --theme-table-head: #1b2636;
    --theme-table-hover: #1d2a3a;
    --theme-table-selected: #203a57;
    --theme-input-bg: #0f1825;
    --theme-input-disabled: #172232;
    --theme-primary: #5ea8ff;
    --theme-primary-strong: #83bdff;
    --theme-primary-soft: #1b3550;
    --theme-checkbox-checked: #3384ff;
    --theme-checkbox-check: #ffffff;
    --theme-checkbox-empty: #0f1825;
    --theme-success-soft: #12352e;
    --theme-success: #47d18b;
    --theme-warning-soft: #3a2d18;
    --theme-warning: #ffbf4d;
    --theme-danger-soft: #3a1e2a;
    --theme-danger: #ff5d7e;
    --theme-sidebar: #111827;
    --theme-sidebar-hover: rgba(150, 162, 181, 0.22);
    --theme-sidebar-text: #d8e1f3;
    --theme-topbar: #101a2b;
    --theme-topbar-border: #243347;
    background: var(--theme-app-bg);
    color: var(--theme-text);
    color-scheme: dark;
}

.utility-page {
    background: var(--theme-bg, #eef3f7);
    color: var(--theme-text, #1d2731);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 36px);
    min-height: 0;
    overflow: hidden;
}

.utility-header {
    align-items: center;
    background: var(--theme-surface, #ffffff);
    border-bottom: 1px solid var(--theme-border, #d7e0ea);
    display: grid;
    flex: 0 0 auto;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    min-height: 64px;
    padding: 12px 18px;
}

.utility-header h1 {
    color: var(--theme-heading, #1d2731);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.page-breadcrumb-title {
    align-items: center;
    display: inline-flex;
    gap: 5px;
    line-height: normal;
    min-height: 30px;
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
}

.page-breadcrumb-title .breadcrumb-root {
    color: var(--theme-primary, #5aa6e8);
    font-size: 18px;
    font-weight: 300;
}

.page-breadcrumb-title .breadcrumb-separator {
    color: var(--theme-soft-muted, #9aa9b8);
    font-size: 14px;
    font-weight: 600;
    transform: translateY(1px);
}

.page-breadcrumb-title .breadcrumb-current {
    color: var(--theme-muted, #6f7f90);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    min-width: 0;
    overflow: visible;
}

.utility-toolbar {
    align-items: center;
    background: var(--theme-surface-soft, #f9fbfd);
    border-bottom: 1px solid var(--theme-border, #d7e0ea);
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 12px;
}

.utility-page .eyebrow {
    color: var(--theme-muted, #5a728f);
    font-size: 11px;
    font-weight: 800;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.utility-page .header-status {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-self: end;
}

.utility-page .header-status span,
.utility-page .header-status strong {
    background: var(--theme-surface-raised, #ffffff);
    border: 1px solid var(--theme-border-strong, #c9d6e4);
    border-radius: 4px;
    color: var(--theme-muted, #405368);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 9px;
}

.utility-page .header-status strong {
    background: var(--theme-success-soft, #e9f6f4);
    border-color: rgba(20, 103, 92, 0.26);
    color: var(--theme-success, #14675c);
}

.utility-page .filter-cluster,
.utility-page .action-cluster {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.utility-page .search-field,
.utility-page .field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.utility-page .search-field {
    min-width: 280px;
}

.utility-page .search-field span,
.utility-page .field span {
    color: var(--theme-muted, #5c6c7d);
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.utility-page input,
.utility-page select,
.utility-page textarea {
    background: var(--theme-input-bg, #ffffff);
    border: 1px solid var(--theme-border-strong, #bfccda);
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--theme-text, #1d2731);
    height: 28px;
    min-width: 0;
    padding: 0 7px;
    width: 100%;
}

.utility-page input:focus,
.utility-page select:focus,
.utility-page textarea:focus {
    border-color: var(--theme-primary, #1f5c9d);
    box-shadow: 0 0 0 2px rgba(31, 92, 157, 0.14);
    outline: 0;
}

.utility-page input:disabled,
.utility-page select:disabled,
.utility-page textarea:disabled,
.utility-page input[readonly] {
    background: var(--theme-input-disabled, #eef3f7);
    color: var(--theme-soft-muted, #526579);
}

.utility-page .number-input,
.utility-page .number-cell {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.utility-page .check-field {
    align-items: center;
    color: var(--theme-muted, #405368);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    min-height: 28px;
}

.utility-page .check-field input {
    height: 14px;
    width: 14px;
}

.page input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    align-self: center;
    background: var(--theme-checkbox-empty, #ffffff);
    border: 1px solid var(--theme-border-strong, #bfccda);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    cursor: pointer;
    display: inline-grid;
    flex: 0 0 auto;
    height: 18px;
    margin: 0;
    min-height: 18px;
    min-width: 18px;
    padding: 0;
    place-content: center;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
    vertical-align: middle;
    width: 18px;
}

.page .check-field,
.page input[type="checkbox"] + span {
    cursor: pointer;
}

.page input[type="checkbox"]::after {
    border-bottom: 3px solid var(--theme-checkbox-check, #ffffff);
    border-left: 3px solid var(--theme-checkbox-check, #ffffff);
    content: "";
    height: 6px;
    opacity: 0;
    transform: rotate(-45deg) scale(0.72) translate(1px, -1px);
    transition: opacity 100ms ease, transform 120ms ease;
    width: 11px;
}

.page input[type="checkbox"]:checked {
    background: var(--theme-checkbox-checked, var(--theme-primary, #1f5c9d));
    border-color: var(--theme-checkbox-checked, var(--theme-primary, #1f5c9d));
    box-shadow: 0 0 0 1px rgba(31, 92, 157, 0.08), 0 6px 14px rgba(31, 92, 157, 0.18);
}

.page input[type="checkbox"]:checked::after {
    opacity: 1;
    transform: rotate(-45deg) scale(1) translate(1px, -1px);
}

.page input[type="checkbox"]:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(31, 92, 157, 0.18);
}

.page input[type="checkbox"]:checked:focus-visible {
    box-shadow: 0 0 0 3px rgba(31, 92, 157, 0.22), 0 6px 14px rgba(31, 92, 157, 0.18);
}

.page input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.page input[type="checkbox"]:disabled + span {
    cursor: not-allowed;
}

.utility-page .tool-button {
    align-items: center;
    background: var(--theme-surface-raised, #ffffff);
    border: 1px solid var(--theme-border-strong, #aebed0);
    border-radius: 4px;
    color: var(--theme-text, #243242);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 7px;
    height: 32px;
    justify-content: center;
    min-width: 76px;
    padding: 0 10px;
}

.utility-page .tool-button:hover:not(:disabled) {
    background: var(--theme-table-hover, #eef5fd);
    border-color: var(--theme-primary, #8ab0d8);
    color: var(--theme-primary-strong, #184c84);
}

.utility-page .tool-button.primary {
    background: var(--theme-primary, #1f5c9d);
    border-color: var(--theme-primary-strong, #184c84);
    color: #ffffff;
}

.page[data-theme="dark"] .utility-page .tool-button.primary {
    color: #07111f;
}

.utility-page .tool-button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.segmented-filter {
    align-items: center;
    background: #edf2f8;
    border: 1px solid #cfd8e4;
    border-radius: 4px;
    display: inline-flex;
    gap: 2px;
    height: 32px;
    padding: 3px;
}

.segmented-filter button {
    background: transparent;
    border: 0;
    border-radius: 3px;
    color: #5a7090;
    font-size: 12px;
    font-weight: 800;
    height: 24px;
    min-width: 44px;
    padding: 0 12px;
}

.segmented-filter button.active {
    background: #2f6fb7;
    color: #ffffff;
}

.utility-page .mode-banner-slot {
    display: flex;
    justify-content: center;
    min-width: 240px;
}

.utility-page .mode-banner {
    align-items: center;
    background: rgba(31, 39, 67, 0.3);
    border: 0;
    border-radius: 0;
    color: #3384ff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 10px;
    justify-content: center;
    max-width: min(320px, 100%);
    min-height: 36px;
    min-width: 220px;
    padding: 0 18px;
}

.utility-page .mode-banner-icon {
    background: currentColor;
    display: inline-block;
    flex: 0 0 auto;
    font-size: 0;
    height: 18px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M12 17v-6M12 8h.01'/%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M12 17v-6M12 8h.01'/%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    width: 18px;
}

.utility-page .mode-banner.adding {
    background: rgba(29, 46, 45, 0.3);
    color: #24c878;
}

.utility-page .tool-icon {
    background: currentColor;
    display: inline-block;
    flex: 0 0 auto;
    height: 14px;
    width: 14px;
}

.utility-page .icon-new {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.utility-page .icon-edit {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 17.5 10-10 2.5 2.5-10 10H4v-2.5zM16 5.5 17.5 4 20 6.5 18.5 8 16 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 17.5 10-10 2.5 2.5-10 10H4v-2.5zM16 5.5 17.5 4 20 6.5 18.5 8 16 5.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.utility-page .icon-delete {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 21V7H5V5h4V3h6v2h4v2h-2v14H7zm2-2h6V7H9v12z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 21V7H5V5h4V3h6v2h4v2h-2v14H7zm2-2h6V7H9v12z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.utility-page .icon-save {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5 2-2 3 3 9-9 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5 2-2 3 3 9-9 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.utility-page .icon-cancel {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.4 5 5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.utility-workspace {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.utility-page .input-panel {
    background: var(--theme-surface, #ffffff);
    border-bottom: 1px solid var(--theme-border, #d7e0ea);
    padding: 12px;
}

.utility-page .panel-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.utility-page .panel-heading span {
    color: var(--theme-muted, #5a728f);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.utility-page .panel-heading strong {
    color: var(--theme-heading, #1d2731);
    font-size: 15px;
}

.utility-form {
    align-items: end;
    display: grid;
    gap: 10px 12px;
}

.product-form {
    grid-template-columns: minmax(190px, 360px);
}

.unit-form {
    grid-template-columns: repeat(3, minmax(120px, 180px));
}

.utility-page .grid-panel {
    background: var(--theme-surface, #ffffff);
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.utility-page .table-scroll {
    height: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: auto;
}

.utility-table {
    border-collapse: collapse;
    min-width: 760px;
    width: 100%;
}

.product-workspace .utility-table {
    min-width: 420px;
}

.unit-table {
    min-width: 0;
    table-layout: fixed;
    width: max-content;
}

.unit-table th,
.unit-table td {
    padding-left: 8px;
    padding-right: 8px;
    width: 120px;
}

.utility-table th {
    background: var(--theme-table-head, #f6f9fc);
    border-bottom: 1px solid var(--theme-border, #cbd8e6);
    color: var(--theme-muted, #4d6075);
    font-size: 11px;
    font-weight: 800;
    height: 32px;
    padding: 0 10px;
    position: sticky;
    text-align: left;
    text-transform: uppercase;
    top: 0;
    z-index: 2;
}

.utility-table th.number-cell {
    text-align: right;
}

.utility-table td {
    background: var(--theme-surface, #ffffff);
    border-bottom: 1px solid var(--theme-border, #e1e8f0);
    color: var(--theme-text, #263546);
    font-size: 12px;
    height: 32px;
    padding: 0 10px;
    white-space: nowrap;
}

.utility-table tbody tr:hover td {
    background: var(--theme-table-hover, #eef6ff);
}

.utility-table tbody tr.selected td {
    background: var(--theme-table-selected, #dbeafd);
}

.utility-table .empty-row {
    color: var(--theme-soft-muted, #60768e);
    font-weight: 700;
    height: 80px;
    text-align: center;
}

@media (max-width: 980px) {
    .utility-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .utility-page .filter-cluster,
    .utility-page .action-cluster {
        justify-content: flex-start;
    }

    .utility-header {
        grid-template-columns: 1fr;
    }

    .utility-page .mode-banner-slot,
    .utility-page .header-status {
        justify-self: start;
    }

    .unit-form {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

.page[data-theme="dark"] main,
.page[data-theme="dark"] .content {
    background: var(--theme-bg);
}

.page[data-theme="dark"] .top-row {
    background: var(--theme-topbar);
    border-bottom-color: var(--theme-topbar-border);
}

.page[data-theme="dark"] .open-tab {
    border-left-color: rgba(255, 255, 255, 0.06);
    border-right-color: rgba(0, 0, 0, 0.25);
    color: #c9d8e9;
}

.page[data-theme="dark"] .open-tab:hover,
.page[data-theme="dark"] .open-tab.active {
    background: rgba(94, 168, 255, 0.2);
    color: #ffffff;
}

.page[data-theme="dark"] .close-tab:hover,
.page[data-theme="dark"] .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.page[data-theme="dark"] .nav-panel,
.page[data-theme="dark"] .nav-panel.collapsed .flyout-menu {
    background: var(--theme-sidebar);
    color: var(--theme-sidebar-text);
}

.page[data-theme="dark"] .panel-toggle {
    background: #d9e7f7;
    color: #07111f;
}

.page[data-theme="dark"] .nav-item .nav-link,
.page[data-theme="dark"] .nav-footer .nav-link,
.page[data-theme="dark"] .menu-section,
.page[data-theme="dark"] .flyout-link {
    color: var(--theme-sidebar-text);
}

.page[data-theme="dark"] .nav-item .nav-link:hover,
.page[data-theme="dark"] .nav-footer .nav-link:hover,
.page[data-theme="dark"] .nav-item .nav-link.active,
.page[data-theme="dark"] .nav-footer .nav-link.active {
    background: #d9e7f7;
    color: #07111f;
}

.page[data-theme="dark"] .menu-items .nav-link.active .menu-icon {
    color: var(--theme-primary);
}

.page[data-theme="dark"] .current-user {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.page[data-theme="dark"] .user-avatar {
    background: #d9e7f7;
    color: #07111f;
}

.page[data-theme="dark"] .menu-section:hover,
.page[data-theme="dark"] .menu-section.expanded {
    background: var(--theme-sidebar-hover);
    color: #ffffff;
}

.page[data-theme="dark"] .flyout-title {
    color: #ffffff;
}

.page[data-theme="dark"] .flyout-link:hover,
.page[data-theme="dark"] .flyout-link.active {
    color: #ffffff;
}

.page[data-theme="dark"] .nav-panel {
    --nav-panel-bg: #111827;
    --nav-panel-bg-2: #162033;
    --nav-panel-text: #d8e1f3;
    --nav-panel-muted: #98a7ba;
    --nav-panel-active: rgba(150, 162, 181, 0.22);
    --nav-panel-active-strong: rgba(150, 162, 181, 0.28);
}

.page[data-theme="light"] .nav-panel {
    --nav-panel-bg: #244aa5;
    --nav-panel-bg-2: #2c5fbd;
    --nav-panel-text: #e8f0ff;
    --nav-panel-muted: #bed2ff;
    --nav-panel-active: rgba(91, 151, 255, 0.38);
    --nav-panel-active-strong: rgba(106, 164, 255, 0.48);
}

.page[data-theme="dark"] :is(
    .dashboard-page,
    .takeoff-page,
    .projects-page,
    .material-page,
    .material-type-page,
    .default-cost-page,
    .workspace,
    .summary-zone
) {
    background: var(--theme-bg);
    color: var(--theme-text);
}

.page[data-theme="dark"] :is(
    .dashboard-header,
    .takeoff-header,
    .projects-header,
    .material-header,
    .material-type-header,
    .cost-header,
    .workspace-toolbar,
    .project-toolbar,
    .material-toolbar,
    .material-type-toolbar,
    .cost-toolbar,
    .action-bar,
    .summary-tabs,
    .summary-drawer-header,
    .panel-heading,
    .finish-header,
    .editor-header,
    .grid-toolbar,
    .tabulation-setup-row,
    .tabulation-formula-row,
    .tabulation-footer-actions,
    .project-cost-head,
    .takeoff-status
) {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

.page[data-theme="dark"] :is(
    .kpi-card,
    .dashboard-panel,
    .stage-summary article,
    .module-card,
    .workflow-panel,
    .project-kpi-row article,
    .stage-pipeline article,
    .project-pick,
    .project-editor,
    .cost-editor,
    .input-panel,
    .type-input-panel,
    .finish-panel,
    .grid-panel,
    .summary-card,
    .summary-drawer-surface,
    .summary-content,
    .summary-floating .summary-content,
    .scope-panel,
    .side-tools,
    .entry-panel,
    .entry-section,
    .component-card,
    .template-card,
    .gallery-panel,
    .summary-floating-actions,
    .cost-list,
    .material-type-main,
    .details-panel,
    .estimate-grid-panel,
    .summary-tabs button.active
) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    box-shadow: none;
}

.page[data-theme="dark"] .takeoff-workspace::before {
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

.page[data-theme="dark"] :is(
    .scope-panel,
    .side-tools,
    .takeoff-workspace .scope-panel,
    .takeoff-workspace .side-tools
) {
    border-color: var(--theme-border);
}

.page[data-theme="dark"] :is(
    h1,
    h2,
    .dashboard-header h1,
    .takeoff-header h1,
    .projects-header h1,
    .material-header h1,
    .material-type-header h1,
    .cost-header h1,
    .panel-heading strong,
    .finish-header strong,
    .editor-header h2,
    .summary-drawer-title strong,
    .project-cost-head strong,
    .project-cost-meta strong
) {
    color: var(--theme-heading);
}

.page[data-theme="dark"] :is(
    .eyebrow,
    .module-label,
    .kpi-card span,
    .panel-heading span,
    .finish-header span,
    .stage-topline span,
    .project-kpi-row span,
    .time-row > span,
    .search-field span,
    .select-field span,
    .form-grid span,
    .field span,
    .scope-form span,
    .entry-grid span,
    .component-grid span,
    .project-info-grid span,
    .cost-grid span,
    .template-form span,
    .total-selected span,
    .component-total span,
    .details-grid dt,
    .project-cost-label,
    .project-cost-head span,
    .project-cost-meta span,
    .summary-drawer-title > span,
    .tabulation-setup-row label span
) {
    color: var(--theme-muted);
}

.page[data-theme="dark"] :is(
    .kpi-card strong,
    .project-kpi-row strong,
    .stage-topline strong,
    .time-row strong,
    .project-pick strong,
    .dashboard-table-wrap td:first-child strong,
    .tabulation-cell-reference,
    .tabulation-formula-label,
    .gallery-title,
    .takeoff-status strong,
    .project-cost-prefix,
    .project-cost-suffix
) {
    color: var(--theme-primary);
}

.page[data-theme="dark"] :is(
    .lede,
    .module-card p,
    .section-title p,
    .kpi-card small,
    .stage-pipeline small,
    .project-pick small,
    .dashboard-table-wrap td:first-child span,
    .details-empty,
    .empty-row,
    .header-status span,
    .project-strip > span,
    .check-field
) {
    color: var(--theme-soft-muted);
}

.page[data-theme="dark"] :is(input, select, textarea) {
    background: var(--theme-input-bg);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
}

.page[data-theme="dark"] :is(input:disabled, select:disabled, textarea:disabled, input[readonly]) {
    background: var(--theme-input-disabled);
    color: var(--theme-soft-muted);
}

.page[data-theme="dark"] :is(input:focus, select:focus, textarea:focus) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(94, 168, 255, 0.18);
}

.page[data-theme="dark"] :is(
    .tool-button,
    .icon-button,
    .square-button,
    .icon-tool,
    .icon-only,
    .scope-icon-action,
    .component-action-button,
    .summary-icon-button,
    .context-actions button,
    .tabulation-template-actions button,
    .tabulation-footer-actions button,
    .summary-tabs button,
    .primary-action,
    .icon-action
) {
    background: var(--theme-surface-raised);
    border-color: var(--theme-border-strong);
    color: var(--theme-text);
}

.page[data-theme="dark"] :is(
    .tool-button:hover:not(:disabled),
    .icon-button:hover:not(:disabled),
    .square-button:hover:not(:disabled),
    .icon-tool:hover:not(:disabled),
    .scope-icon-action:hover,
    .component-action-button:hover,
    .summary-icon-button:hover,
    .context-actions button:hover:not(:disabled),
    .tabulation-template-actions button:hover,
    .tabulation-footer-actions button:hover,
    .summary-tabs button:hover
) {
    background: var(--theme-table-hover);
    border-color: var(--theme-primary);
    color: var(--theme-primary-strong);
}

.page[data-theme="dark"] :is(
    .tool-button.primary,
    .icon-tool.primary,
    .open-project-button,
    .component-action-button.primary,
    .segmented-filter button.active,
    .tabulation-add-row-button:hover
) {
    background: var(--theme-primary);
    border-color: var(--theme-primary-strong);
    color: #07111f;
}

.page[data-theme="dark"] :is(table, .mini-table table, .summary-table table, .dashboard-table-wrap table) {
    background: var(--theme-surface);
    color: var(--theme-text);
}

.page[data-theme="dark"] :is(th, .dashboard-table-wrap th, .mini-table th, .summary-table th, .tabulation-sheet th) {
    background: var(--theme-table-head);
    border-color: var(--theme-border);
    color: var(--theme-muted);
}

.page[data-theme="dark"] :is(td, .dashboard-table-wrap td, .mini-table td, .summary-table td, .tabulation-sheet td) {
    background: transparent;
    border-color: var(--theme-border);
    color: var(--theme-text);
}

.page[data-theme="dark"] :is(
    tbody tr:hover,
    tbody tr:hover td,
    .dashboard-table-wrap tbody tr:hover,
    .project-pick:hover
) {
    background: var(--theme-table-hover);
}

.page[data-theme="dark"] :is(
    tbody tr.selected,
    tbody tr.selected td,
    .dashboard-table-wrap tbody tr.selected,
    .project-pick.active
) {
    background: var(--theme-table-selected);
}

.page[data-theme="dark"] .status.open {
    background: var(--theme-warning-soft);
    color: var(--theme-warning);
}

.page[data-theme="dark"] :is(.status.checked, .status.active, .header-status strong, .project-pick em) {
    background: var(--theme-success-soft);
    border-color: rgba(71, 209, 139, 0.35);
    color: var(--theme-success);
}

.page[data-theme="dark"] :is(.status.deleted, .status.inactive, tbody tr.deleted) {
    background: var(--theme-input-disabled);
    color: var(--theme-soft-muted);
}

.page[data-theme="dark"] .segmented-filter {
    background: #172232;
    border-color: #31455d;
}

.page[data-theme="dark"] .segmented-filter button {
    color: #9fb3ca;
}

.page[data-theme="dark"] .segmented-filter button.active {
    background: var(--theme-primary);
    color: #07111f;
}

.page[data-theme="dark"] :is(.project-strip > span, .header-status span, .header-status strong) {
    background: var(--theme-surface-raised);
    border-color: var(--theme-border-strong);
}

.page[data-theme="dark"] .project-meta strong {
    background: var(--theme-primary-soft);
    border-color: rgba(94, 168, 255, 0.38);
    color: var(--theme-primary-strong);
}

.page[data-theme="dark"] .project-strip .renovation {
    background: var(--theme-warning-soft);
    border-color: rgba(255, 191, 77, 0.38);
    color: var(--theme-warning);
}

.page[data-theme="dark"] .project-strip .project-type-tag {
    background: var(--theme-success-soft);
    border-color: rgba(71, 209, 139, 0.35);
    color: var(--theme-success);
}

.page[data-theme="dark"] :is(.kpi-track, .stage-track, .time-track, .metric-track) {
    background: #263449;
}

.page[data-theme="dark"] :is(.kpi-track span, .stage-track span, .time-track span, .metric-track span) {
    background: var(--theme-primary);
}

.page[data-theme="dark"] .notice {
    background: var(--theme-success-soft);
    border-color: rgba(71, 209, 139, 0.3);
    color: var(--theme-success);
}

.page[data-theme="dark"] .notice.error {
    background: var(--theme-danger-soft);
    border-color: rgba(255, 93, 126, 0.3);
    color: var(--theme-danger);
}

.page[data-theme="dark"] .summary-tab-rail {
    background: #07111f;
    border-color: #21344a;
}

.page[data-theme="dark"] .summary-tab-rail button {
    color: #9fb3ca;
}

.page[data-theme="dark"] .summary-tab-rail button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.page[data-theme="dark"] .summary-tab-rail button.active {
    background: var(--theme-primary-soft);
    color: var(--theme-primary-strong);
}

.page[data-theme="dark"] .summary-floating-actions {
    background: rgba(21, 31, 45, 0.94);
}

.page[data-theme="dark"] :is(.summary-drawer-surface, .summary-tab-rail) {
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.page[data-theme="dark"] .summary-resize-handle::after {
    background: var(--theme-border-strong);
}

.page[data-theme="dark"] .summary-resize-handle:hover::after {
    background: var(--theme-primary);
}

.page[data-theme="dark"] .tabulation-sheet {
    background: #111a27;
}

.page[data-theme="dark"] .tabulation-sheet input {
    background: transparent;
}

.page[data-theme="dark"] .tabulation-sheet input.formula-cell {
    background: #172b42;
    color: var(--theme-primary-strong);
}

.page[data-theme="dark"] .tabulation-sheet input.selected-cell {
    box-shadow: inset 0 0 0 2px var(--theme-primary);
}

.page[data-theme="dark"] .tabulation-sheet input.referenced-cell {
    background: #3d331b;
    box-shadow: inset 0 0 0 2px var(--theme-warning);
}

.page[data-theme="dark"] :is(.tabulation-add-row td, .tabulation-add-row-button) {
    background: var(--theme-surface-soft);
    border-color: var(--theme-border);
    color: var(--theme-primary);
}

.page[data-theme="dark"] .freeze-first-column :is(th:first-child, td:first-child) {
    background: var(--theme-table-head);
    box-shadow: 1px 0 0 var(--theme-border);
}

.page[data-theme="dark"] .paint-summary-table th:last-child {
    background: #3d331b;
    color: var(--theme-warning);
}

.page[data-theme="dark"] .paint-summary-table td:last-child {
    background: #302917;
    color: #ffd479;
}

.page[data-theme="dark"] .dashboard-table-wrap .project-cell {
    background: var(--theme-surface);
}

.page[data-theme="dark"] .dashboard-table-wrap tbody tr.selected .project-cell {
    background: var(--theme-table-selected);
}

.page[data-theme="dark"] .dashboard-table-wrap tbody tr:hover .project-cell {
    background: var(--theme-table-hover);
}

.page[data-theme="dark"] .dashboard-table-wrap .project-cell strong,
.page[data-theme="dark"] .stage-count-cell span {
    background: var(--theme-primary-soft);
    border-color: rgba(94, 168, 255, 0.32);
    color: var(--theme-primary-strong);
}

.page[data-theme="dark"] .completion-meter strong,
.page[data-theme="dark"] .hour-meter strong {
    color: var(--theme-primary-strong);
}

.page[data-theme="dark"] .completion-meter span,
.page[data-theme="dark"] .hour-meter span {
    background: #263449;
}

.page[data-theme="dark"] .mode-banner {
    background: rgba(31, 39, 67, 0.3);
    color: #58a4ff;
}

.page[data-theme="dark"] .mode-banner.adding {
    background: rgba(29, 46, 45, 0.3);
    color: #47d18b;
}

.page[data-theme="dark"] .advanced-search-window,
.page[data-theme="dark"] .grid-context-menu {
    background: var(--theme-surface-raised);
    border-color: var(--theme-border-strong);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
    color: var(--theme-text);
}

.page[data-theme="dark"] .advanced-title {
    background: var(--theme-topbar);
    color: var(--theme-heading);
}

.page[data-theme="dark"] ::selection {
    background: rgba(94, 168, 255, 0.35);
}

.page[data-theme="dark"] :is(
    .estimate-grid-table td.changed-cell,
    .estimate-grid-table tbody tr:hover:not(.estimate-group-row) td.changed-cell,
    .estimate-grid-table .estimate-data-row.selected td.changed-cell,
    .estimate-grid-table .estimate-data-row.selected td.changed-cell.frozen-column,
    .mini-table td.changed-cell,
    .mini-table tbody tr.selected td.changed-cell,
    .mini-table tbody tr.selected:hover td.changed-cell,
    .tabulation-sheet input.changed-cell,
    .tabulation-sheet input.changed-cell.selected-cell,
    .tabulation-sheet input.changed-cell.referenced-cell
) {
    --changed-cell-bg: color-mix(in srgb, var(--changed-cell-color, var(--theme-warning)) 34%, var(--theme-surface-raised));
    background: linear-gradient(90deg, var(--changed-cell-color, var(--theme-warning)) 0 3px, var(--changed-cell-bg) 3px) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--changed-cell-color, var(--theme-warning)) 36%, transparent);
    color: var(--theme-heading) !important;
}

.page :is(
    label > span,
    .field span,
    .project-cost-label,
    .tabulation-setup-row label span,
    .global-edit-grid label span,
    .dialog-form-grid label span
) {
    font-weight: 400 !important;
}

.page :is(
    th,
    .estimate-column-header,
    .utility-table th,
    .unit-table th,
    .mini-table th,
    .summary-table th,
    .dialog-table th,
    .dashboard-table-wrap th,
    .selector-table-scroll th,
    .tabulation-sheet th
) {
    font-weight: 400 !important;
}

.page-breadcrumb-title {
    align-items: center !important;
    display: inline-flex !important;
    gap: 5px !important;
    line-height: normal !important;
    min-height: 30px !important;
    min-width: 0 !important;
    overflow: visible !important;
    white-space: nowrap !important;
}

.page-breadcrumb-title > span {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: auto !important;
    line-height: 1.45 !important;
    min-height: 30px !important;
    overflow: visible !important;
    padding: 2px 0 4px !important;
}

.page-breadcrumb-title .breadcrumb-root {
    color: var(--theme-primary, #5aa6e8) !important;
    font-size: 17px !important;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    line-height: 1.45 !important;
    text-transform: none !important;
}

.page-breadcrumb-title .breadcrumb-separator {
    color: var(--theme-soft-muted, #9aa9b8) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    transform: none !important;
}

.page-breadcrumb-title .breadcrumb-current {
    color: var(--theme-muted, #6f7f90) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1.45 !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-bottom: 4px !important;
    padding-top: 2px !important;
    text-overflow: clip !important;
    text-transform: none !important;
}

.page :is(
    button,
    .btn,
    .tool-button,
    .icon-button,
    .square-button,
    .icon-tool,
    .icon-only,
    .scope-icon-action,
    .component-action-button,
    .summary-icon-button,
    .context-actions button,
    .tabulation-template-actions button,
    .tabulation-footer-actions button,
    .summary-tabs button,
    .primary-action,
    .icon-action
) {
    font-family: var(--button-font, Inter, "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.page :is(
    .tool-button.primary:hover:not(:disabled),
    .icon-tool.primary:hover:not(:disabled),
    .component-action-button.primary:hover:not(:disabled),
    .open-project-button:hover:not(:disabled),
    .primary-action:hover:not(:disabled)
) {
    background: var(--theme-primary-strong, #184c84) !important;
    border-color: var(--theme-primary-strong, #184c84) !important;
    color: #ffffff !important;
}

.page[data-theme="dark"] :is(
    .tool-button.primary:hover:not(:disabled),
    .icon-tool.primary:hover:not(:disabled),
    .component-action-button.primary:hover:not(:disabled),
    .open-project-button:hover:not(:disabled),
    .primary-action:hover:not(:disabled)
) {
    background: var(--theme-primary-strong, #83bdff) !important;
    border-color: var(--theme-primary-strong, #83bdff) !important;
    color: #07111f !important;
}

.page[data-theme="dark"] .takeoff-page {
    --estimate-grid-dark-text: var(--theme-text);
    --estimate-grid-dark-heading: var(--theme-heading);
    --estimate-grid-dark-border: rgba(109, 133, 162, 0.34);
    --estimate-grid-dark-selected: #0b7fc7;
    --estimate-grid-dark-selected-border: rgba(115, 196, 255, 0.36);
    --estimate-grid-dark-pieces: #1d6f73;
    --estimate-grid-dark-pieces-text: #eaffff;
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table td {
    border-color: var(--estimate-grid-dark-border);
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table .estimate-data-row.alternating td:not(.changed-cell) {
    background: color-mix(in srgb, var(--estimate-alternating-row, var(--theme-surface-muted)) 26%, var(--theme-surface-raised));
    color: var(--estimate-grid-dark-text);
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table .estimate-data-row.revision-added td:not(.changed-cell) {
    background: color-mix(in srgb, var(--estimate-rev-added-row, var(--theme-success)) 30%, var(--theme-surface-raised));
    color: var(--estimate-grid-dark-heading);
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table .estimate-data-row.revised td:not(.changed-cell) {
    background: color-mix(in srgb, var(--estimate-rev-modified-row, var(--theme-warning)) 28%, var(--theme-surface-raised));
    color: var(--estimate-grid-dark-heading);
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table .estimate-data-row.strikeout td:not(.changed-cell) {
    background: color-mix(in srgb, var(--estimate-strikeout-row, var(--theme-warning)) 24%, var(--theme-surface-raised));
    color: color-mix(in srgb, var(--estimate-grid-dark-text) 72%, var(--theme-soft-muted));
    text-decoration-color: color-mix(in srgb, var(--theme-danger) 76%, #ffdfdf);
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table td.pieces-cell:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table .estimate-data-row.alternating td.pieces-cell:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr:hover:not(.estimate-group-row) td.pieces-cell:not(.changed-cell) {
    background: var(--estimate-grid-dark-pieces);
    color: var(--estimate-grid-dark-pieces-text);
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr:hover:not(.estimate-group-row) td:not(.changed-cell) {
    background: color-mix(in srgb, var(--theme-table-hover) 82%, var(--theme-primary) 18%);
    color: var(--estimate-grid-dark-heading);
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr:hover:not(.estimate-group-row) td.pieces-cell:not(.changed-cell) {
    background: var(--estimate-grid-dark-pieces);
    color: var(--estimate-grid-dark-pieces-text);
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.selected > td:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.selected:hover > td:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.selected > td.frozen-column:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.selected:hover > td.frozen-column:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.selected > td.pieces-cell:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.selected:hover > td.pieces-cell:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.selected > td.emphasis-cell:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.selected:hover > td.emphasis-cell:not(.changed-cell) {
    background: var(--estimate-grid-dark-selected);
    box-shadow: inset 0 1px 0 var(--estimate-grid-dark-selected-border), inset 0 -1px 0 rgba(0, 0, 0, 0.28);
    color: #ffffff;
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.notification-target > td:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.notification-target > td.frozen-column:not(.changed-cell),
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr.estimate-data-row.notification-target:hover > td:not(.changed-cell) {
    background: color-mix(in srgb, var(--theme-warning) 22%, var(--theme-surface-raised));
    color: var(--estimate-grid-dark-heading);
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table td.changed-cell,
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr:hover:not(.estimate-group-row) td.changed-cell,
.page[data-theme="dark"] .takeoff-page .estimate-grid-table .estimate-data-row.selected td.changed-cell,
.page[data-theme="dark"] .takeoff-page .estimate-grid-table .estimate-data-row.selected td.changed-cell.frozen-column {
    --changed-cell-bg: color-mix(in srgb, var(--changed-cell-color, var(--theme-warning)) 30%, var(--theme-surface-raised));
    background: linear-gradient(90deg, var(--changed-cell-color, var(--theme-warning)) 0 3px, var(--changed-cell-bg) 3px) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--changed-cell-color, var(--theme-warning)) 44%, transparent);
    color: var(--estimate-grid-dark-heading) !important;
}

.page[data-theme="dark"] .takeoff-page .estimate-grid-table td.cell-tag-active-cell,
.page[data-theme="dark"] .takeoff-page .estimate-grid-table td.cell-tag-active-cell.frozen-column,
.page[data-theme="dark"] .takeoff-page .estimate-grid-table tbody tr:hover:not(.estimate-group-row) td.cell-tag-active-cell,
.page[data-theme="dark"] .takeoff-page .estimate-grid-table td.cell-tag-active-cell.changed-cell {
    background: color-mix(in srgb, var(--theme-primary) 20%, var(--theme-surface-raised)) !important;
    color: var(--estimate-grid-dark-heading) !important;
}