:root,
[data-bs-theme="light"] {
    --ec-surface: var(--bs-body-bg);
    --ec-surface-alt: #f8f9fa;
    --ec-surface-sunken: #eef0f3;
    --ec-border: var(--bs-border-color);
    --ec-border-strong: #adb5bd;
    --ec-text: var(--bs-body-color);
    --ec-text-muted: #6c757d;
    --ec-text-soft: #495057;
    --ec-accent: var(--bs-primary);
    --ec-accent-soft: #e7f1ff;
    --ec-accent-border: #9ec5fe;
    --ec-selected-bg: #cfe2ff;
    --ec-selected-border: #0d6efd;
    --ec-invalid-bg: #f8d7da;
    --ec-invalid-border: #f1aeb5;
    --ec-invalid-text: #842029;
    --ec-warning-bg: #fff3cd;
    --ec-warning-border: #ffe69c;
    --ec-success-bg: #f3faf6;
    --ec-success-border: #badbcc;
    --ec-info-bg: #f1f7ff;
    --ec-info-border: #b6d4fe;
    --ec-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    --ec-kbd-bg: #f1f3f5;
    --ec-kbd-border: #ced4da;
    --ec-kbd-text: #343a40;
    --ec-button-text: #343a40;
    --ec-button-border: #adb5bd;
    --ec-button-hover-bg: #e9ecef;
    --ec-canvas-bg: #ffffff;
    --cad-viewport-background: #ffffff;
    --cad-viewport-ruler-background: #f4f5f7;
    --cad-viewport-border: #d9dce1;
    --cad-viewport-accent: #c05a32;
    --cad-viewport-ruler-tick: #9aa0aa;
    --cad-viewport-ruler-text: #5b616b;
    --cad-viewport-toolbar-background: rgba(255, 255, 255, .92);
    --cad-viewport-toolbar-text: #3d434c;
    --cad-viewport-toolbar-hover: #eef0f3;
    --cad-surface: #ffffff;
    --cad-surface-muted: #f6f5f1;
    --cad-surface-raised: #fbfaf7;
    --cad-hover: #f2f0ea;
    --cad-border: #e0ded6;
    --cad-border-strong: #c9c6bc;
    --cad-text: #17181c;
    --cad-title: #4a4842;
    --cad-muted: #6b6a63;
    --cad-muted-soft: #a8a49a;
    --cad-disabled: #b3b0a7;
    --cad-accent: #c05a32;
    --cad-accent-strong: #a34a28;
    --cad-accent-soft: #fbf4ef;
    --cad-accent-border: rgba(192, 90, 50, .5);
    --cad-accent-focus: rgba(192, 90, 50, .18);
    --cad-danger: #b3261e;
    --cad-danger-soft: rgba(179, 38, 30, .1);
    --cad-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    --cad-swatch-border: rgba(0, 0, 0, .15);
    --cad-canvas: #14161b;
    --cad-canvas-grid: #232730;
    --cad-canvas-chrome: #1c1f26;
    --cad-canvas-border: #343a45;
    --cad-canvas-text: #8b8f99;
    --cad-badge-bg: rgba(32, 36, 44, .9);
    --cad-badge-text: #d6d3cb;
    --cad-badge-accent-bg: rgba(192, 90, 50, .16);
    --cad-badge-accent-text: #e8a184;
    --cad-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

[data-bs-theme="dark"] {
    --ec-surface: var(--bs-body-bg);
    --ec-surface-alt: #1f2328;
    --ec-surface-sunken: #171a1e;
    --ec-border: var(--bs-border-color);
    --ec-border-strong: #5c636a;
    --ec-text: var(--bs-body-color);
    --ec-text-muted: #9aa3ad;
    --ec-text-soft: #c1c7cd;
    --ec-accent: #6ea8fe;
    --ec-accent-soft: rgba(110, 168, 254, .14);
    --ec-accent-border: #3d6db5;
    --ec-selected-bg: rgba(110, 168, 254, .22);
    --ec-selected-border: #6ea8fe;
    --ec-invalid-bg: rgba(220, 53, 69, .22);
    --ec-invalid-border: #842029;
    --ec-invalid-text: #ea868f;
    --ec-warning-bg: rgba(255, 193, 7, .16);
    --ec-warning-border: #997404;
    --ec-success-bg: rgba(25, 135, 84, .16);
    --ec-success-border: #0f5132;
    --ec-info-bg: rgba(13, 110, 253, .14);
    --ec-info-border: #084298;
    --ec-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    --ec-kbd-bg: #2b3035;
    --ec-kbd-border: #495057;
    --ec-kbd-text: #dee2e6;
    --ec-button-text: #dee2e6;
    --ec-button-border: #5c636a;
    --ec-button-hover-bg: #343a40;
    --ec-canvas-bg: #1b1e22;
    --cad-viewport-background: #1b1e22;
    --cad-viewport-ruler-background: #23272c;
    --cad-viewport-border: #3a4047;
    --cad-viewport-accent: #f08c5a;
    --cad-viewport-ruler-tick: #7b838c;
    --cad-viewport-ruler-text: #b5bcc3;
    --cad-viewport-toolbar-background: rgba(35, 39, 44, .92);
    --cad-viewport-toolbar-text: #dee2e6;
    --cad-viewport-toolbar-hover: #343a40;
    --cad-viewport-toolbar-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    --cad-surface: #1e2126;
    --cad-surface-muted: #262a30;
    --cad-surface-raised: #23272c;
    --cad-hover: #2c3138;
    --cad-border: #343940;
    --cad-border-strong: #4b525b;
    --cad-text: #e8e6e1;
    --cad-title: #b4b1a9;
    --cad-muted: #9ea29f;
    --cad-muted-soft: #6f747b;
    --cad-disabled: #5b6067;
    --cad-accent: #e07a50;
    --cad-accent-strong: #ea916c;
    --cad-accent-soft: rgba(224, 122, 80, .14);
    --cad-accent-border: rgba(224, 122, 80, .55);
    --cad-accent-focus: rgba(224, 122, 80, .3);
    --cad-danger: #f08080;
    --cad-danger-soft: rgba(240, 128, 128, .14);
    --cad-shadow: 0 10px 28px rgba(0, 0, 0, .55);
    --cad-swatch-border: rgba(255, 255, 255, .2);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ec-button-text);
    --bs-btn-border-color: var(--ec-button-border);
    --bs-btn-hover-color: var(--ec-text);
    --bs-btn-hover-bg: var(--ec-button-hover-bg);
    --bs-btn-hover-border-color: var(--ec-border-strong);
    --bs-btn-active-color: var(--ec-text);
    --bs-btn-active-bg: var(--ec-button-hover-bg);
    --bs-btn-active-border-color: var(--ec-border-strong);
    --bs-btn-disabled-color: var(--ec-text-muted);
    --bs-btn-disabled-border-color: var(--ec-border);
    --bs-btn-disabled-bg: transparent;
}

.btn:not(:disabled):not(.disabled) img {
    opacity: 1;
    filter: none;
}

[data-bs-theme="dark"] .btn img,
[data-bs-theme="dark"] .menu img,
[data-bs-theme="dark"] .nav-link img,
[data-bs-theme="dark"] .dropdown-item img {
    filter: invert(1) hue-rotate(180deg) brightness(1.08) saturate(1.15);
}

[data-bs-theme="dark"] .btn.disabled img,
[data-bs-theme="dark"] .btn:disabled img {
    opacity: .45;
}

kbd.ec-kbd,
.ec-kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: .05rem .35rem;
    font-family: var(--bs-font-monospace);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ec-kbd-text);
    text-align: center;
    background: var(--ec-kbd-bg);
    border: 1px solid var(--ec-kbd-border);
    border-bottom-width: 2px;
    border-radius: 4px;
    box-shadow: none;
}

.tooltip-inner {
    max-width: 320px;
    text-align: left;
}

[data-bs-theme="dark"] .cad-viewport-viewer svg,
[data-bs-theme="dark"] .shape-card-preview svg {
    filter: invert(1) hue-rotate(180deg);
}

.bb-image-icon {
    color: var(--ec-icon-color, currentColor);
}

.menu .bb-image-icon,
.dropdown-item .bb-image-icon,
.nav-link .bb-image-icon {
    --ec-icon-color: var(--ec-text-soft);
}

.bb-image-icon[style*="/icons/delete."],
.bb-image-icon[style*="/icons/remove-"],
.bb-image-icon[style*="/icons/cancel."],
.bb-image-icon[style*="/icons/close"],
.bb-image-icon[style*="/icons/clearcollection."] {
    --ec-icon-color: var(--ec-icon-danger);
}

.bb-image-icon[style*="/icons/add-"],
.bb-image-icon[style*="/icons/new"],
.bb-image-icon[style*="/icons/accept-part."],
.bb-image-icon[style*="/icons/activate."],
.bb-image-icon[style*="/icons/task-complete."] {
    --ec-icon-color: var(--ec-icon-success);
}

.bb-image-icon[style*="/icons/save"],
.bb-image-icon[style*="/icons/transfer"],
.bb-image-icon[style*="/icons/uploaddatabase."] {
    --ec-icon-color: var(--ec-icon-primary);
}

.bb-image-icon[style*="/icons/security-shields-alert."] {
    --ec-icon-color: var(--ec-icon-warning);
}

:root,
[data-bs-theme="light"] {
    --ec-icon-danger: #c0392b;
    --ec-icon-success: #1e8a4c;
    --ec-icon-primary: #1f63c6;
    --ec-icon-warning: #b8860b;
}

[data-bs-theme="dark"] {
    --ec-icon-danger: #f08080;
    --ec-icon-success: #6fcf97;
    --ec-icon-primary: #7fb2ff;
    --ec-icon-warning: #f2c94c;
}

.btn:disabled .bb-image-icon,
.btn.disabled .bb-image-icon,
.disabled > .bb-image-icon {
    --ec-icon-color: var(--ec-text-muted);
    opacity: .6;
}

.ec-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--ec-surface);
    border: 1px solid var(--ec-border);
    border-radius: 8px;
}

.ec-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 32px;
    padding: .3rem .65rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ec-text-muted);
    background: var(--ec-surface-alt);
    border-bottom: 1px solid var(--ec-border);
    border-radius: 8px 8px 0 0;
}

.ec-card-body {
    min-width: 0;
    padding: .5rem .65rem;
}

.ec-card-body-flush {
    min-width: 0;
    padding: 0;
}

.ec-fields {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    align-items: center;
    gap: .35rem .5rem;
    font-size: .85rem;
}

.ec-fields > .ec-field-label {
    overflow: hidden;
    color: var(--ec-text-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-fields > .ec-field-full {
    grid-column: 1 / -1;
    min-width: 0;
}

.ec-fields > .ec-field-stacked {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    grid-column: 1 / -1;
    min-width: 0;
}

.ec-fields > .ec-field-stacked > .ec-field-label {
    color: var(--ec-text-soft);
}

.ec-fields .form-control,
.ec-fields .form-select {
    min-width: 0;
    min-height: 30px;
    padding: .2rem .45rem;
    font-size: .85rem;
}

.ec-fields .form-check {
    min-height: 0;
    margin: 0;
}

.ec-field-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.ec-field-actions > .form-control,
.ec-field-actions > .input-group,
.ec-field-actions > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.ec-field-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
}

.ec-section-title {
    margin: .35rem 0 .15rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ec-text-muted);
}

.ec-tabs-compact .tabs-item {
    padding: .3rem .6rem;
    font-size: .8rem;
}

.ec-tabs-compact .tabs-body {
    padding: .5rem .6rem;
}

.ec-mini-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem;
    min-width: 0;
}

.ec-mini-toolbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
}

.ec-mini-toolbar .btn:not(:disabled):not(.disabled):hover {
    background: var(--ec-button-hover-bg);
    border-color: var(--ec-border);
}

.ec-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.ec-list .table {
    font-size: .82rem;
}

.ec-list .table .form-control,
.ec-list .table .form-select {
    min-height: 26px;
    padding: .1rem .35rem;
    font-size: .82rem;
}

.ec-list-details {
    padding-top: .5rem;
    border-top: 1px solid var(--ec-border);
}

.ec-mini-toolbar-separator {
    flex: 0 0 auto;
    width: 1px;
    height: 18px;
    margin: 0 .3rem;
    background: var(--ec-border);
}

.ec-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    align-items: start;
    gap: .6rem;
    min-width: 0;
}

.ec-switch-list {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
    font-size: .85rem;
}

.ec-switch-list .form-check,
.ec-switch-list .switch {
    min-height: 0;
    margin: 0;
}

.ec-field-value {
    min-width: 0;
    overflow: hidden;
    color: var(--ec-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5rem;
    padding: .75rem;
    font-size: .85rem;
    color: var(--ec-text-muted);
    text-align: center;
}

.ec-dialog-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid var(--ec-border);
}

.ec-fill-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ec-fill-tabs > .tabs {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.ec-fill-tabs > .tabs > .tabs-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.ec-fill-tabs > .tabs > .tabs-body > .tabs-body-content {
    height: 100%;
}

.ec-list.ec-list-fill {
    height: 100%;
    min-height: 0;
}

.ec-list.ec-list-fill > .table-container {
    flex: 1 1 auto;
    min-height: 0;
}