/* ═══════════════════════════════════════════
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ═══════════════════════════════════════════ */

 :root {
     /* Colors - Dark Theme (Default) */
     --color-background: #0f172a;
     --color-background-offset: #1e293b;
     --color-surface: #1e293b;
     --color-surface-hover: #334155;
     --color-border: #334155;
     --color-border-light: #475569;

     --color-text-dark: #f8fafc;
     --color-text-normal: #cbd5e1;
     --color-text-muted: #94a3b8;
     --color-text-light: #64748b;

     --color-primary: #0ea5e9;
     --color-primary-hover: #38bdf8;
     --color-primary-light: rgba(14, 165, 233, 0.1);

     --color-secondary: #8b5cf6;
     --color-secondary-hover: #a78bfa;

     --color-success: #10b981;
     --color-warning: #f59e0b;
     --color-danger: #ef4444;
     --color-info: #06b6d4;

     /* Gradients */
     --gradient-primary: linear-gradient(135deg, #0ea5e9, #8b5cf6);
     --gradient-secondary: linear-gradient(135deg, #ec4899, #8b5cf6);
     --gradient-accent: linear-gradient(135deg, #10b981, #0ea5e9);

     /* Shadows */
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);

     /* Glassmorphism */
     --glass-bg: rgba(255, 255, 255, 0.05);
     --glass-border: rgba(255, 255, 255, 0.1);
     --glass-blur: blur(16px);

     /* Spacing */
     --container-max: 1280px;
     --nav-height: 64px;

     /* Border Radius */
     --radius-sm: 6px;
     --radius-md: 10px;
     --radius-lg: 16px;
     --radius-xl: 24px;
     --radius-full: 9999px;

     /* Typography */
     --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     --font-mono: 'Fira Code', 'JetBrains Mono', monospace;

     /* Transitions */
     --transition-fast: 150ms ease;
     --transition-base: 250ms ease;
     --transition-slow: 350ms ease;
 }

 /* Light Theme */
 html[data-theme='light'] {
     --color-background: #fafafa;
     --color-background-offset: #f1f5f9;
     --color-surface: #ffffff;
     --color-surface-hover: #f8fafc;
     --color-border: #e2e8f0;
     --color-border-light: #cbd5e1;

     --color-text-dark: #0f172a;
     --color-text-normal: #334155;
     --color-text-muted: #64748b;
     --color-text-light: #94a3b8;

     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

     --glass-bg: rgba(255, 255, 255, 0.7);
     --glass-border: rgba(255, 255, 255, 0.5);
 }

 /* ═══════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════ */

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

 html {
     scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%;
     max-width: 100%;
     overflow-x: hidden;
 }

 html.cb-menu-open,
 html.cb-menu-open body {
     overflow: hidden !important;
     height: 100vh !important;
     max-height: 100vh !important;
 }

 body {
     font-family: var(--font-sans);
     font-size: 16px;
     line-height: 1.6;
     color: var(--color-text-normal);
     background-color: var(--color-background);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     max-width: 100%;
     overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     color: var(--color-text-dark);
     font-weight: 700;
     line-height: 1.25;
     margin-bottom: 0.75rem;
 }

 h1 {
     font-size: clamp(1.75rem, 4vw, 2.5rem);
 }

 h2 {
     font-size: clamp(1.4rem, 3vw, 2rem);
 }

 h3 {
     font-size: clamp(1.2rem, 2.5vw, 1.6rem);
 }

 h4 {
     font-size: clamp(1rem, 2vw, 1.25rem);
 }

 h5 {
     font-size: 0.95rem;
 }

 h6 {
     font-size: 0.85rem;
 }

 a {
     color: var(--color-primary);
     text-decoration: none;
     transition: color var(--transition-fast);
 }

 a:hover {
     color: var(--color-primary-hover);
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 /* ═══════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════ */

 .cb-nav {
     position: sticky;
     top: 0;
     z-index: 1000;
     height: var(--nav-height);
     background: var(--glass-bg);
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     border-bottom: 1px solid var(--glass-border);
     transition: background var(--transition-base);
 }

 .cb-nav__container {
     max-width: var(--container-max);
     margin: 0 auto;
     padding: 0 1.5rem;
     height: 100%;
     display: flex;
     align-items: center;
     gap: 1.5rem;
 }

 .cb-nav__logo {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     text-decoration: none;
     flex-shrink: 0;
 }

 .cb-nav__logo-img {
     width: 32px;
     height: 32px;
 }

 .cb-nav__logo-text {
     font-size: 1.25rem;
     font-weight: 800;
     color: var(--color-text-dark);
     letter-spacing: -0.02em;
 }

 .cb-nav__logo-accent {
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .cb-nav__links {
     display: flex;
     gap: 0.25rem;
     align-items: center;
 }

 .cb-nav__link {
     padding: 0.5rem 0.75rem;
     border-radius: var(--radius-md);
     color: var(--color-text-muted);
     font-size: 0.875rem;
     font-weight: 600;
     transition: all var(--transition-fast);
     white-space: nowrap;
     display: flex;
     align-items: center;
     gap: 0.4rem;
 }

 .cb-nav__link:hover,
 .cb-nav__link.active {
     color: var(--color-text-dark);
     background: var(--color-surface-hover);
 }

 .cb-nav__right {
     margin-left: auto;
     display: flex;
     align-items: center;
     gap: 0.75rem;
 }

 .cb-nav__search {
     position: relative;
 }

 .cb-nav__search-input {
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-full);
     padding: 0.4rem 1rem 0.4rem 2rem;
     color: var(--color-text-normal);
     font-size: 0.85rem;
     width: 180px;
     transition: all var(--transition-base);
     outline: none;
 }

 .cb-nav__search-input:focus {
     border-color: var(--color-primary);
     width: 240px;
     box-shadow: 0 0 0 3px var(--color-primary-light);
 }

 .cb-nav__search-btn {
     position: absolute;
     left: 0.5rem;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: var(--color-text-muted);
     cursor: pointer;
 }

 .cb-nav__theme-toggle {
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
     border-radius: var(--radius-md);
     background: var(--color-surface);
     color: var(--color-text-muted);
     cursor: pointer;
     transition: all var(--transition-fast);
 }

 .cb-nav__theme-toggle:hover {
     color: var(--color-warning);
     background: var(--color-surface-hover);
 }

 html[data-theme='dark'] .cb-nav__theme-toggle #theme-icon-sun {
     display: inline;
 }

 html[data-theme='dark'] .cb-nav__theme-toggle #theme-icon-moon {
     display: none;
 }

 html[data-theme='light'] .cb-nav__theme-toggle #theme-icon-sun {
     display: none;
 }

 html[data-theme='light'] .cb-nav__theme-toggle #theme-icon-moon {
     display: inline;
 }

 .cb-nav__lang-link {
     font-size: 0.75rem;
     font-weight: 700;
     color: var(--color-text-muted);
     padding: 0.25rem 0.5rem;
     border-radius: var(--radius-sm);
     border: 1px solid var(--color-border);
     transition: all var(--transition-fast);
 }

 .cb-nav__lang-link:hover {
     color: var(--color-primary);
     border-color: var(--color-primary);
 }

 .cb-nav__auth {
     display: flex;
     gap: 0.5rem;
 }

 .cb-nav__user {
     position: relative;
 }

 .cb-nav__user-btn {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     background: none;
     border: none;
     color: var(--color-text-normal);
     cursor: pointer;
     padding: 0.4rem 0.75rem;
     border-radius: var(--radius-md);
     transition: background var(--transition-fast);
 }

 .cb-nav__user-btn:hover {
     background: var(--color-surface-hover);
 }

 .cb-nav__avatar {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     object-fit: cover;
 }

 .cb-nav__username {
     font-size: 0.85rem;
     font-weight: 600;
 }

 .cb-nav__dropdown {
     position: absolute;
     top: calc(100% + 0.5rem);
     right: 0;
     min-width: 200px;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-xl);
     padding: 0.5rem;
     display: none;
     z-index: 100;
 }

 .cb-nav__dropdown.show {
     display: block;
     animation: fadeSlideDown 0.2s ease;
 }

 .cb-nav__dropdown-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.6rem 0.75rem;
     border-radius: var(--radius-md);
     color: var(--color-text-normal);
     font-size: 0.875rem;
     transition: background var(--transition-fast);
 }

 .cb-nav__dropdown-item:hover {
     background: var(--color-surface-hover);
     color: var(--color-text-dark);
 }

 .cb-nav__dropdown-item--danger:hover {
     background: rgba(239, 68, 68, 0.1);
     color: var(--color-danger);
 }

 .cb-nav__dropdown-divider {
     height: 1px;
     background: var(--color-border);
     margin: 0.5rem 0;
 }

 /* Hover Dropdowns */
 .cb-nav__dropdown-hover {
     position: relative;
     height: 100%;
     display: flex;
     align-items: center;
 }

 .cb-nav__dropdown-hover button.cb-nav__link {
     background: none;
     border: none;
     cursor: pointer;
     font-family: inherit;
     height: 100%;
 }

 .cb-nav__arrow {
     font-size: 0.7rem;
     transition: transform var(--transition-fast);
 }

 .cb-nav__dropdown-hover:hover .cb-nav__arrow {
     transform: rotate(180deg);
 }

 .cb-nav__dropdown-menu {
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%) translateY(10px) scale(0.95);
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-xl);
     padding: 0.75rem;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
     min-width: 280px;
     opacity: 0;
     visibility: hidden;
     transition: all var(--transition-base);
     pointer-events: none;
     z-index: 1100;
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
 }

 .cb-nav__dropdown-hover:hover .cb-nav__dropdown-menu {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(8px) scale(1);
     pointer-events: auto;
 }

 .cb-nav__dropdown-menu::before {
     content: '';
     position: absolute;
     top: -12px;
     left: 0;
     right: 0;
     height: 12px;
     background: transparent;
 }

 .cb-nav__dropdown-item-custom {
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
     padding: 0.65rem 0.75rem;
     border-radius: var(--radius-md);
     color: var(--color-text-normal) !important;
     transition: all var(--transition-fast);
     text-align: left;
 }

 .cb-nav__dropdown-item-custom i {
     font-size: 1.1rem;
     color: var(--color-text-muted);
     margin-top: 0.15rem;
     transition: color var(--transition-fast);
     width: 20px;
     text-align: center;
 }

 .cb-nav__dropdown-item-custom div {
     display: flex;
     flex-direction: column;
     gap: 0.1rem;
 }

 .cb-nav__dropdown-item-custom .title {
     font-size: 0.875rem;
     font-weight: 700;
     color: var(--color-text-dark);
 }

 .cb-nav__dropdown-item-custom .desc {
     font-size: 0.75rem;
     color: var(--color-text-muted);
     font-weight: 500;
     line-height: 1.3;
 }

 .cb-nav__dropdown-item-custom:hover {
     background: var(--color-surface-hover);
     transform: translateX(4px);
 }

 .cb-nav__dropdown-item-custom:hover i {
     color: var(--color-primary);
 }

 .cb-nav__dropdown-item-custom.active {
     background: var(--color-primary-light);
 }

 .cb-nav__dropdown-item-custom.active .title {
     color: var(--color-primary);
 }

 .cb-nav__dropdown-item-custom.active i {
     color: var(--color-primary);
 }

 .cb-nav__mobile-toggle {
     display: none;
     background: none;
     border: none;
     color: var(--color-text-normal);
     cursor: pointer;
     z-index: 1100;
     position: relative;
     width: 40px;
     height: 40px;
     align-items: center;
     justify-content: center;
 }

 .cb-nav__hamburger {
     display: block;
     width: 20px;
     height: 2px;
     background: currentColor;
     position: relative;
     transition: background 0.2s ease;
 }

 .cb-nav__hamburger::before,
 .cb-nav__hamburger::after {
     content: '';
     position: absolute;
     width: 20px;
     height: 2px;
     background: currentColor;
     left: 0;
     transition: all 0.2s ease;
 }

 .cb-nav__hamburger::before {
     top: -6px;
 }

 .cb-nav__hamburger::after {
     top: 6px;
 }

 .cb-nav__mobile-toggle.active .cb-nav__hamburger {
     background: transparent;
 }

 .cb-nav__mobile {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     width: 300px;
     height: 100vh;
     max-height: 100vh;
     background: var(--color-surface);
     border-left: 1px solid var(--color-border);
     box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
     z-index: 1050;
     padding: calc(var(--nav-height) + 1.5rem) 1.25rem 1.5rem;
     transform: translateX(100%);
     transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     overflow-y: auto;
     box-sizing: border-box;
 }

 .cb-nav__mobile.active {
     transform: translateX(0);
 }

 .cb-nav__mobile-toggle.active .cb-nav__hamburger::before {
     transform: rotate(45deg);
     top: 0;
 }

 .cb-nav__mobile-toggle.active .cb-nav__hamburger::after {
     transform: rotate(-45deg);
     top: 0;
 }



 .cb-nav__mobile-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(15, 23, 42, 0.6);
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
     z-index: 1040;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
 }

 .cb-nav__mobile-backdrop.active {
     opacity: 1;
     visibility: visible;
 }

 .cb-nav__mobile-link {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.75rem 1rem;
     color: var(--color-text-normal);
     font-size: 0.9rem;
     font-weight: 600;
     border-radius: var(--radius-md);
     transition: all var(--transition-fast);
     text-decoration: none;
     border-bottom: none;
 }

 .cb-nav__mobile-link i {
     width: 18px;
     text-align: center;
     color: var(--color-text-muted);
 }

 .cb-nav__mobile-link:hover,
 .cb-nav__mobile-link.active {
     color: var(--color-text-dark);
     background: var(--color-surface-hover);
 }

 .cb-nav__mobile-search {
     position: relative;
     margin-bottom: 1rem;
 }

 .cb-nav__mobile-search-input {
     width: 100%;
     background: var(--color-background-offset);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-full);
     padding: 0.5rem 1rem 0.5rem 2.25rem;
     color: var(--color-text-normal);
     font-size: 0.85rem;
     outline: none;
     transition: border-color var(--transition-fast);
 }

 .cb-nav__mobile-search-input:focus {
     border-color: var(--color-primary);
 }

 .cb-nav__mobile-search-btn {
     position: absolute;
     left: 0.75rem;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: var(--color-text-muted);
     cursor: pointer;
 }

 .cb-nav__mobile-divider {
     height: 1px;
     background: var(--color-border);
     margin: 1rem 0;
 }

 .cb-nav__mobile-action {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.75rem 1rem;
     color: var(--color-text-muted);
     font-size: 0.875rem;
     font-weight: 600;
     text-decoration: none;
 }

 .cb-nav__mobile-action:hover {
     color: var(--color-primary);
 }

 /* Mobile Menu Profile Section */
 .cb-nav__mobile-profile {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin-bottom: 0.5rem;
 }

 .cb-nav__mobile-user-card {
     display: flex;
     align-items: center;
     gap: 1rem;
     padding: 0.75rem 1rem;
     background: var(--color-surface-hover);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
 }

 .cb-nav__mobile-avatar {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--color-primary);
 }

 .cb-nav__mobile-user-info {
     display: flex;
     flex-direction: column;
 }

 .cb-nav__mobile-username-display {
     font-size: 0.95rem;
     font-weight: 700;
     color: var(--color-text-dark);
 }

 .cb-nav__mobile-user-role {
     font-size: 0.75rem;
     font-weight: 600;
     color: var(--color-primary);
 }

 .cb-nav__mobile-user-links {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
 }

 .cb-nav__mobile-user-link {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.65rem 1rem;
     color: var(--color-text-normal);
     font-size: 0.875rem;
     font-weight: 600;
     border-radius: var(--radius-md);
     transition: all var(--transition-fast);
     text-decoration: none;
 }

 .cb-nav__mobile-user-link i {
     width: 18px;
     text-align: center;
     color: var(--color-text-muted);
     font-size: 1rem;
 }

 .cb-nav__mobile-user-link:hover {
     color: var(--color-text-dark);
     background: var(--color-surface-hover);
 }

 .cb-nav__mobile-user-link--danger:hover {
     background: rgba(239, 68, 68, 0.1);
     color: var(--color-danger);
 }

 .cb-nav__mobile-user-link--danger:hover i {
     color: var(--color-danger);
 }

 /* Mobile Auth Action Section */
 .cb-nav__mobile-auth {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     margin-bottom: 0.5rem;
     padding: 0.5rem 0.25rem;
 }

 .cb-nav__mobile-auth-buttons {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
 }

 @keyframes fadeSlideDown {
     from {
         opacity: 0;
         transform: translateY(-8px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */

 .cb-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     padding: 0.6rem 1.25rem;
     border: none;
     border-radius: var(--radius-full);
     font-family: var(--font-sans);
     font-size: 0.875rem;
     font-weight: 600;
     cursor: pointer;
     transition: all var(--transition-fast);
     text-decoration: none;
     white-space: nowrap;
 }

 .cb-btn--primary {
     background: var(--gradient-primary);
     color: #fff;
 }

 .cb-btn--primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
     color: #fff;
 }

 .cb-btn--secondary {
     background: var(--color-surface);
     color: var(--color-text-dark);
     border: 1px solid var(--color-border);
 }

 .cb-btn--secondary:hover {
     background: var(--color-surface-hover);
 }

 .cb-btn--ghost {
     background: transparent;
     color: var(--color-text-normal);
 }

 .cb-btn--ghost:hover {
     background: var(--color-surface-hover);
 }

 .cb-btn--danger {
     background: var(--color-danger);
     color: #fff;
 }

 .cb-btn--danger:hover {
     background: #dc2626;
 }

 .cb-btn--success {
     background: var(--color-success);
     color: #fff;
 }

 .cb-btn--lg {
     padding: 0.8rem 2rem;
     font-size: 1rem;
 }

 .cb-btn--sm {
     padding: 0.4rem 0.8rem;
     font-size: 0.8rem;
 }

 .cb-btn--icon {
     width: 36px;
     height: 36px;
     padding: 0;
     border-radius: var(--radius-md);
 }

 /* ═══════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════ */
 .cb-breadcrumb {
     background: var(--color-background-offset);
     border-bottom: 1px solid var(--color-border);
     padding: 0.75rem 0;
 }

 .cb-breadcrumb__list {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     list-style: none;
     font-size: 0.85rem;
     padding: 0;
     margin: 0;
 }

 .cb-breadcrumb__item {
     display: inline-flex;
     align-items: center;
 }

 .cb-breadcrumb__item a {
     color: var(--color-text-muted);
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     transition: color var(--transition-fast);
 }

 .cb-breadcrumb__item a:hover {
     color: var(--color-primary);
 }

 .cb-breadcrumb__item+.cb-breadcrumb__item::before {
     content: '/';
     color: var(--color-text-light);
     margin: 0 0.5rem;
     pointer-events: none;
     font-weight: 400;
 }

 .cb-breadcrumb__item--active {
     color: var(--color-text-dark);
     font-weight: 600;
 }

 /* ═══════════════════════════════════════════
   FLASH MESSAGES
   ═══════════════════════════════════════════ */

 .cb-flash {
     position: fixed;
     top: calc(var(--nav-height) + 1rem);
     right: 1rem;
     padding: 0.75rem 1.25rem;
     border-radius: var(--radius-lg);
     display: flex;
     align-items: center;
     gap: 0.75rem;
     font-size: 0.9rem;
     font-weight: 500;
     z-index: 9999;
     animation: slideInRight 0.3s ease;
     transition: opacity 0.3s ease;
     max-width: 400px;
 }

 .cb-flash--success {
     background: rgba(16, 185, 129, 0.15);
     color: var(--color-success);
     border: 1px solid rgba(16, 185, 129, 0.3);
 }

 .cb-flash--error {
     background: rgba(239, 68, 68, 0.15);
     color: var(--color-danger);
     border: 1px solid rgba(239, 68, 68, 0.3);
 }

 .cb-flash__close {
     background: none;
     border: none;
     color: inherit;
     cursor: pointer;
     margin-left: auto;
     opacity: 0.6;
 }

 .cb-flash__close:hover {
     opacity: 1;
 }

 @keyframes slideInRight {
     from {
         transform: translateX(100%);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }

 /* ═══════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════ */

 .cb-main {
     min-height: calc(100vh - var(--nav-height));
 }

 /* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

 .cb-footer {
     background: var(--color-background-offset);
     border-top: 1px solid var(--color-border);
     padding: 4rem 0 2rem;
 }

 .cb-footer__container {
     max-width: var(--container-max);
     margin: 0 auto;
     padding: 0 1.5rem;
 }

 .cb-footer__grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 3rem;
     margin-bottom: 3rem;
 }

 .cb-footer__logo {
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--color-text-dark);
 }

 .cb-footer__logo span {
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .cb-footer__tagline {
     color: var(--color-text-muted);
     margin: 0.75rem 0 1.25rem;
     font-size: 0.9rem;
     line-height: 1.6;
 }

 .cb-footer__social {
     display: flex;
     gap: 0.75rem;
 }

 .cb-footer__social-link {
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-md);
     background: var(--color-surface);
     color: var(--color-text-muted);
     transition: all var(--transition-fast);
 }

 .cb-footer__social-link:hover {
     color: var(--color-primary);
     background: var(--color-primary-light);
 }

 .cb-footer__heading {
     font-size: 0.85rem;
     font-weight: 700;
     color: var(--color-text-dark);
     margin-bottom: 1rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .cb-footer__link {
     display: block;
     color: var(--color-text-muted);
     font-size: 0.9rem;
     padding: 0.35rem 0;
     transition: color var(--transition-fast);
 }

 .cb-footer__link:hover {
     color: var(--color-primary);
 }

 .cb-footer__bottom {
     border-top: 1px solid var(--color-border);
     padding-top: 2rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: var(--color-text-light);
     font-size: 0.85rem;
 }

 .cb-footer__location {
     display: flex;
     align-items: center;
     gap: 0.4rem;
 }

 /* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */

 .cb-card {
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
     overflow: hidden;
     transition: all var(--transition-base);
 }

 .cb-card:hover {
     border-color: var(--color-primary);
     box-shadow: var(--shadow-lg);
     transform: translateY(-2px);
 }

 .cb-card__image {
     width: 100%;
     aspect-ratio: 16/9;
     object-fit: cover;
     background: var(--color-background-offset);
 }

 .cb-card__body {
     padding: 1.25rem;
 }

 .cb-card__badge {
     display: inline-block;
     padding: 0.2rem 0.6rem;
     border-radius: var(--radius-full);
     font-size: 0.7rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .cb-card__badge--free {
     background: rgba(16, 185, 129, 0.15);
     color: var(--color-success);
 }

 .cb-card__badge--beginner {
     background: rgba(14, 165, 233, 0.15);
     color: var(--color-primary);
 }

 .cb-card__badge--intermediate {
     background: rgba(245, 158, 11, 0.15);
     color: var(--color-warning);
 }

 .cb-card__badge--advanced {
     background: rgba(239, 68, 68, 0.15);
     color: var(--color-danger);
 }

 .cb-card__title {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--color-text-dark);
     margin: 0.5rem 0;
     line-height: 1.3;
 }

 .cb-card__meta {
     display: flex;
     gap: 1rem;
     color: var(--color-text-muted);
     font-size: 0.8rem;
     margin-top: 0.5rem;
 }

 .cb-card__meta i {
     margin-right: 0.25rem;
 }

 /* ═══════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════ */

 .cb-form-group {
     margin-bottom: 1.25rem;
 }

 .cb-form-label {
     display: block;
     font-size: 0.85rem;
     font-weight: 600;
     color: var(--color-text-dark);
     margin-bottom: 0.4rem;
 }

 .cb-form-input,
 .cb-form-textarea,
 .cb-form-select {
     width: 100%;
     padding: 0.65rem 1rem;
     background: var(--color-surface);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     color: var(--color-text-normal);
     font-family: var(--font-sans);
     font-size: 0.9rem;
     transition: all var(--transition-fast);
     outline: none;
 }

 .cb-form-input:focus,
 .cb-form-textarea:focus,
 .cb-form-select:focus {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
 }

 .cb-form-input.is-error {
     border-color: var(--color-danger);
 }

 .cb-form-textarea {
     resize: vertical;
     min-height: 120px;
 }

 .cb-form-error {
     color: var(--color-danger);
     font-size: 0.8rem;
     margin-top: 0.3rem;
 }

 /* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */


 @media (min-width: 1201px) and (max-width: 1360px) {
     .cb-nav__container {
         gap: 0.75rem;
         padding: 0 1rem;
     }

     .cb-nav__logo-text {
         font-size: 1.15rem;
     }

     .cb-nav__links {
         gap: 0.1rem;
     }

     .cb-nav__link {
         padding: 0.4rem 0.5rem;
         font-size: 0.825rem;
     }

     .cb-nav__right {
         gap: 0.5rem;
     }

     .cb-nav__search-input {
         width: 130px;
     }

     .cb-nav__search-input:focus {
         width: 170px;
     }

     .cb-nav__username {
         max-width: 80px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
 }

 @media (max-width: 1200px) {
     .cb-nav__links {
         display: none;
     }

     .cb-nav__search {
         display: none;
     }

     .cb-nav__mobile-toggle {
         display: block;
     }

     .cb-footer__grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 768px) {
     .cb-nav__container {
         padding: 0 1rem;
         gap: 0.75rem;
     }

     .cb-nav__right {
         gap: 0.5rem;
     }

     .cb-nav__auth {
         display: none !important;
     }

     .cb-nav__lang {
         display: none;
     }

     .cb-nav__user-btn {
         padding: 0.3rem;
     }

     .cb-nav__user-btn .fa-chevron-down {
         display: none !important;
     }

     .cb-nav__username {
         display: none;
     }

     .cb-nav__dropdown {
         right: -10px;
         min-width: 180px;
     }
 }

 @media (max-width: 640px) {
     .cb-footer__grid {
         grid-template-columns: 1fr;
     }

     .cb-nav__logo-text {
         font-size: 1.1rem;
     }
 }

 /* ═══════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════ */

 .container,
 .cb-container {
     max-width: var(--container-max);
     margin: 0 auto;
     padding: 0 1.5rem;
     width: 100%;
     box-sizing: border-box;
 }

 .cb-table-responsive {
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     border-radius: var(--radius-lg);
     border: 1px solid var(--color-border);
     margin-bottom: 1.5rem;
 }

 .cb-table-responsive table {
     width: 100%;
     border-collapse: collapse;
     white-space: nowrap;
 }

 .text-center {
     text-align: center;
 }

 .text-gradient {
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .mt-1 {
     margin-top: 0.5rem;
 }

 .mt-2 {
     margin-top: 1rem;
 }

 .mt-3 {
     margin-top: 1.5rem;
 }

 .mt-4 {
     margin-top: 2rem;
 }

 .mb-1 {
     margin-bottom: 0.5rem;
 }

 .mb-2 {
     margin-bottom: 1rem;
 }

 .mb-3 {
     margin-bottom: 1.5rem;
 }

 .mb-4 {
     margin-bottom: 2rem;
 }

 .grid {
     display: grid;
     gap: 1.5rem;
 }

 .grid-2 {
     grid-template-columns: repeat(2, 1fr);
 }

 .grid-3 {
     grid-template-columns: repeat(3, 1fr);
 }

 .grid-4 {
     grid-template-columns: repeat(4, 1fr);
 }

 @media (max-width: 1024px) {
     .grid-4 {
         grid-template-columns: repeat(2, 1fr);
     }

     .grid-3 {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 640px) {

     .grid-4,
     .grid-3,
     .grid-2 {
         grid-template-columns: 1fr;
     }
 }