@os-legal/ui 0.1.12 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +4 -3
  2. package/dist/index.d.ts +4 -3
  3. package/dist/index.js +13 -1
  4. package/dist/index.mjs +13 -1
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -379,13 +379,14 @@ declare const NavBar: React__default.ForwardRefExoticComponent<NavBarProps & Rea
379
379
 
380
380
  declare const navBarStyles = "\n /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVBAR - Top Navigation Bar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n .oc-navbar {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n padding: 12px 24px;\n background: var(--oc-bg-sidebar, #0F172A);\n color: white;\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n }\n\n .oc-navbar__left {\n display: flex;\n align-items: center;\n gap: 32px;\n }\n\n /* Brand */\n .oc-navbar__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n color: white;\n }\n\n .oc-navbar__logo {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oc-navbar__brand-name {\n font-weight: 600;\n font-size: 15px;\n white-space: nowrap;\n }\n\n .oc-navbar__version.oc-chip {\n --chip-bg: rgba(255, 255, 255, 0.1);\n --chip-border: rgba(255, 255, 255, 0.2);\n --chip-text: rgba(255, 255, 255, 0.8);\n }\n\n /* Desktop Navigation */\n .oc-navbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .oc-navbar__link {\n padding: 8px 12px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n border-radius: 6px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Right Side */\n .oc-navbar__right {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .oc-navbar__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n /* User Dropdown */\n .oc-navbar-user {\n position: relative;\n }\n\n .oc-navbar-user__trigger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px 6px 6px;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .oc-navbar-user__trigger:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar-user__name {\n font-size: 14px;\n font-weight: 500;\n }\n\n .oc-navbar-user__chevron {\n transition: transform 0.2s ease;\n opacity: 0.7;\n }\n\n .oc-navbar-user__chevron--open {\n transform: rotate(180deg);\n }\n\n .oc-navbar-user__backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--oc-z-dropdown, 100);\n }\n\n .oc-navbar-user__menu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n min-width: 180px;\n padding: 6px;\n background: var(--oc-bg-surface, white);\n border-radius: 10px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n z-index: calc(var(--oc-z-dropdown, 100) + 1);\n animation: oc-navbar-dropdown-slide 0.15s ease;\n }\n\n @keyframes oc-navbar-dropdown-slide {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .oc-navbar-user__item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 12px;\n background: transparent;\n border: none;\n border-radius: 6px;\n color: var(--oc-fg-secondary, #475569);\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .oc-navbar-user__item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n }\n\n .oc-navbar-user__item--danger {\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item--danger:hover {\n background: var(--oc-error-bg, #FEF2F2);\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n }\n\n .oc-navbar-user__divider {\n height: 1px;\n margin: 6px 0;\n background: var(--oc-border-default, #E2E8F0);\n }\n\n /* Mobile Menu Toggle */\n .oc-navbar__mobile-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: none;\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .oc-navbar__mobile-toggle:hover {\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Mobile Menu */\n .oc-navbar__mobile-menu {\n display: none;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 16px 0 8px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin-top: 12px;\n }\n\n .oc-navbar__mobile-link {\n padding: 12px 16px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n border-radius: 8px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__mobile-link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__mobile-link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Responsive */\n @media (max-width: 1100px) {\n .oc-navbar__nav {\n display: none;\n }\n\n .oc-navbar__mobile-toggle {\n display: flex;\n }\n\n .oc-navbar__mobile-menu {\n display: flex;\n }\n }\n\n @media (max-width: 768px) {\n .oc-navbar {\n padding: 12px 16px;\n }\n\n .oc-navbar-user__name,\n .oc-navbar-user__chevron {\n display: none;\n }\n\n .oc-navbar-user__trigger {\n padding: 4px;\n }\n\n .oc-navbar__version {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .oc-navbar__brand-name {\n display: none;\n }\n }\n";
381
381
 
382
- type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
382
+ type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fullscreen';
383
383
  interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
384
384
  open: boolean;
385
385
  onClose: () => void;
386
386
  size?: ModalSize;
387
387
  closeOnOverlay?: boolean;
388
388
  closeOnEscape?: boolean;
389
+ overlayClassName?: string;
389
390
  children?: ReactNode;
390
391
  }
391
392
  interface ModalHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
@@ -403,7 +404,7 @@ declare const ModalHeader: React__default.ForwardRefExoticComponent<ModalHeaderP
403
404
  declare const ModalBody: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
404
405
  declare const ModalFooter: React__default.ForwardRefExoticComponent<ModalFooterProps & React__default.RefAttributes<HTMLDivElement>>;
405
406
 
406
- declare const modalStyles = "\n/* Modal Overlay */\n.oc-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--oc-spacing-md);\n z-index: var(--oc-z-modal);\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Modal */\n.oc-modal {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-xl);\n max-height: calc(100vh - 32px);\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-normal) var(--oc-easing-spring);\n}\n\n/* Modal Sizes */\n.oc-modal--sm { width: 100%; max-width: 400px; }\n.oc-modal--md { width: 100%; max-width: 500px; }\n.oc-modal--lg { width: 100%; max-width: 640px; }\n.oc-modal--xl { width: 100%; max-width: 800px; }\n.oc-modal--full { width: 100%; max-width: calc(100vw - 32px); height: calc(100vh - 32px); }\n\n/* Modal Header */\n.oc-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-lg);\n padding-bottom: 0;\n}\n\n.oc-modal-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-modal-header__title {\n font-size: var(--oc-font-size-xl);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-modal-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n/* Close Button */\n.oc-modal-close {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: background var(--oc-duration-fast) var(--oc-easing-default),\n color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-modal-close:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n/* Modal Body */\n.oc-modal-body {\n flex: 1;\n padding: var(--oc-spacing-lg);\n overflow-y: auto;\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Modal Footer */\n.oc-modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n padding-top: 0;\n}\n";
407
+ declare const modalStyles = "\n/* Modal Overlay */\n.oc-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--oc-spacing-md);\n z-index: var(--oc-z-modal);\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Modal */\n.oc-modal {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-xl);\n max-height: calc(100vh - 32px);\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-normal) var(--oc-easing-spring);\n}\n\n/* Modal Sizes */\n.oc-modal--sm { width: 100%; max-width: 400px; }\n.oc-modal--md { width: 100%; max-width: 500px; }\n.oc-modal--lg { width: 100%; max-width: 640px; }\n.oc-modal--xl { width: 100%; max-width: 800px; }\n.oc-modal--full { width: 100%; max-width: calc(100vw - 32px); height: calc(100vh - 32px); }\n.oc-modal--fullscreen { width: 100vw; max-width: 100vw; height: 100vh; border-radius: 0; }\n\n/* Fullscreen overlay removes padding */\n.oc-modal-overlay:has(.oc-modal--fullscreen) {\n padding: 0;\n}\n\n/* Modal Header */\n.oc-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-lg);\n padding-bottom: 0;\n}\n\n.oc-modal-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-modal-header__title {\n font-size: var(--oc-font-size-xl);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-modal-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n/* Close Button */\n.oc-modal-close {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: background var(--oc-duration-fast) var(--oc-easing-default),\n color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-modal-close:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n/* Modal Body */\n.oc-modal-body {\n flex: 1;\n min-height: 0;\n padding: var(--oc-spacing-lg);\n overflow-y: auto;\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Modal Footer */\n.oc-modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n padding-top: 0;\n}\n";
407
408
 
408
409
  type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
409
410
  interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
@@ -2575,6 +2576,6 @@ declare const documentGraphStyles = "\n /* ====================================
2575
2576
  * @package @opencontracts/ui
2576
2577
  */
2577
2578
 
2578
- declare const allStyles = "\n/* OpenContracts Design System - All Component Styles */\n\n/* Base utilities, tokens, and shared keyframes (must be first) */\n\n/* ============================================\n CSS Custom Properties - Design Tokens\n ============================================ */\n:root {\n /* ===========================================\n COLOR SYSTEM - Professional Legal Theme\n =========================================== */\n\n /* Accent: Deep Teal - professional, authoritative */\n --oc-accent: #0F766E;\n --oc-accent-hover: #0D9488;\n --oc-accent-active: #115E59;\n\n /* Foreground: Slate scale */\n --oc-fg-primary: #1E293B;\n --oc-fg-secondary: #475569;\n --oc-fg-tertiary: #94A3B8;\n --oc-fg-inverse: #FFFFFF;\n\n /* Background: Warm neutral surfaces */\n --oc-bg-canvas: #FAFAFA;\n --oc-bg-surface: #FFFFFF;\n --oc-bg-surface-hover: #F8FAFC;\n --oc-bg-subtle: #F1F5F9;\n --oc-bg-sidebar: #0F172A;\n\n /* Borders: Cool slate */\n --oc-border-default: #E2E8F0;\n --oc-border-strong: #CBD5E1;\n\n /* Semantic colors */\n --oc-success: #059669;\n --oc-warning: #D97706;\n --oc-error: #DC2626;\n --oc-success-bg: #ECFDF5;\n --oc-warning-bg: #FFFBEB;\n --oc-error-bg: #FEF2F2;\n\n /* ===========================================\n SPACING\n =========================================== */\n --oc-spacing-xs: 4px;\n --oc-spacing-sm: 8px;\n --oc-spacing-md: 16px;\n --oc-spacing-lg: 24px;\n --oc-spacing-xl: 32px;\n --oc-spacing-2xl: 48px;\n\n /* ===========================================\n RADIUS - Refined, slightly softer corners\n =========================================== */\n --oc-radius-sm: 6px;\n --oc-radius-md: 8px;\n --oc-radius-lg: 12px;\n --oc-radius-full: 9999px;\n\n /* ===========================================\n TYPOGRAPHY\n =========================================== */\n --oc-font-size-xs: 11px;\n --oc-font-size-sm: 13px;\n --oc-font-size-md: 15px;\n --oc-font-size-lg: 17px;\n --oc-font-size-xl: 20px;\n --oc-font-size-2xl: 24px;\n --oc-font-size-3xl: 32px;\n\n /* Line heights */\n --oc-line-height-tight: 1.25;\n --oc-line-height-normal: 1.5;\n --oc-line-height-relaxed: 1.75;\n\n /* ===========================================\n ANIMATION\n =========================================== */\n --oc-duration-fast: 0.15s;\n --oc-duration-normal: 0.2s;\n --oc-duration-slow: 0.3s;\n --oc-duration-spin: 0.8s;\n\n /* Easing curves */\n --oc-easing-default: cubic-bezier(0.4, 0, 0.2, 1);\n --oc-easing-enter: cubic-bezier(0, 0, 0.2, 1);\n --oc-easing-exit: cubic-bezier(0.4, 0, 1, 1);\n --oc-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n\n /* ===========================================\n Z-INDEX SCALE\n =========================================== */\n --oc-z-dropdown: 100;\n --oc-z-sticky: 200;\n --oc-z-overlay: 300;\n --oc-z-modal: 400;\n --oc-z-popover: 500;\n --oc-z-tooltip: 600;\n\n /* ===========================================\n OPACITY\n =========================================== */\n --oc-opacity-disabled: 0.5;\n --oc-opacity-loading: 0.7;\n --oc-opacity-hover: 0.04;\n --oc-opacity-focus-ring: 0.2;\n --oc-opacity-overlay: 0.6;\n\n /* Breakpoints (for reference in JS, media queries use values directly) */\n --oc-breakpoint-sm: 640px;\n --oc-breakpoint-md: 768px;\n --oc-breakpoint-lg: 1024px;\n --oc-breakpoint-xl: 1280px;\n\n /* ===========================================\n SHADOWS - Subtle, clean\n =========================================== */\n --oc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);\n --oc-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.03);\n --oc-shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 15px rgba(15, 23, 42, 0.04);\n --oc-shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.06), 0 20px 25px rgba(15, 23, 42, 0.05);\n --oc-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.03);\n --oc-shadow-accent: 0 4px 14px rgba(15, 118, 110, 0.2);\n --oc-shadow-accent-lg: 0 8px 24px rgba(15, 118, 110, 0.25);\n}\n\n/* ============================================\n Focus Ring Utility\n ============================================ */\n.oc-focus-ring:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Focus ring with glow effect (for inputs, etc.) */\n.oc-focus-glow:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px rgba(15, 118, 110, var(--oc-opacity-focus-ring, 0.15));\n}\n\n/* ============================================\n Disabled State Utility\n ============================================ */\n.oc-disabled,\n[disabled] {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ============================================\n Loading State Utility\n ============================================ */\n.oc-loading {\n cursor: wait;\n pointer-events: none;\n}\n\n.oc-loading > * {\n opacity: var(--oc-opacity-loading, 0.7);\n}\n\n/* ============================================\n Shared Keyframe Animations\n ============================================ */\n\n/* Spinner rotation - used by Button, IconButton, Progress, SearchInput */\n@keyframes oc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Fade in with slight scale - used by Modal, Tooltip, Popover */\n@keyframes oc-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* Fade out with slight scale */\n@keyframes oc-fade-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* Slide up fade - used by chat messages, toasts */\n@keyframes oc-slide-up-fade {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Slide down fade - for dropdowns */\n@keyframes oc-slide-down-fade {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Pulse animation - for skeleton loading, thinking indicators */\n@keyframes oc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Bounce animation - for typing indicators */\n@keyframes oc-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-8px);\n }\n}\n\n/* Shimmer animation - for skeleton loading */\n@keyframes oc-shimmer {\n from { transform: translateX(-100%); }\n to { transform: translateX(100%); }\n}\n\n/* ============================================\n Transition Utilities\n ============================================ */\n.oc-transition-fast {\n transition-duration: var(--oc-duration-fast, 0.15s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-normal {\n transition-duration: var(--oc-duration-normal, 0.25s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-slow {\n transition-duration: var(--oc-duration-slow, 0.4s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-spring {\n transition-timing-function: var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1));\n}\n\n/* ============================================\n Flexbox Utilities\n ============================================ */\n.oc-flex-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-flex-between {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.oc-flex-start {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n/* ============================================\n Text Utilities\n ============================================ */\n.oc-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.oc-line-clamp-2 {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ============================================\n Accessibility: Reduced Motion\n ============================================ */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* ============================================\n Screen Reader Only\n ============================================ */\n.oc-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* ============================================\n Premium Polish Effects\n ============================================ */\n\n/* Frosted glass overlay effect */\n.oc-frosted {\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n}\n\n.oc-frosted-light {\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n}\n\n/* Interactive lift effect on hover */\n.oc-lift {\n transition: transform var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-lift:hover {\n transform: translateY(-2px);\n}\n\n/* Press effect */\n.oc-press:active {\n transform: translateY(1px);\n}\n\n/* Focus glow effect for inputs */\n.oc-focus-glow-input:focus-within {\n box-shadow: var(--oc-shadow-inner, inset 0 1px 2px rgba(15, 23, 42, 0.03)),\n 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Smooth color transitions */\n.oc-color-transition {\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n/* ============================================\n Typography Polish\n ============================================ */\n\n/* Professional font feature settings */\n.oc-text {\n font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Heading typography - tighter letter-spacing for polish */\n.oc-heading {\n font-feature-settings: 'kern' 1, 'liga' 1;\n letter-spacing: -0.02em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Small caps for labels */\n.oc-label {\n font-feature-settings: 'kern' 1, 'smcp' 1;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n\n/* Tabular numbers for data */\n.oc-tabular {\n font-feature-settings: 'tnum' 1, 'kern' 1;\n}\n\n/* ============================================\n Staggered List Animations\n ============================================ */\n\n/* Base stagger animation */\n@keyframes oc-stagger-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Stagger animation utilities - apply to list items */\n.oc-stagger > * {\n animation: oc-stagger-in var(--oc-duration-normal, 0.25s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger > *:nth-child(6) { animation-delay: 250ms; }\n.oc-stagger > *:nth-child(7) { animation-delay: 300ms; }\n.oc-stagger > *:nth-child(8) { animation-delay: 350ms; }\n.oc-stagger > *:nth-child(9) { animation-delay: 400ms; }\n.oc-stagger > *:nth-child(10) { animation-delay: 450ms; }\n\n/* Fast stagger (25ms intervals) */\n.oc-stagger-fast > * {\n animation: oc-stagger-in var(--oc-duration-fast, 0.15s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger-fast > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-fast > *:nth-child(2) { animation-delay: 25ms; }\n.oc-stagger-fast > *:nth-child(3) { animation-delay: 50ms; }\n.oc-stagger-fast > *:nth-child(4) { animation-delay: 75ms; }\n.oc-stagger-fast > *:nth-child(5) { animation-delay: 100ms; }\n.oc-stagger-fast > *:nth-child(6) { animation-delay: 125ms; }\n.oc-stagger-fast > *:nth-child(7) { animation-delay: 150ms; }\n.oc-stagger-fast > *:nth-child(8) { animation-delay: 175ms; }\n.oc-stagger-fast > *:nth-child(9) { animation-delay: 200ms; }\n.oc-stagger-fast > *:nth-child(10) { animation-delay: 225ms; }\n\n/* Scale stagger - for cards/grid items */\n@keyframes oc-stagger-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.oc-stagger-scale > * {\n animation: oc-stagger-scale-in var(--oc-duration-normal, 0.25s) var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;\n}\n\n.oc-stagger-scale > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-scale > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger-scale > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger-scale > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger-scale > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger-scale > *:nth-child(6) { animation-delay: 250ms; }\n\n\n\n/* AppShell - Main Application Container */\n.oc-app-shell {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n background: var(--oc-bg-canvas);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-app-shell--fixed {\n height: 100vh;\n overflow: hidden;\n}\n\n/* AppShell Sidebar */\n.oc-app-shell-sidebar {\n --sidebar-width: 260px;\n position: relative;\n width: var(--sidebar-width);\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-surface);\n transition: width var(--oc-duration-normal) var(--oc-easing-default),\n margin var(--oc-duration-normal) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-app-shell-sidebar--bordered {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-sidebar--closed {\n width: 0;\n margin-left: calc(var(--sidebar-width) * -1);\n}\n\n.oc-app-shell-sidebar__content {\n width: var(--sidebar-width);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* AppShell Main */\n.oc-app-shell-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n background: var(--oc-bg-canvas);\n}\n\n/* AppShell Header */\n.oc-app-shell-header {\n --header-height: 56px;\n height: var(--header-height);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: 0 var(--oc-spacing-lg);\n background: var(--oc-bg-canvas);\n}\n\n.oc-app-shell-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-header--fixed {\n position: sticky;\n top: 0;\n z-index: var(--oc-z-sticky);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n background: rgba(255, 255, 255, 0.9);\n}\n\n/* Layout composition helpers */\n.oc-app-shell > .oc-app-shell-header {\n order: -1;\n}\n\n/* Horizontal layout for sidebar + main */\n.oc-app-shell:has(.oc-app-shell-sidebar) {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.oc-app-shell:has(.oc-app-shell-sidebar) > .oc-app-shell-header {\n width: 100%;\n flex-basis: 100%;\n}\n\n/* Dark sidebar variant */\n.oc-app-shell-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n border-right-color: rgba(255, 255, 255, 0.1);\n}\n\n\n\n/* PageHeader Component */\n.oc-page-header {\n padding: var(--oc-spacing-lg) var(--oc-spacing-xl);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Breadcrumbs */\n.oc-page-header__breadcrumbs {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-breadcrumbs {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--oc-spacing-xs);\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-breadcrumbs__item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-breadcrumbs__separator {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-breadcrumbs__link {\n color: var(--oc-fg-secondary);\n text-decoration: none;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n padding: 2px 0;\n}\n\n.oc-breadcrumbs__link:hover {\n color: var(--oc-accent);\n}\n\n.oc-breadcrumbs__current {\n color: var(--oc-fg-primary);\n font-weight: 500;\n}\n\n/* Header Row */\n.oc-page-header__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-lg);\n}\n\n.oc-page-header__content {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-md);\n min-width: 0;\n flex: 1;\n}\n\n.oc-page-header__back {\n flex-shrink: 0;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n margin-top: 2px;\n}\n\n.oc-page-header__back:hover {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n color: var(--oc-fg-primary);\n}\n\n.oc-page-header__text {\n min-width: 0;\n}\n\n.oc-page-header__title {\n margin: 0;\n font-size: var(--oc-font-size-2xl);\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-page-header__subtitle {\n margin: var(--oc-spacing-xs) 0 0;\n font-size: var(--oc-font-size-md);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-page-header__actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n}\n\n/* Tabs */\n.oc-page-header__tabs {\n margin-top: var(--oc-spacing-lg);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* Compact variant */\n.oc-page-header--compact {\n padding: var(--oc-spacing-md) var(--oc-spacing-lg);\n}\n\n.oc-page-header--compact .oc-page-header__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Bordered variant */\n.oc-page-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* With accent bar */\n.oc-page-header--accent {\n position: relative;\n}\n\n.oc-page-header--accent::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--oc-accent);\n}\n\n\n\n/* SplitPane Component */\n.oc-split-pane {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-split-pane--horizontal {\n flex-direction: row;\n}\n\n.oc-split-pane--vertical {\n flex-direction: column;\n}\n\n.oc-split-pane--dragging {\n user-select: none;\n}\n\n/* Panes */\n.oc-split-pane__pane {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.oc-split-pane__pane--first {\n flex-shrink: 0;\n}\n\n.oc-split-pane__pane--second {\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n\n/* Handle */\n.oc-split-pane__handle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal > .oc-split-pane__handle {\n width: 8px;\n cursor: col-resize;\n}\n\n.oc-split-pane--vertical > .oc-split-pane__handle {\n height: 8px;\n cursor: row-resize;\n}\n\n.oc-split-pane__handle:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n}\n\n.oc-split-pane__handle-bar {\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal .oc-split-pane__handle-bar {\n width: 2px;\n height: 32px;\n}\n\n.oc-split-pane--vertical .oc-split-pane__handle-bar {\n height: 2px;\n width: 32px;\n}\n\n.oc-split-pane__handle:hover .oc-split-pane__handle-bar,\n.oc-split-pane--dragging .oc-split-pane__handle-bar {\n background: var(--oc-accent);\n}\n\n/* Generic Pane */\n.oc-pane {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Panel with header pattern */\n.oc-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-panel__header {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm, 8px) var(--oc-spacing-md, 16px);\n border-bottom: 1px solid var(--oc-border-default, #E5E5E5);\n min-height: 48px;\n}\n\n.oc-panel__title {\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-panel__content {\n flex: 1;\n overflow: auto;\n}\n\n\n\n/* Stack Component */\n.oc-stack {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Spacer */\n.oc-spacer {\n flex: 1;\n}\n\n/* Divider */\n.oc-divider {\n flex-shrink: 0;\n background: var(--oc-border-default, #E5E5E5);\n}\n\n.oc-divider--horizontal {\n height: 1px;\n width: 100%;\n}\n\n.oc-divider--vertical {\n width: 1px;\n align-self: stretch;\n}\n\n/* Box - generic container with padding */\n.oc-box {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-box--padding-none { padding: 0; }\n.oc-box--padding-xs { padding: var(--oc-spacing-xs, 4px); }\n.oc-box--padding-sm { padding: var(--oc-spacing-sm, 8px); }\n.oc-box--padding-md { padding: var(--oc-spacing-md, 16px); }\n.oc-box--padding-lg { padding: var(--oc-spacing-lg, 24px); }\n.oc-box--padding-xl { padding: var(--oc-spacing-xl, 32px); }\n\n/* Center - center content both ways */\n.oc-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Container - max-width constrained container */\n.oc-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--oc-spacing-md, 16px);\n padding-right: var(--oc-spacing-md, 16px);\n}\n\n.oc-container--sm { max-width: 640px; }\n.oc-container--md { max-width: 768px; }\n.oc-container--lg { max-width: 1024px; }\n.oc-container--xl { max-width: 1280px; }\n.oc-container--full { max-width: 100%; }\n\n\n\n/* ScrollArea Component */\n.oc-scroll-area {\n position: relative;\n overflow: hidden;\n}\n\n/* Scroll behavior */\n.oc-scroll-area--vertical {\n overflow-y: auto;\n}\n\n.oc-scroll-area--horizontal {\n overflow-x: auto;\n}\n\n.oc-scroll-area--vertical.oc-scroll-area--horizontal {\n overflow: auto;\n}\n\n/* Type variants */\n.oc-scroll-area--auto {\n overflow-y: auto;\n}\n\n.oc-scroll-area--always {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--scroll {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--hover {\n overflow-y: hidden;\n}\n\n.oc-scroll-area--hover:hover {\n overflow-y: auto;\n}\n\n/* Custom styled scrollbars */\n.oc-scroll-area--styled {\n scrollbar-width: thin;\n scrollbar-color: var(--oc-border-strong, #CCCCCC) transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb {\n background: var(--oc-border-strong, #CCCCCC);\n border-radius: 4px;\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb:hover {\n background: var(--oc-fg-tertiary, #9B9B9B);\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n/* Thin scrollbar variant */\n.oc-scroll-area--thin::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n/* Dark mode scrollbar */\n.oc-scroll-area--dark {\n scrollbar-color: rgba(255, 255, 255, 0.3) transparent;\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.3);\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.5);\n}\n\n\n\n/* Card Component */\n.oc-card {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Variants */\n.oc-card--elevated {\n box-shadow: var(--oc-shadow-md);\n}\n\n.oc-card--flat {\n box-shadow: none;\n}\n\n.oc-card--outlined {\n box-shadow: none;\n border: 1px solid var(--oc-border-default);\n}\n\n/* Padding */\n.oc-card--padding-none {\n padding: 0;\n}\n\n.oc-card--padding-sm {\n padding: var(--oc-spacing-sm);\n}\n\n.oc-card--padding-md {\n padding: var(--oc-spacing-md);\n}\n\n.oc-card--padding-lg {\n padding: var(--oc-spacing-lg);\n}\n\n/* Interactive */\n.oc-card--interactive {\n cursor: pointer;\n transition: box-shadow var(--oc-duration-fast) var(--oc-easing-default),\n transform var(--oc-duration-fast) var(--oc-easing-default),\n border-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-card--interactive:hover {\n box-shadow: var(--oc-shadow-lg);\n transform: translateY(-2px);\n}\n\n.oc-card--interactive.oc-card--outlined:hover {\n border-color: var(--oc-border-strong);\n}\n\n.oc-card--interactive:active {\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Card Header */\n.oc-card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-card-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-card-header__title {\n font-size: var(--oc-font-size-lg);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-card-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-card-header__action {\n flex-shrink: 0;\n}\n\n/* Card Body */\n.oc-card-body {\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Card Footer */\n.oc-card-footer {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n margin-top: var(--oc-spacing-md);\n padding-top: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n}\n\n\n\n/* Sidebar Component */\n.oc-sidebar {\n display: flex;\n flex-direction: column;\n width: 260px;\n height: 100%;\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: width var(--oc-duration-normal) var(--oc-easing-default);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-sidebar--collapsed {\n width: 64px;\n}\n\n/* Sidebar Header */\n.oc-sidebar-header {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n min-height: 56px;\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-sidebar-header__logo {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-accent);\n border-radius: var(--oc-radius-md);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-header__title {\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-primary);\n}\n\n/* Sidebar Nav */\n.oc-sidebar-nav {\n flex: 1;\n overflow-y: auto;\n padding: var(--oc-spacing-sm);\n}\n\n/* Sidebar Section */\n.oc-sidebar-section {\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-sidebar-section:first-child {\n margin-top: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__title {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary);\n padding: var(--oc-spacing-sm);\n margin-bottom: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__items {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n/* Sidebar Item */\n.oc-sidebar-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: 8px 12px;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n position: relative;\n}\n\n.oc-sidebar-item:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active:hover {\n background: var(--oc-accent-hover);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-sidebar-item--disabled:hover {\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-sidebar-item__icon {\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon,\n.oc-sidebar-item--active:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item__label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-sidebar-item__badge {\n flex-shrink: 0;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__badge {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* Sidebar Footer */\n.oc-sidebar-footer {\n padding: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n margin-top: auto;\n}\n\n/* Dark variant */\n.oc-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-header {\n border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.oc-sidebar--dark .oc-sidebar-header__title {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-section__title {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.oc-sidebar--dark .oc-sidebar-item {\n color: rgba(255, 255, 255, 0.7);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover {\n background: rgba(255, 255, 255, 0.08);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.9);\n}\n\n.oc-sidebar--dark .oc-sidebar-footer {\n border-top-color: rgba(255, 255, 255, 0.1);\n}\n\n\n\n /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVBAR - Top Navigation Bar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n .oc-navbar {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n padding: 12px 24px;\n background: var(--oc-bg-sidebar, #0F172A);\n color: white;\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n }\n\n .oc-navbar__left {\n display: flex;\n align-items: center;\n gap: 32px;\n }\n\n /* Brand */\n .oc-navbar__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n color: white;\n }\n\n .oc-navbar__logo {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oc-navbar__brand-name {\n font-weight: 600;\n font-size: 15px;\n white-space: nowrap;\n }\n\n .oc-navbar__version.oc-chip {\n --chip-bg: rgba(255, 255, 255, 0.1);\n --chip-border: rgba(255, 255, 255, 0.2);\n --chip-text: rgba(255, 255, 255, 0.8);\n }\n\n /* Desktop Navigation */\n .oc-navbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .oc-navbar__link {\n padding: 8px 12px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n border-radius: 6px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Right Side */\n .oc-navbar__right {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .oc-navbar__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n /* User Dropdown */\n .oc-navbar-user {\n position: relative;\n }\n\n .oc-navbar-user__trigger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px 6px 6px;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .oc-navbar-user__trigger:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar-user__name {\n font-size: 14px;\n font-weight: 500;\n }\n\n .oc-navbar-user__chevron {\n transition: transform 0.2s ease;\n opacity: 0.7;\n }\n\n .oc-navbar-user__chevron--open {\n transform: rotate(180deg);\n }\n\n .oc-navbar-user__backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--oc-z-dropdown, 100);\n }\n\n .oc-navbar-user__menu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n min-width: 180px;\n padding: 6px;\n background: var(--oc-bg-surface, white);\n border-radius: 10px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n z-index: calc(var(--oc-z-dropdown, 100) + 1);\n animation: oc-navbar-dropdown-slide 0.15s ease;\n }\n\n @keyframes oc-navbar-dropdown-slide {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .oc-navbar-user__item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 12px;\n background: transparent;\n border: none;\n border-radius: 6px;\n color: var(--oc-fg-secondary, #475569);\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .oc-navbar-user__item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n }\n\n .oc-navbar-user__item--danger {\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item--danger:hover {\n background: var(--oc-error-bg, #FEF2F2);\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n }\n\n .oc-navbar-user__divider {\n height: 1px;\n margin: 6px 0;\n background: var(--oc-border-default, #E2E8F0);\n }\n\n /* Mobile Menu Toggle */\n .oc-navbar__mobile-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: none;\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .oc-navbar__mobile-toggle:hover {\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Mobile Menu */\n .oc-navbar__mobile-menu {\n display: none;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 16px 0 8px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin-top: 12px;\n }\n\n .oc-navbar__mobile-link {\n padding: 12px 16px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n border-radius: 8px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__mobile-link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__mobile-link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Responsive */\n @media (max-width: 1100px) {\n .oc-navbar__nav {\n display: none;\n }\n\n .oc-navbar__mobile-toggle {\n display: flex;\n }\n\n .oc-navbar__mobile-menu {\n display: flex;\n }\n }\n\n @media (max-width: 768px) {\n .oc-navbar {\n padding: 12px 16px;\n }\n\n .oc-navbar-user__name,\n .oc-navbar-user__chevron {\n display: none;\n }\n\n .oc-navbar-user__trigger {\n padding: 4px;\n }\n\n .oc-navbar__version {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .oc-navbar__brand-name {\n display: none;\n }\n }\n\n\n\n/* Modal Overlay */\n.oc-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--oc-spacing-md);\n z-index: var(--oc-z-modal);\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Modal */\n.oc-modal {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-xl);\n max-height: calc(100vh - 32px);\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-normal) var(--oc-easing-spring);\n}\n\n/* Modal Sizes */\n.oc-modal--sm { width: 100%; max-width: 400px; }\n.oc-modal--md { width: 100%; max-width: 500px; }\n.oc-modal--lg { width: 100%; max-width: 640px; }\n.oc-modal--xl { width: 100%; max-width: 800px; }\n.oc-modal--full { width: 100%; max-width: calc(100vw - 32px); height: calc(100vh - 32px); }\n\n/* Modal Header */\n.oc-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-lg);\n padding-bottom: 0;\n}\n\n.oc-modal-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-modal-header__title {\n font-size: var(--oc-font-size-xl);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-modal-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n/* Close Button */\n.oc-modal-close {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: background var(--oc-duration-fast) var(--oc-easing-default),\n color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-modal-close:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n/* Modal Body */\n.oc-modal-body {\n flex: 1;\n padding: var(--oc-spacing-lg);\n overflow-y: auto;\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Modal Footer */\n.oc-modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n padding-top: 0;\n}\n\n\n\n/* Tooltip Trigger */\n.oc-tooltip-trigger {\n display: inline-flex;\n}\n\n/* Tooltip */\n.oc-tooltip {\n position: absolute;\n z-index: var(--oc-z-tooltip);\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: var(--oc-font-size-xs);\n border-radius: var(--oc-radius-md);\n white-space: nowrap;\n pointer-events: none;\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Placement */\n.oc-tooltip--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-tooltip--bottom {\n transform: translateX(-50%);\n}\n\n.oc-tooltip--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-tooltip--right {\n transform: translateY(-50%);\n}\n\n\n\n/* Popover Trigger */\n.oc-popover-trigger {\n display: inline-flex;\n}\n\n/* Popover */\n.oc-popover {\n position: absolute;\n z-index: var(--oc-z-popover, 1000);\n min-width: 200px;\n padding: var(--oc-spacing-md);\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.1));\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-popover-fade-in 0.15s ease-out;\n}\n\n@keyframes oc-popover-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Placement */\n.oc-popover--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-popover--bottom {\n transform: translateX(-50%);\n}\n\n.oc-popover--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-popover--right {\n transform: translateY(-50%);\n}\n\n\n\n/* Avatar Component */\n.oc-avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: linear-gradient(135deg, #E5E5E5 0%, #D4D4D4 100%);\n color: var(--oc-fg-secondary, #6B6B6B);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 600;\n overflow: hidden;\n flex-shrink: 0;\n user-select: none;\n}\n\n.oc-avatar--square {\n border-radius: var(--oc-radius-md, 8px);\n}\n\n/* Sizes */\n.oc-avatar--xs { font-size: 10px; }\n.oc-avatar--sm { font-size: 12px; }\n.oc-avatar--md { font-size: 14px; }\n.oc-avatar--lg { font-size: 16px; }\n.oc-avatar--xl { font-size: 20px; }\n\n/* Accent variant (for AI/system) */\n.oc-avatar--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n/* Image */\n.oc-avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Fallback */\n.oc-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n/* Status indicator */\n.oc-avatar__status {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 25%;\n height: 25%;\n min-width: 8px;\n min-height: 8px;\n border-radius: 50%;\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n.oc-avatar__status--online {\n background: var(--oc-success, #10B981);\n}\n\n.oc-avatar__status--offline {\n background: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-avatar__status--busy {\n background: var(--oc-error, #EF4444);\n}\n\n.oc-avatar__status--away {\n background: var(--oc-warning, #F59E0B);\n}\n\n/* AI Avatar */\n.oc-avatar--ai {\n background: var(--oc-accent);\n animation: oc-avatar-ai-pulse 3s ease-in-out infinite;\n}\n\n@keyframes oc-avatar-ai-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(8, 145, 178, 0);\n }\n}\n\n.oc-avatar__ai-icon {\n width: 60%;\n height: 60%;\n}\n\n/* Avatar Group */\n.oc-avatar-group {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-avatar-group__item {\n margin-left: -8px;\n}\n\n.oc-avatar-group__item:first-child {\n margin-left: 0;\n}\n\n.oc-avatar-group__item .oc-avatar {\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n\n\n/* Chip Component */\n.oc-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-chip--static {\n cursor: default;\n}\n\n/* Sizes */\n.oc-chip--sm {\n height: 24px;\n padding: 0 10px;\n font-size: 12px;\n}\n\n.oc-chip--md {\n height: 32px;\n padding: 0 14px;\n font-size: 13px;\n}\n\n.oc-chip--lg {\n height: 40px;\n padding: 0 18px;\n font-size: 14px;\n}\n\n/* Icons */\n.oc-chip__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-chip--sm .oc-chip__icon { margin-left: -2px; }\n.oc-chip--md .oc-chip__icon { margin-left: -4px; }\n.oc-chip--lg .oc-chip__icon { margin-left: -4px; }\n\n.oc-chip__icon--end {\n margin-left: 0 !important;\n}\n\n.oc-chip--sm .oc-chip__icon--end { margin-right: -2px; }\n.oc-chip--md .oc-chip__icon--end { margin-right: -4px; }\n.oc-chip--lg .oc-chip__icon--end { margin-right: -4px; }\n\n/* Label */\n.oc-chip__label {\n display: flex;\n align-items: center;\n}\n\n/* Remove button */\n.oc-chip__remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin-left: 2px;\n border: none;\n background: transparent;\n color: inherit;\n opacity: 0.6;\n cursor: pointer;\n border-radius: 50%;\n transition: opacity 0.15s ease, background 0.15s ease;\n}\n\n.oc-chip--sm .oc-chip__remove { margin-right: -4px; width: 16px; height: 16px; }\n.oc-chip--md .oc-chip__remove { margin-right: -6px; width: 20px; height: 20px; }\n.oc-chip--lg .oc-chip__remove { margin-right: -6px; width: 24px; height: 24px; }\n\n.oc-chip__remove:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n/* ========== VARIANTS ========== */\n\n/* Filled */\n.oc-chip--filled.oc-chip--default {\n background: var(--oc-fg-primary, #1A1A1A);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chip--filled.oc-chip--success {\n background: linear-gradient(135deg, var(--oc-success, #10B981) 0%, #059669 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--warning {\n background: linear-gradient(135deg, var(--oc-warning, #F59E0B) 0%, #D97706 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--error {\n background: linear-gradient(135deg, var(--oc-error, #EF4444) 0%, #DC2626 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--info {\n background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);\n color: white;\n}\n\n/* Soft */\n.oc-chip--soft.oc-chip--default {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chip--soft.oc-chip--accent {\n background: rgba(8, 145, 178, 0.1);\n color: var(--oc-accent);\n}\n\n.oc-chip--soft.oc-chip--success {\n background: var(--oc-success-bg, #ECFDF5);\n color: #059669;\n}\n\n.oc-chip--soft.oc-chip--warning {\n background: var(--oc-warning-bg, #FFFBEB);\n color: #B45309;\n}\n\n.oc-chip--soft.oc-chip--error {\n background: var(--oc-error-bg, #FEF2F2);\n color: #DC2626;\n}\n\n.oc-chip--soft.oc-chip--info {\n background: #EFF6FF;\n color: #2563EB;\n}\n\n/* Outlined */\n.oc-chip--outlined {\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E5E5E5);\n}\n\n.oc-chip--outlined.oc-chip--default {\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n.oc-chip--outlined.oc-chip--accent {\n box-shadow: inset 0 0 0 1px var(--oc-accent);\n color: var(--oc-accent);\n}\n\n.oc-chip--outlined.oc-chip--success {\n box-shadow: inset 0 0 0 1px var(--oc-success, #10B981);\n color: #059669;\n}\n\n.oc-chip--outlined.oc-chip--warning {\n box-shadow: inset 0 0 0 1px var(--oc-warning, #F59E0B);\n color: #B45309;\n}\n\n.oc-chip--outlined.oc-chip--error {\n box-shadow: inset 0 0 0 1px var(--oc-error, #EF4444);\n color: #DC2626;\n}\n\n.oc-chip--outlined.oc-chip--info {\n box-shadow: inset 0 0 0 1px #3B82F6;\n color: #2563EB;\n}\n\n/* Hover states */\n.oc-chip:not(.oc-chip--static):hover {\n transform: translateY(-1px);\n}\n\n.oc-chip--soft:not(.oc-chip--static):hover {\n filter: brightness(0.95);\n}\n\n.oc-chip--outlined:not(.oc-chip--static):hover {\n background: var(--oc-bg-surface, #F8F8F8);\n}\n\n.oc-chip--filled:not(.oc-chip--static):hover {\n filter: brightness(1.05);\n}\n\n/* Selected state */\n.oc-chip--selected {\n box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2);\n}\n\n/* Active state */\n.oc-chip:not(.oc-chip--static):active {\n transform: translateY(0);\n}\n\n/* Chip Group */\n.oc-chip-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n\n.oc-chip-group--gap-sm {\n gap: 6px;\n}\n\n.oc-chip-group--gap-md {\n gap: 10px;\n}\n\n\n\n/* Source Card */\n.oc-source-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-lg, 12px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: all 0.15s ease;\n}\n\n.oc-source-card--clickable {\n cursor: pointer;\n}\n\n.oc-source-card--clickable:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n}\n\n.oc-source-card--inline {\n padding: 8px 12px;\n display: inline-flex;\n gap: 8px;\n}\n\n/* Document icon */\n.oc-source__icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 8px);\n background: linear-gradient(135deg, var(--icon-color, #6B6B6B) 0%, color-mix(in srgb, var(--icon-color, #6B6B6B), black 20%) 100%);\n color: white;\n position: relative;\n}\n\n.oc-source-card--inline .oc-source__icon {\n width: 32px;\n height: 32px;\n}\n\n.oc-source__icon svg {\n opacity: 0.3;\n}\n\n.oc-source__icon-label {\n position: absolute;\n font-size: 8px;\n font-weight: 700;\n letter-spacing: 0.05em;\n}\n\n/* Content */\n.oc-source-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-source-card__header {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-source-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-card__ref {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n white-space: nowrap;\n}\n\n.oc-source-card__excerpt {\n margin: 6px 0 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Score */\n.oc-source-card__score {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n}\n\n.oc-source-card__score-bar {\n width: 40px;\n height: 4px;\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-source-card__score-bar::after {\n content: '';\n display: block;\n width: var(--score, 0%);\n height: 100%;\n background: var(--oc-accent);\n border-radius: 2px;\n}\n\n.oc-source-card__score-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Arrow */\n.oc-source-card__arrow {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.15s ease;\n}\n\n.oc-source-card--clickable:hover .oc-source-card__arrow {\n transform: translateX(2px);\n color: var(--oc-accent);\n}\n\n/* Source Pill */\n.oc-source-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 28px;\n padding: 0 10px;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E5E5E5);\n border-radius: var(--oc-radius-md, 8px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-source-pill:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n border-color: var(--pill-color, var(--oc-border-strong, #CCCCCC));\n}\n\n.oc-source-pill__icon {\n display: flex;\n color: var(--pill-color, var(--oc-fg-tertiary, #9B9B9B));\n}\n\n.oc-source-pill__name {\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n max-width: 120px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-pill__ref {\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-weight: 400;\n}\n\n/* Source List */\n.oc-source-list {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-source-list__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.oc-source-list__title {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #6B6B6B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-source-list__count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-source-list__items {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n/* Citation marker */\n.oc-citation {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n margin: 0 2px;\n background: var(--oc-accent);\n color: white;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n font-weight: 600;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n transition: all 0.15s ease;\n box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);\n}\n\n.oc-citation:hover {\n transform: scale(1.1);\n box-shadow: 0 2px 6px rgba(8, 145, 178, 0.4);\n}\n\n\n\n/* ============ Chat Container ============ */\n.oc-chat-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n/* ============ Chat Message ============ */\n.oc-chat-message {\n display: flex;\n gap: 12px;\n max-width: 100%;\n animation: oc-message-in 0.3s ease;\n}\n\n@keyframes oc-message-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-chat-message__avatar {\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.oc-chat-message__container {\n flex: 1;\n min-width: 0;\n max-width: 720px;\n}\n\n/* User messages */\n.oc-chat-message--user {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message--user .oc-chat-message__container {\n align-items: flex-end;\n display: flex;\n flex-direction: column;\n}\n\n/* Header */\n.oc-chat-message__header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-chat-message--user .oc-chat-message__header {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message__name {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Bubble */\n.oc-chat-message__bubble {\n position: relative;\n padding: 14px 18px;\n border-radius: 18px;\n line-height: 1.6;\n}\n\n.oc-chat-message--assistant .oc-chat-message__bubble {\n background: var(--oc-bg-surface, #F8F8F8);\n border-top-left-radius: 4px;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message--user .oc-chat-message__bubble {\n background: var(--oc-accent);\n border-top-right-radius: 4px;\n color: white;\n box-shadow: 0 2px 12px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chat-message--system .oc-chat-message__bubble {\n background: transparent;\n padding: 8px 0;\n text-align: center;\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-size: 13px;\n}\n\n.oc-chat-message__content {\n font-size: 15px;\n}\n\n.oc-chat-message__content p {\n margin: 0 0 12px;\n}\n\n.oc-chat-message__content p:last-child {\n margin-bottom: 0;\n}\n\n/* Streaming cursor */\n.oc-chat-message__cursor {\n display: inline-block;\n width: 2px;\n height: 1.1em;\n background: var(--oc-accent);\n margin-left: 2px;\n vertical-align: text-bottom;\n animation: oc-cursor-blink 1s ease infinite;\n}\n\n@keyframes oc-cursor-blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\n/* Actions */\n.oc-chat-message__actions {\n margin-top: 8px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-chat-message:hover .oc-chat-message__actions {\n opacity: 1;\n}\n\n/* Error state */\n.oc-chat-message__error {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n font-size: 13px;\n color: var(--oc-error, #EF4444);\n}\n\n/* ============ Typing Indicator ============ */\n.oc-typing-indicator {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0;\n}\n\n.oc-typing-indicator__dots {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: 18px;\n border-top-left-radius: 4px;\n}\n\n.oc-typing-indicator__dot {\n width: 8px;\n height: 8px;\n background: var(--oc-fg-tertiary, #9B9B9B);\n border-radius: 50%;\n animation: oc-typing-bounce 1.4s ease infinite;\n}\n\n.oc-typing-indicator__dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.oc-typing-indicator__dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n@keyframes oc-typing-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n background: var(--oc-fg-tertiary);\n }\n 30% {\n transform: translateY(-8px);\n background: var(--oc-accent);\n }\n}\n\n.oc-typing-indicator__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n/* ============ Thinking Block ============ */\n.oc-thinking-block {\n background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(8, 145, 178, 0.02) 100%);\n border: 1px solid rgba(8, 145, 178, 0.15);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n margin: 12px 0;\n}\n\n.oc-thinking-block__header {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n text-align: left;\n}\n\n.oc-thinking-block__indicator {\n display: flex;\n gap: 3px;\n}\n\n.oc-thinking-block__dot {\n width: 6px;\n height: 6px;\n background: var(--oc-accent);\n border-radius: 50%;\n animation: oc-thinking-pulse 1.5s ease infinite;\n}\n\n.oc-thinking-block__dot:nth-child(2) { animation-delay: 0.3s; }\n.oc-thinking-block__dot:nth-child(3) { animation-delay: 0.6s; }\n\n@keyframes oc-thinking-pulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.2); }\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__dot {\n animation: none;\n opacity: 0.5;\n}\n\n.oc-thinking-block__title {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent);\n}\n\n.oc-thinking-block__chevron {\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.2s ease;\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__chevron {\n transform: rotate(180deg);\n}\n\n.oc-thinking-block__content {\n padding: 0 16px 16px;\n font-size: 13px;\n color: var(--oc-fg-secondary);\n line-height: 1.6;\n border-top: 1px solid rgba(8, 145, 178, 0.1);\n margin-top: 0;\n padding-top: 12px;\n}\n\n/* ============ Task Card ============ */\n.oc-task-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n border-left: 3px solid var(--oc-border-default);\n}\n\n.oc-task-card--running {\n border-left-color: var(--oc-accent);\n background: linear-gradient(90deg, rgba(8, 145, 178, 0.05) 0%, var(--oc-bg-surface) 100%);\n}\n\n.oc-task-card--completed {\n border-left-color: var(--oc-success, #10B981);\n}\n\n.oc-task-card--error {\n border-left-color: var(--oc-error, #EF4444);\n}\n\n.oc-task-card__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-task-card--pending .oc-task-card__icon { color: var(--oc-fg-tertiary); }\n.oc-task-card--running .oc-task-card__icon { color: var(--oc-accent); }\n.oc-task-card--completed .oc-task-card__icon { color: var(--oc-success); }\n.oc-task-card--error .oc-task-card__icon { color: var(--oc-error); }\n\n.oc-task-card__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(8, 145, 178, 0.2);\n border-top-color: var(--oc-accent);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n@keyframes oc-spin {\n to { transform: rotate(360deg); }\n}\n\n.oc-task-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-task-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-task-card__desc {\n font-size: 13px;\n color: var(--oc-fg-secondary);\n margin-top: 2px;\n}\n\n.oc-task-card__progress {\n margin-top: 8px;\n height: 4px;\n background: var(--oc-border-default);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-task-card__progress-bar {\n height: 100%;\n width: var(--progress, 0%);\n background: var(--oc-accent);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* ============ Message Actions ============ */\n.oc-message-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-action-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-action-button:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n}\n\n.oc-action-button--active {\n color: var(--oc-accent);\n}\n\n.oc-action-button--active:hover {\n color: var(--oc-accent);\n background: rgba(8, 145, 178, 0.1);\n}\n\n/* ============ Chat Input ============ */\n.oc-chat-input {\n flex-shrink: 0;\n padding: 16px 24px 24px;\n background: var(--oc-bg-canvas);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-chat-input__suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.oc-chat-input__container {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface);\n border-radius: 24px;\n border: 1px solid transparent;\n transition: all 0.2s ease;\n}\n\n.oc-chat-input__container:focus-within {\n background: var(--oc-bg-canvas);\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-chat-input__left,\n.oc-chat-input__right {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-chat-input__textarea {\n flex: 1;\n min-height: 24px;\n max-height: 200px;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n line-height: 1.5;\n color: var(--oc-fg-primary);\n resize: none;\n outline: none;\n}\n\n.oc-chat-input__textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-chat-input__send {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: var(--oc-accent);\n color: white;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n.oc-chat-input__send:hover:not(:disabled) {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4);\n}\n\n.oc-chat-input__send:disabled {\n background: var(--oc-border-default);\n color: var(--oc-fg-tertiary);\n box-shadow: none;\n cursor: not-allowed;\n}\n\n.oc-chat-input__spinner {\n width: 18px;\n height: 18px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n/* Loading state */\n.oc-chat-input--loading .oc-chat-input__container {\n opacity: 0.7;\n}\n\n\n\n/* Button */\n.oc-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--oc-spacing-sm);\n border: none;\n border-radius: var(--oc-radius-md);\n font-family: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n text-decoration: none;\n white-space: nowrap;\n}\n\n.oc-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Sizes */\n.oc-button--sm {\n height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-button--md {\n height: 36px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-button--lg {\n height: 44px;\n padding: 0 var(--oc-spacing-lg);\n font-size: var(--oc-font-size-md);\n}\n\n/* Primary variant - flat, modern */\n.oc-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n box-shadow: var(--oc-shadow-sm);\n}\n\n.oc-button--primary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-hover);\n box-shadow: var(--oc-shadow-md);\n transform: translateY(-1px);\n}\n\n.oc-button--primary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-active);\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Secondary variant */\n.oc-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-button--secondary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-button--secondary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Ghost variant */\n.oc-button--ghost {\n background: transparent;\n color: var(--oc-fg-primary);\n}\n\n.oc-button--ghost:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n}\n\n.oc-button--ghost:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Danger variant */\n.oc-button--danger {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-button--danger:hover:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.9);\n}\n\n.oc-button--danger:active:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.85);\n}\n\n/* Link variant */\n.oc-button--link {\n background: transparent;\n color: var(--oc-accent);\n padding: 0;\n height: auto;\n}\n\n.oc-button--link:hover:not(:disabled):not(.oc-button--loading) {\n color: var(--oc-accent-hover);\n text-decoration: underline;\n}\n\n/* States */\n.oc-button--full-width {\n width: 100%;\n}\n\n.oc-button--disabled,\n.oc-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-button--loading {\n cursor: wait;\n}\n\n.oc-button--loading .oc-button__label {\n opacity: var(--oc-opacity-loading);\n}\n\n/* Button parts */\n.oc-button__spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-button__spinner-icon {\n width: 16px;\n height: 16px;\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n.oc-button__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-button__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-button--lg .oc-button__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-button__label {\n display: inline-flex;\n align-items: center;\n}\n\n/* IconButton */\n.oc-icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-icon-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* IconButton sizes */\n.oc-icon-button--sm {\n width: 28px;\n height: 28px;\n}\n\n.oc-icon-button--md {\n width: 32px;\n height: 32px;\n}\n\n.oc-icon-button--lg {\n width: 40px;\n height: 40px;\n}\n\n.oc-icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-icon-button--lg svg {\n width: 20px;\n height: 20px;\n}\n\n/* IconButton variants */\n.oc-icon-button--ghost:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-icon-button--ghost:active:not(:disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-icon-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-icon-button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover);\n}\n\n.oc-icon-button--primary:active:not(:disabled) {\n background: var(--oc-accent-active);\n}\n\n.oc-icon-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-icon-button--secondary:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-icon-button--danger {\n color: var(--oc-error);\n}\n\n.oc-icon-button--danger:hover:not(:disabled) {\n background: var(--oc-error-bg);\n}\n\n.oc-icon-button--link {\n color: var(--oc-accent);\n}\n\n.oc-icon-button--link:hover:not(:disabled) {\n color: var(--oc-accent-hover);\n}\n\n.oc-icon-button--disabled,\n.oc-icon-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-icon-button--loading {\n cursor: wait;\n}\n\n.oc-icon-button__spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* ButtonGroup */\n.oc-button-group {\n display: inline-flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-button-group--attached {\n gap: 0;\n}\n\n.oc-button-group--attached > .oc-button {\n border-radius: 0;\n}\n\n.oc-button-group--attached > .oc-button:first-child {\n border-radius: var(--oc-radius-md) 0 0 var(--oc-radius-md);\n}\n\n.oc-button-group--attached > .oc-button:last-child {\n border-radius: 0 var(--oc-radius-md) var(--oc-radius-md) 0;\n}\n\n.oc-button-group--attached > .oc-button--secondary:not(:first-child) {\n border-left: none;\n}\n\n\n\n/* Input wrapper */\n.oc-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-input-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Input container */\n.oc-input-container {\n display: flex;\n align-items: stretch;\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-input-container:focus-within {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-input-container--error {\n border-color: var(--oc-error);\n}\n\n.oc-input-container--error:focus-within {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-input-container--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-input-container--sm {\n min-height: 32px;\n}\n\n.oc-input-container--md {\n min-height: 36px;\n}\n\n.oc-input-container--lg {\n min-height: 44px;\n}\n\n/* Field wrapper */\n.oc-input-field {\n display: flex;\n align-items: center;\n flex: 1;\n position: relative;\n}\n\n/* Input element */\n.oc-input {\n flex: 1;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n padding: 0 var(--oc-spacing-sm);\n outline: none;\n}\n\n.oc-input-container--sm .oc-input {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-input-container--lg .oc-input {\n font-size: var(--oc-font-size-md);\n padding: 0 var(--oc-spacing-md);\n}\n\n.oc-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-input:disabled {\n cursor: not-allowed;\n}\n\n.oc-input--has-left-icon {\n padding-left: calc(var(--oc-spacing-sm) + 24px);\n}\n\n.oc-input--has-right-icon {\n padding-right: calc(var(--oc-spacing-sm) + 24px);\n}\n\n/* Icons */\n.oc-input-icon {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n pointer-events: none;\n}\n\n.oc-input-icon--left {\n left: var(--oc-spacing-sm);\n}\n\n.oc-input-icon--right {\n right: var(--oc-spacing-sm);\n}\n\n.oc-input-icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Addons */\n.oc-input-addon {\n display: flex;\n align-items: center;\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n border-color: inherit;\n white-space: nowrap;\n}\n\n.oc-input-addon--left {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-input-addon--right {\n border-left: 1px solid var(--oc-border-default);\n}\n\n/* Helper and error text */\n.oc-input-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-input-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Textarea wrapper */\n.oc-textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-textarea-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-textarea-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Textarea element */\n.oc-textarea {\n width: 100%;\n padding: var(--oc-spacing-sm);\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n line-height: var(--oc-line-height-normal);\n color: var(--oc-fg-primary);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n resize: vertical;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-textarea:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-textarea--error {\n border-color: var(--oc-error);\n}\n\n.oc-textarea--error:focus {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-textarea--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n resize: none;\n}\n\n.oc-textarea--auto-resize {\n resize: none;\n overflow-y: hidden;\n}\n\n/* Helper and error text */\n.oc-textarea-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-textarea-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Select wrapper */\n.oc-select-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n position: relative;\n}\n\n.oc-select-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-select-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Trigger */\n.oc-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--sm {\n min-height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-select-trigger--md {\n min-height: 36px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-select-trigger--lg {\n min-height: 44px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-md);\n}\n\n.oc-select-trigger--open {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--error {\n border-color: var(--oc-error);\n}\n\n.oc-select-trigger--error:focus,\n.oc-select-trigger--error.oc-select-trigger--open {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-select-trigger--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Value and placeholder */\n.oc-select-value {\n flex: 1;\n color: var(--oc-fg-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-select-placeholder {\n flex: 1;\n color: var(--oc-fg-tertiary);\n}\n\n/* Search input */\n.oc-select-search {\n flex: 1;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n color: var(--oc-fg-primary);\n outline: none;\n min-width: 0;\n}\n\n.oc-select-search::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Indicators */\n.oc-select-indicators {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n flex-shrink: 0;\n}\n\n.oc-select-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n padding: 0;\n}\n\n.oc-select-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-select-chevron {\n color: var(--oc-fg-tertiary);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger--open .oc-select-chevron {\n transform: rotate(180deg);\n}\n\n/* Dropdown */\n.oc-select-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 240px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n list-style: none;\n}\n\n/* Option */\n.oc-select-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-option:hover,\n.oc-select-option--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-select-option--selected {\n color: var(--oc-accent);\n font-weight: 500;\n}\n\n.oc-select-option--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-select-option--disabled:hover {\n background: transparent;\n}\n\n.oc-select-check {\n flex-shrink: 0;\n color: var(--oc-accent);\n}\n\n/* Option group */\n.oc-select-group {\n list-style: none;\n}\n\n.oc-select-group:not(:first-child) {\n margin-top: var(--oc-spacing-xs);\n padding-top: var(--oc-spacing-xs);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-select-group-label {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-select-group-options {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Empty state */\n.oc-select-empty {\n padding: var(--oc-spacing-md);\n text-align: center;\n color: var(--oc-fg-tertiary);\n font-size: var(--oc-font-size-sm);\n}\n\n/* Helper and error text */\n.oc-select-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-select-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Checkbox wrapper */\n.oc-checkbox-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-checkbox-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-checkbox-wrapper--error .oc-checkbox-box {\n border-color: var(--oc-error);\n}\n\n/* Checkbox box */\n.oc-checkbox-box {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-sm);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-checkbox-box--checked,\n.oc-checkbox-box--indeterminate {\n background: var(--oc-accent);\n border-color: var(--oc-accent);\n}\n\n.oc-checkbox-wrapper:hover:not(.oc-checkbox-wrapper--disabled) .oc-checkbox-box:not(.oc-checkbox-box--checked):not(.oc-checkbox-box--indeterminate) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-checkbox-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-checkbox-input:focus-visible + .oc-checkbox-icon,\n.oc-checkbox-box:has(.oc-checkbox-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Check icon */\n.oc-checkbox-icon {\n width: 12px;\n height: 12px;\n color: var(--oc-fg-inverse);\n pointer-events: none;\n}\n\n/* Label */\n.oc-checkbox-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Checkbox group */\n.oc-checkbox-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-checkbox-group--vertical {\n flex-direction: column;\n}\n\n.oc-checkbox-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n\n\n/* Radio wrapper */\n.oc-radio-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-radio-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-radio-wrapper--error .oc-radio-circle {\n border-color: var(--oc-error);\n}\n\n/* Radio circle */\n.oc-radio-circle {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-full);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-radio-circle--checked {\n border-color: var(--oc-accent);\n}\n\n.oc-radio-wrapper:hover:not(.oc-radio-wrapper--disabled) .oc-radio-circle:not(.oc-radio-circle--checked) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-radio-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-radio-circle:has(.oc-radio-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Dot */\n.oc-radio-dot {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n}\n\n/* Label */\n.oc-radio-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Radio group */\n.oc-radio-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-radio-group--vertical {\n flex-direction: column;\n}\n\n.oc-radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n\n\n/* Toggle wrapper */\n.oc-toggle-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-toggle-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Toggle track */\n.oc-toggle-track {\n position: relative;\n display: inline-flex;\n align-items: center;\n background: var(--oc-border-default);\n border-radius: var(--oc-radius-full);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-toggle-track--sm {\n width: 28px;\n height: 16px;\n}\n\n.oc-toggle-track--md {\n width: 36px;\n height: 20px;\n}\n\n.oc-toggle-track--lg {\n width: 44px;\n height: 24px;\n}\n\n.oc-toggle-track--checked {\n background: var(--oc-accent);\n}\n\n.oc-toggle-track--error {\n background: var(--oc-error);\n}\n\n.oc-toggle-wrapper:hover:not(.oc-toggle-wrapper--disabled) .oc-toggle-track:not(.oc-toggle-track--checked) {\n background: var(--oc-border-strong);\n}\n\n/* Hidden input */\n.oc-toggle-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-toggle-track:has(.oc-toggle-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Toggle thumb */\n.oc-toggle-thumb {\n position: absolute;\n background: var(--oc-fg-inverse);\n border-radius: var(--oc-radius-full);\n box-shadow: var(--oc-shadow-sm);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toggle-track--sm .oc-toggle-thumb {\n width: 12px;\n height: 12px;\n left: 2px;\n}\n\n.oc-toggle-track--md .oc-toggle-thumb {\n width: 16px;\n height: 16px;\n left: 2px;\n}\n\n.oc-toggle-track--lg .oc-toggle-thumb {\n width: 20px;\n height: 20px;\n left: 2px;\n}\n\n.oc-toggle-track--checked.oc-toggle-track--sm .oc-toggle-thumb {\n transform: translateX(12px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--md .oc-toggle-thumb {\n transform: translateX(16px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--lg .oc-toggle-thumb {\n transform: translateX(20px);\n}\n\n/* Content */\n.oc-toggle-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-toggle-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toggle-description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n line-height: var(--oc-line-height-tight);\n}\n\n\n\n/* Form field */\n.oc-form-field {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Label */\n.oc-form-field__label {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-form-field__required {\n color: var(--oc-error);\n}\n\n.oc-form-field__optional {\n font-weight: 400;\n color: var(--oc-fg-tertiary);\n}\n\n/* Control */\n.oc-form-field__control {\n display: flex;\n flex-direction: column;\n}\n\n/* Helper text */\n.oc-form-field__helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n/* Error text */\n.oc-form-field__error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Toast container */\n.oc-toast-container {\n position: fixed;\n z-index: var(--oc-z-tooltip);\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n pointer-events: none;\n max-width: 420px;\n width: 100%;\n}\n\n.oc-toast-container--top-right {\n top: 0;\n right: 0;\n}\n\n.oc-toast-container--top-left {\n top: 0;\n left: 0;\n}\n\n.oc-toast-container--bottom-right {\n bottom: 0;\n right: 0;\n}\n\n.oc-toast-container--bottom-left {\n bottom: 0;\n left: 0;\n}\n\n.oc-toast-container--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.oc-toast-container--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* Toast */\n.oc-toast {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-lg);\n pointer-events: auto;\n animation: oc-slide-up-fade var(--oc-duration-normal) var(--oc-easing-enter);\n}\n\n/* Toast icon */\n.oc-toast__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-toast--success .oc-toast__icon {\n color: var(--oc-success);\n}\n\n.oc-toast--error .oc-toast__icon {\n color: var(--oc-error);\n}\n\n.oc-toast--warning .oc-toast__icon {\n color: var(--oc-warning);\n}\n\n.oc-toast--info .oc-toast__icon {\n color: var(--oc-accent);\n}\n\n/* Toast content */\n.oc-toast__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-toast__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toast__description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n margin-top: 2px;\n}\n\n/* Toast action */\n.oc-toast__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n/* Toast close button */\n.oc-toast__close {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toast__close:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n\n\n/* Skeleton base */\n.oc-skeleton {\n background: var(--oc-bg-surface);\n display: block;\n}\n\n/* Variants */\n.oc-skeleton--text {\n height: 1em;\n border-radius: var(--oc-radius-sm);\n transform-origin: 0 55%;\n transform: scale(1, 0.8);\n}\n\n.oc-skeleton--circular {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-skeleton--rectangular {\n border-radius: 0;\n}\n\n.oc-skeleton--rounded {\n border-radius: var(--oc-radius-md);\n}\n\n/* Animations */\n.oc-skeleton--pulse {\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.oc-skeleton--wave {\n position: relative;\n overflow: hidden;\n}\n\n.oc-skeleton--wave::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.5),\n transparent\n );\n animation: oc-skeleton-wave 1.5s linear infinite;\n}\n\n@keyframes oc-skeleton-wave {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n/* Skeleton text */\n.oc-skeleton-text {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Document card skeleton */\n.oc-skeleton-document-card {\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n width: 200px;\n}\n\n.oc-skeleton-document-card__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm);\n}\n\n/* Table row skeleton */\n.oc-skeleton-table-row {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-skeleton-table-row > .oc-skeleton {\n flex: 1;\n}\n\n/* Chat message skeleton */\n.oc-skeleton-chat-message {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-skeleton-chat-message__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n flex: 1;\n}\n\n\n\n/* Search input wrapper */\n.oc-search-input-wrapper {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n}\n\n.oc-search-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Search input container */\n.oc-search-input-container {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n min-height: 36px;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-container--focused {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n/* Search icon */\n.oc-search-input-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* Input field */\n.oc-search-input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n outline: none;\n}\n\n.oc-search-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Clear button */\n.oc-search-input-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-search-input-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n/* Shortcut badge */\n.oc-search-input-shortcut {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 6px;\n font-family: inherit;\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-sm);\n flex-shrink: 0;\n}\n\n/* Dropdown */\n.oc-search-input-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 300px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n}\n\n.oc-search-input-dropdown-header {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-search-input-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: var(--oc-spacing-sm);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n text-align: left;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-dropdown-item:hover,\n.oc-search-input-dropdown-item--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-search-input-dropdown-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-dropdown-item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n/* Progress bar */\n.oc-progress {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n}\n\n.oc-progress__track {\n flex: 1;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-full);\n overflow: hidden;\n}\n\n.oc-progress--sm .oc-progress__track {\n height: 4px;\n}\n\n.oc-progress--md .oc-progress__track {\n height: 6px;\n}\n\n.oc-progress--lg .oc-progress__track {\n height: 8px;\n}\n\n.oc-progress__bar {\n height: 100%;\n border-radius: var(--oc-radius-full);\n transition: width var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress--accent .oc-progress__bar {\n background: var(--oc-accent);\n}\n\n.oc-progress--success .oc-progress__bar {\n background: var(--oc-success);\n}\n\n.oc-progress--warning .oc-progress__bar {\n background: var(--oc-warning);\n}\n\n.oc-progress--error .oc-progress__bar {\n background: var(--oc-error);\n}\n\n/* Indeterminate animation */\n.oc-progress--indeterminate .oc-progress__bar {\n width: 30%;\n animation: oc-progress-indeterminate 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(200%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}\n\n.oc-progress__label {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n min-width: 3ch;\n text-align: right;\n}\n\n/* Progress circle */\n.oc-progress-circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-progress-circle__track {\n stroke: var(--oc-bg-surface);\n}\n\n.oc-progress-circle__bar {\n transition: stroke-dashoffset var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress-circle--accent .oc-progress-circle__bar {\n stroke: var(--oc-accent);\n}\n\n.oc-progress-circle--success .oc-progress-circle__bar {\n stroke: var(--oc-success);\n}\n\n.oc-progress-circle--warning .oc-progress-circle__bar {\n stroke: var(--oc-warning);\n}\n\n.oc-progress-circle--error .oc-progress-circle__bar {\n stroke: var(--oc-error);\n}\n\n.oc-progress-circle__label {\n position: absolute;\n font-size: var(--oc-font-size-xs);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Spinner */\n.oc-spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-accent);\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n\n\n/* Empty state */\n.oc-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: var(--oc-spacing-xl);\n}\n\n/* Sizes */\n.oc-empty-state--sm {\n padding: var(--oc-spacing-md);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon svg {\n width: 32px;\n height: 32px;\n}\n\n.oc-empty-state--sm .oc-empty-state__title {\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__description {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-empty-state--md {\n padding: var(--oc-spacing-xl);\n}\n\n.oc-empty-state--lg {\n padding: var(--oc-spacing-2xl);\n}\n\n.oc-empty-state--lg .oc-empty-state__icon svg {\n width: 64px;\n height: 64px;\n}\n\n.oc-empty-state--lg .oc-empty-state__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Icon */\n.oc-empty-state__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--oc-spacing-md);\n color: var(--oc-fg-tertiary);\n}\n\n.oc-empty-state__icon svg {\n width: 48px;\n height: 48px;\n}\n\n/* Title */\n.oc-empty-state__title {\n margin: 0 0 var(--oc-spacing-xs);\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Description */\n.oc-empty-state__description {\n margin: 0 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n max-width: 320px;\n}\n\n/* Actions */\n.oc-empty-state__actions {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex-wrap: wrap;\n justify-content: center;\n}\n\n\n\n/* Alert */\n.oc-alert {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-radius: var(--oc-radius-md);\n border: 1px solid;\n}\n\n.oc-alert--info {\n background: rgba(8, 145, 178, 0.06);\n border-color: rgba(8, 145, 178, 0.2);\n}\n\n.oc-alert--success {\n background: var(--oc-success-bg);\n border-color: rgba(5, 150, 105, 0.2);\n}\n\n.oc-alert--warning {\n background: var(--oc-warning-bg);\n border-color: rgba(217, 119, 6, 0.2);\n}\n\n.oc-alert--error {\n background: var(--oc-error-bg);\n border-color: rgba(220, 38, 38, 0.2);\n}\n\n.oc-alert__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-alert--info .oc-alert__icon {\n color: var(--oc-accent);\n}\n\n.oc-alert--success .oc-alert__icon {\n color: var(--oc-success);\n}\n\n.oc-alert--warning .oc-alert__icon {\n color: var(--oc-warning);\n}\n\n.oc-alert--error .oc-alert__icon {\n color: var(--oc-error);\n}\n\n.oc-alert__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-alert__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__description {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__title + .oc-alert__description {\n margin-top: 2px;\n}\n\n.oc-alert__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n.oc-alert__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-alert__dismiss:hover {\n background: rgba(0, 0, 0, 0.05);\n color: var(--oc-fg-primary);\n}\n\n/* Banner */\n.oc-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n width: 100%;\n}\n\n.oc-banner--info {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--success {\n background: var(--oc-success);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--warning {\n background: var(--oc-warning);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--error {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner__content {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex: 1;\n justify-content: center;\n}\n\n.oc-banner__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-banner__text {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n}\n\n.oc-banner__action {\n display: flex;\n align-items: center;\n}\n\n.oc-banner__action button,\n.oc-banner__action a {\n color: inherit;\n text-decoration: underline;\n font-weight: 600;\n}\n\n.oc-banner__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n opacity: 0.8;\n transition: opacity var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-banner__dismiss:hover {\n opacity: 1;\n}\n\n\n\n/* Tabs container */\n.oc-tabs {\n display: flex;\n flex-direction: column;\n}\n\n.oc-tabs--vertical {\n flex-direction: row;\n}\n\n/* Tab list */\n.oc-tab-list {\n display: flex;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-tabs--horizontal .oc-tab-list {\n flex-direction: row;\n}\n\n.oc-tabs--vertical .oc-tab-list {\n flex-direction: column;\n border-right: 1px solid var(--oc-border-default);\n padding-right: var(--oc-spacing-sm);\n margin-right: var(--oc-spacing-md);\n}\n\n/* Line variant */\n.oc-tabs--line .oc-tab-list {\n border-bottom: 1px solid var(--oc-border-default);\n gap: 0;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab-list {\n border-bottom: none;\n border-right: 1px solid var(--oc-border-default);\n}\n\n/* Tab button */\n.oc-tab {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-tab:hover:not(.oc-tab--disabled) {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--selected {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-tab:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: -2px;\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Line variant tab */\n.oc-tabs--line .oc-tab {\n position: relative;\n border-radius: 0;\n margin-bottom: -1px;\n}\n\n.oc-tabs--line .oc-tab::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: transparent;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-tabs--line .oc-tab--selected::after {\n background: var(--oc-accent);\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab {\n margin-bottom: 0;\n margin-right: -1px;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab::after {\n bottom: auto;\n left: auto;\n top: 0;\n right: 0;\n width: 2px;\n height: 100%;\n}\n\n/* Enclosed variant */\n.oc-tabs--enclosed .oc-tab-list {\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n padding: var(--oc-spacing-xs);\n}\n\n.oc-tabs--enclosed .oc-tab {\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tabs--enclosed .oc-tab--selected {\n background: var(--oc-bg-canvas);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Pills variant */\n.oc-tabs--pills .oc-tab {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-tabs--pills .oc-tab--selected {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-tabs--pills .oc-tab:hover:not(.oc-tab--disabled):not(.oc-tab--selected) {\n background: var(--oc-bg-surface);\n}\n\n/* Tab panels */\n.oc-tab-panels {\n flex: 1;\n}\n\n.oc-tab-panel {\n padding: var(--oc-spacing-md) 0;\n}\n\n.oc-tabs--vertical .oc-tab-panel {\n padding: 0;\n}\n\n.oc-tab-panel:focus {\n outline: none;\n}\n\n\n\n/* ============ Research Card Container ============ */\n.oc-research-card {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-research-card__header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-research-card__back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.oc-research-card__back:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-research-card__title {\n flex: 1;\n margin: 0;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-card__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-research-card__content {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n}\n\n/* ============ User Question ============ */\n.oc-user-question {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.oc-user-question__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-user-question__text {\n flex: 1;\n font-size: 15px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #0F172A);\n padding-top: 4px;\n}\n\n/* ============ AI Response ============ */\n.oc-ai-response {\n margin-bottom: 20px;\n}\n\n.oc-ai-response__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 12px;\n}\n\n.oc-ai-response__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-ai-response__avatar-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-fg-primary, #0F172A);\n color: white;\n font-size: 14px;\n font-weight: 700;\n}\n\n.oc-ai-response__status {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: default;\n transition: all 0.15s ease;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status {\n cursor: pointer;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-ai-response__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-ai-response__status-text {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-ai-response--researching .oc-ai-response__status-text {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-ai-response--error .oc-ai-response__status-text {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-ai-response__chevron {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-ai-response--expanded .oc-ai-response__chevron {\n transform: rotate(180deg);\n}\n\n.oc-ai-response__sources {\n margin-bottom: 16px;\n margin-left: 42px;\n}\n\n.oc-ai-response__content {\n margin-left: 42px;\n}\n\n/* ============ Sources Badge ============ */\n.oc-sources-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n background: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-sources-badge:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-sources-badge__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.oc-sources-badge__icon img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.oc-sources-badge__text {\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-sources-badge__arrow {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.15s ease;\n}\n\n.oc-sources-badge:hover .oc-sources-badge__arrow {\n transform: translateX(2px);\n}\n\n/* ============ Research Section ============ */\n.oc-research-section {\n margin-bottom: 24px;\n}\n\n.oc-research-section:last-child {\n margin-bottom: 0;\n}\n\n.oc-research-section__heading {\n margin: 0 0 12px;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-section__body {\n font-size: 15px;\n line-height: 1.7;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-research-section__body p {\n margin: 0 0 12px;\n}\n\n.oc-research-section__body p:last-child {\n margin-bottom: 0;\n}\n\n/* ============ Steps List ============ */\n.oc-steps-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n margin-bottom: 16px;\n}\n\n.oc-steps-list__item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px;\n border-radius: var(--oc-radius-sm, 4px);\n}\n\n.oc-steps-list__indicator {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-steps-list__number {\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-tertiary, #94A3B8);\n font-size: 11px;\n font-weight: 600;\n}\n\n.oc-steps-list__item--completed .oc-steps-list__indicator {\n color: var(--oc-success, #059669);\n}\n\n.oc-steps-list__item--running .oc-steps-list__indicator {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-steps-list__item--error .oc-steps-list__indicator {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-steps-list__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-steps-list__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-steps-list__label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-steps-list__item--pending .oc-steps-list__label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-steps-list__desc {\n display: block;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n\n\n/* ============ Project Picker Container ============ */\n.oc-project-picker {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-project-picker__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 16px 20px;\n border: none;\n border-bottom: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n text-align: left;\n transition: all 0.15s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__header {\n border-bottom-color: var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-picker__header:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-picker__header-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-picker__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-project-picker__subtitle {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-picker__chevron {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__chevron {\n transform: rotate(180deg);\n}\n\n.oc-project-picker__list {\n display: flex;\n flex-direction: column;\n padding: 8px;\n}\n\n/* ============ Project Item ============ */\n.oc-project-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 12px 14px;\n border-radius: var(--oc-radius-md, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n outline: none;\n}\n\n.oc-project-item:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-item:focus-visible {\n box-shadow: 0 0 0 2px var(--oc-accent, #0891B2);\n}\n\n.oc-project-item--selected {\n background: var(--oc-bg-surface, #F8FAFC);\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-item--selected:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-project-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-item__name {\n font-size: 15px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__desc {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__icon {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: color 0.15s ease;\n}\n\n.oc-project-item:hover .oc-project-item__icon {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-project-item--selected .oc-project-item__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n/* ============ Project Search ============ */\n.oc-project-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n margin: 8px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-project-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-project-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-project-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n\n\n/* ============ Sources Panel Container ============ */\n.oc-sources-panel {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* ============ Panel Tabs ============ */\n.oc-panel-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 12px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-panel-tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid transparent;\n border-bottom: none;\n border-radius: var(--oc-radius-md, 6px) var(--oc-radius-md, 6px) 0 0;\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n margin-bottom: -1px;\n}\n\n.oc-panel-tab:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab--selected {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-border-default, #E2E8F0);\n border-bottom-color: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n color: currentColor;\n}\n\n.oc-panel-tab__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-panel-tab__label {\n white-space: nowrap;\n}\n\n/* ============ Panel Search ============ */\n.oc-panel-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n margin: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-panel-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-panel-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-panel-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Action List ============ */\n.oc-panel-action-list {\n display: flex;\n flex-direction: column;\n padding: 0 8px 8px;\n}\n\n/* ============ Panel Action ============ */\n.oc-panel-action {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 12px 14px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-panel-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-panel-action:active {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-panel-action--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.oc-panel-action--disabled:hover {\n background: transparent;\n}\n\n.oc-panel-action__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-sm, 4px);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-panel-action__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-panel-action__icon img {\n width: 20px;\n height: 20px;\n object-fit: contain;\n}\n\n.oc-panel-action__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-panel-action__label {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-action__desc {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Section ============ */\n.oc-panel-section {\n padding: 0 12px 12px;\n}\n\n.oc-panel-section__title {\n margin: 0 0 8px;\n padding: 0 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-section__content {\n display: flex;\n flex-direction: column;\n}\n\n/* ============ Integration Colors ============ */\n.oc-panel-action--docvault .oc-panel-action__icon {\n color: #E85B5B;\n}\n\n.oc-panel-action--filenexus .oc-panel-action__icon {\n color: #1B4F72;\n}\n\n.oc-panel-action--clouddrive .oc-panel-action__icon {\n color: #038387;\n}\n\n.oc-panel-action--upload .oc-panel-action__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n\n\n/* ============ Hero Container ============ */\n.oc-hero {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: linear-gradient(180deg, rgba(8, 145, 178, 0.03) 0%, transparent 100%);\n}\n\n.oc-hero__inner {\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Size variants */\n.oc-hero--sm {\n padding: 48px 24px;\n}\n\n.oc-hero--md {\n padding: 80px 24px;\n}\n\n.oc-hero--lg {\n padding: 120px 24px;\n}\n\n/* Layout variants */\n.oc-hero--centered {\n text-align: center;\n}\n\n.oc-hero--centered .oc-hero__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.oc-hero--split .oc-hero__inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n align-items: center;\n}\n\n/* ============ Hero Decorations ============ */\n.oc-hero__decorations {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n}\n\n.oc-hero:not(.oc-hero--with-decorations) .oc-hero__decorations {\n display: none;\n}\n\n.oc-hero__decoration {\n position: absolute;\n color: var(--oc-accent, #0891B2);\n opacity: 0.08;\n}\n\n.oc-hero__decoration--1 {\n top: 15%;\n left: 10%;\n animation: oc-hero-float 8s ease-in-out infinite;\n}\n\n.oc-hero__decoration--2 {\n top: 40%;\n left: 5%;\n opacity: 0.06;\n animation: oc-hero-float 10s ease-in-out infinite reverse;\n}\n\n.oc-hero__decoration--3 {\n top: 20%;\n right: 8%;\n opacity: 0.05;\n animation: oc-hero-float 9s ease-in-out infinite;\n}\n\n.oc-hero__decoration--4 {\n top: 50%;\n right: 12%;\n opacity: 0.07;\n animation: oc-hero-float 11s ease-in-out infinite reverse;\n}\n\n@keyframes oc-hero-float {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(5deg); }\n}\n\n/* ============ Hero Badge ============ */\n.oc-hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-sm);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 24px;\n}\n\n.oc-hero-badge__icon {\n display: flex;\n align-items: center;\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-hero-badge__text {\n white-space: nowrap;\n}\n\n/* ============ Hero Title ============ */\n.oc-hero-title {\n margin: 0 0 16px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.2;\n color: var(--oc-fg-primary, #0F172A);\n letter-spacing: -0.02em;\n}\n\n.oc-hero-title--gradient {\n background: linear-gradient(135deg, var(--oc-fg-primary, #0F172A) 0%, var(--oc-accent, #0891B2) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n/* ============ Hero Subtitle ============ */\n.oc-hero-subtitle {\n margin: 0 0 32px;\n max-width: 560px;\n font-size: 17px;\n line-height: 1.6;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-hero--centered .oc-hero-subtitle {\n margin-left: auto;\n margin-right: auto;\n}\n\n/* ============ Hero Search ============ */\n.oc-hero-search {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n max-width: 600px;\n padding: 8px 8px 8px 20px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-lg);\n margin-bottom: 24px;\n}\n\n.oc-hero-search__input {\n flex: 1;\n min-width: 0;\n padding: 8px 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-hero-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-hero-search__button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 12px 20px;\n background: var(--oc-accent, #0891B2);\n color: white;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.oc-hero-search__button:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0E7490);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-accent);\n}\n\n.oc-hero-search__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.oc-hero-search__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-hero-search--loading {\n opacity: 0.8;\n}\n\n/* ============ Hero Actions ============ */\n.oc-hero-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-hero--split .oc-hero-actions {\n justify-content: flex-start;\n}\n\n/* ============ Hero Action Button ============ */\n.oc-hero-action {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 6px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-hero-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-hero-action__icon {\n display: flex;\n align-items: center;\n color: currentColor;\n}\n\n/* ============ Hero Content (for split layout) ============ */\n.oc-hero-content {\n display: flex;\n flex-direction: column;\n}\n\n.oc-hero-content--left {\n align-items: flex-start;\n text-align: left;\n}\n\n.oc-hero-content--center {\n align-items: center;\n text-align: center;\n}\n\n.oc-hero-content--right {\n align-items: flex-end;\n text-align: right;\n}\n\n/* ============ Hero Media ============ */\n.oc-hero-media {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-hero-media img,\n.oc-hero-media svg {\n max-width: 100%;\n height: auto;\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 1024px) {\n .oc-hero--split .oc-hero__inner {\n grid-template-columns: 1fr;\n gap: 32px;\n text-align: center;\n }\n\n .oc-hero--split .oc-hero-content {\n align-items: center;\n }\n\n .oc-hero--split .oc-hero-actions {\n justify-content: center;\n }\n\n .oc-hero-media {\n order: -1;\n }\n}\n\n@media (max-width: 768px) {\n .oc-hero--sm {\n padding: 32px 16px;\n }\n\n .oc-hero--md {\n padding: 48px 16px;\n }\n\n .oc-hero--lg {\n padding: 64px 16px;\n }\n\n .oc-hero-title {\n font-size: 32px;\n }\n\n .oc-hero-subtitle {\n font-size: 15px;\n margin-bottom: 24px;\n }\n\n .oc-hero-search {\n flex-direction: column;\n padding: 12px;\n border-radius: var(--oc-radius-lg, 8px);\n gap: 8px;\n }\n\n .oc-hero-search__input {\n width: 100%;\n text-align: center;\n }\n\n .oc-hero-search__button {\n width: 100%;\n }\n\n .oc-hero__decorations {\n display: none;\n }\n}\n\n@media (max-width: 480px) {\n .oc-hero-title {\n font-size: 26px;\n }\n\n .oc-hero-badge {\n font-size: 11px;\n padding: 6px 12px;\n }\n\n .oc-hero-action {\n width: 100%;\n justify-content: center;\n }\n\n .oc-hero-actions {\n flex-direction: column;\n width: 100%;\n }\n}\n\n\n\n/* ============================================\n SearchBox Component\n ============================================ */\n\n.oc-search-box {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-search-box:focus-within {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Size variants */\n.oc-search-box--sm {\n padding: 8px 12px;\n gap: 10px;\n}\n\n.oc-search-box--sm .oc-search-box__input {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--sm .oc-search-box__button {\n padding: 6px 14px;\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--lg {\n padding: 16px 20px;\n gap: 14px;\n}\n\n.oc-search-box--lg .oc-search-box__input {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-search-box--lg .oc-search-box__button {\n padding: 10px 24px;\n font-size: var(--oc-font-size-md, 15px);\n}\n\n/* Icon */\n.oc-search-box__icon {\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Input */\n.oc-search-box__input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-fg-primary, #1E293B);\n outline: none;\n}\n\n.oc-search-box__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-search-box__input:disabled {\n cursor: not-allowed;\n}\n\n/* Button */\n.oc-search-box__button {\n padding: 8px 20px;\n background: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.oc-search-box__button:hover:not(:disabled) {\n background: #1E293B;\n}\n\n.oc-search-box__button:active:not(:disabled) {\n background: #0F172A;\n}\n\n.oc-search-box__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Loading state */\n.oc-search-box--loading {\n pointer-events: none;\n}\n\n.oc-search-box__spinner {\n animation: oc-spin var(--oc-duration-spin, 0.8s) linear infinite;\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-search-box {\n flex-wrap: wrap;\n }\n\n .oc-search-box__input {\n flex: 1 1 100%;\n order: 1;\n }\n\n .oc-search-box__icon {\n order: 0;\n }\n\n .oc-search-box__button {\n order: 2;\n width: 100%;\n margin-top: 8px;\n }\n}\n\n\n\n/* ============================================\n FilterTabs Component\n ============================================ */\n\n.oc-filter-tabs {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n/* Filter icon button */\n.oc-filter-tabs__icon-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-filter-tabs__icon-button:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-secondary, #64748B);\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-filter-tabs__icon-button:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-filter-tabs__icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tabs--underline {\n gap: 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* FilterTab */\n.oc-filter-tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-filter-tab:hover:not(:disabled) {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #475569);\n}\n\n.oc-filter-tab--active {\n background: #1E293B;\n border-color: #1E293B;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--active:hover:not(:disabled) {\n background: #334155;\n border-color: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-filter-tab--sm {\n padding: 6px 12px;\n font-size: var(--oc-font-size-xs, 12px);\n gap: 4px;\n}\n\n.oc-filter-tab--lg {\n padding: 10px 18px;\n font-size: var(--oc-font-size-md, 15px);\n gap: 8px;\n}\n\n/* Underline variant */\n.oc-filter-tab--underline {\n border: none;\n border-radius: 0;\n border-bottom: 2px solid transparent;\n padding: 12px 16px;\n margin-bottom: -1px;\n}\n\n.oc-filter-tab--underline:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active {\n background: transparent;\n color: var(--oc-accent, #0F766E);\n border-bottom-color: var(--oc-accent, #0F766E);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n/* Icon */\n.oc-filter-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-filter-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tab--sm .oc-filter-tab__icon svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-filter-tab--lg .oc-filter-tab__icon svg {\n width: 18px;\n height: 18px;\n}\n\n/* Label */\n.oc-filter-tab__label {\n flex-shrink: 0;\n}\n\n/* Count badge */\n.oc-filter-tab__count {\n font-size: 0.85em;\n opacity: 0.7;\n}\n\n.oc-filter-tab--active .oc-filter-tab__count {\n opacity: 0.8;\n}\n\n\n\n .oc-filter-panel {\n width: 320px;\n max-height: 520px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 8px 16px rgba(15, 23, 42, 0.06));\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .oc-filter-panel__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0;\n }\n\n .oc-filter-panel__clear {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n background: none;\n border: none;\n padding: 4px 8px;\n margin: -4px -8px;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__clear:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__clear:disabled {\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: not-allowed;\n }\n\n .oc-filter-panel__clear:disabled:hover {\n background: transparent;\n }\n\n .oc-filter-panel__body {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n }\n\n .oc-filter-panel__section {\n padding: 8px 20px;\n }\n\n .oc-filter-panel__section:not(:last-child) {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n padding-bottom: 16px;\n margin-bottom: 8px;\n }\n\n .oc-filter-panel__section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__section-title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin: 0;\n }\n\n .oc-filter-panel__section-count {\n font-size: 11px;\n font-weight: 600;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n padding: 2px 6px;\n border-radius: var(--oc-radius-full, 9999px);\n }\n\n /* Section search input */\n .oc-filter-panel__search {\n position: relative;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__search-icon {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n align-items: center;\n }\n\n .oc-filter-panel__search-input {\n width: 100%;\n padding: 8px 32px 8px 32px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__search-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n background: var(--oc-bg-surface, white);\n }\n\n .oc-filter-panel__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__search-clear {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border: none;\n border-radius: 50%;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n padding: 0;\n }\n\n .oc-filter-panel__search-clear:hover {\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #475569);\n }\n\n /* Options list */\n .oc-filter-panel__options {\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: 240px;\n overflow-y: auto;\n }\n\n .oc-filter-panel__option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px 12px;\n margin: 0 -12px;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.1s;\n }\n\n .oc-filter-panel__option:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n /* Checkbox styles */\n .oc-filter-panel__checkbox {\n width: 18px;\n height: 18px;\n border-radius: 4px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__checkbox--checked {\n border-color: var(--oc-accent, #0F766E);\n background: var(--oc-accent, #0F766E);\n }\n\n /* Radio styles */\n .oc-filter-panel__radio {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__radio--checked {\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__radio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--oc-accent, #0F766E);\n }\n\n /* Option content */\n .oc-filter-panel__option-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .oc-filter-panel__option-label {\n font-size: 14px;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-description {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n /* Loading state */\n .oc-filter-panel__loading {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__spinner {\n animation: oc-filter-spin 0.8s linear infinite;\n }\n\n @keyframes oc-filter-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n /* Empty state */\n .oc-filter-panel__empty {\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n text-align: center;\n font-style: italic;\n }\n\n /* Show more button */\n .oc-filter-panel__show-more {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n margin: 4px -12px 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__show-more:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__show-more svg {\n transition: transform 0.2s;\n }\n\n /* Date inputs */\n .oc-filter-panel__date-inputs {\n display: flex;\n gap: 12px;\n }\n\n .oc-filter-panel__date-field {\n flex: 1;\n }\n\n .oc-filter-panel__date-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 6px;\n }\n\n .oc-filter-panel__date-input {\n width: 100%;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__date-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n }\n\n /* Footer */\n .oc-filter-panel__footer {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FAFAFA);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__footer-spacer {\n flex: 1;\n }\n\n .oc-filter-panel__active-count {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n }\n\n .oc-filter-panel__active-count strong {\n color: var(--oc-accent, #0F766E);\n font-weight: 600;\n }\n\n /* Buttons */\n .oc-filter-panel__btn {\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n }\n\n .oc-filter-panel__btn--secondary {\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__btn--secondary:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n }\n\n .oc-filter-panel__btn--primary {\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n }\n\n .oc-filter-panel__btn--primary:hover {\n background: var(--oc-accent-hover, #0D9488);\n }\n\n /* Quick filter chips */\n .oc-filter-panel__quick-filters {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__quick-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s;\n }\n\n .oc-filter-panel__quick-chip:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__quick-chip--active {\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.08);\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__quick-chip-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n margin-right: -4px;\n border-radius: 50%;\n background: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n opacity: 0.6;\n transition: opacity 0.15s;\n }\n\n .oc-filter-panel__quick-chip-remove:hover {\n opacity: 1;\n }\n\n\n\n/* ============================================\n StatBlock Component\n ============================================ */\n\n.oc-stat-block {\n display: flex;\n gap: 12px;\n}\n\n.oc-stat-block--center {\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.oc-stat-block--left {\n align-items: flex-start;\n}\n\n/* Icon */\n.oc-stat-block__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #64748B);\n flex-shrink: 0;\n}\n\n.oc-stat-block__icon svg {\n width: 24px;\n height: 24px;\n}\n\n/* Content */\n.oc-stat-block__content {\n min-width: 0;\n}\n\n/* Value */\n.oc-stat-block__value {\n font-size: 36px;\n font-weight: 400;\n line-height: 1;\n margin-bottom: 4px;\n font-feature-settings: 'tnum' 1;\n}\n\n.oc-stat-block--default .oc-stat-block__value {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-stat-block--accent .oc-stat-block__value {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-stat-block--muted .oc-stat-block__value {\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Label */\n.oc-stat-block__label {\n font-size: var(--oc-font-size-md, 15px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n/* Sublabel */\n.oc-stat-block__sublabel {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.4;\n}\n\n/* Size variants */\n.oc-stat-block--sm .oc-stat-block__value {\n font-size: 24px;\n}\n\n.oc-stat-block--sm .oc-stat-block__label {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-stat-block--sm .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-xs, 11px);\n}\n\n.oc-stat-block--sm .oc-stat-block__icon {\n width: 36px;\n height: 36px;\n}\n\n.oc-stat-block--sm .oc-stat-block__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-stat-block--lg .oc-stat-block__value {\n font-size: 48px;\n}\n\n.oc-stat-block--lg .oc-stat-block__label {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-stat-block--lg .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-md, 15px);\n}\n\n.oc-stat-block--lg .oc-stat-block__icon {\n width: 56px;\n height: 56px;\n}\n\n.oc-stat-block--lg .oc-stat-block__icon svg {\n width: 28px;\n height: 28px;\n}\n\n/* ============================================\n StatGrid Component\n ============================================ */\n\n.oc-stat-grid {\n display: grid;\n}\n\n/* Columns */\n.oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n.oc-stat-grid--cols-3 {\n grid-template-columns: repeat(3, 1fr);\n}\n\n.oc-stat-grid--cols-4 {\n grid-template-columns: repeat(4, 1fr);\n}\n\n/* Gap */\n.oc-stat-grid--gap-sm {\n gap: 16px 24px;\n}\n\n.oc-stat-grid--gap-md {\n gap: 32px 48px;\n}\n\n.oc-stat-grid--gap-lg {\n gap: 48px 64px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-stat-grid--cols-4 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--cols-3 {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 480px) {\n .oc-stat-grid--cols-4,\n .oc-stat-grid--cols-3,\n .oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--gap-md {\n gap: 24px 32px;\n }\n\n .oc-stat-grid--gap-lg {\n gap: 32px 40px;\n }\n\n .oc-stat-block__value {\n font-size: 28px;\n }\n}\n\n\n\n/* ============================================\n CollectionCard Component\n ============================================ */\n\n.oc-collection-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-collection-card--clickable {\n cursor: pointer;\n}\n\n.oc-collection-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Avatar - uniform circular treatment for icons and images */\n.oc-collection-card__icon,\n.oc-collection-card__image {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.oc-collection-card__icon {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-collection-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-collection-card__image {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-collection-card__image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Content */\n.oc-collection-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-collection-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Badge */\n.oc-collection-card__badge {\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n/* Status */\n.oc-collection-card__status {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Title */\n.oc-collection-card__title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 6px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-collection-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Stats */\n.oc-collection-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-collection-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-collection-card__stats span:not(:last-child)::after {\n content: '\u2022';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* Menu */\n.oc-collection-card__menu {\n display: flex;\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n}\n\n.oc-collection-card__menu-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card__menu-button:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-collection-card__menu-button:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============================================\n CollectionList Component\n ============================================ */\n\n.oc-collection-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-collection-list--gap-sm {\n gap: 12px;\n}\n\n.oc-collection-list--gap-md {\n gap: 16px;\n}\n\n.oc-collection-list--gap-lg {\n gap: 24px;\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-collection-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-collection-card__icon,\n .oc-collection-card__image {\n width: 36px;\n height: 36px;\n }\n\n .oc-collection-card__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .oc-collection-card__title {\n font-size: 15px;\n }\n\n .oc-collection-card__description {\n font-size: 13px;\n }\n}\n\n\n\n/* ============================================\n ActivityFeed Component\n ============================================ */\n\n.oc-activity-feed {\n display: flex;\n flex-direction: column;\n}\n\n.oc-activity-feed__list {\n display: flex;\n flex-direction: column;\n}\n\n/* ActivityItem */\n.oc-activity-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 0;\n}\n\n.oc-activity-feed--dividers .oc-activity-item {\n border-bottom: 1px solid var(--oc-bg-subtle, #F1F5F9);\n}\n\n.oc-activity-feed--dividers .oc-activity-item:last-child {\n border-bottom: none;\n}\n\n/* Avatar */\n.oc-activity-item__avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-inverse, #FFFFFF);\n flex-shrink: 0;\n background-size: cover;\n background-position: center;\n}\n\n/* Content */\n.oc-activity-item__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Text */\n.oc-activity-item__text {\n font-size: var(--oc-font-size-sm, 14px);\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n line-height: 1.4;\n}\n\n/* Name */\n.oc-activity-item__name {\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* Target */\n.oc-activity-item__target {\n color: var(--oc-accent, #0F766E);\n text-decoration: none;\n}\n\na.oc-activity-item__target:hover {\n text-decoration: underline;\n}\n\n/* Time */\n.oc-activity-item__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n/* View All Link */\n.oc-activity-feed__view-all {\n display: block;\n text-align: center;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n text-decoration: none;\n padding: 12px;\n margin-top: 8px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-activity-feed__view-all:hover {\n color: var(--oc-accent, #0F766E);\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-activity-item {\n gap: 10px;\n padding: 12px 0;\n }\n\n .oc-activity-item__avatar {\n width: 32px;\n height: 32px;\n font-size: 11px;\n }\n\n .oc-activity-item__text {\n font-size: 13px;\n }\n}\n\n\n\n/* ============================================\n ActionList Component\n ============================================ */\n\n.oc-action-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-action-list--card {\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n padding: 8px;\n}\n\n/* ActionItem */\n.oc-action-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n text-decoration: none;\n width: 100%;\n}\n\n.oc-action-item:hover:not(:disabled) {\n background: rgba(15, 118, 110, 0.05);\n}\n\n.oc-action-item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-action-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-action-item--sm {\n padding: 10px 12px;\n gap: 10px;\n font-size: var(--oc-font-size-sm, 14px);\n}\n\n.oc-action-item--lg {\n padding: 16px 20px;\n gap: 14px;\n font-size: var(--oc-font-size-lg, 16px);\n}\n\n/* Icon */\n.oc-action-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n}\n\n.oc-action-item__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-action-item--sm .oc-action-item__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-action-item--lg .oc-action-item__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-action-item__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n/* Label */\n.oc-action-item__label {\n font-weight: 500;\n}\n\n/* Description */\n.oc-action-item__description {\n font-size: 0.85em;\n color: var(--oc-fg-tertiary, #94A3B8);\n font-weight: 400;\n}\n\n/* Card variant items */\n.oc-action-list--card .oc-action-item {\n padding: 12px 14px;\n}\n\n.oc-action-list--card .oc-action-item:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n\n\n/* ============ Thread View Container ============ */\n.oc-thread-view {\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-view__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-view__title {\n flex: 1;\n min-width: 200px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-view__pin,\n.oc-thread-view__status,\n.oc-thread-view__locked {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-view__pin {\n background: rgba(217, 119, 6, 0.1);\n color: var(--oc-warning, #D97706);\n}\n\n.oc-thread-view__status--resolved {\n background: rgba(5, 150, 105, 0.1);\n color: var(--oc-success, #059669);\n}\n\n.oc-thread-view__status--closed {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-view__status--archived {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-view__locked {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-view__content {\n flex: 1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Pinned thread styling */\n.oc-thread-view--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n}\n\n/* Locked thread */\n.oc-thread-view--locked .oc-thread-view__content {\n opacity: 0.85;\n}\n\n/* ============ Thread Post (Main Post) ============ */\n.oc-thread-post {\n display: flex;\n gap: 14px;\n padding: 20px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n@keyframes oc-thread-fade-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-thread-post--root {\n padding-top: 0;\n}\n\n.oc-thread-post--highlighted {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin: 0 -20px;\n padding-left: 20px;\n padding-right: 20px;\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-thread-post__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-post__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-post__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.oc-thread-post__author {\n font-size: 14px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-post__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__edited {\n font-size: 12px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__body {\n font-size: 15px;\n line-height: 1.65;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__body p {\n margin: 0 0 12px;\n}\n\n.oc-thread-post__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-post__resources {\n margin-top: 14px;\n}\n\n.oc-thread-post__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: 14px;\n}\n\n.oc-thread-post__reactions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-thread-post__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-post:hover .oc-thread-post__actions {\n opacity: 1;\n}\n\n.oc-thread-post__reply-count {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-left: auto;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-post__reply-count svg {\n opacity: 0.6;\n}\n\n/* ============ Thread Reply (Nested) ============ */\n.oc-thread-reply {\n position: relative;\n display: flex;\n flex-direction: column;\n padding-left: 24px;\n}\n\n.oc-thread-reply__connector {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 24px;\n display: flex;\n justify-content: center;\n}\n\n.oc-thread-reply__line {\n width: 2px;\n height: 100%;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: 1px;\n}\n\n.oc-thread-reply:last-child .oc-thread-reply__line {\n height: 32px;\n}\n\n.oc-thread-reply__content {\n display: flex;\n gap: 12px;\n padding: 14px 0;\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__content {\n padding: 10px 0;\n}\n\n.oc-thread-reply--highlighted .oc-thread-reply__content {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin-left: -12px;\n padding-left: 12px;\n border-radius: var(--oc-radius-md, 8px);\n}\n\n.oc-thread-reply__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-reply__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-reply__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__header {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__author {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-reply__time {\n font-size: 11px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__edited {\n font-size: 11px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__body p {\n margin: 0 0 10px;\n}\n\n.oc-thread-reply__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__resources {\n margin-top: 10px;\n}\n\n.oc-thread-reply__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__footer {\n margin-top: 0;\n}\n\n.oc-thread-reply__reactions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-thread-reply__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-reply:hover .oc-thread-reply__actions {\n opacity: 1;\n}\n\n.oc-thread-reply__toggle {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n margin-left: auto;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-reply__toggle:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__toggle-icon {\n transition: transform 0.2s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__toggle-icon {\n transform: rotate(-90deg);\n}\n\n.oc-thread-reply__replies {\n margin-top: 4px;\n}\n\n/* Depth indentation limits */\n.oc-thread-reply--depth-1 { padding-left: 24px; }\n.oc-thread-reply--depth-2 { padding-left: 20px; }\n.oc-thread-reply--depth-3 { padding-left: 16px; }\n.oc-thread-reply--depth-4 { padding-left: 12px; }\n\n/* ============ Mention ============ */\n.oc-mention {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n vertical-align: baseline;\n}\n\n.oc-mention:hover {\n background: rgba(15, 118, 110, 0.2);\n color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-mention__avatar {\n display: flex;\n align-items: center;\n margin-right: 2px;\n}\n\n.oc-mention__at {\n opacity: 0.7;\n}\n\n.oc-mention__name {\n font-weight: 600;\n}\n\n/* ============ Linked Resource ============ */\n.oc-linked-resource {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 13px;\n font-family: inherit;\n color: var(--resource-color, var(--oc-fg-secondary));\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n text-decoration: none;\n}\n\n.oc-linked-resource:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--resource-color, var(--oc-border-default));\n transform: translateY(-1px);\n}\n\n.oc-linked-resource__icon {\n display: flex;\n align-items: center;\n opacity: 0.8;\n}\n\n.oc-linked-resource__title {\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.oc-linked-resource__ref {\n font-size: 11px;\n font-weight: 400;\n color: var(--oc-fg-tertiary, #94A3B8);\n padding-left: 6px;\n border-left: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* Resource type colors */\n.oc-linked-resource--document { --resource-color: var(--oc-info, #0891B2); }\n.oc-linked-resource--collection { --resource-color: var(--oc-warning, #D97706); }\n.oc-linked-resource--annotation { --resource-color: var(--oc-accent, #0F766E); }\n.oc-linked-resource--comment { --resource-color: var(--oc-fg-secondary, #475569); }\n.oc-linked-resource--clause { --resource-color: var(--oc-success, #059669); }\n.oc-linked-resource--user { --resource-color: var(--oc-accent, #0F766E); }\n\n/* ============ Resource List ============ */\n.oc-resource-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-resource-list__label {\n font-size: 12px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-resource-list__items {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n/* ============ Reaction Button ============ */\n.oc-reaction-button {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 14px;\n font-family: inherit;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-button:hover {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n transform: scale(1.05);\n}\n\n.oc-reaction-button--active {\n background: rgba(15, 118, 110, 0.1);\n border-color: rgba(15, 118, 110, 0.3);\n}\n\n.oc-reaction-button--active:hover {\n background: rgba(15, 118, 110, 0.15);\n}\n\n.oc-reaction-button__emoji {\n font-size: 14px;\n line-height: 1;\n}\n\n.oc-reaction-button__count {\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-reaction-button--active .oc-reaction-button__count {\n color: var(--oc-accent, #0F766E);\n}\n\n/* ============ Reaction Bar ============ */\n.oc-reaction-bar {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-reaction-bar__add {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px dashed var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-bar__add:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* ============ Thread Action ============ */\n.oc-thread-action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 10px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-action:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-action--destructive {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action--destructive:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action__label {\n white-space: nowrap;\n}\n\n/* ============ Thread Input ============ */\n.oc-thread-input {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-input__replying {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n}\n\n.oc-thread-input__replying-label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-input__cancel {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n margin-left: auto;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-input__cancel:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n/* ============ Thread Meta ============ */\n.oc-thread-meta {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n padding: 12px 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-meta__item {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n\n.oc-thread-meta__item svg {\n opacity: 0.6;\n}\n\n.oc-thread-meta__participants {\n display: flex;\n align-items: center;\n}\n\n.oc-thread-meta__activity {\n margin-left: auto;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n\n\n/* ============ Category Badge ============ */\n.oc-category-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--category-color, var(--oc-fg-secondary, #475569));\n background: color-mix(in srgb, var(--category-color, var(--oc-fg-secondary)) 10%, transparent);\n border-radius: var(--oc-radius-sm, 6px);\n white-space: nowrap;\n}\n\n.oc-category-badge__label {\n line-height: 1;\n}\n\n/* ============ Discussion List ============ */\n.oc-discussion-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n}\n\n.oc-discussion-list--card {\n gap: 12px;\n background: transparent;\n}\n\n.oc-discussion-list--compact,\n.oc-discussion-list--minimal {\n border: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-discussion-list--loading {\n gap: 0;\n}\n\n.oc-discussion-list__loading {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.oc-discussion-list__skeleton {\n height: 80px;\n background: var(--oc-bg-surface, #F8F8F8);\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n.oc-discussion-list__skeleton:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.oc-discussion-list__skeleton:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* ============ Discussion Item - Card Variant ============ */\n.oc-discussion-item--card {\n display: flex;\n gap: 16px;\n padding: 16px 20px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item--card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.04));\n transform: translateY(-1px);\n}\n\n.oc-discussion-item--card:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-discussion-item--card.oc-discussion-item--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.03) 0%, transparent 30%);\n}\n\n.oc-discussion-item--card.oc-discussion-item--unread {\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item--card.oc-discussion-item--answered,\n.oc-discussion-item--card.oc-discussion-item--resolved {\n border-left: 3px solid var(--oc-success, #059669);\n}\n\n/* Vote column */\n.oc-discussion-item__votes {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n min-width: 40px;\n padding-top: 2px;\n}\n\n.oc-discussion-item__vote-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item__vote-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-accent, #0F766E);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__vote-btn--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-item__vote-btn--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-discussion-item__vote-count {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* Main content */\n.oc-discussion-item__main {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-discussion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__status-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-discussion-item__status-icon--resolved {\n color: var(--oc-success, #059669);\n}\n\n.oc-discussion-item__status-icon--pinned {\n color: var(--oc-warning, #D97706);\n}\n\n.oc-discussion-item__activity {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n.oc-discussion-item__title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n.oc-discussion-item--card .oc-discussion-item__title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item--unread .oc-discussion-item__title {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__preview {\n margin: 0;\n font-size: 14px;\n line-height: 1.5;\n color: var(--oc-fg-secondary, #475569);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-discussion-item__tag {\n display: inline-block;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n margin-top: 4px;\n}\n\n.oc-discussion-item__author {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-discussion-item__author-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-item__author-badge {\n display: inline-flex;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-discussion-item__created {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item__stats {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-discussion-item__stat {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item__stat svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Item - Compact Variant ============ */\n.oc-discussion-item--compact {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--compact:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--compact:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--compact.oc-discussion-item--pinned {\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.05) 0%, transparent 20%);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__leading {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__title {\n font-size: 14px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tags {\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tag {\n font-size: 10px;\n padding: 1px 6px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n/* ============ Discussion Item - Minimal Variant ============ */\n.oc-discussion-item--minimal {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--minimal:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--minimal:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__avatar {\n flex-shrink: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__title {\n font-size: 14px;\n margin-bottom: 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__byline {\n font-size: 12px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time::before {\n content: '\\00B7';\n margin: 0 6px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-canvas, #FAFAFA);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Filters ============ */\n.oc-discussion-filters {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n margin-bottom: 16px;\n}\n\n.oc-discussion-filters__categories {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.oc-discussion-filters__category {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__category:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-discussion-filters__category--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-filters__category--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-discussion-filters__count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n font-size: 11px;\n font-weight: 600;\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-filters__category--active .oc-discussion-filters__count {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.oc-discussion-filters__actions {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-filters__search {\n position: relative;\n flex: 1;\n min-width: 200px;\n max-width: 400px;\n}\n\n.oc-discussion-filters__search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n pointer-events: none;\n}\n\n.oc-discussion-filters__search-input {\n width: 100%;\n padding: 10px 12px 10px 38px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__search-input:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n.oc-discussion-filters__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-filters__sort {\n padding: 10px 32px 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white) url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\") right 8px center/20px no-repeat;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n appearance: none;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__sort:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* ============ New Discussion Button ============ */\n.oc-new-discussion-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n font-size: 14px;\n font-weight: 600;\n font-family: inherit;\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-new-discussion-btn:hover {\n background: var(--oc-accent-hover, #0D9488);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-md, 0 4px 6px rgba(15, 23, 42, 0.05));\n}\n\n.oc-new-discussion-btn:active {\n transform: translateY(0);\n}\n\n.oc-new-discussion-btn:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============ Discussion Stats ============ */\n.oc-discussion-stats {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 12px 0;\n}\n\n.oc-discussion-stats__item {\n display: flex;\n align-items: baseline;\n gap: 6px;\n}\n\n.oc-discussion-stats__value {\n font-size: 18px;\n font-weight: 700;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-stats__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-stats__item--answered .oc-discussion-stats__value {\n color: var(--oc-success, #059669);\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 768px) {\n .oc-discussion-item--card {\n flex-direction: column;\n gap: 12px;\n }\n\n .oc-discussion-item__votes {\n flex-direction: row;\n min-width: unset;\n gap: 8px;\n order: -1;\n }\n\n .oc-discussion-item__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-discussion-item__stats {\n width: 100%;\n justify-content: flex-start;\n }\n\n .oc-discussion-filters__categories {\n overflow-x: auto;\n flex-wrap: nowrap;\n padding-bottom: 8px;\n margin-bottom: -8px;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-discussion-filters__category {\n flex-shrink: 0;\n }\n\n .oc-discussion-filters__actions {\n flex-direction: column;\n align-items: stretch;\n }\n\n .oc-discussion-filters__search {\n max-width: none;\n }\n\n .oc-discussion-filters__sort {\n width: 100%;\n }\n\n .oc-discussion-stats {\n flex-wrap: wrap;\n gap: 16px;\n }\n}\n\n@media (max-width: 480px) {\n .oc-discussion-item--compact,\n .oc-discussion-item--minimal {\n padding: 10px 12px;\n }\n\n .oc-discussion-item--compact .oc-discussion-item__meta {\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n }\n\n .oc-new-discussion-btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM CONTAINER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-filesystem {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FAFAFA);\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n.oc-filesystem__layout {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n.oc-filesystem__sidebar {\n width: 240px;\n min-width: 240px;\n background: var(--oc-bg-surface, white);\n border-right: 1px solid var(--oc-border-default, #E2E8F0);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-filesystem__main {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree {\n display: flex;\n flex-direction: column;\n padding: 8px;\n overflow-y: auto;\n}\n\n.oc-folder-tree__root {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 10px 12px;\n margin-bottom: 4px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n}\n\n.oc-folder-tree__root:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree__root--active {\n background: rgba(15, 118, 110, 0.08);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree__root-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-folder-tree__root-label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree__content {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE ITEM\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree-item {\n display: flex;\n flex-direction: column;\n}\n\n.oc-folder-tree-item__row {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px 8px;\n border-radius: var(--oc-radius-md, 8px);\n transition: background var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__row:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-folder-tree-item--active > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.08);\n}\n\n.oc-folder-tree-item--in-path > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-folder-tree-item__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-folder-tree-item__toggle:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-folder-tree-item__toggle--hidden {\n visibility: hidden;\n}\n\n.oc-folder-tree-item__chevron--expanded {\n transform: rotate(90deg);\n}\n\n.oc-folder-tree-item__button {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 0;\n padding: 6px 8px;\n background: transparent;\n border: none;\n font-family: inherit;\n font-size: 13px;\n font-weight: 400;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n text-align: left;\n border-radius: var(--oc-radius-sm, 6px);\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__button:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__button {\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #F59E0B;\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__icon {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree-item__children {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE PATH BREADCRUMB\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-breadcrumb {\n display: flex;\n align-items: center;\n}\n\n.oc-file-breadcrumb__list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.oc-file-breadcrumb__item {\n display: flex;\n align-items: center;\n gap: 2px;\n}\n\n.oc-file-breadcrumb__link {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-file-breadcrumb__link:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-file-breadcrumb__link--active {\n color: var(--oc-fg-primary, #1E293B);\n cursor: default;\n}\n\n.oc-file-breadcrumb__link--active:hover {\n background: transparent;\n}\n\n.oc-file-breadcrumb__icon {\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-file-breadcrumb__separator {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM TOOLBAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-fs-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-fs-toolbar__left {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-fs-toolbar__center {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-fs-toolbar__right {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n}\n\n.oc-fs-toolbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-fs-toolbar__nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__nav-btn:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__nav-btn:disabled {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.oc-fs-toolbar__view-toggle {\n display: flex;\n align-items: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-md, 8px);\n padding: 3px;\n}\n\n.oc-fs-toolbar__view-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__view-btn:hover {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-fs-toolbar__view-btn--active {\n background: var(--oc-bg-surface, white);\n color: var(--oc-fg-primary, #1E293B);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-fs-toolbar__button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__button:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__button--primary {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-fs-toolbar__button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-fs-toolbar__button-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-fs-toolbar__separator {\n width: 1px;\n height: 24px;\n background: var(--oc-border-default, #E2E8F0);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-file-list__header {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FAFAFA);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__header-cell {\n flex-shrink: 0;\n}\n\n.oc-file-list__header-cell--name {\n flex: 1;\n min-width: 0;\n}\n\n.oc-file-list__header-cell--modified {\n width: 140px;\n}\n\n.oc-file-list__header-cell--size {\n width: 100px;\n text-align: right;\n}\n\n.oc-file-list__content {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n\n.oc-file-list--list .oc-file-list__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 8px;\n}\n\n.oc-file-list--grid .oc-file-list__content {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 12px;\n padding: 16px;\n}\n\n.oc-file-list__empty {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n}\n\n.oc-file-list__empty-content {\n text-align: center;\n max-width: 300px;\n}\n\n.oc-file-list__empty-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 8px;\n}\n\n.oc-file-list__empty-description {\n font-size: 14px;\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - LIST VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--list {\n display: flex;\n align-items: center;\n padding: 10px 12px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--list:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-file-list-item--list:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--list.oc-file-list-item--selected {\n background: rgba(15, 118, 110, 0.08);\n border-color: rgba(15, 118, 110, 0.2);\n}\n\n.oc-file-list-item__cell {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-file-list-item__cell--name {\n flex: 1;\n min-width: 0;\n gap: 12px;\n}\n\n.oc-file-list-item__cell--modified {\n width: 140px;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__cell--size {\n width: 100px;\n justify-content: flex-end;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__name-text {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - GRID VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--grid {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 16px 12px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--grid:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-file-list-item--grid:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--grid.oc-file-list-item--selected {\n border-color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon {\n width: 48px;\n height: 48px;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__name {\n width: 100%;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE ICONS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n}\n\n.oc-file-list-item__icon--folder {\n color: #F59E0B;\n}\n\n.oc-file-list-item__icon--pdf {\n color: #DC2626;\n}\n\n.oc-file-list-item__icon--document {\n color: #2563EB;\n}\n\n.oc-file-list-item__icon--image {\n color: #059669;\n}\n\n.oc-file-list-item__icon--spreadsheet {\n color: #059669;\n}\n\n.oc-file-list-item__icon--presentation {\n color: #EA580C;\n}\n\n.oc-file-list-item__icon--archive {\n color: #7C3AED;\n}\n\n.oc-file-list-item__icon--unknown {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (max-width: 768px) {\n .oc-filesystem__sidebar {\n display: none;\n }\n\n .oc-file-list__header-cell--modified,\n .oc-file-list-item__cell--modified {\n display: none;\n }\n\n .oc-file-list__header-cell--size,\n .oc-file-list-item__cell--size {\n width: 80px;\n }\n\n .oc-file-breadcrumb__list {\n overflow-x: auto;\n flex-wrap: nowrap;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-fs-toolbar {\n padding: 10px 12px;\n gap: 8px;\n }\n}\n\n\n\n/* ============================================\n ExtractCard Component\n ============================================ */\n\n.oc-extract-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-extract-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-extract-card--clickable {\n cursor: pointer;\n}\n\n.oc-extract-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* Icon */\n.oc-extract-card__icon {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-extract-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-extract-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-extract-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Status badge */\n.oc-extract-card__status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n.oc-extract-card__status svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-extract-card__status--pending {\n background: #F1F5F9;\n color: #64748B;\n}\n\n.oc-extract-card__status--queued {\n background: #FEF3C7;\n color: #92400E;\n}\n\n.oc-extract-card__status--running {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.oc-extract-card__status--completed {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.oc-extract-card__status--failed {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.oc-extract-card__progress-text {\n font-weight: 500;\n opacity: 0.8;\n}\n\n/* Spinning animation for running status */\n@keyframes oc-extract-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.oc-extract-card__status-icon--spinning {\n animation: oc-extract-spin 1s linear infinite;\n}\n\n/* Corpus badge */\n.oc-extract-card__corpus {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-extract-card__corpus::before {\n content: 'from ';\n opacity: 0.7;\n}\n\n/* Name */\n.oc-extract-card__name {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 4px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-extract-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Progress bar */\n.oc-extract-card__progress-bar {\n height: 4px;\n background: var(--oc-bg-surface-hover, #E2E8F0);\n border-radius: 2px;\n overflow: hidden;\n margin-bottom: 12px;\n}\n\n.oc-extract-card__progress-fill {\n height: 100%;\n background: var(--oc-accent, #E85A4F);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* Footer */\n.oc-extract-card__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n/* Stats */\n.oc-extract-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-secondary, #64748B);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-extract-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-extract-card__stats span:not(:last-child)::after {\n content: '\\00B7';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* Time */\n.oc-extract-card__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Menu */\n.oc-extract-card__menu {\n display: flex;\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n}\n\n.oc-extract-card__menu-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-extract-card__menu-button:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-extract-card__menu-button:focus-visible {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* ============================================\n ExtractList Component\n ============================================ */\n\n.oc-extract-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-extract-list--gap-sm {\n gap: 12px;\n}\n\n.oc-extract-list--gap-md {\n gap: 16px;\n}\n\n.oc-extract-list--gap-lg {\n gap: 24px;\n}\n\n/* Grid layout */\n.oc-extract-list--grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-extract-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-extract-card__icon {\n width: 36px;\n height: 36px;\n }\n\n .oc-extract-card__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .oc-extract-card__name {\n font-size: 15px;\n }\n\n .oc-extract-card__description {\n font-size: 13px;\n }\n\n .oc-extract-card__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-extract-list--grid {\n grid-template-columns: 1fr;\n }\n}\n\n\n\n/* ============================================\n DataGrid Component\n ============================================ */\n\n.oc-data-grid {\n position: relative;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: auto;\n}\n\n.oc-data-grid__table {\n width: 100%;\n min-width: max-content;\n border-collapse: collapse;\n font-size: 14px;\n}\n\n/* Header */\n.oc-data-grid__header {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-data-grid--sticky-header .oc-data-grid__header {\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.oc-data-grid__th {\n padding: 14px 16px;\n text-align: left;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #64748B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-data-grid__th--sortable {\n cursor: pointer;\n transition: color var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__th--sortable:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-data-grid__th--checkbox,\n.oc-data-grid__th--actions {\n width: 48px;\n padding: 14px 12px;\n}\n\n.oc-data-grid__th--center {\n text-align: center;\n}\n\n.oc-data-grid__th--right {\n text-align: right;\n}\n\n.oc-data-grid__th-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-data-grid__sort-icon {\n opacity: 0.5;\n transition: opacity var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__th--sortable:hover .oc-data-grid__sort-icon {\n opacity: 1;\n}\n\n/* Body */\n.oc-data-grid__body {\n /* Body styles */\n}\n\n.oc-data-grid__row {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n transition: background-color var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__row:last-child {\n border-bottom: none;\n}\n\n.oc-data-grid__row:hover {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-data-grid__row--clickable {\n cursor: pointer;\n}\n\n.oc-data-grid__row--selected {\n background: rgba(232, 90, 79, 0.06);\n}\n\n.oc-data-grid__row--selected:hover {\n background: rgba(232, 90, 79, 0.1);\n}\n\n/* Striped */\n.oc-data-grid--striped .oc-data-grid__row:nth-child(even) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-data-grid--striped .oc-data-grid__row:nth-child(even):hover {\n background: #F1F5F9;\n}\n\n/* Cells */\n.oc-data-grid__cell {\n padding: 14px 16px;\n color: var(--oc-fg-primary, #1E293B);\n vertical-align: middle;\n}\n\n.oc-data-grid__cell--checkbox,\n.oc-data-grid__cell--actions {\n width: 48px;\n padding: 14px 12px;\n}\n\n.oc-data-grid__cell--center {\n text-align: center;\n}\n\n.oc-data-grid__cell--right {\n text-align: right;\n}\n\n.oc-data-grid__cell--number {\n font-variant-numeric: tabular-nums;\n}\n\n.oc-data-grid__cell-content {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Compact mode */\n.oc-data-grid--compact .oc-data-grid__th {\n padding: 10px 12px;\n}\n\n.oc-data-grid--compact .oc-data-grid__cell {\n padding: 10px 12px;\n}\n\n/* Checkbox styling */\n.oc-data-grid__checkbox-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.oc-data-grid__checkbox {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.oc-data-grid__checkbox-custom {\n width: 18px;\n height: 18px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n border-radius: 4px;\n background: var(--oc-bg-surface, #FFFFFF);\n transition: all var(--oc-duration-fast, 0.15s);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-data-grid__checkbox-custom::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--oc-accent, #E85A4F);\n border-radius: 2px;\n transform: scale(0);\n transition: transform var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__checkbox:checked + .oc-data-grid__checkbox-custom {\n border-color: var(--oc-accent, #E85A4F);\n}\n\n.oc-data-grid__checkbox:checked + .oc-data-grid__checkbox-custom::after {\n transform: scale(1);\n}\n\n.oc-data-grid__checkbox:indeterminate + .oc-data-grid__checkbox-custom {\n border-color: var(--oc-accent, #E85A4F);\n}\n\n.oc-data-grid__checkbox:indeterminate + .oc-data-grid__checkbox-custom::after {\n transform: scale(1);\n height: 3px;\n border-radius: 1px;\n}\n\n.oc-data-grid__checkbox:focus-visible + .oc-data-grid__checkbox-custom {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* Boolean check */\n.oc-data-grid__boolean-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #D1FAE5;\n color: #065F46;\n}\n\n/* Links */\n.oc-data-grid__link {\n color: var(--oc-accent, #E85A4F);\n text-decoration: none;\n transition: opacity var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__link:hover {\n opacity: 0.8;\n text-decoration: underline;\n}\n\n/* Cell actions */\n.oc-data-grid__cell-action-wrapper {\n position: relative;\n margin-left: auto;\n}\n\n.oc-data-grid__cell-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n opacity: 0;\n transition: all var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__row:hover .oc-data-grid__cell-action-btn,\n.oc-data-grid__cell-action-btn[aria-expanded=\"true\"] {\n opacity: 1;\n}\n\n.oc-data-grid__cell-action-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Cell menu */\n.oc-data-grid__cell-menu {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 20;\n min-width: 160px;\n margin-top: 4px;\n padding: 6px 0;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.oc-data-grid__cell-menu-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 14px;\n background: transparent;\n border: none;\n font-size: 14px;\n color: var(--oc-fg-primary, #334155);\n text-align: left;\n cursor: pointer;\n transition: background var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__cell-menu-item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-data-grid__cell-menu-item--danger {\n color: #DC2626;\n}\n\n.oc-data-grid__cell-menu-item--danger:hover {\n background: #FEF2F2;\n}\n\n.oc-data-grid__cell-menu-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0.7;\n}\n\n/* Empty state */\n.oc-data-grid__empty {\n padding: 48px 24px;\n text-align: center;\n}\n\n.oc-data-grid__empty-default {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-data-grid__empty-default p {\n margin: 0;\n font-size: 15px;\n}\n\n/* Loading skeleton */\n.oc-data-grid__row--skeleton {\n pointer-events: none;\n}\n\n.oc-data-grid__skeleton {\n height: 16px;\n background: linear-gradient(\n 90deg,\n var(--oc-bg-surface-hover, #F1F5F9) 0%,\n #E2E8F0 50%,\n var(--oc-bg-surface-hover, #F1F5F9) 100%\n );\n background-size: 200% 100%;\n border-radius: 4px;\n animation: oc-data-grid-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-data-grid-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-data-grid {\n border-radius: var(--oc-radius-md, 8px);\n }\n\n .oc-data-grid__th {\n padding: 12px;\n font-size: 11px;\n }\n\n .oc-data-grid__cell {\n padding: 12px;\n font-size: 13px;\n }\n\n .oc-data-grid__cell-action-btn {\n opacity: 1;\n }\n}\n\n\n\n .oc-node {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .oc-node__circle {\n border-radius: var(--oc-radius-full, 9999px);\n background-color: var(--oc-accent, #0F766E);\n transition:\n transform var(--oc-transition-fast, 0.15s) ease,\n background-color var(--oc-transition-fast, 0.15s) ease,\n box-shadow var(--oc-transition-fast, 0.15s) ease;\n }\n\n /* Sizes */\n .oc-node--xs .oc-node__circle {\n width: 6px;\n height: 6px;\n }\n\n .oc-node--sm .oc-node__circle {\n width: 8px;\n height: 8px;\n }\n\n .oc-node--md .oc-node__circle {\n width: 12px;\n height: 12px;\n }\n\n .oc-node--lg .oc-node__circle {\n width: 16px;\n height: 16px;\n }\n\n /* Variants */\n .oc-node--default .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n }\n\n .oc-node--active .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n }\n\n .oc-node--muted .oc-node__circle {\n background-color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-node--connected .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px var(--oc-bg-surface, #FFFFFF),\n 0 0 0 4px var(--oc-accent, #0F766E);\n }\n\n /* Interactive state */\n .oc-node--interactive {\n cursor: pointer;\n }\n\n .oc-node--interactive:hover .oc-node__circle {\n transform: scale(1.2);\n background-color: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-node--interactive:active .oc-node__circle {\n transform: scale(1.1);\n }\n\n /* Pulse animation */\n .oc-node--pulse .oc-node__circle {\n animation: oc-node-pulse 2s ease-in-out infinite;\n }\n\n @keyframes oc-node-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 var(--oc-accent-light, rgba(15, 118, 110, 0.4));\n }\n 50% {\n box-shadow: 0 0 0 6px var(--oc-accent-light, rgba(15, 118, 110, 0));\n }\n }\n\n /* Count badge */\n .oc-node__count {\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translateY(-50%);\n margin-left: 4px;\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n line-height: 1;\n }\n\n .oc-node--active .oc-node__count,\n .oc-node--interactive:hover .oc-node__count {\n color: var(--oc-accent, #0F766E);\n }\n\n\n\n .oc-edge {\n pointer-events: visibleStroke;\n }\n\n .oc-edge__line {\n fill: none;\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1.5;\n stroke-linecap: round;\n transition:\n stroke var(--oc-transition-fast, 0.15s) ease,\n stroke-width var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-edge__arrow {\n fill: var(--oc-border-default, #E2E8F0);\n transition: fill var(--oc-transition-fast, 0.15s) ease;\n }\n\n /* Variants */\n .oc-edge--solid .oc-edge__line {\n stroke-dasharray: none;\n }\n\n .oc-edge--dashed .oc-edge__line {\n stroke-dasharray: 6 4;\n }\n\n .oc-edge--dotted .oc-edge__line {\n stroke-dasharray: 2 3;\n }\n\n /* States */\n .oc-edge--active .oc-edge__line {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n }\n\n .oc-edge--active .oc-edge__arrow {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-edge--muted .oc-edge__line {\n stroke: var(--oc-border-default, #E2E8F0);\n opacity: 0.5;\n }\n\n .oc-edge--muted .oc-edge__arrow {\n fill: var(--oc-border-default, #E2E8F0);\n opacity: 0.5;\n }\n\n /* Hover state */\n .oc-edge:hover .oc-edge__line {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n }\n\n .oc-edge:hover .oc-edge__arrow {\n fill: var(--oc-accent, #0F766E);\n }\n\n /* Animation */\n .oc-edge--animated .oc-edge__line {\n stroke-dasharray: 8 4;\n animation: oc-edge-flow 1s linear infinite;\n }\n\n @keyframes oc-edge-flow {\n from {\n stroke-dashoffset: 0;\n }\n to {\n stroke-dashoffset: -12;\n }\n }\n\n /* Label */\n .oc-edge__label-group {\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-edge:hover .oc-edge__label-group,\n .oc-edge--active .oc-edge__label-group {\n opacity: 1;\n }\n\n .oc-edge__label-bg {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1;\n }\n\n .oc-edge--active .oc-edge__label-bg {\n stroke: var(--oc-accent, #0F766E);\n }\n\n .oc-edge__label {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 10px;\n font-weight: 500;\n fill: var(--oc-fg-secondary, #475569);\n }\n\n .oc-edge--active .oc-edge__label {\n fill: var(--oc-accent, #0F766E);\n }\n\n\n\n .oc-relationship-badge {\n display: inline-flex;\n align-items: center;\n gap: 0;\n padding: 2px 4px 2px 2px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n }\n\n .oc-relationship-badge:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 1px;\n }\n\n .oc-relationship-badge--disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n .oc-relationship-badge--disabled:hover {\n background-color: transparent;\n }\n\n /* Connector line */\n .oc-relationship-badge__connector {\n width: 6px;\n height: 1px;\n background-color: var(--oc-fg-tertiary, #94A3B8);\n transition: background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover .oc-relationship-badge__connector,\n .oc-relationship-badge--active .oc-relationship-badge__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Count */\n .oc-relationship-badge__count {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1;\n transition: color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover .oc-relationship-badge__count,\n .oc-relationship-badge--active .oc-relationship-badge__count {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Size: sm */\n .oc-relationship-badge--sm {\n gap: 0;\n }\n\n .oc-relationship-badge--sm .oc-relationship-badge__connector {\n width: 5px;\n }\n\n .oc-relationship-badge--sm .oc-relationship-badge__count {\n font-size: 10px;\n }\n\n /* Size: md */\n .oc-relationship-badge--md {\n padding: 3px 6px 3px 3px;\n }\n\n .oc-relationship-badge--md .oc-relationship-badge__connector {\n width: 8px;\n }\n\n .oc-relationship-badge--md .oc-relationship-badge__count {\n font-size: var(--oc-font-size-xs, 11px);\n }\n\n\n\n .oc-relationship-pill {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n text-align: left;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-pill:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-relationship-pill:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n .oc-relationship-pill--active {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n }\n\n .oc-relationship-pill--disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n .oc-relationship-pill--disabled:hover {\n background-color: transparent;\n }\n\n /* Connector */\n .oc-relationship-pill__connector {\n width: 8px;\n height: 1px;\n background-color: var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-relationship-pill:hover .oc-relationship-pill__connector,\n .oc-relationship-pill--active .oc-relationship-pill__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Icon */\n .oc-relationship-pill__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-relationship-pill__icon svg {\n width: 14px;\n height: 14px;\n }\n\n /* Title */\n .oc-relationship-pill__title {\n flex: 1;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 450;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n }\n\n .oc-relationship-pill:hover .oc-relationship-pill__title {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Type label */\n .oc-relationship-pill__type {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* Direction indicators */\n .oc-relationship-pill--incoming .oc-relationship-pill__type::before {\n content: '\u2190 ';\n opacity: 0.6;\n }\n\n .oc-relationship-pill--outgoing .oc-relationship-pill__type::after {\n content: ' \u2192';\n opacity: 0.6;\n }\n\n /* AI source badge */\n .oc-relationship-pill__source-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1px 4px;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--oc-fg-tertiary, #94A3B8);\n background-color: var(--oc-bg-canvas, #F8FAFC);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n .oc-relationship-pill--source-analyzer .oc-relationship-pill__source-badge {\n color: var(--oc-accent, #0F766E);\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.08));\n border-color: var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n }\n\n\n\n .oc-relationship-popover {\n min-width: 280px;\n max-width: 360px;\n background: var(--oc-bg-surface, #FFFFFF);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 4px 24px rgba(0, 0, 0, 0.12));\n overflow: hidden;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n }\n\n /* Header */\n .oc-relationship-popover__header {\n padding: 12px 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-relationship-popover__title {\n font-size: var(--oc-font-size-sm, 13px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n }\n\n /* List */\n .oc-relationship-popover__list {\n padding: 4px;\n overflow-y: auto;\n }\n\n /* Scrollbar styling */\n .oc-relationship-popover__list::-webkit-scrollbar {\n width: 6px;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-thumb {\n background-color: var(--oc-border-default, #E2E8F0);\n border-radius: 3px;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-thumb:hover {\n background-color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n /* Item */\n .oc-relationship-popover__item {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n text-align: left;\n transition: background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__item:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-relationship-popover__item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n /* Node indicator */\n .oc-relationship-popover__node {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full, 9999px);\n background-color: var(--oc-accent, #0F766E);\n flex-shrink: 0;\n }\n\n /* Connector */\n .oc-relationship-popover__connector {\n width: 8px;\n height: 1px;\n background-color: var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-relationship-popover__item:hover .oc-relationship-popover__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Icon */\n .oc-relationship-popover__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-relationship-popover__icon svg {\n width: 14px;\n height: 14px;\n }\n\n /* Document title */\n .oc-relationship-popover__doc-title {\n flex: 1;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 450;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n }\n\n .oc-relationship-popover__item:hover .oc-relationship-popover__doc-title {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Relationship type */\n .oc-relationship-popover__rel-type {\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* AI badge */\n .oc-relationship-popover__ai-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1px 4px;\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.08));\n border: 1px solid var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n /* Footer */\n .oc-relationship-popover__footer {\n padding: 8px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background-color: var(--oc-bg-canvas, #F8FAFC);\n }\n\n .oc-relationship-popover__graph-link {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 13px);\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__graph-link:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n color: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-relationship-popover__graph-link:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n .oc-relationship-popover__graph-link svg {\n transition: transform var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__graph-link:hover svg {\n transform: translateX(2px);\n }\n\n\n\n /* ============================================\n * Document Graph Container\n * ============================================ */\n .oc-document-graph {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 400px;\n background-color: var(--oc-bg-canvas, #F8FAFC);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n }\n\n .oc-document-graph__canvas {\n width: 100%;\n height: 100%;\n cursor: grab;\n user-select: none;\n }\n\n .oc-document-graph--dragging .oc-document-graph__canvas {\n cursor: grabbing;\n }\n\n .oc-document-graph__svg {\n display: block;\n }\n\n .oc-document-graph__content {\n transform-origin: 0 0;\n }\n\n /* Empty state */\n .oc-document-graph__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-document-graph__empty svg {\n opacity: 0.5;\n }\n\n .oc-document-graph__empty p {\n margin: 0;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 14px);\n }\n\n /* ============================================\n * Graph Node\n * ============================================ */\n .oc-graph-node {\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-node__ring {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n opacity: 0.3;\n }\n\n .oc-graph-node--selected .oc-graph-node__ring,\n .oc-graph-node--focus .oc-graph-node__ring {\n opacity: 0.5;\n stroke-width: 2.5;\n }\n\n .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n stroke: var(--oc-bg-surface, #FFFFFF);\n stroke-width: 2;\n transition:\n fill var(--oc-transition-fast, 0.15s) ease,\n transform var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-node:hover .oc-graph-node__circle {\n fill: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-graph-node--depth-1 .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-node--depth-2 .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n opacity: 0.7;\n }\n\n .oc-graph-node__initial {\n fill: var(--oc-bg-surface, #FFFFFF);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n .oc-graph-node__icon-wrapper {\n overflow: visible;\n }\n\n .oc-graph-node__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: var(--oc-bg-surface, #FFFFFF);\n }\n\n .oc-graph-node__icon svg {\n width: 60%;\n height: 60%;\n }\n\n .oc-graph-node__title {\n fill: var(--oc-fg-primary, #1E293B);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 500;\n }\n\n .oc-graph-node--focus .oc-graph-node__title {\n font-weight: 600;\n }\n\n .oc-graph-node__count {\n fill: var(--oc-fg-tertiary, #94A3B8);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n }\n\n /* Expand badge */\n .oc-graph-node__expand-badge {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 1.5;\n }\n\n .oc-graph-node__expand-icon {\n fill: var(--oc-accent, #0F766E);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n .oc-graph-node--expandable:hover .oc-graph-node__expand-badge {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-node--expandable:hover .oc-graph-node__expand-icon {\n fill: var(--oc-bg-surface, #FFFFFF);\n }\n\n /* ============================================\n * Graph Edge\n * ============================================ */\n .oc-graph-edge {\n pointer-events: visibleStroke;\n }\n\n .oc-graph-edge__line {\n fill: none;\n stroke: var(--oc-border-default, #CBD5E1);\n stroke-width: 1.5;\n stroke-linecap: round;\n transition:\n stroke var(--oc-transition-fast, 0.15s) ease,\n stroke-width var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge__arrow {\n fill: var(--oc-border-default, #CBD5E1);\n transition: fill var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge:hover .oc-graph-edge__line,\n .oc-graph-edge--selected .oc-graph-edge__line {\n stroke-width: 2;\n }\n\n .oc-graph-edge--muted .oc-graph-edge__line {\n opacity: 0.3;\n }\n\n .oc-graph-edge--muted .oc-graph-edge__arrow {\n opacity: 0.3;\n }\n\n /* Label */\n .oc-graph-edge__label-group {\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge:hover .oc-graph-edge__label-group,\n .oc-graph-edge--selected .oc-graph-edge__label-group {\n opacity: 1;\n }\n\n .oc-graph-edge__label-bg {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1;\n }\n\n .oc-graph-edge__label {\n fill: var(--oc-fg-secondary, #475569);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 11px;\n font-weight: 500;\n }\n\n .oc-graph-edge__ai-badge-bg {\n fill: var(--oc-accent-light, rgba(15, 118, 110, 0.1));\n }\n\n .oc-graph-edge__ai-badge {\n fill: var(--oc-accent, #0F766E);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n /* ============================================\n * Graph Controls\n * ============================================ */\n .oc-graph-controls {\n position: absolute;\n bottom: 16px;\n left: 16px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n max-width: calc(100% - 32px);\n }\n\n .oc-graph-controls__group {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px;\n background: var(--oc-bg-surface, #FFFFFF);\n border-radius: var(--oc-radius-md, 8px);\n box-shadow: var(--oc-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));\n }\n\n .oc-graph-controls__button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: 6px 8px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-controls__button:hover:not(:disabled) {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n color: var(--oc-fg-primary, #1E293B);\n }\n\n .oc-graph-controls__button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n .oc-graph-controls__button--active {\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.1));\n color: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-controls__button--text {\n min-width: 44px;\n font-variant-numeric: tabular-nums;\n }\n\n .oc-graph-controls__load-more {\n padding: 6px 12px;\n }\n\n /* Filters */\n .oc-graph-controls__filters {\n gap: 4px;\n }\n\n .oc-graph-controls__filter {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px 4px 8px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-controls__filter:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-graph-controls__filter--active {\n color: var(--oc-fg-primary, #1E293B);\n }\n\n .oc-graph-controls__filter-dot {\n width: 8px;\n height: 8px;\n border-radius: var(--oc-radius-full, 9999px);\n flex-shrink: 0;\n }\n\n .oc-graph-controls__filter:not(.oc-graph-controls__filter--active) .oc-graph-controls__filter-dot {\n opacity: 0.4;\n }\n\n /* Spinner */\n .oc-graph-controls__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0F766E);\n border-radius: 50%;\n animation: oc-spin var(--oc-animation-spin, 0.8s) linear infinite;\n }\n\n\n\n/* \u2500\u2500\u2500 Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n font-family: inherit;\n}\n\n.oc-dropdown--fluid {\n width: 100%;\n}\n\n/* \u2500\u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--oc-spacing-sm);\n min-height: 38px;\n padding: 6px 12px;\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default),\n background-color var(--oc-duration-fast) var(--oc-easing-default);\n outline: none;\n user-select: none;\n}\n\n.oc-dropdown__trigger:hover:not(.oc-dropdown__trigger--disabled) {\n background: var(--oc-bg-surface-hover);\n border-color: var(--oc-border-strong);\n}\n\n.oc-dropdown__trigger:focus-visible:not(.oc-dropdown__trigger--disabled) {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2);\n}\n\n.oc-dropdown__trigger--open {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2);\n}\n\n.oc-dropdown__trigger--disabled {\n background: var(--oc-bg-subtle);\n border-color: var(--oc-border-default);\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n opacity: var(--oc-opacity-disabled);\n}\n\n.oc-dropdown__trigger--custom {\n /* Reset all built-in styling for custom triggers */\n min-height: unset;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: 0;\n box-shadow: none;\n}\n\n.oc-dropdown__trigger--custom:hover,\n.oc-dropdown__trigger--custom:focus-visible,\n.oc-dropdown__trigger--custom.oc-dropdown__trigger--open {\n background: transparent;\n border: none;\n box-shadow: none;\n}\n\n/* \u2500\u2500\u2500 Trigger content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__trigger-content {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex: 1;\n min-width: 0;\n overflow: hidden;\n}\n\n.oc-dropdown__trigger-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--oc-fg-secondary);\n}\n\n.oc-dropdown__trigger-icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-dropdown__value {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-primary);\n}\n\n.oc-dropdown__placeholder {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-secondary);\n}\n\n/* \u2500\u2500\u2500 Indicators \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__indicators {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n flex-shrink: 0;\n margin-left: var(--oc-spacing-xs);\n}\n\n.oc-dropdown__chevron {\n display: flex;\n align-items: center;\n color: var(--oc-fg-secondary);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-dropdown__trigger--open .oc-dropdown__chevron {\n transform: rotate(180deg);\n}\n\n.oc-dropdown__clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: color var(--oc-duration-fast) var(--oc-easing-default),\n background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-dropdown__clear:hover {\n color: var(--oc-error);\n background: rgba(220, 38, 38, 0.06);\n}\n\n.oc-dropdown__spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n color: var(--oc-fg-secondary);\n flex-shrink: 0;\n}\n\n/* \u2500\u2500\u2500 Tags (multiselect) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n align-items: center;\n}\n\n.oc-dropdown__tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n background: rgba(15, 118, 110, 0.1);\n border: 1px solid rgba(15, 118, 110, 0.2);\n border-radius: 6px;\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-accent);\n line-height: var(--oc-line-height-tight);\n white-space: nowrap;\n}\n\n.oc-dropdown__tag-label {\n max-width: 120px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.oc-dropdown__tag-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-accent);\n cursor: pointer;\n border-radius: 2px;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-dropdown__tag-remove:hover {\n color: var(--oc-error);\n}\n\n/* \u2500\u2500\u2500 Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__menu {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n z-index: var(--oc-z-dropdown);\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n animation: oc-dropdown-enter var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n.oc-dropdown__menu--upward {\n top: auto;\n bottom: calc(100% + 4px);\n animation-name: oc-dropdown-enter-up;\n}\n\n.oc-dropdown__menu--align-right {\n left: auto;\n right: 0;\n}\n\n/* Menu mode: auto width instead of matching trigger */\n.oc-dropdown--menu .oc-dropdown__menu {\n right: auto;\n min-width: 180px;\n}\n\n@keyframes oc-dropdown-enter {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes oc-dropdown-enter-up {\n from {\n opacity: 0;\n transform: translateY(4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* \u2500\u2500\u2500 Search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__search {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 10px 14px;\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-dropdown__search-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--oc-fg-secondary);\n}\n\n.oc-dropdown__search-input {\n flex: 1;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n outline: none;\n min-width: 0;\n}\n\n.oc-dropdown__search-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-dropdown__search-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n flex-shrink: 0;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-dropdown__search-clear:hover {\n color: var(--oc-fg-primary);\n}\n\n/* \u2500\u2500\u2500 Options container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__options {\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: var(--oc-spacing-xs);\n}\n\n/* Scrollbar styling */\n.oc-dropdown__options::-webkit-scrollbar {\n width: 6px;\n}\n\n.oc-dropdown__options::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.oc-dropdown__options::-webkit-scrollbar-thumb {\n background: var(--oc-border-default);\n border-radius: 3px;\n}\n\n.oc-dropdown__options::-webkit-scrollbar-thumb:hover {\n background: var(--oc-border-strong);\n}\n\n/* \u2500\u2500\u2500 Option \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__option {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 10px 14px;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n user-select: none;\n}\n\n.oc-dropdown__option:hover:not(.oc-dropdown__option--disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-dropdown__option--focused {\n background: rgba(15, 118, 110, 0.1);\n}\n\n.oc-dropdown__option--focused:hover {\n background: rgba(15, 118, 110, 0.1);\n}\n\n.oc-dropdown__option--selected {\n color: var(--oc-accent);\n font-weight: 500;\n}\n\n.oc-dropdown__option--selected.oc-dropdown__option--focused {\n background: rgba(15, 118, 110, 0.15);\n}\n\n.oc-dropdown__option--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-dropdown__option-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: currentColor;\n}\n\n.oc-dropdown__option-icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-dropdown__option-icon-img {\n width: 16px;\n height: 16px;\n object-fit: contain;\n border-radius: 2px;\n}\n\n.oc-dropdown__option-content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n.oc-dropdown__option-label {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-dropdown__option-description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-normal);\n margin-top: 1px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-dropdown__option--selected .oc-dropdown__option-description {\n color: var(--oc-accent);\n opacity: 0.7;\n}\n\n.oc-dropdown__option-check {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--oc-accent);\n margin-left: auto;\n}\n\n/* \u2500\u2500\u2500 Menu-mode compound items (Dropdown.Item) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 10px 14px;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n user-select: none;\n}\n\n.oc-dropdown__item:hover:not(.oc-dropdown__item--disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-dropdown__item--focused {\n background: rgba(15, 118, 110, 0.1);\n}\n\n.oc-dropdown__item--focused:hover {\n background: rgba(15, 118, 110, 0.1);\n}\n\n.oc-dropdown__item--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-dropdown__item-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--oc-fg-secondary);\n}\n\n.oc-dropdown__item-icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-dropdown__item-label {\n flex: 1;\n min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Divider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__divider {\n height: 1px;\n margin: var(--oc-spacing-xs) 0;\n background: var(--oc-border-default);\n}\n\n/* \u2500\u2500\u2500 Header (group label) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__header {\n padding: var(--oc-spacing-sm) 14px var(--oc-spacing-xs);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n user-select: none;\n}\n\n/* \u2500\u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__empty {\n padding: var(--oc-spacing-lg);\n text-align: center;\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n}\n\n/* \u2500\u2500\u2500 Loading state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__loading {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-dropdown__loading-more {\n display: flex;\n justify-content: center;\n padding: var(--oc-spacing-sm);\n}\n\n/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (max-width: 600px) {\n .oc-dropdown__trigger {\n min-height: 44px;\n }\n\n .oc-dropdown--fluid .oc-dropdown__menu {\n left: 0;\n right: 0;\n }\n}\n\n";
2579
+ declare const allStyles = "\n/* OpenContracts Design System - All Component Styles */\n\n/* Base utilities, tokens, and shared keyframes (must be first) */\n\n/* ============================================\n CSS Custom Properties - Design Tokens\n ============================================ */\n:root {\n /* ===========================================\n COLOR SYSTEM - Professional Legal Theme\n =========================================== */\n\n /* Accent: Deep Teal - professional, authoritative */\n --oc-accent: #0F766E;\n --oc-accent-hover: #0D9488;\n --oc-accent-active: #115E59;\n\n /* Foreground: Slate scale */\n --oc-fg-primary: #1E293B;\n --oc-fg-secondary: #475569;\n --oc-fg-tertiary: #94A3B8;\n --oc-fg-inverse: #FFFFFF;\n\n /* Background: Warm neutral surfaces */\n --oc-bg-canvas: #FAFAFA;\n --oc-bg-surface: #FFFFFF;\n --oc-bg-surface-hover: #F8FAFC;\n --oc-bg-subtle: #F1F5F9;\n --oc-bg-sidebar: #0F172A;\n\n /* Borders: Cool slate */\n --oc-border-default: #E2E8F0;\n --oc-border-strong: #CBD5E1;\n\n /* Semantic colors */\n --oc-success: #059669;\n --oc-warning: #D97706;\n --oc-error: #DC2626;\n --oc-success-bg: #ECFDF5;\n --oc-warning-bg: #FFFBEB;\n --oc-error-bg: #FEF2F2;\n\n /* ===========================================\n SPACING\n =========================================== */\n --oc-spacing-xs: 4px;\n --oc-spacing-sm: 8px;\n --oc-spacing-md: 16px;\n --oc-spacing-lg: 24px;\n --oc-spacing-xl: 32px;\n --oc-spacing-2xl: 48px;\n\n /* ===========================================\n RADIUS - Refined, slightly softer corners\n =========================================== */\n --oc-radius-sm: 6px;\n --oc-radius-md: 8px;\n --oc-radius-lg: 12px;\n --oc-radius-full: 9999px;\n\n /* ===========================================\n TYPOGRAPHY\n =========================================== */\n --oc-font-size-xs: 11px;\n --oc-font-size-sm: 13px;\n --oc-font-size-md: 15px;\n --oc-font-size-lg: 17px;\n --oc-font-size-xl: 20px;\n --oc-font-size-2xl: 24px;\n --oc-font-size-3xl: 32px;\n\n /* Line heights */\n --oc-line-height-tight: 1.25;\n --oc-line-height-normal: 1.5;\n --oc-line-height-relaxed: 1.75;\n\n /* ===========================================\n ANIMATION\n =========================================== */\n --oc-duration-fast: 0.15s;\n --oc-duration-normal: 0.2s;\n --oc-duration-slow: 0.3s;\n --oc-duration-spin: 0.8s;\n\n /* Easing curves */\n --oc-easing-default: cubic-bezier(0.4, 0, 0.2, 1);\n --oc-easing-enter: cubic-bezier(0, 0, 0.2, 1);\n --oc-easing-exit: cubic-bezier(0.4, 0, 1, 1);\n --oc-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n\n /* ===========================================\n Z-INDEX SCALE\n =========================================== */\n --oc-z-dropdown: 100;\n --oc-z-sticky: 200;\n --oc-z-overlay: 300;\n --oc-z-modal: 400;\n --oc-z-popover: 500;\n --oc-z-tooltip: 600;\n\n /* ===========================================\n OPACITY\n =========================================== */\n --oc-opacity-disabled: 0.5;\n --oc-opacity-loading: 0.7;\n --oc-opacity-hover: 0.04;\n --oc-opacity-focus-ring: 0.2;\n --oc-opacity-overlay: 0.6;\n\n /* Breakpoints (for reference in JS, media queries use values directly) */\n --oc-breakpoint-sm: 640px;\n --oc-breakpoint-md: 768px;\n --oc-breakpoint-lg: 1024px;\n --oc-breakpoint-xl: 1280px;\n\n /* ===========================================\n SHADOWS - Subtle, clean\n =========================================== */\n --oc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);\n --oc-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.03);\n --oc-shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 15px rgba(15, 23, 42, 0.04);\n --oc-shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.06), 0 20px 25px rgba(15, 23, 42, 0.05);\n --oc-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.03);\n --oc-shadow-accent: 0 4px 14px rgba(15, 118, 110, 0.2);\n --oc-shadow-accent-lg: 0 8px 24px rgba(15, 118, 110, 0.25);\n}\n\n/* ============================================\n Focus Ring Utility\n ============================================ */\n.oc-focus-ring:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Focus ring with glow effect (for inputs, etc.) */\n.oc-focus-glow:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px rgba(15, 118, 110, var(--oc-opacity-focus-ring, 0.15));\n}\n\n/* ============================================\n Disabled State Utility\n ============================================ */\n.oc-disabled,\n[disabled] {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ============================================\n Loading State Utility\n ============================================ */\n.oc-loading {\n cursor: wait;\n pointer-events: none;\n}\n\n.oc-loading > * {\n opacity: var(--oc-opacity-loading, 0.7);\n}\n\n/* ============================================\n Shared Keyframe Animations\n ============================================ */\n\n/* Spinner rotation - used by Button, IconButton, Progress, SearchInput */\n@keyframes oc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Fade in with slight scale - used by Modal, Tooltip, Popover */\n@keyframes oc-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* Fade out with slight scale */\n@keyframes oc-fade-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* Slide up fade - used by chat messages, toasts */\n@keyframes oc-slide-up-fade {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Slide down fade - for dropdowns */\n@keyframes oc-slide-down-fade {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Pulse animation - for skeleton loading, thinking indicators */\n@keyframes oc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Bounce animation - for typing indicators */\n@keyframes oc-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-8px);\n }\n}\n\n/* Shimmer animation - for skeleton loading */\n@keyframes oc-shimmer {\n from { transform: translateX(-100%); }\n to { transform: translateX(100%); }\n}\n\n/* ============================================\n Transition Utilities\n ============================================ */\n.oc-transition-fast {\n transition-duration: var(--oc-duration-fast, 0.15s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-normal {\n transition-duration: var(--oc-duration-normal, 0.25s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-slow {\n transition-duration: var(--oc-duration-slow, 0.4s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-spring {\n transition-timing-function: var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1));\n}\n\n/* ============================================\n Flexbox Utilities\n ============================================ */\n.oc-flex-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-flex-between {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.oc-flex-start {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n/* ============================================\n Text Utilities\n ============================================ */\n.oc-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.oc-line-clamp-2 {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ============================================\n Accessibility: Reduced Motion\n ============================================ */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* ============================================\n Screen Reader Only\n ============================================ */\n.oc-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n/* ============================================\n Premium Polish Effects\n ============================================ */\n\n/* Frosted glass overlay effect */\n.oc-frosted {\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n}\n\n.oc-frosted-light {\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n}\n\n/* Interactive lift effect on hover */\n.oc-lift {\n transition: transform var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-lift:hover {\n transform: translateY(-2px);\n}\n\n/* Press effect */\n.oc-press:active {\n transform: translateY(1px);\n}\n\n/* Focus glow effect for inputs */\n.oc-focus-glow-input:focus-within {\n box-shadow: var(--oc-shadow-inner, inset 0 1px 2px rgba(15, 23, 42, 0.03)),\n 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Smooth color transitions */\n.oc-color-transition {\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n/* ============================================\n Typography Polish\n ============================================ */\n\n/* Professional font feature settings */\n.oc-text {\n font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Heading typography - tighter letter-spacing for polish */\n.oc-heading {\n font-feature-settings: 'kern' 1, 'liga' 1;\n letter-spacing: -0.02em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Small caps for labels */\n.oc-label {\n font-feature-settings: 'kern' 1, 'smcp' 1;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n\n/* Tabular numbers for data */\n.oc-tabular {\n font-feature-settings: 'tnum' 1, 'kern' 1;\n}\n\n/* ============================================\n Staggered List Animations\n ============================================ */\n\n/* Base stagger animation */\n@keyframes oc-stagger-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Stagger animation utilities - apply to list items */\n.oc-stagger > * {\n animation: oc-stagger-in var(--oc-duration-normal, 0.25s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger > *:nth-child(6) { animation-delay: 250ms; }\n.oc-stagger > *:nth-child(7) { animation-delay: 300ms; }\n.oc-stagger > *:nth-child(8) { animation-delay: 350ms; }\n.oc-stagger > *:nth-child(9) { animation-delay: 400ms; }\n.oc-stagger > *:nth-child(10) { animation-delay: 450ms; }\n\n/* Fast stagger (25ms intervals) */\n.oc-stagger-fast > * {\n animation: oc-stagger-in var(--oc-duration-fast, 0.15s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger-fast > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-fast > *:nth-child(2) { animation-delay: 25ms; }\n.oc-stagger-fast > *:nth-child(3) { animation-delay: 50ms; }\n.oc-stagger-fast > *:nth-child(4) { animation-delay: 75ms; }\n.oc-stagger-fast > *:nth-child(5) { animation-delay: 100ms; }\n.oc-stagger-fast > *:nth-child(6) { animation-delay: 125ms; }\n.oc-stagger-fast > *:nth-child(7) { animation-delay: 150ms; }\n.oc-stagger-fast > *:nth-child(8) { animation-delay: 175ms; }\n.oc-stagger-fast > *:nth-child(9) { animation-delay: 200ms; }\n.oc-stagger-fast > *:nth-child(10) { animation-delay: 225ms; }\n\n/* Scale stagger - for cards/grid items */\n@keyframes oc-stagger-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.oc-stagger-scale > * {\n animation: oc-stagger-scale-in var(--oc-duration-normal, 0.25s) var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;\n}\n\n.oc-stagger-scale > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-scale > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger-scale > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger-scale > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger-scale > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger-scale > *:nth-child(6) { animation-delay: 250ms; }\n\n\n\n/* AppShell - Main Application Container */\n.oc-app-shell {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n background: var(--oc-bg-canvas);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-app-shell--fixed {\n height: 100vh;\n overflow: hidden;\n}\n\n/* AppShell Sidebar */\n.oc-app-shell-sidebar {\n --sidebar-width: 260px;\n position: relative;\n width: var(--sidebar-width);\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-surface);\n transition: width var(--oc-duration-normal) var(--oc-easing-default),\n margin var(--oc-duration-normal) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-app-shell-sidebar--bordered {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-sidebar--closed {\n width: 0;\n margin-left: calc(var(--sidebar-width) * -1);\n}\n\n.oc-app-shell-sidebar__content {\n width: var(--sidebar-width);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* AppShell Main */\n.oc-app-shell-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n background: var(--oc-bg-canvas);\n}\n\n/* AppShell Header */\n.oc-app-shell-header {\n --header-height: 56px;\n height: var(--header-height);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: 0 var(--oc-spacing-lg);\n background: var(--oc-bg-canvas);\n}\n\n.oc-app-shell-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-header--fixed {\n position: sticky;\n top: 0;\n z-index: var(--oc-z-sticky);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n background: rgba(255, 255, 255, 0.9);\n}\n\n/* Layout composition helpers */\n.oc-app-shell > .oc-app-shell-header {\n order: -1;\n}\n\n/* Horizontal layout for sidebar + main */\n.oc-app-shell:has(.oc-app-shell-sidebar) {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.oc-app-shell:has(.oc-app-shell-sidebar) > .oc-app-shell-header {\n width: 100%;\n flex-basis: 100%;\n}\n\n/* Dark sidebar variant */\n.oc-app-shell-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n border-right-color: rgba(255, 255, 255, 0.1);\n}\n\n\n\n/* PageHeader Component */\n.oc-page-header {\n padding: var(--oc-spacing-lg) var(--oc-spacing-xl);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Breadcrumbs */\n.oc-page-header__breadcrumbs {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-breadcrumbs {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--oc-spacing-xs);\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-breadcrumbs__item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-breadcrumbs__separator {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-breadcrumbs__link {\n color: var(--oc-fg-secondary);\n text-decoration: none;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n padding: 2px 0;\n}\n\n.oc-breadcrumbs__link:hover {\n color: var(--oc-accent);\n}\n\n.oc-breadcrumbs__current {\n color: var(--oc-fg-primary);\n font-weight: 500;\n}\n\n/* Header Row */\n.oc-page-header__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-lg);\n}\n\n.oc-page-header__content {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-md);\n min-width: 0;\n flex: 1;\n}\n\n.oc-page-header__back {\n flex-shrink: 0;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n margin-top: 2px;\n}\n\n.oc-page-header__back:hover {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n color: var(--oc-fg-primary);\n}\n\n.oc-page-header__text {\n min-width: 0;\n}\n\n.oc-page-header__title {\n margin: 0;\n font-size: var(--oc-font-size-2xl);\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-page-header__subtitle {\n margin: var(--oc-spacing-xs) 0 0;\n font-size: var(--oc-font-size-md);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-page-header__actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n}\n\n/* Tabs */\n.oc-page-header__tabs {\n margin-top: var(--oc-spacing-lg);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* Compact variant */\n.oc-page-header--compact {\n padding: var(--oc-spacing-md) var(--oc-spacing-lg);\n}\n\n.oc-page-header--compact .oc-page-header__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Bordered variant */\n.oc-page-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* With accent bar */\n.oc-page-header--accent {\n position: relative;\n}\n\n.oc-page-header--accent::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--oc-accent);\n}\n\n\n\n/* SplitPane Component */\n.oc-split-pane {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-split-pane--horizontal {\n flex-direction: row;\n}\n\n.oc-split-pane--vertical {\n flex-direction: column;\n}\n\n.oc-split-pane--dragging {\n user-select: none;\n}\n\n/* Panes */\n.oc-split-pane__pane {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.oc-split-pane__pane--first {\n flex-shrink: 0;\n}\n\n.oc-split-pane__pane--second {\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n\n/* Handle */\n.oc-split-pane__handle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal > .oc-split-pane__handle {\n width: 8px;\n cursor: col-resize;\n}\n\n.oc-split-pane--vertical > .oc-split-pane__handle {\n height: 8px;\n cursor: row-resize;\n}\n\n.oc-split-pane__handle:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n}\n\n.oc-split-pane__handle-bar {\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal .oc-split-pane__handle-bar {\n width: 2px;\n height: 32px;\n}\n\n.oc-split-pane--vertical .oc-split-pane__handle-bar {\n height: 2px;\n width: 32px;\n}\n\n.oc-split-pane__handle:hover .oc-split-pane__handle-bar,\n.oc-split-pane--dragging .oc-split-pane__handle-bar {\n background: var(--oc-accent);\n}\n\n/* Generic Pane */\n.oc-pane {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Panel with header pattern */\n.oc-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-panel__header {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm, 8px) var(--oc-spacing-md, 16px);\n border-bottom: 1px solid var(--oc-border-default, #E5E5E5);\n min-height: 48px;\n}\n\n.oc-panel__title {\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-panel__content {\n flex: 1;\n overflow: auto;\n}\n\n\n\n/* Stack Component */\n.oc-stack {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Spacer */\n.oc-spacer {\n flex: 1;\n}\n\n/* Divider */\n.oc-divider {\n flex-shrink: 0;\n background: var(--oc-border-default, #E5E5E5);\n}\n\n.oc-divider--horizontal {\n height: 1px;\n width: 100%;\n}\n\n.oc-divider--vertical {\n width: 1px;\n align-self: stretch;\n}\n\n/* Box - generic container with padding */\n.oc-box {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-box--padding-none { padding: 0; }\n.oc-box--padding-xs { padding: var(--oc-spacing-xs, 4px); }\n.oc-box--padding-sm { padding: var(--oc-spacing-sm, 8px); }\n.oc-box--padding-md { padding: var(--oc-spacing-md, 16px); }\n.oc-box--padding-lg { padding: var(--oc-spacing-lg, 24px); }\n.oc-box--padding-xl { padding: var(--oc-spacing-xl, 32px); }\n\n/* Center - center content both ways */\n.oc-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Container - max-width constrained container */\n.oc-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--oc-spacing-md, 16px);\n padding-right: var(--oc-spacing-md, 16px);\n}\n\n.oc-container--sm { max-width: 640px; }\n.oc-container--md { max-width: 768px; }\n.oc-container--lg { max-width: 1024px; }\n.oc-container--xl { max-width: 1280px; }\n.oc-container--full { max-width: 100%; }\n\n\n\n/* ScrollArea Component */\n.oc-scroll-area {\n position: relative;\n overflow: hidden;\n}\n\n/* Scroll behavior */\n.oc-scroll-area--vertical {\n overflow-y: auto;\n}\n\n.oc-scroll-area--horizontal {\n overflow-x: auto;\n}\n\n.oc-scroll-area--vertical.oc-scroll-area--horizontal {\n overflow: auto;\n}\n\n/* Type variants */\n.oc-scroll-area--auto {\n overflow-y: auto;\n}\n\n.oc-scroll-area--always {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--scroll {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--hover {\n overflow-y: hidden;\n}\n\n.oc-scroll-area--hover:hover {\n overflow-y: auto;\n}\n\n/* Custom styled scrollbars */\n.oc-scroll-area--styled {\n scrollbar-width: thin;\n scrollbar-color: var(--oc-border-strong, #CCCCCC) transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb {\n background: var(--oc-border-strong, #CCCCCC);\n border-radius: 4px;\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb:hover {\n background: var(--oc-fg-tertiary, #9B9B9B);\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n/* Thin scrollbar variant */\n.oc-scroll-area--thin::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n/* Dark mode scrollbar */\n.oc-scroll-area--dark {\n scrollbar-color: rgba(255, 255, 255, 0.3) transparent;\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.3);\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.5);\n}\n\n\n\n/* Card Component */\n.oc-card {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Variants */\n.oc-card--elevated {\n box-shadow: var(--oc-shadow-md);\n}\n\n.oc-card--flat {\n box-shadow: none;\n}\n\n.oc-card--outlined {\n box-shadow: none;\n border: 1px solid var(--oc-border-default);\n}\n\n/* Padding */\n.oc-card--padding-none {\n padding: 0;\n}\n\n.oc-card--padding-sm {\n padding: var(--oc-spacing-sm);\n}\n\n.oc-card--padding-md {\n padding: var(--oc-spacing-md);\n}\n\n.oc-card--padding-lg {\n padding: var(--oc-spacing-lg);\n}\n\n/* Interactive */\n.oc-card--interactive {\n cursor: pointer;\n transition: box-shadow var(--oc-duration-fast) var(--oc-easing-default),\n transform var(--oc-duration-fast) var(--oc-easing-default),\n border-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-card--interactive:hover {\n box-shadow: var(--oc-shadow-lg);\n transform: translateY(-2px);\n}\n\n.oc-card--interactive.oc-card--outlined:hover {\n border-color: var(--oc-border-strong);\n}\n\n.oc-card--interactive:active {\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Card Header */\n.oc-card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-card-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-card-header__title {\n font-size: var(--oc-font-size-lg);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-card-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-card-header__action {\n flex-shrink: 0;\n}\n\n/* Card Body */\n.oc-card-body {\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Card Footer */\n.oc-card-footer {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n margin-top: var(--oc-spacing-md);\n padding-top: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n}\n\n\n\n/* Sidebar Component */\n.oc-sidebar {\n display: flex;\n flex-direction: column;\n width: 260px;\n height: 100%;\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: width var(--oc-duration-normal) var(--oc-easing-default);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-sidebar--collapsed {\n width: 64px;\n}\n\n/* Sidebar Header */\n.oc-sidebar-header {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n min-height: 56px;\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-sidebar-header__logo {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-accent);\n border-radius: var(--oc-radius-md);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-header__title {\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-primary);\n}\n\n/* Sidebar Nav */\n.oc-sidebar-nav {\n flex: 1;\n overflow-y: auto;\n padding: var(--oc-spacing-sm);\n}\n\n/* Sidebar Section */\n.oc-sidebar-section {\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-sidebar-section:first-child {\n margin-top: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__title {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary);\n padding: var(--oc-spacing-sm);\n margin-bottom: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__items {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n/* Sidebar Item */\n.oc-sidebar-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: 8px 12px;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n position: relative;\n}\n\n.oc-sidebar-item:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active:hover {\n background: var(--oc-accent-hover);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-sidebar-item--disabled:hover {\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-sidebar-item__icon {\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon,\n.oc-sidebar-item--active:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item__label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-sidebar-item__badge {\n flex-shrink: 0;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__badge {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* Sidebar Footer */\n.oc-sidebar-footer {\n padding: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n margin-top: auto;\n}\n\n/* Dark variant */\n.oc-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-header {\n border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.oc-sidebar--dark .oc-sidebar-header__title {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-section__title {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.oc-sidebar--dark .oc-sidebar-item {\n color: rgba(255, 255, 255, 0.7);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover {\n background: rgba(255, 255, 255, 0.08);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.9);\n}\n\n.oc-sidebar--dark .oc-sidebar-footer {\n border-top-color: rgba(255, 255, 255, 0.1);\n}\n\n\n\n /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVBAR - Top Navigation Bar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n .oc-navbar {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n padding: 12px 24px;\n background: var(--oc-bg-sidebar, #0F172A);\n color: white;\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n }\n\n .oc-navbar__left {\n display: flex;\n align-items: center;\n gap: 32px;\n }\n\n /* Brand */\n .oc-navbar__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n color: white;\n }\n\n .oc-navbar__logo {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oc-navbar__brand-name {\n font-weight: 600;\n font-size: 15px;\n white-space: nowrap;\n }\n\n .oc-navbar__version.oc-chip {\n --chip-bg: rgba(255, 255, 255, 0.1);\n --chip-border: rgba(255, 255, 255, 0.2);\n --chip-text: rgba(255, 255, 255, 0.8);\n }\n\n /* Desktop Navigation */\n .oc-navbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .oc-navbar__link {\n padding: 8px 12px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n border-radius: 6px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Right Side */\n .oc-navbar__right {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .oc-navbar__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n /* User Dropdown */\n .oc-navbar-user {\n position: relative;\n }\n\n .oc-navbar-user__trigger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px 6px 6px;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .oc-navbar-user__trigger:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar-user__name {\n font-size: 14px;\n font-weight: 500;\n }\n\n .oc-navbar-user__chevron {\n transition: transform 0.2s ease;\n opacity: 0.7;\n }\n\n .oc-navbar-user__chevron--open {\n transform: rotate(180deg);\n }\n\n .oc-navbar-user__backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--oc-z-dropdown, 100);\n }\n\n .oc-navbar-user__menu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n min-width: 180px;\n padding: 6px;\n background: var(--oc-bg-surface, white);\n border-radius: 10px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n z-index: calc(var(--oc-z-dropdown, 100) + 1);\n animation: oc-navbar-dropdown-slide 0.15s ease;\n }\n\n @keyframes oc-navbar-dropdown-slide {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .oc-navbar-user__item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 12px;\n background: transparent;\n border: none;\n border-radius: 6px;\n color: var(--oc-fg-secondary, #475569);\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .oc-navbar-user__item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n }\n\n .oc-navbar-user__item--danger {\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item--danger:hover {\n background: var(--oc-error-bg, #FEF2F2);\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n }\n\n .oc-navbar-user__divider {\n height: 1px;\n margin: 6px 0;\n background: var(--oc-border-default, #E2E8F0);\n }\n\n /* Mobile Menu Toggle */\n .oc-navbar__mobile-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: none;\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .oc-navbar__mobile-toggle:hover {\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Mobile Menu */\n .oc-navbar__mobile-menu {\n display: none;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 16px 0 8px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin-top: 12px;\n }\n\n .oc-navbar__mobile-link {\n padding: 12px 16px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n border-radius: 8px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__mobile-link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__mobile-link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Responsive */\n @media (max-width: 1100px) {\n .oc-navbar__nav {\n display: none;\n }\n\n .oc-navbar__mobile-toggle {\n display: flex;\n }\n\n .oc-navbar__mobile-menu {\n display: flex;\n }\n }\n\n @media (max-width: 768px) {\n .oc-navbar {\n padding: 12px 16px;\n }\n\n .oc-navbar-user__name,\n .oc-navbar-user__chevron {\n display: none;\n }\n\n .oc-navbar-user__trigger {\n padding: 4px;\n }\n\n .oc-navbar__version {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .oc-navbar__brand-name {\n display: none;\n }\n }\n\n\n\n/* Modal Overlay */\n.oc-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--oc-spacing-md);\n z-index: var(--oc-z-modal);\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Modal */\n.oc-modal {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-xl);\n max-height: calc(100vh - 32px);\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-normal) var(--oc-easing-spring);\n}\n\n/* Modal Sizes */\n.oc-modal--sm { width: 100%; max-width: 400px; }\n.oc-modal--md { width: 100%; max-width: 500px; }\n.oc-modal--lg { width: 100%; max-width: 640px; }\n.oc-modal--xl { width: 100%; max-width: 800px; }\n.oc-modal--full { width: 100%; max-width: calc(100vw - 32px); height: calc(100vh - 32px); }\n.oc-modal--fullscreen { width: 100vw; max-width: 100vw; height: 100vh; border-radius: 0; }\n\n/* Fullscreen overlay removes padding */\n.oc-modal-overlay:has(.oc-modal--fullscreen) {\n padding: 0;\n}\n\n/* Modal Header */\n.oc-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-lg);\n padding-bottom: 0;\n}\n\n.oc-modal-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-modal-header__title {\n font-size: var(--oc-font-size-xl);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-modal-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n/* Close Button */\n.oc-modal-close {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: background var(--oc-duration-fast) var(--oc-easing-default),\n color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-modal-close:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n/* Modal Body */\n.oc-modal-body {\n flex: 1;\n min-height: 0;\n padding: var(--oc-spacing-lg);\n overflow-y: auto;\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Modal Footer */\n.oc-modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n padding-top: 0;\n}\n\n\n\n/* Tooltip Trigger */\n.oc-tooltip-trigger {\n display: inline-flex;\n}\n\n/* Tooltip */\n.oc-tooltip {\n position: absolute;\n z-index: var(--oc-z-tooltip);\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: var(--oc-font-size-xs);\n border-radius: var(--oc-radius-md);\n white-space: nowrap;\n pointer-events: none;\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Placement */\n.oc-tooltip--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-tooltip--bottom {\n transform: translateX(-50%);\n}\n\n.oc-tooltip--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-tooltip--right {\n transform: translateY(-50%);\n}\n\n\n\n/* Popover Trigger */\n.oc-popover-trigger {\n display: inline-flex;\n}\n\n/* Popover */\n.oc-popover {\n position: absolute;\n z-index: var(--oc-z-popover, 1000);\n min-width: 200px;\n padding: var(--oc-spacing-md);\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.1));\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-popover-fade-in 0.15s ease-out;\n}\n\n@keyframes oc-popover-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n/* Placement */\n.oc-popover--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-popover--bottom {\n transform: translateX(-50%);\n}\n\n.oc-popover--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-popover--right {\n transform: translateY(-50%);\n}\n\n\n\n/* Avatar Component */\n.oc-avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: linear-gradient(135deg, #E5E5E5 0%, #D4D4D4 100%);\n color: var(--oc-fg-secondary, #6B6B6B);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 600;\n overflow: hidden;\n flex-shrink: 0;\n user-select: none;\n}\n\n.oc-avatar--square {\n border-radius: var(--oc-radius-md, 8px);\n}\n\n/* Sizes */\n.oc-avatar--xs { font-size: 10px; }\n.oc-avatar--sm { font-size: 12px; }\n.oc-avatar--md { font-size: 14px; }\n.oc-avatar--lg { font-size: 16px; }\n.oc-avatar--xl { font-size: 20px; }\n\n/* Accent variant (for AI/system) */\n.oc-avatar--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n/* Image */\n.oc-avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Fallback */\n.oc-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n/* Status indicator */\n.oc-avatar__status {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 25%;\n height: 25%;\n min-width: 8px;\n min-height: 8px;\n border-radius: 50%;\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n.oc-avatar__status--online {\n background: var(--oc-success, #10B981);\n}\n\n.oc-avatar__status--offline {\n background: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-avatar__status--busy {\n background: var(--oc-error, #EF4444);\n}\n\n.oc-avatar__status--away {\n background: var(--oc-warning, #F59E0B);\n}\n\n/* AI Avatar */\n.oc-avatar--ai {\n background: var(--oc-accent);\n animation: oc-avatar-ai-pulse 3s ease-in-out infinite;\n}\n\n@keyframes oc-avatar-ai-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(8, 145, 178, 0);\n }\n}\n\n.oc-avatar__ai-icon {\n width: 60%;\n height: 60%;\n}\n\n/* Avatar Group */\n.oc-avatar-group {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-avatar-group__item {\n margin-left: -8px;\n}\n\n.oc-avatar-group__item:first-child {\n margin-left: 0;\n}\n\n.oc-avatar-group__item .oc-avatar {\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n\n\n/* Chip Component */\n.oc-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-chip--static {\n cursor: default;\n}\n\n/* Sizes */\n.oc-chip--sm {\n height: 24px;\n padding: 0 10px;\n font-size: 12px;\n}\n\n.oc-chip--md {\n height: 32px;\n padding: 0 14px;\n font-size: 13px;\n}\n\n.oc-chip--lg {\n height: 40px;\n padding: 0 18px;\n font-size: 14px;\n}\n\n/* Icons */\n.oc-chip__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-chip--sm .oc-chip__icon { margin-left: -2px; }\n.oc-chip--md .oc-chip__icon { margin-left: -4px; }\n.oc-chip--lg .oc-chip__icon { margin-left: -4px; }\n\n.oc-chip__icon--end {\n margin-left: 0 !important;\n}\n\n.oc-chip--sm .oc-chip__icon--end { margin-right: -2px; }\n.oc-chip--md .oc-chip__icon--end { margin-right: -4px; }\n.oc-chip--lg .oc-chip__icon--end { margin-right: -4px; }\n\n/* Label */\n.oc-chip__label {\n display: flex;\n align-items: center;\n}\n\n/* Remove button */\n.oc-chip__remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin-left: 2px;\n border: none;\n background: transparent;\n color: inherit;\n opacity: 0.6;\n cursor: pointer;\n border-radius: 50%;\n transition: opacity 0.15s ease, background 0.15s ease;\n}\n\n.oc-chip--sm .oc-chip__remove { margin-right: -4px; width: 16px; height: 16px; }\n.oc-chip--md .oc-chip__remove { margin-right: -6px; width: 20px; height: 20px; }\n.oc-chip--lg .oc-chip__remove { margin-right: -6px; width: 24px; height: 24px; }\n\n.oc-chip__remove:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n/* ========== VARIANTS ========== */\n\n/* Filled */\n.oc-chip--filled.oc-chip--default {\n background: var(--oc-fg-primary, #1A1A1A);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chip--filled.oc-chip--success {\n background: linear-gradient(135deg, var(--oc-success, #10B981) 0%, #059669 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--warning {\n background: linear-gradient(135deg, var(--oc-warning, #F59E0B) 0%, #D97706 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--error {\n background: linear-gradient(135deg, var(--oc-error, #EF4444) 0%, #DC2626 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--info {\n background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);\n color: white;\n}\n\n/* Soft */\n.oc-chip--soft.oc-chip--default {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chip--soft.oc-chip--accent {\n background: rgba(8, 145, 178, 0.1);\n color: var(--oc-accent);\n}\n\n.oc-chip--soft.oc-chip--success {\n background: var(--oc-success-bg, #ECFDF5);\n color: #059669;\n}\n\n.oc-chip--soft.oc-chip--warning {\n background: var(--oc-warning-bg, #FFFBEB);\n color: #B45309;\n}\n\n.oc-chip--soft.oc-chip--error {\n background: var(--oc-error-bg, #FEF2F2);\n color: #DC2626;\n}\n\n.oc-chip--soft.oc-chip--info {\n background: #EFF6FF;\n color: #2563EB;\n}\n\n/* Outlined */\n.oc-chip--outlined {\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E5E5E5);\n}\n\n.oc-chip--outlined.oc-chip--default {\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n.oc-chip--outlined.oc-chip--accent {\n box-shadow: inset 0 0 0 1px var(--oc-accent);\n color: var(--oc-accent);\n}\n\n.oc-chip--outlined.oc-chip--success {\n box-shadow: inset 0 0 0 1px var(--oc-success, #10B981);\n color: #059669;\n}\n\n.oc-chip--outlined.oc-chip--warning {\n box-shadow: inset 0 0 0 1px var(--oc-warning, #F59E0B);\n color: #B45309;\n}\n\n.oc-chip--outlined.oc-chip--error {\n box-shadow: inset 0 0 0 1px var(--oc-error, #EF4444);\n color: #DC2626;\n}\n\n.oc-chip--outlined.oc-chip--info {\n box-shadow: inset 0 0 0 1px #3B82F6;\n color: #2563EB;\n}\n\n/* Hover states */\n.oc-chip:not(.oc-chip--static):hover {\n transform: translateY(-1px);\n}\n\n.oc-chip--soft:not(.oc-chip--static):hover {\n filter: brightness(0.95);\n}\n\n.oc-chip--outlined:not(.oc-chip--static):hover {\n background: var(--oc-bg-surface, #F8F8F8);\n}\n\n.oc-chip--filled:not(.oc-chip--static):hover {\n filter: brightness(1.05);\n}\n\n/* Selected state */\n.oc-chip--selected {\n box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2);\n}\n\n/* Active state */\n.oc-chip:not(.oc-chip--static):active {\n transform: translateY(0);\n}\n\n/* Chip Group */\n.oc-chip-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n\n.oc-chip-group--gap-sm {\n gap: 6px;\n}\n\n.oc-chip-group--gap-md {\n gap: 10px;\n}\n\n\n\n/* Source Card */\n.oc-source-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-lg, 12px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: all 0.15s ease;\n}\n\n.oc-source-card--clickable {\n cursor: pointer;\n}\n\n.oc-source-card--clickable:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n}\n\n.oc-source-card--inline {\n padding: 8px 12px;\n display: inline-flex;\n gap: 8px;\n}\n\n/* Document icon */\n.oc-source__icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 8px);\n background: linear-gradient(135deg, var(--icon-color, #6B6B6B) 0%, color-mix(in srgb, var(--icon-color, #6B6B6B), black 20%) 100%);\n color: white;\n position: relative;\n}\n\n.oc-source-card--inline .oc-source__icon {\n width: 32px;\n height: 32px;\n}\n\n.oc-source__icon svg {\n opacity: 0.3;\n}\n\n.oc-source__icon-label {\n position: absolute;\n font-size: 8px;\n font-weight: 700;\n letter-spacing: 0.05em;\n}\n\n/* Content */\n.oc-source-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-source-card__header {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-source-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-card__ref {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n white-space: nowrap;\n}\n\n.oc-source-card__excerpt {\n margin: 6px 0 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Score */\n.oc-source-card__score {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n}\n\n.oc-source-card__score-bar {\n width: 40px;\n height: 4px;\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-source-card__score-bar::after {\n content: '';\n display: block;\n width: var(--score, 0%);\n height: 100%;\n background: var(--oc-accent);\n border-radius: 2px;\n}\n\n.oc-source-card__score-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Arrow */\n.oc-source-card__arrow {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.15s ease;\n}\n\n.oc-source-card--clickable:hover .oc-source-card__arrow {\n transform: translateX(2px);\n color: var(--oc-accent);\n}\n\n/* Source Pill */\n.oc-source-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 28px;\n padding: 0 10px;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E5E5E5);\n border-radius: var(--oc-radius-md, 8px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-source-pill:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n border-color: var(--pill-color, var(--oc-border-strong, #CCCCCC));\n}\n\n.oc-source-pill__icon {\n display: flex;\n color: var(--pill-color, var(--oc-fg-tertiary, #9B9B9B));\n}\n\n.oc-source-pill__name {\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n max-width: 120px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-pill__ref {\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-weight: 400;\n}\n\n/* Source List */\n.oc-source-list {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-source-list__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.oc-source-list__title {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #6B6B6B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-source-list__count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-source-list__items {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n/* Citation marker */\n.oc-citation {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n margin: 0 2px;\n background: var(--oc-accent);\n color: white;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n font-weight: 600;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n transition: all 0.15s ease;\n box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);\n}\n\n.oc-citation:hover {\n transform: scale(1.1);\n box-shadow: 0 2px 6px rgba(8, 145, 178, 0.4);\n}\n\n\n\n/* ============ Chat Container ============ */\n.oc-chat-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n/* ============ Chat Message ============ */\n.oc-chat-message {\n display: flex;\n gap: 12px;\n max-width: 100%;\n animation: oc-message-in 0.3s ease;\n}\n\n@keyframes oc-message-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-chat-message__avatar {\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.oc-chat-message__container {\n flex: 1;\n min-width: 0;\n max-width: 720px;\n}\n\n/* User messages */\n.oc-chat-message--user {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message--user .oc-chat-message__container {\n align-items: flex-end;\n display: flex;\n flex-direction: column;\n}\n\n/* Header */\n.oc-chat-message__header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-chat-message--user .oc-chat-message__header {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message__name {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Bubble */\n.oc-chat-message__bubble {\n position: relative;\n padding: 14px 18px;\n border-radius: 18px;\n line-height: 1.6;\n}\n\n.oc-chat-message--assistant .oc-chat-message__bubble {\n background: var(--oc-bg-surface, #F8F8F8);\n border-top-left-radius: 4px;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message--user .oc-chat-message__bubble {\n background: var(--oc-accent);\n border-top-right-radius: 4px;\n color: white;\n box-shadow: 0 2px 12px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chat-message--system .oc-chat-message__bubble {\n background: transparent;\n padding: 8px 0;\n text-align: center;\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-size: 13px;\n}\n\n.oc-chat-message__content {\n font-size: 15px;\n}\n\n.oc-chat-message__content p {\n margin: 0 0 12px;\n}\n\n.oc-chat-message__content p:last-child {\n margin-bottom: 0;\n}\n\n/* Streaming cursor */\n.oc-chat-message__cursor {\n display: inline-block;\n width: 2px;\n height: 1.1em;\n background: var(--oc-accent);\n margin-left: 2px;\n vertical-align: text-bottom;\n animation: oc-cursor-blink 1s ease infinite;\n}\n\n@keyframes oc-cursor-blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\n/* Actions */\n.oc-chat-message__actions {\n margin-top: 8px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-chat-message:hover .oc-chat-message__actions {\n opacity: 1;\n}\n\n/* Error state */\n.oc-chat-message__error {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n font-size: 13px;\n color: var(--oc-error, #EF4444);\n}\n\n/* ============ Typing Indicator ============ */\n.oc-typing-indicator {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0;\n}\n\n.oc-typing-indicator__dots {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: 18px;\n border-top-left-radius: 4px;\n}\n\n.oc-typing-indicator__dot {\n width: 8px;\n height: 8px;\n background: var(--oc-fg-tertiary, #9B9B9B);\n border-radius: 50%;\n animation: oc-typing-bounce 1.4s ease infinite;\n}\n\n.oc-typing-indicator__dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.oc-typing-indicator__dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n@keyframes oc-typing-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n background: var(--oc-fg-tertiary);\n }\n 30% {\n transform: translateY(-8px);\n background: var(--oc-accent);\n }\n}\n\n.oc-typing-indicator__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n/* ============ Thinking Block ============ */\n.oc-thinking-block {\n background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(8, 145, 178, 0.02) 100%);\n border: 1px solid rgba(8, 145, 178, 0.15);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n margin: 12px 0;\n}\n\n.oc-thinking-block__header {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n text-align: left;\n}\n\n.oc-thinking-block__indicator {\n display: flex;\n gap: 3px;\n}\n\n.oc-thinking-block__dot {\n width: 6px;\n height: 6px;\n background: var(--oc-accent);\n border-radius: 50%;\n animation: oc-thinking-pulse 1.5s ease infinite;\n}\n\n.oc-thinking-block__dot:nth-child(2) { animation-delay: 0.3s; }\n.oc-thinking-block__dot:nth-child(3) { animation-delay: 0.6s; }\n\n@keyframes oc-thinking-pulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.2); }\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__dot {\n animation: none;\n opacity: 0.5;\n}\n\n.oc-thinking-block__title {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent);\n}\n\n.oc-thinking-block__chevron {\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.2s ease;\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__chevron {\n transform: rotate(180deg);\n}\n\n.oc-thinking-block__content {\n padding: 0 16px 16px;\n font-size: 13px;\n color: var(--oc-fg-secondary);\n line-height: 1.6;\n border-top: 1px solid rgba(8, 145, 178, 0.1);\n margin-top: 0;\n padding-top: 12px;\n}\n\n/* ============ Task Card ============ */\n.oc-task-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n border-left: 3px solid var(--oc-border-default);\n}\n\n.oc-task-card--running {\n border-left-color: var(--oc-accent);\n background: linear-gradient(90deg, rgba(8, 145, 178, 0.05) 0%, var(--oc-bg-surface) 100%);\n}\n\n.oc-task-card--completed {\n border-left-color: var(--oc-success, #10B981);\n}\n\n.oc-task-card--error {\n border-left-color: var(--oc-error, #EF4444);\n}\n\n.oc-task-card__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-task-card--pending .oc-task-card__icon { color: var(--oc-fg-tertiary); }\n.oc-task-card--running .oc-task-card__icon { color: var(--oc-accent); }\n.oc-task-card--completed .oc-task-card__icon { color: var(--oc-success); }\n.oc-task-card--error .oc-task-card__icon { color: var(--oc-error); }\n\n.oc-task-card__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(8, 145, 178, 0.2);\n border-top-color: var(--oc-accent);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n@keyframes oc-spin {\n to { transform: rotate(360deg); }\n}\n\n.oc-task-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-task-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-task-card__desc {\n font-size: 13px;\n color: var(--oc-fg-secondary);\n margin-top: 2px;\n}\n\n.oc-task-card__progress {\n margin-top: 8px;\n height: 4px;\n background: var(--oc-border-default);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-task-card__progress-bar {\n height: 100%;\n width: var(--progress, 0%);\n background: var(--oc-accent);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* ============ Message Actions ============ */\n.oc-message-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-action-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-action-button:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n}\n\n.oc-action-button--active {\n color: var(--oc-accent);\n}\n\n.oc-action-button--active:hover {\n color: var(--oc-accent);\n background: rgba(8, 145, 178, 0.1);\n}\n\n/* ============ Chat Input ============ */\n.oc-chat-input {\n flex-shrink: 0;\n padding: 16px 24px 24px;\n background: var(--oc-bg-canvas);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-chat-input__suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.oc-chat-input__container {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface);\n border-radius: 24px;\n border: 1px solid transparent;\n transition: all 0.2s ease;\n}\n\n.oc-chat-input__container:focus-within {\n background: var(--oc-bg-canvas);\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-chat-input__left,\n.oc-chat-input__right {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-chat-input__textarea {\n flex: 1;\n min-height: 24px;\n max-height: 200px;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n line-height: 1.5;\n color: var(--oc-fg-primary);\n resize: none;\n outline: none;\n}\n\n.oc-chat-input__textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-chat-input__send {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: var(--oc-accent);\n color: white;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n.oc-chat-input__send:hover:not(:disabled) {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4);\n}\n\n.oc-chat-input__send:disabled {\n background: var(--oc-border-default);\n color: var(--oc-fg-tertiary);\n box-shadow: none;\n cursor: not-allowed;\n}\n\n.oc-chat-input__spinner {\n width: 18px;\n height: 18px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n/* Loading state */\n.oc-chat-input--loading .oc-chat-input__container {\n opacity: 0.7;\n}\n\n\n\n/* Button */\n.oc-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--oc-spacing-sm);\n border: none;\n border-radius: var(--oc-radius-md);\n font-family: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n text-decoration: none;\n white-space: nowrap;\n}\n\n.oc-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Sizes */\n.oc-button--sm {\n height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-button--md {\n height: 36px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-button--lg {\n height: 44px;\n padding: 0 var(--oc-spacing-lg);\n font-size: var(--oc-font-size-md);\n}\n\n/* Primary variant - flat, modern */\n.oc-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n box-shadow: var(--oc-shadow-sm);\n}\n\n.oc-button--primary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-hover);\n box-shadow: var(--oc-shadow-md);\n transform: translateY(-1px);\n}\n\n.oc-button--primary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-active);\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Secondary variant */\n.oc-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-button--secondary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-button--secondary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Ghost variant */\n.oc-button--ghost {\n background: transparent;\n color: var(--oc-fg-primary);\n}\n\n.oc-button--ghost:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n}\n\n.oc-button--ghost:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Danger variant */\n.oc-button--danger {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-button--danger:hover:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.9);\n}\n\n.oc-button--danger:active:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.85);\n}\n\n/* Link variant */\n.oc-button--link {\n background: transparent;\n color: var(--oc-accent);\n padding: 0;\n height: auto;\n}\n\n.oc-button--link:hover:not(:disabled):not(.oc-button--loading) {\n color: var(--oc-accent-hover);\n text-decoration: underline;\n}\n\n/* States */\n.oc-button--full-width {\n width: 100%;\n}\n\n.oc-button--disabled,\n.oc-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-button--loading {\n cursor: wait;\n}\n\n.oc-button--loading .oc-button__label {\n opacity: var(--oc-opacity-loading);\n}\n\n/* Button parts */\n.oc-button__spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-button__spinner-icon {\n width: 16px;\n height: 16px;\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n.oc-button__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-button__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-button--lg .oc-button__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-button__label {\n display: inline-flex;\n align-items: center;\n}\n\n/* IconButton */\n.oc-icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-icon-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* IconButton sizes */\n.oc-icon-button--sm {\n width: 28px;\n height: 28px;\n}\n\n.oc-icon-button--md {\n width: 32px;\n height: 32px;\n}\n\n.oc-icon-button--lg {\n width: 40px;\n height: 40px;\n}\n\n.oc-icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-icon-button--lg svg {\n width: 20px;\n height: 20px;\n}\n\n/* IconButton variants */\n.oc-icon-button--ghost:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-icon-button--ghost:active:not(:disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-icon-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-icon-button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover);\n}\n\n.oc-icon-button--primary:active:not(:disabled) {\n background: var(--oc-accent-active);\n}\n\n.oc-icon-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-icon-button--secondary:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-icon-button--danger {\n color: var(--oc-error);\n}\n\n.oc-icon-button--danger:hover:not(:disabled) {\n background: var(--oc-error-bg);\n}\n\n.oc-icon-button--link {\n color: var(--oc-accent);\n}\n\n.oc-icon-button--link:hover:not(:disabled) {\n color: var(--oc-accent-hover);\n}\n\n.oc-icon-button--disabled,\n.oc-icon-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-icon-button--loading {\n cursor: wait;\n}\n\n.oc-icon-button__spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* ButtonGroup */\n.oc-button-group {\n display: inline-flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-button-group--attached {\n gap: 0;\n}\n\n.oc-button-group--attached > .oc-button {\n border-radius: 0;\n}\n\n.oc-button-group--attached > .oc-button:first-child {\n border-radius: var(--oc-radius-md) 0 0 var(--oc-radius-md);\n}\n\n.oc-button-group--attached > .oc-button:last-child {\n border-radius: 0 var(--oc-radius-md) var(--oc-radius-md) 0;\n}\n\n.oc-button-group--attached > .oc-button--secondary:not(:first-child) {\n border-left: none;\n}\n\n\n\n/* Input wrapper */\n.oc-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-input-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Input container */\n.oc-input-container {\n display: flex;\n align-items: stretch;\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-input-container:focus-within {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-input-container--error {\n border-color: var(--oc-error);\n}\n\n.oc-input-container--error:focus-within {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-input-container--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-input-container--sm {\n min-height: 32px;\n}\n\n.oc-input-container--md {\n min-height: 36px;\n}\n\n.oc-input-container--lg {\n min-height: 44px;\n}\n\n/* Field wrapper */\n.oc-input-field {\n display: flex;\n align-items: center;\n flex: 1;\n position: relative;\n}\n\n/* Input element */\n.oc-input {\n flex: 1;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n padding: 0 var(--oc-spacing-sm);\n outline: none;\n}\n\n.oc-input-container--sm .oc-input {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-input-container--lg .oc-input {\n font-size: var(--oc-font-size-md);\n padding: 0 var(--oc-spacing-md);\n}\n\n.oc-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-input:disabled {\n cursor: not-allowed;\n}\n\n.oc-input--has-left-icon {\n padding-left: calc(var(--oc-spacing-sm) + 24px);\n}\n\n.oc-input--has-right-icon {\n padding-right: calc(var(--oc-spacing-sm) + 24px);\n}\n\n/* Icons */\n.oc-input-icon {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n pointer-events: none;\n}\n\n.oc-input-icon--left {\n left: var(--oc-spacing-sm);\n}\n\n.oc-input-icon--right {\n right: var(--oc-spacing-sm);\n}\n\n.oc-input-icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Addons */\n.oc-input-addon {\n display: flex;\n align-items: center;\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n border-color: inherit;\n white-space: nowrap;\n}\n\n.oc-input-addon--left {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-input-addon--right {\n border-left: 1px solid var(--oc-border-default);\n}\n\n/* Helper and error text */\n.oc-input-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-input-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Textarea wrapper */\n.oc-textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-textarea-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-textarea-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Textarea element */\n.oc-textarea {\n width: 100%;\n padding: var(--oc-spacing-sm);\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n line-height: var(--oc-line-height-normal);\n color: var(--oc-fg-primary);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n resize: vertical;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-textarea:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-textarea--error {\n border-color: var(--oc-error);\n}\n\n.oc-textarea--error:focus {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-textarea--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n resize: none;\n}\n\n.oc-textarea--auto-resize {\n resize: none;\n overflow-y: hidden;\n}\n\n/* Helper and error text */\n.oc-textarea-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-textarea-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Select wrapper */\n.oc-select-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n position: relative;\n}\n\n.oc-select-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-select-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Trigger */\n.oc-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--sm {\n min-height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-select-trigger--md {\n min-height: 36px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-select-trigger--lg {\n min-height: 44px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-md);\n}\n\n.oc-select-trigger--open {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--error {\n border-color: var(--oc-error);\n}\n\n.oc-select-trigger--error:focus,\n.oc-select-trigger--error.oc-select-trigger--open {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-select-trigger--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Value and placeholder */\n.oc-select-value {\n flex: 1;\n color: var(--oc-fg-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-select-placeholder {\n flex: 1;\n color: var(--oc-fg-tertiary);\n}\n\n/* Search input */\n.oc-select-search {\n flex: 1;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n color: var(--oc-fg-primary);\n outline: none;\n min-width: 0;\n}\n\n.oc-select-search::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Indicators */\n.oc-select-indicators {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n flex-shrink: 0;\n}\n\n.oc-select-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n padding: 0;\n}\n\n.oc-select-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-select-chevron {\n color: var(--oc-fg-tertiary);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger--open .oc-select-chevron {\n transform: rotate(180deg);\n}\n\n/* Dropdown */\n.oc-select-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 240px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n list-style: none;\n}\n\n/* Option */\n.oc-select-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-option:hover,\n.oc-select-option--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-select-option--selected {\n color: var(--oc-accent);\n font-weight: 500;\n}\n\n.oc-select-option--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-select-option--disabled:hover {\n background: transparent;\n}\n\n.oc-select-check {\n flex-shrink: 0;\n color: var(--oc-accent);\n}\n\n/* Option group */\n.oc-select-group {\n list-style: none;\n}\n\n.oc-select-group:not(:first-child) {\n margin-top: var(--oc-spacing-xs);\n padding-top: var(--oc-spacing-xs);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-select-group-label {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-select-group-options {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Empty state */\n.oc-select-empty {\n padding: var(--oc-spacing-md);\n text-align: center;\n color: var(--oc-fg-tertiary);\n font-size: var(--oc-font-size-sm);\n}\n\n/* Helper and error text */\n.oc-select-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-select-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Checkbox wrapper */\n.oc-checkbox-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-checkbox-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-checkbox-wrapper--error .oc-checkbox-box {\n border-color: var(--oc-error);\n}\n\n/* Checkbox box */\n.oc-checkbox-box {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-sm);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-checkbox-box--checked,\n.oc-checkbox-box--indeterminate {\n background: var(--oc-accent);\n border-color: var(--oc-accent);\n}\n\n.oc-checkbox-wrapper:hover:not(.oc-checkbox-wrapper--disabled) .oc-checkbox-box:not(.oc-checkbox-box--checked):not(.oc-checkbox-box--indeterminate) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-checkbox-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-checkbox-input:focus-visible + .oc-checkbox-icon,\n.oc-checkbox-box:has(.oc-checkbox-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Check icon */\n.oc-checkbox-icon {\n width: 12px;\n height: 12px;\n color: var(--oc-fg-inverse);\n pointer-events: none;\n}\n\n/* Label */\n.oc-checkbox-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Checkbox group */\n.oc-checkbox-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-checkbox-group--vertical {\n flex-direction: column;\n}\n\n.oc-checkbox-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n\n\n/* Radio wrapper */\n.oc-radio-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-radio-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-radio-wrapper--error .oc-radio-circle {\n border-color: var(--oc-error);\n}\n\n/* Radio circle */\n.oc-radio-circle {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-full);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-radio-circle--checked {\n border-color: var(--oc-accent);\n}\n\n.oc-radio-wrapper:hover:not(.oc-radio-wrapper--disabled) .oc-radio-circle:not(.oc-radio-circle--checked) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-radio-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-radio-circle:has(.oc-radio-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Dot */\n.oc-radio-dot {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n}\n\n/* Label */\n.oc-radio-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Radio group */\n.oc-radio-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-radio-group--vertical {\n flex-direction: column;\n}\n\n.oc-radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n\n\n/* Toggle wrapper */\n.oc-toggle-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-toggle-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Toggle track */\n.oc-toggle-track {\n position: relative;\n display: inline-flex;\n align-items: center;\n background: var(--oc-border-default);\n border-radius: var(--oc-radius-full);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-toggle-track--sm {\n width: 28px;\n height: 16px;\n}\n\n.oc-toggle-track--md {\n width: 36px;\n height: 20px;\n}\n\n.oc-toggle-track--lg {\n width: 44px;\n height: 24px;\n}\n\n.oc-toggle-track--checked {\n background: var(--oc-accent);\n}\n\n.oc-toggle-track--error {\n background: var(--oc-error);\n}\n\n.oc-toggle-wrapper:hover:not(.oc-toggle-wrapper--disabled) .oc-toggle-track:not(.oc-toggle-track--checked) {\n background: var(--oc-border-strong);\n}\n\n/* Hidden input */\n.oc-toggle-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-toggle-track:has(.oc-toggle-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Toggle thumb */\n.oc-toggle-thumb {\n position: absolute;\n background: var(--oc-fg-inverse);\n border-radius: var(--oc-radius-full);\n box-shadow: var(--oc-shadow-sm);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toggle-track--sm .oc-toggle-thumb {\n width: 12px;\n height: 12px;\n left: 2px;\n}\n\n.oc-toggle-track--md .oc-toggle-thumb {\n width: 16px;\n height: 16px;\n left: 2px;\n}\n\n.oc-toggle-track--lg .oc-toggle-thumb {\n width: 20px;\n height: 20px;\n left: 2px;\n}\n\n.oc-toggle-track--checked.oc-toggle-track--sm .oc-toggle-thumb {\n transform: translateX(12px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--md .oc-toggle-thumb {\n transform: translateX(16px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--lg .oc-toggle-thumb {\n transform: translateX(20px);\n}\n\n/* Content */\n.oc-toggle-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-toggle-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toggle-description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n line-height: var(--oc-line-height-tight);\n}\n\n\n\n/* Form field */\n.oc-form-field {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Label */\n.oc-form-field__label {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-form-field__required {\n color: var(--oc-error);\n}\n\n.oc-form-field__optional {\n font-weight: 400;\n color: var(--oc-fg-tertiary);\n}\n\n/* Control */\n.oc-form-field__control {\n display: flex;\n flex-direction: column;\n}\n\n/* Helper text */\n.oc-form-field__helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n/* Error text */\n.oc-form-field__error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Toast container */\n.oc-toast-container {\n position: fixed;\n z-index: var(--oc-z-tooltip);\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n pointer-events: none;\n max-width: 420px;\n width: 100%;\n}\n\n.oc-toast-container--top-right {\n top: 0;\n right: 0;\n}\n\n.oc-toast-container--top-left {\n top: 0;\n left: 0;\n}\n\n.oc-toast-container--bottom-right {\n bottom: 0;\n right: 0;\n}\n\n.oc-toast-container--bottom-left {\n bottom: 0;\n left: 0;\n}\n\n.oc-toast-container--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.oc-toast-container--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* Toast */\n.oc-toast {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-lg);\n pointer-events: auto;\n animation: oc-slide-up-fade var(--oc-duration-normal) var(--oc-easing-enter);\n}\n\n/* Toast icon */\n.oc-toast__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-toast--success .oc-toast__icon {\n color: var(--oc-success);\n}\n\n.oc-toast--error .oc-toast__icon {\n color: var(--oc-error);\n}\n\n.oc-toast--warning .oc-toast__icon {\n color: var(--oc-warning);\n}\n\n.oc-toast--info .oc-toast__icon {\n color: var(--oc-accent);\n}\n\n/* Toast content */\n.oc-toast__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-toast__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toast__description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n margin-top: 2px;\n}\n\n/* Toast action */\n.oc-toast__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n/* Toast close button */\n.oc-toast__close {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toast__close:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n\n\n/* Skeleton base */\n.oc-skeleton {\n background: var(--oc-bg-surface);\n display: block;\n}\n\n/* Variants */\n.oc-skeleton--text {\n height: 1em;\n border-radius: var(--oc-radius-sm);\n transform-origin: 0 55%;\n transform: scale(1, 0.8);\n}\n\n.oc-skeleton--circular {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-skeleton--rectangular {\n border-radius: 0;\n}\n\n.oc-skeleton--rounded {\n border-radius: var(--oc-radius-md);\n}\n\n/* Animations */\n.oc-skeleton--pulse {\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.oc-skeleton--wave {\n position: relative;\n overflow: hidden;\n}\n\n.oc-skeleton--wave::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.5),\n transparent\n );\n animation: oc-skeleton-wave 1.5s linear infinite;\n}\n\n@keyframes oc-skeleton-wave {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n/* Skeleton text */\n.oc-skeleton-text {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Document card skeleton */\n.oc-skeleton-document-card {\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n width: 200px;\n}\n\n.oc-skeleton-document-card__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm);\n}\n\n/* Table row skeleton */\n.oc-skeleton-table-row {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-skeleton-table-row > .oc-skeleton {\n flex: 1;\n}\n\n/* Chat message skeleton */\n.oc-skeleton-chat-message {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-skeleton-chat-message__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n flex: 1;\n}\n\n\n\n/* Search input wrapper */\n.oc-search-input-wrapper {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n}\n\n.oc-search-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Search input container */\n.oc-search-input-container {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n min-height: 36px;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-container--focused {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n/* Search icon */\n.oc-search-input-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* Input field */\n.oc-search-input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n outline: none;\n}\n\n.oc-search-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Clear button */\n.oc-search-input-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-search-input-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n/* Shortcut badge */\n.oc-search-input-shortcut {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 6px;\n font-family: inherit;\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-sm);\n flex-shrink: 0;\n}\n\n/* Dropdown */\n.oc-search-input-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 300px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n}\n\n.oc-search-input-dropdown-header {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-search-input-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: var(--oc-spacing-sm);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n text-align: left;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-dropdown-item:hover,\n.oc-search-input-dropdown-item--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-search-input-dropdown-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-dropdown-item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n/* Progress bar */\n.oc-progress {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n}\n\n.oc-progress__track {\n flex: 1;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-full);\n overflow: hidden;\n}\n\n.oc-progress--sm .oc-progress__track {\n height: 4px;\n}\n\n.oc-progress--md .oc-progress__track {\n height: 6px;\n}\n\n.oc-progress--lg .oc-progress__track {\n height: 8px;\n}\n\n.oc-progress__bar {\n height: 100%;\n border-radius: var(--oc-radius-full);\n transition: width var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress--accent .oc-progress__bar {\n background: var(--oc-accent);\n}\n\n.oc-progress--success .oc-progress__bar {\n background: var(--oc-success);\n}\n\n.oc-progress--warning .oc-progress__bar {\n background: var(--oc-warning);\n}\n\n.oc-progress--error .oc-progress__bar {\n background: var(--oc-error);\n}\n\n/* Indeterminate animation */\n.oc-progress--indeterminate .oc-progress__bar {\n width: 30%;\n animation: oc-progress-indeterminate 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(200%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}\n\n.oc-progress__label {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n min-width: 3ch;\n text-align: right;\n}\n\n/* Progress circle */\n.oc-progress-circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-progress-circle__track {\n stroke: var(--oc-bg-surface);\n}\n\n.oc-progress-circle__bar {\n transition: stroke-dashoffset var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress-circle--accent .oc-progress-circle__bar {\n stroke: var(--oc-accent);\n}\n\n.oc-progress-circle--success .oc-progress-circle__bar {\n stroke: var(--oc-success);\n}\n\n.oc-progress-circle--warning .oc-progress-circle__bar {\n stroke: var(--oc-warning);\n}\n\n.oc-progress-circle--error .oc-progress-circle__bar {\n stroke: var(--oc-error);\n}\n\n.oc-progress-circle__label {\n position: absolute;\n font-size: var(--oc-font-size-xs);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Spinner */\n.oc-spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-accent);\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n\n\n/* Empty state */\n.oc-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: var(--oc-spacing-xl);\n}\n\n/* Sizes */\n.oc-empty-state--sm {\n padding: var(--oc-spacing-md);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon svg {\n width: 32px;\n height: 32px;\n}\n\n.oc-empty-state--sm .oc-empty-state__title {\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__description {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-empty-state--md {\n padding: var(--oc-spacing-xl);\n}\n\n.oc-empty-state--lg {\n padding: var(--oc-spacing-2xl);\n}\n\n.oc-empty-state--lg .oc-empty-state__icon svg {\n width: 64px;\n height: 64px;\n}\n\n.oc-empty-state--lg .oc-empty-state__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Icon */\n.oc-empty-state__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--oc-spacing-md);\n color: var(--oc-fg-tertiary);\n}\n\n.oc-empty-state__icon svg {\n width: 48px;\n height: 48px;\n}\n\n/* Title */\n.oc-empty-state__title {\n margin: 0 0 var(--oc-spacing-xs);\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Description */\n.oc-empty-state__description {\n margin: 0 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n max-width: 320px;\n}\n\n/* Actions */\n.oc-empty-state__actions {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex-wrap: wrap;\n justify-content: center;\n}\n\n\n\n/* Alert */\n.oc-alert {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-radius: var(--oc-radius-md);\n border: 1px solid;\n}\n\n.oc-alert--info {\n background: rgba(8, 145, 178, 0.06);\n border-color: rgba(8, 145, 178, 0.2);\n}\n\n.oc-alert--success {\n background: var(--oc-success-bg);\n border-color: rgba(5, 150, 105, 0.2);\n}\n\n.oc-alert--warning {\n background: var(--oc-warning-bg);\n border-color: rgba(217, 119, 6, 0.2);\n}\n\n.oc-alert--error {\n background: var(--oc-error-bg);\n border-color: rgba(220, 38, 38, 0.2);\n}\n\n.oc-alert__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-alert--info .oc-alert__icon {\n color: var(--oc-accent);\n}\n\n.oc-alert--success .oc-alert__icon {\n color: var(--oc-success);\n}\n\n.oc-alert--warning .oc-alert__icon {\n color: var(--oc-warning);\n}\n\n.oc-alert--error .oc-alert__icon {\n color: var(--oc-error);\n}\n\n.oc-alert__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-alert__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__description {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__title + .oc-alert__description {\n margin-top: 2px;\n}\n\n.oc-alert__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n.oc-alert__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-alert__dismiss:hover {\n background: rgba(0, 0, 0, 0.05);\n color: var(--oc-fg-primary);\n}\n\n/* Banner */\n.oc-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n width: 100%;\n}\n\n.oc-banner--info {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--success {\n background: var(--oc-success);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--warning {\n background: var(--oc-warning);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--error {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner__content {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex: 1;\n justify-content: center;\n}\n\n.oc-banner__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-banner__text {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n}\n\n.oc-banner__action {\n display: flex;\n align-items: center;\n}\n\n.oc-banner__action button,\n.oc-banner__action a {\n color: inherit;\n text-decoration: underline;\n font-weight: 600;\n}\n\n.oc-banner__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n opacity: 0.8;\n transition: opacity var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-banner__dismiss:hover {\n opacity: 1;\n}\n\n\n\n/* Tabs container */\n.oc-tabs {\n display: flex;\n flex-direction: column;\n}\n\n.oc-tabs--vertical {\n flex-direction: row;\n}\n\n/* Tab list */\n.oc-tab-list {\n display: flex;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-tabs--horizontal .oc-tab-list {\n flex-direction: row;\n}\n\n.oc-tabs--vertical .oc-tab-list {\n flex-direction: column;\n border-right: 1px solid var(--oc-border-default);\n padding-right: var(--oc-spacing-sm);\n margin-right: var(--oc-spacing-md);\n}\n\n/* Line variant */\n.oc-tabs--line .oc-tab-list {\n border-bottom: 1px solid var(--oc-border-default);\n gap: 0;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab-list {\n border-bottom: none;\n border-right: 1px solid var(--oc-border-default);\n}\n\n/* Tab button */\n.oc-tab {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-tab:hover:not(.oc-tab--disabled) {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--selected {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-tab:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: -2px;\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Line variant tab */\n.oc-tabs--line .oc-tab {\n position: relative;\n border-radius: 0;\n margin-bottom: -1px;\n}\n\n.oc-tabs--line .oc-tab::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: transparent;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-tabs--line .oc-tab--selected::after {\n background: var(--oc-accent);\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab {\n margin-bottom: 0;\n margin-right: -1px;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab::after {\n bottom: auto;\n left: auto;\n top: 0;\n right: 0;\n width: 2px;\n height: 100%;\n}\n\n/* Enclosed variant */\n.oc-tabs--enclosed .oc-tab-list {\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n padding: var(--oc-spacing-xs);\n}\n\n.oc-tabs--enclosed .oc-tab {\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tabs--enclosed .oc-tab--selected {\n background: var(--oc-bg-canvas);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Pills variant */\n.oc-tabs--pills .oc-tab {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-tabs--pills .oc-tab--selected {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-tabs--pills .oc-tab:hover:not(.oc-tab--disabled):not(.oc-tab--selected) {\n background: var(--oc-bg-surface);\n}\n\n/* Tab panels */\n.oc-tab-panels {\n flex: 1;\n}\n\n.oc-tab-panel {\n padding: var(--oc-spacing-md) 0;\n}\n\n.oc-tabs--vertical .oc-tab-panel {\n padding: 0;\n}\n\n.oc-tab-panel:focus {\n outline: none;\n}\n\n\n\n/* ============ Research Card Container ============ */\n.oc-research-card {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-research-card__header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-research-card__back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.oc-research-card__back:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-research-card__title {\n flex: 1;\n margin: 0;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-card__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-research-card__content {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n}\n\n/* ============ User Question ============ */\n.oc-user-question {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.oc-user-question__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-user-question__text {\n flex: 1;\n font-size: 15px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #0F172A);\n padding-top: 4px;\n}\n\n/* ============ AI Response ============ */\n.oc-ai-response {\n margin-bottom: 20px;\n}\n\n.oc-ai-response__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 12px;\n}\n\n.oc-ai-response__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-ai-response__avatar-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-fg-primary, #0F172A);\n color: white;\n font-size: 14px;\n font-weight: 700;\n}\n\n.oc-ai-response__status {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: default;\n transition: all 0.15s ease;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status {\n cursor: pointer;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-ai-response__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-ai-response__status-text {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-ai-response--researching .oc-ai-response__status-text {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-ai-response--error .oc-ai-response__status-text {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-ai-response__chevron {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-ai-response--expanded .oc-ai-response__chevron {\n transform: rotate(180deg);\n}\n\n.oc-ai-response__sources {\n margin-bottom: 16px;\n margin-left: 42px;\n}\n\n.oc-ai-response__content {\n margin-left: 42px;\n}\n\n/* ============ Sources Badge ============ */\n.oc-sources-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n background: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-sources-badge:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-sources-badge__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.oc-sources-badge__icon img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.oc-sources-badge__text {\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-sources-badge__arrow {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.15s ease;\n}\n\n.oc-sources-badge:hover .oc-sources-badge__arrow {\n transform: translateX(2px);\n}\n\n/* ============ Research Section ============ */\n.oc-research-section {\n margin-bottom: 24px;\n}\n\n.oc-research-section:last-child {\n margin-bottom: 0;\n}\n\n.oc-research-section__heading {\n margin: 0 0 12px;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-section__body {\n font-size: 15px;\n line-height: 1.7;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-research-section__body p {\n margin: 0 0 12px;\n}\n\n.oc-research-section__body p:last-child {\n margin-bottom: 0;\n}\n\n/* ============ Steps List ============ */\n.oc-steps-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n margin-bottom: 16px;\n}\n\n.oc-steps-list__item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px;\n border-radius: var(--oc-radius-sm, 4px);\n}\n\n.oc-steps-list__indicator {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-steps-list__number {\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-tertiary, #94A3B8);\n font-size: 11px;\n font-weight: 600;\n}\n\n.oc-steps-list__item--completed .oc-steps-list__indicator {\n color: var(--oc-success, #059669);\n}\n\n.oc-steps-list__item--running .oc-steps-list__indicator {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-steps-list__item--error .oc-steps-list__indicator {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-steps-list__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-steps-list__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-steps-list__label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-steps-list__item--pending .oc-steps-list__label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-steps-list__desc {\n display: block;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n\n\n/* ============ Project Picker Container ============ */\n.oc-project-picker {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-project-picker__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 16px 20px;\n border: none;\n border-bottom: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n text-align: left;\n transition: all 0.15s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__header {\n border-bottom-color: var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-picker__header:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-picker__header-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-picker__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-project-picker__subtitle {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-picker__chevron {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__chevron {\n transform: rotate(180deg);\n}\n\n.oc-project-picker__list {\n display: flex;\n flex-direction: column;\n padding: 8px;\n}\n\n/* ============ Project Item ============ */\n.oc-project-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 12px 14px;\n border-radius: var(--oc-radius-md, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n outline: none;\n}\n\n.oc-project-item:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-item:focus-visible {\n box-shadow: 0 0 0 2px var(--oc-accent, #0891B2);\n}\n\n.oc-project-item--selected {\n background: var(--oc-bg-surface, #F8FAFC);\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-item--selected:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-project-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-item__name {\n font-size: 15px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__desc {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__icon {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: color 0.15s ease;\n}\n\n.oc-project-item:hover .oc-project-item__icon {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-project-item--selected .oc-project-item__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n/* ============ Project Search ============ */\n.oc-project-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n margin: 8px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-project-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-project-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-project-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n\n\n/* ============ Sources Panel Container ============ */\n.oc-sources-panel {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* ============ Panel Tabs ============ */\n.oc-panel-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 12px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-panel-tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid transparent;\n border-bottom: none;\n border-radius: var(--oc-radius-md, 6px) var(--oc-radius-md, 6px) 0 0;\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n margin-bottom: -1px;\n}\n\n.oc-panel-tab:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab--selected {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-border-default, #E2E8F0);\n border-bottom-color: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n color: currentColor;\n}\n\n.oc-panel-tab__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-panel-tab__label {\n white-space: nowrap;\n}\n\n/* ============ Panel Search ============ */\n.oc-panel-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n margin: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-panel-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-panel-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-panel-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Action List ============ */\n.oc-panel-action-list {\n display: flex;\n flex-direction: column;\n padding: 0 8px 8px;\n}\n\n/* ============ Panel Action ============ */\n.oc-panel-action {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 12px 14px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-panel-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-panel-action:active {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-panel-action--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.oc-panel-action--disabled:hover {\n background: transparent;\n}\n\n.oc-panel-action__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-sm, 4px);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-panel-action__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-panel-action__icon img {\n width: 20px;\n height: 20px;\n object-fit: contain;\n}\n\n.oc-panel-action__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-panel-action__label {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-action__desc {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Section ============ */\n.oc-panel-section {\n padding: 0 12px 12px;\n}\n\n.oc-panel-section__title {\n margin: 0 0 8px;\n padding: 0 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-section__content {\n display: flex;\n flex-direction: column;\n}\n\n/* ============ Integration Colors ============ */\n.oc-panel-action--docvault .oc-panel-action__icon {\n color: #E85B5B;\n}\n\n.oc-panel-action--filenexus .oc-panel-action__icon {\n color: #1B4F72;\n}\n\n.oc-panel-action--clouddrive .oc-panel-action__icon {\n color: #038387;\n}\n\n.oc-panel-action--upload .oc-panel-action__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n\n\n/* ============ Hero Container ============ */\n.oc-hero {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: linear-gradient(180deg, rgba(8, 145, 178, 0.03) 0%, transparent 100%);\n}\n\n.oc-hero__inner {\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Size variants */\n.oc-hero--sm {\n padding: 48px 24px;\n}\n\n.oc-hero--md {\n padding: 80px 24px;\n}\n\n.oc-hero--lg {\n padding: 120px 24px;\n}\n\n/* Layout variants */\n.oc-hero--centered {\n text-align: center;\n}\n\n.oc-hero--centered .oc-hero__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.oc-hero--split .oc-hero__inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n align-items: center;\n}\n\n/* ============ Hero Decorations ============ */\n.oc-hero__decorations {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n}\n\n.oc-hero:not(.oc-hero--with-decorations) .oc-hero__decorations {\n display: none;\n}\n\n.oc-hero__decoration {\n position: absolute;\n color: var(--oc-accent, #0891B2);\n opacity: 0.08;\n}\n\n.oc-hero__decoration--1 {\n top: 15%;\n left: 10%;\n animation: oc-hero-float 8s ease-in-out infinite;\n}\n\n.oc-hero__decoration--2 {\n top: 40%;\n left: 5%;\n opacity: 0.06;\n animation: oc-hero-float 10s ease-in-out infinite reverse;\n}\n\n.oc-hero__decoration--3 {\n top: 20%;\n right: 8%;\n opacity: 0.05;\n animation: oc-hero-float 9s ease-in-out infinite;\n}\n\n.oc-hero__decoration--4 {\n top: 50%;\n right: 12%;\n opacity: 0.07;\n animation: oc-hero-float 11s ease-in-out infinite reverse;\n}\n\n@keyframes oc-hero-float {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(5deg); }\n}\n\n/* ============ Hero Badge ============ */\n.oc-hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-sm);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 24px;\n}\n\n.oc-hero-badge__icon {\n display: flex;\n align-items: center;\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-hero-badge__text {\n white-space: nowrap;\n}\n\n/* ============ Hero Title ============ */\n.oc-hero-title {\n margin: 0 0 16px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.2;\n color: var(--oc-fg-primary, #0F172A);\n letter-spacing: -0.02em;\n}\n\n.oc-hero-title--gradient {\n background: linear-gradient(135deg, var(--oc-fg-primary, #0F172A) 0%, var(--oc-accent, #0891B2) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n/* ============ Hero Subtitle ============ */\n.oc-hero-subtitle {\n margin: 0 0 32px;\n max-width: 560px;\n font-size: 17px;\n line-height: 1.6;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-hero--centered .oc-hero-subtitle {\n margin-left: auto;\n margin-right: auto;\n}\n\n/* ============ Hero Search ============ */\n.oc-hero-search {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n max-width: 600px;\n padding: 8px 8px 8px 20px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-lg);\n margin-bottom: 24px;\n}\n\n.oc-hero-search__input {\n flex: 1;\n min-width: 0;\n padding: 8px 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-hero-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-hero-search__button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 12px 20px;\n background: var(--oc-accent, #0891B2);\n color: white;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.oc-hero-search__button:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0E7490);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-accent);\n}\n\n.oc-hero-search__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.oc-hero-search__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-hero-search--loading {\n opacity: 0.8;\n}\n\n/* ============ Hero Actions ============ */\n.oc-hero-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-hero--split .oc-hero-actions {\n justify-content: flex-start;\n}\n\n/* ============ Hero Action Button ============ */\n.oc-hero-action {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 6px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-hero-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-hero-action__icon {\n display: flex;\n align-items: center;\n color: currentColor;\n}\n\n/* ============ Hero Content (for split layout) ============ */\n.oc-hero-content {\n display: flex;\n flex-direction: column;\n}\n\n.oc-hero-content--left {\n align-items: flex-start;\n text-align: left;\n}\n\n.oc-hero-content--center {\n align-items: center;\n text-align: center;\n}\n\n.oc-hero-content--right {\n align-items: flex-end;\n text-align: right;\n}\n\n/* ============ Hero Media ============ */\n.oc-hero-media {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-hero-media img,\n.oc-hero-media svg {\n max-width: 100%;\n height: auto;\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 1024px) {\n .oc-hero--split .oc-hero__inner {\n grid-template-columns: 1fr;\n gap: 32px;\n text-align: center;\n }\n\n .oc-hero--split .oc-hero-content {\n align-items: center;\n }\n\n .oc-hero--split .oc-hero-actions {\n justify-content: center;\n }\n\n .oc-hero-media {\n order: -1;\n }\n}\n\n@media (max-width: 768px) {\n .oc-hero--sm {\n padding: 32px 16px;\n }\n\n .oc-hero--md {\n padding: 48px 16px;\n }\n\n .oc-hero--lg {\n padding: 64px 16px;\n }\n\n .oc-hero-title {\n font-size: 32px;\n }\n\n .oc-hero-subtitle {\n font-size: 15px;\n margin-bottom: 24px;\n }\n\n .oc-hero-search {\n flex-direction: column;\n padding: 12px;\n border-radius: var(--oc-radius-lg, 8px);\n gap: 8px;\n }\n\n .oc-hero-search__input {\n width: 100%;\n text-align: center;\n }\n\n .oc-hero-search__button {\n width: 100%;\n }\n\n .oc-hero__decorations {\n display: none;\n }\n}\n\n@media (max-width: 480px) {\n .oc-hero-title {\n font-size: 26px;\n }\n\n .oc-hero-badge {\n font-size: 11px;\n padding: 6px 12px;\n }\n\n .oc-hero-action {\n width: 100%;\n justify-content: center;\n }\n\n .oc-hero-actions {\n flex-direction: column;\n width: 100%;\n }\n}\n\n\n\n/* ============================================\n SearchBox Component\n ============================================ */\n\n.oc-search-box {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-search-box:focus-within {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Size variants */\n.oc-search-box--sm {\n padding: 8px 12px;\n gap: 10px;\n}\n\n.oc-search-box--sm .oc-search-box__input {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--sm .oc-search-box__button {\n padding: 6px 14px;\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--lg {\n padding: 16px 20px;\n gap: 14px;\n}\n\n.oc-search-box--lg .oc-search-box__input {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-search-box--lg .oc-search-box__button {\n padding: 10px 24px;\n font-size: var(--oc-font-size-md, 15px);\n}\n\n/* Icon */\n.oc-search-box__icon {\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Input */\n.oc-search-box__input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-fg-primary, #1E293B);\n outline: none;\n}\n\n.oc-search-box__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-search-box__input:disabled {\n cursor: not-allowed;\n}\n\n/* Button */\n.oc-search-box__button {\n padding: 8px 20px;\n background: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.oc-search-box__button:hover:not(:disabled) {\n background: #1E293B;\n}\n\n.oc-search-box__button:active:not(:disabled) {\n background: #0F172A;\n}\n\n.oc-search-box__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Loading state */\n.oc-search-box--loading {\n pointer-events: none;\n}\n\n.oc-search-box__spinner {\n animation: oc-spin var(--oc-duration-spin, 0.8s) linear infinite;\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-search-box {\n flex-wrap: wrap;\n }\n\n .oc-search-box__input {\n flex: 1 1 100%;\n order: 1;\n }\n\n .oc-search-box__icon {\n order: 0;\n }\n\n .oc-search-box__button {\n order: 2;\n width: 100%;\n margin-top: 8px;\n }\n}\n\n\n\n/* ============================================\n FilterTabs Component\n ============================================ */\n\n.oc-filter-tabs {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n/* Filter icon button */\n.oc-filter-tabs__icon-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-filter-tabs__icon-button:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-secondary, #64748B);\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-filter-tabs__icon-button:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-filter-tabs__icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tabs--underline {\n gap: 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* FilterTab */\n.oc-filter-tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-filter-tab:hover:not(:disabled) {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #475569);\n}\n\n.oc-filter-tab--active {\n background: #1E293B;\n border-color: #1E293B;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--active:hover:not(:disabled) {\n background: #334155;\n border-color: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-filter-tab--sm {\n padding: 6px 12px;\n font-size: var(--oc-font-size-xs, 12px);\n gap: 4px;\n}\n\n.oc-filter-tab--lg {\n padding: 10px 18px;\n font-size: var(--oc-font-size-md, 15px);\n gap: 8px;\n}\n\n/* Underline variant */\n.oc-filter-tab--underline {\n border: none;\n border-radius: 0;\n border-bottom: 2px solid transparent;\n padding: 12px 16px;\n margin-bottom: -1px;\n}\n\n.oc-filter-tab--underline:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active {\n background: transparent;\n color: var(--oc-accent, #0F766E);\n border-bottom-color: var(--oc-accent, #0F766E);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n/* Icon */\n.oc-filter-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-filter-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tab--sm .oc-filter-tab__icon svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-filter-tab--lg .oc-filter-tab__icon svg {\n width: 18px;\n height: 18px;\n}\n\n/* Label */\n.oc-filter-tab__label {\n flex-shrink: 0;\n}\n\n/* Count badge */\n.oc-filter-tab__count {\n font-size: 0.85em;\n opacity: 0.7;\n}\n\n.oc-filter-tab--active .oc-filter-tab__count {\n opacity: 0.8;\n}\n\n\n\n .oc-filter-panel {\n width: 320px;\n max-height: 520px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 8px 16px rgba(15, 23, 42, 0.06));\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .oc-filter-panel__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0;\n }\n\n .oc-filter-panel__clear {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n background: none;\n border: none;\n padding: 4px 8px;\n margin: -4px -8px;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__clear:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__clear:disabled {\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: not-allowed;\n }\n\n .oc-filter-panel__clear:disabled:hover {\n background: transparent;\n }\n\n .oc-filter-panel__body {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n }\n\n .oc-filter-panel__section {\n padding: 8px 20px;\n }\n\n .oc-filter-panel__section:not(:last-child) {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n padding-bottom: 16px;\n margin-bottom: 8px;\n }\n\n .oc-filter-panel__section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__section-title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin: 0;\n }\n\n .oc-filter-panel__section-count {\n font-size: 11px;\n font-weight: 600;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n padding: 2px 6px;\n border-radius: var(--oc-radius-full, 9999px);\n }\n\n /* Section search input */\n .oc-filter-panel__search {\n position: relative;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__search-icon {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n align-items: center;\n }\n\n .oc-filter-panel__search-input {\n width: 100%;\n padding: 8px 32px 8px 32px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__search-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n background: var(--oc-bg-surface, white);\n }\n\n .oc-filter-panel__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__search-clear {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border: none;\n border-radius: 50%;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n padding: 0;\n }\n\n .oc-filter-panel__search-clear:hover {\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #475569);\n }\n\n /* Options list */\n .oc-filter-panel__options {\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: 240px;\n overflow-y: auto;\n }\n\n .oc-filter-panel__option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px 12px;\n margin: 0 -12px;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.1s;\n }\n\n .oc-filter-panel__option:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n /* Checkbox styles */\n .oc-filter-panel__checkbox {\n width: 18px;\n height: 18px;\n border-radius: 4px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__checkbox--checked {\n border-color: var(--oc-accent, #0F766E);\n background: var(--oc-accent, #0F766E);\n }\n\n /* Radio styles */\n .oc-filter-panel__radio {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__radio--checked {\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__radio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--oc-accent, #0F766E);\n }\n\n /* Option content */\n .oc-filter-panel__option-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .oc-filter-panel__option-label {\n font-size: 14px;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-description {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n /* Loading state */\n .oc-filter-panel__loading {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__spinner {\n animation: oc-filter-spin 0.8s linear infinite;\n }\n\n @keyframes oc-filter-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n /* Empty state */\n .oc-filter-panel__empty {\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n text-align: center;\n font-style: italic;\n }\n\n /* Show more button */\n .oc-filter-panel__show-more {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n margin: 4px -12px 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__show-more:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__show-more svg {\n transition: transform 0.2s;\n }\n\n /* Date inputs */\n .oc-filter-panel__date-inputs {\n display: flex;\n gap: 12px;\n }\n\n .oc-filter-panel__date-field {\n flex: 1;\n }\n\n .oc-filter-panel__date-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 6px;\n }\n\n .oc-filter-panel__date-input {\n width: 100%;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__date-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n }\n\n /* Footer */\n .oc-filter-panel__footer {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FAFAFA);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__footer-spacer {\n flex: 1;\n }\n\n .oc-filter-panel__active-count {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n }\n\n .oc-filter-panel__active-count strong {\n color: var(--oc-accent, #0F766E);\n font-weight: 600;\n }\n\n /* Buttons */\n .oc-filter-panel__btn {\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n }\n\n .oc-filter-panel__btn--secondary {\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__btn--secondary:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n }\n\n .oc-filter-panel__btn--primary {\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n }\n\n .oc-filter-panel__btn--primary:hover {\n background: var(--oc-accent-hover, #0D9488);\n }\n\n /* Quick filter chips */\n .oc-filter-panel__quick-filters {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__quick-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s;\n }\n\n .oc-filter-panel__quick-chip:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__quick-chip--active {\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.08);\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__quick-chip-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n margin-right: -4px;\n border-radius: 50%;\n background: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n opacity: 0.6;\n transition: opacity 0.15s;\n }\n\n .oc-filter-panel__quick-chip-remove:hover {\n opacity: 1;\n }\n\n\n\n/* ============================================\n StatBlock Component\n ============================================ */\n\n.oc-stat-block {\n display: flex;\n gap: 12px;\n}\n\n.oc-stat-block--center {\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.oc-stat-block--left {\n align-items: flex-start;\n}\n\n/* Icon */\n.oc-stat-block__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #64748B);\n flex-shrink: 0;\n}\n\n.oc-stat-block__icon svg {\n width: 24px;\n height: 24px;\n}\n\n/* Content */\n.oc-stat-block__content {\n min-width: 0;\n}\n\n/* Value */\n.oc-stat-block__value {\n font-size: 36px;\n font-weight: 400;\n line-height: 1;\n margin-bottom: 4px;\n font-feature-settings: 'tnum' 1;\n}\n\n.oc-stat-block--default .oc-stat-block__value {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-stat-block--accent .oc-stat-block__value {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-stat-block--muted .oc-stat-block__value {\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Label */\n.oc-stat-block__label {\n font-size: var(--oc-font-size-md, 15px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n/* Sublabel */\n.oc-stat-block__sublabel {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.4;\n}\n\n/* Size variants */\n.oc-stat-block--sm .oc-stat-block__value {\n font-size: 24px;\n}\n\n.oc-stat-block--sm .oc-stat-block__label {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-stat-block--sm .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-xs, 11px);\n}\n\n.oc-stat-block--sm .oc-stat-block__icon {\n width: 36px;\n height: 36px;\n}\n\n.oc-stat-block--sm .oc-stat-block__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-stat-block--lg .oc-stat-block__value {\n font-size: 48px;\n}\n\n.oc-stat-block--lg .oc-stat-block__label {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-stat-block--lg .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-md, 15px);\n}\n\n.oc-stat-block--lg .oc-stat-block__icon {\n width: 56px;\n height: 56px;\n}\n\n.oc-stat-block--lg .oc-stat-block__icon svg {\n width: 28px;\n height: 28px;\n}\n\n/* ============================================\n StatGrid Component\n ============================================ */\n\n.oc-stat-grid {\n display: grid;\n}\n\n/* Columns */\n.oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n.oc-stat-grid--cols-3 {\n grid-template-columns: repeat(3, 1fr);\n}\n\n.oc-stat-grid--cols-4 {\n grid-template-columns: repeat(4, 1fr);\n}\n\n/* Gap */\n.oc-stat-grid--gap-sm {\n gap: 16px 24px;\n}\n\n.oc-stat-grid--gap-md {\n gap: 32px 48px;\n}\n\n.oc-stat-grid--gap-lg {\n gap: 48px 64px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-stat-grid--cols-4 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--cols-3 {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 480px) {\n .oc-stat-grid--cols-4,\n .oc-stat-grid--cols-3,\n .oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--gap-md {\n gap: 24px 32px;\n }\n\n .oc-stat-grid--gap-lg {\n gap: 32px 40px;\n }\n\n .oc-stat-block__value {\n font-size: 28px;\n }\n}\n\n\n\n/* ============================================\n CollectionCard Component\n ============================================ */\n\n.oc-collection-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-collection-card--clickable {\n cursor: pointer;\n}\n\n.oc-collection-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Avatar - uniform circular treatment for icons and images */\n.oc-collection-card__icon,\n.oc-collection-card__image {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n}\n\n.oc-collection-card__icon {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-collection-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-collection-card__image {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-collection-card__image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Content */\n.oc-collection-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-collection-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Badge */\n.oc-collection-card__badge {\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n/* Status */\n.oc-collection-card__status {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Title */\n.oc-collection-card__title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 6px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-collection-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Stats */\n.oc-collection-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-collection-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-collection-card__stats span:not(:last-child)::after {\n content: '\u2022';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* Menu */\n.oc-collection-card__menu {\n display: flex;\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n}\n\n.oc-collection-card__menu-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card__menu-button:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-collection-card__menu-button:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============================================\n CollectionList Component\n ============================================ */\n\n.oc-collection-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-collection-list--gap-sm {\n gap: 12px;\n}\n\n.oc-collection-list--gap-md {\n gap: 16px;\n}\n\n.oc-collection-list--gap-lg {\n gap: 24px;\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-collection-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-collection-card__icon,\n .oc-collection-card__image {\n width: 36px;\n height: 36px;\n }\n\n .oc-collection-card__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .oc-collection-card__title {\n font-size: 15px;\n }\n\n .oc-collection-card__description {\n font-size: 13px;\n }\n}\n\n\n\n/* ============================================\n ActivityFeed Component\n ============================================ */\n\n.oc-activity-feed {\n display: flex;\n flex-direction: column;\n}\n\n.oc-activity-feed__list {\n display: flex;\n flex-direction: column;\n}\n\n/* ActivityItem */\n.oc-activity-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 0;\n}\n\n.oc-activity-feed--dividers .oc-activity-item {\n border-bottom: 1px solid var(--oc-bg-subtle, #F1F5F9);\n}\n\n.oc-activity-feed--dividers .oc-activity-item:last-child {\n border-bottom: none;\n}\n\n/* Avatar */\n.oc-activity-item__avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-inverse, #FFFFFF);\n flex-shrink: 0;\n background-size: cover;\n background-position: center;\n}\n\n/* Content */\n.oc-activity-item__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Text */\n.oc-activity-item__text {\n font-size: var(--oc-font-size-sm, 14px);\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n line-height: 1.4;\n}\n\n/* Name */\n.oc-activity-item__name {\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* Target */\n.oc-activity-item__target {\n color: var(--oc-accent, #0F766E);\n text-decoration: none;\n}\n\na.oc-activity-item__target:hover {\n text-decoration: underline;\n}\n\n/* Time */\n.oc-activity-item__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n/* View All Link */\n.oc-activity-feed__view-all {\n display: block;\n text-align: center;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n text-decoration: none;\n padding: 12px;\n margin-top: 8px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-activity-feed__view-all:hover {\n color: var(--oc-accent, #0F766E);\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-activity-item {\n gap: 10px;\n padding: 12px 0;\n }\n\n .oc-activity-item__avatar {\n width: 32px;\n height: 32px;\n font-size: 11px;\n }\n\n .oc-activity-item__text {\n font-size: 13px;\n }\n}\n\n\n\n/* ============================================\n ActionList Component\n ============================================ */\n\n.oc-action-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-action-list--card {\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n padding: 8px;\n}\n\n/* ActionItem */\n.oc-action-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n text-decoration: none;\n width: 100%;\n}\n\n.oc-action-item:hover:not(:disabled) {\n background: rgba(15, 118, 110, 0.05);\n}\n\n.oc-action-item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-action-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-action-item--sm {\n padding: 10px 12px;\n gap: 10px;\n font-size: var(--oc-font-size-sm, 14px);\n}\n\n.oc-action-item--lg {\n padding: 16px 20px;\n gap: 14px;\n font-size: var(--oc-font-size-lg, 16px);\n}\n\n/* Icon */\n.oc-action-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n}\n\n.oc-action-item__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-action-item--sm .oc-action-item__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-action-item--lg .oc-action-item__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-action-item__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n/* Label */\n.oc-action-item__label {\n font-weight: 500;\n}\n\n/* Description */\n.oc-action-item__description {\n font-size: 0.85em;\n color: var(--oc-fg-tertiary, #94A3B8);\n font-weight: 400;\n}\n\n/* Card variant items */\n.oc-action-list--card .oc-action-item {\n padding: 12px 14px;\n}\n\n.oc-action-list--card .oc-action-item:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n\n\n/* ============ Thread View Container ============ */\n.oc-thread-view {\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-view__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-view__title {\n flex: 1;\n min-width: 200px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-view__pin,\n.oc-thread-view__status,\n.oc-thread-view__locked {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-view__pin {\n background: rgba(217, 119, 6, 0.1);\n color: var(--oc-warning, #D97706);\n}\n\n.oc-thread-view__status--resolved {\n background: rgba(5, 150, 105, 0.1);\n color: var(--oc-success, #059669);\n}\n\n.oc-thread-view__status--closed {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-view__status--archived {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-view__locked {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-view__content {\n flex: 1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Pinned thread styling */\n.oc-thread-view--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n}\n\n/* Locked thread */\n.oc-thread-view--locked .oc-thread-view__content {\n opacity: 0.85;\n}\n\n/* ============ Thread Post (Main Post) ============ */\n.oc-thread-post {\n display: flex;\n gap: 14px;\n padding: 20px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n@keyframes oc-thread-fade-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-thread-post--root {\n padding-top: 0;\n}\n\n.oc-thread-post--highlighted {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin: 0 -20px;\n padding-left: 20px;\n padding-right: 20px;\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-thread-post__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-post__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-post__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.oc-thread-post__author {\n font-size: 14px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-post__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__edited {\n font-size: 12px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__body {\n font-size: 15px;\n line-height: 1.65;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__body p {\n margin: 0 0 12px;\n}\n\n.oc-thread-post__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-post__resources {\n margin-top: 14px;\n}\n\n.oc-thread-post__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: 14px;\n}\n\n.oc-thread-post__reactions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-thread-post__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-post:hover .oc-thread-post__actions {\n opacity: 1;\n}\n\n.oc-thread-post__reply-count {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-left: auto;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-post__reply-count svg {\n opacity: 0.6;\n}\n\n/* ============ Thread Reply (Nested) ============ */\n.oc-thread-reply {\n position: relative;\n display: flex;\n flex-direction: column;\n padding-left: 24px;\n}\n\n.oc-thread-reply__connector {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 24px;\n display: flex;\n justify-content: center;\n}\n\n.oc-thread-reply__line {\n width: 2px;\n height: 100%;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: 1px;\n}\n\n.oc-thread-reply:last-child .oc-thread-reply__line {\n height: 32px;\n}\n\n.oc-thread-reply__content {\n display: flex;\n gap: 12px;\n padding: 14px 0;\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__content {\n padding: 10px 0;\n}\n\n.oc-thread-reply--highlighted .oc-thread-reply__content {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin-left: -12px;\n padding-left: 12px;\n border-radius: var(--oc-radius-md, 8px);\n}\n\n.oc-thread-reply__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-reply__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-reply__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__header {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__author {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-reply__time {\n font-size: 11px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__edited {\n font-size: 11px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__body p {\n margin: 0 0 10px;\n}\n\n.oc-thread-reply__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__resources {\n margin-top: 10px;\n}\n\n.oc-thread-reply__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__footer {\n margin-top: 0;\n}\n\n.oc-thread-reply__reactions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-thread-reply__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-reply:hover .oc-thread-reply__actions {\n opacity: 1;\n}\n\n.oc-thread-reply__toggle {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n margin-left: auto;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-reply__toggle:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__toggle-icon {\n transition: transform 0.2s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__toggle-icon {\n transform: rotate(-90deg);\n}\n\n.oc-thread-reply__replies {\n margin-top: 4px;\n}\n\n/* Depth indentation limits */\n.oc-thread-reply--depth-1 { padding-left: 24px; }\n.oc-thread-reply--depth-2 { padding-left: 20px; }\n.oc-thread-reply--depth-3 { padding-left: 16px; }\n.oc-thread-reply--depth-4 { padding-left: 12px; }\n\n/* ============ Mention ============ */\n.oc-mention {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n vertical-align: baseline;\n}\n\n.oc-mention:hover {\n background: rgba(15, 118, 110, 0.2);\n color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-mention__avatar {\n display: flex;\n align-items: center;\n margin-right: 2px;\n}\n\n.oc-mention__at {\n opacity: 0.7;\n}\n\n.oc-mention__name {\n font-weight: 600;\n}\n\n/* ============ Linked Resource ============ */\n.oc-linked-resource {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 13px;\n font-family: inherit;\n color: var(--resource-color, var(--oc-fg-secondary));\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n text-decoration: none;\n}\n\n.oc-linked-resource:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--resource-color, var(--oc-border-default));\n transform: translateY(-1px);\n}\n\n.oc-linked-resource__icon {\n display: flex;\n align-items: center;\n opacity: 0.8;\n}\n\n.oc-linked-resource__title {\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.oc-linked-resource__ref {\n font-size: 11px;\n font-weight: 400;\n color: var(--oc-fg-tertiary, #94A3B8);\n padding-left: 6px;\n border-left: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* Resource type colors */\n.oc-linked-resource--document { --resource-color: var(--oc-info, #0891B2); }\n.oc-linked-resource--collection { --resource-color: var(--oc-warning, #D97706); }\n.oc-linked-resource--annotation { --resource-color: var(--oc-accent, #0F766E); }\n.oc-linked-resource--comment { --resource-color: var(--oc-fg-secondary, #475569); }\n.oc-linked-resource--clause { --resource-color: var(--oc-success, #059669); }\n.oc-linked-resource--user { --resource-color: var(--oc-accent, #0F766E); }\n\n/* ============ Resource List ============ */\n.oc-resource-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-resource-list__label {\n font-size: 12px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-resource-list__items {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n/* ============ Reaction Button ============ */\n.oc-reaction-button {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 14px;\n font-family: inherit;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-button:hover {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n transform: scale(1.05);\n}\n\n.oc-reaction-button--active {\n background: rgba(15, 118, 110, 0.1);\n border-color: rgba(15, 118, 110, 0.3);\n}\n\n.oc-reaction-button--active:hover {\n background: rgba(15, 118, 110, 0.15);\n}\n\n.oc-reaction-button__emoji {\n font-size: 14px;\n line-height: 1;\n}\n\n.oc-reaction-button__count {\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-reaction-button--active .oc-reaction-button__count {\n color: var(--oc-accent, #0F766E);\n}\n\n/* ============ Reaction Bar ============ */\n.oc-reaction-bar {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-reaction-bar__add {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px dashed var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-bar__add:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* ============ Thread Action ============ */\n.oc-thread-action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 10px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-action:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-action--destructive {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action--destructive:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action__label {\n white-space: nowrap;\n}\n\n/* ============ Thread Input ============ */\n.oc-thread-input {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-input__replying {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n}\n\n.oc-thread-input__replying-label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-input__cancel {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n margin-left: auto;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-input__cancel:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n/* ============ Thread Meta ============ */\n.oc-thread-meta {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n padding: 12px 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-meta__item {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n\n.oc-thread-meta__item svg {\n opacity: 0.6;\n}\n\n.oc-thread-meta__participants {\n display: flex;\n align-items: center;\n}\n\n.oc-thread-meta__activity {\n margin-left: auto;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n\n\n/* ============ Category Badge ============ */\n.oc-category-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--category-color, var(--oc-fg-secondary, #475569));\n background: color-mix(in srgb, var(--category-color, var(--oc-fg-secondary)) 10%, transparent);\n border-radius: var(--oc-radius-sm, 6px);\n white-space: nowrap;\n}\n\n.oc-category-badge__label {\n line-height: 1;\n}\n\n/* ============ Discussion List ============ */\n.oc-discussion-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n}\n\n.oc-discussion-list--card {\n gap: 12px;\n background: transparent;\n}\n\n.oc-discussion-list--compact,\n.oc-discussion-list--minimal {\n border: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-discussion-list--loading {\n gap: 0;\n}\n\n.oc-discussion-list__loading {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.oc-discussion-list__skeleton {\n height: 80px;\n background: var(--oc-bg-surface, #F8F8F8);\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n.oc-discussion-list__skeleton:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.oc-discussion-list__skeleton:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* ============ Discussion Item - Card Variant ============ */\n.oc-discussion-item--card {\n display: flex;\n gap: 16px;\n padding: 16px 20px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item--card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.04));\n transform: translateY(-1px);\n}\n\n.oc-discussion-item--card:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-discussion-item--card.oc-discussion-item--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.03) 0%, transparent 30%);\n}\n\n.oc-discussion-item--card.oc-discussion-item--unread {\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item--card.oc-discussion-item--answered,\n.oc-discussion-item--card.oc-discussion-item--resolved {\n border-left: 3px solid var(--oc-success, #059669);\n}\n\n/* Vote column */\n.oc-discussion-item__votes {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n min-width: 40px;\n padding-top: 2px;\n}\n\n.oc-discussion-item__vote-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item__vote-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-accent, #0F766E);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__vote-btn--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-item__vote-btn--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-discussion-item__vote-count {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* Main content */\n.oc-discussion-item__main {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-discussion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__status-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-discussion-item__status-icon--resolved {\n color: var(--oc-success, #059669);\n}\n\n.oc-discussion-item__status-icon--pinned {\n color: var(--oc-warning, #D97706);\n}\n\n.oc-discussion-item__activity {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n.oc-discussion-item__title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n.oc-discussion-item--card .oc-discussion-item__title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item--unread .oc-discussion-item__title {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__preview {\n margin: 0;\n font-size: 14px;\n line-height: 1.5;\n color: var(--oc-fg-secondary, #475569);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-discussion-item__tag {\n display: inline-block;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n margin-top: 4px;\n}\n\n.oc-discussion-item__author {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-discussion-item__author-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-item__author-badge {\n display: inline-flex;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-discussion-item__created {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item__stats {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-discussion-item__stat {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item__stat svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Item - Compact Variant ============ */\n.oc-discussion-item--compact {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--compact:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--compact:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--compact.oc-discussion-item--pinned {\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.05) 0%, transparent 20%);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__leading {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__title {\n font-size: 14px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tags {\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tag {\n font-size: 10px;\n padding: 1px 6px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n/* ============ Discussion Item - Minimal Variant ============ */\n.oc-discussion-item--minimal {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--minimal:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--minimal:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__avatar {\n flex-shrink: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__title {\n font-size: 14px;\n margin-bottom: 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__byline {\n font-size: 12px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time::before {\n content: '\\00B7';\n margin: 0 6px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-canvas, #FAFAFA);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Filters ============ */\n.oc-discussion-filters {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n margin-bottom: 16px;\n}\n\n.oc-discussion-filters__categories {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.oc-discussion-filters__category {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__category:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-discussion-filters__category--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-filters__category--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-discussion-filters__count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n font-size: 11px;\n font-weight: 600;\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-filters__category--active .oc-discussion-filters__count {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.oc-discussion-filters__actions {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-filters__search {\n position: relative;\n flex: 1;\n min-width: 200px;\n max-width: 400px;\n}\n\n.oc-discussion-filters__search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n pointer-events: none;\n}\n\n.oc-discussion-filters__search-input {\n width: 100%;\n padding: 10px 12px 10px 38px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__search-input:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n.oc-discussion-filters__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-filters__sort {\n padding: 10px 32px 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white) url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\") right 8px center/20px no-repeat;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n appearance: none;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__sort:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* ============ New Discussion Button ============ */\n.oc-new-discussion-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n font-size: 14px;\n font-weight: 600;\n font-family: inherit;\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-new-discussion-btn:hover {\n background: var(--oc-accent-hover, #0D9488);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-md, 0 4px 6px rgba(15, 23, 42, 0.05));\n}\n\n.oc-new-discussion-btn:active {\n transform: translateY(0);\n}\n\n.oc-new-discussion-btn:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============ Discussion Stats ============ */\n.oc-discussion-stats {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 12px 0;\n}\n\n.oc-discussion-stats__item {\n display: flex;\n align-items: baseline;\n gap: 6px;\n}\n\n.oc-discussion-stats__value {\n font-size: 18px;\n font-weight: 700;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-stats__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-stats__item--answered .oc-discussion-stats__value {\n color: var(--oc-success, #059669);\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 768px) {\n .oc-discussion-item--card {\n flex-direction: column;\n gap: 12px;\n }\n\n .oc-discussion-item__votes {\n flex-direction: row;\n min-width: unset;\n gap: 8px;\n order: -1;\n }\n\n .oc-discussion-item__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-discussion-item__stats {\n width: 100%;\n justify-content: flex-start;\n }\n\n .oc-discussion-filters__categories {\n overflow-x: auto;\n flex-wrap: nowrap;\n padding-bottom: 8px;\n margin-bottom: -8px;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-discussion-filters__category {\n flex-shrink: 0;\n }\n\n .oc-discussion-filters__actions {\n flex-direction: column;\n align-items: stretch;\n }\n\n .oc-discussion-filters__search {\n max-width: none;\n }\n\n .oc-discussion-filters__sort {\n width: 100%;\n }\n\n .oc-discussion-stats {\n flex-wrap: wrap;\n gap: 16px;\n }\n}\n\n@media (max-width: 480px) {\n .oc-discussion-item--compact,\n .oc-discussion-item--minimal {\n padding: 10px 12px;\n }\n\n .oc-discussion-item--compact .oc-discussion-item__meta {\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n }\n\n .oc-new-discussion-btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM CONTAINER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-filesystem {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FAFAFA);\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n.oc-filesystem__layout {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n.oc-filesystem__sidebar {\n width: 240px;\n min-width: 240px;\n background: var(--oc-bg-surface, white);\n border-right: 1px solid var(--oc-border-default, #E2E8F0);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-filesystem__main {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree {\n display: flex;\n flex-direction: column;\n padding: 8px;\n overflow-y: auto;\n}\n\n.oc-folder-tree__root {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 10px 12px;\n margin-bottom: 4px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n}\n\n.oc-folder-tree__root:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree__root--active {\n background: rgba(15, 118, 110, 0.08);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree__root-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-folder-tree__root-label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree__content {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE ITEM\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree-item {\n display: flex;\n flex-direction: column;\n}\n\n.oc-folder-tree-item__row {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px 8px;\n border-radius: var(--oc-radius-md, 8px);\n transition: background var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__row:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-folder-tree-item--active > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.08);\n}\n\n.oc-folder-tree-item--in-path > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-folder-tree-item__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-folder-tree-item__toggle:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-folder-tree-item__toggle--hidden {\n visibility: hidden;\n}\n\n.oc-folder-tree-item__chevron--expanded {\n transform: rotate(90deg);\n}\n\n.oc-folder-tree-item__button {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 0;\n padding: 6px 8px;\n background: transparent;\n border: none;\n font-family: inherit;\n font-size: 13px;\n font-weight: 400;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n text-align: left;\n border-radius: var(--oc-radius-sm, 6px);\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__button:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__button {\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #F59E0B;\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__icon {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree-item__children {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE PATH BREADCRUMB\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-breadcrumb {\n display: flex;\n align-items: center;\n}\n\n.oc-file-breadcrumb__list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.oc-file-breadcrumb__item {\n display: flex;\n align-items: center;\n gap: 2px;\n}\n\n.oc-file-breadcrumb__link {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-file-breadcrumb__link:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-file-breadcrumb__link--active {\n color: var(--oc-fg-primary, #1E293B);\n cursor: default;\n}\n\n.oc-file-breadcrumb__link--active:hover {\n background: transparent;\n}\n\n.oc-file-breadcrumb__icon {\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-file-breadcrumb__separator {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM TOOLBAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-fs-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-fs-toolbar__left {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-fs-toolbar__center {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-fs-toolbar__right {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n}\n\n.oc-fs-toolbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-fs-toolbar__nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__nav-btn:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__nav-btn:disabled {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.oc-fs-toolbar__view-toggle {\n display: flex;\n align-items: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-md, 8px);\n padding: 3px;\n}\n\n.oc-fs-toolbar__view-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__view-btn:hover {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-fs-toolbar__view-btn--active {\n background: var(--oc-bg-surface, white);\n color: var(--oc-fg-primary, #1E293B);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-fs-toolbar__button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__button:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__button--primary {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-fs-toolbar__button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-fs-toolbar__button-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-fs-toolbar__separator {\n width: 1px;\n height: 24px;\n background: var(--oc-border-default, #E2E8F0);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-file-list__header {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FAFAFA);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__header-cell {\n flex-shrink: 0;\n}\n\n.oc-file-list__header-cell--name {\n flex: 1;\n min-width: 0;\n}\n\n.oc-file-list__header-cell--modified {\n width: 140px;\n}\n\n.oc-file-list__header-cell--size {\n width: 100px;\n text-align: right;\n}\n\n.oc-file-list__content {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n\n.oc-file-list--list .oc-file-list__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 8px;\n}\n\n.oc-file-list--grid .oc-file-list__content {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 12px;\n padding: 16px;\n}\n\n.oc-file-list__empty {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n}\n\n.oc-file-list__empty-content {\n text-align: center;\n max-width: 300px;\n}\n\n.oc-file-list__empty-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 8px;\n}\n\n.oc-file-list__empty-description {\n font-size: 14px;\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - LIST VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--list {\n display: flex;\n align-items: center;\n padding: 10px 12px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--list:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-file-list-item--list:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--list.oc-file-list-item--selected {\n background: rgba(15, 118, 110, 0.08);\n border-color: rgba(15, 118, 110, 0.2);\n}\n\n.oc-file-list-item__cell {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-file-list-item__cell--name {\n flex: 1;\n min-width: 0;\n gap: 12px;\n}\n\n.oc-file-list-item__cell--modified {\n width: 140px;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__cell--size {\n width: 100px;\n justify-content: flex-end;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__name-text {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - GRID VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--grid {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 16px 12px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--grid:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-file-list-item--grid:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--grid.oc-file-list-item--selected {\n border-color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon {\n width: 48px;\n height: 48px;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__name {\n width: 100%;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE ICONS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n}\n\n.oc-file-list-item__icon--folder {\n color: #F59E0B;\n}\n\n.oc-file-list-item__icon--pdf {\n color: #DC2626;\n}\n\n.oc-file-list-item__icon--document {\n color: #2563EB;\n}\n\n.oc-file-list-item__icon--image {\n color: #059669;\n}\n\n.oc-file-list-item__icon--spreadsheet {\n color: #059669;\n}\n\n.oc-file-list-item__icon--presentation {\n color: #EA580C;\n}\n\n.oc-file-list-item__icon--archive {\n color: #7C3AED;\n}\n\n.oc-file-list-item__icon--unknown {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (max-width: 768px) {\n .oc-filesystem__sidebar {\n display: none;\n }\n\n .oc-file-list__header-cell--modified,\n .oc-file-list-item__cell--modified {\n display: none;\n }\n\n .oc-file-list__header-cell--size,\n .oc-file-list-item__cell--size {\n width: 80px;\n }\n\n .oc-file-breadcrumb__list {\n overflow-x: auto;\n flex-wrap: nowrap;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-fs-toolbar {\n padding: 10px 12px;\n gap: 8px;\n }\n}\n\n\n\n/* ============================================\n ExtractCard Component\n ============================================ */\n\n.oc-extract-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-extract-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-extract-card--clickable {\n cursor: pointer;\n}\n\n.oc-extract-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* Icon */\n.oc-extract-card__icon {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-extract-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-extract-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-extract-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Status badge */\n.oc-extract-card__status {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n.oc-extract-card__status svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-extract-card__status--pending {\n background: #F1F5F9;\n color: #64748B;\n}\n\n.oc-extract-card__status--queued {\n background: #FEF3C7;\n color: #92400E;\n}\n\n.oc-extract-card__status--running {\n background: #DBEAFE;\n color: #1E40AF;\n}\n\n.oc-extract-card__status--completed {\n background: #D1FAE5;\n color: #065F46;\n}\n\n.oc-extract-card__status--failed {\n background: #FEE2E2;\n color: #991B1B;\n}\n\n.oc-extract-card__progress-text {\n font-weight: 500;\n opacity: 0.8;\n}\n\n/* Spinning animation for running status */\n@keyframes oc-extract-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.oc-extract-card__status-icon--spinning {\n animation: oc-extract-spin 1s linear infinite;\n}\n\n/* Corpus badge */\n.oc-extract-card__corpus {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-extract-card__corpus::before {\n content: 'from ';\n opacity: 0.7;\n}\n\n/* Name */\n.oc-extract-card__name {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 4px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-extract-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Progress bar */\n.oc-extract-card__progress-bar {\n height: 4px;\n background: var(--oc-bg-surface-hover, #E2E8F0);\n border-radius: 2px;\n overflow: hidden;\n margin-bottom: 12px;\n}\n\n.oc-extract-card__progress-fill {\n height: 100%;\n background: var(--oc-accent, #E85A4F);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* Footer */\n.oc-extract-card__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n}\n\n/* Stats */\n.oc-extract-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-secondary, #64748B);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-extract-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-extract-card__stats span:not(:last-child)::after {\n content: '\\00B7';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* Time */\n.oc-extract-card__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Menu */\n.oc-extract-card__menu {\n display: flex;\n flex-shrink: 0;\n align-self: flex-start;\n margin-left: 8px;\n}\n\n.oc-extract-card__menu-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n min-width: 32px;\n min-height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-extract-card__menu-button:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n.oc-extract-card__menu-button:focus-visible {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* ============================================\n ExtractList Component\n ============================================ */\n\n.oc-extract-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-extract-list--gap-sm {\n gap: 12px;\n}\n\n.oc-extract-list--gap-md {\n gap: 16px;\n}\n\n.oc-extract-list--gap-lg {\n gap: 24px;\n}\n\n/* Grid layout */\n.oc-extract-list--grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-extract-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-extract-card__icon {\n width: 36px;\n height: 36px;\n }\n\n .oc-extract-card__icon svg {\n width: 18px;\n height: 18px;\n }\n\n .oc-extract-card__name {\n font-size: 15px;\n }\n\n .oc-extract-card__description {\n font-size: 13px;\n }\n\n .oc-extract-card__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-extract-list--grid {\n grid-template-columns: 1fr;\n }\n}\n\n\n\n/* ============================================\n DataGrid Component\n ============================================ */\n\n.oc-data-grid {\n position: relative;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: auto;\n}\n\n.oc-data-grid__table {\n width: 100%;\n min-width: max-content;\n border-collapse: collapse;\n font-size: 14px;\n}\n\n/* Header */\n.oc-data-grid__header {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-data-grid--sticky-header .oc-data-grid__header {\n position: sticky;\n top: 0;\n z-index: 10;\n}\n\n.oc-data-grid__th {\n padding: 14px 16px;\n text-align: left;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #64748B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-data-grid__th--sortable {\n cursor: pointer;\n transition: color var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__th--sortable:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-data-grid__th--checkbox,\n.oc-data-grid__th--actions {\n width: 48px;\n padding: 14px 12px;\n}\n\n.oc-data-grid__th--center {\n text-align: center;\n}\n\n.oc-data-grid__th--right {\n text-align: right;\n}\n\n.oc-data-grid__th-content {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-data-grid__sort-icon {\n opacity: 0.5;\n transition: opacity var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__th--sortable:hover .oc-data-grid__sort-icon {\n opacity: 1;\n}\n\n/* Body */\n.oc-data-grid__body {\n /* Body styles */\n}\n\n.oc-data-grid__row {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n transition: background-color var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__row:last-child {\n border-bottom: none;\n}\n\n.oc-data-grid__row:hover {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-data-grid__row--clickable {\n cursor: pointer;\n}\n\n.oc-data-grid__row--selected {\n background: rgba(232, 90, 79, 0.06);\n}\n\n.oc-data-grid__row--selected:hover {\n background: rgba(232, 90, 79, 0.1);\n}\n\n/* Striped */\n.oc-data-grid--striped .oc-data-grid__row:nth-child(even) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n.oc-data-grid--striped .oc-data-grid__row:nth-child(even):hover {\n background: #F1F5F9;\n}\n\n/* Cells */\n.oc-data-grid__cell {\n padding: 14px 16px;\n color: var(--oc-fg-primary, #1E293B);\n vertical-align: middle;\n}\n\n.oc-data-grid__cell--checkbox,\n.oc-data-grid__cell--actions {\n width: 48px;\n padding: 14px 12px;\n}\n\n.oc-data-grid__cell--center {\n text-align: center;\n}\n\n.oc-data-grid__cell--right {\n text-align: right;\n}\n\n.oc-data-grid__cell--number {\n font-variant-numeric: tabular-nums;\n}\n\n.oc-data-grid__cell-content {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Compact mode */\n.oc-data-grid--compact .oc-data-grid__th {\n padding: 10px 12px;\n}\n\n.oc-data-grid--compact .oc-data-grid__cell {\n padding: 10px 12px;\n}\n\n/* Checkbox styling */\n.oc-data-grid__checkbox-wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.oc-data-grid__checkbox {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.oc-data-grid__checkbox-custom {\n width: 18px;\n height: 18px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n border-radius: 4px;\n background: var(--oc-bg-surface, #FFFFFF);\n transition: all var(--oc-duration-fast, 0.15s);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-data-grid__checkbox-custom::after {\n content: '';\n width: 10px;\n height: 10px;\n background: var(--oc-accent, #E85A4F);\n border-radius: 2px;\n transform: scale(0);\n transition: transform var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__checkbox:checked + .oc-data-grid__checkbox-custom {\n border-color: var(--oc-accent, #E85A4F);\n}\n\n.oc-data-grid__checkbox:checked + .oc-data-grid__checkbox-custom::after {\n transform: scale(1);\n}\n\n.oc-data-grid__checkbox:indeterminate + .oc-data-grid__checkbox-custom {\n border-color: var(--oc-accent, #E85A4F);\n}\n\n.oc-data-grid__checkbox:indeterminate + .oc-data-grid__checkbox-custom::after {\n transform: scale(1);\n height: 3px;\n border-radius: 1px;\n}\n\n.oc-data-grid__checkbox:focus-visible + .oc-data-grid__checkbox-custom {\n outline: 2px solid var(--oc-accent, #E85A4F);\n outline-offset: 2px;\n}\n\n/* Boolean check */\n.oc-data-grid__boolean-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #D1FAE5;\n color: #065F46;\n}\n\n/* Links */\n.oc-data-grid__link {\n color: var(--oc-accent, #E85A4F);\n text-decoration: none;\n transition: opacity var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__link:hover {\n opacity: 0.8;\n text-decoration: underline;\n}\n\n/* Cell actions */\n.oc-data-grid__cell-action-wrapper {\n position: relative;\n margin-left: auto;\n}\n\n.oc-data-grid__cell-action-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n opacity: 0;\n transition: all var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__row:hover .oc-data-grid__cell-action-btn,\n.oc-data-grid__cell-action-btn[aria-expanded=\"true\"] {\n opacity: 1;\n}\n\n.oc-data-grid__cell-action-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Cell menu */\n.oc-data-grid__cell-menu {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 20;\n min-width: 160px;\n margin-top: 4px;\n padding: 6px 0;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.oc-data-grid__cell-menu-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 14px;\n background: transparent;\n border: none;\n font-size: 14px;\n color: var(--oc-fg-primary, #334155);\n text-align: left;\n cursor: pointer;\n transition: background var(--oc-duration-fast, 0.15s);\n}\n\n.oc-data-grid__cell-menu-item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-data-grid__cell-menu-item--danger {\n color: #DC2626;\n}\n\n.oc-data-grid__cell-menu-item--danger:hover {\n background: #FEF2F2;\n}\n\n.oc-data-grid__cell-menu-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0.7;\n}\n\n/* Empty state */\n.oc-data-grid__empty {\n padding: 48px 24px;\n text-align: center;\n}\n\n.oc-data-grid__empty-default {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-data-grid__empty-default p {\n margin: 0;\n font-size: 15px;\n}\n\n/* Loading skeleton */\n.oc-data-grid__row--skeleton {\n pointer-events: none;\n}\n\n.oc-data-grid__skeleton {\n height: 16px;\n background: linear-gradient(\n 90deg,\n var(--oc-bg-surface-hover, #F1F5F9) 0%,\n #E2E8F0 50%,\n var(--oc-bg-surface-hover, #F1F5F9) 100%\n );\n background-size: 200% 100%;\n border-radius: 4px;\n animation: oc-data-grid-shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-data-grid-shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-data-grid {\n border-radius: var(--oc-radius-md, 8px);\n }\n\n .oc-data-grid__th {\n padding: 12px;\n font-size: 11px;\n }\n\n .oc-data-grid__cell {\n padding: 12px;\n font-size: 13px;\n }\n\n .oc-data-grid__cell-action-btn {\n opacity: 1;\n }\n}\n\n\n\n .oc-node {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .oc-node__circle {\n border-radius: var(--oc-radius-full, 9999px);\n background-color: var(--oc-accent, #0F766E);\n transition:\n transform var(--oc-transition-fast, 0.15s) ease,\n background-color var(--oc-transition-fast, 0.15s) ease,\n box-shadow var(--oc-transition-fast, 0.15s) ease;\n }\n\n /* Sizes */\n .oc-node--xs .oc-node__circle {\n width: 6px;\n height: 6px;\n }\n\n .oc-node--sm .oc-node__circle {\n width: 8px;\n height: 8px;\n }\n\n .oc-node--md .oc-node__circle {\n width: 12px;\n height: 12px;\n }\n\n .oc-node--lg .oc-node__circle {\n width: 16px;\n height: 16px;\n }\n\n /* Variants */\n .oc-node--default .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n }\n\n .oc-node--active .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n }\n\n .oc-node--muted .oc-node__circle {\n background-color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-node--connected .oc-node__circle {\n background-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px var(--oc-bg-surface, #FFFFFF),\n 0 0 0 4px var(--oc-accent, #0F766E);\n }\n\n /* Interactive state */\n .oc-node--interactive {\n cursor: pointer;\n }\n\n .oc-node--interactive:hover .oc-node__circle {\n transform: scale(1.2);\n background-color: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-node--interactive:active .oc-node__circle {\n transform: scale(1.1);\n }\n\n /* Pulse animation */\n .oc-node--pulse .oc-node__circle {\n animation: oc-node-pulse 2s ease-in-out infinite;\n }\n\n @keyframes oc-node-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 var(--oc-accent-light, rgba(15, 118, 110, 0.4));\n }\n 50% {\n box-shadow: 0 0 0 6px var(--oc-accent-light, rgba(15, 118, 110, 0));\n }\n }\n\n /* Count badge */\n .oc-node__count {\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translateY(-50%);\n margin-left: 4px;\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n line-height: 1;\n }\n\n .oc-node--active .oc-node__count,\n .oc-node--interactive:hover .oc-node__count {\n color: var(--oc-accent, #0F766E);\n }\n\n\n\n .oc-edge {\n pointer-events: visibleStroke;\n }\n\n .oc-edge__line {\n fill: none;\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1.5;\n stroke-linecap: round;\n transition:\n stroke var(--oc-transition-fast, 0.15s) ease,\n stroke-width var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-edge__arrow {\n fill: var(--oc-border-default, #E2E8F0);\n transition: fill var(--oc-transition-fast, 0.15s) ease;\n }\n\n /* Variants */\n .oc-edge--solid .oc-edge__line {\n stroke-dasharray: none;\n }\n\n .oc-edge--dashed .oc-edge__line {\n stroke-dasharray: 6 4;\n }\n\n .oc-edge--dotted .oc-edge__line {\n stroke-dasharray: 2 3;\n }\n\n /* States */\n .oc-edge--active .oc-edge__line {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n }\n\n .oc-edge--active .oc-edge__arrow {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-edge--muted .oc-edge__line {\n stroke: var(--oc-border-default, #E2E8F0);\n opacity: 0.5;\n }\n\n .oc-edge--muted .oc-edge__arrow {\n fill: var(--oc-border-default, #E2E8F0);\n opacity: 0.5;\n }\n\n /* Hover state */\n .oc-edge:hover .oc-edge__line {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n }\n\n .oc-edge:hover .oc-edge__arrow {\n fill: var(--oc-accent, #0F766E);\n }\n\n /* Animation */\n .oc-edge--animated .oc-edge__line {\n stroke-dasharray: 8 4;\n animation: oc-edge-flow 1s linear infinite;\n }\n\n @keyframes oc-edge-flow {\n from {\n stroke-dashoffset: 0;\n }\n to {\n stroke-dashoffset: -12;\n }\n }\n\n /* Label */\n .oc-edge__label-group {\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-edge:hover .oc-edge__label-group,\n .oc-edge--active .oc-edge__label-group {\n opacity: 1;\n }\n\n .oc-edge__label-bg {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1;\n }\n\n .oc-edge--active .oc-edge__label-bg {\n stroke: var(--oc-accent, #0F766E);\n }\n\n .oc-edge__label {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 10px;\n font-weight: 500;\n fill: var(--oc-fg-secondary, #475569);\n }\n\n .oc-edge--active .oc-edge__label {\n fill: var(--oc-accent, #0F766E);\n }\n\n\n\n .oc-relationship-badge {\n display: inline-flex;\n align-items: center;\n gap: 0;\n padding: 2px 4px 2px 2px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n }\n\n .oc-relationship-badge:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 1px;\n }\n\n .oc-relationship-badge--disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n .oc-relationship-badge--disabled:hover {\n background-color: transparent;\n }\n\n /* Connector line */\n .oc-relationship-badge__connector {\n width: 6px;\n height: 1px;\n background-color: var(--oc-fg-tertiary, #94A3B8);\n transition: background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover .oc-relationship-badge__connector,\n .oc-relationship-badge--active .oc-relationship-badge__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Count */\n .oc-relationship-badge__count {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n font-variant-numeric: tabular-nums;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1;\n transition: color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-badge:hover .oc-relationship-badge__count,\n .oc-relationship-badge--active .oc-relationship-badge__count {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Size: sm */\n .oc-relationship-badge--sm {\n gap: 0;\n }\n\n .oc-relationship-badge--sm .oc-relationship-badge__connector {\n width: 5px;\n }\n\n .oc-relationship-badge--sm .oc-relationship-badge__count {\n font-size: 10px;\n }\n\n /* Size: md */\n .oc-relationship-badge--md {\n padding: 3px 6px 3px 3px;\n }\n\n .oc-relationship-badge--md .oc-relationship-badge__connector {\n width: 8px;\n }\n\n .oc-relationship-badge--md .oc-relationship-badge__count {\n font-size: var(--oc-font-size-xs, 11px);\n }\n\n\n\n .oc-relationship-pill {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n text-align: left;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-pill:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-relationship-pill:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n .oc-relationship-pill--active {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n }\n\n .oc-relationship-pill--disabled {\n cursor: default;\n opacity: 0.5;\n }\n\n .oc-relationship-pill--disabled:hover {\n background-color: transparent;\n }\n\n /* Connector */\n .oc-relationship-pill__connector {\n width: 8px;\n height: 1px;\n background-color: var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-relationship-pill:hover .oc-relationship-pill__connector,\n .oc-relationship-pill--active .oc-relationship-pill__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Icon */\n .oc-relationship-pill__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-relationship-pill__icon svg {\n width: 14px;\n height: 14px;\n }\n\n /* Title */\n .oc-relationship-pill__title {\n flex: 1;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 450;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n }\n\n .oc-relationship-pill:hover .oc-relationship-pill__title {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Type label */\n .oc-relationship-pill__type {\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* Direction indicators */\n .oc-relationship-pill--incoming .oc-relationship-pill__type::before {\n content: '\u2190 ';\n opacity: 0.6;\n }\n\n .oc-relationship-pill--outgoing .oc-relationship-pill__type::after {\n content: ' \u2192';\n opacity: 0.6;\n }\n\n /* AI source badge */\n .oc-relationship-pill__source-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1px 4px;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--oc-fg-tertiary, #94A3B8);\n background-color: var(--oc-bg-canvas, #F8FAFC);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n .oc-relationship-pill--source-analyzer .oc-relationship-pill__source-badge {\n color: var(--oc-accent, #0F766E);\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.08));\n border-color: var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n }\n\n\n\n .oc-relationship-popover {\n min-width: 280px;\n max-width: 360px;\n background: var(--oc-bg-surface, #FFFFFF);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 4px 24px rgba(0, 0, 0, 0.12));\n overflow: hidden;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n }\n\n /* Header */\n .oc-relationship-popover__header {\n padding: 12px 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-relationship-popover__title {\n font-size: var(--oc-font-size-sm, 13px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n }\n\n /* List */\n .oc-relationship-popover__list {\n padding: 4px;\n overflow-y: auto;\n }\n\n /* Scrollbar styling */\n .oc-relationship-popover__list::-webkit-scrollbar {\n width: 6px;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-thumb {\n background-color: var(--oc-border-default, #E2E8F0);\n border-radius: 3px;\n }\n\n .oc-relationship-popover__list::-webkit-scrollbar-thumb:hover {\n background-color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n /* Item */\n .oc-relationship-popover__item {\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n text-align: left;\n transition: background-color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__item:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-relationship-popover__item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n /* Node indicator */\n .oc-relationship-popover__node {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full, 9999px);\n background-color: var(--oc-accent, #0F766E);\n flex-shrink: 0;\n }\n\n /* Connector */\n .oc-relationship-popover__connector {\n width: 8px;\n height: 1px;\n background-color: var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-relationship-popover__item:hover .oc-relationship-popover__connector {\n background-color: var(--oc-accent, #0F766E);\n }\n\n /* Icon */\n .oc-relationship-popover__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-relationship-popover__icon svg {\n width: 14px;\n height: 14px;\n }\n\n /* Document title */\n .oc-relationship-popover__doc-title {\n flex: 1;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 450;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n }\n\n .oc-relationship-popover__item:hover .oc-relationship-popover__doc-title {\n color: var(--oc-accent, #0F766E);\n }\n\n /* Relationship type */\n .oc-relationship-popover__rel-type {\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* AI badge */\n .oc-relationship-popover__ai-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 1px 4px;\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.08));\n border: 1px solid var(--oc-accent-light, rgba(15, 118, 110, 0.2));\n border-radius: 3px;\n flex-shrink: 0;\n }\n\n /* Footer */\n .oc-relationship-popover__footer {\n padding: 8px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background-color: var(--oc-bg-canvas, #F8FAFC);\n }\n\n .oc-relationship-popover__graph-link {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 100%;\n padding: 8px 12px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 13px);\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__graph-link:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.08));\n color: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-relationship-popover__graph-link:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n }\n\n .oc-relationship-popover__graph-link svg {\n transition: transform var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-relationship-popover__graph-link:hover svg {\n transform: translateX(2px);\n }\n\n\n\n /* ============================================\n * Document Graph Container\n * ============================================ */\n .oc-document-graph {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 400px;\n background-color: var(--oc-bg-canvas, #F8FAFC);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n }\n\n .oc-document-graph__canvas {\n width: 100%;\n height: 100%;\n cursor: grab;\n user-select: none;\n }\n\n .oc-document-graph--dragging .oc-document-graph__canvas {\n cursor: grabbing;\n }\n\n .oc-document-graph__svg {\n display: block;\n }\n\n .oc-document-graph__content {\n transform-origin: 0 0;\n }\n\n /* Empty state */\n .oc-document-graph__empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100%;\n gap: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-document-graph__empty svg {\n opacity: 0.5;\n }\n\n .oc-document-graph__empty p {\n margin: 0;\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-sm, 14px);\n }\n\n /* ============================================\n * Graph Node\n * ============================================ */\n .oc-graph-node {\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-node__ring {\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 2;\n opacity: 0.3;\n }\n\n .oc-graph-node--selected .oc-graph-node__ring,\n .oc-graph-node--focus .oc-graph-node__ring {\n opacity: 0.5;\n stroke-width: 2.5;\n }\n\n .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n stroke: var(--oc-bg-surface, #FFFFFF);\n stroke-width: 2;\n transition:\n fill var(--oc-transition-fast, 0.15s) ease,\n transform var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-node:hover .oc-graph-node__circle {\n fill: var(--oc-accent-hover, #0D9488);\n }\n\n .oc-graph-node--depth-1 .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-node--depth-2 .oc-graph-node__circle {\n fill: var(--oc-accent, #0F766E);\n opacity: 0.7;\n }\n\n .oc-graph-node__initial {\n fill: var(--oc-bg-surface, #FFFFFF);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n .oc-graph-node__icon-wrapper {\n overflow: visible;\n }\n\n .oc-graph-node__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: var(--oc-bg-surface, #FFFFFF);\n }\n\n .oc-graph-node__icon svg {\n width: 60%;\n height: 60%;\n }\n\n .oc-graph-node__title {\n fill: var(--oc-fg-primary, #1E293B);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 500;\n }\n\n .oc-graph-node--focus .oc-graph-node__title {\n font-weight: 600;\n }\n\n .oc-graph-node__count {\n fill: var(--oc-fg-tertiary, #94A3B8);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n }\n\n /* Expand badge */\n .oc-graph-node__expand-badge {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-accent, #0F766E);\n stroke-width: 1.5;\n }\n\n .oc-graph-node__expand-icon {\n fill: var(--oc-accent, #0F766E);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n .oc-graph-node--expandable:hover .oc-graph-node__expand-badge {\n fill: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-node--expandable:hover .oc-graph-node__expand-icon {\n fill: var(--oc-bg-surface, #FFFFFF);\n }\n\n /* ============================================\n * Graph Edge\n * ============================================ */\n .oc-graph-edge {\n pointer-events: visibleStroke;\n }\n\n .oc-graph-edge__line {\n fill: none;\n stroke: var(--oc-border-default, #CBD5E1);\n stroke-width: 1.5;\n stroke-linecap: round;\n transition:\n stroke var(--oc-transition-fast, 0.15s) ease,\n stroke-width var(--oc-transition-fast, 0.15s) ease,\n opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge__arrow {\n fill: var(--oc-border-default, #CBD5E1);\n transition: fill var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge:hover .oc-graph-edge__line,\n .oc-graph-edge--selected .oc-graph-edge__line {\n stroke-width: 2;\n }\n\n .oc-graph-edge--muted .oc-graph-edge__line {\n opacity: 0.3;\n }\n\n .oc-graph-edge--muted .oc-graph-edge__arrow {\n opacity: 0.3;\n }\n\n /* Label */\n .oc-graph-edge__label-group {\n pointer-events: none;\n opacity: 0;\n transition: opacity var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-edge:hover .oc-graph-edge__label-group,\n .oc-graph-edge--selected .oc-graph-edge__label-group {\n opacity: 1;\n }\n\n .oc-graph-edge__label-bg {\n fill: var(--oc-bg-surface, #FFFFFF);\n stroke: var(--oc-border-default, #E2E8F0);\n stroke-width: 1;\n }\n\n .oc-graph-edge__label {\n fill: var(--oc-fg-secondary, #475569);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: 11px;\n font-weight: 500;\n }\n\n .oc-graph-edge__ai-badge-bg {\n fill: var(--oc-accent-light, rgba(15, 118, 110, 0.1));\n }\n\n .oc-graph-edge__ai-badge {\n fill: var(--oc-accent, #0F766E);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-weight: 600;\n }\n\n /* ============================================\n * Graph Controls\n * ============================================ */\n .oc-graph-controls {\n position: absolute;\n bottom: 16px;\n left: 16px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n max-width: calc(100% - 32px);\n }\n\n .oc-graph-controls__group {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px;\n background: var(--oc-bg-surface, #FFFFFF);\n border-radius: var(--oc-radius-md, 8px);\n box-shadow: var(--oc-shadow-md, 0 2px 8px rgba(0, 0, 0, 0.08));\n }\n\n .oc-graph-controls__button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: 6px 8px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-controls__button:hover:not(:disabled) {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n color: var(--oc-fg-primary, #1E293B);\n }\n\n .oc-graph-controls__button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n\n .oc-graph-controls__button--active {\n background-color: var(--oc-accent-light, rgba(15, 118, 110, 0.1));\n color: var(--oc-accent, #0F766E);\n }\n\n .oc-graph-controls__button--text {\n min-width: 44px;\n font-variant-numeric: tabular-nums;\n }\n\n .oc-graph-controls__load-more {\n padding: 6px 12px;\n }\n\n /* Filters */\n .oc-graph-controls__filters {\n gap: 4px;\n }\n\n .oc-graph-controls__filter {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 10px 4px 8px;\n margin: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: var(--oc-font-family, 'Inter', system-ui, sans-serif);\n font-size: var(--oc-font-size-xs, 11px);\n font-weight: 500;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition:\n background-color var(--oc-transition-fast, 0.15s) ease,\n color var(--oc-transition-fast, 0.15s) ease;\n }\n\n .oc-graph-controls__filter:hover {\n background-color: var(--oc-bg-surface-hover, rgba(15, 118, 110, 0.06));\n }\n\n .oc-graph-controls__filter--active {\n color: var(--oc-fg-primary, #1E293B);\n }\n\n .oc-graph-controls__filter-dot {\n width: 8px;\n height: 8px;\n border-radius: var(--oc-radius-full, 9999px);\n flex-shrink: 0;\n }\n\n .oc-graph-controls__filter:not(.oc-graph-controls__filter--active) .oc-graph-controls__filter-dot {\n opacity: 0.4;\n }\n\n /* Spinner */\n .oc-graph-controls__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0F766E);\n border-radius: 50%;\n animation: oc-spin var(--oc-animation-spin, 0.8s) linear infinite;\n }\n\n\n\n/* \u2500\u2500\u2500 Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n font-family: inherit;\n}\n\n.oc-dropdown--fluid {\n width: 100%;\n}\n\n/* \u2500\u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--oc-spacing-sm);\n min-height: 38px;\n padding: 6px 12px;\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default),\n background-color var(--oc-duration-fast) var(--oc-easing-default);\n outline: none;\n user-select: none;\n}\n\n.oc-dropdown__trigger:hover:not(.oc-dropdown__trigger--disabled) {\n background: var(--oc-bg-surface-hover);\n border-color: var(--oc-border-strong);\n}\n\n.oc-dropdown__trigger:focus-visible:not(.oc-dropdown__trigger--disabled) {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2);\n}\n\n.oc-dropdown__trigger--open {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2);\n}\n\n.oc-dropdown__trigger--disabled {\n background: var(--oc-bg-subtle);\n border-color: var(--oc-border-default);\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n opacity: var(--oc-opacity-disabled);\n}\n\n.oc-dropdown__trigger--custom {\n /* Reset all built-in styling for custom triggers */\n min-height: unset;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: 0;\n box-shadow: none;\n}\n\n.oc-dropdown__trigger--custom:hover,\n.oc-dropdown__trigger--custom:focus-visible,\n.oc-dropdown__trigger--custom.oc-dropdown__trigger--open {\n background: transparent;\n border: none;\n box-shadow: none;\n}\n\n/* \u2500\u2500\u2500 Trigger content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__trigger-content {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex: 1;\n min-width: 0;\n overflow: hidden;\n}\n\n.oc-dropdown__trigger-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--oc-fg-secondary);\n}\n\n.oc-dropdown__trigger-icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-dropdown__value {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-primary);\n}\n\n.oc-dropdown__placeholder {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-secondary);\n}\n\n/* \u2500\u2500\u2500 Indicators \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__indicators {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n flex-shrink: 0;\n margin-left: var(--oc-spacing-xs);\n}\n\n.oc-dropdown__chevron {\n display: flex;\n align-items: center;\n color: var(--oc-fg-secondary);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-dropdown__trigger--open .oc-dropdown__chevron {\n transform: rotate(180deg);\n}\n\n.oc-dropdown__clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: color var(--oc-duration-fast) var(--oc-easing-default),\n background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-dropdown__clear:hover {\n color: var(--oc-error);\n background: rgba(220, 38, 38, 0.06);\n}\n\n.oc-dropdown__spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n color: var(--oc-fg-secondary);\n flex-shrink: 0;\n}\n\n/* \u2500\u2500\u2500 Tags (multiselect) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n align-items: center;\n}\n\n.oc-dropdown__tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n background: rgba(15, 118, 110, 0.1);\n border: 1px solid rgba(15, 118, 110, 0.2);\n border-radius: 6px;\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-accent);\n line-height: var(--oc-line-height-tight);\n white-space: nowrap;\n}\n\n.oc-dropdown__tag-label {\n max-width: 120px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.oc-dropdown__tag-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-accent);\n cursor: pointer;\n border-radius: 2px;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-dropdown__tag-remove:hover {\n color: var(--oc-error);\n}\n\n/* \u2500\u2500\u2500 Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__menu {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n right: 0;\n z-index: var(--oc-z-dropdown);\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n animation: oc-dropdown-enter var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n.oc-dropdown__menu--upward {\n top: auto;\n bottom: calc(100% + 4px);\n animation-name: oc-dropdown-enter-up;\n}\n\n.oc-dropdown__menu--align-right {\n left: auto;\n right: 0;\n}\n\n/* Menu mode: auto width instead of matching trigger */\n.oc-dropdown--menu .oc-dropdown__menu {\n right: auto;\n min-width: 180px;\n}\n\n@keyframes oc-dropdown-enter {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes oc-dropdown-enter-up {\n from {\n opacity: 0;\n transform: translateY(4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* \u2500\u2500\u2500 Search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__search {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 10px 14px;\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-dropdown__search-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--oc-fg-secondary);\n}\n\n.oc-dropdown__search-input {\n flex: 1;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n outline: none;\n min-width: 0;\n}\n\n.oc-dropdown__search-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-dropdown__search-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n flex-shrink: 0;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-dropdown__search-clear:hover {\n color: var(--oc-fg-primary);\n}\n\n/* \u2500\u2500\u2500 Options container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__options {\n overflow-y: auto;\n overscroll-behavior: contain;\n padding: var(--oc-spacing-xs);\n}\n\n/* Scrollbar styling */\n.oc-dropdown__options::-webkit-scrollbar {\n width: 6px;\n}\n\n.oc-dropdown__options::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.oc-dropdown__options::-webkit-scrollbar-thumb {\n background: var(--oc-border-default);\n border-radius: 3px;\n}\n\n.oc-dropdown__options::-webkit-scrollbar-thumb:hover {\n background: var(--oc-border-strong);\n}\n\n/* \u2500\u2500\u2500 Option \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__option {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 10px 14px;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n user-select: none;\n}\n\n.oc-dropdown__option:hover:not(.oc-dropdown__option--disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-dropdown__option--focused {\n background: rgba(15, 118, 110, 0.1);\n}\n\n.oc-dropdown__option--focused:hover {\n background: rgba(15, 118, 110, 0.1);\n}\n\n.oc-dropdown__option--selected {\n color: var(--oc-accent);\n font-weight: 500;\n}\n\n.oc-dropdown__option--selected.oc-dropdown__option--focused {\n background: rgba(15, 118, 110, 0.15);\n}\n\n.oc-dropdown__option--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-dropdown__option-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: currentColor;\n}\n\n.oc-dropdown__option-icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-dropdown__option-icon-img {\n width: 16px;\n height: 16px;\n object-fit: contain;\n border-radius: 2px;\n}\n\n.oc-dropdown__option-content {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n\n.oc-dropdown__option-label {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-dropdown__option-description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-normal);\n margin-top: 1px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-dropdown__option--selected .oc-dropdown__option-description {\n color: var(--oc-accent);\n opacity: 0.7;\n}\n\n.oc-dropdown__option-check {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--oc-accent);\n margin-left: auto;\n}\n\n/* \u2500\u2500\u2500 Menu-mode compound items (Dropdown.Item) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 10px 14px;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n user-select: none;\n}\n\n.oc-dropdown__item:hover:not(.oc-dropdown__item--disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-dropdown__item--focused {\n background: rgba(15, 118, 110, 0.1);\n}\n\n.oc-dropdown__item--focused:hover {\n background: rgba(15, 118, 110, 0.1);\n}\n\n.oc-dropdown__item--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-dropdown__item-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--oc-fg-secondary);\n}\n\n.oc-dropdown__item-icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-dropdown__item-label {\n flex: 1;\n min-width: 0;\n}\n\n/* \u2500\u2500\u2500 Divider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__divider {\n height: 1px;\n margin: var(--oc-spacing-xs) 0;\n background: var(--oc-border-default);\n}\n\n/* \u2500\u2500\u2500 Header (group label) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__header {\n padding: var(--oc-spacing-sm) 14px var(--oc-spacing-xs);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n user-select: none;\n}\n\n/* \u2500\u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__empty {\n padding: var(--oc-spacing-lg);\n text-align: center;\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n}\n\n/* \u2500\u2500\u2500 Loading state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.oc-dropdown__loading {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-dropdown__loading-more {\n display: flex;\n justify-content: center;\n padding: var(--oc-spacing-sm);\n}\n\n/* \u2500\u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (max-width: 600px) {\n .oc-dropdown__trigger {\n min-height: 44px;\n }\n\n .oc-dropdown--fluid .oc-dropdown__menu {\n left: 0;\n right: 0;\n }\n}\n\n";
2579
2580
 
2580
2581
  export { AIAvatar, AIResponse, type AIResponseProps, ActionButton, type ActionButtonProps, ActionItem, type ActionItemData, type ActionItemProps, ActionList, type ActionListProps, ActivityFeed, type ActivityFeedProps, ActivityItem, type ActivityItemData, type ActivityItemProps, Alert, type AlertProps, type AlertVariant, type AnimationScale, AppShell, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, type AppShellProps, AppShellSidebar, type AppShellSidebarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Banner, type BannerProps, type BreadcrumbItem, type BreakpointScale, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardFooter, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardVariant, CategoryBadge, type CategoryBadgeProps, type CellAction, ChatContainer, type ChatContainerProps, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, ChatMessageSkeleton, ChatMessages, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipColor, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipVariant, Citation, type CitationProps, CollectionCard, type CollectionCardProps, CollectionList, type CollectionListProps, type CollectionType, type ColorScale, DataGrid, type DataGridColumn, type DataGridColumnType, type DataGridProps, type DiscussionAuthor, type DiscussionCategory, type DiscussionFilterOption, DiscussionFilters, type DiscussionFiltersProps, DiscussionItem, type DiscussionItemProps, DiscussionList, type DiscussionListProps, type DiscussionSortOption, DiscussionStats, type DiscussionStatsProps, type DiscussionStatus, Divider, type DividerProps, DocumentCardSkeleton, DocumentGraph, type DocumentGraphProps, type DocumentRelationship, type DocumentType, Dropdown, type DropdownHeaderProps, type DropdownItemProps, type DropdownMode, type DropdownOption, type DropdownProps, Edge, type EdgeProps, type EdgeVariant, EmptyDocumentIcon, EmptyFolderIcon, EmptyInboxIcon, EmptyNotificationIcon, EmptySearchIcon, EmptyState, type EmptyStateProps, type EmptyStateSize, ExtractCard, type ExtractCardProps, ExtractList, type ExtractListProps, type ExtractStatus, FileList, FileListItem, type FileListItemProps, type FileListProps, FilePathBreadcrumb, type FilePathBreadcrumbProps, FileSystem, type FileSystemContextValue, type FileSystemItem, FileSystemLayout, type FileSystemLayoutProps, FileSystemMain, type FileSystemMainProps, type FileSystemProps, FileSystemSidebar, type FileSystemSidebarProps, FileSystemToolbar, type FileSystemToolbarProps, type FileSystemViewMode, type FileType, FilesIcon, FilterChip, type FilterChipProps, type FilterOption, FilterPanel, type FilterPanelProps, type FilterSection, FilterTab, type FilterTabItem, type FilterTabProps, FilterTabs, type FilterTabsProps, type FilterValues, FolderTree, FolderTreeItem, type FolderTreeItemProps, type FolderTreeProps, type FontSizeScale, FormField, type FormFieldProps, GraphControls, type GraphControlsProps, type GraphData, type GraphDocument, GraphEdge, type GraphEdgeData, type GraphEdgeProps, type GraphFilters, type GraphLayout, GraphNode, type GraphNodeData, type GraphNodeProps, HStack, type HStackProps, Hero, HeroAction, type HeroActionProps, HeroActions, type HeroActionsProps, HeroBadge, type HeroBadgeProps, HeroContent, type HeroContentProps, HeroMedia, type HeroMediaProps, type HeroProps, HeroSearch, type HeroSearchProps, type HeroSize, HeroSubtitle, type HeroSubtitleProps, HeroTitle, type HeroTitleProps, type HeroVariant, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, IntegrationIcon, type LineHeightScale, LinkedResource, type LinkedResourceProps, Mention, type MentionProps, MessageActions, type MessageActionsProps, type MessageRole, type MessageStatus, Modal, ModalBody, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, NavBar, type NavBarProps, type NavItem, NewDiscussionButton, type NewDiscussionButtonProps, Node, type NodeProps, type NodeSize, type NodeVariant, type OpacityScale, PageHeader, type PageHeaderProps, Pane, type PaneProps, PanelAction, PanelActionList, type PanelActionListProps, type PanelActionProps, PanelSearch, type PanelSearchProps, PanelSection, type PanelSectionProps, PanelTab, type PanelTabProps, PanelTabs, type PanelTabsProps, PlusIcon, type PolymorphicComponentProp, type PolymorphicRef, Popover, type PopoverPlacement, type PopoverProps, type PopoverTrigger, type Position, Progress, ProgressCircle, type ProgressCircleProps, type ProgressProps, type ProgressSize, type ProgressVariant, ProjectItem, type ProjectItemProps, ProjectPicker, type ProjectPickerProps, ProjectSearch, type ProjectSearchProps, type ProjectType, PromptsIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadiusScale, ReactionBar, type ReactionBarProps, ReactionButton, type ReactionButtonProps, type ReactionType, RelationshipBadge, type RelationshipBadgeProps, type RelationshipItem, type RelationshipLabel, RelationshipPill, type RelationshipPillProps, RelationshipPopoverContent, type RelationshipPopoverContentProps, type RelationshipSource, ResearchCard, type ResearchCardProps, ResearchSection, type ResearchSectionProps, type ResearchStatus, ResourceList, type ResourceListProps, type ResourceType, RocketIcon, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchBox, type SearchBoxProps, SearchInput, type SearchInputProps, type SearchSuggestion, Select, type SelectOption, type SelectOptionGroup, type SelectProps, type SelectSize, type ShadowScale, Sidebar, SidebarFooter, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonAnimation, SkeletonAvatar, SkeletonButton, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant, type SortDirection, SourceCard, type SourceCardProps, SourceList, type SourceListProps, SourcePill, type SourcePillProps, SourcesBadge, type SourcesBadgeProps, SourcesPanel, type SourcesPanelProps, Spacer, type SpacingScale, SparkleIcon, Spinner, type SpinnerProps, type SplitDirection, SplitPane, type SplitPaneProps, Stack, type StackAlign, type StackJustify, type StackProps, type StackSpacing, StatBlock, type StatBlockProps, StatGrid, type StatGridProps, type Status, type StepItem, StepsList, type StepsListProps, SuggestionChip, type SuggestionChipProps, Switch, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, TableRowSkeleton, Tabs, type TabsOrientation, type TabsProps, type TabsVariant, TaskCard, type TaskCardProps, type TaskStatus, Textarea, type TextareaProps, ThinkingBlock, type ThinkingBlockProps, ThreadAction, type ThreadActionProps, ThreadInput, type ThreadInputProps, ThreadMeta, type ThreadMetaProps, ThreadPost, type ThreadPostProps, ThreadReply, type ThreadReplyProps, type ThreadStatus, ThreadView, type ThreadViewProps, Toast, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type Tokens, ToolbarButton, type ToolbarButtonProps, ToolbarSeparator, Tooltip, type TooltipPlacement, type TooltipProps, type TriggerRenderProps, TypingIndicator, type TypingIndicatorProps, UploadIcon, type UserMenuItem, UserQuestion, type UserQuestionProps, VStack, type VStackProps, type ZIndexScale, actionListStyles, activityFeedStyles, alertStyles, allStyles, appShellStyles, avatarStyles, buttonStyles, cardStyles, chatStyles, checkboxStyles, chipStyles, collectionCardStyles, dataGridStyles, discussionStyles, documentGraphStyles, dropdownStyles, edgeStyles, emptyStateStyles, extractCardStyles, fileSystemStyles, filterPanelStyles, filterTabsStyles, formFieldStyles, heroStyles, inputStyles, modalStyles, navBarStyles, nodeStyles, pageHeaderStyles, popoverStyles, progressStyles, projectPickerStyles, radioStyles, relationshipBadgeStyles, relationshipPillStyles, relationshipPopoverStyles, researchCardStyles, scrollAreaStyles, searchBoxStyles, searchInputStyles, selectStyles, sidebarStyles, skeletonStyles, sourceCardStyles, sourcesPanelStyles, splitPaneStyles, stackStyles, statBlockStyles, tabsStyles, textareaStyles, threadStyles, toastStyles, toggleStyles, tokens, tooltipStyles, useAppShell, useFileSystem, useGraphLayout, useToast, utilitiesStyles };