flexible-css-library
Version:
Une bibliothèque CSS ultra-flexible avec système de thèmes JavaScript dynamique - 10 thèmes prédéfinis, performance optimisée (50% de réduction de taille)
1 lines • 102 kB
CSS
:root{--theme-modern-primary: #007bff;--theme-modern-secondary: #6c757d;--theme-modern-success: #28a745;--theme-modern-danger: #dc3545;--theme-modern-warning: #ffc107;--theme-modern-info: #17a2b8;--theme-modern-light: #f8f9fa;--theme-modern-dark: #343a40;--theme-dark-primary: #0d6efd;--theme-dark-secondary: #6c757d;--theme-dark-success: #198754;--theme-dark-danger: #dc3545;--theme-dark-warning: #ffc107;--theme-dark-info: #0dcaf0;--theme-dark-light: #f8f9fa;--theme-dark-dark: #212529;--theme-dark-bg: #121212;--theme-dark-surface: #1e1e1e;--theme-dark-text: #ffffff;--theme-minimal-primary: #000000;--theme-minimal-secondary: #666666;--theme-minimal-success: #333333;--theme-minimal-danger: #ff0000;--theme-minimal-warning: #ffaa00;--theme-minimal-info: #0066cc;--theme-minimal-light: #fafafa;--theme-minimal-dark: #000000;--theme-minimal-bg: #ffffff;--theme-minimal-surface: #f8f8f8;--theme-minimal-text: #333333;--theme-vibrant-primary: #ff6b6b;--theme-vibrant-secondary: #4ecdc4;--theme-vibrant-success: #45b7d1;--theme-vibrant-danger: #ff4757;--theme-vibrant-warning: #ffa502;--theme-vibrant-info: #2ed573;--theme-vibrant-light: #f1f2f6;--theme-vibrant-dark: #2f3542;--theme-vibrant-bg: #ffffff;--theme-vibrant-surface: #f8f9fa;--theme-vibrant-text: #2f3542;--theme-corporate-primary: #2c3e50;--theme-corporate-secondary: #34495e;--theme-corporate-success: #27ae60;--theme-corporate-danger: #e74c3c;--theme-corporate-warning: #f39c12;--theme-corporate-info: #3498db;--theme-corporate-light: #ecf0f1;--theme-corporate-dark: #2c3e50;--theme-corporate-bg: #ffffff;--theme-corporate-surface: #f8f9fa;--theme-corporate-text: #2c3e50;--theme-creative-primary: #e91e63;--theme-creative-secondary: #9c27b0;--theme-creative-success: #4caf50;--theme-creative-danger: #f44336;--theme-creative-warning: #ff9800;--theme-creative-info: #2196f3;--theme-creative-light: #fce4ec;--theme-creative-dark: #880e4f;--theme-creative-bg: #ffffff;--theme-creative-surface: #fafafa;--theme-creative-text: #212121;--theme-tech-primary: #6366f1;--theme-tech-secondary: #8b5cf6;--theme-tech-success: #10b981;--theme-tech-danger: #ef4444;--theme-tech-warning: #f59e0b;--theme-tech-info: #06b6d4;--theme-tech-light: #f8fafc;--theme-tech-dark: #0f172a;--theme-tech-bg: #ffffff;--theme-tech-surface: #f1f5f9;--theme-tech-text: #1e293b;--theme-vintage-primary: #8b4513;--theme-vintage-secondary: #a0522d;--theme-vintage-success: #556b2f;--theme-vintage-danger: #b22222;--theme-vintage-warning: #daa520;--theme-vintage-info: #4682b4;--theme-vintage-light: #f5f5dc;--theme-vintage-dark: #2f4f4f;--theme-vintage-bg: #faf0e6;--theme-vintage-surface: #f5f5dc;--theme-vintage-text: #2f4f4f;--theme-nature-primary: #2d5a27;--theme-nature-secondary: #4a7c59;--theme-nature-success: #6b8e23;--theme-nature-danger: #8b0000;--theme-nature-warning: #daa520;--theme-nature-info: #4682b4;--theme-nature-light: #f0f8f0;--theme-nature-dark: #2f4f2f;--theme-nature-bg: #fafafa;--theme-nature-surface: #f0f8f0;--theme-nature-text: #2f4f2f;--theme-luxury-primary: #d4af37;--theme-luxury-secondary: #b8860b;--theme-luxury-success: #228b22;--theme-luxury-danger: #b22222;--theme-luxury-warning: #daa520;--theme-luxury-info: #4682b4;--theme-luxury-light: #fff8dc;--theme-luxury-dark: #2f2f2f;--theme-luxury-bg: #ffffff;--theme-luxury-surface: #fff8dc;--theme-luxury-text: #2f2f2f;--primary-color: var(--theme-modern-primary);--secondary-color: var(--theme-modern-secondary);--success-color: var(--theme-modern-success);--danger-color: var(--theme-modern-danger);--warning-color: var(--theme-modern-warning);--info-color: var(--theme-modern-info);--light-color: var(--theme-modern-light);--dark-color: var(--theme-modern-dark);--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--text-primary: #212529;--text-secondary: #6c757d;--border-color: #dee2e6;--font-modern: "Inter", "Segoe UI", "Roboto", sans-serif;--font-classic: "Georgia", "Times New Roman", serif;--font-tech: "SF Mono", "Monaco", "Inconsolata", monospace;--font-creative: "Playfair Display", "Georgia", serif;--font-corporate: "Open Sans", "Arial", sans-serif;--font-vintage: "Baskerville", "Times New Roman", serif;--font-family-base: var(--font-modern);--font-family-heading: var(--font-modern);--font-family-code: var(--font-tech);--font-size-xs: 0.75rem;--font-size-sm: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-weight-light: 300;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--spacing-xs: 0.25rem;--spacing-sm: 0.5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--spacing-4xl: 6rem;--border-radius-none: 0;--border-radius-sm: 0.125rem;--border-radius-md: 0.25rem;--border-radius-lg: 0.5rem;--border-radius-xl: 0.75rem;--border-radius-2xl: 1rem;--border-radius-full: 9999px;--border-width-none: 0;--border-width-sm: 1px;--border-width-md: 2px;--border-width-lg: 3px;--border-width-xl: 4px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);--shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);--transition-fast: 150ms;--transition-normal: 300ms;--transition-slow: 500ms;--ease-linear: linear;--ease-in: cubic-bezier(0.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, 0.2, 1);--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);--breakpoint-xs: 0;--breakpoint-sm: 576px;--breakpoint-md: 768px;--breakpoint-lg: 992px;--breakpoint-xl: 1200px;--breakpoint-2xl: 1400px;--container-sm: 540px;--container-md: 720px;--container-lg: 960px;--container-xl: 1140px;--container-2xl: 1320px;--container-padding: var(--spacing-md);--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--z-toast: 1080}[data-theme=dark]{--primary-color: var(--theme-dark-primary);--secondary-color: var(--theme-dark-secondary);--success-color: var(--theme-dark-success);--danger-color: var(--theme-dark-danger);--warning-color: var(--theme-dark-warning);--info-color: var(--theme-dark-info);--light-color: var(--theme-dark-light);--dark-color: var(--theme-dark-dark);--bg-primary: var(--theme-dark-bg);--bg-secondary: var(--theme-dark-surface);--text-primary: var(--theme-dark-text);--text-secondary: #adb5bd;--border-color: #495057}[data-theme=minimal]{--primary-color: var(--theme-minimal-primary);--secondary-color: var(--theme-minimal-secondary);--success-color: var(--theme-minimal-success);--danger-color: var(--theme-minimal-danger);--warning-color: var(--theme-minimal-warning);--info-color: var(--theme-minimal-info);--light-color: var(--theme-minimal-light);--dark-color: var(--theme-minimal-dark);--bg-primary: var(--theme-minimal-bg);--bg-secondary: var(--theme-minimal-surface);--text-primary: var(--theme-minimal-text);--text-secondary: #666666;--border-color: #e0e0e0;--font-family-base: var(--font-minimal);--font-family-heading: var(--font-minimal)}[data-theme=vibrant]{--primary-color: var(--theme-vibrant-primary);--secondary-color: var(--theme-vibrant-secondary);--success-color: var(--theme-vibrant-success);--danger-color: var(--theme-vibrant-danger);--warning-color: var(--theme-vibrant-warning);--info-color: var(--theme-vibrant-info);--light-color: var(--theme-vibrant-light);--dark-color: var(--theme-vibrant-dark);--bg-primary: var(--theme-vibrant-bg);--bg-secondary: var(--theme-vibrant-surface);--text-primary: var(--theme-vibrant-text);--text-secondary: #747d8c;--border-color: #dfe4ea}[data-theme=corporate]{--primary-color: var(--theme-corporate-primary);--secondary-color: var(--theme-corporate-secondary);--success-color: var(--theme-corporate-success);--danger-color: var(--theme-corporate-danger);--warning-color: var(--theme-corporate-warning);--info-color: var(--theme-corporate-info);--light-color: var(--theme-corporate-light);--dark-color: var(--theme-corporate-dark);--bg-primary: var(--theme-corporate-bg);--bg-secondary: var(--theme-corporate-surface);--text-primary: var(--theme-corporate-text);--text-secondary: #7f8c8d;--border-color: #bdc3c7;--font-family-base: var(--font-corporate);--font-family-heading: var(--font-corporate)}[data-theme=creative]{--primary-color: var(--theme-creative-primary);--secondary-color: var(--theme-creative-secondary);--success-color: var(--theme-creative-success);--danger-color: var(--theme-creative-danger);--warning-color: var(--theme-creative-warning);--info-color: var(--theme-creative-info);--light-color: var(--theme-creative-light);--dark-color: var(--theme-creative-dark);--bg-primary: var(--theme-creative-bg);--bg-secondary: var(--theme-creative-surface);--text-primary: var(--theme-creative-text);--text-secondary: #757575;--border-color: #e0e0e0;--font-family-base: var(--font-creative);--font-family-heading: var(--font-creative)}[data-theme=tech]{--primary-color: var(--theme-tech-primary);--secondary-color: var(--theme-tech-secondary);--success-color: var(--theme-tech-success);--danger-color: var(--theme-tech-danger);--warning-color: var(--theme-tech-warning);--info-color: var(--theme-tech-info);--light-color: var(--theme-tech-light);--dark-color: var(--theme-tech-dark);--bg-primary: var(--theme-tech-bg);--bg-secondary: var(--theme-tech-surface);--text-primary: var(--theme-tech-text);--text-secondary: #64748b;--border-color: #e2e8f0;--font-family-base: var(--font-tech);--font-family-heading: var(--font-tech)}[data-theme=vintage]{--primary-color: var(--theme-vintage-primary);--secondary-color: var(--theme-vintage-secondary);--success-color: var(--theme-vintage-success);--danger-color: var(--theme-vintage-danger);--warning-color: var(--theme-vintage-warning);--info-color: var(--theme-vintage-info);--light-color: var(--theme-vintage-light);--dark-color: var(--theme-vintage-dark);--bg-primary: var(--theme-vintage-bg);--bg-secondary: var(--theme-vintage-surface);--text-primary: var(--theme-vintage-text);--text-secondary: #696969;--border-color: #d2b48c;--font-family-base: var(--font-vintage);--font-family-heading: var(--font-vintage)}[data-theme=nature]{--primary-color: var(--theme-nature-primary);--secondary-color: var(--theme-nature-secondary);--success-color: var(--theme-nature-success);--danger-color: var(--theme-nature-danger);--warning-color: var(--theme-nature-warning);--info-color: var(--theme-nature-info);--light-color: var(--theme-nature-light);--dark-color: var(--theme-nature-dark);--bg-primary: var(--theme-nature-bg);--bg-secondary: var(--theme-nature-surface);--text-primary: var(--theme-nature-text);--text-secondary: #556b2f;--border-color: #90ee90;--font-family-base: var(--font-classic);--font-family-heading: var(--font-classic)}[data-theme=luxury]{--primary-color: var(--theme-luxury-primary);--secondary-color: var(--theme-luxury-secondary);--success-color: var(--theme-luxury-success);--danger-color: var(--theme-luxury-danger);--warning-color: var(--theme-luxury-warning);--info-color: var(--theme-luxury-info);--light-color: var(--theme-luxury-light);--dark-color: var(--theme-luxury-dark);--bg-primary: var(--theme-luxury-bg);--bg-secondary: var(--theme-luxury-surface);--text-primary: var(--theme-luxury-text);--text-secondary: #696969;--border-color: #daa520;--font-family-base: var(--font-classic);--font-family-heading: var(--font-classic)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-family:var(--font-family-base);font-size:var(--font-size-base);line-height:var(--line-height-base);color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);font-weight:var(--font-weight-bold);line-height:var(--line-height-sm);margin-bottom:var(--spacing-md);color:var(--text-primary)}h1{font-size:var(--font-size-3xl)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}h4{font-size:var(--font-size-lg)}h5{font-size:var(--font-size-base)}h6{font-size:var(--font-size-sm)}p{margin-bottom:var(--spacing-md);line-height:var(--line-height-base)}a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-color);opacity:.8;text-decoration:underline}img{max-width:100%;height:auto;display:block}ul,ol{margin-bottom:var(--spacing-md);padding-left:var(--spacing-lg)}li{margin-bottom:var(--spacing-xs)}input,button,textarea,select{font-family:inherit;font-size:inherit;line-height:inherit}button{cursor:pointer;border:none;background:none}input,textarea,select{border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-sm);transition:border-color var(--transition-fast)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,123,255,.1)}table{border-collapse:collapse;width:100%;margin-bottom:var(--spacing-md)}th,td{padding:var(--spacing-sm);text-align:left;border-bottom:var(--border-width) solid var(--border-color)}th{font-weight:var(--font-weight-bold);background-color:var(--bg-secondary)}blockquote{margin:var(--spacing-lg) 0;padding:var(--spacing-md);border-left:4px solid var(--primary-color);background-color:var(--bg-secondary);font-style:italic}code{font-family:var(--font-family-mono);background-color:var(--bg-secondary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--border-radius-sm);font-size:.875em}pre{background-color:var(--bg-secondary);padding:var(--spacing-md);border-radius:var(--border-radius);overflow-x:auto;margin-bottom:var(--spacing-md)}pre code{background:none;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}[hidden]{display:none !important}[disabled]{cursor:not-allowed;opacity:.6}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}@media(min-width: var(--breakpoint-sm)){.container{max-width:var(--container-sm)}}@media(min-width: var(--breakpoint-md)){.container{max-width:var(--container-md)}}@media(min-width: var(--breakpoint-lg)){.container{max-width:var(--container-lg)}}@media(min-width: var(--breakpoint-xl)){.container{max-width:var(--container-xl)}}@media(min-width: var(--breakpoint-2xl)){.container{max-width:var(--container-2xl)}}.container-fluid{width:100%;margin-left:auto;margin-right:auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}.row{display:flex;flex-wrap:wrap;margin-left:calc(-1*var(--spacing-md)/2);margin-right:calc(-1*var(--spacing-md)/2)}.row>*{padding:0 var(--spacing-sm)}.col{flex:1 0 0%;min-width:0}.col-1{flex:0 0 auto;width:8.3333333333%}.col-2{flex:0 0 auto;width:16.6666666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333333333%}.col-5{flex:0 0 auto;width:41.6666666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333333333%}.col-8{flex:0 0 auto;width:66.6666666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333333333%}.col-11{flex:0 0 auto;width:91.6666666667%}.col-12{flex:0 0 auto;width:100%}.col-auto{flex:0 0 auto;width:auto}@media(min-width: var(--breakpoint-sm)){.col-sm{flex:1 0 0%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333333%}.col-sm-2{flex:0 0 auto;width:16.6666666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333333333%}.col-sm-5{flex:0 0 auto;width:41.6666666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333333333%}.col-sm-8{flex:0 0 auto;width:66.6666666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333333333%}.col-sm-11{flex:0 0 auto;width:91.6666666667%}.col-sm-12{flex:0 0 auto;width:100%}}@media(min-width: var(--breakpoint-md)){.col-md{flex:1 0 0%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333333%}.col-md-2{flex:0 0 auto;width:16.6666666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333333333%}.col-md-5{flex:0 0 auto;width:41.6666666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333333333%}.col-md-8{flex:0 0 auto;width:66.6666666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333333333%}.col-md-11{flex:0 0 auto;width:91.6666666667%}.col-md-12{flex:0 0 auto;width:100%}}@media(min-width: var(--breakpoint-lg)){.col-lg{flex:1 0 0%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.3333333333%}.col-lg-2{flex:0 0 auto;width:16.6666666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333333333%}.col-lg-5{flex:0 0 auto;width:41.6666666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333333333%}.col-lg-8{flex:0 0 auto;width:66.6666666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333333333%}.col-lg-11{flex:0 0 auto;width:91.6666666667%}.col-lg-12{flex:0 0 auto;width:100%}}@media(min-width: var(--breakpoint-xl)){.col-xl{flex:1 0 0%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.3333333333%}.col-xl-2{flex:0 0 auto;width:16.6666666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333333333%}.col-xl-5{flex:0 0 auto;width:41.6666666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.3333333333%}.col-xl-8{flex:0 0 auto;width:66.6666666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333333333%}.col-xl-11{flex:0 0 auto;width:91.6666666667%}.col-xl-12{flex:0 0 auto;width:100%}}@media(min-width: var(--breakpoint-2xl)){.col-xxl{flex:1 0 0%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.3333333333%}.col-xxl-2{flex:0 0 auto;width:16.6666666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.3333333333%}.col-xxl-5{flex:0 0 auto;width:41.6666666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.3333333333%}.col-xxl-8{flex:0 0 auto;width:66.6666666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.3333333333%}.col-xxl-11{flex:0 0 auto;width:91.6666666667%}.col-xxl-12{flex:0 0 auto;width:100%}}.row-start{justify-content:flex-start}.row-center{justify-content:center}.row-end{justify-content:flex-end}.row-between{justify-content:space-between}.row-around{justify-content:space-around}.row-evenly{justify-content:space-evenly}.row-top{align-items:flex-start}.row-middle{align-items:center}.row-bottom{align-items:flex-end}.row-stretch{align-items:stretch}.row-gap-xs{gap:var(--spacing-xs)}.row-gap-sm{gap:var(--spacing-sm)}.row-gap-md{gap:var(--spacing-md)}.row-gap-lg{gap:var(--spacing-lg)}.row-gap-xl{gap:var(--spacing-xl)}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.d-block{display:block}.d-inline-block{display:inline-block}.d-none{display:none}@media(min-width: var(--breakpoint-sm)){.d-sm-flex{display:flex}.d-sm-inline-flex{display:inline-flex}.d-sm-block{display:block}.d-sm-inline-block{display:inline-block}.d-sm-none{display:none}}@media(min-width: var(--breakpoint-md)){.d-md-flex{display:flex}.d-md-inline-flex{display:inline-flex}.d-md-block{display:block}.d-md-inline-block{display:inline-block}.d-md-none{display:none}}@media(min-width: var(--breakpoint-lg)){.d-lg-flex{display:flex}.d-lg-inline-flex{display:inline-flex}.d-lg-block{display:block}.d-lg-inline-block{display:inline-block}.d-lg-none{display:none}}@media(min-width: var(--breakpoint-xl)){.d-xl-flex{display:flex}.d-xl-inline-flex{display:inline-flex}.d-xl-block{display:block}.d-xl-inline-block{display:inline-block}.d-xl-none{display:none}}@media(min-width: var(--breakpoint-2xl)){.d-xxl-flex{display:flex}.d-xxl-inline-flex{display:inline-flex}.d-xxl-block{display:block}.d-xxl-inline-block{display:inline-block}.d-xxl-none{display:none}}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-column-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-fill{flex:1 1 auto}.flex-grow-0{flex-grow:0}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink-1{flex-shrink:1}@media(min-width: var(--breakpoint-sm)){.flex-sm-row{flex-direction:row}.flex-sm-column{flex-direction:column}.flex-sm-wrap{flex-wrap:wrap}.flex-sm-nowrap{flex-wrap:nowrap}}@media(min-width: var(--breakpoint-md)){.flex-md-row{flex-direction:row}.flex-md-column{flex-direction:column}.flex-md-wrap{flex-wrap:wrap}.flex-md-nowrap{flex-wrap:nowrap}}@media(min-width: var(--breakpoint-lg)){.flex-lg-row{flex-direction:row}.flex-lg-column{flex-direction:column}.flex-lg-wrap{flex-wrap:wrap}.flex-lg-nowrap{flex-wrap:nowrap}}@media(min-width: var(--breakpoint-xl)){.flex-xl-row{flex-direction:row}.flex-xl-column{flex-direction:column}.flex-xl-wrap{flex-wrap:wrap}.flex-xl-nowrap{flex-wrap:nowrap}}@media(min-width: var(--breakpoint-2xl)){.flex-xxl-row{flex-direction:row}.flex-xxl-column{flex-direction:column}.flex-xxl-wrap{flex-wrap:wrap}.flex-xxl-nowrap{flex-wrap:nowrap}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-base);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;user-select:none;border:var(--border-width) solid rgba(0,0,0,0);border-radius:var(--border-radius);transition:all var(--transition-base);white-space:nowrap}.btn:hover{text-decoration:none}.btn:focus{outline:0;box-shadow:0 0 0 3px rgba(0,123,255,.25)}.btn:disabled,.btn.disabled{opacity:.65;pointer-events:none}.btn-primary{color:var(--text-light);background-color:var(--primary-color);border-color:var(--primary-color)}.btn-primary:hover{color:var(--text-light);background-color:var(--primary-color);border-color:var(--primary-color);opacity:.9}.btn-primary:focus{box-shadow:0 0 0 3px rgba(0,123,255,.25)}.btn-secondary{color:var(--text-primary);background-color:var(--secondary-color);border-color:var(--secondary-color)}.btn-secondary:hover{color:var(--text-primary);background-color:var(--secondary-color);border-color:var(--secondary-color);opacity:.9}.btn-success{color:var(--text-light);background-color:var(--success-color);border-color:var(--success-color)}.btn-success:hover{color:var(--text-light);background-color:var(--success-color);border-color:var(--success-color);opacity:.9}.btn-danger{color:var(--text-light);background-color:var(--danger-color);border-color:var(--danger-color)}.btn-danger:hover{color:var(--text-light);background-color:var(--danger-color);border-color:var(--danger-color);opacity:.9}.btn-warning{color:var(--text-primary);background-color:var(--warning-color);border-color:var(--warning-color)}.btn-warning:hover{color:var(--text-primary);background-color:var(--warning-color);border-color:var(--warning-color);opacity:.9}.btn-info{color:var(--text-light);background-color:var(--info-color);border-color:var(--info-color)}.btn-info:hover{color:var(--text-light);background-color:var(--info-color);border-color:var(--info-color);opacity:.9}.btn-light{color:var(--text-primary);background-color:var(--light-color);border-color:var(--light-color)}.btn-light:hover{color:var(--text-primary);background-color:var(--light-color);border-color:var(--light-color);opacity:.9}.btn-dark{color:var(--text-light);background-color:var(--dark-color);border-color:var(--dark-color)}.btn-dark:hover{color:var(--text-light);background-color:var(--dark-color);border-color:var(--dark-color);opacity:.9}.btn-outline-primary{color:var(--primary-color);background-color:rgba(0,0,0,0);border-color:var(--primary-color)}.btn-outline-primary:hover{color:var(--text-light);background-color:var(--primary-color);border-color:var(--primary-color)}.btn-outline-secondary{color:var(--secondary-color);background-color:rgba(0,0,0,0);border-color:var(--secondary-color)}.btn-outline-secondary:hover{color:var(--text-light);background-color:var(--secondary-color);border-color:var(--secondary-color)}.btn-outline-success{color:var(--success-color);background-color:rgba(0,0,0,0);border-color:var(--success-color)}.btn-outline-success:hover{color:var(--text-light);background-color:var(--success-color);border-color:var(--success-color)}.btn-outline-danger{color:var(--danger-color);background-color:rgba(0,0,0,0);border-color:var(--danger-color)}.btn-outline-danger:hover{color:var(--text-light);background-color:var(--danger-color);border-color:var(--danger-color)}.btn-outline-warning{color:var(--warning-color);background-color:rgba(0,0,0,0);border-color:var(--warning-color)}.btn-outline-warning:hover{color:var(--text-primary);background-color:var(--warning-color);border-color:var(--warning-color)}.btn-outline-info{color:var(--info-color);background-color:rgba(0,0,0,0);border-color:var(--info-color)}.btn-outline-info:hover{color:var(--text-light);background-color:var(--info-color);border-color:var(--info-color)}.btn-outline-light{color:var(--light-color);background-color:rgba(0,0,0,0);border-color:var(--light-color)}.btn-outline-light:hover{color:var(--text-primary);background-color:var(--light-color);border-color:var(--light-color)}.btn-outline-dark{color:var(--dark-color);background-color:rgba(0,0,0,0);border-color:var(--dark-color)}.btn-outline-dark:hover{color:var(--text-light);background-color:var(--dark-color);border-color:var(--dark-color)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);border-radius:var(--border-radius-sm)}.btn-lg{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg);border-radius:var(--border-radius-lg)}.btn-xl{padding:var(--spacing-lg) var(--spacing-xl);font-size:var(--font-size-xl);border-radius:var(--border-radius-lg)}.btn-block{display:flex;width:100%}.btn-group{display:inline-flex;vertical-align:middle}.btn-group .btn{position:relative;flex:1 1 auto}.btn-group .btn:not(:first-child){margin-left:calc(-1*var(--border-width));border-top-left-radius:0;border-bottom-left-radius:0}.btn-group .btn:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group .btn:hover,.btn-group .btn:focus,.btn-group .btn:active{z-index:1}.btn-icon{padding:var(--spacing-sm);border-radius:var(--border-radius-full)}.btn-icon.btn-sm{padding:var(--spacing-xs)}.btn-icon.btn-lg{padding:var(--spacing-md)}.btn-loading{position:relative;color:rgba(0,0,0,0) !important}.btn-loading::after{content:"";position:absolute;width:1em;height:1em;top:50%;left:50%;margin-top:-0.5em;margin-left:-0.5em;border:2px solid currentColor;border-radius:50%;border-right-color:rgba(0,0,0,0);animation:btn-spin .75s linear infinite}@keyframes btn-spin{to{transform:rotate(360deg)}}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:var(--bg-primary);background-clip:border-box;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);box-shadow:var(--shadow);transition:box-shadow var(--transition-base)}.card:hover{box-shadow:var(--shadow-md)}.card-header{padding:var(--spacing-md);margin-bottom:0;background-color:var(--bg-secondary);border-bottom:var(--border-width) solid var(--border-color);border-top-left-radius:calc(var(--border-radius) - var(--border-width));border-top-right-radius:calc(var(--border-radius) - var(--border-width))}.card-header:first-child{border-radius:calc(var(--border-radius) - var(--border-width)) calc(var(--border-radius) - var(--border-width)) 0 0}.card-body{flex:1 1 auto;padding:var(--spacing-md);color:var(--text-primary)}.card-title{margin-bottom:var(--spacing-sm);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--text-primary)}.card-subtitle{margin-top:calc(-1*var(--spacing-sm));margin-bottom:0;color:var(--text-secondary)}.card-text{margin-top:0;margin-bottom:var(--spacing-sm)}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:var(--spacing-md)}.card-footer{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-secondary);border-top:var(--border-width) solid var(--border-color);border-bottom-right-radius:calc(var(--border-radius) - var(--border-width));border-bottom-left-radius:calc(var(--border-radius) - var(--border-width))}.card-footer:last-child{border-radius:0 0 calc(var(--border-radius) - var(--border-width)) calc(var(--border-radius) - var(--border-width))}.card-img-top{width:100%;border-top-left-radius:calc(var(--border-radius) - var(--border-width));border-top-right-radius:calc(var(--border-radius) - var(--border-width))}.card-img-bottom{width:100%;border-bottom-right-radius:calc(var(--border-radius) - var(--border-width));border-bottom-left-radius:calc(var(--border-radius) - var(--border-width))}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--spacing-md);border-radius:calc(var(--border-radius) - var(--border-width));background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);color:var(--text-light)}.card-primary{border-color:var(--primary-color)}.card-primary .card-header{background-color:var(--primary-color);color:var(--text-light);border-color:var(--primary-color)}.card-secondary{border-color:var(--secondary-color)}.card-secondary .card-header{background-color:var(--secondary-color);color:var(--text-light);border-color:var(--secondary-color)}.card-success{border-color:var(--success-color)}.card-success .card-header{background-color:var(--success-color);color:var(--text-light);border-color:var(--success-color)}.card-danger{border-color:var(--danger-color)}.card-danger .card-header{background-color:var(--danger-color);color:var(--text-light);border-color:var(--danger-color)}.card-warning{border-color:var(--warning-color)}.card-warning .card-header{background-color:var(--warning-color);color:var(--text-primary);border-color:var(--warning-color)}.card-info{border-color:var(--info-color)}.card-info .card-header{background-color:var(--info-color);color:var(--text-light);border-color:var(--info-color)}.card-light{border-color:var(--light-color)}.card-light .card-header{background-color:var(--light-color);color:var(--text-primary);border-color:var(--light-color)}.card-dark{border-color:var(--dark-color)}.card-dark .card-header{background-color:var(--dark-color);color:var(--text-light);border-color:var(--dark-color)}.card-shadow-sm{box-shadow:var(--shadow-sm)}.card-shadow-sm:hover{box-shadow:var(--shadow)}.card-shadow-lg{box-shadow:var(--shadow-lg)}.card-shadow-lg:hover{box-shadow:var(--shadow-xl)}.card-shadow-none{box-shadow:none}.card-shadow-none:hover{box-shadow:none}.card-borderless{border:0}.card-border-0{border:0}.card-horizontal{flex-direction:row}.card-horizontal .card-img-start{width:30%;border-top-right-radius:0;border-bottom-left-radius:calc(var(--border-radius) - var(--border-width))}.card-horizontal .card-body{flex:1}.card-group{display:flex;flex-direction:column}.card-group .card{margin-bottom:var(--spacing-md)}.card-group .card:last-child{margin-bottom:0}@media(min-width: var(--breakpoint-md)){.card-group{flex-direction:row}.card-group .card{margin-bottom:0;margin-right:var(--spacing-md)}.card-group .card:last-child{margin-right:0}}.card-deck{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:var(--spacing-md)}.card-actionable{cursor:pointer;transition:transform var(--transition-base),box-shadow var(--transition-base)}.card-actionable:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card-loading{position:relative;overflow:hidden}.card-loading::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:card-shimmer 1.5s infinite}@keyframes card-shimmer{0%{left:-100%}100%{left:100%}}.form-group{margin-bottom:var(--spacing-md)}.form-label{display:block;margin-bottom:var(--spacing-xs);font-weight:var(--font-weight-bold);color:var(--text-primary)}.form-label.required::after{content:" *";color:var(--danger-color)}.form-text{margin-top:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--text-muted)}.form-control{display:block;width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base);font-family:var(--font-family-base);line-height:var(--line-height-base);color:var(--text-primary);background-color:var(--bg-primary);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);transition:border-color var(--transition-base),box-shadow var(--transition-base)}.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,123,255,.1)}.form-control:disabled{background-color:var(--bg-secondary);opacity:.6;cursor:not-allowed}.form-control.form-control-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm)}.form-control.form-control-lg{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-lg)}.form-control.is-valid{border-color:var(--success-color)}.form-control.is-valid:focus{border-color:var(--success-color);box-shadow:0 0 0 3px rgba(40,167,69,.1)}.form-control.is-invalid{border-color:var(--danger-color)}.form-control.is-invalid:focus{border-color:var(--danger-color);box-shadow:0 0 0 3px rgba(220,53,69,.1)}.valid-feedback{display:block;margin-top:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--success-color)}.invalid-feedback{display:block;margin-top:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--danger-color)}.form-check{display:flex;align-items:center;margin-bottom:var(--spacing-sm)}.form-check .form-check-input{margin-right:var(--spacing-sm)}.form-check .form-check-label{margin-bottom:0;cursor:pointer}.form-check-input{width:1rem;height:1rem;margin-top:.25rem;vertical-align:top;background-color:var(--bg-primary);border:var(--border-width) solid var(--border-color);appearance:none;color-adjust:exact}.form-check-input[type=checkbox]{border-radius:var(--border-radius-sm)}.form-check-input[type=radio]{border-radius:50%}.form-check-input:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.form-check-input:focus{border-color:var(--primary-color);outline:0;box-shadow:0 0 0 3px rgba(0,123,255,.1)}.form-select{display:block;width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base);font-family:var(--font-family-base);line-height:var(--line-height-base);color:var(--text-primary);background-color:var(--bg-primary);background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right var(--spacing-sm) center;background-size:16px 12px;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);appearance:none}.form-select:focus{border-color:var(--primary-color);outline:0;box-shadow:0 0 0 3px rgba(0,123,255,.1)}.form-control[rows]{min-height:100px;resize:vertical}.input-group{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.input-group .form-control{position:relative;flex:1 1 auto;width:1%;min-width:0}.input-group .input-group-text{display:flex;align-items:center;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-base);color:var(--text-secondary);text-align:center;white-space:nowrap;background-color:var(--bg-secondary);border:var(--border-width) solid var(--border-color)}.input-group .input-group-text:first-child{border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius)}.input-group .input-group-text:last-child{border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.input-group .form-control:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.input-group .form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.form-floating{position:relative}.form-floating .form-control{height:calc(3.5rem + 2px);line-height:1.25}.form-floating .form-label{position:absolute;top:0;left:0;height:100%;padding:1rem var(--spacing-md);pointer-events:none;border:1px solid rgba(0,0,0,0);transform-origin:0 0;transition:opacity .1s ease-in-out,transform .1s ease-in-out}.form-floating .form-control:focus~.form-label,.form-floating .form-control:not(:placeholder-shown)~.form-label{opacity:.65;transform:scale(0.85) translateY(-0.5rem) translateX(0.15rem)}.form-range{width:100%;height:1.5rem;padding:0;background-color:rgba(0,0,0,0);appearance:none}.form-range::-webkit-slider-thumb{appearance:none;height:1rem;width:1rem;border-radius:1rem;background:var(--primary-color);cursor:pointer;box-shadow:0 .125rem .25rem rgba(0,0,0,.075)}.form-range::-webkit-slider-track{width:100%;height:.5rem;color:rgba(0,0,0,0);cursor:pointer;background-color:var(--border-color);border-color:rgba(0,0,0,0);border-radius:1rem}.alert{position:relative;padding:var(--spacing-md);margin-bottom:var(--spacing-md);border:var(--border-width) solid rgba(0,0,0,0);border-radius:var(--border-radius);font-size:var(--font-size-base);line-height:var(--line-height-base)}.alert.alert-primary{color:#084298;background-color:#cfe2ff;border-color:#b6d4fe}.alert.alert-secondary{color:#41464b;background-color:#e2e3e5;border-color:#d3d6d8}.alert.alert-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert.alert-danger{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}.alert.alert-warning{color:#664d03;background-color:#fff3cd;border-color:#ffecb5}.alert.alert-info{color:#055160;background-color:#cff4fc;border-color:#b6effb}.alert.alert-light{color:#636464;background-color:#fefefe;border-color:#fdfdfe}.alert.alert-dark{color:#141619;background-color:#d3d3d4;border-color:#bcbebf}.alert-icon{display:flex;align-items:flex-start}.alert-icon .alert-icon-svg{flex-shrink:0;width:1.25rem;height:1.25rem;margin-right:var(--spacing-sm);margin-top:.125rem}.alert-icon .alert-content{flex:1}.alert-dismissible{padding-right:3rem}.alert-dismissible .btn-close{position:absolute;top:0;right:0;z-index:2;padding:var(--spacing-md)}.btn-close{box-sizing:content-box;width:1em;height:1em;padding:.25em .25em;color:#000;background:rgba(0,0,0,0) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;border:0;border-radius:.375rem;opacity:.5;cursor:pointer}.btn-close:hover{color:#000;text-decoration:none;opacity:.75}.btn-close:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);opacity:1}.alert-fade{transition:opacity var(--transition-base)}.alert-fade.fade-out{opacity:0}.alert-toast{position:fixed;top:var(--spacing-md);right:var(--spacing-md);z-index:var(--z-popover);max-width:350px;box-shadow:var(--shadow-lg);animation:slideInRight .3s ease-out}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.alert-border-left{border-left-width:4px;border-left-style:solid}.alert-border-left.alert-primary{border-left-color:var(--primary-color)}.alert-border-left.alert-success{border-left-color:var(--success-color)}.alert-border-left.alert-danger{border-left-color:var(--danger-color)}.alert-border-left.alert-warning{border-left-color:var(--warning-color)}.alert-border-left.alert-info{border-left-color:var(--info-color)}.alert-shadow{box-shadow:var(--shadow)}.alert-gradient{background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:#fff;border:none}@media(max-width: var(--breakpoint-md)){.alert{padding:var(--spacing-sm);font-size:var(--font-size-sm)}.alert-toast{right:var(--spacing-sm);left:var(--spacing-sm);max-width:none}}.badge{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:var(--border-radius-full)}.badge.badge-primary{color:#fff;background-color:var(--primary-color)}.badge.badge-secondary{color:#fff;background-color:var(--secondary-color)}.badge.badge-success{color:#fff;background-color:var(--success-color)}.badge.badge-danger{color:#fff;background-color:var(--danger-color)}.badge.badge-warning{color:var(--text-primary);background-color:var(--warning-color)}.badge.badge-info{color:#fff;background-color:var(--info-color)}.badge.badge-light{color:var(--text-primary);background-color:var(--light-color)}.badge.badge-dark{color:#fff;background-color:var(--dark-color)}.badge.badge-sm{font-size:.75rem;padding:.125rem .375rem}.badge.badge-lg{font-size:1rem;padding:.375rem .75rem}.badge.badge-outline{background-color:rgba(0,0,0,0);border:var(--border-width) solid}.badge.badge-outline.badge-primary{color:var(--primary-color);border-color:var(--primary-color)}.badge.badge-outline.badge-secondary{color:var(--secondary-color);border-color:var(--secondary-color)}.badge.badge-outline.badge-success{color:var(--success-color);border-color:var(--success-color)}.badge.badge-outline.badge-danger{color:var(--danger-color);border-color:var(--danger-color)}.badge.badge-outline.badge-warning{color:var(--warning-color);border-color:var(--warning-color)}.badge.badge-outline.badge-info{color:var(--info-color);border-color:var(--info-color)}.badge.badge-icon{display:inline-flex;align-items:center;gap:var(--spacing-xs)}.badge.badge-icon .badge-icon-svg{width:.875rem;height:.875rem}.badge.badge-pulse{position:relative}.badge.badge-pulse::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:inherit;animation:badgePulse 2s infinite}@keyframes badgePulse{0%{transform:scale(1);opacity:1}100%{transform:scale(2);opacity:0}}.badge-notification{position:relative}.badge-notification::after{content:attr(data-count);position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;padding:0 6px;font-size:.75rem;font-weight:var(--font-weight-bold);line-height:18px;text-align:center;color:#fff;background-color:var(--danger-color);border-radius:var(--border-radius-full);border:2px solid #fff}.badge-notification[data-count="0"]::after{display:none}.badge-status{position:relative}.badge-status::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;background-color:currentColor;border-radius:50%;transform:translate(-50%, -50%)}.badge-status.badge-status-online::before{background-color:var(--success-color)}.badge-status.badge-status-offline::before{background-color:var(--secondary-color)}.badge-status.badge-status-busy::before{background-color:var(--danger-color)}.badge-status.badge-status-away::before{background-color:var(--warning-color)}.badge-price{font-family:var(--font-family-mono);font-weight:var(--font-weight-bold)}.badge-price.badge-price-discount{text-decoration:line-through;opacity:.6}.badge-price.badge-price-new{color:var(--success-color)}.badge-tag{cursor:pointer;transition:all var(--transition-base)}.badge-tag:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.badge-tag.badge-tag-removable{padding-right:.5rem}.badge-tag.badge-tag-removable::after{content:"×";margin-left:var(--spacing-xs);font-weight:var(--font-weight-bold);opacity:.7;cursor:pointer}.badge-tag.badge-tag-removable:hover::after{opacity:1}.badge-category{text-transform:uppercase;letter-spacing:.5px;font-size:.75rem}.badge-version{font-family:var(--font-family-mono);font-size:.75rem;background-color:var(--bg-secondary);color:var(--text-secondary);border:var(--border-width) solid var(--border-color)}.badge-priority.badge-priority-high{background-color:var(--danger-color);color:#fff}.badge-priority.badge-priority-medium{background-color:var(--warning-color);color:var(--text-primary)}.badge-priority.badge-priority-low{background-color:var(--success-color);color:#fff}.badge-type{text-transform:capitalize}.badge-type.badge-type-bug{background-color:var(--danger-color);color:#fff}.badge-type.badge-type-feature{background-color:var(--success-color);color:#fff}.badge-type.badge-type-improvement{background-color:var(--info-color);color:#fff}.badge-type.badge-type-documentation{background-color:var(--secondary-color);color:#fff}.navbar{display:flex;align-items:center;padding:var(--spacing-md) 0;background-color:var(--bg-primary);border-bottom:var(--border-width) solid var(--border-color)}.navbar .navbar-brand{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--text-primary);text-decoration:none}.navbar .navbar-brand:hover{color:var(--primary-color)}.navbar .navbar-nav{display:flex;list-style:none;margin:0;padding:0;gap:var(--spacing-lg)}.navbar .nav-item .nav-link{color:var(--text-secondary);text-decoration:none;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);transition:all var(--transition-base)}.navbar .nav-item .nav-link:hover{color:var(--primary-color);background-color:var(--bg-secondary)}.navbar .nav-item .nav-link.active{color:var(--primary-color);background-color:rgba(0,123,255,.1)}.nav-tabs{display:flex;border-bottom:var(--border-width) solid var(--border-color);margin-bottom:var(--spacing-lg)}.nav-tabs .nav-item .nav-link{padding:var(--spacing-sm) var(--spacing-md);color:var(--text-secondary);text-decoration:none;border-bottom:2px solid rgba(0,0,0,0);transition:all var(--transition-base)}.nav-tabs .nav-item .nav-link:hover{color:var(--text-primary);border-bottom-color:var(--border-color)}.nav-tabs .nav-item .nav-link.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.nav-pills{display:flex;gap:var(--spacing-sm)}.nav-pills .nav-item .nav-link{padding:var(--spacing-sm) var(--spacing-md);color:var(--text-secondary);text-decoration:none;border-radius:var(--border-radius-full);transition:all var(--transition-base)}.nav-pills .nav-item .nav-link:hover{color:var(--text-primary);background-color:var(--bg-secondary)}.nav-pills .nav-item .nav-link.active{color:#fff;background-color:var(--primary-color)}.breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:var(--spacing-md) 0;font-size:var(--font-size-sm)}.breadcrumb .breadcrumb-item{display:flex;align-items:center}.breadcrumb .breadcrumb-item:not(:last-child)::after{content:"/";margin:0 var(--spacing-sm);color:var(--text-muted)}.breadcrumb .breadcrumb-item .breadcrumb-link{color:var(--text-secondary);text-decoration:none}.breadcrumb .breadcrumb-item .breadcrumb-link:hover{color:var(--primary-color)}.breadcrumb .breadcrumb-item.active{color:var(--text-primary)}.pagination{display:flex;align-items:center;gap:var(--spacing-xs);list-style:none;margin:0;padding:0}.pagination .page-item .page-link{display:flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:var(--spacing-sm);color:var(--text-secondary);text-decoration:none;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);transition:all var(--transition-base)}.pagination .page-item .page-link:hover{color:var(--primary-color);background-color:var(--bg-secondary);border-color:var(--primary-color)}.pagination .page-item.active .page-link{color:#fff;background-color:var(--primary-color);border-color:var(--primary-color)}.pagination .page-item.disabled .page-link{color:var(--text-muted);pointer-events:none;background-color:var(--bg-secondary)}.sidebar{width:250px;background-color:var(--bg-secondary);border-right:var(--border-width) solid var(--border-color);padding:var(--spacing-lg)}.sidebar .sidebar-nav{list-style:none;margin:0;padding:0}.sidebar .sidebar-nav .sidebar-item{margin-bottom:var(--spacing-xs)}.sidebar .sidebar-nav .sidebar-item .sidebar-link{display:block;padding:var(--spacing-sm) var(--spacing-md);color:var(--text-secondary);text-decoration:none;border-radius:var(--border-radius);transition:all var(--transition-base)}.sidebar .sidebar-nav .sidebar-item .sidebar-link:hover{color:var(--text-primary);background-color:var(--bg-primary)}.sidebar .sidebar-nav .sidebar-item .sidebar-link.active{color:var(--primary-color);background-color:rgba(0,123,255,.1)}@media(max-width: var(--breakpoint-md)){.navbar{flex-direction:column;gap:var(--spacing-md)}.navbar .navbar-nav{flex-direction:column;width:100%;gap:var(--spacing-xs)}.nav-tabs{flex-wrap:wrap}.nav-pills{flex-wrap:wrap}.sidebar{width:100%;border-right:none;border-bottom:var(--border-width) solid var(--border-color)}}.modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--z-modal);display:none}.modal.show{display:flex;align-items:center;justify-content:center}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:var(--z-modal-backdrop)}.modal-dialog{position:relative;width:90%;max-width:500px;max-height:90vh;background-color:var(--bg-primary);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-xl);z-index:var(--z-modal);overflow:hidden;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{from{opacity:0;transform:scale(0.9) translateY(-20px)}to{opacity:1;transform:scale(1) translate