/* ==== /css/init-design.css ==== */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/montserrat/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/montserrat/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/montserrat/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/montserrat/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/montserrat/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




:root {
  
  --color-teal-50:  #f0fdfa;
  --color-teal-100: #ccfbf1;
  --color-teal-200: #99f6e4;
  --color-teal-300: #5eead4;
  --color-teal-400: #2dd4bf;   
  --color-teal-500: #14b8a6;   
  --color-teal-600: #0d9488;   
  --color-teal-700: #0f766e;
  --color-teal-800: #115e59;
  --color-teal-900: #134e4a;

  
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  
  --color-primary:       var(--color-teal-500);
  --color-primary-dark:  var(--color-teal-600);
  --color-primary-light: var(--color-teal-400);
  --color-primary-soft:  rgba(var(--color-primary-rgb), 0.10);
  --color-primary-ring:  rgba(var(--color-primary-rgb), 0.25);

  
  --color-bg-main:    var(--color-slate-50);
  --color-bg-card:    #ffffff;
  --color-bg-hover:   var(--color-slate-100);
  --color-bg-sunken:  var(--color-slate-100);
  --color-bg-dark:    var(--color-slate-800);
  --color-bg-darker:  var(--color-slate-900);

  
  --fg-1: var(--color-slate-900);
  --fg-2: var(--color-slate-600);
  --fg-3: var(--color-slate-400);
  --fg-on-primary: #ffffff;

  
  --color-border:        var(--color-slate-200);
  --color-border-strong: var(--color-slate-300);
  --color-border-focus:  var(--color-primary);

  
  --color-white-rgb:   255, 255, 255;
  --color-black-rgb:   0, 0, 0;
  --color-primary-rgb: 20, 184, 166;    
  --color-success-rgb: 16, 185, 129;
  --color-warning-rgb: 245, 158, 11;
  --color-error-rgb:   239, 68, 68;
  --color-info-rgb:    59, 130, 246;
  --color-teal-200-rgb:  153, 246, 228;
  --color-teal-300-rgb:  94, 234, 212;
  --color-teal-400-rgb:  45, 212, 191;
  --color-teal-600-rgb:  13, 148, 136;
  --color-slate-50-rgb:  248, 250, 252;
  --color-slate-100-rgb: 241, 245, 249;
  --color-slate-300-rgb: 203, 213, 225;
  --color-slate-400-rgb: 148, 163, 184;
  --color-slate-500-rgb: 100, 116, 139;
  --color-slate-600-rgb: 71, 85, 105;
  --color-slate-800-rgb: 30, 41, 59;
  --color-slate-900-rgb: 15, 23, 42;
  --color-bg-sunken-rgb: 241, 245, 249; 
  --color-bg-card-rgb:   var(--color-white-rgb);   

  
  --color-gray-100: #f3f4f8;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-700: #374151;
  --color-ink:      #111827;             

  
  --color-success:      #10b981;
  --color-success-dark: #059669;
  --color-success-bg:   rgba(var(--color-success-rgb), 0.10);
  --color-warning:      #f59e0b;
  --color-warning-bg:   rgba(var(--color-warning-rgb), 0.10);
  --color-error:        #ef4444;
  --color-error-bg:     rgba(var(--color-error-rgb), 0.10);
  --color-info:         #3b82f6;
  --color-info-bg:      rgba(var(--color-info-rgb), 0.10);
  --color-info-bright:    #38bdf8;   
  --color-warning-bright: #fbbf24;   

  
  --color-success-subtle:   #ecfdf5;
  --color-success-border:   #a7f3d0;
  --color-success-emphasis: #047857;
  --color-info-subtle:      #eff6ff;
  --color-info-border:      #bfdbfe;
  --color-info-emphasis:    #1d4ed8;
  --color-warning-subtle:   #fffbeb;
  --color-warning-border:   #fde68a;
  --color-warning-emphasis: #b45309;
  --color-error-subtle:     #fef2f2;
  --color-error-border:     #fecaca;
  --color-error-emphasis:   #b91c1c;

  
  --color-delete:     #dc2626;
  --color-delete-rgb: 220, 38, 38;

  
  --color-db:    #2563eb;
  --color-db-bg: rgba(37, 99, 235, 0.10);
  --color-ai:    #7c3aed;
  --color-ai-bg: rgba(139, 92, 246, 0.12);

  
  --gradient-brand:      linear-gradient(135deg, var(--color-teal-400) 0%, var(--color-teal-700) 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(var(--color-teal-400-rgb),0.12) 0%, rgba(15,118,110,0.12) 100%);
  --gradient-db:         linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);

  
  --shadow-sm:   0 1px 2px 0 rgba(var(--color-slate-900-rgb), 0.05);
  --shadow-md:   0 4px 6px -1px rgba(var(--color-slate-900-rgb), 0.10), 0 2px 4px -1px rgba(var(--color-slate-900-rgb), 0.06);
  --shadow-lg:   0 10px 15px -3px rgba(var(--color-slate-900-rgb), 0.10), 0 4px 6px -2px rgba(var(--color-slate-900-rgb), 0.05);
  --shadow-xl:   0 20px 25px -5px rgba(var(--color-slate-900-rgb), 0.10), 0 10px 10px -5px rgba(var(--color-slate-900-rgb), 0.04);
  --shadow-glow: 0 10px 30px rgba(var(--color-primary-rgb), 0.20);

  
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  
  --radius-xs:   0.25rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1.0, 1);

  
  --font-sans:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Montserrat', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', Consolas, 'Courier New', monospace;

  
  --text-xs:   0.75rem;     
  --text-sm:   0.875rem;    
  --text-base: 1rem;        
  --text-lg:   1.125rem;    
  --text-xl:   1.25rem;     
  --text-2xl:  1.5rem;      
  --text-3xl:  2rem;        
  --text-4xl:  2.5rem;      
  --text-5xl:  3rem;        
  --text-6xl:  3.75rem;     

  
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-base:    1.6;
  --lh-relaxed: 1.7;

  
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  
  --chart-1: #14b8a6;   
  --chart-2: #3b82f6;   
  --chart-3: #f59e0b;   
  --chart-4: #8b5cf6;   
  --chart-5: #ec4899;   
  --chart-6: #0ea5e9;   
  --chart-7: #f43f5e;   
  --chart-8: #94a3b8;   
  --chart-grid: var(--color-border);
  --chart-axis: var(--fg-3);
  --chart-track: var(--color-bg-sunken);

  
  --seq-1: #ccfbf1;  --seq-2: #5eead4;  --seq-3: #2dd4bf;
  --seq-4: #14b8a6;  --seq-5: #0d9488;  --seq-6: #115e59;

  
  --div-neg-2: #e11d48;  --div-neg-1: #fb7185;  --div-mid: #e2e8f0;
  --div-pos-1: #2dd4bf;  --div-pos-2: #0d9488;
}



[data-theme="dark"],
[data-bs-theme="dark"] {
  --color-bg-main:    var(--color-slate-900);
  --color-bg-card:    var(--color-slate-800);
  --color-bg-hover:   var(--color-slate-700);
  --color-bg-sunken:  #0b1424;
  --color-bg-sunken-rgb: 11, 20, 36;
  --color-bg-card-rgb: var(--color-slate-800-rgb);
  --color-bg-dark:    var(--color-slate-800);
  --color-bg-darker:  var(--color-slate-900);

  --fg-1: var(--color-slate-100);
  --fg-2: var(--color-slate-300);
  --fg-3: var(--color-slate-400);

  --color-border:        var(--color-slate-700);
  --color-border-strong: var(--color-slate-600);

  --shadow-sm:   0 1px 2px 0 rgba(var(--color-black-rgb), 0.30);
  --shadow-md:   0 4px 6px -1px rgba(var(--color-black-rgb), 0.40), 0 2px 4px -1px rgba(var(--color-black-rgb), 0.30);
  --shadow-lg:   0 10px 15px -3px rgba(var(--color-black-rgb), 0.50), 0 4px 6px -2px rgba(var(--color-black-rgb), 0.40);
  --shadow-xl:   0 20px 25px -5px rgba(var(--color-black-rgb), 0.55);
  --shadow-glow: 0 10px 30px rgba(var(--color-primary-rgb), 0.35);

  
  --color-success-subtle:   rgba(var(--color-success-rgb), 0.18);
  --color-success-border:   #047857;
  --color-success-emphasis: #6ee7b7;
  --color-info-subtle:      rgba(var(--color-info-rgb), 0.18);
  --color-info-border:      #1d4ed8;
  --color-info-emphasis:    #93c5fd;
  --color-warning-subtle:   rgba(var(--color-warning-rgb), 0.18);
  --color-warning-border:   #b45309;
  --color-warning-emphasis: #fcd34d;
  --color-error-subtle:     rgba(var(--color-error-rgb), 0.18);
  --color-error-border:     #b91c1c;
  --color-error-emphasis:   #fca5a5;

  
  --chart-1: #2dd4bf;
  --chart-2: #60a5fa;
  --chart-3: #fbbf24;
  --chart-4: #a78bfa;
  --chart-5: #f472b6;
  --chart-6: #38bdf8;
  --chart-7: #fb7185;
  --chart-8: #94a3b8;
  --div-mid: var(--color-slate-700);
}


/* ==== /css/init-bootstrap.css ==== */
@charset "UTF-8";







:root,
[data-bs-theme="light"],
[data-theme="light"] {
  
  --bs-primary:    var(--color-teal-500);
  --bs-secondary:  var(--color-slate-500);
  --bs-success:    var(--color-success);
  --bs-info:       var(--color-info);
  --bs-warning:    var(--color-warning);
  --bs-danger:     var(--color-error);
  --bs-light:      var(--color-slate-50);
  --bs-dark:       var(--color-slate-900);

  
  --bs-primary-rgb:    var(--color-primary-rgb);
  --bs-secondary-rgb:  var(--color-slate-500-rgb);
  --bs-success-rgb:    var(--color-success-rgb);
  --bs-info-rgb:       var(--color-info-rgb);
  --bs-warning-rgb:    var(--color-warning-rgb);
  --bs-danger-rgb:     var(--color-error-rgb);
  --bs-light-rgb:      var(--color-slate-50-rgb);
  --bs-dark-rgb:       var(--color-slate-900-rgb);

  
  --bs-primary-bg-subtle:      var(--color-teal-50);
  --bs-primary-border-subtle:  var(--color-teal-200);
  --bs-primary-text-emphasis:  var(--color-teal-700);

  --bs-secondary-bg-subtle:    var(--color-slate-100);
  --bs-secondary-border-subtle:var(--color-slate-300);
  --bs-secondary-text-emphasis:var(--color-slate-700);

  --bs-success-bg-subtle:      var(--color-success-subtle);
  --bs-success-border-subtle:  var(--color-success-border);
  --bs-success-text-emphasis:  var(--color-success-emphasis);

  --bs-info-bg-subtle:         var(--color-info-subtle);
  --bs-info-border-subtle:     var(--color-info-border);
  --bs-info-text-emphasis:     var(--color-info-emphasis);

  --bs-warning-bg-subtle:      var(--color-warning-subtle);
  --bs-warning-border-subtle:  var(--color-warning-border);
  --bs-warning-text-emphasis:  var(--color-warning-emphasis);

  --bs-danger-bg-subtle:       var(--color-error-subtle);
  --bs-danger-border-subtle:   var(--color-error-border);
  --bs-danger-text-emphasis:   var(--color-error-emphasis);

  --bs-light-bg-subtle:        var(--color-bg-card);
  --bs-light-border-subtle:    var(--color-slate-200);

  --bs-dark-bg-subtle:         var(--color-slate-200);
  --bs-dark-border-subtle:     var(--color-slate-400);
  --bs-dark-text-emphasis:     var(--color-slate-900);

  
  --bs-body-bg:               var(--color-slate-50);
  --bs-body-bg-rgb:           var(--color-slate-50-rgb);
  --bs-body-color:            var(--color-slate-900);
  --bs-body-color-rgb:        var(--color-slate-900-rgb);
  --bs-secondary-bg:          var(--color-bg-card);
  --bs-secondary-bg-rgb:      var(--color-white-rgb);
  --bs-secondary-color:       var(--color-slate-600);
  --bs-secondary-color-rgb:   var(--color-slate-600-rgb);
  --bs-tertiary-bg:           var(--color-bg-sunken);
  --bs-tertiary-bg-rgb:       var(--color-bg-sunken-rgb);
  --bs-tertiary-color:        var(--color-slate-400);
  --bs-emphasis-color:        var(--color-slate-900);
  --bs-emphasis-color-rgb:    var(--color-slate-900-rgb);

  
  --bs-border-color:           var(--color-border);
  --bs-border-color-translucent: rgba(var(--color-slate-900-rgb), 0.10);

  
  --bs-link-color:            var(--color-primary);
  --bs-link-color-rgb:        var(--color-primary-rgb);
  --bs-link-hover-color:      var(--color-primary-dark);
  --bs-link-hover-color-rgb:  var(--color-teal-600-rgb);

  
  --bs-focus-ring-width:  3px;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color:  var(--color-primary-ring);

  
  --bs-highlight-bg:    rgba(var(--color-primary-rgb), 0.18);
  --bs-highlight-color: var(--color-teal-700);

  
  --bs-code-color: var(--color-primary-dark);
}

[data-bs-theme="dark"],
[data-theme="dark"] {
  
  --bs-primary:    var(--color-teal-400);
  --bs-primary-rgb: var(--color-teal-400-rgb);

  --bs-secondary: var(--color-slate-400);
  --bs-secondary-rgb: var(--color-slate-400-rgb);

  --bs-light: var(--color-slate-800);
  --bs-light-rgb: var(--color-slate-800-rgb);
  --bs-dark: var(--color-slate-100);
  --bs-dark-rgb: var(--color-slate-100-rgb);

  --bs-primary-bg-subtle:      rgba(var(--color-primary-rgb), 0.18);
  --bs-primary-border-subtle:  var(--color-teal-700);
  --bs-primary-text-emphasis:  var(--color-teal-300);

  --bs-secondary-bg-subtle:    rgba(var(--color-slate-400-rgb), 0.15);
  --bs-secondary-border-subtle:var(--color-slate-600);
  --bs-secondary-text-emphasis:var(--color-slate-300);

  --bs-light-bg-subtle:        var(--color-slate-800);
  --bs-light-border-subtle:    var(--color-slate-700);
  --bs-dark-bg-subtle:         var(--color-bg-sunken);
  --bs-dark-border-subtle:     var(--color-slate-700);
  --bs-dark-text-emphasis:     var(--color-slate-100);

  --bs-body-bg:               var(--color-slate-900);
  --bs-body-bg-rgb:           var(--color-slate-900-rgb);
  --bs-body-color:            var(--color-slate-100);
  --bs-body-color-rgb:        var(--color-slate-100-rgb);
  --bs-secondary-bg:          var(--color-slate-800);
  --bs-secondary-bg-rgb:      var(--color-slate-800-rgb);
  --bs-secondary-color:       var(--color-slate-300);
  --bs-secondary-color-rgb:   var(--color-slate-300-rgb);
  --bs-emphasis-color:        var(--color-slate-50);
  --bs-emphasis-color-rgb:    var(--color-slate-50-rgb);

  --bs-border-color-translucent: rgba(var(--color-white-rgb), 0.08);

  --bs-link-color:            var(--color-teal-300);
  --bs-link-color-rgb:        var(--color-teal-300-rgb);
  --bs-link-hover-color:      var(--color-teal-200);
  --bs-link-hover-color-rgb:  var(--color-teal-200-rgb);

  --bs-focus-ring-color:      rgba(var(--color-teal-400-rgb), 0.35);

  --bs-highlight-bg:    rgba(var(--color-teal-400-rgb), 0.22);
  --bs-highlight-color: var(--color-teal-300);

  --bs-code-color: var(--color-teal-300);
}


html[data-theme="dark"]      { color-scheme: dark; }
html[data-bs-theme="dark"]   { color-scheme: dark; }
html[data-theme="dark"]:not([data-bs-theme])     {  }
html[data-bs-theme="dark"]:not([data-theme])     {  }




:root {
  --bs-body-font-family:
    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --bs-font-monospace:
    'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', Consolas,
    'Courier New', monospace;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.6;

  
  --bs-heading-color: var(--bs-emphasis-color);
}

body {
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1, .h1 { font-weight: 800; }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

p, .lead { text-wrap: pretty; }

code {
  background: var(--bs-tertiary-bg);
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
}




:root {
  --bs-border-radius-sm: 0.375rem;     
  --bs-border-radius:    0.5rem;       
  --bs-border-radius-lg: 0.75rem;      
  --bs-border-radius-xl: 1rem;         
  --bs-border-radius-xxl: 1.5rem;
  --bs-border-radius-pill: 9999px;

  --bs-box-shadow-sm: 0 1px 2px 0 rgba(var(--color-slate-900-rgb), 0.05);
  --bs-box-shadow:    0 4px 6px -1px rgba(var(--color-slate-900-rgb), 0.10),
                      0 2px 4px -1px rgba(var(--color-slate-900-rgb), 0.06);
  --bs-box-shadow-lg: 0 10px 15px -3px rgba(var(--color-slate-900-rgb), 0.10),
                      0 4px 6px -2px rgba(var(--color-slate-900-rgb), 0.05);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(var(--color-slate-900-rgb), 0.06);
}

[data-bs-theme="dark"], [data-theme="dark"] {
  --bs-box-shadow-sm: 0 1px 2px 0 rgba(var(--color-black-rgb), 0.30);
  --bs-box-shadow:    0 4px 6px -1px rgba(var(--color-black-rgb), 0.40),
                      0 2px 4px -1px rgba(var(--color-black-rgb), 0.30);
  --bs-box-shadow-lg: 0 10px 15px -3px rgba(var(--color-black-rgb), 0.50),
                      0 4px 6px -2px rgba(var(--color-black-rgb), 0.40);
}





.btn {
  --bs-btn-border-radius: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-weight: 600;
  font-family: 'Hanken Grotesk', sans-serif;
  letter-spacing: -0.005em;
  transition:
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-lg { --bs-btn-padding-y: 0.75rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: 0.625rem; }
.btn-sm { --bs-btn-padding-y: 0.375rem; --bs-btn-padding-x: 0.75rem; --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: 0.375rem; }

.btn-primary {
  --bs-btn-color: var(--fg-on-primary);
  --bs-btn-bg: var(--color-teal-500);
  --bs-btn-border-color: var(--color-teal-500);
  --bs-btn-hover-bg: var(--color-teal-600);
  --bs-btn-hover-border-color: var(--color-teal-600);
  --bs-btn-hover-color: var(--fg-on-primary);
  --bs-btn-active-bg: var(--color-teal-700);
  --bs-btn-active-border-color: var(--color-teal-700);
  --bs-btn-disabled-bg: var(--color-teal-300);
  --bs-btn-disabled-border-color: var(--color-teal-300);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(var(--color-slate-900-rgb), 0.10),
              0 2px 4px -1px rgba(var(--color-slate-900-rgb), 0.06);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
  --bs-btn-color: var(--color-teal-600);
  --bs-btn-border-color: var(--color-teal-500);
  --bs-btn-hover-bg: var(--color-teal-500);
  --bs-btn-hover-border-color: var(--color-teal-500);
  --bs-btn-hover-color: var(--fg-on-primary);
  --bs-btn-active-bg: var(--color-teal-700);
  --bs-btn-active-border-color: var(--color-teal-700);
}
[data-bs-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--color-teal-300);
}

.btn-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--bs-secondary-bg);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--bs-tertiary-bg);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--bs-tertiary-bg);
  --bs-btn-active-border-color: var(--bs-border-color);
}

.btn:focus-visible,
.btn.focus-visible,
.btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
  outline: none;
}




.form-control,
.form-select {
  --bs-border-radius: 0.5rem;
  border-color: var(--bs-border-color);
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  padding: 0.625rem 0.875rem;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow  150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.form-control::placeholder { color: var(--bs-tertiary-color); }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-label { font-weight: 500; color: var(--bs-body-color); margin-bottom: 0.375rem; }
.form-text { color: var(--bs-tertiary-color); }

.input-group-text {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}




.card {
  --bs-card-border-radius: 0.75rem;
  --bs-card-inner-border-radius: calc(0.75rem - 1px);
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-bg: var(--bs-secondary-bg);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: 1rem;
  --bs-card-cap-padding-x: 1.5rem;
  box-shadow: var(--bs-box-shadow-sm);
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card-title { font-weight: 700; letter-spacing: -0.01em; }


.card-hover { cursor: pointer; }
.card-hover:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.20);
  transform: translateY(-2px);
}




.navbar {
  --bs-navbar-padding-y: 0.75rem;
  --bs-navbar-brand-font-weight: 800;
  --bs-navbar-brand-color: var(--bs-emphasis-color);
  background: var(--bs-secondary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.navbar-brand { letter-spacing: -0.02em; }

.nav-link {
  --bs-nav-link-color: var(--bs-secondary-color);
  --bs-nav-link-hover-color: var(--bs-emphasis-color);
  font-weight: 500;
}
.nav-link.active,
.nav-tabs .nav-link.active {
  color: var(--bs-primary);
}
.nav-tabs {
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-primary);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-secondary-bg);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-nav-pills-border-radius: 9999px;
}




.alert {
  --bs-alert-border-radius: 0.75rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-padding-x: 1.25rem;
  border-width: 1px;
}




.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-padding-y: 0.25em;
  --bs-badge-padding-x: 0.625em;
  --bs-badge-border-radius: 9999px;
  letter-spacing: 0.01em;
}




.table {
  --bs-table-bg: var(--bs-secondary-bg);
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  --bs-table-hover-bg: var(--bs-tertiary-bg);
}
.table > thead {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-tertiary-color);
}




.pagination {
  --bs-pagination-color: var(--bs-secondary-color);
  --bs-pagination-bg: var(--bs-secondary-bg);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
  --bs-pagination-border-radius: 0.5rem;
}

.list-group {
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-bg: var(--bs-secondary-bg);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
  --bs-list-group-border-radius: 0.75rem;
}

.dropdown-menu {
  --bs-dropdown-bg: var(--bs-secondary-bg);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-border-radius: 0.75rem;
  box-shadow: var(--bs-box-shadow-lg);
}




.accordion {
  --bs-accordion-bg: var(--bs-secondary-bg);
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-button-bg: transparent;
  --bs-accordion-button-active-bg: var(--bs-primary-bg-subtle);
  --bs-accordion-button-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-border-radius: 0.75rem;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}




.modal-content,
.offcanvas {
  --bs-modal-border-radius: 1rem;
  --bs-modal-border-color: var(--bs-border-color);
  --bs-modal-bg: var(--bs-secondary-bg);
  --bs-offcanvas-bg: var(--bs-secondary-bg);
  --bs-offcanvas-border-color: var(--bs-border-color);
  border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow-lg);
}

.toast {
  --bs-toast-bg: var(--bs-secondary-bg);
  --bs-toast-border-color: var(--bs-border-color);
  --bs-toast-border-radius: 0.75rem;
  box-shadow: var(--bs-box-shadow-lg);
}




.progress {
  --bs-progress-bg: var(--bs-tertiary-bg);
  --bs-progress-bar-bg: var(--bs-primary);
  --bs-progress-border-radius: 9999px;
  height: 0.5rem;
}





.text-gradient-init {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.text-eyebrow-init {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-primary);
}
.shadow-glow-init { box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.20) !important; }
.bg-brand-gradient-init { background: var(--gradient-brand); color: var(--fg-on-primary); }
.bg-brand-soft-init     { background: var(--color-primary-soft); }
.border-brand-init      { border-color: var(--bs-primary) !important; }
.rounded-init           { border-radius: 0.75rem !important; }


/* ==== /css/core.css ==== */



:root {
  --bg-app:       var(--color-bg-main);
  --bg-sidebar:   var(--color-bg-card);
  --bg-surface:   var(--color-bg-card);
  --bg-input:     var(--color-bg-sunken);
  --bg-hover:     rgba(var(--color-primary-rgb),0.06);
  --bg-active:    var(--color-primary-soft);
  --bg-msg-ai:    var(--color-teal-50);

  --accent:       var(--color-primary);
  --accent-l:     var(--color-primary-light);
  --accent-dark:  var(--color-primary-dark);
  --accent-rgb:   var(--color-primary-rgb);
  --accent-glow:  rgba(var(--color-primary-rgb),0.18);
  --blue:         var(--color-info);
  --blue-glow:    rgba(var(--color-info-rgb),0.18);

  --border:       var(--color-border);
  --border-hi:    var(--color-border-strong);

  --txt:          var(--fg-1);
  --txt-muted:    var(--fg-3);
  --txt-dim:      var(--fg-2);

  
  --shadow-panel: -10px 0 34px rgba(var(--color-slate-900-rgb),0.18);

  --radius:       var(--radius-lg);
  --navbar-h:     54px;
  --sidebar-w:    240px;
  --left-rail-w:  226px;

  
  --fs-xs:  var(--text-xs);    
  --fs-sm:  var(--text-sm);    
  --fs-md:  var(--text-base);  
  --fs-lg:  var(--text-lg);    
  --fs-xl:  var(--text-xl);    

  
  --sidebar-bg:      var(--color-slate-50);
  --sidebar-txt:     var(--color-gray-700);
  --sidebar-txt-dim: var(--color-gray-400);
  --sidebar-hover:   rgba(var(--color-primary-rgb),0.07);
  --sidebar-active:  rgba(var(--color-primary-rgb),0.12);
  --sidebar-border:  rgba(var(--color-black-rgb),0.07);
}


[data-theme="dark"] {
  
  --bg-sidebar:   var(--color-slate-900);
  --bg-hover:     rgba(var(--color-primary-rgb),0.08);
  --bg-active:    rgba(var(--color-primary-rgb),0.15);
  --bg-msg-ai:    rgba(var(--color-primary-rgb),0.07);

  --shadow-panel: -10px 0 34px rgba(var(--color-black-rgb),0.62);

  --sidebar-bg:      var(--color-slate-900);
  --sidebar-txt:     rgba(var(--color-white-rgb),0.75);
  --sidebar-txt-dim: rgba(var(--color-white-rgb),0.38);
  --sidebar-hover:   rgba(var(--color-white-rgb),0.06);
  --sidebar-active:  rgba(var(--color-primary-rgb),0.18);
  --sidebar-border:  rgba(var(--color-white-rgb),0.07);

  --bs-body-color:               var(--color-slate-100);
  --bs-body-color-rgb:           var(--color-slate-100-rgb);
  --bs-body-bg:                  var(--color-slate-900);
  --bs-secondary-color:          var(--color-slate-300);
  --bs-secondary-color-rgb:      var(--color-slate-300-rgb);
  --bs-tertiary-color:           rgba(var(--color-slate-100-rgb),0.5);
  --bs-border-color:             var(--color-slate-700);
  --bs-border-color-translucent: rgba(var(--color-white-rgb),0.07);
  --bs-card-color:               var(--color-slate-100);
  --bs-card-bg:                  var(--color-slate-800);
  --bs-card-border-color:        var(--color-slate-700);
}


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans, 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif);
  background: url(/images/bg.png) no-repeat center center fixed ;
  background-size: cover;
  background-color: var(--bg-app);
  color: var(--txt);
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  font-size: var(--fs-md);
  line-height: 1.5;
  letter-spacing: var(--tracking-snug, -0.01em);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .3s, color .3s;
}


#btnContextEditor {
  border-color: var(--color-primary) !important;
  color: var(--color-primary-dark) !important;
  background: var(--color-primary-soft) !important;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 5px 12px !important;
}
#btnContextEditor:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--fg-on-primary) !important;
}
[data-theme="dark"] #btnContextEditor {
  color: var(--color-primary-light) !important;
}

.navbar {
  background: rgba(var(--color-white-rgb), 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: var(--navbar-h);
  flex-shrink: 0;
  padding: 0 20px 0 8px !important;
  margin-bottom: 0 !important;
  z-index: 100;
  border-bottom: 1px solid rgba(var(--color-black-rgb),0.05) !important;
}
.navbar .navbar-brand { text-decoration: none; }
.navbar .main-nav-container {
  display: flex;
  justify-content: center;
  padding: 0 12px !important;
  border-bottom: 1px solid rgba(var(--color-black-rgb),0.08) !important;
  box-shadow: 0 1px 0 rgba(var(--color-black-rgb),0.06);
  height: 100%;
}
.navbar-brand-shell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  padding: 0 10px;
}
.navbar .navbar-brand img { max-height: 32px; }

.brand-logo-dark { display: none; }
[data-theme="dark"] .brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark { display: inline-block; }
.nav-link-icon {
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1rem;
  opacity: 0.9;
}
[data-theme="dark"] .navbar {
  background: rgba(17, 17, 24, 0.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(var(--color-white-rgb),0.05) !important;
  box-shadow: none;
}
[data-theme="dark"] .navbar .main-nav-container {
  border-bottom-color: rgba(var(--color-white-rgb),0.07) !important;
  box-shadow: none;
}


.nav-main-links {
  gap: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
.nav-main-links .nav-item { list-style: none; }
.nav-main-links .nav-link {
  color: var(--color-gray-500) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 15px !important;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s, background-color .15s;
  height: 37px;
  position: relative;
}
.nav-main-links .nav-link span[data-i18n] {
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.nav-main-links .nav-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .15s;
}
.nav-main-links .nav-link.active {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb), 0.06);
  font-weight: 600;
}
.nav-main-links .nav-link.active::after { opacity: 1; }
.nav-main-links .nav-link:hover {
  color: var(--color-ink) !important;
  background: rgba(var(--color-black-rgb),0.05);
}
[data-theme="dark"] .nav-main-links .nav-link { color: var(--color-slate-400) !important; }
[data-theme="dark"] .nav-main-links .nav-link.active {
  color: var(--accent-l) !important;
  background: rgba(var(--accent-rgb), 0.10);
}
[data-theme="dark"] .nav-main-links .nav-link:hover {
  color: var(--color-slate-200) !important;
  background: rgba(var(--color-white-rgb),0.06);
}

.nav-user-area { margin-left: 10px; }


@media (min-width: 992px) {
  .navbar {
    width: 100%;
    padding: 0 !important;
    border-right: 1px solid var(--border);
    box-shadow: none;
    display: flex;
    flex-direction: row;
  }
  .navbar-brand-shell {
    width: var(--left-rail-w);
    border-right: none;
    padding: 0 16px;
  }
  .navbar .main-nav-container {
    border-bottom: none !important;
    box-shadow: none;
    padding: 0 !important;
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .navbar .navbar-collapse {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 100%;
    width: 100%;
    padding: 0 12px;
    overflow: hidden;
  }
  .navbar .nav-main-links {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 8px;
    padding: 0;
    margin: 0;
    min-width: 0;
  }
  .navbar .nav-main-links .nav-item {
    width: auto;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .navbar .nav-main-links .nav-link {
    width: auto;
    justify-content: center;
    height: 42px;
    border-radius: 12px;
    padding: 8px 14px !important;
  }
  .navbar .nav-main-links .nav-link::after { display: none; }
  .navbar .nav-user-area {
    margin-left: auto;
    margin-top: 0;
    padding: 0;
    display: flex;
    white-space: nowrap;
  }
  .navbar .nav-user-card{
    position: absolute;
    right: 0px;
    top: 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-color: var(--sidebar-bg) !important;
    border: 1px solid var(--sidebar-border) !important;
    border-radius: 8px !important;
    padding: 5px 15px 12px 8px !important;
    box-shadow: 0 8px 22px var(--sidebar-border);
    z-index: 110;
  }
  .nav-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-on-primary);
    font-size: 14px;
    font-weight: 700;
    background: var(--gradient-brand);
    flex-shrink: 0;
    z-index: 111;
    cursor: pointer;
  }
  .nav-user-avatar:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.55);
    outline-offset: 2px;
  }
  .nav-user-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 34px;
    margin-right: 42px;
    margin-bottom: 5px;
  }
  .nav-user-locale {
    color: var(--txt-muted);
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  #navUsername {
    display: block !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--txt-dim);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-user-meta #navUsername {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.01em;
  }
}

.navbar-toggler {
  border: 1px solid rgba(var(--color-black-rgb),0.12) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
}
[data-theme="dark"] .navbar-toggler { border-color: rgba(var(--color-white-rgb),0.15) !important; }

@media (max-width: 991.98px) {
  .navbar {
    height: auto;
    min-height: var(--navbar-h);
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .navbar .navbar-collapse {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .nav-main-links {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 10px 0 !important;
    gap: 2px;
  }
  .nav-main-links .nav-link::after { display: none; }
  .nav-user-area {
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
  }
}

#navUsername { color: var(--txt-muted); font-size: var(--fs-sm); }

#langSelect {
  background: var(--color-gray-100) !important;
  border: 1px solid rgba(var(--color-black-rgb),0.10) !important;
  color: var(--color-slate-500) !important;
  border-radius: 8px !important;
  font-size: var(--fs-sm);
}
[data-theme="dark"] #langSelect {
  background: var(--bg-input) !important;
  border-color: var(--border-hi) !important;
  color: var(--txt-dim) !important;
}
#langSelect:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-glow) !important;
}

#themeToggle {
  background: var(--color-gray-100) !important;
  border: 1px solid rgba(var(--color-black-rgb),0.10) !important;
  color: var(--color-slate-500) !important;
  border-radius: 8px !important;
  width: 34px; height: 32px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: var(--fs-md);
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
[data-theme="dark"] #themeToggle {
  background: var(--bg-input) !important;
  border-color: var(--border-hi) !important;
  color: var(--txt-dim) !important;
}
#themeToggle:hover {
  background: var(--bg-hover) !important;
  color: var(--accent) !important;
  border-color: var(--accent-glow) !important;
}

#logoutBtn{
  background: var(--color-gray-100) !important;
  border: 1px solid rgba(var(--color-black-rgb),0.10) !important;
  color: var(--color-slate-500) !important;
  border-radius: 8px !important;
  font-size: var(--fs-sm);
  transition: background .15s, color .15s, border-color .15s;
}
[data-theme="dark"] #logoutBtn {
  background: var(--bg-input) !important;
  border-color: var(--border-hi) !important;
  color: var(--txt-dim) !important;
}
#logoutBtn:hover {
  background: var(--bg-hover) !important;
  color: var(--accent) !important;
  border-color: var(--accent-glow) !important;
}


.container-fluid {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  padding: 0 !important;
}
.container-fluid > .row {
  flex: 1;
  overflow: visible;
  margin: 0 !important;
  flex-wrap: nowrap !important;
}



.list-group-item {
  background: transparent !important;
  border: none !important;
  color: var(--txt-dim) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: var(--fs-sm) !important;
  cursor: pointer;
  transition: background .14s, color .14s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.list-group-item:hover {
  background: var(--bg-hover) !important;
  color: var(--txt) !important;
}
.list-group-item:hover::before { opacity: 0.7; background: var(--accent); }
.list-group-item.active {
  background: var(--bg-active) !important;
  color: var(--accent) !important;
  font-weight: 600;
}
.list-group-item.active::before { opacity: 1; background: var(--accent); }
.list-group-item-action:focus { box-shadow: none !important; }


#mainArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: scroll;
  min-width: 0;
  max-height: 100vh;
}


[data-theme="dark"] .table {
  --bs-table-color: var(--color-slate-200);
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(var(--color-white-rgb),0.12);
  --bs-table-striped-color: var(--color-slate-200);
  --bs-table-striped-bg: rgba(var(--color-white-rgb),0.04);
  --bs-table-hover-color: var(--color-slate-200);
  --bs-table-hover-bg: rgba(var(--color-white-rgb),0.06);
  color: var(--color-slate-200);
}
[data-theme="dark"] .table thead th {
  color: var(--color-slate-300);
  border-bottom-color: rgba(var(--color-white-rgb),0.12);
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: rgba(var(--color-white-rgb),0.08);
}


.table td.cell-null {
  color: var(--bs-secondary-color, #6c757d);
  font-style: italic;
}
[data-theme="dark"] .table td.cell-null {
  color: var(--color-slate-400);
}


.badge-db,
.badge-ia {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.badge-db {
  background: var(--color-db-bg);
  color: var(--color-db);
}
.badge-ia {
  background: var(--color-ai-bg);
  color: var(--color-ai);
}


.shortcut-btn { font-size: var(--fs-xs); padding: 3px 10px; border-radius: 10px; transition: all .15s; }


:root { --db-color: var(--color-success); --db-dark: var(--color-success-dark); --db-glow: rgba(var(--color-success-rgb),0.18); }
.btn-outline-db {
  color: var(--color-success) !important;
  border-color: rgba(var(--color-success-rgb),0.35) !important;
  background: rgba(var(--color-success-rgb),0.06) !important;
}
.btn-outline-db:hover {
  background: rgba(var(--color-success-rgb),0.12) !important;
  color: var(--color-success-dark) !important;
  border-color: rgba(var(--color-success-rgb),0.50) !important;
}


.modal-content {
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 16px 20px;
}
.modal-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-input);
  padding: 12px 20px;
}
[data-theme="dark"] .modal-content {
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.card, .panel-item-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  background: var(--bg-surface);
}
[data-theme="dark"] .card, [data-theme="dark"] .panel-item-card {
  background: var(--bg-surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .card:hover, [data-theme="dark"] .panel-item-card:hover {
  box-shadow: var(--shadow-md);
}


::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--color-black-rgb), 0.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-black-rgb), 0.25); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(var(--color-white-rgb), 0.15); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-white-rgb), 0.25); }


body.auth-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: url(/images/bg.png) no-repeat center center fixed;
  background-size: cover;
  background-color: var(--bg-app);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 38px 34px;
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .auth-card { box-shadow: 0 20px 60px rgba(var(--color-black-rgb),0.50); }
.auth-brand {
  text-align: center;
  display: block;
  margin-bottom: 4px;
}
.auth-brand img { max-height: 56px; }
.auth-subtitle { color: var(--txt-muted); font-size: 0.84em; text-align: center; margin-bottom: 26px; }
.auth-card .nav-tabs { border-bottom: 1px solid var(--border) !important; margin-bottom: 20px; }
.auth-card .nav-tabs .nav-link {
  color: var(--txt-muted) !important;
  border: none !important; border-radius: 0 !important;
  padding: 8px 16px; font-size: 0.88em;
  background: none !important;
}
.auth-card .nav-tabs .nav-link.active {
  color: var(--accent) !important;
  background: none !important;
  border-bottom: 2px solid var(--accent) !important;
  font-weight: 600;
}
.oauth-divider {
  display: flex; align-items: center; gap: 8px;
  color: var(--txt-muted); font-size: 0.82em;
}
.oauth-divider::before, .oauth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.btn-oauth { font-size: 0.85rem; }
.theme-btn {
  position: fixed; top: 12px; right: 16px;
  background: var(--bg-surface); border: 1px solid var(--border);
  color: var(--txt-dim); border-radius: 8px;
  width: 34px; height: 32px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9em; transition: background .15s;
}
.theme-btn:hover { background: var(--bg-input); color: var(--accent); }
.lang-bar { position: fixed; top: 12px; right: 56px; }
.lang-bar .form-select {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--txt-dim) !important;
  border-radius: 8px !important; font-size: 0.82em;
}


.notfound-shell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.notfound-card {
  width: min(100%, 560px);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 30px 28px;
  text-align: center;
}


@media (max-width: 991.98px) {
  .navbar-brand-shell {
    width: auto;
    min-width: auto;
    max-width: none;
    border-right: none;
    padding: 0;
  }
  .container-fluid > .row { flex-wrap: wrap !important; }
  
  .auth-card {
    max-width: 100%;
    padding: 26px 20px;
    border-radius: 16px;
  }
}



.page-form-container { max-width: 860px; margin: 0 auto; }

.badge--success { background: var(--color-success-bg); color: var(--color-success); font-size: var(--fs-xs, 11px); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full, 9999px); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning-emphasis); font-size: var(--fs-xs, 11px); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full, 9999px); }
.badge--error   { background: var(--color-error-bg);   color: var(--color-error);   font-size: var(--fs-xs, 11px); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full, 9999px); }
.badge--info    { background: var(--color-info-bg);    color: var(--color-info);    font-size: var(--fs-xs, 11px); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full, 9999px); }
.badge--neutral { background: var(--color-bg-sunken, var(--color-slate-100)); color: var(--fg-2); font-size: var(--fs-xs, 11px); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full, 9999px); }
.badge--driver  { background: var(--color-primary-soft); color: var(--color-primary-dark, var(--accent-dark)); font-size: var(--fs-xs, 11px); font-weight: 600; padding: 3px 8px; border-radius: var(--radius-full, 9999px); font-family: var(--font-mono, monospace); }

.ds-card {
  background: var(--color-bg-card, var(--bg-surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg, var(--radius, 14px));
  padding: var(--space-6, 1.5rem);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base, 200ms ease);
}
.ds-card:hover { box-shadow: var(--shadow-md); }
.ds-card__eyebrow {
  font-size: var(--fs-xs, 11px); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-primary, var(--accent)); font-weight: 600; margin-bottom: 0.25rem;
}
.ds-card__title { font-size: var(--fs-lg, 15px); font-weight: 600; margin: 0 0 0.25rem; }
.ds-card__body  { color: var(--fg-2); font-size: var(--fs-sm, 13px); margin: 0; }

.ds-feature {
  background: var(--color-bg-card, var(--bg-surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-lg, var(--radius, 14px));
  padding: var(--space-6, 1.5rem);
  display: flex; flex-direction: column; gap: var(--space-4, 1rem);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.ds-feature:hover { transform: translateY(-2px); border-color: var(--color-primary, var(--accent)); box-shadow: var(--shadow-glow); }
.ds-feature__icon {
  width: 44px; height: 44px; border-radius: var(--radius-lg, var(--radius, 14px));
  background: var(--color-primary-soft); display: grid; place-items: center;
  color: var(--color-primary, var(--accent)); flex-shrink: 0;
}





.nav-company-section { min-width: 200px; text-align: left; }
.nav-company-menu-label { display: block; margin-bottom: 2px; }
.nav-company-list { max-height: 260px; overflow-y: auto; }
.nav-company-item,
.nav-company-action {
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--txt-dim);
  cursor: pointer;
  text-decoration: none;
}
.nav-company-item:hover,
.nav-company-action:hover { background: rgba(var(--accent-rgb), 0.10); }
.nav-company-item.active { color: var(--accent); font-weight: 600; }
.nav-company-action { display: flex; align-items: center; }


/* ==== /components/sidebar/sidebar.css ==== */


.sidebar {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--navbar-h));
  padding: 14px 11px 12px;
  min-height: unset;
  overflow-y: scroll;
  background: var(--sidebar-bg) !important;
  border-right: none !important;
  box-shadow: 1px 0 10px rgba(var(--color-black-rgb),0.02);
  flex: 0 0 var(--sidebar-w) !important;
  max-width: var(--sidebar-w) !important;
  width: var(--sidebar-w) !important;
}


.sidebar-section-head { padding: 0 6px; }

#connectionsList .text-muted.small,
#conversationsList .text-muted.small,
#panelsList .text-muted.small {
  line-height: 1.35;
}

#connectionsList,
#conversationsList {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
#btnNewConnection, #btnNewConversation {
  border-color: var(--sidebar-border) !important;
  color: var(--sidebar-txt-dim) !important;
  background: transparent !important;
  width: 24px; height: 24px;
  padding: 0; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px !important;
  flex-shrink: 0;
}
#btnNewConnection:hover, #btnNewConversation:hover {
  background: var(--sidebar-hover) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.sidebar .list-group-item {
  color: var(--sidebar-txt) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  min-height: 34px;
  border: 1px solid transparent !important;
  margin-bottom: 1px;
}
.sidebar .list-group-item::before { display: none; }
.sidebar .list-group-item:hover {
  background: var(--sidebar-hover) !important;
  color: var(--accent) !important;
}
.sidebar .list-group-item.active {
  background: var(--sidebar-active) !important;
  color: var(--accent) !important;
  font-weight: 600;
}
.sidebar .text-muted { color: var(--sidebar-txt-dim) !important; font-size: var(--fs-sm); }
#connectionsList {
  flex: 1;
  overflow-y: auto;
}
.sidebar-item-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sidebar-item-label {
  min-width: 0;
  line-height: 1.25;
}
.sidebar-item-icon {
  width: 18px;
  text-align: center;
  opacity: 0.72;
  flex-shrink: 0;
  font-size: 0.96em;
}
.sidebar .list-group-item:hover .sidebar-item-icon,
.sidebar .list-group-item.active .sidebar-item-icon {
  opacity: 1;
}
.sidebar-pill {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
}
.connection-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.connection-item .sidebar-item-main { flex: 1; }
.conn-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity .14s;
}
.connection-item:hover .conn-actions,
.connection-item.active .conn-actions { opacity: 1; }
.conn-action-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  line-height: 1;
}
.conn-action-btn:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.30);
}
.conn-action-btn-danger:hover {
  color: var(--color-delete);
  background: rgba(var(--color-delete-rgb), 0.10);
  border-color: rgba(var(--color-delete-rgb), 0.28);
}
.sidebar-conn-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.7;
  cursor: pointer;
  border-radius: 3px;
  transition: opacity .15s, background-color .15s;
}
.sidebar-conn-chevron:hover { opacity: 1; background-color: rgba(var(--color-black-rgb),0.08); }
.sidebar-conn-chevron.open { opacity: 1; }
.connection-item.active .sidebar-conn-chevron { opacity: 1; }

.conn-conversations-subtree {
  position: relative;
  margin-left: 10px;
  padding-left: 12px;
  padding-bottom: 2px;
}
.conn-conversations-subtree::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 10px;
  left: 3px;
  width: 1px;
  background: var(--sidebar-border);
}
.conv-empty-label {
  display: block;
  padding: 4px 6px;
  color: var(--sidebar-txt-dim);
}
.conv-new-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 4px 6px;
  margin-top: 2px;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--sidebar-txt-dim);
  cursor: pointer;
  transition: background .13s, color .13s;
  text-align: left;
}
.conv-new-btn:hover {
  background: var(--sidebar-hover);
  color: var(--accent);
}

.sidebar-archived-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.82em;
  color: var(--sidebar-txt-dim);
}
.sidebar-archived-item .conn-action-btn {
  margin-left: auto;
  flex-shrink: 0;
}

.conversation-item {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  color: var(--sidebar-txt) !important;
}
.conversation-item .sidebar-item-main {
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.conv-delete-btn {
  margin-left: auto;
  opacity: 0;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: opacity .15s;
  cursor: pointer;
}
.conversation-item:hover .conv-delete-btn,
.conversation-item.active .conv-delete-btn {
  opacity: 0.55;
}
.conv-delete-btn:hover {
  opacity: 1 !important;
  background: rgba(var(--color-delete-rgb),.12);
}


@media (max-width: 991.98px) {
  .sidebar {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 36vh;
    border-right: none !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
  }
}


/* ==== /css/app-sidebar.css ==== */



.app-shell-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100vh;
  overflow: hidden;
}
.app-shell-layout > #spaView {
  flex: 1 1 auto;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
}


.app-sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  max-width: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border);
  box-shadow: 1px 0 10px rgba(var(--color-black-rgb), 0.02);
  z-index: 100;
}

.app-sidebar-brand {
  display: flex;
  align-items: center;
  height: var(--navbar-h);
  padding: 0 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--sidebar-border);
}
.app-sidebar-brand .navbar-brand { text-decoration: none; line-height: 1; }
.app-sidebar-brand img { max-height: 28px; }


.app-sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px 8px;
}

.app-sidebar .nav-main-links {
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  width: 100%;
}
.app-sidebar .nav-main-links .nav-item { width: 100%; }

.app-sidebar .nav-main-links .nav-link {
  width: 100%;
  justify-content: flex-start;
  height: auto;
  padding: 8px 10px !important;
  border-radius: 8px;
  font-size: 15px;
  color: var(--sidebar-txt) !important;
}

.app-sidebar .nav-main-links .nav-link::after { display: none !important; }
.app-sidebar .nav-main-links .nav-link:hover {
  background: var(--sidebar-hover) !important;
  color: var(--accent) !important;
}
.app-sidebar .nav-main-links .nav-link.active {
  
  
  font-weight: 600;
}
.app-sidebar .nav-link-icon { width: 18px; opacity: 0.8; }


.nav-group-link {
  appearance: none;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.nav-group-chevron {
  flex: 0 0 auto;
  display: inline-block;
  font-size: 11px;
  opacity: 0.45;
  transition: transform .14s;
}
.nav-group-link[aria-expanded="true"] .nav-group-chevron {
  transform: rotate(90deg);
}


.nav-group-children {
  margin: 2px 0 4px 6px;
  padding-left: 4px;
}
.nav-group-children[hidden] { display: none; }


.app-sidebar-footer {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--sidebar-border);
  margin-left: 0;
}
.app-sidebar-footer .nav-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-on-primary);
  font-size: 14px;
  font-weight: 700;
  background: var(--gradient-brand);
  flex-shrink: 0;
  cursor: pointer;
  order: 0;
}
.app-sidebar-footer .nav-user-avatar:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.55);
  outline-offset: 2px;
}


.app-sidebar-footer .nav-user-menu {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 6px);
  z-index: 120;
}
.app-sidebar-footer .nav-user-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--sidebar-bg) !important;
  border: 1px solid var(--sidebar-border) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  box-shadow: 0 10px 26px rgba(var(--color-black-rgb), 0.18);
}
.app-sidebar-footer #navUsername {
  display: block !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--txt-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-sidebar-footer .nav-user-meta { min-width: 0; margin-bottom: 4px; }
.app-sidebar-footer .nav-user-locale { color: var(--txt-muted); font-size: 11px; }


@media (max-width: 991.98px) {
  .app-shell-layout { flex-direction: column; height: auto; overflow: visible; }
  .app-shell-layout > #spaView { height: auto; }
  .app-sidebar {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
  }
  .app-sidebar-brand { border-bottom: none; height: auto; }
  .app-sidebar-nav { flex: 1 1 100%; order: 3; }
  .app-sidebar .nav-main-links { flex-direction: row; flex-wrap: wrap; }
  .app-sidebar .nav-main-links .nav-item { width: auto; }
  .nav-group-children { display: none !important; }
  .app-sidebar-footer { border-top: none; margin-left: auto; }
  .app-sidebar-footer .nav-user-menu { bottom: auto; top: calc(100% + 6px); }
}