.crm-blueprint-shell,
:root {
    --ui-text-secondary-color: rgba(226, 232, 240, 0.72);
    --ui-base-50: rgba(15, 23, 42, 0.45);
    --ui-base-200: rgba(148, 163, 184, 0.14);
    --ui-base-300: rgba(148, 163, 184, 0.2);
}

.bb-compat-card { border-radius: 8px; }
.ui-control-style-host { display: block; width: 100%; }
.ui-card-content { padding: 1rem; }
.ui-column { grid-column: span var(--ui-col-size, 12); min-width: 0; }
@media (min-width: 768px) {
    .ui-column { grid-column: span var(--ui-col-md, var(--ui-col-size, 12)); }
}
@media (min-width: 1024px) {
    .ui-column { grid-column: span var(--ui-col-lg, var(--ui-col-md, var(--ui-col-size, 12))); }
}
.ui-text-h4, .ui-text-h5, .ui-text-h6 { color: var(--foreground); font-weight: 750; letter-spacing: 0; }
.ui-text-body2, .ui-text-caption { color: var(--ui-text-secondary-color); }
.ui-mb-0 { margin-bottom: 0 !important; }
.ui-mb-1 { margin-bottom: .25rem !important; }
.ui-mb-2 { margin-bottom: .5rem !important; }
.ui-mb-3 { margin-bottom: .75rem !important; }
.ui-mb-4 { margin-bottom: 1rem !important; }
.ui-mt-1 { margin-top: .25rem !important; }
.ui-mt-2 { margin-top: .5rem !important; }
.ui-mt-3 { margin-top: .75rem !important; }
.ui-my-3 { margin-top: .75rem !important; margin-bottom: .75rem !important; }
.ui-ml-1 { margin-left: .25rem !important; }
.ui-button-icon, .ui-icon { font-size: 1.05rem; line-height: 1; vertical-align: middle; }

.ui-form-field { display: grid; gap: .38rem; }
.ui-form-field-label, .ui-label { color: rgba(226, 232, 240, .82); font-size: .78rem; font-weight: 700; }
.ui-dropdown, .ui-datepicker, .ui-numeric, .ui-inputtext, .ui-textarea { width: 100%; min-height: 2.5rem; }
.ui-dropdown, .ui-datepicker {
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    padding: 0 .75rem;
}

.ui-tabview { display: grid; gap: 1rem; }
.ui-tabview-panel {
    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 8px;
    background: rgba(2, 6, 23, .18);
    padding: 1rem;
}
.ui-tab-title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .85rem; color: var(--foreground); font-size: .95rem; }
.ui-grid-table-wrap, .crm-bb-grid-container { overflow: auto; }
.ui-grid-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ui-grid-table th, .ui-grid-table td {
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    padding: .65rem .75rem;
    text-align: left;
    vertical-align: top;
}
.ui-grid-table th { color: rgba(226, 232, 240, .78); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.ui-grid-table tbody tr:hover { background: rgba(148, 163, 184, .08); }
.ui-paginator { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding-top: .75rem; color: var(--ui-text-secondary-color); }
.ui-paginator button {
    border: 1px solid rgba(148, 163, 184, .18);
    border-radius: 8px;
    background: rgba(30, 41, 59, .72);
    color: var(--foreground);
    padding: .35rem .65rem;
}
.ui-paginator button:disabled { opacity: .45; }
.ui-datalist { display: grid; gap: .75rem; }
.ui-datalist-item { border: 1px solid rgba(148, 163, 184, .14); border-radius: 8px; padding: .75rem; }
.ui-progressbar-circular {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(148, 163, 184, .2);
    border-top-color: #34d399;
    border-radius: 999px;
    animation: ui-spin .8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }