/* QuantumCSS Framework 2025 v1.1 - Complete Implementation */
        /* Container Queries, Extended Tokens, CSS-Only Components */

        /* ===== CSS LAYERS ===== */
        @layer quantum-reset, quantum-tokens, quantum-base, quantum-utilities, quantum-components, quantum-containers, quantum-overrides;

        /* ===== EXTENDED DESIGN TOKENS ===== */
        @layer quantum-tokens {
          :root {
            /* Extended Color Palette - OKLCH */
            --q-color-primary-50: oklch(97% 0.02 250);
            --q-color-primary-100: oklch(92% 0.05 250);
            --q-color-primary-200: oklch(85% 0.08 250);
            --q-color-primary-300: oklch(75% 0.12 250);
            --q-color-primary-400: oklch(65% 0.16 250);
            --q-color-primary-500: oklch(55% 0.2 250);
            --q-color-primary-600: oklch(45% 0.2 250);
            --q-color-primary-700: oklch(35% 0.18 250);
            --q-color-primary-800: oklch(25% 0.15 250);
            --q-color-primary-900: oklch(15% 0.1 250);

            /* Semantic Color Tokens */
            --q-color-primary: var(--q-color-primary-500);
            --q-color-secondary: oklch(65% 0.15 300);
            --q-color-accent: oklch(70% 0.25 180);
            --q-color-success: oklch(75% 0.2 140);
            --q-color-warning: oklch(80% 0.25 80);
            --q-color-error: oklch(65% 0.25 25);
            --q-color-surface: oklch(98% 0.02 250);
            --q-color-on-surface: oklch(20% 0.05 250);
            
            /* Border Radius */
            --q-radius-sm: 0.125rem;
            --q-radius-md: 0.25rem;
            --q-radius-lg: 0.5rem;
            --q-radius-full: 50%;
            
            /* Shadows */
            --q-shadow:0 1px 3px #0000004d;
            --q-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
            --q-shadow-md: 0 4px 6px oklch(0% 0 0 / 0.1);
            --q-shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.1);
            --q-shadow-xl: 0 20px 25px oklch(0% 0 0 / 0.1);
            
          }

          /* Dark theme variables */
          [data-theme="dark"] {
            --q-color-surface: oklch(15% 0.02 250);
            --q-color-on-surface: oklch(90% 0.02 250);
            --q-shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.3);
            --q-shadow-md: 0 4px 6px oklch(0% 0 0 / 0.4);
            --q-shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.5);
            --q-shadow-xl: 0 20px 25px oklch(0% 0 0 / 0.6);
            --q-gradient-surface: linear-gradient(135deg, var(--q-color-surface), color-mix(in oklch, var(--q-color-surface), white 5%));
          }
        }

        /* ===== BASE STYLES ===== */
        @layer quantum-reset {
          

          img, picture, video, canvas, svg {
            display: block;
            max-width: 100%;
          }

          input, button, textarea, select {
            font: inherit;
          }

          button {
            cursor: pointer;
            border: none;
            background: none;
          }

          /* Reduced motion for accessibility */
          @media (prefers-reduced-motion: reduce) {
            * {
              animation-duration: 0.01ms !important;
              animation-iteration-count: 1 !important;
              transition-duration: 0.01ms !important;
              scroll-behavior: auto !important;
            }
          }
        }

        

        

        /* ===== CSS-ONLY COMPONENTS ===== */
        @layer quantum-components {
          /* Button Component */
          .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--q-space-2);
            padding: .5rem 1rem!important;
            border-radius: var(--q-radius-md);
            font-weight: var(--q-font-weight-medium);
            text-decoration: none;
            transition: all var(--q-duration-fast) var(--q-ease-out);
            border: 1px solid transparent;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            box-shadow:var(--q-shadow);
            color:#fff!important;
          }

          .btn:focus-visible {
            outline: 2px solid var(--q-color-primary);
            outline-offset: 2px;
          }

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

          /* Button Sizes */
          .btn--xs {
            padding: var(--q-space-1) var(--q-space-2);
            font-size: 0.75rem;
            border-radius: var(--q-radius-sm);
          }

          .btn--sm {
            padding: .4rem 1rem !important;
            font-size: 0.85rem;
            border-radius:4px;
          }

          .btn--md {
            padding: var(--q-space-2) var(--q-space-4);
            font-size: 1rem;
            border-radius: var(--q-radius-md);
          }

          .btn--lg {
            padding: var(--q-space-3) var(--q-space-6);
            font-size: 1.125rem;
            border-radius: var(--q-radius-lg);
          }

          .btn--xl {
            padding: var(--q-space-4) var(--q-space-8);
            font-size: 1.25rem;
            border-radius: var(--q-radius-lg);
          }

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

.btn-light{background:#fff;color:#333}
.btn-light:hover{background:#252B30;color:var(--accent-color);transform:translateY(-1px)}
.btn-light:active{background:#e0e0e0;box-shadow:0 2px 4px #0000001a 0 1px 2px #0000000f}
.btn-dark{background:#282F34;color:#fff}
.btn-dark:hover{background:#2C3439;color:var(--accent-color)}
.btn-dark:active{background:#555;box-shadow:0 2px 4px #0000001a 0 1px 2px #0000000f}

.btn--primary {
  background-color: var(--q-color-primary);
  color: white;
}

.btn--primary:hover:not(:disabled) {
  background-color: color-mix(in oklch, var(--q-color-primary), black 10%);
  box-shadow: var(--q-shadow-md);
}

.btn--secondary {
  background-color: var(--q-color-secondary);
  color: white;
}

.btn--secondary:hover:not(:disabled) {
  background-color: color-mix(in oklch, var(--q-color-secondary), black 10%);
  box-shadow: var(--q-shadow-md);
}

.btn--accent {
  background-color: var(--q-color-accent);
  color: white;
}

.btn--accent:hover:not(:disabled) {
  background-color: color-mix(in oklch, var(--q-color-accent), black 10%);
  box-shadow: var(--q-shadow-md);
}

.btn--success {
  background-color: var(--q-color-success);
  color: white;
}

.btn--success:hover:not(:disabled) {
  background-color: color-mix(in oklch, var(--q-color-success), black 10%);
  box-shadow: var(--q-shadow-md);
}

.btn--warning {
  background-color: var(--q-color-warning);
  color: white;
}

.btn--warning:hover:not(:disabled) {
  background-color: color-mix(in oklch, var(--q-color-warning), black 10%);
  box-shadow: var(--q-shadow-md);
}

.btn--error {
  background-color: var(--q-color-error);
  color: white;
}

.btn--error:hover:not(:disabled) {
  background-color: color-mix(in oklch, var(--q-color-error), black 10%);
  box-shadow: var(--q-shadow-md);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--q-color-primary);
  color: var(--q-color-primary);
}

.btn--outline:hover:not(:disabled) {
  background-color: var(--q-color-primary);
  color: white;
  box-shadow: var(--q-shadow-md);
}

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

.btn--outline-secondary:hover:not(:disabled) {
  background-color: var(--q-color-secondary);
  color: white;
}

.btn--ghost {
  background-color: transparent;
  color: var(--q-color-primary);
}

.btn--ghost:hover:not(:disabled) {
  background-color: color-mix(in oklch, var(--q-color-primary), transparent 95%);
}

.btn--link {
  background-color: transparent;
  color: var(--q-color-primary);
  text-decoration: underline;
  padding: var(--q-space-1) var(--q-space-2);
}

.btn--link:hover:not(:disabled) {
  background-color: transparent;
  text-decoration: none;
  transform: none;
}

/* Button Group */
.btn-group {
  display: inline-flex;
  border-radius: var(--q-radius-md);
  overflow: hidden;
  box-shadow: var(--q-shadow-sm);
}

.btn-group--vertical {
  flex-direction: column;
}

.btn-group .btn {
  border-radius: 0;
  margin: 0;
  border-right: 1px solid color-mix(in oklch, var(--q-color-primary), transparent 80%);
}

.btn-group .btn:last-child {
  border-right: none;
}

.btn-group .btn:first-child {
  border-top-left-radius: var(--q-radius-md);
  border-bottom-left-radius: var(--q-radius-md);
}

.btn-group .btn:last-child {
  border-top-right-radius: var(--q-radius-md);
  border-bottom-right-radius: var(--q-radius-md);
}

.btn-group--vertical .btn {
  border-right: none;
  border-bottom: 1px solid color-mix(in oklch, var(--q-color-primary), transparent 80%);
}

.btn-group--vertical .btn:last-child {
  border-bottom: none;
}

.btn-group--vertical .btn:first-child {
  border-top-left-radius: var(--q-radius-md);
  border-top-right-radius: var(--q-radius-md);
  border-bottom-left-radius: 0;
}

.btn-group--vertical .btn:last-child {
  border-bottom-left-radius: var(--q-radius-md);
  border-bottom-right-radius: var(--q-radius-md);
  border-top-right-radius: 0;
}
}

/* Alert Component */
.messages{margin-bottom:20px}
.alert{border-radius:8px;margin-bottom:10px;padding:12px 16px;border-left: 4px solid;transition: all 0.3s ease;}
.alert-warning{background-color: #f7e1e1;border-left-color:#e44017;border:1px solid #e44017;color:#e44017;}
.alert-success{background:#d4edda;border-left-color:#155724;border:1px solid #c3e6cb;color:#155724}
.alert-error{background:#f8d7da;border-left-color:#721c24;border:1px solid #f5c6cb;color:#721c24}
.alert-info{background:#d1ecf1;border-left-color:#0c5460;border:1px solid #bee5eb;color:#0c5460}