@charset "UTF-8";
/*!
 * FusionCSS v1.0.0 - The Fusion of Bootstrap & Modern CSS
 * A powerful, lightweight CSS framework
 * Built by Fusion Team
 * Licensed under MIT
 */

/* ========================================
   ROOT VARIABLES & THEME
   ======================================== */

:root, [data-theme="light"] {
    /* Primary Colors */
    --fc-primary: #3b82f6;
    --fc-primary-dark: #2563eb;
    --fc-primary-light: #60a5fa;
    --fc-primary-rgb: 59, 130, 246;
    
    /* Secondary Colors */
    --fc-secondary: #64748b;
    --fc-secondary-dark: #475569;
    --fc-secondary-light: #94a3b8;
    --fc-secondary-rgb: 100, 116, 139;
    
    /* Success Colors */
    --fc-success: #10b981;
    --fc-success-dark: #059669;
    --fc-success-light: #34d399;
    --fc-success-rgb: 16, 185, 129;
    
    /* Danger Colors */
    --fc-danger: #ef4444;
    --fc-danger-dark: #dc2626;
    --fc-danger-light: #f87171;
    --fc-danger-rgb: 239, 68, 68;
    
    /* Warning Colors */
    --fc-warning: #f59e0b;
    --fc-warning-dark: #d97706;
    --fc-warning-light: #fbbf24;
    --fc-warning-rgb: 245, 158, 11;
    
    /* Info Colors */
    --fc-info: #06b6d4;
    --fc-info-dark: #0891b2;
    --fc-info-light: #22d3ee;
    --fc-info-rgb: 6, 182, 212;
    
    /* Dark/Light Colors */
    --fc-dark: #0f172a;
    --fc-dark-rgb: 15, 23, 42;
    --fc-light: #f8fafc;
    --fc-light-rgb: 248, 250, 252;
    
    /* Gray Scale */
    --fc-gray-50: #f9fafb;
    --fc-gray-100: #f3f4f6;
    --fc-gray-200: #e5e7eb;
    --fc-gray-300: #d1d5db;
    --fc-gray-400: #9ca3af;
    --fc-gray-500: #6b7280;
    --fc-gray-600: #4b5563;
    --fc-gray-700: #374151;
    --fc-gray-800: #1f2937;
    --fc-gray-900: #111827;
    
    /* Theme Colors */
    --fc-body-bg: #ffffff;
    --fc-body-color: #1f2937;
    --fc-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
    --fc-body-font-size: 1rem;
    --fc-body-line-height: 1.5;
    --fc-body-font-weight: 400;
    
    /* Border */
    --fc-border-width: 1px;
    --fc-border-style: solid;
    --fc-border-color: #e5e7eb;
    --fc-border-radius: 0.5rem;
    --fc-border-radius-sm: 0.375rem;
    --fc-border-radius-lg: 0.75rem;
    --fc-border-radius-xl: 1rem;
    --fc-border-radius-2xl: 1.5rem;
    --fc-border-radius-full: 9999px;
    
    /* Spacing */
    --fc-spacing-0: 0;
    --fc-spacing-1: 0.25rem;
    --fc-spacing-2: 0.5rem;
    --fc-spacing-3: 0.75rem;
    --fc-spacing-4: 1rem;
    --fc-spacing-5: 1.25rem;
    --fc-spacing-6: 1.5rem;
    --fc-spacing-8: 2rem;
    --fc-spacing-10: 2.5rem;
    --fc-spacing-12: 3rem;
    --fc-spacing-16: 4rem;
    --fc-spacing-20: 5rem;
    --fc-spacing-24: 6rem;
    
    /* Shadows */
    --fc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --fc-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --fc-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --fc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --fc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --fc-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --fc-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    
    /* Transitions */
    --fc-transition-fast: 150ms ease;
    --fc-transition-base: 250ms ease;
    --fc-transition-slow: 350ms ease;
    
    /* Z-Index */
    --fc-z-dropdown: 1000;
    --fc-z-sticky: 1020;
    --fc-z-fixed: 1030;
    --fc-z-modal-backdrop: 1040;
    --fc-z-modal: 1050;
    --fc-z-popover: 1060;
    --fc-z-tooltip: 1070;
    --fc-z-toast: 1080;
}

[data-theme="dark"] {
    --fc-primary: #60a5fa;
    --fc-primary-dark: #3b82f6;
    --fc-primary-light: #93c5fd;
    
    --fc-secondary: #94a3b8;
    --fc-secondary-dark: #64748b;
    --fc-secondary-light: #cbd5e1;
    
    --fc-body-bg: #0f172a;
    --fc-body-color: #e2e8f0;
    --fc-border-color: #1e293b;
    
    --fc-gray-50: #111827;
    --fc-gray-100: #1f2937;
    --fc-gray-200: #374151;
    --fc-gray-300: #4b5563;
    --fc-gray-400: #6b7280;
    --fc-gray-500: #9ca3af;
    --fc-gray-600: #d1d5db;
    --fc-gray-700: #e5e7eb;
    --fc-gray-800: #f3f4f6;
    --fc-gray-900: #f9fafb;
}

/* ========================================
   RESET & BASE STYLES
   ======================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--fc-body-font-family);
    font-size: var(--fc-body-font-size);
    font-weight: var(--fc-body-font-weight);
    line-height: var(--fc-body-line-height);
    color: var(--fc-body-color);
    background-color: var(--fc-body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

/* Headings */
.h1, h1 { font-size: 3rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
.h2, h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.25; margin-bottom: 0.875rem; }
.h3, h3 { font-size: 1.875rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.75rem; }
.h4, h4 { font-size: 1.5rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.75rem; }
.h5, h5 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.5rem; }
.h6, h6 { font-size: 1.125rem; font-weight: 600; line-height: 1.45; margin-bottom: 0.5rem; }

/* Display Headings */
.display-1 { font-size: 5rem; font-weight: 700; line-height: 1.1; }
.display-2 { font-size: 4rem; font-weight: 700; line-height: 1.1; }
.display-3 { font-size: 3.5rem; font-weight: 600; line-height: 1.15; }
.display-4 { font-size: 3rem; font-weight: 600; line-height: 1.2; }
.display-5 { font-size: 2.5rem; font-weight: 500; line-height: 1.2; }
.display-6 { font-size: 2rem; font-weight: 500; line-height: 1.25; }

/* Text Utilities */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

/* Font Weights */
.font-thin { font-weight: 100; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* Text Align */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Text Colors */
.text-primary { color: var(--fc-primary); }
.text-secondary { color: var(--fc-secondary); }
.text-success { color: var(--fc-success); }
.text-danger { color: var(--fc-danger); }
.text-warning { color: var(--fc-warning); }
.text-info { color: var(--fc-info); }
.text-dark { color: var(--fc-dark); }
.text-light { color: var(--fc-light); }
.text-white { color: #ffffff; }
.text-black { color: #000000; }
.text-gray-50 { color: var(--fc-gray-50); }
.text-gray-100 { color: var(--fc-gray-100); }
.text-gray-200 { color: var(--fc-gray-200); }
.text-gray-300 { color: var(--fc-gray-300); }
.text-gray-400 { color: var(--fc-gray-400); }
.text-gray-500 { color: var(--fc-gray-500); }
.text-gray-600 { color: var(--fc-gray-600); }
.text-gray-700 { color: var(--fc-gray-700); }
.text-gray-800 { color: var(--fc-gray-800); }
.text-gray-900 { color: var(--fc-gray-900); }
.text-muted { opacity: 0.7; }
.text-dim { opacity: 0.5; }

/* Text Decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Text Overflow */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   CONTAINER & GRID SYSTEM
   ======================================== */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container { max-width: 640px; }
}
@media (min-width: 768px) {
    .container { max-width: 768px; }
}
@media (min-width: 1024px) {
    .container { max-width: 1024px; }
}
@media (min-width: 1280px) {
    .container { max-width: 1280px; }
}
@media (min-width: 1536px) {
    .container { max-width: 1536px; }
}

.container-fluid {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

/* Grid System */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.col {
    flex: 1 0 0%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Column Classes */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Responsive Columns */
@media (min-width: 640px) {
    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1024px) {
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1280px) {
    .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Gap Utilities */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }

/* ========================================
   FLEXBOX UTILITIES
   ======================================== */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align Self */
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

/* Flex Grow & Shrink */
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }
.grow { flex-grow: 1; }
.grow-0 { flex-grow: 0; }
.shrink { flex-shrink: 1; }
.shrink-0 { flex-shrink: 0; }

/* ========================================
   GRID UTILITIES
   ======================================== */

.grid { display: grid; }
.inline-grid { display: inline-grid; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

@media (min-width: 640px) {
    .grid-cols-sm-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-sm-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    .grid-cols-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .grid-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ========================================
   SPACING (MARGIN & PADDING)
   ======================================== */

/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }
.m-10 { margin: 2.5rem; }
.m-12 { margin: 3rem; }
.m-auto { margin: auto; }

/* Margin Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-auto { margin-top: auto; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-auto { margin-bottom: auto; }

/* Margin Left & Right */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.ml-4 { margin-left: 1rem; }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.mr-auto { margin-right: auto; }

/* Margin X & Y */
.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }

/* Padding Top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-12 { padding-top: 3rem; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-5 { padding-bottom: 1.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }

/* Padding Left & Right */
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 0.25rem; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }

.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 0.25rem; }
.pr-2 { padding-right: 0.5rem; }
.pr-3 { padding-right: 0.75rem; }
.pr-4 { padding-right: 1rem; }

/* Padding X & Y */
.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* ========================================
   BACKGROUNDS
   ======================================== */

.bg-primary { background-color: var(--fc-primary); }
.bg-secondary { background-color: var(--fc-secondary); }
.bg-success { background-color: var(--fc-success); }
.bg-danger { background-color: var(--fc-danger); }
.bg-warning { background-color: var(--fc-warning); }
.bg-info { background-color: var(--fc-info); }
.bg-dark { background-color: var(--fc-dark); }
.bg-light { background-color: var(--fc-light); }
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }
.bg-transparent { background-color: transparent; }

/* Gray Backgrounds */
.bg-gray-50 { background-color: var(--fc-gray-50); }
.bg-gray-100 { background-color: var(--fc-gray-100); }
.bg-gray-200 { background-color: var(--fc-gray-200); }
.bg-gray-300 { background-color: var(--fc-gray-300); }
.bg-gray-400 { background-color: var(--fc-gray-400); }
.bg-gray-500 { background-color: var(--fc-gray-500); }
.bg-gray-600 { background-color: var(--fc-gray-600); }
.bg-gray-700 { background-color: var(--fc-gray-700); }
.bg-gray-800 { background-color: var(--fc-gray-800); }
.bg-gray-900 { background-color: var(--fc-gray-900); }

/* Background Opacity */
.bg-opacity-10 { --fc-bg-opacity: 0.1; }
.bg-opacity-25 { --fc-bg-opacity: 0.25; }
.bg-opacity-50 { --fc-bg-opacity: 0.5; }
.bg-opacity-75 { --fc-bg-opacity: 0.75; }
.bg-opacity-100 { --fc-bg-opacity: 1; }

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-dark) 100%);
}
.bg-gradient-secondary {
    background: linear-gradient(135deg, var(--fc-secondary) 0%, var(--fc-secondary-dark) 100%);
}
.bg-gradient-success {
    background: linear-gradient(135deg, var(--fc-success) 0%, var(--fc-success-dark) 100%);
}
.bg-gradient-danger {
    background: linear-gradient(135deg, var(--fc-danger) 0%, var(--fc-danger-dark) 100%);
}
.bg-gradient-warning {
    background: linear-gradient(135deg, var(--fc-warning) 0%, var(--fc-warning-dark) 100%);
}
.bg-gradient-info {
    background: linear-gradient(135deg, var(--fc-info) 0%, var(--fc-info-dark) 100%);
}
.bg-gradient-dark {
    background: linear-gradient(135deg, var(--fc-dark) 0%, #000000 100%);
}

/* ========================================
   BUTTONS
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--fc-border-radius);
    transition: all var(--fc-transition-base);
}

.btn:focus {
    outline: none;
    ring: 2px;
    ring-offset: 2px;
}

.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button Variants */
.btn-primary {
    background-color: var(--fc-primary);
    color: white;
}
.btn-primary:hover {
    background-color: var(--fc-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--fc-shadow-md);
}

.btn-secondary {
    background-color: var(--fc-secondary);
    color: white;
}
.btn-secondary:hover {
    background-color: var(--fc-secondary-dark);
}

.btn-success {
    background-color: var(--fc-success);
    color: white;
}
.btn-success:hover {
    background-color: var(--fc-success-dark);
}

.btn-danger {
    background-color: var(--fc-danger);
    color: white;
}
.btn-danger:hover {
    background-color: var(--fc-danger-dark);
}

.btn-warning {
    background-color: var(--fc-warning);
    color: white;
}
.btn-warning:hover {
    background-color: var(--fc-warning-dark);
}

.btn-info {
    background-color: var(--fc-info);
    color: white;
}
.btn-info:hover {
    background-color: var(--fc-info-dark);
}

.btn-dark {
    background-color: var(--fc-dark);
    color: white;
}
.btn-dark:hover {
    background-color: #000000;
}

.btn-light {
    background-color: var(--fc-light);
    color: var(--fc-dark);
    border-color: var(--fc-border-color);
}
.btn-light:hover {
    background-color: var(--fc-gray-200);
}

/* Outline Buttons */
.btn-outline-primary {
    border-color: var(--fc-primary);
    color: var(--fc-primary);
    background-color: transparent;
}
.btn-outline-primary:hover {
    background-color: var(--fc-primary);
    color: white;
}

.btn-outline-secondary {
    border-color: var(--fc-secondary);
    color: var(--fc-secondary);
    background-color: transparent;
}
.btn-outline-secondary:hover {
    background-color: var(--fc-secondary);
    color: white;
}

/* Button Sizes */
.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    border-radius: var(--fc-border-radius-sm);
}
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--fc-border-radius-lg);
}
.btn-xl {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    border-radius: var(--fc-border-radius-xl);
}

/* Button Full Width */
.btn-block {
    display: flex;
    width: 100%;
}

/* Button Icon */
.btn-icon {
    padding: 0.5rem;
}
.btn-icon.btn-sm { padding: 0.25rem; }
.btn-icon.btn-lg { padding: 0.75rem; }

/* ========================================
   CARDS
   ======================================== */

.card {
    background-color: var(--fc-body-bg);
    border: 1px solid var(--fc-border-color);
    border-radius: var(--fc-border-radius);
    overflow: hidden;
    transition: all var(--fc-transition-base);
}

.card:hover {
    box-shadow: var(--fc-shadow-md);
}

.card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--fc-border-color);
    background-color: rgba(0, 0, 0, 0.02);
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--fc-border-color);
    background-color: rgba(0, 0, 0, 0.02);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-subtitle {
    font-size: 0.875rem;
    color: var(--fc-secondary);
    margin-bottom: 0.75rem;
}

.card-text {
    color: var(--fc-gray-600);
    line-height: 1.5;
}

.card-img-top {
    width: 100%;
    object-fit: cover;
}

/* Card Variants */
.card-hover {
    transition: transform var(--fc-transition-base), box-shadow var(--fc-transition-base);
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--fc-shadow-lg);
}

/* ========================================
   FORMS
   ======================================== */

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fc-gray-700);
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--fc-body-color);
    background-color: var(--fc-body-bg);
    border: 1px solid var(--fc-border-color);
    border-radius: var(--fc-border-radius);
    transition: border-color var(--fc-transition-base), box-shadow var(--fc-transition-base);
}

.form-control:focus {
    outline: none;
    border-color: var(--fc-primary);
    box-shadow: 0 0 0 3px rgba(var(--fc-primary-rgb), 0.1);
}

.form-control:disabled {
    background-color: var(--fc-gray-100);
    cursor: not-allowed;
}

.form-control-lg {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: var(--fc-border-radius-lg);
}

.form-control-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: var(--fc-border-radius-sm);
}

/* Form Select */
.form-select {
    display: block;
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--fc-body-color);
    background-color: var(--fc-body-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    border: 1px solid var(--fc-border-color);
    border-radius: var(--fc-border-radius);
    appearance: none;
}

.form-select:focus {
    outline: none;
    border-color: var(--fc-primary);
    box-shadow: 0 0 0 3px rgba(var(--fc-primary-rgb), 0.1);
}

/* Form Checkbox & Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form-check-input {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    cursor: pointer;
}

.form-check-label {
    font-size: 0.875rem;
    cursor: pointer;
}

/* Form Switch */
.form-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.form-switch-input {
    width: 2rem;
    height: 1rem;
    background-color: var(--fc-gray-300);
    border-radius: 1rem;
    position: relative;
    cursor: pointer;
    transition: background-color var(--fc-transition-base);
    appearance: none;
}

.form-switch-input:checked {
    background-color: var(--fc-primary);
}

.form-switch-input::before {
    content: '';
    position: absolute;
    width: 0.875rem;
    height: 0.875rem;
    background-color: white;
    border-radius: 50%;
    top: 0.0625rem;
    left: 0.0625rem;
    transition: transform var(--fc-transition-base);
}

.form-switch-input:checked::before {
    transform: translateX(1rem);
}

/* Form Validation */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--fc-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2310b981'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 13l4 4L19 7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--fc-danger);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ef4444'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.valid-feedback {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--fc-success);
}

.invalid-feedback {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--fc-danger);
}

/* ========================================
   BADGES
   ======================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--fc-border-radius-full);
}

.badge-primary { background-color: var(--fc-primary); color: white; }
.badge-secondary { background-color: var(--fc-secondary); color: white; }
.badge-success { background-color: var(--fc-success); color: white; }
.badge-danger { background-color: var(--fc-danger); color: white; }
.badge-warning { background-color: var(--fc-warning); color: white; }
.badge-info { background-color: var(--fc-info); color: white; }
.badge-dark { background-color: var(--fc-dark); color: white; }
.badge-light { background-color: var(--fc-light); color: var(--fc-dark); }

.badge-pill {
    border-radius: var(--fc-border-radius-full);
}

/* ========================================
   ALERTS
   ======================================== */

.alert {
    position: relative;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--fc-border-radius);
}

.alert-primary {
    background-color: rgba(var(--fc-primary-rgb), 0.1);
    border-color: rgba(var(--fc-primary-rgb), 0.2);
    color: var(--fc-primary);
}
.alert-secondary {
    background-color: rgba(var(--fc-secondary-rgb), 0.1);
    border-color: rgba(var(--fc-secondary-rgb), 0.2);
    color: var(--fc-secondary);
}
.alert-success {
    background-color: rgba(var(--fc-success-rgb), 0.1);
    border-color: rgba(var(--fc-success-rgb), 0.2);
    color: var(--fc-success);
}
.alert-danger {
    background-color: rgba(var(--fc-danger-rgb), 0.1);
    border-color: rgba(var(--fc-danger-rgb), 0.2);
    color: var(--fc-danger);
}
.alert-warning {
    background-color: rgba(var(--fc-warning-rgb), 0.1);
    border-color: rgba(var(--fc-warning-rgb), 0.2);
    color: var(--fc-warning);
}
.alert-info {
    background-color: rgba(var(--fc-info-rgb), 0.1);
    border-color: rgba(var(--fc-info-rgb), 0.2);
    color: var(--fc-info);
}

.alert-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.alert-dismissible {
    padding-right: 3rem;
}

.alert-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
}
.alert-close:hover {
    opacity: 1;
}

/* ========================================
   MODAL
   ======================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--fc-z-modal);
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal.show {
    display: block;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 1.75rem auto;
    pointer-events: none;
    max-width: 500px;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    background-color: var(--fc-body-bg);
    border: 1px solid var(--fc-border-color);
    border-radius: var(--fc-border-radius);
    outline: none;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--fc-border-color);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.5;
}
.modal-close:hover {
    opacity: 1;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--fc-border-color);
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    z-index: var(--fc-z-modal-backdrop);
}

.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1140px; }
.modal-sm { max-width: 300px; }

/* ========================================
   NAVBAR
   ======================================== */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem;
    background-color: var(--fc-body-bg);
    border-bottom: 1px solid var(--fc-border-color);
}

.navbar-brand {
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    color: inherit;
}

.navbar-nav {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    text-decoration: none;
    color: var(--fc-gray-600);
    transition: color var(--fc-transition-base);
}
.nav-link:hover {
    color: var(--fc-primary);
}
.nav-link.active {
    color: var(--fc-primary);
    font-weight: 500;
}

.navbar-toggler {
    display: none;
    background: transparent;
    border: 1px solid var(--fc-border-color);
    padding: 0.5rem;
    border-radius: var(--fc-border-radius);
    cursor: pointer;
}

@media (max-width: 768px) {
    .navbar-toggler {
        display: block;
    }
    .navbar-collapse {
        display: none;
        width: 100%;
        margin-top: 1rem;
    }
    .navbar-collapse.show {
        display: block;
    }
    .navbar-nav {
        flex-direction: column;
    }
}

/* ========================================
   TABLES
   ======================================== */

.table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid var(--fc-border-color);
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--fc-border-color);
    background-color: var(--fc-gray-50);
    font-weight: 600;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.table-bordered {
    border: 1px solid var(--fc-border-color);
}
.table-bordered th,
.table-bordered td {
    border: 1px solid var(--fc-border-color);
}

/* ========================================
   LIST GROUP
   ======================================== */

.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--fc-border-radius);
    list-style: none;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1rem;
    background-color: var(--fc-body-bg);
    border: 1px solid var(--fc-border-color);
}
.list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.list-group-item:last-child {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}
.list-group-item + .list-group-item {
    border-top-width: 0;
}

.list-group-item-action {
    cursor: pointer;
}
.list-group-item-action:hover {
    background-color: var(--fc-gray-50);
}

.list-group-item.active {
    background-color: var(--fc-primary);
    border-color: var(--fc-primary);
    color: white;
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
}

.page-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--fc-primary);
    background-color: var(--fc-body-bg);
    border: 1px solid var(--fc-border-color);
    border-radius: var(--fc-border-radius);
    transition: all var(--fc-transition-base);
}
.page-link:hover {
    background-color: var(--fc-gray-100);
}
.page-item.active .page-link {
    background-color: var(--fc-primary);
    border-color: var(--fc-primary);
    color: white;
}
.page-item.disabled .page-link {
    opacity: 0.5;
    pointer-events: none;
}

/* ========================================
   BREADCRUMB
   ======================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: var(--fc-gray-100);
    border-radius: var(--fc-border-radius);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    margin: 0 0.5rem;
    color: var(--fc-gray-500);
}
.breadcrumb-item a {
    text-decoration: none;
    color: var(--fc-primary);
}
.breadcrumb-item.active {
    color: var(--fc-gray-600);
}

/* ========================================
   TOOLTIP
   ======================================== */

.tooltip {
    position: absolute;
    z-index: var(--fc-z-tooltip);
    display: block;
    margin: 0.25rem;
    font-size: 0.75rem;
    word-wrap: break-word;
    opacity: 0;
}
.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: white;
    text-align: center;
    background-color: var(--fc-dark);
    border-radius: var(--fc-border-radius-sm);
}

/* ========================================
   PROGRESS BAR
   ======================================== */

.progress {
    display: flex;
    height: 0.75rem;
    overflow: hidden;
    background-color: var(--fc-gray-200);
    border-radius: var(--fc-border-radius-full);
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: white;
    text-align: center;
    white-space: nowrap;
    background-color: var(--fc-primary);
    transition: width var(--fc-transition-base);
}

.progress-striped .progress-bar {
    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.progress-animated .progress-bar {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}

/* ========================================
   SPINNERS
   ======================================== */

.spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}
.spinner-lg {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   POSITION UTILITIES
   ======================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

/* Positioning */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-auto { top: auto; }
.right-auto { right: auto; }
.bottom-auto { bottom: auto; }
.left-auto { left: auto; }

/* Z-Index */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }

/* ========================================
   BORDER UTILITIES
   ======================================== */

.border { border: 1px solid var(--fc-border-color); }
.border-0 { border: 0; }
.border-t { border-top: 1px solid var(--fc-border-color); }
.border-r { border-right: 1px solid var(--fc-border-color); }
.border-b { border-bottom: 1px solid var(--fc-border-color); }
.border-l { border-left: 1px solid var(--fc-border-color); }

/* Border Colors */
.border-primary { border-color: var(--fc-primary); }
.border-secondary { border-color: var(--fc-secondary); }
.border-success { border-color: var(--fc-success); }
.border-danger { border-color: var(--fc-danger); }
.border-warning { border-color: var(--fc-warning); }
.border-info { border-color: var(--fc-info); }

/* Border Radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--fc-border-radius-sm); }
.rounded { border-radius: var(--fc-border-radius); }
.rounded-md { border-radius: var(--fc-border-radius-md); }
.rounded-lg { border-radius: var(--fc-border-radius-lg); }
.rounded-xl { border-radius: var(--fc-border-radius-xl); }
.rounded-2xl { border-radius: var(--fc-border-radius-2xl); }
.rounded-full { border-radius: var(--fc-border-radius-full); }

/* ========================================
   DISPLAY UTILITIES
   ======================================== */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

/* Responsive Display */
@media (min-width: 640px) {
    .sm\:block { display: block; }
    .sm\:hidden { display: none; }
    .sm\:flex { display: flex; }
    .sm\:grid { display: grid; }
}
@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:hidden { display: none; }
    .md\:flex { display: flex; }
    .md\:grid { display: grid; }
}
@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:hidden { display: none; }
    .lg\:flex { display: flex; }
    .lg\:grid { display: grid; }
}

/* ========================================
   WIDTH & HEIGHT UTILITIES
   ======================================== */

.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }

.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }

.min-h-screen { min-height: 100vh; }
.max-w-full { max-width: 100%; }

/* ========================================
   OPACITY & VISIBILITY
   ======================================== */

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* ========================================
   ANIMATIONS
   ======================================== */

.animate-fade-in {
    animation: fadeIn var(--fc-transition-base);
}
.animate-slide-up {
    animation: slideUp var(--fc-transition-base);
}
.animate-slide-down {
    animation: slideDown var(--fc-transition-base);
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
@keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

/* ========================================
   SHADOW UTILITIES
   ======================================== */

.shadow-sm { box-shadow: var(--fc-shadow-sm); }
.shadow { box-shadow: var(--fc-shadow); }
.shadow-md { box-shadow: var(--fc-shadow-md); }
.shadow-lg { box-shadow: var(--fc-shadow-lg); }
.shadow-xl { box-shadow: var(--fc-shadow-xl); }
.shadow-2xl { box-shadow: var(--fc-shadow-2xl); }
.shadow-inner { box-shadow: var(--fc-shadow-inner); }
.shadow-none { box-shadow: none; }

/* Hover Shadows */
.hover\:shadow-sm:hover { box-shadow: var(--fc-shadow-sm); }
.hover\:shadow:hover { box-shadow: var(--fc-shadow); }
.hover\:shadow-md:hover { box-shadow: var(--fc-shadow-md); }
.hover\:shadow-lg:hover { box-shadow: var(--fc-shadow-lg); }
.hover\:shadow-xl:hover { box-shadow: var(--fc-shadow-xl); }

/* ========================================
   OVERFLOW UTILITIES
   ======================================== */

.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

/* ========================================
   CURSOR UTILITIES
   ======================================== */

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-wait { cursor: wait; }
.cursor-text { cursor: text; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }

/* ========================================
   USER SELECT
   ======================================== */

.select-none { user-select: none; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }

/* ========================================
   POINTER EVENTS
   ======================================== */

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    .print-text-black { color: black !important; }
}