/* djust Components - Themed with djust-theming */
/* Uses design tokens and theme variables for automatic theme adaptation */

/* ==========================================================================
   DX14 Follow-up TODO (separate tasks):
   - ARIA compliance audit: Verify all 52+ components meet WCAG 2.1 AA
   - Dark mode testing: Verify all components render with light and dark tokens
   - CSS size audit: Consider splitting or tree-shaking for production
   - Toast UX upgrade: Sonner-style stacked toasts, swipe-to-dismiss
   - Django template tag parity: Add tags for components 13-52 (Rust-only)
   - Responsive testing strategy: Define breakpoints per component category
   - Container queries: Card, StatCard, Data Table adapt to container width
   ========================================================================== */

/* ==========================================================================
   Shared Keyframes
   Reusable animation keyframes referenced by multiple components.
   Defined outside @layer so they are globally available.
   ========================================================================== */

/* Spin — used by spinners, loaders, and button loading states */
@keyframes dj-spin { to { transform: rotate(360deg); } }

/* Pulse — subtle scale+opacity heartbeat for status dots and badges */
@keyframes dj-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } }

/* Fade — simple opacity blink for cursors and status indicators */
@keyframes dj-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Shimmer — skeleton loading placeholder sweep */
@keyframes dj-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

/* Slide-in-right — toast and notification entry */
@keyframes dj-slide-in-right { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Slide-in-up — toast, counter, and dropdown entry */
@keyframes dj-slide-in-up { from { transform: translateY(0.5rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Slide-out-up — toast exit */
@keyframes dj-slide-out-up { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-0.5rem); opacity: 0; } }

/* Flash — brief visible-then-fade for reconnection status */
@keyframes dj-flash { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; display: none; } }

/* Counter-roll — number change animation */
@keyframes dj-counter-roll { 0% { transform: translateY(-0.2em); opacity: 0.5; } 100% { transform: translateY(0); opacity: 1; } }

/* Chat-bounce — staggered dots for typing/thinking indicators */
@keyframes dj-chat-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-0.3rem); opacity: 1; } }

@layer djust-components {

/* Modal (rendered: dj-modal-backdrop, dj-modal, dj-modal__header/title/close/body) */
.modal-overlay, .dj-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--space-4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(0, 0, 0, 0.5); }
.modal-content, .dj-modal { background: hsl(var(--card) / 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); max-width: 32rem; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-header, .dj-modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid hsl(var(--border)); }
.modal-title, .dj-modal__title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: hsl(var(--foreground)); margin: 0; }
.dj-modal__close { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: hsl(var(--muted-foreground)); font-size: var(--text-lg); padding: var(--space-1); border-radius: var(--radius-sm); }
.dj-modal__close:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.modal-body, .dj-modal__body { padding: var(--space-6); color: hsl(var(--foreground)); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.modal-footer, .dj-modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid hsl(var(--border)); }
.modal-sm .modal-content, .dj-modal--sm { max-width: 24rem; }
.modal-md .modal-content, .dj-modal--md { max-width: 32rem; }
.modal-lg .modal-content, .dj-modal--lg { max-width: 48rem; }
.modal-xl .modal-content, .dj-modal--xl { max-width: 64rem; }

/* Tabs (rendered: dj-tabs, dj-tabs__nav, dj-tab, dj-tab--active, dj-tabs__pane) */
.tabs-container, .dj-tabs { width: 100%; }
.tabs-nav, .dj-tabs__nav { display: flex; border-bottom: 1px solid hsl(var(--border)); gap: 0; }
.tabs-trigger, .dj-tab { padding: 0.625rem 1rem; font-size: var(--text-sm, 0.875rem); font-weight: var(--font-medium, 500); color: hsl(var(--muted-foreground)); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.tabs-trigger:hover, .dj-tab:hover { color: hsl(var(--foreground)); }
.tabs-trigger[data-active="true"], .dj-tab--active { color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary)); }
.tabs-content, .dj-tabs__pane { padding: 1rem 0; color: hsl(var(--foreground)); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* Accordion (rendered: dj-accordion, dj-accordion-item, dj-accordion__trigger/chevron/content) */
.accordion, .dj-accordion { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }
.accordion-item, .dj-accordion-item { border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius, 0.5rem) + 2px); overflow: hidden; background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); }
.accordion-trigger, .dj-accordion__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 1rem; background: transparent; border: none; cursor: pointer; text-align: start; color: hsl(var(--foreground)); font-size: var(--text-sm, 0.875rem); font-weight: var(--font-medium, 500); transition: background 0.15s ease; }
.accordion-trigger:hover, .dj-accordion__trigger:hover { background: hsl(var(--accent)); }
.accordion-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: hsl(var(--foreground)); }
.accordion-icon, .dj-accordion__chevron { font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground)); transition: transform 0.2s ease; flex-shrink: 0; }
.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); color: hsl(var(--primary)); }
.accordion-panel, .dj-accordion__content { padding: 0 1rem 1rem; color: hsl(var(--card-foreground)); font-size: var(--text-sm, 0.875rem); line-height: var(--leading-relaxed, 1.625); }
.accordion-panel[hidden] { display: none; }

/* Dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown-trigger { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: hsl(var(--primary) / 0.1); border: 1px solid hsl(var(--primary) / 0.2); border-radius: var(--radius-md); color: hsl(var(--primary)); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: all var(--duration-normal) ease; }
.dropdown-trigger:hover { background: hsl(var(--primary) / 0.2); border-color: hsl(var(--primary) / 0.3); }
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 12rem; margin-top: var(--space-2); padding: var(--space-2); background: hsl(var(--card) / 0.95); backdrop-filter: blur(20px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(calc(-1 * var(--space-2))); transition: all var(--duration-normal) ease; }
.dropdown-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-divider { height: 1px; margin: var(--space-2) 0; background: hsl(var(--border)); }
.dropdown-item { display: block; width: 100%; padding: var(--space-2) var(--space-3); background: transparent; border: none; border-radius: var(--radius-sm); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); text-align: start; cursor: pointer; transition: all var(--duration-fast) ease; text-decoration: none; }
.dropdown-item:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.dropdown-item.danger:hover { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); }

/* Toast */
.toast-container { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 100; display: flex; flex-direction: column; gap: var(--space-2); max-width: 24rem; pointer-events: none; }
.toast { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: hsl(var(--card) / 0.95); backdrop-filter: blur(20px); border: 1px solid; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); pointer-events: auto; animation: dj-slide-in-right 0.3s ease-out; }
.toast-success { border-color: hsl(var(--success) / 0.3); background: hsl(var(--success) / 0.1); }
.toast-error { border-color: hsl(var(--destructive) / 0.3); background: hsl(var(--destructive) / 0.1); }
.toast-warning { border-color: hsl(var(--warning) / 0.3); background: hsl(var(--warning) / 0.1); }
.toast-info { border-color: hsl(var(--info) / 0.3); background: hsl(var(--info) / 0.1); }
.toast-icon { width: var(--space-5); height: var(--space-5); flex-shrink: 0; }
.toast-success .toast-icon { color: hsl(var(--success)); }
.toast-error .toast-icon { color: hsl(var(--destructive)); }
.toast-warning .toast-icon { color: hsl(var(--warning)); }
.toast-info .toast-icon { color: hsl(var(--info)); }
.toast-message { flex: 1; font-size: var(--text-sm); font-weight: var(--font-medium); color: hsl(var(--foreground)); }
.toast-close { padding: var(--space-1); background: transparent; border: none; color: hsl(var(--muted-foreground)); cursor: pointer; border-radius: var(--radius-sm); transition: all var(--duration-fast) ease; }
.toast-close:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }

/* Tooltip */
/* Tooltip (rendered: dj-tooltip, dj-tooltip--top/bottom, dj-tooltip__text) */
.tooltip-wrapper, .dj-tooltip { position: relative; display: inline-flex; }
.tooltip, .dj-tooltip__text { position: absolute; z-index: 50; padding: var(--space-1) var(--space-3); background: hsl(var(--card) / 0.95); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-medium); color: hsl(var(--foreground)); white-space: nowrap; opacity: 0; visibility: hidden; transition: all var(--duration-normal) ease; pointer-events: none; }
.tooltip-wrapper:hover .tooltip, .dj-tooltip:hover .dj-tooltip__text { opacity: 1; visibility: visible; }
.tooltip-top, .dj-tooltip--top .dj-tooltip__text { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: var(--space-2); }
.tooltip-bottom, .dj-tooltip--bottom .dj-tooltip__text { top: 100%; left: 50%; transform: translateX(-50%); margin-top: var(--space-2); }
.tooltip-left, .dj-tooltip--left .dj-tooltip__text { right: 100%; top: 50%; transform: translateY(-50%); margin-inline-end: var(--space-2); }
.tooltip-right, .dj-tooltip--right .dj-tooltip__text { left: 100%; top: 50%; transform: translateY(-50%); margin-inline-start: var(--space-2); }
.tooltip::after { content: ''; position: absolute; width: 0; height: 0; border: 5px solid transparent; }
.tooltip-top::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: hsl(var(--border)); }
.tooltip-bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: hsl(var(--border)); }
.tooltip-left::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: hsl(var(--border)); }
.tooltip-right::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: hsl(var(--border)); }

/* Progress */
.progress-wrapper { display: flex; flex-direction: column; gap: var(--space-1); }
.progress-label-row { display: flex; align-items: center; justify-content: space-between; }
.progress-label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: hsl(var(--foreground)); }
.progress-value { font-size: var(--text-xs); font-weight: var(--font-semibold); font-variant-numeric: tabular-nums; color: hsl(var(--muted-foreground)); }
.progress-track { width: 100%; height: 0.625rem; background: hsl(var(--muted)); border-radius: var(--radius-full); overflow: hidden; }
.progress-track-sm { height: 0.375rem; }
.progress-track-lg { height: 0.875rem; }
.progress-bar { height: 100%; border-radius: var(--radius-full); background: hsl(var(--primary)); transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.progress-bar.success { background: hsl(var(--success)); }
.progress-bar.warning { background: hsl(var(--warning)); }
.progress-bar.danger { background: hsl(var(--destructive)); }
.progress-bar.info { background: hsl(var(--info)); }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); border: 1px solid; }
.badge-online { background: hsl(var(--success) / 0.1); border-color: hsl(var(--success) / 0.2); color: hsl(var(--success)); }
.badge-offline { background: hsl(var(--muted) / 0.1); border-color: hsl(var(--muted-foreground) / 0.2); color: hsl(var(--muted-foreground)); }
.badge-warning { background: hsl(var(--warning) / 0.1); border-color: hsl(var(--warning) / 0.2); color: hsl(var(--warning)); }
.badge-error { background: hsl(var(--destructive) / 0.1); border-color: hsl(var(--destructive) / 0.2); color: hsl(var(--destructive)); }
.badge-info { background: hsl(var(--info) / 0.1); border-color: hsl(var(--info) / 0.2); color: hsl(var(--info)); }
.badge-default { background: hsl(var(--primary) / 0.1); border-color: hsl(var(--primary) / 0.2); color: hsl(var(--primary)); }
.badge-dot { width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); flex-shrink: 0; }
.badge-online .badge-dot { background: hsl(var(--success)); }
.badge-offline .badge-dot { background: hsl(var(--muted-foreground)); }
.badge-warning .badge-dot { background: hsl(var(--warning)); }
.badge-error .badge-dot { background: hsl(var(--destructive)); }
.badge-info .badge-dot { background: hsl(var(--info)); }
.badge-default .badge-dot { background: hsl(var(--primary)); }
.badge-pulse .badge-dot { animation: dj-pulse 2s ease-in-out infinite; }

/* Card (rendered: dj-card, dj-card--default/elevated, dj-card__header/title/subtitle/body/footer) */
.card, .dj-card { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius, 0.5rem) + 2px); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); overflow: hidden; }
.card-default, .dj-card--default { /* inherits base card */ }
.card-outlined, .dj-card--outlined { border-color: hsl(var(--border) / 0.5); background: transparent; box-shadow: none; }
.card-elevated, .dj-card--elevated { box-shadow: var(--shadow-md); }
.card-header, .dj-card__header { display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); padding: 1.5rem; border-bottom: 1px solid hsl(var(--border)); }
.card-title, .dj-card__title { font-size: 1.125rem; font-weight: 600; line-height: 1.75rem; color: hsl(var(--card-foreground)); margin: 0; }
.card-subtitle, .dj-card__subtitle { font-size: var(--text-xs, 0.75rem); color: hsl(var(--muted-foreground)); margin: 0; }
.card-body, .dj-card__body { padding: 1.5rem; color: hsl(var(--card-foreground)); font-size: var(--text-sm, 0.875rem); line-height: var(--leading-relaxed, 1.625); }
.card-footer, .dj-card__footer { display: flex; align-items: center; gap: var(--space-3, 0.75rem); padding: 1.5rem; border-top: 1px solid hsl(var(--border)); }

/* Data Table */
.data-table-wrapper { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card) / 0.4); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: var(--space-3) var(--space-4); text-align: start; font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.5); border-bottom: 1px solid hsl(var(--border)); }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: hsl(var(--foreground)); }
.data-table td { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: hsl(var(--foreground) / 0.9); border-bottom: 1px solid hsl(var(--border) / 0.5); }
.data-table tbody tr { transition: background var(--duration-fast) ease; }
.data-table tbody tr:hover { background: hsl(var(--accent)); }
.table-search { padding: var(--space-2) var(--space-3); background: hsl(var(--input)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); color: hsl(var(--foreground)); font-size: var(--text-sm); width: 16rem; }
.table-search:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.2); }

/* Data Table Pro — Phase 1 enhancements */
.data-table-container { overflow: hidden; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card) / 0.4); }
.data-table-search { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); }
.data-table-search input { padding: var(--space-2) var(--space-3); background: hsl(var(--input)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); color: hsl(var(--foreground)); font-size: var(--text-sm); width: 16rem; }
.data-table-search input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.2); }
.data-table-filter { width: 100%; margin-top: var(--space-1); padding: var(--space-1) var(--space-2); background: hsl(var(--input)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); color: hsl(var(--foreground)); font-size: var(--text-xs); }
.data-table-filter:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2); }
.data-table-checkbox { width: 1rem; height: 1rem; accent-color: hsl(var(--primary)); cursor: pointer; }
.data-table-select-all { width: 1rem; height: 1rem; accent-color: hsl(var(--primary)); cursor: pointer; }
.data-table-header-cell { display: flex; flex-direction: column; gap: var(--space-1); }
.data-table-striped tbody tr:nth-child(even) { background: hsl(var(--muted) / 0.2); }
.data-table-striped tbody tr:nth-child(even):hover { background: hsl(var(--accent)); }
.data-table-compact td { padding: var(--space-1) var(--space-3); }
.data-table-compact th { padding: var(--space-2) var(--space-3); }
.data-table-loading { position: relative; min-height: 8rem; }
.data-table-empty { text-align: center; padding: var(--space-8) var(--space-4); color: hsl(var(--muted-foreground)); }
.data-table-empty-title { font-size: var(--text-base); font-weight: var(--font-semibold); color: hsl(var(--foreground)); margin: 0 0 var(--space-2); }
.data-table-empty-description { font-size: var(--text-sm); margin: 0; }
.data-table-empty-icon { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.data-table-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); }
.data-table th[aria-sort] { cursor: pointer; user-select: none; }
.data-table th[aria-sort]:hover { color: hsl(var(--foreground)); }
.data-table tr[aria-selected="true"] { background: hsl(var(--primary) / 0.08); }
.data-table tr[aria-selected="true"]:hover { background: hsl(var(--primary) / 0.12); }

/* Data Table Phase 2 — Editing & Layout */
/* Inline editing */
.data-table-cell-editing { padding: 0 !important; }
.data-table-cell-editing input { width: 100%; padding: var(--space-2) var(--space-4); border: 2px solid hsl(var(--ring)); border-radius: 0; background: hsl(var(--input)); color: hsl(var(--foreground)); font-size: var(--text-sm); outline: none; box-sizing: border-box; }
.data-table td[data-editable="true"] { cursor: pointer; }
.data-table td[data-editable="true"]:hover { background: hsl(var(--accent)); }
/* Frozen columns */
.data-table-scroll { overflow-x: auto; }
.data-table .data-table-frozen-left { position: sticky; left: 0; z-index: 2; background: hsl(var(--card)); }
.data-table .data-table-frozen-right { position: sticky; right: 0; z-index: 2; background: hsl(var(--card)); }
.data-table thead .data-table-frozen-left,
.data-table thead .data-table-frozen-right { z-index: 3; background: hsl(var(--muted) / 0.95); }
/* Density */
.data-table-spacious td { padding: var(--space-4) var(--space-5); }
.data-table-spacious th { padding: var(--space-4) var(--space-5); }
/* Column resize */
.data-table th[data-resizable] { position: relative; }
.data-table-resize-handle { position: absolute; top: 0; right: 0; width: 4px; height: 100%; cursor: col-resize; background: transparent; }
.data-table-resize-handle:hover,
.data-table-resize-handle.resizing { background: hsl(var(--primary) / 0.5); }
/* Column reorder */
.data-table th[draggable="true"] { cursor: grab; }
.data-table th[draggable="true"]:active { cursor: grabbing; }
.data-table th.drag-over { border-inline-start: 2px solid hsl(var(--primary)); }
/* Column visibility toolbar */
.data-table-toolbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); }
.data-table-visibility-dropdown { position: relative; }
.data-table-visibility-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); cursor: pointer; }
.data-table-visibility-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.data-table-visibility-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 10; min-width: 10rem; margin-top: var(--space-1); padding: var(--space-2); background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.data-table-visibility-menu.open { display: block; }
.data-table-visibility-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); color: hsl(var(--foreground)); cursor: pointer; border-radius: var(--radius-sm); }
.data-table-visibility-item:hover { background: hsl(var(--accent)); }
/* Density toggle */
.data-table-density-toggle { display: inline-flex; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: hidden; }
.data-table-density-btn { padding: var(--space-1) var(--space-2); background: transparent; border: none; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); cursor: pointer; }
.data-table-density-btn:hover { background: hsl(var(--accent)); }
.data-table-density-btn.active { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); }
/* Editable row mode */
.data-table-row-actions { white-space: nowrap; }
.data-table-row-actions button { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); border-radius: var(--radius-md); cursor: pointer; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.data-table-row-actions button:hover { background: hsl(var(--accent)); }
.data-table-row-actions .save-btn { background: hsl(var(--primary) / 0.15); border-color: hsl(var(--primary) / 0.3); color: hsl(var(--primary)); }
.data-table-row-actions .cancel-btn { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.data-table-row-editing td input { width: 100%; padding: var(--space-1) var(--space-2); background: hsl(var(--input)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); color: hsl(var(--foreground)); font-size: var(--text-sm); }
/* Responsive card collapse */
.data-table-responsive { container-type: inline-size; }
@container (max-width: 640px) {
  .data-table-responsive .data-table thead { display: none; }
  .data-table-responsive .data-table tbody tr { display: block; margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); }
  .data-table-responsive .data-table tbody td { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); border-bottom: 1px solid hsl(var(--border) / 0.3); }
  .data-table-responsive .data-table tbody td:last-child { border-bottom: none; }
  .data-table-responsive .data-table tbody td::before { content: attr(data-label); font-weight: var(--font-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); margin-inline-end: var(--space-3); flex-shrink: 0; }
}
@media (max-width: 640px) {
  .data-table-responsive .data-table thead { display: none; }
  .data-table-responsive .data-table tbody tr { display: block; margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card)); }
  .data-table-responsive .data-table tbody td { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); border-bottom: 1px solid hsl(var(--border) / 0.3); }
  .data-table-responsive .data-table tbody td:last-child { border-bottom: none; }
  .data-table-responsive .data-table tbody td::before { content: attr(data-label); font-weight: var(--font-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); margin-inline-end: var(--space-3); flex-shrink: 0; }
}

/* Data Table Phase 3 */
.data-table-expand-col { width: 2rem; }
.data-table-expand-toggle { width: 2rem; text-align: center; }
.data-table-expand-btn { background: none; border: none; cursor: pointer; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); padding: var(--space-1); border-radius: var(--radius-sm); }
.data-table-expand-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.data-table-row-expanded { background: hsl(var(--accent) / 0.3); }
.data-table-detail-row { background: hsl(var(--muted) / 0.2); }
.data-table-detail-cell { padding: var(--space-4) var(--space-6); }
.data-table-detail-content { font-size: var(--text-sm); color: hsl(var(--foreground) / 0.8); }

.data-table-bulk-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: hsl(var(--primary) / 0.08); border-bottom: 1px solid hsl(var(--primary) / 0.2); }
.data-table-bulk-count { font-size: var(--text-sm); font-weight: var(--font-medium); color: hsl(var(--primary)); }
.data-table-bulk-btn { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-md); cursor: pointer; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.data-table-bulk-btn:hover { background: hsl(var(--accent)); }

.data-table-export { display: inline-flex; gap: var(--space-2); }
.data-table-export-btn { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-md); cursor: pointer; border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.data-table-export-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }

.data-table-group-header { background: hsl(var(--muted) / 0.5); }
.data-table-group-cell { padding: var(--space-2) var(--space-4); font-weight: var(--font-semibold); font-size: var(--text-sm); }
.data-table-group-toggle { background: none; border: none; cursor: pointer; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); padding: var(--space-1); }
.data-table-group-toggle:hover { color: hsl(var(--foreground)); }
.data-table-group-label { color: hsl(var(--foreground)); }
.data-table-group-count { color: hsl(var(--muted-foreground)); font-weight: normal; font-size: var(--text-xs); }
.data-table-group-collapsed .data-table-group-toggle { opacity: 0.6; }

.cell-renderer { display: inline-flex; align-items: center; }
.cell-renderer-badge { display: inline-block; padding: var(--space-0-5, 2px) var(--space-2); font-size: var(--text-xs); font-weight: var(--font-medium); border-radius: var(--radius-full, 999px); background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.cell-renderer-progress { display: inline-block; width: 100%; height: 6px; border-radius: var(--radius-full, 999px); background: hsl(var(--muted)); overflow: hidden; }
.cell-renderer-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full, 999px); background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); font-size: var(--text-xs); font-weight: var(--font-semibold); }

.data-table .data-table-pinned-left { position: sticky; left: 0; z-index: 2; background: hsl(var(--card)); }
.data-table .data-table-pinned-right { position: sticky; right: 0; z-index: 2; background: hsl(var(--card)); }
.data-table thead .data-table-pinned-left,
.data-table thead .data-table-pinned-right { z-index: 3; background: hsl(var(--muted) / 0.95); }

.data-table-stats-row { background: hsl(var(--muted) / 0.4); border-top: 2px solid hsl(var(--border)); }
.data-table-stats-cell { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.data-table-stat { display: inline-block; margin-inline-end: var(--space-2); }
.data-table-stat::before { font-weight: var(--font-semibold); }

@media print {
  .data-table-printable .data-table-search,
  .data-table-printable .data-table-toolbar,
  .data-table-printable .data-table-pagination,
  .data-table-printable .data-table-bulk-bar,
  .data-table-printable .data-table-checkbox,
  .data-table-printable .data-table-select-all,
  .data-table-printable .data-table-row-actions,
  .data-table-printable .data-table-expand-btn,
  .data-table-printable .data-table-group-toggle { display: none !important; }
  .data-table-printable .data-table { border: 1px solid #000; }
  .data-table-printable .data-table th,
  .data-table-printable .data-table td { border: 1px solid #ccc; padding: 4px 8px; }
}

/* Data Table Phase 4 — Data Presentation */
.data-table-footer-row { background: hsl(var(--muted) / 0.3); border-top: 2px solid hsl(var(--border)); font-weight: var(--font-semibold); }
.data-table-footer-agg { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.data-table-agg-label { color: hsl(var(--muted-foreground)); font-size: var(--text-xs); text-transform: uppercase; }
.data-table-agg-value { font-variant-numeric: tabular-nums; }
.data-table-type-number,
.data-table-type-currency,
.data-table-type-percentage { text-align: end; font-variant-numeric: tabular-nums; }
.data-table-type-boolean { text-align: center; }
.data-table-column-group { text-align: center; background: hsl(var(--muted) / 0.3); border-bottom: 2px solid hsl(var(--border)); font-weight: var(--font-semibold); }
.data-table-group-header-row th { border-bottom: 1px solid hsl(var(--border)); }
.data-table-drag-col { width: 2rem; }
.data-table-drag-handle { width: 2rem; text-align: center; cursor: grab; }
.data-table-drag-handle:active { cursor: grabbing; }
.data-table-grip { display: inline-block; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); user-select: none; }
.data-table-grip:hover { color: hsl(var(--foreground)); }
.data-table-copy { display: inline-flex; }
.data-table-copy-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-xs); cursor: pointer; transition: background var(--duration-fast) ease; }
.data-table-copy-btn:hover { background: hsl(var(--accent)); }

/* Phase 5: Import */
.data-table-import { display: inline-flex; gap: var(--space-1); }
.data-table-import-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-xs); cursor: pointer; transition: background var(--duration-fast) ease; }
.data-table-import-btn:hover { background: hsl(var(--accent)); }
.data-table-import-errors { padding: var(--space-2) var(--space-3); margin-block-end: var(--space-2); background: hsl(var(--destructive) / 0.1); border: 1px solid hsl(var(--destructive) / 0.3); border-radius: var(--radius-md); color: hsl(var(--destructive)); font-size: var(--text-xs); }
.data-table-import-errors ul { margin: 0; padding-inline-start: var(--space-4); }
.data-table-import-preview { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-block-end: var(--space-2); background: hsl(var(--primary) / 0.08); border: 1px solid hsl(var(--primary) / 0.2); border-radius: var(--radius-md); font-size: var(--text-sm); }
.data-table-import-preview-count { font-weight: var(--font-medium); }
.data-table-import-confirm { padding: var(--space-1) var(--space-3); background: hsl(var(--primary)); border: none; border-radius: var(--radius-md); color: hsl(var(--primary-foreground)); font-size: var(--text-xs); cursor: pointer; }
.data-table-import-confirm:hover { opacity: 0.9; }
.data-table-import-cancel { padding: var(--space-1) var(--space-3); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-xs); cursor: pointer; }
.data-table-import-cancel:hover { background: hsl(var(--accent)); }

/* Phase 5: Computed columns */
.data-table-computed-header { font-style: italic; background: hsl(var(--muted) / 0.5); }
.data-table-computed { background: hsl(var(--muted) / 0.15); font-style: italic; }

/* Phase 5: Cell merge */
.data-table-merged { font-weight: var(--font-medium); }

/* Phase 5: Expression filters */
.data-table-expression-row th { padding: var(--space-1); }
.data-table-expression { width: 100%; padding: var(--space-1) var(--space-2); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-xs); background: hsl(var(--background)); }
.data-table-expression:focus { outline: 2px solid hsl(var(--primary)); outline-offset: -1px; }

/* Phase 5: Conditional formatting */
.data-table-cf-data-bar { position: relative; }
.data-table-data-bar { position: absolute; inset-block-start: 0; inset-inline-start: 0; inset-block-end: 0; background: hsl(var(--primary) / 0.15); border-radius: var(--radius-sm); pointer-events: none; z-index: 0; }
.data-table-cf-data-bar > *:not(.data-table-data-bar) { position: relative; z-index: 1; }
.data-table-cf-color-scale { transition: background-color var(--duration-fast) ease; }
.data-table-cf-icon-set { white-space: nowrap; }
.data-table-cf-icon { display: inline-block; margin-inline-end: var(--space-1); }

/* Pagination (rendered: dj-pagination, dj-pagination__btn, dj-pagination__ellipsis) */
.pagination, .dj-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-1); }
.pagination-btn, .dj-pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 var(--space-2); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); color: hsl(var(--muted-foreground)); font-size: var(--text-xs); font-weight: var(--font-medium); cursor: pointer; transition: all var(--duration-fast) ease; text-decoration: none; }
.pagination-btn:hover:not(:disabled), .dj-pagination__btn:hover:not(:disabled) { background: hsl(var(--accent)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.pagination-btn:disabled, .dj-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination-btn.active, .dj-pagination__btn--active { background: hsl(var(--primary) / 0.15); border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.pagination-info, .dj-pagination__info { padding: 0 var(--space-4); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.pagination-ellipsis, .dj-pagination__ellipsis { padding: 0 var(--space-2); color: hsl(var(--muted-foreground)); }

/* Avatar */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: hsl(var(--primary) / 0.15); border: 2px solid hsl(var(--primary) / 0.3); flex-shrink: 0; overflow: hidden; }
.avatar-xs { width: 1.5rem; height: 1.5rem; font-size: 0.5rem; }
.avatar-sm { width: 2rem; height: 2rem; font-size: 0.625rem; }
.avatar-md { width: 2.5rem; height: 2.5rem; font-size: var(--text-xs); }
.avatar-lg { width: 3rem; height: 3rem; font-size: var(--text-sm); }
.avatar-xl { width: 4rem; height: 4rem; font-size: var(--text-base); }
.avatar-2xl { width: 5rem; height: 5rem; font-size: var(--text-xl); }
.avatar-image { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials { font-weight: var(--font-semibold); color: hsl(var(--primary)); text-transform: uppercase; letter-spacing: 0.05em; }
.avatar-status { position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; min-width: var(--space-2); min-height: var(--space-2); border-radius: var(--radius-full); border: 2px solid hsl(var(--card)); }
.avatar-status-online { background: hsl(var(--success)); box-shadow: 0 0 6px hsl(var(--success) / 0.4); }
.avatar-status-offline { background: hsl(var(--muted-foreground)); }
.avatar-status-busy { background: hsl(var(--destructive)); box-shadow: 0 0 6px hsl(var(--destructive) / 0.4); }
.avatar-status-away { background: hsl(var(--warning)); box-shadow: 0 0 6px hsl(var(--warning) / 0.4); }
.avatar-status-none { display: none; }

/* ============================================================
   Tier 1 Components
   ============================================================ */

/* Alert / Banner */
.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); border: 1px solid hsl(var(--border)); border-inline-start: 4px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); }
.alert-info { border-inline-start-color: hsl(var(--info)); background: hsl(var(--info) / 0.08); border-color: hsl(var(--info) / 0.25); }
.alert-success { border-inline-start-color: hsl(var(--success)); background: hsl(var(--success) / 0.08); border-color: hsl(var(--success) / 0.25); }
.alert-warning { border-inline-start-color: hsl(var(--warning)); background: hsl(var(--warning) / 0.08); border-color: hsl(var(--warning) / 0.25); }
.alert-error { border-inline-start-color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.08); border-color: hsl(var(--destructive) / 0.25); }
.alert-danger { border-inline-start-color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.08); border-color: hsl(var(--destructive) / 0.25); }
.alert-dismissible { padding-inline-end: var(--space-10); position: relative; }
.alert-icon { flex-shrink: 0; width: var(--space-5); height: var(--space-5); margin-top: 1px; }
.alert-info .alert-icon { color: hsl(var(--info)); }
.alert-success .alert-icon { color: hsl(var(--success)); }
.alert-warning .alert-icon { color: hsl(var(--warning)); }
.alert-error .alert-icon, .alert-danger .alert-icon { color: hsl(var(--destructive)); }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: hsl(var(--foreground)); margin: 0 0 var(--space-1); }
.alert-message { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); margin: 0; line-height: var(--leading-relaxed); }
.alert-close { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; align-items: center; justify-content: center; width: var(--space-6); height: var(--space-6); background: transparent; border: none; border-radius: var(--radius-sm); color: hsl(var(--muted-foreground)); cursor: pointer; transition: all var(--duration-fast) ease; }
.alert-close:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); border: 1px solid transparent; cursor: pointer; transition: all var(--duration-normal) ease; text-decoration: none; white-space: nowrap; user-select: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring) / 0.4); }
.btn-primary { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover:not(:disabled) { background: hsl(var(--primary) / 0.85); border-color: hsl(var(--primary) / 0.85); }
.btn-secondary { background: hsl(var(--muted)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.btn-secondary:hover:not(:disabled) { background: hsl(var(--accent)); border-color: hsl(var(--border)); }
.btn-danger, .btn-destructive { background: hsl(var(--destructive)); border-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground, 0 0% 100%)); }
.btn-danger:hover:not(:disabled), .btn-destructive:hover:not(:disabled) { background: hsl(var(--destructive) / 0.85); border-color: hsl(var(--destructive) / 0.85); }
.btn-success { background: hsl(var(--success)); border-color: hsl(var(--success)); color: hsl(0 0% 100%); }
.btn-success:hover:not(:disabled) { background: hsl(var(--success) / 0.85); border-color: hsl(var(--success) / 0.85); }
.btn-warning { background: hsl(var(--warning)); border-color: hsl(var(--warning)); color: hsl(0 0% 10%); }
.btn-warning:hover:not(:disabled) { background: hsl(var(--warning) / 0.85); border-color: hsl(var(--warning) / 0.85); }
.btn-ghost { background: transparent; border-color: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover:not(:disabled) { background: hsl(var(--accent)); }
.btn-link { background: transparent; border-color: transparent; color: hsl(var(--primary)); text-decoration: underline; padding-inline: 0; }
.btn-link:hover:not(:disabled) { color: hsl(var(--primary) / 0.75); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.btn-disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-loading { pointer-events: none; opacity: 0.75; }
.btn-icon { flex-shrink: 0; width: 1em; height: 1em; }
.btn-label { flex: 1; }
.btn-spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--radius-full); animation: dj-spin 0.65s linear infinite; flex-shrink: 0; }

/* Input / Text Field */
.form-input { display: block; width: 100%; padding: var(--space-2) var(--space-3); background: hsl(var(--input, var(--card))); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-sm); color: hsl(var(--foreground)); line-height: var(--leading-normal); transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.form-input::placeholder { color: hsl(var(--muted-foreground) / 0.6); }
.form-input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.2); }
.form-input:disabled { opacity: 0.5; cursor: not-allowed; background: hsl(var(--muted) / 0.5); }
.form-input-error { border-color: hsl(var(--destructive) / 0.6); }
.form-input-error:focus { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.15); }
.form-input-success { border-color: hsl(var(--success) / 0.6); }
.form-input-success:focus { border-color: hsl(var(--success)); box-shadow: 0 0 0 3px hsl(var(--success) / 0.15); }

/* Select */
.form-select { display: block; width: 100%; padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3); background: hsl(var(--input, var(--card))) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right var(--space-3) center; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-sm); color: hsl(var(--foreground)); appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.form-select:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.2); }
.form-select-error { border-color: hsl(var(--destructive) / 0.6); }
.form-select-error:focus { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.15); }
.form-select-success { border-color: hsl(var(--success) / 0.6); }
.form-select-success:focus { border-color: hsl(var(--success)); box-shadow: 0 0 0 3px hsl(var(--success) / 0.15); }

/* Checkbox */
.form-checkbox-wrapper { display: flex; align-items: center; gap: var(--space-2); }
.form-checkbox { width: 1rem; height: 1rem; border: 1.5px solid hsl(var(--border)); border-radius: var(--radius-sm); background: hsl(var(--input, var(--card))); appearance: none; -webkit-appearance: none; cursor: pointer; flex-shrink: 0; transition: all var(--duration-fast) ease; }
.form-checkbox:checked { background: hsl(var(--primary)); border-color: hsl(var(--primary)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6l2.5 2.5 4.5-5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.form-checkbox:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3); }
.form-checkbox-label { font-size: var(--text-sm); color: hsl(var(--foreground)); cursor: pointer; user-select: none; }

/* Radio */
.form-radio-wrapper { display: flex; align-items: center; gap: var(--space-2); }
.form-radio { width: 1rem; height: 1rem; border: 1.5px solid hsl(var(--border)); border-radius: var(--radius-full); background: hsl(var(--input, var(--card))); appearance: none; -webkit-appearance: none; cursor: pointer; flex-shrink: 0; transition: all var(--duration-fast) ease; }
.form-radio:checked { background: hsl(var(--primary)); border-color: hsl(var(--primary)); box-shadow: inset 0 0 0 3px hsl(var(--card)); }
.form-radio:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3); }
.form-radio-label { font-size: var(--text-sm); color: hsl(var(--foreground)); cursor: pointer; user-select: none; }

/* Textarea */
.form-textarea { display: block; width: 100%; padding: var(--space-2) var(--space-3); background: hsl(var(--input, var(--card))); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-sm); color: hsl(var(--foreground)); line-height: var(--leading-relaxed); resize: vertical; min-height: 6rem; transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.form-textarea::placeholder { color: hsl(var(--muted-foreground) / 0.6); }
.form-textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.2); }
.form-textarea-error { border-color: hsl(var(--destructive) / 0.6); }
.form-textarea-error:focus { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.15); }

/* Form Group / Field */
.form-group { display: flex; flex-direction: column; gap: var(--space-1); }
.form-field { display: flex; flex-direction: column; gap: var(--space-1); }
.form-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: hsl(var(--foreground)); }
.form-label-required::after { content: ' *'; color: hsl(var(--destructive)); }
.form-helper { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.form-error-message { font-size: var(--text-xs); color: hsl(var(--destructive)); }

/* Spinner / Loader */
.spinner { display: inline-block; border-radius: var(--radius-full); border-style: solid; border-top-color: transparent; animation: dj-spin 0.7s linear infinite; flex-shrink: 0; }
.spinner-sm { width: 1rem; height: 1rem; border-width: 2px; }
.spinner-md { width: 1.5rem; height: 1.5rem; border-width: 2px; }
.spinner-lg { width: 2.5rem; height: 2.5rem; border-width: 3px; }
.spinner-primary { border-color: hsl(var(--primary) / 0.25); border-top-color: hsl(var(--primary)); }
.spinner-muted { border-color: hsl(var(--muted-foreground) / 0.25); border-top-color: hsl(var(--muted-foreground)); }

/* Skeleton */
.skeleton { background: linear-gradient(90deg, hsl(var(--muted) / 0.8) 25%, hsl(var(--muted-foreground) / 0.15) 50%, hsl(var(--muted) / 0.8) 75%); background-size: 200% 100%; animation: dj-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-md); }
.skeleton-text { height: 0.875rem; border-radius: var(--radius-sm); }
.skeleton-line { height: 0.75rem; border-radius: var(--radius-sm); }
.skeleton-circle { border-radius: var(--radius-full); }
.skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); }
.skeleton-card { height: 8rem; border-radius: var(--radius-xl); }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font-size: var(--text-sm); }
.breadcrumb-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.breadcrumb-link { color: hsl(var(--muted-foreground)); text-decoration: none; transition: color var(--duration-fast) ease; }
.breadcrumb-link:hover { color: hsl(var(--foreground)); }
.breadcrumb-separator { color: hsl(var(--muted-foreground) / 0.5); font-size: var(--text-xs); user-select: none; }
.breadcrumb-active { color: hsl(var(--foreground)); font-weight: var(--font-medium); }

/* Empty State */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12) var(--space-6); text-align: center; gap: var(--space-4); }
.empty-state-icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; background: hsl(var(--muted) / 0.5); border-radius: var(--radius-full); color: hsl(var(--muted-foreground)); }
.empty-state-title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: hsl(var(--foreground)); margin: 0; }
.empty-state-description { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); margin: 0; max-width: 28rem; line-height: var(--leading-relaxed); }
.empty-state-action { margin-top: var(--space-2); }

/* Divider / Separator */
.divider { border: none; background: hsl(var(--border)); flex-shrink: 0; }
.divider-horizontal { display: block; height: 1px; width: 100%; margin: var(--space-4) 0; }
.divider-vertical { display: inline-block; width: 1px; height: 1em; margin: 0 var(--space-3); vertical-align: middle; }
.divider-sm.divider-horizontal { margin: var(--space-2) 0; }
.divider-lg.divider-horizontal { margin: var(--space-8) 0; }
.divider-label { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; }
.divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: hsl(var(--border)); }
.divider-label span { font-size: var(--text-xs); font-weight: var(--font-medium); color: hsl(var(--muted-foreground)); white-space: nowrap; }

/* Switch / Toggle */
.switch-wrapper { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch { position: relative; display: inline-block; flex-shrink: 0; }
.switch-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.switch-track { display: block; width: 2.75rem; height: 1.5rem; background: hsl(var(--muted-foreground) / 0.3); border-radius: var(--radius-full); border: 1px solid hsl(var(--border)); transition: background var(--duration-normal) ease, border-color var(--duration-normal) ease; }
.switch-input:checked + .switch-track { background: hsl(var(--primary)); border-color: hsl(var(--primary)); }
.switch-input:focus-visible + .switch-track { box-shadow: 0 0 0 3px hsl(var(--ring) / 0.3); }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); background: hsl(0 0% 100%); border-radius: var(--radius-full); transition: transform var(--duration-normal) ease; box-shadow: var(--shadow-sm); pointer-events: none; }
.switch-input:checked ~ .switch-thumb { transform: translateX(1.25rem); }
.switch-label { font-size: var(--text-sm); color: hsl(var(--foreground)); user-select: none; }
.switch-sm .switch-track { width: 2rem; height: 1.125rem; }
.switch-sm .switch-thumb { width: calc(1.125rem - 6px); height: calc(1.125rem - 6px); }
.switch-sm .switch-input:checked ~ .switch-thumb { transform: translateX(0.875rem); }
.switch-lg .switch-track { width: 3.5rem; height: 2rem; }
.switch-lg .switch-thumb { width: calc(2rem - 6px); height: calc(2rem - 6px); }
.switch-lg .switch-input:checked ~ .switch-thumb { transform: translateX(1.5rem); }

/* Stat / KPI Card */
.stat-card { background: hsl(var(--card) / 0.6); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.stat-card-label { font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground)); }
.stat-card-value { font-size: 2rem; font-weight: var(--font-bold, 700); color: hsl(var(--foreground)); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-value-primary { color: hsl(var(--primary)); }
.stat-card-trend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 2px var(--space-2); border-radius: var(--radius-full); width: fit-content; }
.stat-trend-up { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); }
.stat-trend-down { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); }
.stat-trend-flat { background: hsl(var(--muted) / 0.5); color: hsl(var(--muted-foreground)); }
.stat-card-description { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }

/* Tag / Chip */
.tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); border: 1px solid transparent; }
.tag-default { background: hsl(var(--muted) / 0.6); border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.tag-primary { background: hsl(var(--primary) / 0.1); border-color: hsl(var(--primary) / 0.25); color: hsl(var(--primary)); }
.tag-success { background: hsl(var(--success) / 0.1); border-color: hsl(var(--success) / 0.25); color: hsl(var(--success)); }
.tag-warning { background: hsl(var(--warning) / 0.1); border-color: hsl(var(--warning) / 0.25); color: hsl(var(--warning)); }
.tag-danger { background: hsl(var(--destructive) / 0.1); border-color: hsl(var(--destructive) / 0.25); color: hsl(var(--destructive)); }
.tag-info { background: hsl(var(--info) / 0.1); border-color: hsl(var(--info) / 0.25); color: hsl(var(--info)); }
.tag-sm { padding: 1px var(--space-1); font-size: 0.625rem; }
.tag-lg { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.tag-dismissible { padding-inline-end: var(--space-1); }
.tag-close { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; background: transparent; border: none; border-radius: var(--radius-full); color: currentColor; cursor: pointer; opacity: 0.6; padding: 0; transition: opacity var(--duration-fast) ease; }
.tag-close:hover { opacity: 1; }

/* Timeline */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item { display: flex; gap: var(--space-4); position: relative; }
.timeline-item:not(:last-child) .timeline-marker::after { content: ''; position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% - 1.5rem + var(--space-4)); background: hsl(var(--border)); }
.timeline-marker { position: relative; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 1.5rem; }
.timeline-marker-dot { width: 0.75rem; height: 0.75rem; border-radius: var(--radius-full); background: hsl(var(--primary)); border: 2px solid hsl(var(--card)); box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3); flex-shrink: 0; z-index: 1; margin-top: var(--space-1); }
.timeline-content { flex: 1; padding-bottom: var(--space-6); }
.timeline-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: hsl(var(--foreground)); margin: 0 0 var(--space-1); }
.timeline-time { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); margin: 0 0 var(--space-2); }
.timeline-body { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); line-height: var(--leading-relaxed); }

/* Stepper (rendered: .stepper, .stepper-step, .stepper-number, .stepper-label, -active/-complete) */
.stepper { display: flex; flex-direction: row; align-items: flex-start; gap: 0; }
.stepper-vertical { flex-direction: column; }
.stepper-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; position: relative; padding: 0 var(--space-2, 0.5rem); background: none; border: none; cursor: pointer; color: hsl(var(--muted-foreground)); }
.stepper-step:not(:last-child)::after { content: ''; position: absolute; top: 1rem; left: calc(50% + 1.25rem); right: calc(-50% + 1.25rem); height: 2px; background: hsl(var(--border)); }
.stepper-step-complete:not(:last-child)::after { background: hsl(var(--success)); }
.stepper-number, .stepper-step-circle { width: 2rem; height: 2rem; border-radius: 9999px; border: 2px solid hsl(var(--border)); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: hsl(var(--muted-foreground)); background-color: hsl(var(--card)); flex-shrink: 0; transition: all 0.2s ease; margin-bottom: 0.5rem; }
.stepper-step-active .stepper-number, .stepper-step-active .stepper-step-circle { border-color: hsl(var(--primary)); color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); }
.stepper-step-complete .stepper-number, .stepper-step-complete .stepper-step-circle { border-color: hsl(var(--success)); background: hsl(var(--success)); color: hsl(0 0% 100%); }
.stepper-label, .stepper-step-label { font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.stepper-step-active .stepper-label, .stepper-step-active .stepper-step-label { color: hsl(var(--foreground)); font-weight: 600; }
.stepper-step-complete .stepper-label, .stepper-step-complete .stepper-step-label { color: hsl(var(--muted-foreground)); }
.stepper-connector { flex: 1; height: 2px; background: hsl(var(--border)); align-self: center; }
.stepper-step-complete + .stepper-connector { background: hsl(var(--success)); }

/* Combobox Multi-select Tags */
.combobox-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1) var(--space-2); }
.combobox-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: hsl(var(--primary) / 0.1); border: 1px solid hsl(var(--primary) / 0.2); border-radius: var(--radius-full); font-size: var(--text-xs); color: hsl(var(--primary)); }
.combobox-tag-label { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox-tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; padding: 0; background: transparent; border: none; border-radius: var(--radius-full); color: hsl(var(--primary) / 0.6); cursor: pointer; font-size: var(--text-sm); line-height: 1; }
.combobox-tag-remove:hover { color: hsl(var(--destructive)); background: hsl(var(--destructive) / 0.1); }

/* Date Picker Range */
.dp-day-range-start { background: hsl(var(--primary)); color: hsl(var(--primary-foreground, 0 0% 100%)); border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); }
.dp-day-range-end { background: hsl(var(--primary)); color: hsl(var(--primary-foreground, 0 0% 100%)); border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
.dp-day-in-range { background: hsl(var(--primary) / 0.15); color: hsl(var(--foreground)); border-radius: 0; }
.dp-day-range-start.dp-day-range-end { border-radius: var(--radius-md); }

/* Code Block */
.code-block { background: hsl(var(--card) / 0.8); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; font-size: var(--text-sm); }
.code-block-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: hsl(var(--muted) / 0.5); border-bottom: 1px solid hsl(var(--border)); }
.code-block-filename { font-size: var(--text-xs); font-weight: var(--font-semibold); color: hsl(var(--foreground)); font-family: var(--font-mono, ui-monospace, monospace); }
.code-block-lang { font-size: var(--text-xs); font-weight: var(--font-medium); color: hsl(var(--muted-foreground)); margin-inline-start: auto; text-transform: uppercase; letter-spacing: 0.05em; }
.code-block-filename + .code-block-lang { margin-inline-start: 0; }
.code-block-filename ~ .code-block-lang + .code-block-copy { margin-inline-start: auto; }
.code-block-copy { margin-inline-start: auto; padding: var(--space-1) var(--space-2); background: hsl(var(--muted) / 0.5); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-medium); color: hsl(var(--muted-foreground)); cursor: pointer; transition: all var(--duration-fast) ease; }
.code-block-copy:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.code-block-pre { margin: 0; padding: var(--space-4); overflow-x: auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: hsl(var(--foreground) / 0.9); }
.code-block-pre code { font-family: inherit; font-size: inherit; background: transparent; }
.code-block[data-highlight] pre { min-height: 2rem; }
.code-block[data-highlight] code.hljs { background: transparent; padding: 0; }

/* Kbd / Keyboard Shortcut */
.kbd-group { display: inline-flex; align-items: center; gap: var(--space-1); }
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding: var(--space-1) var(--space-2); background: hsl(var(--muted) / 0.6); border: 1px solid hsl(var(--border)); border-bottom-width: 2px; border-radius: var(--radius-sm); font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-xs); font-weight: var(--font-medium); color: hsl(var(--foreground)); line-height: 1; white-space: nowrap; box-shadow: 0 1px 0 hsl(var(--border)); }
.kbd-sep { font-size: var(--text-xs); color: hsl(var(--muted-foreground) / 0.6); user-select: none; }

/* Copy Button */
.copy-btn { position: relative; }
.copy-btn:active { transform: scale(0.96); }

/* Rating */
.rating { display: inline-flex; align-items: center; gap: var(--space-1); }
.rating-star { font-size: 1.25rem; line-height: 1; background: none; border: none; padding: 0; cursor: default; transition: transform var(--duration-fast) ease, color var(--duration-fast) ease; }
.rating-star-full { color: hsl(45 93% 47%); }
.rating-star-half { color: hsl(45 93% 47%); opacity: 0.55; }
.rating-star-empty { color: hsl(var(--muted-foreground) / 0.3); }
button.rating-star { cursor: pointer; }
button.rating-star:hover { transform: scale(1.2); }
button.rating-star:hover ~ .rating-star { color: hsl(var(--muted-foreground) / 0.3); }
.rating-sm .rating-star { font-size: 1rem; }
.rating-lg .rating-star { font-size: 1.75rem; }

/* Collapsible */
.collapsible { border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; background: hsl(var(--card) / 0.4); }
.collapsible-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-3) var(--space-4); background: transparent; border: none; cursor: pointer; text-align: start; transition: background var(--duration-fast) ease; }
.collapsible-trigger:hover { background: hsl(var(--accent)); }
.collapsible-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: hsl(var(--foreground)); }
.collapsible-icon { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); transition: transform var(--duration-fast, 0.15s) ease; }
.collapsible-open .collapsible-icon { transform: rotate(180deg); color: hsl(var(--primary)); }
.collapsible-content { display: none; padding: 0 var(--space-4) var(--space-4); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.collapsible-open .collapsible-content { display: block; }

/* ============================================================
   Tier 2/3 Components — Overlay & Positioning
   ============================================================ */

/* Popover */
.popover-wrapper { position: relative; display: inline-block; }
.popover { position: absolute; z-index: 50; min-width: 12rem; max-width: 20rem; padding: var(--space-3) var(--space-4); background: hsl(var(--card) / 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: scale(0.95); transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease, transform var(--duration-normal) ease; pointer-events: none; }
.popover-wrapper[data-open] .popover { opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; }
.popover-wrapper:focus-within .popover { opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; }
.popover-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: hsl(var(--foreground)); margin: 0 0 var(--space-2); }
.popover-content { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); line-height: var(--leading-relaxed); }
.popover-bottom { top: 100%; left: 50%; transform: translateX(-50%) scale(0.95); margin-top: var(--space-2); }
.popover-wrapper[data-open] .popover-bottom { transform: translateX(-50%) scale(1); }
.popover-top { bottom: 100%; left: 50%; transform: translateX(-50%) scale(0.95); margin-bottom: var(--space-2); }
.popover-wrapper[data-open] .popover-top { transform: translateX(-50%) scale(1); }
.popover-left { right: 100%; top: 50%; transform: translateY(-50%) scale(0.95); margin-inline-end: var(--space-2); }
.popover-wrapper[data-open] .popover-left { transform: translateY(-50%) scale(1); }
.popover-right { left: 100%; top: 50%; transform: translateY(-50%) scale(0.95); margin-inline-start: var(--space-2); }
.popover-wrapper[data-open] .popover-right { transform: translateY(-50%) scale(1); }
.popover::after { content: ''; position: absolute; width: 0; height: 0; border: 6px solid transparent; }
.popover-bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: hsl(var(--border)); }
.popover-top::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: hsl(var(--border)); }
.popover-left::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: hsl(var(--border)); }
.popover-right::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: hsl(var(--border)); }

/* Sheet / Drawer */
.sheet-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease; }
.sheet-overlay[data-open="true"] { opacity: 1; visibility: visible; }
.sheet { position: fixed; z-index: 51; background: hsl(var(--card) / 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transition: transform var(--duration-normal) cubic-bezier(0.32, 0.72, 0, 1); }
.sheet-right { top: 0; right: 0; bottom: 0; width: 24rem; max-width: 90vw; border-left: 1px solid hsl(var(--border)); transform: translateX(100%); }
.sheet-right[data-open="true"] { transform: translateX(0); }
.sheet-left { top: 0; left: 0; bottom: 0; width: 24rem; max-width: 90vw; border-right: 1px solid hsl(var(--border)); transform: translateX(-100%); }
.sheet-left[data-open="true"] { transform: translateX(0); }
.sheet-bottom { left: 0; right: 0; bottom: 0; max-height: 80vh; border-top: 1px solid hsl(var(--border)); transform: translateY(100%); }
.sheet-bottom[data-open="true"] { transform: translateY(0); }
.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid hsl(var(--border)); flex-shrink: 0; }
.sheet-header-close { display: flex; justify-content: flex-end; padding: var(--space-3) var(--space-4); flex-shrink: 0; }
.sheet-title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: hsl(var(--foreground)); margin: 0; }
.sheet-close { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); background: transparent; border: none; border-radius: var(--radius-sm); color: hsl(var(--muted-foreground)); font-size: var(--text-lg); cursor: pointer; transition: all var(--duration-fast) ease; }
.sheet-close:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.sheet-body { flex: 1; overflow-y: auto; padding: var(--space-5); color: hsl(var(--foreground) / 0.9); font-size: var(--text-sm); line-height: var(--leading-relaxed); }

/* Context Menu */
.ctx-wrapper { position: relative; display: inline-block; }
.ctx-trigger { padding: var(--space-4); border: 1px dashed hsl(var(--border)); border-radius: var(--radius-md); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); cursor: context-menu; user-select: none; }
.ctx-menu { position: absolute; z-index: 50; min-width: 10rem; padding: var(--space-1); background: hsl(var(--card) / 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: scale(0.95); transition: opacity var(--duration-fast) ease, visibility var(--duration-fast) ease, transform var(--duration-fast) ease; }
.ctx-menu[data-open] { opacity: 1; visibility: visible; transform: scale(1); }
.ctx-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); background: transparent; border: none; border-radius: var(--radius-sm); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); text-align: start; cursor: pointer; transition: all var(--duration-fast) ease; }
.ctx-item:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.ctx-item-danger { color: hsl(var(--destructive)); }
.ctx-item-danger:hover { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); }
.ctx-item-icon { flex-shrink: 0; font-size: var(--text-base); line-height: 1; }
.ctx-divider { height: 1px; margin: var(--space-1) 0; background: hsl(var(--border)); }

/* Command Palette */
.palette-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease; }
.palette-overlay[data-open="true"] { opacity: 1; visibility: visible; }
.palette { position: fixed; z-index: 51; top: 20%; left: 50%; transform: translateX(-50%) scale(0.95); width: 32rem; max-width: 90vw; max-height: 24rem; background: hsl(var(--card) / 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) ease, visibility var(--duration-normal) ease, transform var(--duration-normal) ease; }
.palette[data-open="true"] { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
.palette-search { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid hsl(var(--border)); }
.palette-search-icon { flex-shrink: 0; font-size: var(--text-lg); color: hsl(var(--muted-foreground)); }
.palette-input { flex: 1; padding: var(--space-1) 0; background: transparent; border: none; font-size: var(--text-sm); color: hsl(var(--foreground)); outline: none; }
.palette-input::placeholder { color: hsl(var(--muted-foreground) / 0.6); }
.palette-close { flex-shrink: 0; padding: var(--space-1) var(--space-2); background: hsl(var(--muted) / 0.5); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-medium); color: hsl(var(--muted-foreground)); cursor: pointer; transition: all var(--duration-fast) ease; }
.palette-close:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.palette-results { flex: 1; overflow-y: auto; padding: var(--space-2); }
.palette-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast) ease; }
.palette-item:hover { background: hsl(var(--accent)); }
.palette-item-icon { flex-shrink: 0; font-size: var(--text-base); line-height: 1; color: hsl(var(--muted-foreground)); }
.palette-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.palette-item-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: hsl(var(--foreground)); }
.palette-item-desc { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Batch 3 — Form Control Components
   ============================================================ */

/* Combobox */
.combobox { position: relative; display: flex; flex-direction: column; }
.combobox-input { width: 100%; }
.combobox-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40; max-height: 15rem; overflow-y: auto; margin-top: var(--space-1); padding: var(--space-1); background: hsl(var(--card) / 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.combobox-input:focus ~ .combobox-dropdown { display: block; }
.combobox-option { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); color: hsl(var(--muted-foreground)); cursor: pointer; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; }
.combobox-option:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.combobox-option-selected { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); font-weight: var(--font-medium); }
.combobox-option-selected:hover { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); }

/* Color Picker */
.color-picker { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.color-preview { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); border: 2px solid hsl(var(--border)); flex-shrink: 0; box-shadow: var(--shadow-sm); }
.color-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.color-swatch { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; padding: 0; }
.color-swatch:hover { transform: scale(1.15); border-color: hsl(var(--foreground) / 0.3); }
.color-swatch-active { border-color: hsl(var(--foreground)); box-shadow: 0 0 0 2px hsl(var(--background, 0 0% 100%)), 0 0 0 4px hsl(var(--foreground)); }
.color-hex-input { max-width: 7rem; font-family: var(--font-mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: 0.05em; }

/* Date Picker */
.date-picker { display: inline-flex; flex-direction: column; background: hsl(var(--card) / 0.6); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: var(--space-3); min-width: 17rem; }
.dp-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--space-2); }
.dp-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: transparent; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); color: hsl(var(--muted-foreground)); font-size: var(--text-lg); cursor: pointer; transition: all var(--duration-fast) ease; padding: 0; }
.dp-nav-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.dp-month-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: hsl(var(--foreground)); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); text-align: center; }
.dp-weekday { font-size: var(--text-xs); font-weight: var(--font-semibold); color: hsl(var(--muted-foreground)); padding: var(--space-1) 0; }
.dp-day { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-md); font-size: var(--text-sm); color: hsl(var(--foreground)); background: transparent; border: none; cursor: pointer; transition: background var(--duration-fast) ease, color var(--duration-fast) ease; padding: 0; margin: 0 auto; }
.dp-day:hover:not(.dp-day-empty):not(.dp-day-selected):not(.dp-day-range-start):not(.dp-day-range-end) { background: hsl(var(--accent)); }
.dp-day-empty { cursor: default; }
.dp-day-today { font-weight: var(--font-bold, 700); border: 1px solid hsl(var(--primary) / 0.4); }
.dp-day-selected { background: hsl(var(--primary)); color: hsl(var(--primary-foreground, 0 0% 100%)); font-weight: var(--font-semibold); border-radius: var(--radius-md); }
.dp-selected-value { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: hsl(var(--muted) / 0.5); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); color: hsl(var(--foreground)); text-align: center; }

/* File Dropzone */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8) var(--space-6); border: 2px dashed hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--muted) / 0.2); cursor: pointer; transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease; text-align: center; position: relative; }
.dropzone:hover { border-color: hsl(var(--primary) / 0.4); background: hsl(var(--primary) / 0.03); }
.dropzone-over { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08); border-style: solid; }
.dropzone-has-file { border-color: hsl(var(--success) / 0.4); background: hsl(var(--success) / 0.05); }
.dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dz-icon { font-size: 2rem; line-height: 1; color: hsl(var(--muted-foreground)); }
.dropzone-over .dz-icon { color: hsl(var(--primary)); }
.dz-text { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.dz-browse { color: hsl(var(--primary)); font-weight: var(--font-medium); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.dz-browse:hover { color: hsl(var(--primary) / 0.75); }
.dz-hint { font-size: var(--text-xs); color: hsl(var(--muted-foreground) / 0.7); }
.dz-file-count { font-size: var(--text-xs); font-weight: var(--font-medium); color: hsl(var(--success)); }
.dz-file-count:empty { display: none; }

/* ============================================================
   Batch 4 — Data & Complex Interactive Components
   ============================================================ */

/* Notification Center */
.notif-center { position: relative; display: inline-block; }
.notif-trigger { display: inline-flex; align-items: center; justify-content: center; position: relative; padding: var(--space-2); background: transparent; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast) ease; }
.notif-trigger:hover { background: hsl(var(--accent)); border-color: hsl(var(--border)); }
.notif-bell { font-size: var(--text-lg); line-height: 1; }
.notif-badge { position: absolute; top: -4px; right: -4px; min-width: 1.125rem; height: 1.125rem; padding: 0 var(--space-1); background: hsl(var(--destructive)); color: hsl(0 0% 100%); font-size: 0.625rem; font-weight: var(--font-bold, 700); line-height: 1.125rem; text-align: center; border-radius: var(--radius-full); }
.notif-dropdown { display: none; position: absolute; top: 100%; right: 0; z-index: 50; width: 20rem; margin-top: var(--space-2); background: hsl(var(--card) / 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.notif-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid hsl(var(--border)); }
.notif-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: hsl(var(--foreground)); }
.notif-list { max-height: 20rem; overflow-y: auto; }
.notif-item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-bottom: 1px solid hsl(var(--border) / 0.5); cursor: pointer; transition: background var(--duration-fast) ease; }
.notif-item:hover { background: hsl(var(--accent)); }
.notif-item:last-child { border-bottom: none; }
.notif-item-unread { background: hsl(var(--primary) / 0.05); }
.notif-item-unread .notif-item-msg { font-weight: var(--font-semibold); color: hsl(var(--foreground)); }
.notif-item-msg { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); line-height: var(--leading-relaxed); }
.notif-item-time { font-size: var(--text-xs); color: hsl(var(--muted-foreground) / 0.7); }
.notif-empty { padding: var(--space-6) var(--space-4); text-align: center; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.notif-footer { padding: var(--space-2) var(--space-4); border-top: 1px solid hsl(var(--border)); display: flex; justify-content: center; }

/* Tree View */
.tree { display: flex; flex-direction: column; }
.tree-node { display: flex; flex-direction: column; }
.tree-node-row { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) 0; border-radius: var(--radius-sm); transition: background var(--duration-fast) ease; }
.tree-node-row:hover { background: hsl(var(--accent)); }
.tree-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; background: transparent; border: none; border-radius: var(--radius-sm); color: hsl(var(--muted-foreground)); font-size: var(--text-xs); cursor: pointer; flex-shrink: 0; transition: color var(--duration-fast) ease; }
.tree-toggle:hover { color: hsl(var(--foreground)); }
.tree-toggle-placeholder { display: inline-block; width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.tree-node-label { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); background: transparent; border: none; border-radius: var(--radius-sm); font-size: var(--text-sm); color: hsl(var(--foreground)); cursor: pointer; transition: all var(--duration-fast) ease; }
.tree-node-label:hover { color: hsl(var(--primary)); }
.tree-node-selected .tree-node-label { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); font-weight: var(--font-semibold); }
.tree-children { display: flex; flex-direction: column; }
.tree-node-expanded > .tree-node-row .tree-toggle { color: hsl(var(--primary)); }

/* Gauge / Donut */
.gauge { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.gauge-track { stroke: hsl(var(--muted)); }
.gauge-fill { transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.gauge-fill-primary { stroke: hsl(var(--primary)); }
.gauge-fill-success { stroke: hsl(var(--success)); }
.gauge-fill-warning { stroke: hsl(var(--warning)); }
.gauge-fill-danger { stroke: hsl(var(--destructive)); }
.gauge-fill-info { stroke: hsl(var(--info)); }
.gauge-value-text { fill: hsl(var(--foreground)); font-weight: var(--font-semibold); }
.gauge-label { font-size: var(--text-xs); font-weight: var(--font-medium); color: hsl(var(--muted-foreground)); text-align: center; }

/* Image Carousel */
.carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: hsl(var(--muted) / 0.3); }
.carousel-empty { min-height: 12rem; display: flex; align-items: center; justify-content: center; }
.carousel-track { position: relative; width: 100%; }
.carousel-slide { display: none; width: 100%; }
.carousel-slide-active { display: block; }
.carousel-img { display: block; width: 100%; height: auto; object-fit: cover; }
.carousel-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-3) var(--space-4); background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: hsl(0 0% 100%); font-size: var(--text-sm); }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: hsl(var(--card) / 0.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-full); color: hsl(var(--foreground)); font-size: var(--text-xl); cursor: pointer; transition: all var(--duration-fast) ease; padding: 0; }
.carousel-btn:hover { background: hsl(var(--card)); box-shadow: var(--shadow-md); }
.carousel-btn-prev { left: var(--space-3); }
.carousel-btn-next { right: var(--space-3); }
.carousel-dots { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-3) 0; }
.carousel-dot { width: 0.5rem; height: 0.5rem; padding: 0; border: none; border-radius: var(--radius-full); background: hsl(var(--muted-foreground) / 0.3); cursor: pointer; transition: all var(--duration-fast) ease; }
.carousel-dot:hover { background: hsl(var(--muted-foreground) / 0.6); }
.carousel-dot-active { background: hsl(var(--primary)); width: 1.5rem; border-radius: var(--radius-full); }
.carousel-counter { text-align: center; padding: 0 0 var(--space-2); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }

/* Virtual List */
.virtual-list { display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; background: hsl(var(--card) / 0.4); }
.vl-info { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); }
.vl-scroll { overflow-y: auto; max-height: 24rem; }
.vl-item { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border-bottom: 1px solid hsl(var(--border) / 0.5); transition: background var(--duration-fast) ease; }
.vl-item:last-child { border-bottom: none; }
.vl-item:hover { background: hsl(var(--accent)); }
.vl-item-label { font-size: var(--text-sm); color: hsl(var(--foreground)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl-item-sub { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.vl-load-more { padding: var(--space-3) var(--space-4); display: flex; justify-content: center; border-top: 1px solid hsl(var(--border)); }

/* Kanban Board */
.kanban { display: flex; gap: var(--space-4); overflow-x: auto; padding: var(--space-2) 0; align-items: flex-start; }
.kanban-col { display: flex; flex-direction: column; min-width: 16rem; max-width: 20rem; flex-shrink: 0; background: hsl(var(--muted) / 0.3); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease; }
.kanban-col-over { border-color: hsl(var(--primary) / 0.5); background: hsl(var(--primary) / 0.03); }
.kanban-col-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-top: 3px solid hsl(var(--primary)); background: hsl(var(--card) / 0.6); }
.kanban-col-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: hsl(var(--foreground)); }
.kanban-col-count { font-size: var(--text-xs); font-weight: var(--font-medium); color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.6); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); }
.kanban-cards { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2) var(--space-3); min-height: var(--space-8); }
.kanban-card { padding: var(--space-3); background: hsl(var(--card) / 0.9); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); cursor: grab; transition: box-shadow var(--duration-fast) ease, border-color var(--duration-fast) ease, opacity var(--duration-fast) ease; }
.kanban-card:hover { border-color: hsl(var(--border)); box-shadow: var(--shadow-sm); }
.kanban-card.dragging { opacity: 0.5; cursor: grabbing; }
.kanban-card-title { font-size: var(--text-sm); font-weight: var(--font-medium); color: hsl(var(--foreground)); margin: 0 0 var(--space-1); }
.kanban-card-sub { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); margin: 0 0 var(--space-2); }
.kanban-card-label { display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-full); font-size: 0.625rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }
.kanban-label-bug { background: hsl(var(--destructive) / 0.1); color: hsl(var(--destructive)); }
.kanban-label-feature { background: hsl(var(--success) / 0.1); color: hsl(var(--success)); }
.kanban-label-urgent { background: hsl(var(--warning) / 0.1); color: hsl(var(--warning)); }
.kanban-add-card { display: block; width: 100%; padding: var(--space-2) var(--space-3); background: transparent; border: none; border-top: 1px solid hsl(var(--border) / 0.5); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); cursor: pointer; transition: all var(--duration-fast) ease; text-align: start; }
.kanban-add-card:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }

/* Table of Contents */
.toc { display: flex; flex-direction: column; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--card) / 0.4); overflow: hidden; }
.toc-title { padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-semibold); color: hsl(var(--foreground)); border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / 0.3); }
.toc-list { display: flex; flex-direction: column; padding: var(--space-2) 0; }
.toc-item { display: block; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: hsl(var(--muted-foreground)); text-decoration: none; border-inline-start: 2px solid transparent; transition: all var(--duration-fast) ease; }
.toc-item:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.toc-item-active { color: hsl(var(--primary)); border-inline-start-color: hsl(var(--primary)); font-weight: var(--font-medium); background: hsl(var(--primary) / 0.05); }
.toc-level-2 .toc-item, .toc-item.toc-level-2 { font-size: var(--text-xs); }
.toc-level-3 .toc-item, .toc-item.toc-level-3 { font-size: var(--text-xs); color: hsl(var(--muted-foreground) / 0.8); }

/* Split Pane */
.split-pane { display: flex; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; background: hsl(var(--card) / 0.4); min-height: 12rem; }
.split-pane-horizontal { flex-direction: row; }
.split-pane-vertical { flex-direction: column; }
.sp-pane { overflow: auto; padding: var(--space-4); }
.sp-pane-1 { flex-shrink: 0; }
.sp-pane-2 { flex: 1; min-width: 0; min-height: 0; }
.sp-handle { flex-shrink: 0; background: hsl(var(--border)); transition: background var(--duration-fast) ease; }
.sp-handle:hover { background: hsl(var(--primary) / 0.4); }
.sp-handle-horizontal { width: 4px; cursor: col-resize; }
.sp-handle-vertical { height: 4px; cursor: row-resize; }

/* Rich Text Editor */
.rte { border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); overflow: hidden; background: hsl(var(--card) / 0.4); }
.rte-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: hsl(var(--muted) / 0.5); border-bottom: 1px solid hsl(var(--border)); }
.rte-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 var(--space-2); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--font-medium); color: hsl(var(--muted-foreground)); cursor: pointer; transition: all var(--duration-fast) ease; }
.rte-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.rte-sep { width: 1px; height: 1.25rem; background: hsl(var(--border)); margin: 0 var(--space-1); flex-shrink: 0; }
.rte-editor { padding: var(--space-4); min-height: 8rem; font-size: var(--text-sm); color: hsl(var(--foreground)); line-height: var(--leading-relaxed); outline: none; }
.rte-editor:empty::before { content: attr(data-placeholder); color: hsl(var(--muted-foreground) / 0.5); pointer-events: none; }
.rte-editor:focus { box-shadow: inset 0 0 0 1px hsl(var(--ring) / 0.3); }

/* Multi-select */
.multi-select { display: flex; flex-direction: column; gap: var(--space-2); }
.multi-select-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.multi-select-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--font-medium); }
.multi-select-tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; background: transparent; border: none; color: inherit; cursor: pointer; border-radius: var(--radius-sm); font-size: var(--text-xs); line-height: 1; }
.multi-select-tag-remove:hover { background: hsl(var(--destructive) / 0.2); color: hsl(var(--destructive)); }
.multi-select-search { padding: var(--space-2) var(--space-3); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-sm); background: hsl(var(--input)); color: hsl(var(--foreground)); }
.multi-select-search:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2); }
.multi-select-options { display: flex; flex-direction: column; gap: var(--space-1); max-height: 12rem; overflow-y: auto; padding: var(--space-1) 0; }
.multi-select-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); color: hsl(var(--foreground)); cursor: pointer; border-radius: var(--radius-sm); }
.multi-select-option:hover { background: hsl(var(--accent)); }

/* OTP Input */
.otp-input { display: flex; flex-direction: column; gap: var(--space-2); }
.otp-boxes { display: flex; gap: var(--space-2); }
.otp-digit { width: 2.75rem; height: 3rem; text-align: center; font-size: var(--text-lg); font-weight: var(--font-semibold); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--input)); color: hsl(var(--foreground)); }
.otp-digit:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2); }
.otp-digit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Number Stepper */
.number-stepper { display: flex; flex-direction: column; gap: var(--space-2); }
.number-stepper-controls { display: inline-flex; align-items: center; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: hidden; }
.number-stepper-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: hsl(var(--muted) / 0.5); border: none; color: hsl(var(--foreground)); cursor: pointer; font-size: var(--text-lg); transition: background var(--duration-fast) ease; }
.number-stepper-btn:hover { background: hsl(var(--accent)); }
.number-stepper-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.number-stepper-input { width: 3.5rem; height: 2.25rem; text-align: center; border: none; border-inline: 1px solid hsl(var(--border)); background: hsl(var(--input)); color: hsl(var(--foreground)); font-size: var(--text-sm); font-weight: var(--font-medium); -moz-appearance: textfield; }
.number-stepper-input::-webkit-inner-spin-button, .number-stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Tag Input */
.tag-input { display: flex; flex-direction: column; gap: var(--space-2); }
.tag-input-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tag-input-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--font-medium); }
.tag-input-remove { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; background: transparent; border: none; color: inherit; cursor: pointer; border-radius: var(--radius-sm); font-size: var(--text-xs); line-height: 1; }
.tag-input-remove:hover { background: hsl(var(--destructive) / 0.2); color: hsl(var(--destructive)); }
.tag-input-field { padding: var(--space-2) var(--space-3); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); font-size: var(--text-sm); background: hsl(var(--input)); color: hsl(var(--foreground)); }
.tag-input-field:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2); }

/* Input Group */
.input-group { display: flex; align-items: stretch; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: hidden; }
.input-group .form-input, .input-group input, .input-group select { border: none; border-radius: 0; flex: 1; }
.input-group .form-input:focus, .input-group input:focus { box-shadow: none; }
.input-group-error { border-color: hsl(var(--destructive)); }
.input-group-sm { font-size: var(--text-xs); }
.input-group-lg { font-size: var(--text-lg); }
.input-addon { display: flex; align-items: center; padding: 0 var(--space-3); background: hsl(var(--muted) / 0.5); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); white-space: nowrap; border-inline-end: 1px solid hsl(var(--border)); }
.input-addon-suffix { border-inline-end: none; border-inline-start: 1px solid hsl(var(--border)); }

/* Fieldset */
.fieldset { border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); background: hsl(var(--card) / 0.3); }
.fieldset:disabled { opacity: 0.6; pointer-events: none; }
.fieldset-legend { font-size: var(--text-sm); font-weight: var(--font-semibold); color: hsl(var(--foreground)); padding: 0 var(--space-2); }
.fieldset-content { display: flex; flex-direction: column; gap: var(--space-4); }

/* ═══ Toggle Group (#61) ═══ */
.toggle-group { display: inline-flex; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: hidden; background: hsl(var(--muted) / 0.3); }
.toggle-group-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-4); background: transparent; border: none; border-inline-end: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: all var(--duration-fast) ease; }
.toggle-group-btn:last-child { border-inline-end: none; }
.toggle-group-btn:hover:not(:disabled) { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.toggle-group-btn--active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.toggle-group-btn--active:hover:not(:disabled) { background: hsl(var(--primary) / 0.85); }
.toggle-group-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.toggle-group-sm .toggle-group-btn { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.toggle-group-lg .toggle-group-btn { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.toggle-group-disabled { opacity: 0.6; pointer-events: none; }
.toggle-group-icon { flex-shrink: 0; width: 1em; height: 1em; }
.toggle-group-label { white-space: nowrap; }

/* ═══ Floating Action Button (#65) ═══ */
.fab-container { position: fixed; z-index: 50; display: flex; flex-direction: column-reverse; align-items: center; gap: var(--space-3); }
.fab-bottom-right { bottom: var(--space-6); right: var(--space-6); }
.fab-bottom-left { bottom: var(--space-6); left: var(--space-6); }
.fab-top-right { top: var(--space-6); right: var(--space-6); flex-direction: column; }
.fab-top-left { top: var(--space-6); left: var(--space-6); flex-direction: column; }
.fab { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border: none; border-radius: 50%; font-size: 1.5rem; cursor: pointer; box-shadow: var(--shadow-lg); transition: all var(--duration-normal) ease; }
.fab-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.fab-primary:hover:not(:disabled) { background: hsl(var(--primary) / 0.85); box-shadow: var(--shadow-xl, var(--shadow-lg)); }
.fab-secondary { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.fab-secondary:hover:not(:disabled) { background: hsl(var(--accent)); }
.fab-danger { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground, 0 0% 100%)); }
.fab-danger:hover:not(:disabled) { background: hsl(var(--destructive) / 0.85); }
.fab-success { background: hsl(var(--success)); color: hsl(0 0% 100%); }
.fab-success:hover:not(:disabled) { background: hsl(var(--success) / 0.85); }
.fab-sm { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.fab-lg { width: 4.5rem; height: 4.5rem; font-size: 2rem; }
.fab:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.fab-icon { display: flex; align-items: center; justify-content: center; }
.fab-actions { display: flex; flex-direction: column-reverse; align-items: center; gap: var(--space-2); }
.fab-top-right .fab-actions, .fab-top-left .fab-actions { flex-direction: column; }
.fab-action { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: none; border-radius: 50%; background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: var(--shadow-md); cursor: pointer; transition: all var(--duration-fast) ease; }
.fab-action:hover:not(:disabled) { background: hsl(var(--accent)); box-shadow: var(--shadow-lg); }
.fab-action:disabled { opacity: 0.5; cursor: not-allowed; }
.fab-action-icon { display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); }

/* ═══ Split Button (#133) ═══ */
.split-btn { position: relative; display: inline-flex; border-radius: var(--radius-md); overflow: visible; }
.split-btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: none; border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; transition: all var(--duration-fast) ease; }
.split-btn-toggle { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-2); border: none; border-inline-start: 1px solid rgba(255,255,255,0.2); border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast) ease; }
.split-btn-caret { font-size: 0.75em; }
.split-btn-label { white-space: nowrap; }
.split-btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.split-btn-primary:hover:not(:disabled) { background: hsl(var(--primary) / 0.85); }
.split-btn-toggle { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.split-btn-toggle:hover:not(:disabled) { background: hsl(var(--primary) / 0.75); }
.split-btn-secondary .split-btn-primary, .split-btn-secondary .split-btn-toggle { background: hsl(var(--muted)); color: hsl(var(--foreground)); border-inline-start-color: hsl(var(--border)); }
.split-btn-secondary .split-btn-primary:hover:not(:disabled) { background: hsl(var(--accent)); }
.split-btn-secondary .split-btn-toggle:hover:not(:disabled) { background: hsl(var(--accent)); }
.split-btn-danger .split-btn-primary, .split-btn-danger .split-btn-toggle { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground, 0 0% 100%)); }
.split-btn-danger .split-btn-primary:hover:not(:disabled) { background: hsl(var(--destructive) / 0.85); }
.split-btn-danger .split-btn-toggle:hover:not(:disabled) { background: hsl(var(--destructive) / 0.75); }
.split-btn-success .split-btn-primary, .split-btn-success .split-btn-toggle { background: hsl(var(--success)); color: hsl(0 0% 100%); }
.split-btn-success .split-btn-primary:hover:not(:disabled) { background: hsl(var(--success) / 0.85); }
.split-btn-success .split-btn-toggle:hover:not(:disabled) { background: hsl(var(--success) / 0.75); }
.split-btn-sm .split-btn-primary { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.split-btn-sm .split-btn-toggle { padding: var(--space-1) var(--space-1); }
.split-btn-lg .split-btn-primary { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.split-btn-lg .split-btn-toggle { padding: var(--space-3) var(--space-3); }
.split-btn-primary:disabled, .split-btn-toggle:disabled { opacity: 0.5; cursor: not-allowed; }
.split-btn-loading .split-btn-primary { pointer-events: none; opacity: 0.75; }
.split-btn-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dj-spin 0.6s linear infinite; }
.split-btn-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: var(--space-1); padding: var(--space-1); background: hsl(var(--card) / 0.95); backdrop-filter: blur(20px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(calc(-1 * var(--space-1))); transition: all var(--duration-normal) ease; }
.split-btn-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.split-btn-option { display: block; width: 100%; padding: var(--space-2) var(--space-3); background: transparent; border: none; border-radius: var(--radius-sm); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); text-align: start; cursor: pointer; transition: all var(--duration-fast) ease; }
.split-btn-option:hover:not(:disabled) { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.split-btn-option:disabled { opacity: 0.5; cursor: not-allowed; }

/* Scroll Area */
.dj-scroll-area { overflow-y: auto; max-height: var(--dj-scroll-area-max-height, 400px); scrollbar-width: thin; scrollbar-color: var(--dj-scroll-area-thumb, hsl(var(--muted-foreground) / 0.3)) var(--dj-scroll-area-track, transparent); }
.dj-scroll-area::-webkit-scrollbar { width: 8px; }
.dj-scroll-area::-webkit-scrollbar-track { background: var(--dj-scroll-area-track, transparent); border-radius: var(--radius-full, 9999px); }
.dj-scroll-area::-webkit-scrollbar-thumb { background: var(--dj-scroll-area-thumb, hsl(var(--muted-foreground) / 0.3)); border-radius: var(--radius-full, 9999px); border: 2px solid transparent; background-clip: content-box; }
.dj-scroll-area::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); background-clip: content-box; }

/* Callout / Blockquote */
.dj-callout { display: flex; gap: var(--space-3, 0.75rem); padding: var(--space-4, 1rem); border-inline-start: var(--dj-callout-border-width, 4px) solid var(--dj-callout-border-color, hsl(var(--border))); background: var(--dj-callout-bg, hsl(var(--muted) / 0.3)); border-start-end-radius: var(--radius-md, 0.375rem); border-end-end-radius: var(--radius-md, 0.375rem); color: var(--dj-callout-fg, hsl(var(--foreground))); font-size: var(--text-sm, 0.875rem); line-height: var(--leading-relaxed, 1.625); }
.dj-callout__icon { flex-shrink: 0; font-size: 1.25em; line-height: 1; }
.dj-callout__body { flex: 1; min-width: 0; }
.dj-callout__title { font-weight: var(--font-semibold, 600); margin-bottom: var(--space-1, 0.25rem); }
.dj-callout__content { color: hsl(var(--muted-foreground)); }
.dj-callout--info { --dj-callout-border-color: hsl(var(--info)); --dj-callout-bg: hsl(var(--info) / 0.08); }
.dj-callout--info .dj-callout__icon { color: hsl(var(--info)); }
.dj-callout--warning { --dj-callout-border-color: hsl(var(--warning)); --dj-callout-bg: hsl(var(--warning) / 0.08); }
.dj-callout--warning .dj-callout__icon { color: hsl(var(--warning)); }
.dj-callout--danger { --dj-callout-border-color: hsl(var(--destructive)); --dj-callout-bg: hsl(var(--destructive) / 0.08); }
.dj-callout--danger .dj-callout__icon { color: hsl(var(--destructive)); }
.dj-callout--success { --dj-callout-border-color: hsl(var(--success)); --dj-callout-bg: hsl(var(--success) / 0.08); }
.dj-callout--success .dj-callout__icon { color: hsl(var(--success)); }

/* Aspect Ratio */
.dj-aspect-ratio { position: relative; overflow: hidden; }
.dj-aspect-ratio > * { width: 100%; height: 100%; object-fit: cover; }

/* Description List */
.dj-dl { margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3, 0.75rem); }
.dj-dl__pair { display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); }
.dj-dl__term { font-size: var(--text-sm, 0.875rem); font-weight: var(--font-semibold, 600); color: hsl(var(--foreground)); margin: 0; }
.dj-dl__detail { font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground)); margin: 0; }
.dj-dl--horizontal .dj-dl__pair { flex-direction: row; gap: var(--space-4, 1rem); align-items: baseline; }
.dj-dl--horizontal .dj-dl__term { min-width: 10rem; flex-shrink: 0; }
.dj-dl--horizontal .dj-dl__detail { flex: 1; }

/* Sticky Header */
.dj-sticky-header { position: sticky; top: 0; z-index: var(--dj-sticky-header-z, 10); background: var(--dj-sticky-header-bg, hsl(var(--background, 0 0% 100%))); transition: box-shadow var(--duration-normal, 0.2s) ease; }
.dj-sticky-header--stuck { box-shadow: var(--dj-sticky-header-shadow, 0 2px 8px hsl(var(--foreground) / 0.08)); }

/* Loading Overlay */
.dj-loading-overlay-wrap { position: relative; }
.dj-loading-overlay { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3, 0.75rem); background: hsl(var(--background, 0 0% 100%) / 0.7); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: inherit; }
.dj-loading-overlay__spinner { width: var(--space-8, 2rem); height: var(--space-8, 2rem); border: 3px solid hsl(var(--muted, 210 40% 96%)); border-top-color: hsl(var(--primary, 222 47% 51%)); border-radius: 50%; animation: dj-spin 0.8s linear infinite; }
.dj-loading-overlay__spinner--sm { width: var(--space-5, 1.25rem); height: var(--space-5, 1.25rem); border-width: 2px; }
.dj-loading-overlay__spinner--md { width: var(--space-8, 2rem); height: var(--space-8, 2rem); border-width: 3px; }
.dj-loading-overlay__spinner--lg { width: var(--space-12, 3rem); height: var(--space-12, 3rem); border-width: 4px; }
.dj-loading-overlay__text { font-size: var(--text-sm, 0.875rem); font-weight: var(--font-medium, 500); color: hsl(var(--muted-foreground)); }
/* dj-loading-spin replaced by shared dj-spin keyframes */

/* Announcement Bar */
.dj-announcement-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: center; gap: var(--space-3, 0.75rem); padding: var(--space-2, 0.5rem) var(--space-4, 1rem); font-size: var(--text-sm, 0.875rem); font-weight: var(--font-medium, 500); text-align: center; }
.dj-announcement-bar__content { flex: 1; }
.dj-announcement-bar__close { background: none; border: none; cursor: pointer; font-size: var(--text-lg, 1.125rem); line-height: 1; padding: var(--space-1, 0.25rem); opacity: 0.7; transition: opacity var(--duration-fast, 0.1s) ease; color: inherit; }
.dj-announcement-bar__close:hover { opacity: 1; }
.dj-announcement-bar--info { background: hsl(var(--info, 200 80% 55%) / 0.15); color: hsl(var(--info, 200 80% 55%)); border-bottom: 1px solid hsl(var(--info, 200 80% 55%) / 0.3); }
.dj-announcement-bar--success { background: hsl(var(--success, 142 71% 45%) / 0.15); color: hsl(var(--success, 142 71% 45%)); border-bottom: 1px solid hsl(var(--success, 142 71% 45%) / 0.3); }
.dj-announcement-bar--warning { background: hsl(var(--warning, 38 92% 50%) / 0.15); color: hsl(var(--warning, 38 92% 50%)); border-bottom: 1px solid hsl(var(--warning, 38 92% 50%) / 0.3); }
.dj-announcement-bar--danger { background: hsl(var(--destructive, 0 84% 60%) / 0.15); color: hsl(var(--destructive, 0 84% 60%)); border-bottom: 1px solid hsl(var(--destructive, 0 84% 60%) / 0.3); }

/* Rich Select */
.rich-select { position: relative; display: inline-block; min-width: 12rem; }
.rich-select--disabled { opacity: 0.5; pointer-events: none; }
.rich-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, 0.5rem); padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); background: hsl(var(--card, 0 0% 100%)); border: 1px solid hsl(var(--border, 220 13% 91%)); border-radius: var(--radius-md, 0.375rem); cursor: pointer; min-height: 2.5rem; transition: border-color var(--duration-fast, 0.1s) ease; }
.rich-select-trigger:hover { border-color: hsl(var(--primary, 222 47% 51%) / 0.5); }
.rich-select-trigger:focus { outline: 2px solid hsl(var(--primary, 222 47% 51%) / 0.5); outline-offset: 1px; }
.rich-select-chevron { font-size: var(--text-xs, 0.75rem); color: hsl(var(--muted-foreground, 220 9% 46%)); transition: transform var(--duration-fast, 0.1s) ease; flex-shrink: 0; }
.rich-select--open .rich-select-chevron { transform: rotate(180deg); }
.rich-select-placeholder { color: hsl(var(--muted-foreground, 220 9% 46%)); font-size: var(--text-sm, 0.875rem); }
.rich-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; margin-top: var(--space-1, 0.25rem); padding: var(--space-1, 0.25rem); background: hsl(var(--card, 0 0% 100%) / 0.98); backdrop-filter: blur(12px); border: 1px solid hsl(var(--border, 220 13% 91%)); border-radius: var(--radius-md, 0.375rem); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1)); max-height: 16rem; overflow-y: auto; display: none; }
.rich-select--open .rich-select-dropdown { display: block; }
.rich-select-search { padding: var(--space-1, 0.25rem); border-bottom: 1px solid hsl(var(--border, 220 13% 91%)); margin-bottom: var(--space-1, 0.25rem); }
.rich-select-search-input { width: 100%; padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); border: 1px solid hsl(var(--border, 220 13% 91%)); border-radius: var(--radius-sm, 0.25rem); font-size: var(--text-sm, 0.875rem); background: transparent; color: hsl(var(--foreground, 222 47% 11%)); outline: none; }
.rich-select-option { display: flex; align-items: center; gap: var(--space-2, 0.5rem); padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); border-radius: var(--radius-sm, 0.25rem); cursor: pointer; transition: background var(--duration-fast, 0.1s) ease; }
.rich-select-option:hover { background: hsl(var(--accent, 220 14% 96%)); }
.rich-select-option--active { background: hsl(var(--primary, 222 47% 51%) / 0.1); }
.rich-select-option-image { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full, 9999px); object-fit: cover; flex-shrink: 0; }
.rich-select-option-icon { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground, 220 9% 46%)); flex-shrink: 0; }
.rich-select-option-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rich-select-option-label { font-size: var(--text-sm, 0.875rem); font-weight: var(--font-medium, 500); color: hsl(var(--foreground, 222 47% 11%)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rich-select-option-desc { font-size: var(--text-xs, 0.75rem); color: hsl(var(--muted-foreground, 220 9% 46%)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rich-select-option-badge { font-size: var(--text-xs, 0.75rem); padding: 0 var(--space-2, 0.5rem); border-radius: var(--radius-full, 9999px); background: hsl(var(--primary, 222 47% 51%) / 0.1); color: hsl(var(--primary, 222 47% 51%)); font-weight: var(--font-medium, 500); white-space: nowrap; line-height: 1.5; flex-shrink: 0; }

/* Data Grid */
.data-grid-wrapper { border: 1px solid hsl(var(--border, 220 13% 91%)); border-radius: var(--radius-md, 0.375rem); overflow: hidden; background: hsl(var(--card, 0 0% 100%)); }
.data-grid-scroll { overflow-x: auto; }
.data-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.data-grid-header-cell { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); font-size: var(--text-xs, 0.75rem); font-weight: var(--font-semibold, 600); text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground, 220 9% 46%)); background: hsl(var(--muted, 220 14% 96%) / 0.5); border-bottom: 2px solid hsl(var(--border, 220 13% 91%)); text-align: start; white-space: nowrap; position: relative; user-select: none; }
.data-grid-cell { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); font-size: var(--text-sm, 0.875rem); color: hsl(var(--foreground, 222 47% 11%)); border-bottom: 1px solid hsl(var(--border, 220 13% 91%)); cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-grid-cell[data-editable="true"] { cursor: cell; }
.data-grid-cell[data-editable="true"]:hover { background: hsl(var(--primary, 222 47% 51%) / 0.04); }
.data-grid-cell:focus { outline: 2px solid hsl(var(--primary, 222 47% 51%)); outline-offset: -2px; background: hsl(var(--primary, 222 47% 51%) / 0.06); }
.data-grid-cell-editing { padding: 0; }
.data-grid-cell-editing input { width: 100%; height: 100%; padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); border: none; outline: 2px solid hsl(var(--primary, 222 47% 51%)); outline-offset: -2px; font-size: var(--text-sm, 0.875rem); background: hsl(var(--card, 0 0% 100%)); color: hsl(var(--foreground, 222 47% 11%)); }
.data-grid-row { transition: background var(--duration-fast, 0.1s) ease; }
.data-grid-row:hover { background: hsl(var(--accent, 220 14% 96%) / 0.5); }
.data-grid-striped .data-grid-row:nth-child(even) { background: hsl(var(--muted, 220 14% 96%) / 0.3); }
.data-grid-compact .data-grid-header-cell { padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); }
.data-grid-compact .data-grid-cell { padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); }
.data-grid-frozen-left { position: sticky; left: 0; z-index: 1; background: hsl(var(--card, 0 0% 100%)); box-shadow: 2px 0 4px rgba(0,0,0,0.05); }
.data-grid-frozen-right { position: sticky; right: 0; z-index: 1; background: hsl(var(--card, 0 0% 100%)); box-shadow: -2px 0 4px rgba(0,0,0,0.05); }
.data-grid-toolbar { display: flex; align-items: center; gap: var(--space-2, 0.5rem); padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); border-top: 1px solid hsl(var(--border, 220 13% 91%)); }
.data-grid-add-btn { font-size: var(--text-sm, 0.875rem); padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem); background: hsl(var(--primary, 222 47% 51%) / 0.1); color: hsl(var(--primary, 222 47% 51%)); border: 1px solid hsl(var(--primary, 222 47% 51%) / 0.2); border-radius: var(--radius-sm, 0.25rem); cursor: pointer; font-weight: var(--font-medium, 500); transition: background var(--duration-fast, 0.1s) ease; }
.data-grid-add-btn:hover { background: hsl(var(--primary, 222 47% 51%) / 0.2); }
.data-grid-delete-btn { background: none; border: none; cursor: pointer; color: hsl(var(--destructive, 0 84% 60%)); font-size: var(--text-lg, 1.125rem); padding: 0 var(--space-1, 0.25rem); opacity: 0.5; transition: opacity var(--duration-fast, 0.1s) ease; }
.data-grid-delete-btn:hover { opacity: 1; }
.data-grid-actions-col { width: 2.5rem; text-align: center; }
.data-grid-header-cell[data-resizable] { overflow: visible; }
.data-grid-resize-handle { position: absolute; top: 0; right: 0; width: 4px; height: 100%; cursor: col-resize; background: transparent; transition: background var(--duration-fast, 0.1s) ease; }
.data-grid-resize-handle:hover, .data-grid-resize-handle.resizing { background: hsl(var(--primary, 222 47% 51%)); }

/* Streaming Text */
.dj-streaming-text { position: relative; overflow-y: auto; max-height: 24rem; padding: var(--space-4, 1rem); background: var(--dj-streaming-text-bg, hsl(var(--card, 0 0% 100%))); color: var(--dj-streaming-text-fg, hsl(var(--foreground, 222 47% 11%))); border: 1px solid hsl(var(--border, 220 13% 91%)); border-radius: var(--radius-md, 0.375rem); font-size: var(--text-sm, 0.875rem); line-height: var(--leading-relaxed, 1.625); }
.dj-streaming-text__content { white-space: pre-wrap; word-break: break-word; }
.dj-streaming-text--cursor .dj-streaming-text__content::after { content: "\2588"; animation: dj-fade 1s step-end infinite; color: var(--dj-streaming-text-cursor-color, hsl(var(--primary, 222 47% 51%))); margin-inline-start: 1px; }

/* Connection Status Bar */
.dj-connection-status { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; padding: var(--space-2, 0.5rem) var(--space-4, 1rem); text-align: center; font-size: var(--text-xs, 0.75rem); font-weight: var(--font-medium, 500); transition: background var(--duration-normal, 0.2s) ease, transform var(--duration-normal, 0.2s) ease; }
.dj-connection-status--reconnecting { display: block; background: var(--dj-connection-status-bg, hsl(var(--warning, 38 92% 50%))); color: var(--dj-connection-status-fg, hsl(var(--warning-foreground, 0 0% 100%))); }
.dj-connection-status--connected { display: block; background: var(--dj-connection-status-connected-bg, hsl(var(--success, 142 71% 45%))); color: hsl(var(--success-foreground, 0 0% 100%)); animation: dj-flash 2s ease-out forwards; }
.dj-connection-status__text { display: inline-block; }

/* Live Counter */
.dj-live-counter { display: inline-flex; align-items: baseline; gap: var(--space-2, 0.5rem); }
.dj-live-counter__value { font-weight: var(--font-bold, 700); color: var(--dj-live-counter-fg, hsl(var(--foreground, 222 47% 11%))); font-variant-numeric: tabular-nums; transition: transform var(--duration-normal, 0.2s) ease; }
.dj-live-counter__value.dj-live-counter--animating { animation: dj-counter-roll 0.3s ease-out; }
.dj-live-counter__label { color: var(--dj-live-counter-label-fg, hsl(var(--muted-foreground, 220 9% 46%))); font-size: var(--text-sm, 0.875rem); }
.dj-live-counter--sm .dj-live-counter__value { font-size: var(--text-lg, 1.125rem); }
.dj-live-counter--md .dj-live-counter__value { font-size: var(--dj-live-counter-font-size, var(--text-2xl, 1.5rem)); }
.dj-live-counter--lg .dj-live-counter__value { font-size: var(--text-4xl, 2.25rem); }

/* Toast Container (Server Event Toast) */
.dj-toast-container { position: fixed; z-index: 9998; display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); pointer-events: none; max-width: 24rem; }
.dj-toast-container--top-right { top: var(--space-4, 1rem); right: var(--space-4, 1rem); }
.dj-toast-container--top-left { top: var(--space-4, 1rem); left: var(--space-4, 1rem); }
.dj-toast-container--bottom-right { bottom: var(--space-4, 1rem); right: var(--space-4, 1rem); }
.dj-toast-container--bottom-left { bottom: var(--space-4, 1rem); left: var(--space-4, 1rem); }
.dj-toast-container--top-center { top: var(--space-4, 1rem); left: 50%; transform: translateX(-50%); }
.dj-toast-container--bottom-center { bottom: var(--space-4, 1rem); left: 50%; transform: translateX(-50%); }
.dj-server-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3, 0.75rem); padding: var(--space-3, 0.75rem) var(--space-4, 1rem); border-radius: var(--radius-md, 0.375rem); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1)); font-size: var(--text-sm, 0.875rem); animation: dj-slide-in-up 0.3s ease-out; }
.dj-server-toast--info { background: hsl(var(--info, 214 95% 93%)); color: hsl(var(--info-foreground, 214 59% 15%)); border: 1px solid hsl(var(--info, 214 95% 93%) / 0.5); }
.dj-server-toast--success { background: hsl(var(--success, 142 71% 45%) / 0.15); color: hsl(var(--success, 142 71% 45%)); border: 1px solid hsl(var(--success, 142 71% 45%) / 0.3); }
.dj-server-toast--warning { background: hsl(var(--warning, 38 92% 50%) / 0.15); color: hsl(var(--warning, 38 92% 50%)); border: 1px solid hsl(var(--warning, 38 92% 50%) / 0.3); }
.dj-server-toast--error { background: hsl(var(--destructive, 0 84% 60%) / 0.15); color: hsl(var(--destructive, 0 84% 60%)); border: 1px solid hsl(var(--destructive, 0 84% 60%) / 0.3); }
.dj-server-toast__dismiss { background: none; border: none; cursor: pointer; font-size: var(--text-lg, 1.125rem); opacity: 0.5; transition: opacity var(--duration-fast, 0.1s) ease; color: inherit; padding: 0; line-height: 1; }
.dj-server-toast__dismiss:hover { opacity: 1; }
.dj-server-toast--exiting { animation: dj-slide-out-up 0.3s ease-in forwards; }

/* Scroll to Top */
.dj-scroll-to-top { position: fixed; bottom: var(--space-6, 1.5rem); right: var(--space-6, 1.5rem); z-index: 40; width: var(--dj-scroll-top-size, 2.5rem); height: var(--dj-scroll-top-size, 2.5rem); border-radius: var(--dj-scroll-top-radius, var(--radius-full, 9999px)); background: var(--dj-scroll-top-bg, hsl(var(--primary, 222 47% 11%))); color: var(--dj-scroll-top-fg, hsl(var(--primary-foreground, 0 0% 100%))); border: 1px solid hsl(var(--border, 214 32% 91%) / 0.3); box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,.1)); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity var(--duration-normal, 0.2s) ease, transform var(--duration-normal, 0.2s) ease; opacity: 0; pointer-events: none; }
.dj-scroll-to-top[style*="display:none"] { opacity: 0; pointer-events: none; }
.dj-scroll-to-top.dj-scroll-to-top--visible { display: flex !important; opacity: 1; pointer-events: auto; }
.dj-scroll-to-top:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1)); }

/* Code Snippet */
.dj-code-snippet { background: var(--dj-code-snippet-bg, hsl(var(--muted, 210 40% 96%))); border: 1px solid var(--dj-code-snippet-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-code-snippet-radius, var(--radius-lg, 0.5rem)); overflow: hidden; }
.dj-code-snippet__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); border-bottom: 1px solid hsl(var(--border, 214 32% 91%) / 0.5); }
.dj-code-snippet__lang { font-size: var(--text-xs, 0.75rem); font-weight: var(--font-semibold, 600); color: var(--dj-code-snippet-badge-fg, hsl(var(--muted-foreground, 215 16% 47%))); background: var(--dj-code-snippet-badge-bg, hsl(var(--muted, 210 40% 96%) / 0.8)); padding: 0.125rem 0.5rem; border-radius: var(--radius-sm, 0.25rem); text-transform: uppercase; letter-spacing: 0.05em; }
.dj-code-snippet__copy { font-size: var(--text-xs, 0.75rem); padding: 0.25rem 0.5rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-sm, 0.25rem); background: hsl(var(--background, 0 0% 100%)); color: hsl(var(--muted-foreground, 215 16% 47%)); cursor: pointer; transition: all var(--duration-fast, 0.1s) ease; }
.dj-code-snippet__copy:hover { background: hsl(var(--accent, 210 40% 96%)); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-code-snippet__pre { margin: 0; padding: var(--space-3, 0.75rem) var(--space-4, 1rem); overflow-x: auto; }
.dj-code-snippet__code { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--dj-code-snippet-font-size, var(--text-sm, 0.875rem)); color: var(--dj-code-snippet-fg, hsl(var(--foreground, 222 47% 11%))); line-height: var(--leading-relaxed, 1.625); }

/* Responsive Image */
.dj-responsive-image { position: relative; overflow: hidden; border-radius: var(--dj-responsive-image-radius, var(--radius-md, 0.375rem)); background: var(--dj-responsive-image-bg, hsl(var(--muted, 210 40% 96%))); }
.dj-responsive-image__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dj-responsive-image__placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(20px); transform: scale(1.1); transition: opacity var(--duration-normal, 0.2s) ease; }
.dj-responsive-image--blur-up .dj-responsive-image__img { opacity: 0; transition: opacity var(--duration-normal, 0.2s) ease; }
.dj-responsive-image--blur-up .dj-responsive-image__img.dj-loaded { opacity: 1; }
.dj-responsive-image--blur-up .dj-responsive-image__img.dj-loaded + .dj-responsive-image__placeholder,
.dj-responsive-image--blur-up .dj-responsive-image__placeholder.dj-hidden { opacity: 0; }

/* Relative Time */
.dj-relative-time { font-variant-numeric: tabular-nums; }

/* Copyable Text */
.dj-copyable-text { position: relative; display: inline-flex; align-items: center; gap: var(--space-1, 0.25rem); padding: 0.125rem 0.375rem; background: var(--dj-copyable-bg, hsl(var(--muted, 210 40% 96%))); color: var(--dj-copyable-fg, hsl(var(--foreground, 222 47% 11%))); border: 1px solid var(--dj-copyable-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-copyable-radius, var(--radius-sm, 0.25rem)); cursor: pointer; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-sm, 0.875rem); transition: background var(--duration-fast, 0.1s) ease; }
.dj-copyable-text:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-copyable-text__tooltip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 0.25rem 0.5rem; background: var(--dj-copyable-tooltip-bg, hsl(var(--foreground, 222 47% 11%))); color: var(--dj-copyable-tooltip-fg, hsl(var(--background, 0 0% 100%))); font-size: var(--text-xs, 0.75rem); border-radius: var(--radius-sm, 0.25rem); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast, 0.1s) ease; }
.dj-copyable-text.dj-copied .dj-copyable-text__tooltip { opacity: 1; }

/* Icon System */
.dj-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.dj-icon--xs { width: 12px; height: 12px; }
.dj-icon--sm { width: 16px; height: 16px; }
.dj-icon--md { width: 20px; height: 20px; }
.dj-icon--lg { width: 24px; height: 24px; }

/* Theme Toggle */
.dj-theme-toggle { display: inline-flex; align-items: center; gap: var(--space-1, 0.25rem); padding: var(--space-1, 0.25rem); background: var(--dj-theme-toggle-bg, hsl(var(--muted, 210 40% 96%))); border: 1px solid var(--dj-theme-toggle-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--radius-md, 0.375rem); }
.dj-theme-toggle__btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; padding: 0; border: none; border-radius: var(--radius-sm, 0.25rem); background: transparent; color: hsl(var(--muted-foreground, 215 16% 47%)); cursor: pointer; transition: all var(--duration-fast, 0.1s) ease; }
.dj-theme-toggle__btn:hover { color: hsl(var(--foreground, 222 47% 11%)); background: hsl(var(--accent, 210 40% 96%)); }
.dj-theme-toggle__btn[aria-pressed="true"],
.dj-theme-toggle__btn.dj-theme-toggle__btn--active { background: hsl(var(--background, 0 0% 100%)); color: hsl(var(--foreground, 222 47% 11%)); box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)); }

/* Page Header */
.dj-page-header { padding: var(--space-6, 1.5rem) 0; }
.dj-page-header__breadcrumb { margin-bottom: var(--space-3, 0.75rem); font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground, 215 16% 47%)); }
.dj-page-header__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4, 1rem); }
.dj-page-header__text { flex: 1; min-width: 0; }
.dj-page-header__title { font-size: var(--text-2xl, 1.5rem); font-weight: var(--font-bold, 700); color: hsl(var(--foreground, 222 47% 11%)); margin: 0; line-height: var(--leading-tight, 1.25); }
.dj-page-header__subtitle { font-size: var(--text-base, 1rem); color: hsl(var(--muted-foreground, 215 16% 47%)); margin: var(--space-1, 0.25rem) 0 0; }
.dj-page-header__description { font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground, 215 16% 47%)); margin: var(--space-2, 0.5rem) 0 0; line-height: var(--leading-relaxed, 1.625); }
.dj-page-header__actions { display: flex; align-items: center; gap: var(--space-2, 0.5rem); flex-shrink: 0; }
@media (max-width: 640px) {
  .dj-page-header__row { flex-direction: column; align-items: stretch; }
  .dj-page-header__actions { justify-content: flex-start; }
}

/* --- Slider / Range --- */
.dj-slider { display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); }
.dj-slider__label { font-size: var(--text-sm, 0.875rem); font-weight: var(--font-medium, 500); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-slider__track { position: relative; display: flex; align-items: center; }
.dj-slider__input { width: 100%; appearance: none; -webkit-appearance: none; height: 6px; background: hsl(var(--muted, 210 40% 96%)); border-radius: var(--radius-full, 9999px); outline: none; cursor: pointer; }
.dj-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--primary, 222 47% 51%)); cursor: pointer; border: 2px solid hsl(var(--background, 0 0% 100%)); box-shadow: 0 1px 3px hsl(0 0% 0% / 0.15); }
.dj-slider__input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: hsl(var(--primary, 222 47% 51%)); cursor: pointer; border: 2px solid hsl(var(--background, 0 0% 100%)); box-shadow: 0 1px 3px hsl(0 0% 0% / 0.15); }
.dj-slider__input:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.2); }
.dj-slider__input:disabled { opacity: 0.5; cursor: not-allowed; }
.dj-slider--range .dj-slider__track { display: grid; }
.dj-slider--range .dj-slider__input { grid-area: 1/1; pointer-events: none; }
.dj-slider--range .dj-slider__input::-webkit-slider-thumb { pointer-events: auto; }
.dj-slider--range .dj-slider__input::-moz-range-thumb { pointer-events: auto; }
.dj-slider__value { font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground, 215 16% 47%)); font-variant-numeric: tabular-nums; }
.dj-slider__ticks { display: flex; justify-content: space-between; padding: 0 2px; margin-top: var(--space-1, 0.25rem); }
.dj-slider__tick { width: 1px; height: 6px; background: hsl(var(--border, 214 32% 91%)); }

/* --- Search Input --- */
.dj-search-input { position: relative; display: inline-flex; align-items: center; width: 100%; }
.dj-search-input__label { display: block; font-size: var(--text-sm, 0.875rem); font-weight: var(--font-medium, 500); color: hsl(var(--foreground, 222 47% 11%)); margin-bottom: var(--space-1, 0.25rem); }
.dj-search-input__icon { position: absolute; inset-inline-start: var(--space-3, 0.75rem); color: hsl(var(--muted-foreground, 215 16% 47%)); pointer-events: none; flex-shrink: 0; }
.dj-search-input__input { width: 100%; padding: var(--space-2, 0.5rem) var(--space-8, 2rem); padding-inline-start: var(--space-9, 2.25rem); background: hsl(var(--input, var(--card, 0 0% 100%))); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-md, 0.375rem); font-size: var(--text-sm, 0.875rem); color: hsl(var(--foreground, 222 47% 11%)); transition: border-color var(--duration-fast, 150ms) ease, box-shadow var(--duration-fast, 150ms) ease; }
.dj-search-input__input::placeholder { color: hsl(var(--muted-foreground, 215 16% 47%) / 0.6); }
.dj-search-input__input:focus { outline: none; border-color: hsl(var(--ring, 222 47% 51%)); box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.2); }
.dj-search-input__input:disabled { opacity: 0.5; cursor: not-allowed; }
.dj-search-input__clear { position: absolute; inset-inline-end: var(--space-2, 0.5rem); background: none; border: none; cursor: pointer; color: hsl(var(--muted-foreground, 215 16% 47%)); font-size: var(--text-lg, 1.125rem); padding: var(--space-1, 0.25rem); line-height: 1; border-radius: var(--radius-sm, 0.25rem); }
.dj-search-input__clear:hover { color: hsl(var(--foreground, 222 47% 11%)); }
.dj-search-input__spinner { position: absolute; inset-inline-end: var(--space-2, 0.5rem); width: 16px; height: 16px; border: 2px solid hsl(var(--muted, 210 40% 96%)); border-top-color: hsl(var(--primary, 222 47% 51%)); border-radius: 50%; animation: dj-spin 0.6s linear infinite; }
.dj-search-input--loading .dj-search-input__clear { display: none; }
.dj-search-input--loading .dj-search-input__input { padding-inline-end: var(--space-9, 2.25rem); }

/* --- Password Input --- */
.dj-password-input { position: relative; display: flex; align-items: center; }
.dj-password-input__input { width: 100%; padding-inline-end: var(--space-10, 2.5rem); }
.dj-password-input__toggle { position: absolute; inset-inline-end: var(--space-2, 0.5rem); background: none; border: none; cursor: pointer; color: hsl(var(--muted-foreground, 215 16% 47%)); padding: var(--space-1, 0.25rem); border-radius: var(--radius-sm, 0.25rem); display: flex; align-items: center; }
.dj-password-input__toggle:hover { color: hsl(var(--foreground, 222 47% 11%)); }
.dj-password-input__eye { width: 16px; height: 16px; }
.dj-password-input--error .dj-password-input__input { border-color: hsl(var(--destructive, 0 84% 60%) / 0.6); }
.dj-password-strength { display: flex; gap: var(--space-1, 0.25rem); margin-top: var(--space-1, 0.25rem); }
.dj-password-strength__bar { flex: 1; height: 4px; border-radius: var(--radius-full, 9999px); background: hsl(var(--muted, 210 40% 96%)); transition: background var(--duration-fast, 150ms) ease; }
.dj-password-strength--1 .dj-password-strength__bar:nth-child(1) { background: hsl(0 84% 60%); }
.dj-password-strength--2 .dj-password-strength__bar:nth-child(-n+2) { background: hsl(25 95% 53%); }
.dj-password-strength--3 .dj-password-strength__bar:nth-child(-n+3) { background: hsl(48 96% 53%); }
.dj-password-strength--4 .dj-password-strength__bar { background: hsl(142 71% 45%); }

/* --- Autocomplete --- */
.dj-autocomplete { position: relative; }
.dj-autocomplete__input { width: 100%; }
.dj-autocomplete__dropdown { position: absolute; z-index: 50; inset-inline-start: 0; inset-inline-end: 0; top: 100%; margin-top: var(--space-1, 0.25rem); background: hsl(var(--popover, var(--card, 0 0% 100%))); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-md, 0.375rem); box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1); max-height: 240px; overflow-y: auto; list-style: none; padding: var(--space-1, 0.25rem) 0; margin: var(--space-1, 0.25rem) 0 0; }
.dj-autocomplete__dropdown--hidden { display: none; }
.dj-autocomplete__item { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); cursor: pointer; font-size: var(--text-sm, 0.875rem); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-autocomplete__item:hover, .dj-autocomplete__item[aria-selected="true"] { background: hsl(var(--accent, 210 40% 96%)); }
.dj-autocomplete__spinner { position: absolute; inset-inline-end: var(--space-3, 0.75rem); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid hsl(var(--muted, 210 40% 96%)); border-top-color: hsl(var(--primary, 222 47% 51%)); border-radius: 50%; animation: dj-spin 0.6s linear infinite; }
.dj-autocomplete--error .dj-autocomplete__input { border-color: hsl(var(--destructive, 0 84% 60%) / 0.6); }

/* --- Confirmation Dialog --- */
.dj-confirm-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
.dj-confirm-dialog { position: relative; width: 24rem; max-width: 90vw; background: hsl(var(--card, 0 0% 100%)); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-lg, 0.5rem); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1)); display: flex; flex-direction: column; }
.dj-confirm-dialog__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4, 1rem) var(--space-5, 1.25rem) 0; }
.dj-confirm-dialog__title { margin: 0; font-size: var(--text-lg, 1.125rem); font-weight: var(--font-semibold, 600); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-confirm-dialog__close { background: none; border: none; font-size: var(--text-xl, 1.25rem); color: hsl(var(--muted-foreground, 215 16% 47%)); cursor: pointer; padding: 0; line-height: 1; }
.dj-confirm-dialog__close:hover { color: hsl(var(--foreground, 222 47% 11%)); }
.dj-confirm-dialog__body { padding: var(--space-4, 1rem) var(--space-5, 1.25rem); }
.dj-confirm-dialog__message { margin: 0; font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground, 215 16% 47%)); line-height: var(--leading-relaxed, 1.625); }
.dj-confirm-dialog__footer { display: flex; justify-content: flex-end; gap: var(--space-2, 0.5rem); padding: 0 var(--space-5, 1.25rem) var(--space-4, 1rem); }
.dj-confirm-dialog__btn { padding: var(--space-2, 0.5rem) var(--space-4, 1rem); border-radius: var(--radius-md, 0.375rem); font-size: var(--text-sm, 0.875rem); font-weight: var(--font-medium, 500); cursor: pointer; border: 1px solid transparent; transition: background var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease; }
.dj-confirm-dialog__btn--cancel { background: hsl(var(--muted, 210 40% 96%)); color: hsl(var(--foreground, 222 47% 11%)); border-color: hsl(var(--border, 214 32% 91%)); }
.dj-confirm-dialog__btn--cancel:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-confirm-dialog__btn--confirm { background: hsl(var(--primary, 222 47% 51%)); color: hsl(var(--primary-foreground, 210 40% 98%)); }
.dj-confirm-dialog__btn--confirm:hover { opacity: 0.9; }
.dj-confirm-dialog--danger .dj-confirm-dialog__btn--confirm { background: hsl(var(--destructive, 0 84% 60%)); color: hsl(var(--destructive-foreground, 210 40% 98%)); }
.dj-confirm-dialog--danger .dj-confirm-dialog__title { color: hsl(var(--destructive, 0 84% 60%)); }

/* --- Popconfirm --- */
.dj-popconfirm-wrapper { position: relative; display: inline-block; }
.dj-popconfirm-trigger { display: inline-block; cursor: pointer; }
.dj-popconfirm { position: absolute; z-index: 50; min-width: 14rem; max-width: 20rem; padding: var(--space-3, 0.75rem) var(--space-4, 1rem); background: hsl(var(--card, 0 0% 100%) / 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-lg, 0.5rem); box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1)); opacity: 0; visibility: hidden; transform: scale(0.95); transition: opacity var(--duration-normal, 200ms) ease, visibility var(--duration-normal, 200ms) ease, transform var(--duration-normal, 200ms) ease; pointer-events: none; }
.dj-popconfirm-wrapper[data-open] .dj-popconfirm { opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; }
.dj-popconfirm__message { margin: 0 0 var(--space-3, 0.75rem); font-size: var(--text-sm, 0.875rem); color: hsl(var(--foreground, 222 47% 11%)); line-height: var(--leading-relaxed, 1.625); }
.dj-popconfirm__actions { display: flex; justify-content: flex-end; gap: var(--space-2, 0.5rem); }
.dj-popconfirm__btn { padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem); border-radius: var(--radius-md, 0.375rem); font-size: var(--text-xs, 0.75rem); font-weight: var(--font-medium, 500); cursor: pointer; border: 1px solid transparent; transition: background var(--duration-fast, 150ms) ease; }
.dj-popconfirm__btn--cancel { background: hsl(var(--muted, 210 40% 96%)); color: hsl(var(--foreground, 222 47% 11%)); border-color: hsl(var(--border, 214 32% 91%)); }
.dj-popconfirm__btn--cancel:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-popconfirm__btn--confirm { background: hsl(var(--primary, 222 47% 51%)); color: hsl(var(--primary-foreground, 210 40% 98%)); }
.dj-popconfirm__btn--confirm:hover { opacity: 0.9; }
.dj-popconfirm--danger .dj-popconfirm__btn--confirm { background: hsl(var(--destructive, 0 84% 60%)); color: hsl(var(--destructive-foreground, 210 40% 98%)); }
/* Placement: top (default) */
.dj-popconfirm-top { bottom: 100%; left: 50%; transform: translateX(-50%) scale(0.95); margin-bottom: var(--space-2, 0.5rem); }
.dj-popconfirm-wrapper[data-open] .dj-popconfirm-top { transform: translateX(-50%) scale(1); }
/* Placement: bottom */
.dj-popconfirm-bottom { top: 100%; left: 50%; transform: translateX(-50%) scale(0.95); margin-top: var(--space-2, 0.5rem); }
.dj-popconfirm-wrapper[data-open] .dj-popconfirm-bottom { transform: translateX(-50%) scale(1); }
/* Placement: left */
.dj-popconfirm-left { right: 100%; top: 50%; transform: translateY(-50%) scale(0.95); margin-inline-end: var(--space-2, 0.5rem); }
.dj-popconfirm-wrapper[data-open] .dj-popconfirm-left { transform: translateY(-50%) scale(1); }
/* Placement: right */
.dj-popconfirm-right { left: 100%; top: 50%; transform: translateY(-50%) scale(0.95); margin-inline-start: var(--space-2, 0.5rem); }
.dj-popconfirm-wrapper[data-open] .dj-popconfirm-right { transform: translateY(-50%) scale(1); }
/* Popconfirm arrows */
.dj-popconfirm::after { content: ''; position: absolute; width: 0; height: 0; border: 6px solid transparent; }
.dj-popconfirm-top::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: hsl(var(--border, 214 32% 91%)); }
.dj-popconfirm-bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: hsl(var(--border, 214 32% 91%)); }
.dj-popconfirm-left::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: hsl(var(--border, 214 32% 91%)); }
.dj-popconfirm-right::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: hsl(var(--border, 214 32% 91%)); }

/* ───────────────────────────────────────────────────────────────────────── */
/* Dependent Select                                                        */
/* ───────────────────────────────────────────────────────────────────────── */
.dj-dependent-select { display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); }
.dj-dependent-select__control { position: relative; display: flex; align-items: center; }
.dj-dependent-select__control select { width: 100%; padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); font-size: var(--text-sm, 0.875rem); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-md, 0.375rem); background: hsl(var(--background, 0 0% 100%)); color: hsl(var(--foreground, 222 47% 11%)); appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 2rem; }
.dj-dependent-select__control select:focus { outline: none; border-color: hsl(var(--ring, 222 47% 51%)); box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.2); }
.dj-dependent-select__control select:disabled { opacity: 0.5; cursor: not-allowed; }
.dj-dependent-select__control::after { content: '\25BE'; position: absolute; right: 0.75rem; pointer-events: none; color: hsl(var(--muted-foreground, 215 16% 47%)); }
.dj-dependent-select--loading .dj-dependent-select__control select { opacity: 0.6; }
.dj-dependent-select__spinner { position: absolute; right: 2rem; width: 14px; height: 14px; border: 2px solid hsl(var(--muted, 210 40% 96%)); border-top-color: hsl(var(--primary, 222 47% 51%)); border-radius: 50%; animation: dj-spin 0.6s linear infinite; }
.dj-dependent-select--error .dj-dependent-select__control select { border-color: hsl(var(--destructive, 0 84% 60%)); }

/* ───────────────────────────────────────────────────────────────────────── */
/* Currency Input                                                          */
/* ───────────────────────────────────────────────────────────────────────── */
.dj-currency-input { display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); }
.dj-currency-input__control { display: flex; align-items: center; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-md, 0.375rem); overflow: hidden; background: hsl(var(--background, 0 0% 100%)); }
.dj-currency-input__control:focus-within { border-color: hsl(var(--ring, 222 47% 51%)); box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.2); }
.dj-currency-input__symbol { padding: var(--space-2, 0.5rem) var(--space-2, 0.5rem); font-size: var(--text-sm, 0.875rem); font-weight: var(--font-medium, 500); color: hsl(var(--muted-foreground, 215 16% 47%)); background: hsl(var(--muted, 210 40% 96%)); border-inline-end: 1px solid hsl(var(--border, 214 32% 91%)); white-space: nowrap; user-select: none; }
.dj-currency-input__field { flex: 1; border: none; outline: none; padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); font-size: var(--text-sm, 0.875rem); background: transparent; color: hsl(var(--foreground, 222 47% 11%)); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.dj-currency-input__field::-webkit-inner-spin-button,
.dj-currency-input__field::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dj-currency-input__field:disabled { opacity: 0.5; cursor: not-allowed; }
.dj-currency-input__code { padding: var(--space-2, 0.5rem) var(--space-2, 0.5rem); font-size: var(--text-xs, 0.75rem); color: hsl(var(--muted-foreground, 215 16% 47%)); text-transform: uppercase; letter-spacing: 0.05em; user-select: none; }
.dj-currency-input--error .dj-currency-input__control { border-color: hsl(var(--destructive, 0 84% 60%)); }

/* ───────────────────────────────────────────────────────────────────────── */
/* Form Validation Display                                                 */
/* ───────────────────────────────────────────────────────────────────────── */
.dj-form-errors { padding: var(--space-3, 0.75rem) var(--space-4, 1rem); background: hsl(var(--destructive, 0 84% 60%) / 0.08); border: 1px solid hsl(var(--destructive, 0 84% 60%) / 0.3); border-radius: var(--radius-md, 0.375rem); margin-block-end: var(--space-4, 1rem); }
.dj-form-errors__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); }
.dj-form-errors__item { font-size: var(--text-sm, 0.875rem); color: hsl(var(--destructive, 0 84% 60%)); }
.dj-form-errors__item::before { content: '\26A0\FE0F'; margin-inline-end: var(--space-1, 0.25rem); }
.dj-field-error { margin-block-start: var(--space-1, 0.25rem); }
.dj-field-error__message { display: block; font-size: var(--text-xs, 0.75rem); color: hsl(var(--destructive, 0 84% 60%)); }

/* ───────────────────────────────────────────────────────────────────────── */
/* Sidebar Nav (#86)                                                       */
/* ───────────────────────────────────────────────────────────────────────── */
.dj-sidebar { display: flex; flex-direction: column; width: 16rem; height: 100%; background: hsl(var(--card, 0 0% 100%)); border-inline-end: 1px solid hsl(var(--border, 214 32% 91%)); transition: width 0.2s ease; position: relative; }
.dj-sidebar--collapsed { width: 4rem; }
.dj-sidebar--collapsed .dj-sidebar__label,
.dj-sidebar--collapsed .dj-sidebar__section-label,
.dj-sidebar--collapsed .dj-sidebar__title { display: none; }
.dj-sidebar--collapsed .dj-sidebar__submenu { display: none; }
.dj-sidebar__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3, 0.75rem) var(--space-4, 1rem); border-block-end: 1px solid hsl(var(--border, 214 32% 91%)); }
.dj-sidebar__title { font-size: var(--text-sm, 0.875rem); font-weight: var(--font-semibold, 600); color: hsl(var(--foreground, 222 47% 11%)); white-space: nowrap; overflow: hidden; }
.dj-sidebar__toggle { background: none; border: none; cursor: pointer; padding: var(--space-1, 0.25rem); font-size: var(--text-lg, 1.125rem); color: hsl(var(--muted-foreground, 215 16% 47%)); border-radius: var(--radius-sm, 0.25rem); }
.dj-sidebar__toggle:hover { background: hsl(var(--accent, 210 40% 96%)); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-sidebar__menu { list-style: none; margin: 0; padding: var(--space-2, 0.5rem) 0; flex: 1; overflow-y: auto; }
.dj-sidebar__section { padding: var(--space-3, 0.75rem) var(--space-4, 1rem) var(--space-1, 0.25rem); }
.dj-sidebar__section-label { font-size: var(--text-xs, 0.75rem); font-weight: var(--font-semibold, 600); color: hsl(var(--muted-foreground, 215 16% 47%)); text-transform: uppercase; letter-spacing: 0.05em; }
.dj-sidebar__item { margin: 0; }
.dj-sidebar__link { display: flex; align-items: center; gap: var(--space-3, 0.75rem); padding: var(--space-2, 0.5rem) var(--space-4, 1rem); font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground, 215 16% 47%)); text-decoration: none; border: none; background: none; width: 100%; cursor: pointer; border-radius: var(--radius-sm, 0.25rem); transition: background-color 0.15s, color 0.15s; }
.dj-sidebar__link:hover { background: hsl(var(--accent, 210 40% 96%)); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-sidebar__link.dj-sidebar__item--active,
.dj-sidebar__item--active > .dj-sidebar__link { background: hsl(var(--primary, 222 47% 51%) / 0.1); color: hsl(var(--primary, 222 47% 51%)); font-weight: var(--font-medium, 500); }
.dj-sidebar__icon { flex-shrink: 0; width: 1.25rem; text-align: center; }
.dj-sidebar__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-sidebar__submenu { list-style: none; margin: 0; padding: 0 0 0 var(--space-4, 1rem); }
.dj-sidebar__item--level-1 { padding-inline-start: calc(var(--space-4, 1rem) + var(--space-4, 1rem)); }
.dj-sidebar__backdrop { display: none; }
@media (max-width: 768px) {
  .dj-sidebar { position: fixed; inset-block-start: 0; inset-inline-start: -100%; z-index: 50; width: 16rem; height: 100vh; box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)); transition: inset-inline-start 0.3s ease; }
  .dj-sidebar:not(.dj-sidebar--collapsed) { inset-inline-start: 0; }
  .dj-sidebar__backdrop { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / 0.3); z-index: -1; }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Navigation Menu (#90)                                                   */
/* ───────────────────────────────────────────────────────────────────────── */
.dj-nav { background: hsl(var(--card, 0 0% 100%)); border-block-end: 1px solid hsl(var(--border, 214 32% 91%)); }
.dj-nav__container { display: flex; align-items: center; gap: var(--space-4, 1rem); padding: 0 var(--space-4, 1rem); max-width: 80rem; margin: 0 auto; }
.dj-nav__brand { font-size: var(--text-lg, 1.125rem); font-weight: var(--font-bold, 700); color: hsl(var(--foreground, 222 47% 11%)); text-decoration: none; padding: var(--space-3, 0.75rem) 0; white-space: nowrap; }
.dj-nav__brand:hover { color: hsl(var(--primary, 222 47% 51%)); }
.dj-nav__hamburger { display: none; background: none; border: none; cursor: pointer; font-size: var(--text-xl, 1.25rem); padding: var(--space-2, 0.5rem); color: hsl(var(--foreground, 222 47% 11%)); border-radius: var(--radius-sm, 0.25rem); }
.dj-nav__hamburger:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-nav__list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; flex: 1; }
.dj-nav__item { position: relative; }
.dj-nav__link { display: flex; align-items: center; gap: var(--space-1, 0.25rem); padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem); font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground, 215 16% 47%)); text-decoration: none; border: none; background: none; cursor: pointer; white-space: nowrap; transition: color 0.15s; }
.dj-nav__link:hover { color: hsl(var(--foreground, 222 47% 11%)); }
.dj-nav__item--active > .dj-nav__link { color: hsl(var(--primary, 222 47% 51%)); box-shadow: inset 0 -2px 0 hsl(var(--primary, 222 47% 51%)); }
.dj-nav__caret { font-size: 0.625rem; transition: transform 0.2s; }
.dj-nav__item--has-dropdown:hover .dj-nav__caret { transform: rotate(180deg); }
.dj-nav__dropdown { display: none; position: absolute; inset-block-start: 100%; inset-inline-start: 0; min-width: 12rem; background: hsl(var(--card, 0 0% 100%)); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-md, 0.375rem); box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)); z-index: 40; padding: var(--space-1, 0.25rem) 0; }
.dj-nav__item--has-dropdown:hover .dj-nav__dropdown { display: block; }
.dj-nav__dropdown--mega { min-width: 32rem; padding: var(--space-4, 1rem); }
.dj-nav__dropdown--mega .dj-nav__dropdown-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-2, 0.5rem); }
.dj-nav__dropdown-list { list-style: none; margin: 0; padding: 0; }
.dj-nav__dropdown-item { margin: 0; }
.dj-nav__dropdown-link { display: flex; flex-direction: column; padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); font-size: var(--text-sm, 0.875rem); color: hsl(var(--foreground, 222 47% 11%)); text-decoration: none; border: none; background: none; width: 100%; cursor: pointer; border-radius: var(--radius-sm, 0.25rem); }
.dj-nav__dropdown-link:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-nav__dropdown-item--active .dj-nav__dropdown-link { color: hsl(var(--primary, 222 47% 51%)); background: hsl(var(--primary, 222 47% 51%) / 0.05); }
.dj-nav__dropdown-desc { font-size: var(--text-xs, 0.75rem); color: hsl(var(--muted-foreground, 215 16% 47%)); margin-block-start: var(--space-1, 0.25rem); }
@media (max-width: 768px) {
  .dj-nav__hamburger { display: block; margin-inline-start: auto; }
  .dj-nav__list { display: none; flex-direction: column; position: absolute; inset-block-start: 100%; inset-inline-start: 0; width: 100%; background: hsl(var(--card, 0 0% 100%)); border-block-end: 1px solid hsl(var(--border, 214 32% 91%)); box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)); z-index: 40; }
  .dj-nav__list--open { display: flex; }
  .dj-nav__dropdown { position: static; border: none; box-shadow: none; padding-inline-start: var(--space-4, 1rem); }
  .dj-nav__item--has-dropdown:hover .dj-nav__dropdown { display: block; }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* App Shell (#167)                                                        */
/* ───────────────────────────────────────────────────────────────────────── */
.dj-app-shell { display: flex; min-height: 100vh; width: 100%; }
.dj-app-shell__sidebar { flex-shrink: 0; width: 16rem; transition: width 0.2s ease; overflow-y: auto; background: hsl(var(--card, 0 0% 100%)); border-inline-end: 1px solid hsl(var(--border, 214 32% 91%)); }
.dj-app-shell--sidebar-collapsed .dj-app-shell__sidebar { width: 4rem; }
.dj-app-shell__main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dj-app-shell__header { flex-shrink: 0; background: hsl(var(--card, 0 0% 100%)); border-block-end: 1px solid hsl(var(--border, 214 32% 91%)); padding: var(--space-3, 0.75rem) var(--space-4, 1rem); }
.dj-app-shell__content { flex: 1; padding: var(--space-4, 1rem); overflow-y: auto; }
@media (max-width: 768px) {
  .dj-app-shell { flex-direction: column; }
  .dj-app-shell__sidebar { width: 100%; border-inline-end: none; border-block-end: 1px solid hsl(var(--border, 214 32% 91%)); }
  .dj-app-shell--sidebar-collapsed .dj-app-shell__sidebar { width: 100%; }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Toolbar (#87)                                                           */
/* ───────────────────────────────────────────────────────────────────────── */
.dj-toolbar { display: flex; align-items: center; gap: var(--space-2, 0.5rem); padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); background: hsl(var(--card, 0 0% 100%)); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-md, 0.375rem); flex-wrap: wrap; }
.dj-toolbar--sm { padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); gap: var(--space-1, 0.25rem); }
.dj-toolbar--lg { padding: var(--space-3, 0.75rem) var(--space-4, 1rem); gap: var(--space-3, 0.75rem); }
.dj-toolbar--flat { border: none; background: transparent; }
.dj-toolbar__group { display: flex; align-items: center; gap: var(--space-1, 0.25rem); }
.dj-toolbar__separator { width: 1px; height: 1.5rem; background: hsl(var(--border, 214 32% 91%)); margin: 0 var(--space-1, 0.25rem); flex-shrink: 0; }
.dj-toolbar__overflow { position: relative; margin-inline-start: auto; }
.dj-toolbar__overflow-trigger { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: transparent; border-radius: var(--radius-sm, 0.25rem); cursor: pointer; color: hsl(var(--muted-foreground, 215 16% 47%)); font-size: 1.25rem; }
.dj-toolbar__overflow-trigger:hover { background: hsl(var(--accent, 210 40% 96%)); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-toolbar__overflow-menu { display: none; position: absolute; inset-block-start: 100%; inset-inline-end: 0; min-width: 10rem; background: hsl(var(--card, 0 0% 100%)); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-md, 0.375rem); box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)); z-index: 40; padding: var(--space-1, 0.25rem) 0; }
.dj-toolbar__overflow:hover .dj-toolbar__overflow-menu { display: block; }
@media (max-width: 640px) {
  .dj-toolbar { flex-wrap: wrap; }
  .dj-toolbar__group { flex-wrap: wrap; }
}

/* ───────────────────────────────────────────────────────────────────────── */
/* Inline Edit (#88)                                                       */
/* ───────────────────────────────────────────────────────────────────────── */
.dj-inline-edit { display: inline-flex; align-items: center; gap: var(--space-1, 0.25rem); cursor: pointer; border-radius: var(--radius-sm, 0.25rem); padding: var(--space-1, 0.25rem); transition: background 0.15s ease; }
.dj-inline-edit:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-inline-edit__display { border-bottom: 1px dashed hsl(var(--border, 214 32% 91%)); }
.dj-inline-edit__icon { font-size: var(--text-xs, 0.75rem); color: hsl(var(--muted-foreground, 215 16% 47%)); opacity: 0; transition: opacity 0.15s ease; }
.dj-inline-edit:hover .dj-inline-edit__icon { opacity: 1; }
.dj-inline-edit--editing { cursor: default; background: transparent; }
.dj-inline-edit--editing:hover { background: transparent; }
.dj-inline-edit__input { font: inherit; padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); border: 1px solid hsl(var(--primary, 222 47% 51%)); border-radius: var(--radius-sm, 0.25rem); outline: none; background: hsl(var(--background, 0 0% 100%)); color: hsl(var(--foreground, 222 47% 11%)); box-shadow: 0 0 0 2px hsl(var(--primary, 222 47% 51%) / 0.2); }
.dj-inline-edit__input:focus { border-color: hsl(var(--primary, 222 47% 51%)); }

/* ───────────────────────────────────────────────────────────────────────── */
/* Filter Bar (#166)                                                       */
/* ───────────────────────────────────────────────────────────────────────── */
.dj-filter-bar { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); padding: var(--space-3, 0.75rem); background: hsl(var(--card, 0 0% 100%)); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-md, 0.375rem); }
.dj-filter-bar__controls { display: flex; align-items: center; gap: var(--space-3, 0.75rem); flex-wrap: wrap; }
.dj-filter-bar__control { display: flex; align-items: center; gap: var(--space-1, 0.25rem); }
.dj-filter-bar__label { font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground, 215 16% 47%)); white-space: nowrap; }
.dj-filter-bar__select { font: inherit; padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-sm, 0.25rem); background: hsl(var(--background, 0 0% 100%)); color: hsl(var(--foreground, 222 47% 11%)); min-width: 8rem; }
.dj-filter-bar__select:focus { border-color: hsl(var(--primary, 222 47% 51%)); outline: none; box-shadow: 0 0 0 2px hsl(var(--primary, 222 47% 51%) / 0.2); }
.dj-filter-bar__date-range { display: flex; align-items: center; gap: var(--space-1, 0.25rem); }
.dj-filter-bar__date { font: inherit; padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-sm, 0.25rem); background: hsl(var(--background, 0 0% 100%)); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-filter-bar__date:focus { border-color: hsl(var(--primary, 222 47% 51%)); outline: none; box-shadow: 0 0 0 2px hsl(var(--primary, 222 47% 51%) / 0.2); }
.dj-filter-bar__date-sep { color: hsl(var(--muted-foreground, 215 16% 47%)); padding: 0 var(--space-1, 0.25rem); }
.dj-filter-bar__search { font: inherit; padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--radius-sm, 0.25rem); background: hsl(var(--background, 0 0% 100%)); color: hsl(var(--foreground, 222 47% 11%)); min-width: 12rem; }
.dj-filter-bar__search:focus { border-color: hsl(var(--primary, 222 47% 51%)); outline: none; box-shadow: 0 0 0 2px hsl(var(--primary, 222 47% 51%) / 0.2); }
.dj-filter-bar__actions { display: flex; align-items: center; margin-inline-start: auto; }
.dj-filter-bar__clear { font: inherit; font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground, 215 16% 47%)); background: none; border: none; cursor: pointer; padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); border-radius: var(--radius-sm, 0.25rem); }
.dj-filter-bar__clear:hover { color: hsl(var(--foreground, 222 47% 11%)); background: hsl(var(--accent, 210 40% 96%)); }
@media (max-width: 640px) {
  .dj-filter-bar__controls { flex-direction: column; align-items: stretch; }
  .dj-filter-bar__select, .dj-filter-bar__search { width: 100%; min-width: 0; }
  .dj-filter-bar__date-range { flex-wrap: wrap; }
}

/* ==========================================================================
   Avatar Group
   Stacked overlapping avatar circles with "+N" overflow.
   ========================================================================== */
.dj-avatar-group { display: flex; align-items: center; }
.dj-avatar-group__item { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--dj-avatar-group-radius, 50%); border: var(--dj-avatar-group-border, 2px solid hsl(var(--background, 0 0% 100%))); background: var(--dj-avatar-group-bg, hsl(var(--muted, 210 40% 96%))); color: var(--dj-avatar-group-fg, hsl(var(--foreground, 222 47% 11%))); overflow: hidden; font-weight: 600; cursor: default; }
.dj-avatar-group__item + .dj-avatar-group__item { margin-inline-start: var(--dj-avatar-group-overlap, -0.75rem); }
.dj-avatar-group__img { width: 100%; height: 100%; object-fit: cover; }
.dj-avatar-group__initials { font-size: 0.75em; text-transform: uppercase; }
.dj-avatar-group__overflow { font-size: 0.7em; background: hsl(var(--muted, 210 40% 96%)); color: hsl(var(--muted-foreground, 215 16% 47%)); }
/* Sizes */
.dj-avatar-group--sm .dj-avatar-group__item { width: 1.75rem; height: 1.75rem; }
.dj-avatar-group--md .dj-avatar-group__item { width: var(--dj-avatar-group-size, 2.5rem); height: var(--dj-avatar-group-size, 2.5rem); }
.dj-avatar-group--lg .dj-avatar-group__item { width: 3.25rem; height: 3.25rem; }

/* ==========================================================================
   Hover Card
   Rich content popover on hover, GitHub-style user cards.
   ========================================================================== */
.dj-hover-card { position: relative; display: inline-block; }
.dj-hover-card__trigger { cursor: pointer; border-bottom: 1px dashed hsl(var(--primary, 222 47% 51%)); }
.dj-hover-card__content { display: none; position: absolute; z-index: 50; background: var(--dj-hover-card-bg, hsl(var(--background, 0 0% 100%))); border: 1px solid var(--dj-hover-card-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-hover-card-radius, 0.5rem); box-shadow: var(--dj-hover-card-shadow, 0 4px 12px rgba(0,0,0,0.1)); padding: var(--dj-hover-card-padding, 0.75rem 1rem); max-width: var(--dj-hover-card-max-width, 20rem); min-width: 12rem; white-space: normal; }
.dj-hover-card:hover .dj-hover-card__content, .dj-hover-card:focus-within .dj-hover-card__content { display: block; }
/* Positions */
.dj-hover-card--bottom .dj-hover-card__content { top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0.5rem; }
.dj-hover-card--top .dj-hover-card__content { bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem; }
.dj-hover-card--left .dj-hover-card__content { right: 100%; top: 50%; transform: translateY(-50%); margin-right: 0.5rem; }
.dj-hover-card--right .dj-hover-card__content { left: 100%; top: 50%; transform: translateY(-50%); margin-left: 0.5rem; }

/* ==========================================================================
   Notification Popover
   Bell icon with unread badge + popover notification list.
   ========================================================================== */
.dj-notif-popover { position: relative; display: inline-block; }
.dj-notif-popover__bell { position: relative; background: none; border: none; cursor: pointer; padding: var(--space-1, 0.25rem); color: hsl(var(--foreground, 222 47% 11%)); border-radius: var(--radius-sm, 0.25rem); }
.dj-notif-popover__bell:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-notif-popover__icon { display: block; }
.dj-notif-popover__badge { position: absolute; top: -0.25rem; right: -0.25rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; font-size: 0.625rem; font-weight: 700; line-height: 1.15rem; text-align: center; border-radius: 9999px; background: var(--dj-notif-popover-badge-bg, hsl(var(--destructive, 0 84% 60%))); color: var(--dj-notif-popover-badge-fg, hsl(var(--destructive-foreground, 0 0% 100%))); }
.dj-notif-popover__panel { display: none; position: absolute; right: 0; top: 100%; margin-top: 0.5rem; width: var(--dj-notif-popover-width, 20rem); max-height: 24rem; overflow-y: auto; background: var(--dj-notif-popover-bg, hsl(var(--background, 0 0% 100%))); border: 1px solid var(--dj-notif-popover-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--radius-md, 0.5rem); box-shadow: var(--dj-notif-popover-shadow, 0 4px 16px rgba(0,0,0,0.12)); z-index: 50; }
.dj-notif-popover[data-open] .dj-notif-popover__panel { display: block; }
.dj-notif-popover__header { padding: 0.75rem 1rem; font-weight: 600; font-size: var(--text-sm, 0.875rem); border-bottom: 1px solid hsl(var(--border, 214 32% 91%)); }
.dj-notif-popover__item { padding: 0.625rem 1rem; cursor: pointer; border-bottom: 1px solid hsl(var(--border, 214 32% 91%) / 0.5); }
.dj-notif-popover__item:last-child { border-bottom: none; }
.dj-notif-popover__item:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-notif-popover__item--read { opacity: 0.6; }
.dj-notif-popover__item-title { font-weight: 600; font-size: var(--text-sm, 0.875rem); }
.dj-notif-popover__item-body { font-size: var(--text-sm, 0.875rem); color: hsl(var(--muted-foreground, 215 16% 47%)); margin-top: 0.125rem; }
.dj-notif-popover__item-time { font-size: var(--text-xs, 0.75rem); color: hsl(var(--muted-foreground, 215 16% 47%)); margin-top: 0.25rem; }
.dj-notif-popover__empty { padding: 1.5rem 1rem; text-align: center; color: hsl(var(--muted-foreground, 215 16% 47%)); font-size: var(--text-sm, 0.875rem); }

/* --- Conversation Thread --- */
.dj-chat-thread { display: flex; flex-direction: column; gap: var(--dj-chat-gap, 0.75rem); padding: 1rem; overflow-y: auto; }
.dj-chat-msg { display: flex; gap: 0.5rem; align-items: flex-start; max-width: 80%; }
.dj-chat-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.dj-chat-msg--ai { align-self: flex-start; }
.dj-chat-msg--grouped { margin-top: calc(var(--dj-chat-gap, 0.75rem) * -0.5); }
.dj-chat-avatar { display: flex; align-items: center; justify-content: center; width: var(--dj-chat-avatar-size, 2rem); height: var(--dj-chat-avatar-size, 2rem); min-width: var(--dj-chat-avatar-size, 2rem); border-radius: 9999px; background: hsl(var(--muted, 210 40% 96%)); color: hsl(var(--muted-foreground, 215 16% 47%)); font-size: 0.75rem; font-weight: 600; }
.dj-chat-avatar--hidden { visibility: hidden; }
.dj-chat-bubble { border-radius: 0.75rem; padding: 0.5rem 0.75rem; }
.dj-chat-msg--user .dj-chat-bubble { background: var(--dj-chat-bubble-user-bg, hsl(var(--primary, 222 47% 51%))); color: hsl(var(--primary-foreground, 210 40% 98%)); }
.dj-chat-msg--ai .dj-chat-bubble { background: var(--dj-chat-bubble-ai-bg, hsl(var(--muted, 210 40% 96%))); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-chat-msg__header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.125rem; }
.dj-chat-msg__name { font-size: var(--text-xs, 0.75rem); font-weight: 600; }
.dj-chat-msg__time { font-size: var(--text-xs, 0.75rem); opacity: 0.6; }
.dj-chat-msg__text { font-size: var(--text-sm, 0.875rem); line-height: var(--leading-relaxed, 1.625); white-space: pre-wrap; }
.dj-chat-typing { display: flex; gap: 0.25rem; padding: 0.25rem 0; }
.dj-chat-typing__dot { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: currentColor; opacity: 0.4; animation: dj-chat-bounce 1.2s infinite; }
.dj-chat-typing__dot:nth-child(2) { animation-delay: 0.2s; }
.dj-chat-typing__dot:nth-child(3) { animation-delay: 0.4s; }

/* --- Thinking Indicator --- */
.dj-thinking { display: inline-flex; align-items: center; gap: var(--dj-thinking-gap, 0.5rem); color: var(--dj-thinking-color, currentColor); }
.dj-thinking__dots { display: inline-flex; gap: 0.2rem; }
.dj-thinking__dot { width: var(--dj-thinking-dot-size, 0.5rem); height: var(--dj-thinking-dot-size, 0.5rem); border-radius: 9999px; background: currentColor; animation: dj-chat-bounce 1.2s infinite; }
.dj-thinking__dot:nth-child(2) { animation-delay: 0.2s; }
.dj-thinking__dot:nth-child(3) { animation-delay: 0.4s; }
.dj-thinking__pulse { width: 1rem; height: 1rem; border-radius: 9999px; background: currentColor; animation: dj-pulse 1.5s infinite; }
.dj-thinking__cursor { width: 2px; height: 1.1em; background: currentColor; animation: dj-fade 0.8s infinite; }
.dj-thinking__spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-top-color: transparent; border-radius: 9999px; animation: dj-spin 0.6s linear infinite; }
.dj-thinking__label { font-size: var(--text-sm, 0.875rem); }

/* --- Multimodal Input --- */
.dj-mminput { display: flex; align-items: flex-end; gap: 0.375rem; padding: 0.5rem; border: 1px solid var(--dj-mminput-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-mminput-radius, 0.75rem); background: var(--dj-mminput-bg, hsl(var(--card, 0 0% 100%))); }
.dj-mminput--disabled { opacity: 0.5; pointer-events: none; }
.dj-mminput__text { flex: 1; border: none; outline: none; background: transparent; resize: none; font: inherit; font-size: var(--text-sm, 0.875rem); line-height: 1.5; min-height: 1.5em; max-height: 8rem; color: hsl(var(--foreground, 222 47% 11%)); }
.dj-mminput__text::placeholder { color: hsl(var(--muted-foreground, 215 16% 47%)); }
.dj-mminput__btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; border-radius: 0.375rem; background: transparent; color: var(--dj-mminput-btn-color, hsl(var(--muted-foreground, 215 16% 47%))); cursor: pointer; flex-shrink: 0; }
.dj-mminput__btn:hover { background: hsl(var(--accent, 210 40% 96%)); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-mminput__send-btn { background: hsl(var(--primary, 222 47% 51%)); color: hsl(var(--primary-foreground, 210 40% 98%)); }
.dj-mminput__send-btn:hover { opacity: 0.9; }
.dj-mminput__file-btn { cursor: pointer; }

/* --- Feedback Widget --- */
.dj-feedback { display: inline-flex; align-items: center; gap: var(--dj-feedback-gap, 0.25rem); }
.dj-feedback__btn { display: flex; align-items: center; justify-content: center; border: none; background: transparent; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; color: var(--dj-feedback-color, hsl(var(--muted-foreground, 215 16% 47%))); font-size: 1.125rem; transition: color 0.15s, transform 0.15s; }
.dj-feedback__btn:hover { color: var(--dj-feedback-hover-color, hsl(var(--foreground, 222 47% 11%))); transform: scale(1.15); }
.dj-feedback__btn--active { color: var(--dj-feedback-active-color, hsl(var(--primary, 222 47% 51%))); }
.dj-feedback__star--active { color: hsl(var(--warning, 48 96% 53%)); }
.dj-feedback__star--active svg { fill: hsl(var(--warning, 48 96% 53%)); }

/* --- Chat Bubble --- */
.dj-bubble { display: flex; gap: 0.5rem; align-items: flex-start; max-width: 80%; }
.dj-bubble--user { align-self: flex-end; flex-direction: row-reverse; }
.dj-bubble--other { align-self: flex-start; }
.dj-bubble__avatar { display: flex; align-items: center; justify-content: center; width: var(--dj-bubble-avatar-size, 2.25rem); height: var(--dj-bubble-avatar-size, 2.25rem); min-width: var(--dj-bubble-avatar-size, 2.25rem); border-radius: 9999px; overflow: hidden; background: hsl(var(--muted, 210 40% 96%)); color: hsl(var(--muted-foreground, 215 16% 47%)); font-size: 0.75rem; font-weight: 600; flex-shrink: 0; }
.dj-bubble__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.dj-bubble__avatar--initials { background: hsl(var(--muted, 210 40% 96%)); }
.dj-bubble__content { border-radius: var(--dj-bubble-radius, 0.75rem); padding: 0.5rem 0.75rem; }
.dj-bubble--user .dj-bubble__content { background: var(--dj-bubble-user-bg, hsl(var(--primary, 222 47% 51%))); color: hsl(var(--primary-foreground, 210 40% 98%)); }
.dj-bubble--other .dj-bubble__content { background: var(--dj-bubble-other-bg, hsl(var(--muted, 210 40% 96%))); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-bubble__header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.125rem; }
.dj-bubble__name { font-size: var(--text-xs, 0.75rem); font-weight: 600; }
.dj-bubble__time { font-size: var(--text-xs, 0.75rem); opacity: 0.6; }
.dj-bubble__text { font-size: var(--text-sm, 0.875rem); line-height: var(--leading-relaxed, 1.625); white-space: pre-wrap; }
.dj-bubble__footer { display: flex; justify-content: flex-end; margin-top: 0.125rem; }
.dj-bubble__status { font-size: 0.625rem; opacity: 0.7; }
.dj-bubble__status--read { color: hsl(var(--primary, 222 47% 51%)); opacity: 1; }
.dj-bubble__status--error { color: hsl(var(--destructive, 0 84% 60%)); opacity: 1; }

/* --- Presence Avatars --- */
.dj-presence { display: flex; align-items: center; }
.dj-presence__item { position: relative; display: flex; align-items: center; justify-content: center; width: var(--dj-presence-size, 2.25rem); height: var(--dj-presence-size, 2.25rem); border-radius: 9999px; border: var(--dj-presence-border, 2px solid hsl(var(--background, 0 0% 100%))); overflow: visible; background: hsl(var(--muted, 210 40% 96%)); color: hsl(var(--muted-foreground, 215 16% 47%)); font-size: 0.75rem; font-weight: 600; flex-shrink: 0; }
.dj-presence__item + .dj-presence__item { margin-left: var(--dj-presence-overlap, -0.5rem); }
.dj-presence__img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }
.dj-presence__initials { font-size: 0.75rem; font-weight: 600; }
.dj-presence__dot { position: absolute; bottom: 0; right: 0; width: var(--dj-presence-dot-size, 0.5rem); height: var(--dj-presence-dot-size, 0.5rem); border-radius: 9999px; border: 1.5px solid hsl(var(--background, 0 0% 100%)); }
.dj-presence__dot--online { background: hsl(var(--success, 142 71% 45%)); }
.dj-presence__dot--away { background: hsl(var(--warning, 48 96% 53%)); }
.dj-presence__dot--busy { background: hsl(var(--destructive, 0 84% 60%)); }
.dj-presence__dot--offline { background: hsl(var(--muted-foreground, 220 9% 46%)); }
.dj-presence__overflow { background: hsl(var(--muted, 210 40% 96%)); font-size: 0.6875rem; font-weight: 600; }

/* --- Mentions Input --- */
.dj-mentions { position: relative; display: inline-block; width: 100%; }
.dj-mentions--disabled { opacity: 0.5; pointer-events: none; }
.dj-mentions__input { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--dj-mentions-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-mentions-radius, 0.5rem); background: var(--dj-mentions-bg, hsl(var(--card, 0 0% 100%))); font: inherit; font-size: var(--text-sm, 0.875rem); color: hsl(var(--foreground, 222 47% 11%)); outline: none; }
.dj-mentions__input:focus { border-color: hsl(var(--ring, 222 47% 51%)); box-shadow: 0 0 0 2px hsl(var(--ring, 222 47% 51%) / 0.2); }
.dj-mentions__input::placeholder { color: hsl(var(--muted-foreground, 215 16% 47%)); }
.dj-mentions__dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 0.25rem 0; list-style: none; background: var(--dj-mentions-dropdown-bg, hsl(var(--card, 0 0% 100%))); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.375rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); max-height: 12rem; overflow-y: auto; z-index: 50; }
.dj-mentions__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; cursor: pointer; }
.dj-mentions__item:hover { background: var(--dj-mentions-item-hover-bg, hsl(var(--accent, 210 40% 96%))); }
.dj-mentions__avatar { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; overflow: hidden; background: hsl(var(--muted, 210 40% 96%)); flex-shrink: 0; }
.dj-mentions__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.dj-mentions__avatar-initials { font-size: 0.625rem; font-weight: 600; }
.dj-mentions__name { font-size: var(--text-sm, 0.875rem); }

/* --- Expandable Text --- */
.dj-expandable-text { position: relative; }
.dj-expandable-text__content { color: var(--dj-expandable-text-fg, inherit); font-size: var(--dj-expandable-text-font-size, inherit); line-height: var(--dj-expandable-text-line-height, 1.5); }
.dj-expandable-text__toggle { display: inline-block; margin-top: 0.25rem; padding: 0; border: none; background: none; color: var(--dj-expandable-text-toggle-color, hsl(var(--primary, 222 47% 51%))); font-size: var(--dj-expandable-text-toggle-font-size, 0.875rem); font-weight: 500; cursor: pointer; text-decoration: none; }
.dj-expandable-text__toggle:hover { text-decoration: underline; }

/* --- Truncated List --- */
.dj-truncated-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dj-truncated-list-gap, 0.25rem); }
.dj-truncated-list__item { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: var(--dj-truncated-list-item-radius, 0.25rem); background: var(--dj-truncated-list-item-bg, hsl(var(--muted, 210 40% 96%))); color: var(--dj-truncated-list-item-fg, hsl(var(--foreground, 222 47% 11%))); font-size: 0.8125rem; }
.dj-truncated-list__overflow { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border: none; border-radius: var(--dj-truncated-list-overflow-radius, 9999px); background: var(--dj-truncated-list-overflow-bg, hsl(var(--muted, 210 40% 96%))); color: var(--dj-truncated-list-overflow-color, hsl(var(--muted-foreground, 215 16% 47%))); font-size: 0.75rem; font-weight: 500; cursor: pointer; }
.dj-truncated-list__overflow:hover { background: var(--dj-truncated-list-overflow-hover-bg, hsl(var(--accent, 210 40% 96%))); }

/* --- Markdown Textarea --- */
.dj-md-textarea { border: 1px solid var(--dj-md-textarea-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-md-textarea-radius, 0.375rem); overflow: hidden; }
.dj-md-textarea__toolbar { display: flex; gap: 0; border-bottom: 1px solid var(--dj-md-textarea-toolbar-border, hsl(var(--border, 214 32% 91%))); background: var(--dj-md-textarea-toolbar-bg, hsl(var(--muted, 210 40% 96%))); }
.dj-md-textarea__tab { padding: 0.375rem 0.75rem; border: none; background: none; font-size: 0.8125rem; font-weight: 500; color: hsl(var(--muted-foreground, 215 16% 47%)); cursor: pointer; border-bottom: 2px solid transparent; }
.dj-md-textarea__tab:hover { color: hsl(var(--foreground, 222 47% 11%)); }
.dj-md-textarea__tab--active { color: hsl(var(--foreground, 222 47% 11%)); border-bottom-color: hsl(var(--primary, 222 47% 51%)); }
.dj-md-textarea__input { display: block; width: 100%; min-height: var(--dj-md-textarea-min-height, 10rem); padding: 0.75rem; border: none; background: var(--dj-md-textarea-bg, hsl(var(--card, 0 0% 100%))); color: var(--dj-md-textarea-fg, hsl(var(--foreground, 222 47% 11%))); font: inherit; font-size: 0.875rem; resize: vertical; outline: none; box-sizing: border-box; }
.dj-md-textarea__preview { min-height: var(--dj-md-textarea-min-height, 10rem); padding: 0.75rem; background: var(--dj-md-textarea-preview-bg, hsl(var(--card, 0 0% 100%))); color: hsl(var(--foreground, 222 47% 11%)); font-size: 0.875rem; line-height: 1.6; }

/* --- Skeleton Factory --- */
.dj-skeleton { width: 100%; }
.dj-skeleton__line { display: block; height: 0.875rem; margin-bottom: 0.5rem; border-radius: var(--dj-skeleton-radius, 0.25rem); background: var(--dj-skeleton-bg, hsl(var(--muted, 210 40% 96%))); }
.dj-skeleton__circle { display: inline-block; width: 2rem; height: 2rem; border-radius: 9999px; background: var(--dj-skeleton-bg, hsl(var(--muted, 210 40% 96%))); flex-shrink: 0; }
.dj-skeleton__pulse { animation: dj-shimmer var(--dj-skeleton-speed, 1.5s) ease-in-out infinite; background: linear-gradient(90deg, var(--dj-skeleton-bg, hsl(var(--muted, 210 40% 96%))) 25%, var(--dj-skeleton-shine, hsl(var(--muted, 210 40% 96%) / 0.5)) 50%, var(--dj-skeleton-bg, hsl(var(--muted, 210 40% 96%))) 75%); background-size: 200% 100%; }
.dj-skeleton--data-table .dj-skeleton__table { width: 100%; border-collapse: collapse; }
.dj-skeleton--data-table th, .dj-skeleton--data-table td { padding: 0.5rem 0.75rem; text-align: left; }
.dj-skeleton--data-table thead tr { border-bottom: 2px solid var(--dj-skeleton-bg, hsl(var(--muted, 210 40% 96%))); }
.dj-skeleton--data-table tbody tr { border-bottom: 1px solid var(--dj-skeleton-bg, hsl(var(--muted, 210 40% 96%) / 0.5)); }
.dj-skeleton--card .dj-skeleton__card-image { height: 8rem; border-radius: var(--dj-skeleton-radius, 0.25rem) var(--dj-skeleton-radius, 0.25rem) 0 0; }
.dj-skeleton--card .dj-skeleton__card-body { padding: 0.75rem; }
.dj-skeleton--card { border-radius: var(--dj-skeleton-radius, 0.25rem); border: 1px solid var(--dj-skeleton-bg, hsl(var(--muted, 210 40% 96%))); overflow: hidden; }
.dj-skeleton--list .dj-skeleton__list-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }

/* --- Content Loader / Suspense --- */
.dj-content-loader { position: relative; min-height: var(--dj-content-loader-min-height, 4rem); }
.dj-content-loader__placeholder { transition: opacity var(--dj-content-loader-transition, 0.3s) ease; }
.dj-content-loader--loaded .dj-content-loader__placeholder { display: none; }
.dj-content-loader__content { animation: dj-slide-in-up 0.3s ease; }
.dj-content-loader__error { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem; text-align: center; color: hsl(var(--destructive, 0 84% 60%)); }
.dj-content-loader__error-msg { font-size: 0.875rem; }
.dj-content-loader__retry { padding: 0.375rem 0.75rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; background: none; color: hsl(var(--foreground, 222 47% 11%)); font-size: 0.8125rem; cursor: pointer; }
.dj-content-loader__retry:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-content-loader__default-placeholder { display: flex; align-items: center; justify-content: center; min-height: var(--dj-content-loader-min-height, 4rem); }

/* --- Time Picker --- */
.dj-time-picker { display: inline-flex; flex-direction: column; gap: 0.25rem; }
.dj-time-picker__label { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground, 222 47% 11%)); }
.dj-time-picker__controls { display: inline-flex; align-items: center; gap: 0.25rem; }
.dj-time-picker__hour, .dj-time-picker__minute, .dj-time-picker__period { padding: 0.375rem 0.5rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--dj-time-picker-radius, 0.25rem); background: var(--dj-time-picker-bg, hsl(var(--background, 0 0% 100%))); font-size: 0.875rem; }
.dj-time-picker__separator { font-weight: 700; padding: 0 0.125rem; }
.dj-time-picker--disabled select { opacity: 0.5; cursor: not-allowed; }

/* --- Wizard / Multi-step Form --- */
.dj-wizard { width: 100%; }
.dj-wizard__nav { display: flex; align-items: center; gap: 0; margin-bottom: 1.5rem; }
.dj-wizard__step { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.75rem; border: none; background: none; font-size: 0.875rem; color: hsl(var(--muted-foreground, 215 16% 47%)); cursor: pointer; white-space: nowrap; }
.dj-wizard__step--active { color: hsl(var(--primary, 222 47% 11%)); font-weight: 600; }
.dj-wizard__step--completed { color: hsl(var(--primary, 222 47% 11%)); }
.dj-wizard__number { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 9999px; font-size: 0.75rem; background: hsl(var(--muted, 210 40% 96%)); }
.dj-wizard__step--active .dj-wizard__number { background: hsl(var(--primary, 222 47% 11%)); color: hsl(var(--primary-foreground, 210 40% 98%)); }
.dj-wizard__step--completed .dj-wizard__number { background: hsl(var(--primary, 222 47% 11%)); color: hsl(var(--primary-foreground, 210 40% 98%)); }
.dj-wizard__connector { flex: 1; height: 2px; background: hsl(var(--border, 214 32% 91%)); min-width: 1rem; }
.dj-wizard__connector--completed { background: hsl(var(--primary, 222 47% 11%)); }

/* --- Bottom Sheet --- */
.dj-bottom-sheet__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50; display: flex; align-items: flex-end; }
.dj-bottom-sheet { width: 100%; max-height: 85vh; background: hsl(var(--background, 0 0% 100%)); border-radius: 1rem 1rem 0 0; overflow-y: auto; animation: dj-slide-in-up 0.3s ease; }
.dj-bottom-sheet__handle { display: flex; justify-content: center; padding: 0.75rem 0 0.25rem; }
.dj-bottom-sheet__handle-bar { width: 2.5rem; height: 0.25rem; border-radius: 9999px; background: hsl(var(--muted, 210 40% 96%)); }
.dj-bottom-sheet__header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }
.dj-bottom-sheet__title { font-size: 1.125rem; font-weight: 600; margin: 0; }
.dj-bottom-sheet__close { border: none; background: none; font-size: 1.25rem; cursor: pointer; padding: 0.25rem; color: hsl(var(--muted-foreground, 215 16% 47%)); }
.dj-bottom-sheet__body { padding: 0 1rem 1rem; }

/* --- Infinite Scroll --- */
.dj-infinite-scroll { position: relative; }
.dj-infinite-scroll__spinner { display: flex; justify-content: center; padding: 1rem; }
.dj-infinite-scroll__spinner::after { content: ""; width: 1.5rem; height: 1.5rem; border: 2px solid hsl(var(--border, 214 32% 91%)); border-top-color: hsl(var(--primary, 222 47% 11%)); border-radius: 9999px; animation: dj-spin 0.6s linear infinite; }
.dj-infinite-scroll__done { text-align: center; padding: 1rem; color: hsl(var(--muted-foreground, 215 16% 47%)); font-size: 0.875rem; }

/* --- Countdown / Timer --- */
.dj-countdown { display: inline-flex; align-items: center; gap: 0.25rem; }
.dj-countdown__segment { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; }
.dj-countdown__value { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; min-width: 2.5rem; text-align: center; }
.dj-countdown__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--muted-foreground, 215 16% 47%)); }
.dj-countdown__separator { font-size: 1.5rem; font-weight: 700; color: hsl(var(--muted-foreground, 215 16% 47%)); align-self: flex-start; margin-top: 0.25rem; }

/* --- Cookie Consent Banner --- */
.dj-cookie-consent { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; background: hsl(var(--card, 0 0% 100%)); border: 1px solid hsl(var(--border, 214 32% 91%)); z-index: 50; flex-wrap: wrap; }
.dj-cookie-consent--bottom { position: fixed; bottom: 0; left: 0; right: 0; }
.dj-cookie-consent--top { position: fixed; top: 0; left: 0; right: 0; }
.dj-cookie-consent__message { margin: 0; font-size: 0.875rem; color: hsl(var(--foreground, 222 47% 11%)); }
.dj-cookie-consent__link { color: hsl(var(--primary, 222 47% 11%)); text-decoration: underline; }
.dj-cookie-consent__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.dj-cookie-consent__accept { padding: 0.375rem 1rem; border: none; border-radius: 0.25rem; background: hsl(var(--primary, 222 47% 11%)); color: hsl(var(--primary-foreground, 210 40% 98%)); font-size: 0.875rem; cursor: pointer; }
.dj-cookie-consent__reject { padding: 0.375rem 1rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; background: none; font-size: 0.875rem; cursor: pointer; }

/* --- Form Array --- */
.dj-form-array { display: flex; flex-direction: column; gap: 0.5rem; }
.dj-form-array__rows { display: flex; flex-direction: column; gap: 0.375rem; }
.dj-form-array__row { display: flex; align-items: center; gap: 0.375rem; }
.dj-form-array__input { flex: 1; padding: 0.375rem 0.5rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; font-size: 0.875rem; }
.dj-form-array__remove { border: none; background: none; color: hsl(var(--destructive, 0 84% 60%)); font-size: 1.125rem; cursor: pointer; padding: 0.25rem 0.375rem; line-height: 1; }
.dj-form-array__add { align-self: flex-start; padding: 0.375rem 0.75rem; border: 1px dashed hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; background: none; font-size: 0.8125rem; cursor: pointer; color: hsl(var(--primary, 222 47% 11%)); }
.dj-form-array__add:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Scroll Spy --- */
.dj-scroll-spy { display: flex; flex-direction: column; gap: 0.125rem; }
.dj-scroll-spy__item { padding: 0.375rem 0.75rem; text-decoration: none; font-size: 0.875rem; color: hsl(var(--muted-foreground, 215 16% 47%)); border-left: 2px solid transparent; transition: all 0.15s ease; }
.dj-scroll-spy__item:hover { color: hsl(var(--foreground, 222 47% 11%)); }
.dj-scroll-spy__item--active { color: hsl(var(--primary, 222 47% 11%)); border-left-color: hsl(var(--primary, 222 47% 11%)); font-weight: 500; }

/* --- Page Alert / Banner --- */
.dj-page-alert { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; width: 100%; border-radius: 0.25rem; }
.dj-page-alert--info { background: hsl(var(--dj-alert-info-bg, var(--info, 210 100% 96%))); color: hsl(var(--dj-alert-info-fg, var(--info-foreground, 210 100% 40%))); }
.dj-page-alert--success { background: hsl(var(--dj-alert-success-bg, var(--success, 142 76% 94%))); color: hsl(var(--dj-alert-success-fg, var(--success-foreground, 142 76% 30%))); }
.dj-page-alert--warning { background: hsl(var(--dj-alert-warning-bg, var(--warning, 48 96% 93%))); color: hsl(var(--dj-alert-warning-fg, var(--warning-foreground, 48 96% 30%))); }
.dj-page-alert--error { background: hsl(var(--dj-alert-danger-bg, var(--destructive, 0 84% 95%))); color: hsl(var(--dj-alert-danger-fg, var(--destructive-foreground, 0 84% 40%))); }
.dj-page-alert__icon { flex-shrink: 0; }
.dj-page-alert__message { flex: 1; font-size: 0.875rem; }
.dj-page-alert__dismiss { border: none; background: none; font-size: 1.25rem; cursor: pointer; line-height: 1; padding: 0; color: inherit; opacity: 0.7; }
.dj-page-alert__dismiss:hover { opacity: 1; }

/* --- Dropdown Menu --- */
.dj-dropdown-menu { position: relative; display: inline-block; }
.dj-dropdown-menu__trigger { padding: 0.375rem 0.75rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; background: hsl(var(--background, 0 0% 100%)); font-size: 0.875rem; cursor: pointer; }
.dj-dropdown-menu__content { position: absolute; top: 100%; margin-top: 0.25rem; min-width: 10rem; background: hsl(var(--popover, 0 0% 100%)); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.375rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); z-index: 50; padding: 0.25rem; animation: dj-slide-in-up 0.15s ease; }
.dj-dropdown-menu--left { left: 0; }
.dj-dropdown-menu--right { right: 0; }
.dj-dropdown-menu__item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; border: none; background: none; font-size: 0.875rem; cursor: pointer; border-radius: 0.25rem; text-align: left; }
.dj-dropdown-menu__item:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-dropdown-menu__item--danger { color: hsl(var(--destructive, 0 84% 60%)); }
.dj-dropdown-menu__item--disabled { opacity: 0.5; cursor: not-allowed; }
.dj-dropdown-menu__divider { border: none; border-top: 1px solid hsl(var(--border, 214 32% 91%)); margin: 0.25rem 0; }
.dj-dropdown-menu__icon { width: 1rem; text-align: center; }

/* --- Meter / Stacked Progress --- */
.dj-meter { display: flex; flex-direction: column; gap: 0.375rem; }
.dj-meter__label { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground, 222 47% 11%)); }
.dj-meter__bar { display: flex; height: 0.5rem; border-radius: 9999px; overflow: hidden; background: hsl(var(--muted, 210 40% 96%)); }
.dj-meter__segment { height: 100%; transition: width 0.3s ease; }
.dj-meter__legend { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8125rem; }
.dj-meter__legend-item { display: flex; align-items: center; gap: 0.25rem; }
.dj-meter__legend-swatch { width: 0.625rem; height: 0.625rem; border-radius: 2px; flex-shrink: 0; }
.dj-meter__legend-label { color: hsl(var(--muted-foreground, 215 16% 47%)); }
.dj-meter__legend-value { font-weight: 500; }

/* --- Export Dialog --- */
.dj-export-dialog__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 50; display: flex; align-items: center; justify-content: center; }
.dj-export-dialog { background: hsl(var(--background, 0 0% 100%)); border-radius: 0.5rem; min-width: 24rem; max-width: 36rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.dj-export-dialog__header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid hsl(var(--border, 214 32% 91%)); }
.dj-export-dialog__header h3 { margin: 0; font-size: 1.125rem; }
.dj-export-dialog__close { border: none; background: none; font-size: 1.25rem; cursor: pointer; color: hsl(var(--muted-foreground, 215 16% 47%)); }
.dj-export-dialog__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.dj-export-dialog__section-title { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 600; }
.dj-export-dialog__formats { display: flex; flex-direction: column; gap: 0.25rem; }
.dj-export-dialog__format { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.875rem; cursor: pointer; }
.dj-export-dialog__columns { display: flex; flex-direction: column; gap: 0.25rem; }
.dj-export-dialog__column { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.875rem; cursor: pointer; }
.dj-export-dialog__footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1.25rem; border-top: 1px solid hsl(var(--border, 214 32% 91%)); }
.dj-export-dialog__cancel { padding: 0.375rem 1rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; background: none; font-size: 0.875rem; cursor: pointer; }
.dj-export-dialog__submit { padding: 0.375rem 1rem; border: none; border-radius: 0.25rem; background: hsl(var(--primary, 222 47% 11%)); color: hsl(var(--primary-foreground, 210 40% 98%)); font-size: 0.875rem; cursor: pointer; }

/* --- Import Wizard --- */
.dj-import-wizard { display: flex; flex-direction: column; gap: 1.5rem; }
.dj-import-wizard__nav { display: flex; align-items: center; gap: 0.5rem; }
.dj-import-wizard__step { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: hsl(var(--muted-foreground, 215 16% 47%)); }
.dj-import-wizard__step--active { color: hsl(var(--primary, 222 47% 11%)); font-weight: 600; }
.dj-import-wizard__step--completed { color: hsl(var(--primary, 222 47% 11%)); }
.dj-import-wizard__step-number { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 9999px; font-size: 0.6875rem; background: hsl(var(--muted, 210 40% 96%)); }
.dj-import-wizard__step--active .dj-import-wizard__step-number { background: hsl(var(--primary, 222 47% 11%)); color: hsl(var(--primary-foreground, 210 40% 98%)); }
.dj-import-wizard__dropzone { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem; border: 2px dashed hsl(var(--border, 214 32% 91%)); border-radius: 0.5rem; text-align: center; }
.dj-import-wizard__file-input { font-size: 0.875rem; }
.dj-import-wizard__formats { font-size: 0.75rem; color: hsl(var(--muted-foreground, 215 16% 47%)); }
.dj-import-wizard__field-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0; }
.dj-import-wizard__field-label { min-width: 8rem; font-size: 0.875rem; }
.dj-import-wizard__field-select { flex: 1; padding: 0.375rem 0.5rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; font-size: 0.875rem; }
.dj-import-wizard__import-btn { padding: 0.5rem 1.5rem; border: none; border-radius: 0.25rem; background: hsl(var(--primary, 222 47% 11%)); color: hsl(var(--primary-foreground, 210 40% 98%)); font-size: 0.875rem; cursor: pointer; }

/* --- Audit Log Table --- */
.dj-audit-log { overflow-x: auto; }
.dj-audit-log__table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.dj-audit-log__th { text-align: left; padding: 0.5rem 0.75rem; font-weight: 600; border-bottom: 2px solid hsl(var(--border, 214 32% 91%)); white-space: nowrap; }
.dj-audit-log__row { border-bottom: 1px solid hsl(var(--border, 214 32% 91%) / 0.5); }
.dj-audit-log__td { padding: 0.5rem 0.75rem; }
.dj-audit-log__td--timestamp { white-space: nowrap; color: hsl(var(--muted-foreground, 215 16% 47%)); font-variant-numeric: tabular-nums; }
.dj-audit-log__action--create { color: hsl(142 76% 36%); }
.dj-audit-log__action--update { color: hsl(210 100% 45%); }
.dj-audit-log__action--delete { color: hsl(0 84% 60%); }
.dj-audit-log__empty { text-align: center; padding: 2rem; color: hsl(var(--muted-foreground, 215 16% 47%)); }

/* --- Error Boundary --- */
.dj-error-boundary { position: relative; }
.dj-error-boundary--error { display: flex; align-items: center; justify-content: center; }
.dj-error-boundary__fallback { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem; text-align: center; border: 1px dashed hsl(var(--destructive, 0 84% 60%) / 0.3); border-radius: 0.25rem; background: hsl(var(--destructive, 0 84% 60%) / 0.05); }
.dj-error-boundary__message { margin: 0; font-size: 0.875rem; color: hsl(var(--destructive, 0 84% 60%)); }
.dj-error-boundary__retry { padding: 0.375rem 0.75rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; background: none; font-size: 0.8125rem; cursor: pointer; }

/* --- Sortable List --- */
.dj-sortable-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--dj-sortable-gap, 0.375rem); }
.dj-sortable-list__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: var(--dj-sortable-radius, 0.25rem); background: hsl(var(--card, 0 0% 100%)); cursor: grab; transition: box-shadow 0.15s ease, background 0.15s ease; }
.dj-sortable-list__item:active { cursor: grabbing; }
.dj-sortable-list__item.dj-sortable-list__item--dragging { opacity: 0.5; background: var(--dj-sortable-drag-bg, hsl(var(--accent, 210 40% 96%))); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.dj-sortable-list__item.dj-sortable-list__item--over { border-color: hsl(var(--primary, 222 47% 11%)); }
.dj-sortable-list__handle { cursor: grab; color: hsl(var(--muted-foreground, 215 16% 47%)); user-select: none; font-size: 1rem; }
.dj-sortable-list__label { flex: 1; font-size: 0.875rem; }
.dj-sortable-list--disabled .dj-sortable-list__item { cursor: default; opacity: 0.6; }
.dj-sortable-list--disabled .dj-sortable-list__handle { cursor: default; }

/* --- Sortable Grid --- */
.dj-sortable-grid { display: grid; }
.dj-sortable-grid__item { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding: 0.75rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.375rem; background: hsl(var(--card, 0 0% 100%)); cursor: grab; transition: box-shadow 0.15s ease, opacity 0.15s ease; }
.dj-sortable-grid__item:active { cursor: grabbing; }
.dj-sortable-grid__item.dj-sortable-grid__item--dragging { opacity: 0.5; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.dj-sortable-grid__item.dj-sortable-grid__item--over { border-color: hsl(var(--primary, 222 47% 11%)); }
.dj-sortable-grid__thumb { max-width: 100%; height: auto; border-radius: 0.25rem; object-fit: cover; }
.dj-sortable-grid__label { font-size: 0.8125rem; text-align: center; }
.dj-sortable-grid--disabled .dj-sortable-grid__item { cursor: default; opacity: 0.6; }

/* --- Image Cropper --- */
.dj-image-cropper { display: flex; flex-direction: column; gap: 0.5rem; }
.dj-image-cropper__canvas { position: relative; overflow: hidden; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; line-height: 0; }
.dj-image-cropper__image { display: block; max-width: 100%; height: auto; }
.dj-image-cropper__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); pointer-events: none; }
.dj-image-cropper__selection { position: absolute; border: 2px dashed hsl(var(--primary, 222 47% 11%)); background: transparent; cursor: move; box-shadow: 0 0 0 9999px rgba(0,0,0,0.4); }
.dj-image-cropper__actions { display: flex; gap: 0.5rem; }
.dj-image-cropper__crop-btn { padding: 0.375rem 1rem; border: none; border-radius: 0.25rem; background: hsl(var(--primary, 222 47% 11%)); color: hsl(var(--primary-foreground, 210 40% 98%)); font-size: 0.875rem; cursor: pointer; }
.dj-image-cropper__reset-btn { padding: 0.375rem 1rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; background: none; font-size: 0.875rem; cursor: pointer; }
.dj-image-cropper--disabled { pointer-events: none; opacity: 0.6; }

/* --- Signature Pad --- */
.dj-signature-pad { display: flex; flex-direction: column; gap: 0.5rem; }
.dj-signature-pad__canvas { border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; cursor: crosshair; touch-action: none; }
.dj-signature-pad__actions { display: flex; gap: 0.5rem; }
.dj-signature-pad__clear-btn { padding: 0.375rem 0.75rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.25rem; background: none; font-size: 0.8125rem; cursor: pointer; }
.dj-signature-pad__save-btn { padding: 0.375rem 0.75rem; border: none; border-radius: 0.25rem; background: hsl(var(--primary, 222 47% 11%)); color: hsl(var(--primary-foreground, 210 40% 98%)); font-size: 0.8125rem; cursor: pointer; }
.dj-signature-pad--disabled .dj-signature-pad__canvas { cursor: not-allowed; opacity: 0.5; }
.dj-signature-pad--disabled .dj-signature-pad__save-btn { opacity: 0.5; cursor: not-allowed; }

/* --- Resizable Panel --- */
.dj-resizable-panel { position: relative; overflow: hidden; }
.dj-resizable-panel--horizontal { display: flex; flex-direction: row; }
.dj-resizable-panel--vertical { display: flex; flex-direction: column; }
.dj-resizable-panel__content { flex: 1; overflow: auto; }
.dj-resizable-panel__handle { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: hsl(var(--muted, 210 40% 96%)); transition: background 0.15s ease; }
.dj-resizable-panel--horizontal .dj-resizable-panel__handle { width: 6px; cursor: col-resize; }
.dj-resizable-panel--vertical .dj-resizable-panel__handle { height: 6px; cursor: row-resize; }
.dj-resizable-panel__handle:hover { background: hsl(var(--border, 214 32% 91%)); }
.dj-resizable-panel__handle-bar { background: hsl(var(--muted-foreground, 215 16% 47%)); border-radius: 1px; }
.dj-resizable-panel--horizontal .dj-resizable-panel__handle-bar { width: 2px; height: 24px; }
.dj-resizable-panel--vertical .dj-resizable-panel__handle-bar { width: 24px; height: 2px; }
.dj-resizable-panel--disabled .dj-resizable-panel__handle { cursor: default; opacity: 0.4; pointer-events: none; }

/* --- Image Lightbox --- */
.dj-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.dj-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); }
.dj-lightbox__close { position: absolute; top: 1rem; right: 1rem; z-index: 1; background: none; border: none; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; }
.dj-lightbox__stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 90vw; max-height: 90vh; }
.dj-lightbox__image { max-width: 90vw; max-height: 80vh; object-fit: contain; }
.dj-lightbox__caption { color: #fff; font-size: 0.875rem; margin: 0.75rem 0 0; text-align: center; }
.dj-lightbox__prev, .dj-lightbox__next { position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 2.5rem; padding: 0.25rem 0.75rem; cursor: pointer; border-radius: 0.25rem; line-height: 1; }
.dj-lightbox__prev { left: 1rem; }
.dj-lightbox__next { right: 1rem; }
.dj-lightbox__prev:hover, .dj-lightbox__next:hover { background: rgba(255,255,255,0.3); }
.dj-lightbox__counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 1; color: #fff; font-size: 0.875rem; background: rgba(0,0,0,0.5); padding: 0.25rem 0.75rem; border-radius: 1rem; }

/* --- Dashboard Grid --- */
.dj-dashboard-grid__panel { display: flex; flex-direction: column; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.5rem; background: hsl(var(--card, 0 0% 100%)); overflow: hidden; transition: box-shadow 0.15s ease; }
.dj-dashboard-grid__panel:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.dj-dashboard-grid__panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border, 214 32% 91%) / 0.5); background: hsl(var(--muted, 210 40% 96%) / 0.3); }
.dj-dashboard-grid__panel-title { font-size: 0.8125rem; font-weight: 600; }
.dj-dashboard-grid__panel-drag { cursor: grab; color: hsl(var(--muted-foreground, 215 16% 47%)); user-select: none; }
.dj-dashboard-grid__panel-body { flex: 1; padding: 0.75rem; overflow: auto; }
.dj-dashboard-grid__panel-resize { height: 8px; cursor: nwse-resize; background: transparent; position: relative; }
.dj-dashboard-grid__panel-resize::after { content: ""; position: absolute; bottom: 2px; right: 2px; width: 8px; height: 8px; border-right: 2px solid hsl(var(--muted-foreground, 215 16% 47%) / 0.4); border-bottom: 2px solid hsl(var(--muted-foreground, 215 16% 47%) / 0.4); }
.dj-dashboard-grid__panel.dj-dashboard-grid__panel--dragging { opacity: 0.5; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }

/* --- Bar Chart --- */
.dj-bar-chart { display: inline-block; }
.dj-bar-chart__svg { font-family: inherit; }
.dj-bar-chart__title { fill: var(--dj-bar-chart-text, currentColor); }
.dj-bar-chart__bar { fill: var(--dj-bar-chart-bar-fill, hsl(var(--primary, 222 47% 51%))); transition: opacity 0.15s ease; }
.dj-bar-chart__bar:hover { opacity: 0.8; }
.dj-bar-chart__value { fill: var(--dj-bar-chart-text, currentColor); }
.dj-bar-chart__label { fill: var(--dj-bar-chart-text, currentColor); }

/* --- Line Chart --- */
.dj-line-chart { display: inline-block; }
.dj-line-chart__svg { font-family: inherit; }
.dj-line-chart__title { fill: var(--dj-line-chart-text, currentColor); }
.dj-line-chart__line { transition: opacity 0.15s ease; }
.dj-line-chart__dot { transition: r 0.15s ease; }
.dj-line-chart__dot:hover { r: 5; }
.dj-line-chart__label { fill: var(--dj-line-chart-text, currentColor); }

/* --- Pie / Donut Chart --- */
.dj-pie-chart { display: inline-block; }
.dj-pie-chart__svg { font-family: inherit; }
.dj-pie-chart__title { fill: var(--dj-pie-chart-text, currentColor); }
.dj-pie-chart__segment { transition: opacity 0.15s ease; }
.dj-pie-chart__segment:hover { opacity: 0.85; }

/* --- Sparkline --- */
.dj-sparkline { display: inline-block; vertical-align: middle; line-height: 0; }
.dj-sparkline__svg { font-family: inherit; }
.dj-sparkline__line { stroke: var(--dj-sparkline-color, hsl(var(--primary, 222 47% 51%))); }
.dj-sparkline__area { fill: var(--dj-sparkline-color, hsl(var(--primary, 222 47% 51%))); }
.dj-sparkline__bar { fill: var(--dj-sparkline-color, hsl(var(--primary, 222 47% 51%))); }

/* --- Heatmap --- */
.dj-heatmap { display: inline-block; }
.dj-heatmap__svg { font-family: inherit; }
.dj-heatmap__title { fill: var(--dj-heatmap-text, currentColor); }
.dj-heatmap__cell { transition: opacity 0.15s ease; }
.dj-heatmap__cell:hover { opacity: 0.8; stroke-width: 2; }
.dj-heatmap__xlabel, .dj-heatmap__ylabel { fill: var(--dj-heatmap-text, currentColor); }

/* --- Treemap --- */
.dj-treemap { display: inline-block; }
.dj-treemap__svg { font-family: inherit; }
.dj-treemap__title { fill: var(--dj-treemap-text, currentColor); }
.dj-treemap__cell { transition: opacity 0.15s ease; }
.dj-treemap__cell:hover { opacity: 0.85; }

/* --- Calendar Heatmap --- */
.dj-calendar-heatmap { display: inline-block; }
.dj-calendar-heatmap__svg { font-family: inherit; }
.dj-calendar-heatmap__title { fill: var(--dj-calendar-heatmap-text, currentColor); }
.dj-calendar-heatmap__cell { transition: opacity 0.15s ease; }
.dj-calendar-heatmap__cell:hover { opacity: 0.8; stroke: hsl(var(--muted-foreground, 215 16% 47%)); stroke-width: 1; }
.dj-calendar-heatmap__day-label, .dj-calendar-heatmap__month-label { fill: var(--dj-calendar-heatmap-text, currentColor); }

/* --- Terminal --- */
.dj-terminal { background: var(--dj-terminal-bg, #1e1e1e); color: var(--dj-terminal-fg, #d4d4d4); border-radius: var(--dj-terminal-radius, 0.5rem); overflow: hidden; font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; font-size: var(--dj-terminal-font-size, 0.8125rem); }
.dj-terminal__titlebar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.05); }
.dj-terminal__title { font-size: 0.75rem; opacity: 0.7; }
.dj-terminal__dots { display: flex; gap: 0.375rem; }
.dj-terminal__dot { width: 0.75rem; height: 0.75rem; border-radius: 9999px; }
.dj-terminal__dot--red { background: #ff5f57; }
.dj-terminal__dot--yellow { background: #febc2e; }
.dj-terminal__dot--green { background: #28c840; }
.dj-terminal__body { padding: 0.75rem; max-height: var(--dj-terminal-max-height, 24rem); overflow-y: auto; }
.dj-terminal__line { display: flex; gap: 0.75rem; line-height: 1.5; }
.dj-terminal__line-num { color: rgba(255,255,255,0.25); user-select: none; min-width: 2.5rem; text-align: right; }
.dj-terminal__text { white-space: pre; }
.dj-terminal--wrap .dj-terminal__text { white-space: pre-wrap; word-break: break-all; }

/* --- Markdown Editor --- */
.dj-md-editor { border: 1px solid var(--dj-md-editor-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-md-editor-radius, 0.5rem); background: var(--dj-md-editor-bg, hsl(var(--card, 0 0% 100%))); overflow: hidden; }
.dj-md-editor--disabled { opacity: 0.5; pointer-events: none; }
.dj-md-editor__toolbar { display: flex; gap: 0.25rem; padding: 0.375rem 0.5rem; background: var(--dj-md-editor-toolbar-bg, hsl(var(--muted, 210 40% 98%))); border-bottom: 1px solid var(--dj-md-editor-border, hsl(var(--border, 214 32% 91%))); }
.dj-md-editor__btn { padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: 0.25rem; background: none; cursor: pointer; font-size: 0.8125rem; font-weight: 600; }
.dj-md-editor__btn:hover { background: rgba(0,0,0,0.05); }
.dj-md-editor__panes { display: flex; min-height: var(--dj-md-editor-min-height, 16rem); }
.dj-md-editor--split .dj-md-editor__panes { }
.dj-md-editor__textarea { flex: 1; padding: 0.75rem; border: none; outline: none; resize: vertical; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.875rem; line-height: 1.625; }
.dj-md-editor__preview { flex: 1; padding: 0.75rem; border-left: 1px solid var(--dj-md-editor-border, hsl(var(--border, 214 32% 91%))); overflow-y: auto; font-size: 0.875rem; line-height: 1.625; }

/* --- JSON Viewer --- */
.dj-json-viewer { background: var(--dj-json-bg, #1e1e1e); color: var(--dj-json-fg, #d4d4d4); border-radius: var(--dj-json-radius, 0.5rem); font-family: 'SF Mono', 'Fira Code', monospace; font-size: var(--dj-json-font-size, 0.8125rem); overflow: hidden; }
.dj-json-viewer__header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: rgba(255,255,255,0.05); }
.dj-json-viewer__label { font-size: 0.75rem; opacity: 0.7; }
.dj-json-viewer__copy { padding: 0.125rem 0.5rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 0.25rem; background: none; color: inherit; cursor: pointer; font-size: 0.6875rem; }
.dj-json-viewer__tree { padding: 0.75rem; overflow: auto; }
.dj-json-viewer__raw { display: none; }
.dj-json__node { position: relative; }
.dj-json__children { padding-left: 1.25rem; }
.dj-json__node--collapsed > .dj-json__children { display: none; }
.dj-json__toggle { cursor: pointer; display: inline-block; width: 1rem; text-align: center; user-select: none; }
.dj-json__key { color: var(--dj-json-key-color, #9cdcfe); }
.dj-json__colon { color: var(--dj-json-fg, #d4d4d4); }
.dj-json__bracket { color: var(--dj-json-bracket-color, #808080); }
.dj-json__count { color: rgba(255,255,255,0.35); font-size: 0.75rem; }
.dj-json__value--string { color: var(--dj-json-string-color, #ce9178); }
.dj-json__value--number { color: var(--dj-json-number-color, #b5cea8); }
.dj-json__value--bool, .dj-json__value--null { color: var(--dj-json-bool-color, #569cd6); }
.dj-json__pair, .dj-json__item { line-height: 1.6; }

/* --- Log Viewer --- */
.dj-log-viewer { background: var(--dj-log-bg, #1a1a2e); color: var(--dj-log-fg, #d4d4d4); border-radius: var(--dj-log-radius, 0.5rem); font-family: 'SF Mono', 'Fira Code', monospace; font-size: var(--dj-log-font-size, 0.8125rem); overflow: hidden; }
.dj-log-viewer__body { padding: 0.5rem; max-height: var(--dj-log-max-height, 24rem); overflow-y: auto; }
.dj-log-viewer__line { display: flex; gap: 0.75rem; line-height: 1.5; padding: 0.0625rem 0.25rem; }
.dj-log-viewer__line:hover { background: rgba(255,255,255,0.03); }
.dj-log-viewer__num { color: rgba(255,255,255,0.2); user-select: none; min-width: 2.5rem; text-align: right; }
.dj-log-viewer__text { white-space: pre; }
.dj-log-viewer--wrap .dj-log-viewer__text { white-space: pre-wrap; word-break: break-all; }
.dj-log-viewer__line--info .dj-log-viewer__text { color: var(--dj-log-info-color, #3498db); }
.dj-log-viewer__line--warn .dj-log-viewer__text { color: var(--dj-log-warn-color, #f1c40f); }
.dj-log-viewer__line--error .dj-log-viewer__text { color: var(--dj-log-error-color, #e74c3c); }
.dj-log-viewer__line--debug .dj-log-viewer__text { color: var(--dj-log-debug-color, #7f8c8d); }

/* --- File Tree --- */
.dj-file-tree { background: var(--dj-file-tree-bg, transparent); color: var(--dj-file-tree-fg, inherit); font-size: var(--dj-file-tree-font-size, 0.875rem); border-radius: var(--dj-file-tree-radius, 0.5rem); }
.dj-file-tree__node { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; cursor: pointer; border-radius: 0.25rem; user-select: none; }
.dj-file-tree__node:hover { background: var(--dj-file-tree-hover-bg, rgba(0,0,0,0.04)); }
.dj-file-tree__node--selected { background: var(--dj-file-tree-selected-bg, rgba(59,130,246,0.1)); font-weight: 500; }
.dj-file-tree__toggle { display: inline-flex; width: 1rem; justify-content: center; font-size: 0.625rem; }
.dj-file-tree__icon { font-size: 1rem; line-height: 1; }
.dj-file-tree__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-file-tree__children { /* indentation handled inline */ }

/* --- Tour / Onboarding Guide --- */
.dj-tour__overlay { position: fixed; inset: 0; background: var(--dj-tour-overlay-bg, rgba(0,0,0,0.5)); z-index: 9998; }
.dj-tour__popover { position: fixed; z-index: 9999; background: var(--dj-tour-popover-bg, hsl(var(--card, 0 0% 100%))); color: var(--dj-tour-popover-fg, hsl(var(--card-foreground, 222 47% 11%))); border-radius: var(--dj-tour-popover-radius, 0.75rem); box-shadow: var(--dj-tour-popover-shadow, 0 8px 30px rgba(0,0,0,0.15)); padding: 1.25rem; max-width: 22rem; min-width: 16rem; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.dj-tour__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.dj-tour__title { font-size: 1rem; font-weight: 600; margin: 0; }
.dj-tour__step-label { font-size: 0.75rem; opacity: 0.5; }
.dj-tour__content { font-size: 0.875rem; line-height: 1.5; margin: 0; }
.dj-tour__progress { display: flex; gap: 0.375rem; justify-content: center; margin: 0.75rem 0; }
.dj-tour__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: hsl(var(--border, 214 32% 91%)); }
.dj-tour__dot--active { background: hsl(var(--primary, 222 47% 51%)); }
.dj-tour__dot--completed { background: hsl(var(--success, 142 71% 45%)); }
.dj-tour__footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.75rem; }
.dj-tour__next { padding: 0.375rem 1rem; border: none; border-radius: 0.375rem; background: hsl(var(--primary, 222 47% 51%)); color: hsl(var(--primary-foreground, 210 40% 98%)); font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
.dj-tour__prev { padding: 0.375rem 1rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.375rem; background: none; font-size: 0.8125rem; cursor: pointer; }
.dj-tour__skip { padding: 0.375rem 0.5rem; border: none; background: none; font-size: 0.75rem; color: hsl(var(--muted-foreground, 220 9% 46%)); cursor: pointer; margin-right: auto; }

/* --- Calendar View --- */
.dj-calendar { background: var(--dj-calendar-bg, transparent); color: var(--dj-calendar-fg, inherit); font-size: var(--dj-calendar-font-size, 0.875rem); border-radius: var(--dj-calendar-radius, 0.5rem); }
.dj-calendar__header { display: flex; align-items: center; justify-content: center; padding: 0.75rem; }
.dj-calendar__title { font-size: 1.125rem; font-weight: 600; }
.dj-calendar__daynames { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 500; font-size: 0.75rem; color: var(--dj-calendar-dayname-color, hsl(var(--muted-foreground, 220 9% 46%))); padding: 0.25rem 0; border-bottom: 1px solid var(--dj-calendar-border, hsl(var(--border, 214 32% 91%))); }
.dj-calendar__week { display: grid; grid-template-columns: repeat(7, 1fr); }
.dj-calendar__day { min-height: 5rem; padding: 0.25rem; border: 1px solid var(--dj-calendar-border, hsl(var(--border, 214 32% 91%))); cursor: pointer; }
.dj-calendar__day:hover { background: var(--dj-calendar-hover-bg, rgba(59,130,246,0.05)); }
.dj-calendar__day--empty { background: var(--dj-calendar-empty-bg, hsl(var(--muted, 210 40% 98%))); cursor: default; }
.dj-calendar__daynum { font-size: 0.8125rem; font-weight: 500; }
.dj-calendar__event { font-size: 0.6875rem; padding: 0.125rem 0.25rem; border-radius: 0.25rem; margin-top: 0.125rem; background: var(--dj-calendar-event-color, hsl(var(--primary, 222 47% 51%))); color: hsl(var(--primary-foreground, 210 40% 98%)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dj-calendar__more { font-size: 0.625rem; color: hsl(var(--muted-foreground, 220 9% 46%)); margin-top: 0.125rem; }

/* --- Gantt Chart --- */
.dj-gantt { background: var(--dj-gantt-bg, transparent); }

/* --- Diff Viewer --- */
.dj-diff { background: var(--dj-diff-bg, transparent); font-family: var(--dj-diff-font, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--dj-diff-font-size, 0.8125rem); border-radius: var(--dj-diff-radius, 0.5rem); overflow: hidden; border: 1px solid var(--dj-diff-border, hsl(var(--border, 214 32% 91%))); }
.dj-diff--split { display: grid; grid-template-columns: 1fr 1fr; }
.dj-diff__pane { overflow-x: auto; }
.dj-diff__pane-header { padding: 0.375rem 0.75rem; font-weight: 600; font-size: 0.75rem; background: var(--dj-diff-header-bg, hsl(var(--accent, 210 40% 96%))); border-bottom: 1px solid var(--dj-diff-border, hsl(var(--border, 214 32% 91%))); }
.dj-diff__pane--old .dj-diff__pane-header { border-right: 1px solid var(--dj-diff-border, hsl(var(--border, 214 32% 91%))); }
.dj-diff__line { display: flex; align-items: baseline; padding: 0 0.5rem; min-height: 1.5rem; line-height: 1.5; }
.dj-diff__line--del { background: var(--dj-diff-del-bg, hsl(var(--destructive, 0 84% 60%) / 0.05)); }
.dj-diff__line--add { background: var(--dj-diff-add-bg, hsl(var(--success, 142 71% 45%) / 0.05)); }
.dj-diff__line--empty { background: var(--dj-diff-empty-bg, hsl(var(--muted, 210 40% 98%))); }
.dj-diff__num { min-width: 2.5rem; text-align: right; color: hsl(var(--muted-foreground, 220 9% 46%)); user-select: none; padding-right: 0.5rem; }
.dj-diff__marker { min-width: 1rem; text-align: center; color: hsl(var(--muted-foreground, 220 9% 46%)); user-select: none; }
.dj-diff__text { white-space: pre; }

/* --- Pivot Table --- */
.dj-pivot { background: var(--dj-pivot-bg, transparent); overflow-x: auto; }
.dj-pivot__table { border-collapse: collapse; width: 100%; font-size: var(--dj-pivot-font-size, 0.875rem); }
.dj-pivot__title { caption-side: top; text-align: center; font-weight: 600; font-size: 1rem; padding: 0.5rem; }
.dj-pivot__corner { text-align: left; padding: 0.5rem; background: var(--dj-pivot-header-bg, hsl(var(--accent, 210 40% 96%))); border: 1px solid var(--dj-pivot-border, hsl(var(--border, 214 32% 91%))); font-weight: 600; }
.dj-pivot__colheader { padding: 0.5rem; text-align: center; background: var(--dj-pivot-header-bg, hsl(var(--accent, 210 40% 96%))); border: 1px solid var(--dj-pivot-border, hsl(var(--border, 214 32% 91%))); font-weight: 600; }
.dj-pivot__rowheader { padding: 0.5rem; text-align: left; background: var(--dj-pivot-header-bg, hsl(var(--accent, 210 40% 96%))); border: 1px solid var(--dj-pivot-border, hsl(var(--border, 214 32% 91%))); font-weight: 500; }
.dj-pivot__cell { padding: 0.5rem; text-align: right; border: 1px solid var(--dj-pivot-border, hsl(var(--border, 214 32% 91%))); }
.dj-pivot__row-total, .dj-pivot__col-total, .dj-pivot__grand-total { font-weight: 600; background: var(--dj-pivot-total-bg, hsl(var(--muted, 210 40% 98%))); }

/* --- Org Chart --- */
.dj-org { background: var(--dj-org-bg, transparent); }
.dj-org__root { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; }
.dj-org__node { display: flex; flex-direction: column; align-items: center; }
.dj-org__card { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--dj-org-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-org-radius, 0.5rem); background: var(--dj-org-card-bg, hsl(var(--card, 0 0% 100%))); cursor: pointer; min-width: 10rem; }
.dj-org__card:hover { box-shadow: var(--dj-org-card-shadow, 0 2px 8px rgba(0,0,0,0.08)); }
.dj-org__avatar { width: 2rem; height: 2rem; border-radius: 9999px; object-fit: cover; }
.dj-org__initials { width: 2rem; height: 2rem; border-radius: 9999px; background: var(--dj-org-initials-bg, hsl(var(--primary, 222 47% 51%))); color: hsl(var(--primary-foreground, 210 40% 98%)); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
.dj-org__info { display: flex; flex-direction: column; }
.dj-org__name { font-weight: 600; font-size: 0.875rem; }
.dj-org__title { font-size: 0.75rem; color: var(--dj-org-title-color, hsl(var(--muted-foreground, 220 9% 46%))); }
.dj-org__children { list-style: none; padding: 1.5rem 0 0 0; margin: 0; display: flex; gap: 1rem; position: relative; }
.dj-org__children::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 1rem; background: var(--dj-org-line-color, hsl(var(--border, 214 32% 91%))); }
.dj-org--horizontal .dj-org__root { flex-direction: row; }
.dj-org--horizontal .dj-org__node { flex-direction: row; }
.dj-org--horizontal .dj-org__children { padding: 0 0 0 1.5rem; flex-direction: column; }

/* --- Comparison Table --- */
.dj-compare { background: var(--dj-compare-bg, transparent); overflow-x: auto; }
.dj-compare__table { border-collapse: collapse; width: 100%; font-size: var(--dj-compare-font-size, 0.875rem); }
.dj-compare__corner { padding: 0.75rem; }
.dj-compare__plan { padding: 1rem; text-align: center; border-bottom: 2px solid var(--dj-compare-border, hsl(var(--border, 214 32% 91%))); vertical-align: bottom; }
.dj-compare__plan--highlighted { background: var(--dj-compare-hl-bg, rgba(59,130,246,0.05)); border-bottom-color: var(--dj-compare-hl-border, hsl(var(--primary, 222 47% 51%))); }
.dj-compare__plan-name { font-weight: 700; font-size: 1rem; }
.dj-compare__price { font-size: 0.875rem; color: var(--dj-compare-price-color, hsl(var(--muted-foreground, 220 9% 46%))); margin-top: 0.25rem; }
.dj-compare__feature { padding: 0.625rem 0.75rem; text-align: left; font-weight: 500; border-bottom: 1px solid var(--dj-compare-border, hsl(var(--border, 214 32% 91%))); }
.dj-compare__cell { padding: 0.625rem 0.75rem; text-align: center; border-bottom: 1px solid var(--dj-compare-border, hsl(var(--border, 214 32% 91%))); }
.dj-compare__cell--highlighted { background: var(--dj-compare-hl-bg, rgba(59,130,246,0.05)); }
.dj-compare__check { color: var(--dj-compare-check-color, hsl(var(--success, 142 71% 45%))); font-weight: 700; }
.dj-compare__cross { color: var(--dj-compare-cross-color, hsl(var(--border, 214 32% 91%))); }

/* --- Masonry Grid --- */
.dj-masonry { display: grid; grid-template-columns: repeat(var(--dj-masonry-columns, 3), 1fr); gap: var(--dj-masonry-gap, 16px); }
.dj-masonry__col { display: flex; flex-direction: column; gap: var(--dj-masonry-gap, 16px); }
.dj-masonry__item { break-inside: avoid; }

/* --- Cursors Overlay --- */
.dj-cursors { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1000; }
.dj-cursors__cursor { position: absolute; transition: left 0.15s ease, top 0.15s ease; }
.dj-cursors__arrow { display: block; }
.dj-cursors__label { display: block; padding: 0.125rem 0.375rem; border-radius: var(--dj-cursors-label-radius, 0.25rem); color: #fff; font-size: var(--dj-cursors-label-font-size, 0.75rem); font-weight: 500; white-space: nowrap; margin-top: -2px; margin-left: 12px; }

/* --- Live Indicator --- */
.dj-live-indicator { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--dj-live-indicator-fg, hsl(var(--muted-foreground, 220 9% 46%))); background: var(--dj-live-indicator-bg, transparent); padding: 0.25rem 0; }
.dj-live-indicator--hidden { display: none; }
.dj-live-indicator__avatar { width: 1.25rem; height: 1.25rem; border-radius: 9999px; object-fit: cover; }
.dj-live-indicator__text { display: inline-flex; align-items: baseline; gap: 0; }
.dj-live-indicator__dots { display: inline-flex; gap: 2px; margin-left: 2px; }
.dj-live-indicator__dot { display: inline-block; width: 4px; height: 4px; border-radius: 9999px; background: var(--dj-live-indicator-dot-color, hsl(var(--primary, 222 47% 51%))); animation: dj-live-indicator-bounce 1.4s infinite both; }
.dj-live-indicator__dot:nth-child(2) { animation-delay: 0.2s; }
.dj-live-indicator__dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dj-live-indicator-bounce { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }

/* --- Collaborative Selection --- */
.dj-collab-sel { position: relative; }
.dj-collab-sel__range { position: relative; display: inline; }
.dj-collab-sel__highlight { background: color-mix(in srgb, var(--dj-collab-sel-color, hsl(var(--primary, 222 47% 51%))) var(--dj-collab-sel-opacity-pct, 25%), transparent); border-bottom: 2px solid var(--dj-collab-sel-color, hsl(var(--primary, 222 47% 51%))); }
.dj-collab-sel__label { position: absolute; top: -1.25rem; left: 0; padding: 0.0625rem 0.25rem; border-radius: 0.1875rem; color: #fff; font-size: var(--dj-collab-sel-label-size, 0.6875rem); font-weight: 500; white-space: nowrap; line-height: 1.2; }

/* --- Activity Feed --- */
.dj-activity-feed { display: flex; flex-direction: column; gap: 0; background: var(--dj-activity-bg, transparent); }
.dj-activity-feed__item { display: flex; gap: 0.625rem; padding: 0.625rem 0; border-bottom: 1px solid var(--dj-activity-border-color, hsl(var(--border, 214 32% 91%) / 0.5)); }
.dj-activity-feed__item:last-child { border-bottom: none; }
.dj-activity-feed__avatar { flex-shrink: 0; width: var(--dj-activity-avatar-size, 2rem); height: var(--dj-activity-avatar-size, 2rem); border-radius: 9999px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.dj-activity-feed__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.dj-activity-feed__avatar-initials { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: hsl(var(--muted, 210 40% 96%)); color: hsl(var(--muted-foreground, 215 16% 47%)); font-size: 0.6875rem; font-weight: 600; border-radius: 9999px; }
.dj-activity-feed__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.dj-activity-feed__text { font-size: 0.875rem; line-height: 1.4; }
.dj-activity-feed__user { font-weight: 600; }
.dj-activity-feed__target { font-weight: 500; }
.dj-activity-feed__time { font-size: 0.75rem; color: var(--dj-activity-time-color, hsl(var(--muted-foreground, 220 9% 46%))); }
.dj-activity-feed__icon { margin-right: 0.25rem; }

/* --- Reactions --- */
.dj-reactions { display: flex; flex-wrap: wrap; gap: var(--dj-reactions-gap, 0.375rem); align-items: center; }
.dj-reactions__btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: var(--dj-reactions-btn-radius, 9999px); background: var(--dj-reactions-btn-bg, hsl(var(--accent, 210 40% 96%))); cursor: pointer; font: inherit; font-size: 0.875rem; line-height: 1; transition: background 0.15s, border-color 0.15s; }
.dj-reactions__btn:hover { background: hsl(var(--border, 214 32% 91%)); }
.dj-reactions__btn--active { background: var(--dj-reactions-btn-active-bg, hsl(var(--primary, 222 47% 51%) / 0.1)); border-color: hsl(var(--primary, 222 47% 51%) / 0.4); }
.dj-reactions__emoji { font-size: 1rem; line-height: 1; }
.dj-reactions__count { font-size: 0.75rem; font-weight: 600; color: var(--dj-reactions-count-color, hsl(var(--muted-foreground, 220 9% 46%))); }

/* --- Map Picker --- */
.dj-map-picker { position: relative; border: 1px solid var(--dj-map-picker-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-map-picker-radius, 0.5rem); overflow: hidden; background: var(--dj-map-picker-bg, hsl(var(--muted, 210 40% 96%))); }
.dj-map-picker__map { width: 100%; height: 100%; }

/* --- Prompt Editor --- */
.dj-prompt-editor { display: flex; flex-direction: column; gap: 0.75rem; }
.dj-prompt-editor__textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--dj-prompt-editor-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-prompt-editor-radius, 0.5rem); background: var(--dj-prompt-editor-bg, #1e1e2e); color: var(--dj-prompt-editor-fg, #cdd6f4); font-family: monospace; font-size: 0.875rem; resize: vertical; }
.dj-prompt-editor__vars { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.dj-prompt-editor__var { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background: var(--dj-prompt-editor-var-bg, hsl(var(--primary, 222 47% 51%) / 0.1)); color: var(--dj-prompt-editor-var-fg, hsl(var(--primary, 222 47% 51%))); font-size: 0.75rem; }
.dj-prompt-editor__preview { padding: 0.75rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.375rem; background: hsl(var(--muted, 210 40% 98%)); font-size: 0.875rem; line-height: 1.5; }
.dj-prompt-editor__highlight { background: hsl(var(--warning, 48 96% 53%) / 0.1); color: hsl(var(--warning, 48 96% 53%)); padding: 0.0625rem 0.25rem; border-radius: 0.125rem; }
.dj-prompt-editor__save { align-self: flex-end; padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: hsl(var(--primary, 222 47% 51%)); color: hsl(var(--primary-foreground, 210 40% 98%)); cursor: pointer; font-size: 0.875rem; font-weight: 500; }
.dj-prompt-editor__save:hover { background: hsl(var(--primary, 222 47% 51%) / 0.85); }

/* --- Voice Input --- */
.dj-voice-input { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--dj-voice-input-size, 3rem); height: var(--dj-voice-input-size, 3rem); border: none; border-radius: var(--dj-voice-input-radius, 9999px); background: var(--dj-voice-input-bg, hsl(var(--accent, 210 40% 96%))); color: var(--dj-voice-input-color, hsl(var(--foreground, 222 47% 11%))); cursor: pointer; transition: background 0.2s, color 0.2s; }
.dj-voice-input:hover { background: hsl(var(--border, 214 32% 91%)); }
.dj-voice-input[aria-pressed="true"] { background: var(--dj-voice-input-active-bg, #fee2e2); color: var(--dj-voice-input-active-color, #dc2626); }
.dj-voice-input__icon { flex-shrink: 0; }
.dj-voice-input__pulse { position: absolute; inset: -4px; border-radius: 9999px; border: 2px solid currentColor; opacity: 0; animation: none; pointer-events: none; }
.dj-voice-input[aria-pressed="true"] .dj-voice-input__pulse { animation: dj-voice-pulse 1.5s ease-out infinite; }
@keyframes dj-voice-pulse { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }

/* --- Cron Input --- */
.dj-cron-input { display: flex; flex-direction: column; gap: 0.75rem; }
.dj-cron-input__fields { display: flex; gap: var(--dj-cron-input-gap, 0.5rem); flex-wrap: wrap; }
.dj-cron-input__field { display: flex; flex-direction: column; gap: 0.25rem; }
.dj-cron-input__label { font-size: 0.6875rem; font-weight: 600; color: hsl(var(--muted-foreground, 220 9% 46%)); text-transform: uppercase; letter-spacing: 0.05em; }
.dj-cron-input__input { width: 5rem; padding: 0.375rem 0.5rem; border: 1px solid var(--dj-cron-input-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-cron-input-radius, 0.375rem); background: var(--dj-cron-input-bg, hsl(var(--card, 0 0% 100%))); font-family: monospace; font-size: 0.875rem; text-align: center; }
.dj-cron-input__preview { font-family: monospace; font-size: 0.875rem; color: hsl(var(--muted-foreground, 220 9% 46%)); }

/* --- Error Page --- */
.dj-error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem; min-height: 50vh; background: var(--dj-error-page-bg, hsl(var(--background, 0 0% 100%))); }
.dj-error-page__code { font-size: 6rem; font-weight: 800; line-height: 1; color: var(--dj-error-page-code-color, hsl(var(--primary, 222 47% 51%))); }
.dj-error-page__title { margin: 1rem 0 0.5rem; font-size: 1.5rem; font-weight: 700; color: var(--dj-error-page-title-color, hsl(var(--foreground, 222 47% 11%))); }
.dj-error-page__message { margin: 0 0 1.5rem; font-size: 1rem; color: var(--dj-error-page-msg-color, hsl(var(--muted-foreground, 220 9% 46%))); max-width: 28rem; }
.dj-error-page__action { display: inline-block; padding: 0.625rem 1.25rem; border-radius: 0.375rem; background: hsl(var(--primary, 222 47% 51%)); color: hsl(var(--primary-foreground, 210 40% 98%)); text-decoration: none; font-weight: 500; font-size: 0.875rem; }
.dj-error-page__action:hover { background: hsl(var(--primary, 222 47% 51%) / 0.85); }

/* --- Image Upload Preview --- */
.dj-img-upload { display: flex; flex-direction: column; gap: 0.75rem; }
.dj-img-upload__dropzone { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2rem; border: 2px dashed var(--dj-img-upload-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-img-upload-radius, 0.5rem); background: var(--dj-img-upload-bg, hsl(var(--muted, 210 40% 98%))); cursor: pointer; transition: border-color 0.2s; text-align: center; }
.dj-img-upload__dropzone:hover { border-color: hsl(var(--primary, 222 47% 51%)); }
.dj-img-upload__icon { color: hsl(var(--muted-foreground, 220 9% 46%)); }
.dj-img-upload__text { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground, 222 47% 11%)); }
.dj-img-upload__hint { font-size: 0.75rem; color: hsl(var(--muted-foreground, 220 9% 46%)); }
.dj-img-upload__input { display: none; }
.dj-img-upload__previews { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dj-img-upload__thumb { width: var(--dj-img-upload-thumb-size, 5rem); height: var(--dj-img-upload-thumb-size, 5rem); border-radius: 0.375rem; overflow: hidden; border: 1px solid hsl(var(--border, 214 32% 91%)); }
.dj-img-upload__thumb-img { width: 100%; height: 100%; object-fit: cover; }

/* --- Animated Number --- */
.dj-animated-number { display: inline-flex; align-items: baseline; font-size: var(--dj-anim-number-size, 2rem); font-weight: var(--dj-anim-number-weight, 700); color: var(--dj-anim-number-color, inherit); font-variant-numeric: tabular-nums; }
.dj-animated-number__prefix, .dj-animated-number__suffix { font-size: 0.75em; font-weight: 500; opacity: 0.7; }
.dj-animated-number__value { display: inline-block; }

/* --- Ribbon --- */
.dj-ribbon { position: absolute; overflow: hidden; width: var(--dj-ribbon-size, 8rem); height: var(--dj-ribbon-size, 8rem); pointer-events: none; z-index: 1; }
.dj-ribbon__text { display: block; position: absolute; width: 150%; text-align: center; padding: 0.375rem 0; font-size: var(--dj-ribbon-font-size, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dj-ribbon-fg, #fff); }
.dj-ribbon--primary .dj-ribbon__text { background: var(--dj-ribbon-bg, hsl(var(--primary, 222 47% 51%))); }
.dj-ribbon--success .dj-ribbon__text { background: hsl(var(--success, 142 71% 45%)); }
.dj-ribbon--warning .dj-ribbon__text { background: hsl(var(--warning, 48 96% 53%)); color: hsl(var(--foreground, 222 47% 11%)); }
.dj-ribbon--danger .dj-ribbon__text { background: hsl(var(--destructive, 0 84% 60%)); }
.dj-ribbon--top-right { top: 0; right: 0; }
.dj-ribbon--top-right .dj-ribbon__text { top: 1.5rem; right: -2.5rem; transform: rotate(45deg); }
.dj-ribbon--top-left { top: 0; left: 0; }
.dj-ribbon--top-left .dj-ribbon__text { top: 1.5rem; left: -2.5rem; transform: rotate(-45deg); }
.dj-ribbon--bottom-right { bottom: 0; right: 0; }
.dj-ribbon--bottom-right .dj-ribbon__text { bottom: 1.5rem; right: -2.5rem; transform: rotate(-45deg); }
.dj-ribbon--bottom-left { bottom: 0; left: 0; }
.dj-ribbon--bottom-left .dj-ribbon__text { bottom: 1.5rem; left: -2.5rem; transform: rotate(45deg); }

/* --- Breadcrumb Dropdown --- */
.dj-breadcrumb { font-size: 0.875rem; }
.dj-breadcrumb__list { display: flex; align-items: center; gap: var(--dj-breadcrumb-gap, 0.5rem); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.dj-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--dj-breadcrumb-gap, 0.5rem); }
.dj-breadcrumb__item + .dj-breadcrumb__item::before { content: var(--dj-breadcrumb-sep, "/"); color: var(--dj-breadcrumb-separator-color, hsl(var(--muted-foreground, 220 9% 46%))); }
.dj-breadcrumb__link { color: var(--dj-breadcrumb-link-color, hsl(var(--primary, 222 47% 51%))); text-decoration: none; }
.dj-breadcrumb__link:hover { text-decoration: underline; }
.dj-breadcrumb__current { color: var(--dj-breadcrumb-current-color, hsl(var(--foreground, 222 47% 11%))); font-weight: 500; }
.dj-breadcrumb__ellipsis { position: relative; }
.dj-breadcrumb__toggle { background: none; border: none; cursor: pointer; font-size: 1rem; color: hsl(var(--muted-foreground, 220 9% 46%)); padding: 0.125rem 0.25rem; border-radius: 0.25rem; }
.dj-breadcrumb__toggle:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-breadcrumb__dropdown { display: none; position: absolute; top: 100%; left: 0; background: hsl(var(--card, 0 0% 100%)); border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 0.375rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); list-style: none; margin: 0.25rem 0 0; padding: 0.25rem; min-width: 10rem; z-index: 10; }
.dj-breadcrumb__toggle[aria-expanded="true"] + .dj-breadcrumb__dropdown { display: block; }
.dj-breadcrumb__dropdown-item { padding: 0.375rem 0.5rem; border-radius: 0.25rem; }
.dj-breadcrumb__dropdown-item:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-breadcrumb__dropdown-item a { color: inherit; text-decoration: none; }

/* --- Data Card Grid --- */
.dj-data-card-grid { display: flex; flex-direction: column; gap: 1rem; }
.dj-data-card-grid__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dj-data-card-grid__filter { padding: 0.375rem 0.75rem; border: 1px solid hsl(var(--border, 214 32% 91%)); border-radius: 9999px; background: hsl(var(--card, 0 0% 100%)); cursor: pointer; font-size: 0.8125rem; font-weight: 500; transition: background 0.15s, border-color 0.15s; }
.dj-data-card-grid__filter:hover { background: hsl(var(--accent, 210 40% 96%)); }
.dj-data-card-grid__filter--active { background: hsl(var(--primary, 222 47% 51%)); color: hsl(var(--primary-foreground, 210 40% 98%)); border-color: hsl(var(--primary, 222 47% 51%)); }
.dj-data-card-grid__grid { display: grid; grid-template-columns: repeat(var(--dj-data-card-grid-cols, 3), 1fr); gap: var(--dj-data-card-grid-gap, 1rem); }
.dj-data-card-grid__card { border: 1px solid var(--dj-data-card-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-data-card-radius, 0.5rem); background: var(--dj-data-card-bg, hsl(var(--card, 0 0% 100%))); overflow: hidden; transition: box-shadow 0.2s; }
.dj-data-card-grid__card:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.dj-data-card-grid__img { width: 100%; height: 10rem; object-fit: cover; }
.dj-data-card-grid__body { padding: var(--dj-data-card-padding, 1rem); }
.dj-data-card-grid__title { margin: 0 0 0.375rem; font-size: 1rem; font-weight: 600; }
.dj-data-card-grid__desc { margin: 0; font-size: 0.875rem; color: hsl(var(--muted-foreground, 220 9% 46%)); }

/* --- Agent Step Card --- */
.dj-agent-step { border: 1px solid var(--dj-agent-step-border, hsl(var(--border, 214 32% 91%))); border-radius: var(--dj-agent-step-radius, 0.5rem); background: var(--dj-agent-step-bg, hsl(var(--muted, 210 40% 98%))); padding: 0.75rem 1rem; }
.dj-agent-step__header { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.dj-agent-step__icon { font-size: var(--dj-agent-step-icon-size, 1.25rem); line-height: 1; }
.dj-agent-step__tool { font-weight: 600; font-family: monospace; }
.dj-agent-step__status { font-size: 0.75rem; color: hsl(var(--muted-foreground, 220 9% 46%)); }
.dj-agent-step__duration { margin-left: auto; font-size: 0.75rem; color: hsl(var(--muted-foreground, 220 9% 46%)); }
.dj-agent-step__content { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid hsl(var(--border, 214 32% 91%)); font-size: 0.8125rem; color: hsl(var(--foreground, 222 47% 11%)); }
.dj-agent-step--pending .dj-agent-step__icon { color: hsl(var(--muted-foreground, 220 9% 46%)); }
.dj-agent-step--running .dj-agent-step__icon { color: hsl(var(--primary, 222 47% 51%)); }
.dj-agent-step--complete .dj-agent-step__icon { color: hsl(var(--success, 142 71% 45%)); }
.dj-agent-step--error .dj-agent-step__icon { color: hsl(var(--destructive, 0 84% 60%)); }
.dj-agent-step--error { border-color: hsl(var(--destructive, 0 84% 60%) / 0.3); background: hsl(var(--destructive, 0 84% 60%) / 0.05); }

/* --- QR Code --- */
.dj-qr-code { display: inline-block; }
.dj-qr-code__svg { display: block; }

/* --- ARIA / Keyboard Navigation (:focus-visible) --- */
.split-btn-primary:focus-visible, .split-btn-toggle:focus-visible, .split-btn-option:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.4); }
.ctx-item:focus-visible { outline: none; background: hsl(var(--accent)); color: hsl(var(--foreground)); box-shadow: 0 0 0 2px hsl(var(--ring, 222 47% 51%) / 0.4); }
.popover-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.4); }
.dj-dropdown-menu__trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.4); }
.dj-dropdown-menu__item:focus-visible { outline: none; background: hsl(var(--accent, 210 40% 96%)); box-shadow: 0 0 0 2px hsl(var(--ring, 222 47% 51%) / 0.4); }
.dj-toolbar__overflow-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.4); }
.dj-popconfirm-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.4); }
.dj-popconfirm__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.4); }
.dj-confirm-dialog__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.4); }
.dj-confirm-dialog__close:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.4); }
.dj-announcement-bar__close:focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring, 222 47% 51%) / 0.4); }
.dj-hover-card__trigger:focus-visible { outline: 2px solid hsl(var(--ring, 222 47% 51%)); outline-offset: 2px; }
.dj-citation:focus-visible { outline: 2px solid hsl(var(--ring, 222 47% 51%)); outline-offset: 1px; border-radius: 2px; }
.dj-scroll-area:focus-visible { outline: 2px solid hsl(var(--ring, 222 47% 51%)); outline-offset: -2px; }
.dj-status-indicator:focus-visible { outline: 2px solid hsl(var(--ring, 222 47% 51%)); outline-offset: 2px; border-radius: 9999px; }
.dj-inline-edit__display:focus-visible { outline: 2px solid hsl(var(--ring, 222 47% 51%)); outline-offset: 1px; }

} /* end @layer djust-components */